diff --git a/app/globals.css b/app/globals.css
index 07522dd..1a62bb6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -11,11 +11,16 @@ html {
 	font-size: 17px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1268px) {
 	html {
 		font-size: 14px !important;
 	}
 }
+@media (max-width: 768px) {
+	html {
+		font-size: 13px !important;
+	}
+}
 
 body {
 	font-family: 'Poppins', sans-serif !important;
diff --git a/app/page.js b/app/page.js
index e6f68d3..e591eb4 100644
--- a/app/page.js
+++ b/app/page.js
@@ -3,6 +3,15 @@ import React from "react";
 import ReactFullpage from "@fullpage/react-fullpage";
 import Image from "next/image";
 import "./globals.css";
+// components
+import Button from "@/components/Button";
+// icons
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faInstagram } from "@fortawesome/free-brands-svg-icons";
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 
 const MyPage = () => {
 	const fullpageOptions = {
@@ -20,16 +29,25 @@ const MyPage = () => {
 						<div className="section">
 							<div className="mx-auto container grid grid-cols-1 md:grid-cols-3 gap-4 p-10">
 								<div className="col-span-2 flex flex-col justify-center items-center md:items-start text-center md:text-start">
-									<h3 className="text-2xl mb-3 font-medium text tracking-[.5rem] text-gray-500">
-										Alvalens | Portofolio
-									</h3>{" "}
 									<div className="block md:hidden col-span-1 mx-auto my-10">
-										<div className="bg-slate-500 rounded-full h-72 w-72"></div>
+										<div className="bg-slate-500 rounded-full h-60 w-60">
+											<Image
+												src="/img/me.jpg"
+												layout="intrinsic"
+												width={500}
+												height={500}
+												className="rounded-full w-full h-full object-cover "
+												alt="Alvalens"
+											/>
+										</div>
 									</div>
-									<h1 className="text-5xl md:text-8xl font-bold">
+									<h3 className="uppercase text-xl mb-3 font-normal text tracking-[.5rem] text-gray-500">
+										Alvalen Shafel
+									</h3>
+									<h1 className="text-5xl md:text-8xl font-bold my-2 md:my-5">
 										Full Stack Developer
 									</h1>
-									<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]">
+									<p className="title text-md  md:text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]">
 										A junior fullstack developer who
 										currently focused on Web Development.
 										Other than that, I also interested in
@@ -37,25 +55,142 @@ const MyPage = () => {
 										I love to learn new things and always
 										open to new opportunities.
 									</p>
+									<div className="buttons flex flex-row justify-center items-center space-x-4 mt-10">
+										<Button variation="primary">
+											Download CV
+										</Button>
+										<Button variation="secondary">
+											Contact Me
+										</Button>
+									</div>
 								</div>
-								<div className="hidden md:block col-span-1 mx-auto">
-									<div className="bg-slate-500 rounded-full h-72 w-72"></div>
+								<div className="hidden md:flex col-span-1 mx-auto justify-center items-center ">
+									<div className=" rounded-full h-auto w-auto aspect-square md:px-12">
+										<Image
+											src="/img/me.jpg"
+											layout="intrinsic"
+											width={500}
+											height={500}
+											className="rounded-full w-full h-full object-cover grayscale hover:grayscale-0"
+											alt="Alvalens"
+										/>
+									</div>
 								</div>
 							</div>
 						</div>
 						<div className="section">
-							<h1>Interactive Section 2</h1>
-							<p>Content of interactive section 2</p>
+							<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
+								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
+									<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></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">
+										About Me
+									</h1>
+									<div className="flex justify-center items-center flex-col my-5 ">
+										<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
+										<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
+									</div>
+									<p className="title  text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
+										A brief introduction about me and my
+										interest.
+									</p>
+									<Button variation="primary">
+										Learn More
+									</Button>
+								</div>
+							</div>
 						</div>
 						<div className="section">
-							<h1>Interactive Section 2</h1>
-							<p>Content of interactive section 2</p>
+							<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
+								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
+									<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></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">
+										My Projects
+									</h1>
+									<div className="flex justify-center items-center flex-col my-5 ">
+										<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
+										<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
+									</div>
+									<p className="title  text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
+										This is some of my projects that I have
+										done and currently working on.
+									</p>
+									<Button variation="primary">
+										Learn More
+									</Button>
+								</div>
+							</div>
 						</div>
 						<div className="section">
-							<h1>Interactive Section 2</h1>
-							<p>Content of interactive section 2</p>
+							<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
+								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
+									<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></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">
+										Get In Touch
+									</h1>
+									<div className="flex justify-center items-center flex-col my-5 ">
+										<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
+										<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
+									</div>
+									<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
+										Feel free to contact me if you have any
+										questions or just want to say hi.
+									</p>
+									<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
+										alvalen.shafel04@gmail.com
+									</p>
+									{/* icons */}
+									<div className="flex justify-center items-center space-x-4">
+										<a
+											href="#"
+											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
+											<FontAwesomeIcon
+												icon={faEnvelope}
+												className="text-4xl"
+											/>
+										</a>
+
+										<a
+											href="#"
+											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
+											<FontAwesomeIcon
+												icon={faGithub}
+												className="text-4xl"
+											/>
+										</a>
+										<a
+											href="#"
+											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
+											<FontAwesomeIcon
+												icon={faInstagram}
+												className="text-4xl"
+											/>
+										</a>
+										<a
+											href="#"
+											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
+											<FontAwesomeIcon
+												icon={faLinkedin}
+												className="text-4xl"
+											/>
+										</a>
+										<a
+											href="#"
+											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
+											<FontAwesomeIcon
+												icon={faDiscord}
+												className="text-4xl"
+											/>
+										</a>
+									</div>
+								</div>
+							</div>
 						</div>
-						{/* ... Other interactive sections ... */}
 					</ReactFullpage.Wrapper>
 				)}
 				{...fullpageOptions} // Pass fullpage options to the component
diff --git a/app/projects/page.js b/app/projects/page.js
new file mode 100644
index 0000000..e69de29
diff --git a/components/Button.js b/components/Button.js
new file mode 100644
index 0000000..efe6ae7
--- /dev/null
+++ b/components/Button.js
@@ -0,0 +1,13 @@
+const Button = ({ children, variation, ...props }) => (
+	<button
+		{...props}
+		className={`title  rounded-2xl px-8 py-2 shadow-md transition duration-300 ease-in-out ${
+			variation === "primary"
+				? "bg-gray-400 hover:bg-slate-500 text-gray-100 hover:text-white"
+				: "transparent border border-gray-400 hover:border-slate-500 text-gray-400 hover:text-gray-300"
+		}`}>
+		{children}
+	</button>
+);
+
+export default Button;
\ No newline at end of file
diff --git a/components/Navbar.js b/components/Navbar.js
index e79e9a1..556e63e 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -20,11 +20,10 @@ const Navbar = () => {
 				{/* toggler */}
 				<div className="flex flex-row items-center">
 					<button
-						className="burger button flex flex-col justify-center items-center space-y-2"
+						className="burger button flex flex-col justify-center items-center space-y-1.5"
 						onClick={toggleNav}>
 						<div
-							className={`w-8 h-1 bg-black rounded-full 
-							}`}></div>
+							className={`w-8 h-1 bg-black rounded-full`}></div>
 						<div
 							className={`w-8 h-1 bg-black rounded-full`}></div>
 						<div
@@ -43,18 +42,17 @@ const Navbar = () => {
 };
 export default Navbar;
 
-const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => {
+const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 	const closeNav = () => {
-		navRef.current.classList.remove("bg-gray-700");
 		setIsNavOpen(false);
 	};
 
 	return (
 		<div
-			className={`fixed z-50 w-full h-screen flex m-auto items-center justify-center backdrop-blur-sm ${
+			className={`fixed z-50 w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease-out duration-300 ${
 				isNavOpen ? "" : "opacity-0 pointer-events-none"
 			}`}>
-			<div className="relative backdrop-blur-sm opacity-95 m-auto flex flex-col items-center space-x-8 min-h-[80vh] bg-gray-700 min-w-[90vw]  rounded-3xl">
+			<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[80vh] bg-gray-700 min-w-[90vw]  rounded-3xl">
 				{/* close buton */}
 				<div className="absolute top-0 right-0 m-4">
 					<button className=" button" onClick={closeNav}>
@@ -62,7 +60,7 @@ const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => {
 						<div className="w-8 h-1 bg-white rounded-full -rotate-45 transform  translate-x-[2px]"></div>
 					</button>
 				</div>
-				<div className="flex flex-col items-center space-y-8 m-auto">
+				<div className="flex flex-col items-center space-y-8 my-auto mx-0">
 					{/* title */}
 					<h1 className="text-6xl font-bold text-white">Menu</h1>
 					<a href="#home" className="text-2xl font-bold text-white">
diff --git a/components/Sidebar.js b/components/Sidebar.js
index eb4fa2a..d5fdc0f 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -6,7 +6,6 @@ import {
 	faFolderOpen,
 	faEnvelope,
 } from "@fortawesome/free-solid-svg-icons";
-import { fullpageApi } from "@fullpage/react-fullpage";
 const Sidebar = () => {
 
 	const handleMoveToSection = (index) => {
@@ -21,7 +20,7 @@ const Sidebar = () => {
     return "";
   };
 	return (
-		<div className="fixed z-50 bg-gray-600 h-[50vh] w-14 flex flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
+		<div className="hidden md:flex fixed z-50 bg-gray-600 h-[50vh] w-14  flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
 			<ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
 				<li>
 					<button onClick={() => handleMoveToSection(1)}>
@@ -29,7 +28,7 @@ const Sidebar = () => {
 					</button>
 				</li>
 				<li>
-					<button  onClick={() => handleMoveToSection(2)}>
+					<button onClick={() => handleMoveToSection(2)}>
 						<FontAwesomeIcon icon={faUser} className="text-xl" />
 					</button>
 				</li>
@@ -42,7 +41,7 @@ const Sidebar = () => {
 					</button>
 				</li>
 				<li>
-					<button  onClick={() => handleMoveToSection(4)}>
+					<button onClick={() => handleMoveToSection(4)}>
 						<FontAwesomeIcon
 							icon={faEnvelope}
 							className="text-xl"
diff --git a/public/img/me.jpg b/public/img/me.jpg
new file mode 100644
index 0000000..72c9b62
Binary files /dev/null and b/public/img/me.jpg differ