diff --git a/app/page.tsx b/app/page.tsx
index db302fb..c9a6b84 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -209,63 +209,80 @@ export default function HomePage() {
 
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen px-0 mx-0">
       {/* Hero Section - Full Viewport Height */}
       <div className="min-h-screen flex items-center justify-center relative">
         <div className="container mx-auto px-4">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             {/* Left side - Welcome to HackHub */}
             <div className="space-y-6">
-              <div className="relative">            
-                {/* Main heading with enhanced styling */}
-                <div className="relative z-10 -mt-24 pb-8">
-                  <h1 className="text-6xl lg:text-7xl font-black leading-tight">
-                    <span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-orange-500 to-amber-700 drop-shadow-sm">
-                      <DecryptedText 
-                        text="Welcome to the On-Chain"
-                        animateOn="view"
-                        speed={75}
-                        maxIterations={15}
-                        sequential={true}
-                        revealDirection="start"
-                        className=""
-                        encryptedClassName="text-amber-400/40"
-                      />
-                    </span>
-                    <span className="block text-6xl lg:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-600 to-amber-800 mt-4 tracking-tight">
-                      <DecryptedText 
-                        text="Hackathon Hub."
-                        animateOn="view"
-                        speed={100}
-                        maxIterations={20}
-                        sequential={true}
-                        revealDirection="center"
-                        className=""
-                        encryptedClassName="text-orange-400/30"
-                      />
-                    </span>
-                  </h1>
-                  
-                  {/* Accent line */}
-                   <div className="mt-6 w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>
-                   
-                   <div className="mt-8">
-                     <p className="text-xl lg:text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600 tracking-wider">
-                       <DecryptedText 
-                         text="Transparent. Permissionless. Intuitive."
-                         animateOn="view"
-                         speed={60}
-                         maxIterations={12}
-                         sequential={true}
-                         revealDirection="start"
-                         className=""
-                         encryptedClassName="text-amber-500/30"
-                       />
-                     </p>
-                   </div>
-                </div>
-              </div>
-            </div>
+  <div className="relative">
+    {/* Main heading with enhanced styling */}
+    <div className="relative z-10 
+                    mt-0 sm:-mt-16 lg:-mt-24 
+                    pb-8">
+
+      <h1 className="font-black leading-snug sm:leading-tight
+                     text-4xl sm:text-5xl md:text-6xl lg:text-7xl
+                     max-w-full break-words">
+
+        <span className="block text-transparent bg-clip-text 
+                         bg-gradient-to-r from-amber-600 via-orange-500 to-amber-700 
+                         drop-shadow-sm">
+          <DecryptedText 
+            text="Welcome to the On-Chain"
+            animateOn="view"
+            speed={75}
+            maxIterations={15}
+            sequential={true}
+            revealDirection="start"
+            className=""
+            encryptedClassName="text-amber-400/40"
+          />
+        </span>
+
+        <span className="block font-extrabold text-transparent bg-clip-text 
+                         bg-gradient-to-r from-amber-700 via-orange-600 to-amber-800 
+                         mt-3 sm:mt-4 tracking-tight
+                         text-4xl sm:text-6xl md:text-7xl lg:text-8xl">
+          <DecryptedText 
+            text="Hackathon Hub."
+            animateOn="view"
+            speed={100}
+            maxIterations={20}
+            sequential={true}
+            revealDirection="center"
+            className=""
+            encryptedClassName="text-orange-400/30"
+          />
+        </span>
+      </h1>
+
+      {/* Accent line */}
+      <div className="mt-6 w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>
+
+      <div className="mt-8">
+        <p className="font-semibold tracking-wider
+                      text-lg sm:text-xl lg:text-2xl
+                      text-transparent bg-clip-text 
+                      bg-gradient-to-r from-amber-600 to-orange-600">
+          <DecryptedText 
+            text="Transparent. Permissionless. Intuitive."
+            animateOn="view"
+            speed={60}
+            maxIterations={12}
+            sequential={true}
+            revealDirection="start"
+            className=""
+            encryptedClassName="text-amber-500/30"
+          />
+        </p>
+      </div>
+
+    </div>
+  </div>
+</div>
+
             
             {/* Right side - HackHub image */}
             <div className="flex justify-center lg:justify-end pt-0">
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 16b6895..5edfd8a 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -2,81 +2,141 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+
 // Helper function to get the correct image path for GitHub Pages
 const getImagePath = (path: string) => {
-  // For static export, we need to ensure the path works with GitHub Pages
-  return path.startsWith('/') ? path : `/${path}`;
-};
+  return path.startsWith("/") ? path : `/${path}`
+}
 
 export default function Navigation() {
   const pathname = usePathname()
+  const [open, setOpen] = useState(false)
 
   return (
     <header className="border-b border-amber-100/60 bg-white/95 backdrop-blur-md sticky top-0 z-50 shadow-sm">
-      <div className="px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
-            <div className="w-12 h-12 flex items-center justify-center">
-              <img 
-                src={getImagePath("/block.png")} 
-                alt="HackHub Logo" 
-                width={48} 
-                height={48}
-                className="object-contain"
+      <div className="px-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-14 sm:h-16">
+
+          {/* Logo */}
+          <Link
+            href="/"
+            className="flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity"
+          >
+            <div className="w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
+              <img
+                src={getImagePath("/block.png")}
+                alt="HackHub Logo"
+                className="object-contain w-10 h-10 sm:w-12 sm:h-12"
               />
             </div>
-            <span className="font-bold text-3xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
+            <span className="font-bold text-xl sm:text-2xl lg:text-3xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
               HackHub
             </span>
           </Link>
-          
+
+          {/* Desktop Navigation */}
           <nav className="hidden md:flex items-center gap-1">
-            <Link href="/explorer">
-              <Button 
-                variant="ghost"
-                className={`${
-                  pathname === "/explorer" 
-                    ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
-                    : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
-                } transition-all duration-200 font-medium`}
-              >
-                Explore Hackathons
-              </Button>
-            </Link>
-            <Link href="/createHackathon">
-              <Button 
-                variant="ghost"
-                className={`${
-                  pathname === "/myHackathons" 
-                    ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
-                    : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
-                } transition-all duration-200 font-medium`}
-              >
-                Organize a Hackathon
-              </Button>
-            </Link>
-            <Link href="/myHackathons">
-              <Button 
-                variant="ghost"
-                className={`${
-                  pathname === "/createHackathon" 
-                    ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
-                    : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
-                } transition-all duration-200 font-medium`}
-              >
-                My Hackathons
-              </Button>
-            </Link>
+            <NavButton href="/explorer" active={pathname === "/explorer"}>
+              Explore Hackathons
+            </NavButton>
+            <NavButton href="/createHackathon" active={pathname === "/createHackathon"}>
+              Organize a Hackathon
+            </NavButton>
+            <NavButton href="/myHackathons" active={pathname === "/myHackathons"}>
+              My Hackathons
+            </NavButton>
           </nav>
 
-          <div className="flex items-center gap-3">
-            <ConnectButton />
+          {/* Right Section */}
+          <div className="flex items-center gap-2">
+            <div className="hidden sm:block">
+              <ConnectButton />
+            </div>
+
+            {/* Hamburger */}
+            <button
+              onClick={() => setOpen(!open)}
+              className="md:hidden flex flex-col justify-center gap-1.5 p-2"
+              aria-label="Open menu"
+            >
+              <span className="w-6 h-0.5 bg-gray-800" />
+              <span className="w-6 h-0.5 bg-gray-800" />
+              <span className="w-6 h-0.5 bg-gray-800" />
+            </button>
           </div>
         </div>
       </div>
+
+      {/* Mobile Menu */}
+      {open && (
+        <div className="md:hidden border-t border-amber-100 bg-white">
+          <nav className="flex flex-col px-4 py-3 gap-2">
+            <MobileLink href="/explorer" onClick={() => setOpen(false)}>
+              Explore Hackathons
+            </MobileLink>
+            <MobileLink href="/createHackathon" onClick={() => setOpen(false)}>
+              Organize a Hackathon
+            </MobileLink>
+            <MobileLink href="/myHackathons" onClick={() => setOpen(false)}>
+              My Hackathons
+            </MobileLink>
+
+            <div className="pt-2 sm:hidden">
+              <ConnectButton />
+            </div>
+          </nav>
+        </div>
+      )}
     </header>
   )
-} 
\ No newline at end of file
+}
+
+/* ---------- helpers ---------- */
+
+function NavButton({
+  href,
+  active,
+  children,
+}: {
+  href: string
+  active: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <Link href={href}>
+      <Button
+        variant="ghost"
+        className={`${
+          active
+            ? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
+            : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
+        } transition-all duration-200 font-medium`}
+      >
+        {children}
+      </Button>
+    </Link>
+  )
+}
+
+function MobileLink({
+  href,
+  onClick,
+  children,
+}: {
+  href: string
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className="px-3 py-2 rounded-md text-gray-700 hover:bg-amber-50 hover:text-amber-800 transition font-medium"
+    >
+      {children}
+    </Link>
+  )
+}