diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index ce83240..910299c 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -7,17 +7,27 @@ import { Button } from "@/packages/ui";
 
 export default function HamburgerMenu() {
   const [isOpen, setIsOpen] = useState(false);
-
+  
   return (
     <div>
       <Button
         size="sm"
         variant="outline"
         onClick={() => setIsOpen((prev) => !prev)}
+        className="z-50 absolute top-3 left-2 mb-3"
       >
         {isOpen ? <X /> : <AlignJustify />}
       </Button>
-      {isOpen && <SideNav />}
+      
+      {isOpen && (
+        <div className="absolute top-0 z-30 w-full h-screen bg-black opacity-50" onClick={() => setIsOpen(false)} />
+      )}
+      
+      {isOpen && (
+        <div className="absolute top-0 left-0 z-40">
+          <SideNav />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index aaf41ae..e94dc26 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 export default function SideNav() {
   return (
     <div
-      className={`fixed right-auto border-r-2 border-black h-full py-8 transition-transform transform md:translate-x-0 w-64 bg-white`}
+      className={`fixed right-auto border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white flex md:justify-start justify-center  py-14 md:py-8`}
     >
       <nav className="flex flex-col items-start pr-6 space-y-4">
         {navConfig.sideNavItems.map((item) => (
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index e62224b..dafc2e9 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -11,7 +11,13 @@ export default function TopNav() {
     <nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
       <div className="container max-w-6xl px-4 lg:px-0 mx-auto">
         <div className="flex justify-between items-center h-16">
+          
           {/* Logo Section */}
+
+          
+          <div className="flex items-center  lg:hidden"> 
+            <HamburgerMenu />
+          </div>
           <div className="flex-shrink-0">
             <a
               href="/"
@@ -48,8 +54,7 @@ export default function TopNav() {
               rel="noopener noreferrer"
             >
               <GithubIcon />
-            </Link>
-            <HamburgerMenu />
+            </Link> 
           </div>
           <div className="hidden lg:flex items-center">
             <Link