diff --git a/components/about.jsx b/components/about.jsx
index bbbad27..2ee7425 100644
--- a/components/about.jsx
+++ b/components/about.jsx
@@ -1,5 +1,6 @@
 import { LanguagesKnownCategory, description1, description2 } from "config";
 import { AboutStyle } from "./about.style";
+import Image from "next/image";
 
 function about() {
 	return (
@@ -23,9 +24,11 @@ function about() {
 						);
 					})}
 				</div>
+				<div className="content">
+                    <p>{description2}</p>
+                </div>
 				<div className="content-2">
-					<p>{description2}</p>
-					<img src="https://bravo68web.me/images/header_.png" />
+					<Image src="/images/header-banner.png" alt="cool lang and framework banner" width="1200" height="270" quality="100" className="banner-image-img"/>
 				</div>
 			</div>
 		</AboutStyle>
diff --git a/components/about.style.jsx b/components/about.style.jsx
index 61a96f6..570e8dd 100644
--- a/components/about.style.jsx
+++ b/components/about.style.jsx
@@ -3,18 +3,14 @@ import styled from "styled-components";
 export const AboutStyle = styled.div`
 	background-color: var(--color1);
 	overflow-y: scroll !important;
-	margin: 0;
-	top: 50%;
-	left: 50%;
+	overflow-x: hidden !important;
+	padding: 2rem;
 	height: 100vh;
-	padding-top: 12em;
-	/* padding-bottom: 8em; */
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	text-align: center;
-	/* position: relative; */
+	background-image: url("/images/pxfuel-6.jpg");
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-blend-mode: difference;
 	.default {
 		align-items: center;
 		display: flex;
@@ -23,32 +19,31 @@ export const AboutStyle = styled.div`
 		text-align: center;
 		padding-top: 8em;
 		padding-bottom: 8em;
