diff --git a/app/(root)/page.js b/app/(root)/page.js
index 2b91656..ba688b8 100644
--- a/app/(root)/page.js
+++ b/app/(root)/page.js
@@ -8,6 +8,7 @@ import Link from "next/link";
 // components
 import Button from "@/components/Button";
 import Me from "../../public/img/me.jpg";
+import MeAbout from "@/public/img/me2.jpg";
 import Hr from "@/components/Hr";
 // icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -145,7 +146,15 @@ const MyPage = () => {
 											delay: 0.5,
 											type: "spring",
 										}}
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
+											<Image 
+												src={MeAbout}
+												layout="fill"
+												className="object-cover"
+												alt="Alvalens"
+												placeholder="blur"
+											/>
+										</motion.div>
 								</div>
 								<div className="z-10 w-full absolute md:w-auto  md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5">
 									<motion.h1
diff --git a/app/about/page.js b/app/about/page.js
index 4063578..cc7b77e 100644
--- a/app/about/page.js
+++ b/app/about/page.js
@@ -22,10 +22,18 @@ export default function Page() {
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
-							initial={{  scale: 1 }}
+							initial={{ scale: 1 }}
 							animate={{ scale: 1.6 }}
-							transition={{  ease: "circOut", duration: 1}}
-							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
+							transition={{ ease: "circOut", duration: 1 }}
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0">
+							<Image
+								src={Me2}
+								alt="Alvalens"
+								layout="fill"
+								objectFit="cover"
+								placeholder="blur"
+							/>
+						</motion.div>
 					</div>
 					<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
 						<h1 className="text-5xl md:text-8xl font-bold">
@@ -39,8 +47,8 @@ export default function Page() {
 							A brief introduction about me and my interest.
 						</p>
 						<motion.div
-							initial={{ opacity: 0,  }}
-							animate={{ opacity: 1, }}
+							initial={{ opacity: 0 }}
+							animate={{ opacity: 1 }}
 							transition={{ duration: 0.5, ease: "circOut" }}
 							onClick={() => {
 								window.scrollTo({
@@ -93,7 +101,7 @@ export default function Page() {
 										scale: 1,
 										x: 0,
 									}}
-									transition={{ delay: 0.3}}
+									transition={{ delay: 0.3 }}
 									className="w-full h-full">
 									<Image
 										src={Me2}
@@ -118,7 +126,6 @@ export default function Page() {
 									}}
 									transition={{
 										delay: 0.5,
-										
 									}}
 									className="w-full h-full">
 									<Image
@@ -144,7 +151,7 @@ export default function Page() {
 						}}
 						transition={{
 							delay: 0.5,
-							
+
 							type: "spring",
 						}}>
 						<h2 className="text-2xl font-bold tracking-wider mb-3">
@@ -207,7 +214,7 @@ export default function Page() {
 						}}
 						transition={{
 							delay: 0.5,
-							
+
 							type: "spring",
 						}}>
 						<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase ">
@@ -279,7 +286,7 @@ export default function Page() {
 						}}
 						transition={{
 							delay: 0.6,
-							
+
 							type: "spring",
 						}}>
 						<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase">
@@ -330,7 +337,7 @@ export default function Page() {
 							}}
 							transition={{
 								delay: 0.5,
-								
+
 								type: "spring",
 							}}></motion.div>
 						<motion.div
@@ -345,7 +352,7 @@ export default function Page() {
 							}}
 							transition={{
 								delay: 0.5,
-								
+
 								type: "spring",
 							}}></motion.div>
 						<motion.h1
@@ -360,7 +367,7 @@ export default function Page() {
 							}}
 							transition={{
 								delay: 0.7,
-								
+
 								type: "spring",
 							}}>
 							Education &amp; Experience
@@ -380,7 +387,7 @@ export default function Page() {
 						}}
 						transition={{
 							delay: 0.5,
-							
+
 							type: "spring",
 						}}>
 						<h2 className="text-2xl font-bold mb-3">
@@ -415,7 +422,7 @@ export default function Page() {
 						}}
 						transition={{
 							delay: 0.5,
-							
+
 							type: "spring",
 						}}>
 						<h2 className="text-2xl font-bold mb-3">
@@ -453,7 +460,7 @@ export default function Page() {
 							}}
 							transition={{
 								delay: 0.7,
-								
+
 								type: "spring",
 							}}>
 							Get In Touch{" "}
diff --git a/app/layout.js b/app/layout.js
index 9b27e21..e3e3d7b 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,18 +1,22 @@
-"use client";
+import dynamic from "next/dynamic";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
-import { config } from '@fortawesome/fontawesome-svg-core'
-import '@fortawesome/fontawesome-svg-core/styles.css'
-config.autoAddCss = false
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
 
-
-import TopProgressBar from "@/components/TopProgressBar";
 import "./nprogress.css";
 export const metadata = {
 	title: "Create Next App",
 	description: "Generated by create next app",
 };
+
+const TopProgressBar = dynamic(() => import("@/components/TopProgressBar"), {
+	ssr: false,
+});
+
 export default function RootLayout({ children }) {
+
 	return (
 		<html lang="en">
 			<body>
diff --git a/components/TopProgressbar.jsx b/components/TopProgressbar.jsx
index 9851b85..bb2d9ff 100644
--- a/components/TopProgressbar.jsx
+++ b/components/TopProgressbar.jsx
@@ -1,3 +1,4 @@
+"use client"
 import Router from "next/router";
 import NProgress from "nprogress";
 
diff --git a/public/img/me2.jpg b/public/img/me2.jpg
index a012897..6a781f7 100644
Binary files a/public/img/me2.jpg and b/public/img/me2.jpg differ