-
-		/* position: absolute; */
-		/* top: 0; */
-
-		/* overflow-y: auto; */
 	}
 	.content {
 		margin-top: 1em;
 		margin-bottom: 1em;
-		margin-left: 1.3em;
-		margin-right: 1.3em;
 		font-weight: bold;
 		font-size: 1.3em;
-		color: var(--color3);
+		color: var(--color14);
+		padding-bottom: 2rem;
+		background-color: var(--color15);
 	}
 	.content-2 {
-		margin-top: 1em;
-		margin-bottom: 1em;
-		margin-left: 1.3em;
-		margin-right: 1.3em;
+		padding-top: 2rem;
 		font-weight: bold;
 		font-size: 1.3em;
 		color: var(--color4);
-		img {
-			width: 90%;
-			padding: 1em;
+	}
+	.banner-image {
+		width: 90%;
+		padding: 1em;
+		.banner-image-img {
+			align-items: center;
+			object-fit: contain;
+			object-position: center;
+			width: auto;
+			height: auto;
 		}
 	}
 	.lang-map {
@@ -58,18 +53,12 @@ export const AboutStyle = styled.div`
 		margin-left: 1.7em;
 		margin-right: 1.7em;
 		align-items: center;
+		padding-bottom: 2rem;
 	}
 	.lang-map-element {
 		padding: 5px;
 		border-radius: 20px;
 		margin: 2px;
-		/* background-color: #${Math.random().toString(16).substring(2, 6)}; */
-		/* background: rgb(34, 193, 195);
-    background: linear-gradient(
-      0deg,
-      rgba(34, 193, 195, 1) 0%,
-      rgba(253, 187, 45, 1) 100%
-    ); */
 		font-weight: bold;
 		box-shadow: 10px 9px 0px -3px #fffefe;
 		font-size: 1.1em;
diff --git a/components/art.js b/components/art.js
index 49b85b2..1b5a8dc 100644
--- a/components/art.js
+++ b/components/art.js
@@ -11,14 +11,14 @@ function Art() {
 				{projects.map((project, index) => {
 					return (
 						<>
-							<SkillCard key={index} {...project} />
+							<SkillCard key={project.name} {...project} />
 						</>
 					);
 				})}
 				{arts.map((project, index) => {
 					return (
 						<>
-							<SkillCard key={index} {...project} />
+							<SkillCard key={project.name} {...project} />
 						</>
 					);
 				})}
diff --git a/components/art.style.jsx b/components/art.style.jsx
index b933721..4f24e1d 100644
--- a/components/art.style.jsx
+++ b/components/art.style.jsx
@@ -8,7 +8,7 @@ export const ArtStyle = styled.div`
 	justify-content: center;
 	flex-wrap: wrap;
 	overflow-y: auto;
-	background-image: url("/images/background4.jpg");
+	background-image: url("/images/pxfuel-4.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
diff --git a/components/artCard.style.jsx b/components/artCard.style.jsx
index 632de5d..28116d4 100644
--- a/components/artCard.style.jsx
+++ b/components/artCard.style.jsx
@@ -5,7 +5,7 @@ export default styled.div`
 	width: 230px;
 	height: 320px;
 	box-sizing: border-box;
-	background-color: #5f046b;
+	background-color: var(--color12);
 	border-radius: 5px;
 	box-shadow: 10px 9px 0px -3px #fffefe;
 	margin: 5px;
diff --git a/components/contact.style.jsx b/components/contact.style.jsx
index 8efa941..4f7001b 100644
--- a/components/contact.style.jsx
+++ b/components/contact.style.jsx
@@ -6,7 +6,7 @@ export const ContactStyle = styled.div`
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	background-image: url("images/background2.jpg");
+	background-image: url("images/pxfuel-3.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
@@ -130,9 +130,9 @@ export const ContactStyle = styled.div`
 		background: rgb(131, 58, 180);
 		background: linear-gradient(
 			90deg,
-			rgba(131, 58, 180, 1) 0%,
-			rgba(253, 29, 29, 1) 50%,
-			rgba(252, 176, 69, 1) 100%
+			#eeb415 0%,
+			#ff9f21 50%,
+			#eeb415 100%
 		);
 		padding: 10.5px 21px;
 		-webkit-border-radius: 6px;
diff --git a/components/discord-activity.jsx b/components/discord-activity.jsx
index 90ee215..5d69465 100644
--- a/components/discord-activity.jsx
+++ b/components/discord-activity.jsx
@@ -4,8 +4,6 @@ import { useLanyard } from "react-use-lanyard";
 import { discord_id } from "config";
 import DiscordParser from "../libs/discord-parser";
 
-/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
-
 const customStatus = [
 	"Searching for Cat Girls",
 	"Watching Anime",
@@ -21,26 +19,8 @@ export default function DiscordActivity() {
 		userId: discord_id,
 		socket: true,
 	});
-	const [time, setTime] = useState("00:00:00 elapsed");
 	const [pickedStatus] = useState(statusPicker());
-	const padTo2Digits = (num) => {
-		return num.toString().padStart(2, "0");
-	};
 
-	const convertMsToHM = (milliseconds) => {
-		let seconds = Math.floor(milliseconds / 1000);
-		let minutes = Math.floor(seconds / 60);
-		let hours = Math.floor(minutes / 60);
-		seconds = seconds % 60;
-		minutes = seconds >= 30 ? minutes + 1 : minutes;
-		minutes = minutes % 60;
-		hours = hours % 24;
-		return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(
-			seconds
-		)} elapsed`;
-	};
-
-	const [currentTs, setCurrentTs] = useState(Date.now());
 	const [parsedStatus, setParsedStatus] = useState(null);
 
 	useEffect(() => {
@@ -49,33 +29,18 @@ export default function DiscordActivity() {
 		}
 	}, [status, loading]);
 
-	useEffect(() => {
-		let interval = setInterval(() => {
-			if (!loading) {
-				setCurrentTs(Date.now());
-				let timeElapsed = convertMsToHM(
-					currentTs -
-						new Date(parsedStatus?.activity?.timestamps.start)
-				);
-				setTime(timeElapsed);
-			}
-		}, 1000);
-		return () => {
-			clearInterval(interval);
-		};
-	}, [currentTs, loading, convertMsToHM, parsedStatus]);
-
 	if (!loading && parsedStatus && status.discord_status !== "offline") {
 		return (
 			<DicordActivityStyle>
 				<div className="discord-icons">
 					<div className="discord-large-icon">
-						<img src={parsedStatus.activity.assets.large_image} />
+						<img 
+							src={parsedStatus.activity.assets.large_image} alt="discord large image"
+						/>
 					</div>
 					<div className="discord-small-icon">
 						<img
-							src={parsedStatus.activity.assets.small_image}
-							alt=""
+							src={parsedStatus.activity.assets.small_image} alt="discord small image"
 						/>
 					</div>
 				</div>
@@ -94,7 +59,6 @@ export default function DiscordActivity() {
 					<div className="discord-message-files">
 						<b>{parsedStatus.activity.state}</b>
 					</div>
-					<div className="time-elapsed">{time}</div>
 				</div>
 			</DicordActivityStyle>
 		);
@@ -130,7 +94,6 @@ export default function DiscordActivity() {
 					<div className="discord-message-files">
 						<b>{pickedStatus}</b>
 					</div>
-					{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
 				</div>
 			</DicordActivityStyle>
 		);
diff --git a/components/experinces.jsx b/components/experinces.jsx
index 1248d59..9b3d434 100644
--- a/components/experinces.jsx
+++ b/components/experinces.jsx
@@ -5,161 +5,137 @@ function experinces() {
 	return (
 		<ExpStyle>
 			<div className="all">
-			<div className="company">
+				<div className="company">
 					<div className="company-left">
 						<div className="company-img">
-                        	<img src={job_exp_1.logo} alt="company logo" />
+							<img src={job_exp_1.logo} alt="company logo" />
 						</div>
 						<div className="company-info">
-                        	<div className="company-name">
-								{job_exp_1.name}
-							</div>
-                        	<div className="company-desp">
-								{job_exp_1.info}
-							</div>
+							<div className="company-name">{job_exp_1.name}</div>
+							<div className="company-desp">{job_exp_1.info}</div>
 						</div>
 					</div>
 					<div className="company-right">
 						<div className="company-exp-short">
-                        	<div className="company-role-name">
+							<div className="company-role-name">
 								{job_exp_1.role}
 							</div>
-                        	<div className="company-role-dur">
+							<div className="company-role-dur">
 								{job_exp_1.start_date} - {job_exp_1.end_date}
 							</div>
 						</div>
 						<div className="company-role-desp">
 							<p className="company-role-desp-para">
-							{job_exp_1.description}
+								{job_exp_1.description}
 							</p>
 							<div className="tech-list">
 								{job_exp_1.techstack.map((tech) => (
 									<div key={tech} className="tech-name">
 										#{tech}
-                                    </div>
+									</div>
 								))}
 							</div>
 						</div>
-
 					</div>
-
 				</div>
-                <div className="company">
+				<div className="company">
 					<div className="company-left">
 						<div className="company-img">
-                        	<img src={job_exp_2.logo} alt="company logo" />
+							<img src={job_exp_2.logo} alt="company logo" />
 						</div>
 						<div className="company-info">
-                        	<div className="company-name">
-								{job_exp_2.name}
-							</div>
-                        	<div className="company-desp">
-								{job_exp_2.info}
-							</div>
+							<div className="company-name">{job_exp_2.name}</div>
+							<div className="company-desp">{job_exp_2.info}</div>
 						</div>
 					</div>
 					<div className="company-right">
 						<div className="company-exp-short">
-                        	<div className="company-role-name">
+							<div className="company-role-name">
 								{job_exp_2.role}
 							</div>
-                        	<div className="company-role-dur">
+							<div className="company-role-dur">
 								{job_exp_2.start_date} - {job_exp_2.end_date}
 							</div>
 						</div>
 						<div className="company-role-desp">
 							<p className="company-role-desp-para">
-							{job_exp_2.description}
+								{job_exp_2.description}
 							</p>
 							<div className="tech-list">
 								{job_exp_2.techstack.map((tech) => (
 									<div key={tech} className="tech-name">
 										#{tech}
-                                    </div>
+									</div>
 								))}
 							</div>
 						</div>
-
 					</div>
-
 				</div>
-			    <div className="company">
+				<div className="company">
 					<div className="company-left">
 						<div className="company-img">
-                        	<img src={job_exp_3.logo} alt="company logo" />
+							<img src={job_exp_3.logo} alt="company logo" />
 						</div>
 						<div className="company-info">
-                        	<div className="company-name">
-								{job_exp_3.name}
-							</div>
-                        	<div className="company-desp">
-								{job_exp_3.info}
-							</div>
+							<div className="company-name">{job_exp_3.name}</div>
+							<div className="company-desp">{job_exp_3.info}</div>
 						</div>
 					</div>
 					<div className="company-right">
 						<div className="company-exp-short">
-                        	<div className="company-role-name">
+							<div className="company-role-name">
 								{job_exp_3.role}
 							</div>
-                        	<div className="company-role-dur">
+							<div className="company-role-dur">
 								{job_exp_3.start_date} - {job_exp_3.end_date}
 							</div>
 						</div>
 						<div className="company-role-desp">
 							<p className="company-role-desp-para">
-							{job_exp_3.description}
+								{job_exp_3.description}
 							</p>
 							<div className="tech-list">
 								{job_exp_3.techstack.map((tech) => (
 									<div key={tech} className="tech-name">
 										#{tech}
-                                    </div>
+									</div>
 								))}
 							</div>
 						</div>
-
 					</div>
-
 				</div>
 				<div className="company">
 					<div className="company-left">
 						<div className="company-img">
-                        	<img src={job_exp_4.logo} alt="company logo" />
+							<img src={job_exp_4.logo} alt="company logo" />
 						</div>
 						<div className="company-info">
-                        	<div className="company-name">
-								{job_exp_4.name}
-							</div>
-                        	<div className="company-desp">
-								{job_exp_4.info}
-							</div>
+							<div className="company-name">{job_exp_4.name}</div>
+							<div className="company-desp">{job_exp_4.info}</div>
 						</div>
 					</div>
 					<div className="company-right">
 						<div className="company-exp-short">
-                        	<div className="company-role-name">
+							<div className="company-role-name">
 								{job_exp_4.role}
 							</div>
-                        	<div className="company-role-dur">
+							<div className="company-role-dur">
 								{job_exp_4.start_date} - {job_exp_4.end_date}
 							</div>
 						</div>
 						<div className="company-role-desp">
 							<p className="company-role-desp-para">
-							{job_exp_4.description}
+								{job_exp_4.description}
 							</p>
 							<div className="tech-list">
 								{job_exp_4.techstack.map((tech) => (
 									<div key={tech} className="tech-name">
 										#{tech}
-                                    </div>
+									</div>
 								))}
 							</div>
 						</div>
-
 					</div>
-
 				</div>
 			</div>
 		</ExpStyle>
diff --git a/components/experinces.style.jsx b/components/experinces.style.jsx
index 0ebbd41..74da622 100644
--- a/components/experinces.style.jsx
+++ b/components/experinces.style.jsx
@@ -35,11 +35,11 @@ export const ExpStyle = styled.div`
 		gap: 0.2px;
 		.company-img {
 			width: 100%;
-            height: auto;
+			height: auto;
 			margin-bottom: 0.5rem;
 			img {
 				width: 100%;
-                height: auto;
+				height: auto;
 				margin: auto;
 				max-height: 12rem;
 				object-fit: contain;
@@ -47,7 +47,7 @@ export const ExpStyle = styled.div`
 			}
 		}
 	}
-	
+
 	.company-right {
 		width: 75%;
 		.company-exp-short {
@@ -71,8 +71,8 @@ export const ExpStyle = styled.div`
 		.company-role-desp {
 			.company-role-desp-para {
 				font-size: 1.1rem;
-                font-weight: 400;
-                margin-bottom: 0.8rem;
+				font-weight: 400;
+				margin-bottom: 0.8rem;
 			}
 		}
 	}
@@ -80,7 +80,7 @@ export const ExpStyle = styled.div`
 	.company-info {
 		align-items: center;
 		justify-content: center;
-	
+
 		.company-name {
 			color: var(--color3);
 			font-size: 1.7rem;
diff --git a/components/extras.style.jsx b/components/extras.style.jsx
index 243372e..2d0e7ca 100644
--- a/components/extras.style.jsx
+++ b/components/extras.style.jsx
@@ -6,7 +6,7 @@ export const ExtraStyles = styled.div`
 	justify-content: center;
 	align-items: center;
 	padding-top: 15vh;
-	background-image: url("images/background6.webp");
+	background-image: url("images/pxfuel-5.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
@@ -27,6 +27,8 @@ export const ExtraStyles = styled.div`
 		/* height: 100vh; */
 		padding-bottom: 3em;
 		padding-top: 2em;
+		gap: 2.5em;
+		
 		.content {
 			display: flex;
 			flex-wrap: wrap;
@@ -34,6 +36,8 @@ export const ExtraStyles = styled.div`
 			align-items: center;
 			padding-top: 2em;
 			padding-bottom: 2em;
+			background-color: var(--color12);
+
 			&:hover {
 				filter: contrast(200%);
 				-webkit-transform: translateX(-5px) translateY(-5px);
diff --git a/components/main.jsx b/components/main.jsx
index 85130bc..308b029 100644
--- a/components/main.jsx
+++ b/components/main.jsx
@@ -8,7 +8,6 @@ import LinkedInIcon from "@mui/icons-material/LinkedIn";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import FacebookIcon from "@mui/icons-material/Facebook";
 import SvgIcon from "@mui/material/SvgIcon";
-import MastodonSVG from "./assets/mastodon_icon_137420.svg";
 
 import {
 	name,
@@ -44,13 +43,13 @@ function Main() {
 			<div className="content">
 				<div className="profile">
 					<img
-						src="/images/anime-profile-pic.png"
+						src="/images/profile-new-transp.png"
 						alt=""
 						className="profile-img"
 						id="anime-pic"
 					/>
 					<img
-						src="/images/profile-new-transp.png"
+						src="/images/anime-profile-pic.png"
 						alt=""
 						className="profile-img"
 						id="prof-pic"
diff --git a/components/main.style.jsx b/components/main.style.jsx
index a6aa5e2..4d62ed3 100644
--- a/components/main.style.jsx
+++ b/components/main.style.jsx
@@ -7,7 +7,7 @@ export default styled.main`
 	width: 100%;
 	justify-content: center;
 	align-items: center;
-	background-image: url("/images/background.jpg");
+	background-image: url("/images/pxfuel.jpg");
 	background-size: cover;
 	background-position: center;
 	#prof-pic {
diff --git a/components/nav.jsx b/components/nav.jsx
index 2b48314..bb5c3c9 100644
--- a/components/nav.jsx
+++ b/components/nav.jsx
@@ -40,7 +40,7 @@ const LINKS = [
 ];
 
 function Nav() {
-	const { loading, status /*, websocket */ } = useLanyard({
+	const { loading, status } = useLanyard({
 		userId: discord_id,
 		socket: true,
 	});
@@ -76,7 +76,7 @@ function Nav() {
 
 			<div className="links">
 				{LINKS.map(({ title, href }, index) => (
-					<div key={index} className="link">
+					<div key={title} className="link">
 						<Link href={href}>{title}</Link>
 					</div>
 				))}
diff --git a/components/qbadges.style.jsx b/components/qbadges.style.jsx
index 3980111..fa1734a 100644
--- a/components/qbadges.style.jsx
+++ b/components/qbadges.style.jsx
@@ -6,7 +6,7 @@ export const QBStyles = styled.div`
 	justify-content: center;
 	align-items: center;
 	padding-top: 15vh;
-	background-image: url("images/background6.webp");
+	background-image: url("images/pxfuel-5.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
diff --git a/components/resume.jsx b/components/resume.jsx
index 99ee276..242aa7b 100644
--- a/components/resume.jsx
+++ b/components/resume.jsx
@@ -13,10 +13,7 @@ function Resume() {
 					initialDoc: "/resume.pdf",
 				},
 				viewer.current
-			).then((instance) => {
-				const { docViewer } = instance;
-				// you can now call WebViewer APIs here...
-			});
+			)
 		});
 	}, []);
 	return (
diff --git a/components/skillCard.styled.js b/components/skillCard.styled.js
index cc426e2..662a0cc 100644
--- a/components/skillCard.styled.js
+++ b/components/skillCard.styled.js
@@ -5,7 +5,7 @@ export default styled.div`
 	display: inline-flex;
 	/* box-shadow: 10px 9px 0px -3px #fffefe; */
 	.card {
-		background-color: var(--color1);
+		background-color: var(--color13);
 		padding: 15px;
 		width: 100%;
 		/* min-width: 225px; */
diff --git a/components/skills.style.js b/components/skills.style.js
index db8df0c..0251bb7 100644
--- a/components/skills.style.js
+++ b/components/skills.style.js
@@ -9,7 +9,7 @@ export default styled.div`
 	align-items: center;
 	flex-direction: column;
 	overflow-y: auto !important;
-	background-image: url("/images/background5.jpg");
+	background-image: url("/images/pxfuel-2.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
diff --git a/components/tootCard.style.jsx b/components/tootCard.style.jsx
index 35b3fa5..026f1f5 100644
--- a/components/tootCard.style.jsx
+++ b/components/tootCard.style.jsx
@@ -5,7 +5,7 @@ export default styled.div`
 	width: 230px;
 	height: 100%;
 	box-sizing: border-box;
-	background-color: #aa78f6;
+	background-color: #aa78f6ac;
 	border-radius: 5px;
 	box-shadow: 10px 9px 0px -3px #7b3ea7;
 	margin: 8px;
diff --git a/components/toots.style.jsx b/components/toots.style.jsx
index 7279fc9..0a63a32 100644
--- a/components/toots.style.jsx
+++ b/components/toots.style.jsx
@@ -8,7 +8,7 @@ export const ArtStyle = styled.div`
 	justify-content: center;
 	flex-wrap: wrap;
 	overflow-y: auto;
-	background-image: url("/images/background7.png");
+	background-image: url("/images/pxfuel-2.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
diff --git a/components/vsexts.style.js b/components/vsexts.style.js
index 7b8391b..ba5b7a4 100644
--- a/components/vsexts.style.js
+++ b/components/vsexts.style.js
@@ -6,13 +6,14 @@ export const ExtraStyles = styled.div`
 	justify-content: center;
 	align-items: center;
 	padding-top: 15vh;
-	background-image: url("images/background3.jpg");
+	background-image: url("images/pxfuel-4.jpg");
 	background-size: cover;
 	background-position: center;
 	background-attachment: fixed;
 	background-repeat: no-repeat;
 	overflow-y: scroll !important;
 	height: 100vh;
+	gap: 1rem;
 	.title {
 		font-size: 2rem;
 		font-weight: bold;
diff --git a/config.js b/config.js
index 8c7723a..8b1d38f 100644
--- a/config.js
+++ b/config.js
@@ -213,6 +213,69 @@ export const extra = [
 ];
 
 export const projects = [
+	{
+		name: "vs-presence-server",
+		type: "project",
+		description: "This is a server that allows you to project your vscode presence to a custom rich presence server.",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/vsc-presence-server",
+	},
+	{
+		name: "Stockpile",
+		type: "project",
+		description: "Redis from Scratch using Nodejs [No External Dependencies] ",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/stockpile",
+	},
+	{
+		name: "api-v1",
+		type: "project",
+		description: "My Old API",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/api-v1",
+	},
+	{
+		name: "webrtc-call-app",
+		type: "project",
+		description: "WebRTC Video Call Application",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/webrtc-call-app",
+	},
+	{
+		name: "stockpile-node-sdk",
+		type: "project",
+		description: "NodeJS SDK for Stockpile",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/stockpile-node-sdk"
+	},
+	{
+		name: "emailengine-foss",
+		type: "project",
+		description: "FOSS Fork for EmailEmgine",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/emailengine-foss",
+	},
+	{
+		name: "typescript-express-hasura-pgsql-template",
+		type: "project",
+		description: "A Template for a Typescript Express Server with Hasura and Postgres",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/typescript-express-hasura-pgsql-template"
+	},
+	{
+		name: "cat-as-a-service",
+		type: "project",
+		description: "Cat as a Service API",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/gdsclpu/cat-as-a-service"
+	},
+	{
+		name: "SHX",
+		type: "project",
+		description: "Shx is a platform ment to store and share files, images, text and URLs with ease.",
+		image: "/images/GitHub-Logo.png",
+		url: "https://github.com/BRAVO68WEB/shx"
+	},
 	{
 		name: "Enterprise Workspace Images [arm64]",
 		type: "project",
diff --git a/next.config.js b/next.config.js
index 1ce44f1..8103380 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,5 +3,15 @@ const moduleExports = {
 	compiler: {
 		styledComponents: true,
 	},
+	images: {
+		remotePatterns: [
+		  {
+			protocol: 'https',
+			hostname: 'bravo68web.me',
+			port: '',
+			pathname: '/images/**/*.{jpg,jpeg,png,svg,gif,webp}',
+		  },
+		],
+	},
 };
 module.exports = moduleExports;
diff --git a/pages/index.js b/pages/index.js
index 698332b..57c9ed6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,12 @@
 import Head from "next/head";
 import Nav from "components/nav";
-import Main from "components/main";
+// import Main from "components/main";
 import BMC from "components/buymeacoffee";
+import dynamic from 'next/dynamic';
+
+const Main = dynamic(() => import('components/main'), {
+	ssr: false, // Disable server-side rendering
+});
 
 export default function Home() {
 	return (
@@ -15,7 +20,6 @@ export default function Home() {
 			<Nav />
 			<Main />
 			<BMC />
-			{/* <Footer /> */}
 		</div>
 	);
 }
diff --git a/public/images/background.jpg b/public/images/background.jpg
deleted file mode 100644
index 49257b2..0000000
Binary files a/public/images/background.jpg and /dev/null differ
diff --git a/public/images/background2.jpg b/public/images/background2.jpg
deleted file mode 100644
index e476d4a..0000000
Binary files a/public/images/background2.jpg and /dev/null differ
diff --git a/public/images/background3.jpg b/public/images/background3.jpg
deleted file mode 100644
index 7903000..0000000
Binary files a/public/images/background3.jpg and /dev/null differ
diff --git a/public/images/background4.jpg b/public/images/background4.jpg
deleted file mode 100644
index 71ba439..0000000
Binary files a/public/images/background4.jpg and /dev/null differ
diff --git a/public/images/background5.jpg b/public/images/background5.jpg
deleted file mode 100644
index 4832b53..0000000
Binary files a/public/images/background5.jpg and /dev/null differ
diff --git a/public/images/background6.webp b/public/images/background6.webp
deleted file mode 100644
index 885ab3b..0000000
Binary files a/public/images/background6.webp and /dev/null differ
diff --git a/public/images/background7.png b/public/images/background7.png
deleted file mode 100644
index 039b3f6..0000000
Binary files a/public/images/background7.png and /dev/null differ
diff --git a/public/images/desktop-1024x576.jpg b/public/images/desktop-1024x576.jpg
new file mode 100644
index 0000000..26a6401
Binary files /dev/null and b/public/images/desktop-1024x576.jpg differ
diff --git a/public/images/header-banner.png b/public/images/header-banner.png
new file mode 100644
index 0000000..64b9b37
Binary files /dev/null and b/public/images/header-banner.png differ
diff --git a/public/images/pxfuel-2.jpg b/public/images/pxfuel-2.jpg
new file mode 100644
index 0000000..e1f9567
Binary files /dev/null and b/public/images/pxfuel-2.jpg differ
diff --git a/public/images/pxfuel-3.jpg b/public/images/pxfuel-3.jpg
new file mode 100644
index 0000000..b0cf962
Binary files /dev/null and b/public/images/pxfuel-3.jpg differ
diff --git a/public/images/pxfuel-4.jpg b/public/images/pxfuel-4.jpg
new file mode 100644
index 0000000..5a92edf
Binary files /dev/null and b/public/images/pxfuel-4.jpg differ
diff --git a/public/images/pxfuel-5.jpg b/public/images/pxfuel-5.jpg
new file mode 100644
index 0000000..dc4223b
Binary files /dev/null and b/public/images/pxfuel-5.jpg differ
diff --git a/public/images/pxfuel-6.jpg b/public/images/pxfuel-6.jpg
new file mode 100644
index 0000000..bfc2e81
Binary files /dev/null and b/public/images/pxfuel-6.jpg differ
diff --git a/public/images/pxfuel.jpg b/public/images/pxfuel.jpg
new file mode 100644
index 0000000..098ec09
Binary files /dev/null and b/public/images/pxfuel.jpg differ
diff --git a/styles/globals.css b/styles/globals.css
index 177a7f5..3d452f6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -13,6 +13,10 @@
 	--color9: #f5a80f;
 	--color10: #0ffaac;
 	--color11: rgba(255, 255, 255, 0.1);
+	--color12: rgba(67, 7, 55, 0.484);
+	--color13: rgba(53, 3, 9, 0.8);
+	--color14: rgb(255, 255, 255);
+	--color15: rgba(5, 59, 61, 0.333);
 	--font: "Source Code Pro", monospace;
 	--color-cursor: 220, 90, 90;
 	--cursor-outline-shade: 0.3;