diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fcba206..65f929f 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,6 @@
 import "./App.css";
-import { Navigate, Route , Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
-import ThemeToggle from "./components/common/ThemeToggle";
 import Home from "./pages/LandingPage";
 import DsaDashboard from "./pages/DsaDashboard";
 import InterviewExp from "./pages/InterviewExp";
@@ -16,19 +15,18 @@ function App() {
     <>
 
       <Toaster position="top-center" reverseOrder={false} />
-      <ThemeToggle />
       <Routes>
-          <Route path="/signup" element={<AuthPage/>} />
-            <Route path="/" element={<MainLayout/>} >
-                  <Route index element={<Navigate to="/home" />} />
-                  <Route path="/home" element={<Home/>} />
-                  <Route path="dsa" element={<DsaDashboard/>} />
-                  <Route path="interviewExp" element={<InterviewExp/>} />
-                  <Route element={<ProtectedRoute />}>
-                  <Route path="profile" element={<ProfilePage/>} />
-                  </Route>
+        <Route path="/signup" element={<AuthPage />} />
+        <Route path="/" element={<MainLayout />} >
+          <Route index element={<Navigate to="/home" />} />
+          <Route path="/home" element={<Home />} />
+          <Route path="dsa" element={<DsaDashboard />} />
+          <Route path="interviewExp" element={<InterviewExp />} />
+          <Route element={<ProtectedRoute />}>
+            <Route path="profile" element={<ProfilePage />} />
           </Route>
-          <Route path="*" element={ <NotFound/>} />
+        </Route>
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </>
   );
diff --git a/frontend/src/components/miniCompo/CTA.jsx b/frontend/src/components/miniCompo/CTA.jsx
index 2f3769a..ad6f22a 100644
--- a/frontend/src/components/miniCompo/CTA.jsx
+++ b/frontend/src/components/miniCompo/CTA.jsx
@@ -4,25 +4,25 @@ import { useNavigate } from "react-router-dom";
 export default function CTASection() {
   const navigate = useNavigate();
   return (
-    <section className="px-6 py-20">
+    <section className="px-4 sm:px-6 py-12 sm:py-16 md:py-20">
       <div className="max-w-5xl mx-auto">
-        <div className="bg-[#C1502E] border-4 border-black p-16 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] text-center relative overflow-hidden">
+        <div className="bg-[#C1502E] border-4 border-black p-6 sm:p-10 md:p-12 lg:p-16 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] sm:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] md:shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] text-center relative overflow-hidden">
           <div className="relative z-10">
-            <div className="flex justify-center gap-2 mb-6">
+            <div className="flex justify-center gap-1 sm:gap-2 mb-4 sm:mb-6">
               {[...Array(5)].map((_, i) => (
-                <Star key={i} className="h-8 w-8 fill-[#F5E6D3] text-[#F5E6D3]" />
+                <Star key={i} className="h-5 w-5 sm:h-6 sm:w-6 md:h-8 md:w-8 fill-[#F5E6D3] text-[#F5E6D3]" />
               ))}
             </div>
-            <h3 className="text-5xl md:text-6xl font-black text-[#F5E6D3] mb-6">
+            <h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#F5E6D3] mb-4 sm:mb-6">
               READY TO ANSWER<br />THE CALL?
             </h3>
-            <p className="text-2xl font-bold text-[#F5E6D3]/90 mb-10 max-w-2xl mx-auto">
+            <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-bold text-[#F5E6D3]/90 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto px-2">
               Join hundreds of creative minds building the future, one line of code at a time.
             </p>
-            <button onClick={ () => ( navigate('/signup'))}
-              className="px-16 py-6 bg-[#F5E6D3] text-[#2C1810] text-2xl font-black border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-flex items-center gap-4 transition-all duration-150 hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:translate-x-0.5 active:translate-y-0.5">
+            <button onClick={() => (navigate('/signup'))}
+              className="px-8 py-4 sm:px-12 sm:py-5 md:px-16 md:py-6 bg-[#F5E6D3] text-[#2C1810] text-lg sm:text-xl md:text-2xl font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] sm:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-flex items-center gap-3 sm:gap-4 transition-all duration-150 hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] sm:hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] sm:active:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:translate-x-0.5 active:translate-y-0.5">
               JOIN CALL OF CODE
-              <ArrowRight className="h-8 w-8" />
+              <ArrowRight className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8" />
             </button>
           </div>
         </div>
diff --git a/frontend/src/components/miniCompo/Features.jsx b/frontend/src/components/miniCompo/Features.jsx
index c251eff..0af0e5f 100644
--- a/frontend/src/components/miniCompo/Features.jsx
+++ b/frontend/src/components/miniCompo/Features.jsx
@@ -5,48 +5,48 @@ export default function FeaturesSection() {
     {
       title: "COMMUNITY",
       desc: "Connect with passionate coders and grow together.",
-      icon: <Users className="h-10 w-10 text-[#2C1810] dark:text-[#2C1810]" />,
+      icon: <Users className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 text-[#2C1810] dark:text-[#2C1810]" />,
       bg: "bg-[#F5E6D3] dark:bg-[#2C1810]",
     },
     {
       title: "INNOVATION",
       desc: "Explore cutting-edge technologies and build amazing things.",
-      icon: <Zap className="h-10 w-10 text-[#2C1810] dark:text-[#2C1810]" />,
+      icon: <Zap className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 text-[#2C1810] dark:text-[#2C1810]" />,
       bg: "bg-[#F5E6D3] dark:bg-[#2C1810]",
     },
     {
       title: "ACHIEVEMENT",
       desc: "Participate in hackathons and showcase your skills.",
-      icon: <Trophy className="h-10 w-10 text-[#2C1810] dark:text-[#2C1810]" />,
+      icon: <Trophy className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 text-[#2C1810] dark:text-[#2C1810]" />,
       bg: "bg-[#F5E6D3] dark:bg-[#2C1810]",
     },
   ];
 
   return (
-    <section className="px-6 py-20 transition-colors duration-300">
+    <section className="px-4 sm:px-6 py-12 sm:py-16 md:py-20 transition-colors duration-300">
       <div className="max-w-7xl mx-auto">
-        
-        <div className="text-center mb-16">
-          <h3 className="text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-4 inline-block border-b-8 border-[#C1502E] dark:border-[#F5E6D3] pb-2">
+
+        <div className="text-center mb-10 sm:mb-12 md:mb-16">
+          <h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-4 inline-block border-b-4 sm:border-b-6 md:border-b-8 border-[#C1502E] dark:border-[#F5E6D3] pb-2">
             WHY JOIN US?
           </h3>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8">
+        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-7 md:gap-8">
           {features.map((f, i) => (
             <div
               key={i}
-              className={`${f.bg} border-4 border-black dark:border-[#F5E6D3] p-8 shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] hover:-translate-y-2 transition-all`}
+              className={`${f.bg} border-4 border-black dark:border-[#F5E6D3] p-4 sm:p-6 md:p-8 shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] hover:-translate-y-2 transition-all`}
             >
-              <div className="w-20 h-20 bg-[#C1502E] dark:bg-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] flex items-center justify-center mb-6">
+              <div className="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-[#C1502E] dark:bg-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] flex items-center justify-center mb-4 sm:mb-5 md:mb-6">
                 {f.icon}
               </div>
 
-              <h4 className="text-3xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-3">
+              <h4 className="text-xl sm:text-2xl md:text-3xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-2 sm:mb-3">
                 {f.title}
               </h4>
 
-              <p className="text-lg font-bold text-[#2C1810]/80 dark:text-[#F5E6D3]/80">
+              <p className="text-sm sm:text-base md:text-lg font-bold text-[#2C1810]/80 dark:text-[#F5E6D3]/80">
                 {f.desc}
               </p>
             </div>
diff --git a/frontend/src/components/miniCompo/Footer.jsx b/frontend/src/components/miniCompo/Footer.jsx
index 4c42287..3bb0c1a 100644
--- a/frontend/src/components/miniCompo/Footer.jsx
+++ b/frontend/src/components/miniCompo/Footer.jsx
@@ -21,28 +21,24 @@ export default function Footer() {
       "
     >
       {/* Header */}
-      <div className="text-center mb-12">
-        <h1 className="text-xl sm:text-3xl md:text-4xl font-black tracking-widest">
+      <div className="text-center mb-8 sm:mb-12 px-4">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl font-black tracking-widest">
           &lt; CALL OF CODE /&gt;
         </h1>
-        <p className="text-xs sm:text-sm opacity-80 mt-2">
+        <p className="text-xs sm:text-sm opacity-80 mt-2 max-w-2xl mx-auto">
           A platform where coders unite to learn, build, and collaborate.
         </p>
       </div>
 
       {/* CARDS */}
-      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10 w-full max-w-6xl mx-auto">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10 w-full max-w-6xl mx-auto">
         {/* About Us */}
         <div
           className={CARD_CLASS}
         >
           <h2 className="text-lg sm:text-xl font-black mb-3">About Us</h2>
-          <p className="text-[10px] sm:text-xs md:text-sm leading-relaxed">
-            Call Of Code is your go-to platform for coding tutorials,
-            <br />
-            challenges, and resources. Join us to explore the world
-            <br />
-            of programming and technology.
+          <p className="text-xs sm:text-sm md:text-base leading-relaxed">
+            Call Of Code is your go-to platform for coding tutorials, challenges, and resources. Join us to explore the world of programming and technology.
           </p>
         </div>
 
@@ -51,7 +47,7 @@ export default function Footer() {
           className={CARD_CLASS}
         >
           <h2 className="text-lg sm:text-xl font-black mb-3">Quick Links</h2>
-          <ul className="space-y-2 text-[10px] sm:text-xs md:text-sm">
+          <ul className="space-y-2 text-xs sm:text-sm md:text-base">
             {[
               { href: "#about", text: "About Us" },
               { href: "/interviewExp", text: "Interviews" },
@@ -78,11 +74,11 @@ export default function Footer() {
 
         {/* FOLLOW US */}
         <div
-            className={CARD_CLASS}
+          className={CARD_CLASS}
         >
           <h2 className="text-lg sm:text-xl font-black mb-3">Follow Us</h2>
 
-          <div className="grid grid-cols-2 gap-5 place-items-center mt-2">
+          <div className="grid grid-cols-2 gap-4 sm:gap-5 place-items-center mt-2">
             {[
               {
                 Icon: FaInstagram,
@@ -103,7 +99,7 @@ export default function Footer() {
                 onMouseEnter={() => setHoverIndex(index)}
                 onMouseLeave={() => setHoverIndex(null)}
                 className={`
-                  relative p-3 text-2xl sm:text-3xl border-4 rounded-md transition-all duration-150 bg-[#F5E6D3] text-[#2C1810] border-[#F5E6D3] shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] dark:bg-[#3B2418] dark:text-[#F5E6D3] dark:border-[#3B2418] dark:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] ${hoverIndex===index?"translate-x-[4px] translate-y-[4px] hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] dark:hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] dark:active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] active:translate-x-0.5 active:translate-y-0.5":""}
+                  relative p-2.5 sm:p-3 text-xl sm:text-2xl md:text-3xl border-4 rounded-md transition-all duration-150 bg-[#F5E6D3] text-[#2C1810] border-[#F5E6D3] shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] dark:bg-[#3B2418] dark:text-[#F5E6D3] dark:border-[#3B2418] dark:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:dark:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] ${hoverIndex === index ? "hover:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] sm:hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] dark:hover:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] sm:dark:hover:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[4px_4px_0px_0px_rgba(193,80,46,1)] sm:active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] dark:active:shadow-[4px_4px_0px_0px_rgba(193,80,46,1)] sm:dark:active:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] active:translate-x-0.5 active:translate-y-0.5" : ""}
                 `}
               >
                 <Icon />
diff --git a/frontend/src/components/miniCompo/Hero.jsx b/frontend/src/components/miniCompo/Hero.jsx
index 289f673..1744f5f 100644
--- a/frontend/src/components/miniCompo/Hero.jsx
+++ b/frontend/src/components/miniCompo/Hero.jsx
@@ -23,109 +23,109 @@ export default function HeroSection() {
   }, []);
 
   return (
-    <section className="px-6 py-20">
-      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
+    <section className="px-4 sm:px-6 py-12 sm:py-16 md:py-20 overflow-hidden">
+      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-8 sm:gap-10 md:gap-12 items-center">
         {/* Left Side */}
-        <div className="space-y-8">
-          <div className="inline-block bg-[#2C1810] dark:bg-[#F5E6D3] text-[#F5E6D3] dark:text-[#2C1810] px-6 py-3 border-4 border-black dark:border-[#2C1810] font-black -rotate-2 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
-            <span className="flex items-center gap-2">
-              <Sparkles className="h-5 w-5" />
+        <div className="space-y-6 sm:space-y-8">
+          <div className="inline-block bg-[#2C1810] dark:bg-[#F5E6D3] text-[#F5E6D3] dark:text-[#2C1810] px-4 py-2 sm:px-6 sm:py-3 border-4 border-black dark:border-[#2C1810] font-black -rotate-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] sm:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+            <span className="flex items-center gap-2 text-xs sm:text-sm md:text-base">
+              <Sparkles className="h-4 w-4 sm:h-5 sm:w-5" />
               WHERE CODE MEETS CREATIVITY
             </span>
           </div>
 
-          <h2 className="text-7xl lg:text-8xl font-black leading-none text-[#2C1810] dark:text-[#F5E6D3]">
+          <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black leading-none text-[#2C1810] dark:text-[#F5E6D3]">
             CODE.
             <br />
             <span className="text-[#C1502E]">CREATE.</span>
             <br />
-            <span className="inline-block bg-[#2C1810] dark:bg-[#C1502E] text-[#F5E6D3] px-4 border-4 border-black rotate-2 shadow-[8px_8px_0px_0px_rgba(193,80,46,1)]">
+            <span className="inline-block bg-[#2C1810] dark:bg-[#C1502E] text-[#F5E6D3] px-3 sm:px-4 border-4 border-black rotate-2 shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)]">
               CONQUER.
             </span>
           </h2>
 
-          <p className="text-2xl font-bold text-[#2C1810] dark:text-[#F5E6D3] leading-relaxed max-w-lg">
+          <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-bold text-[#2C1810] dark:text-[#F5E6D3] leading-relaxed max-w-lg">
             Join a vibrant community of creative coders who turn ideas into reality.
           </p>
 
-          <div className="flex flex-wrap gap-6">
-            <button onClick={ () => ( navigate('/dsa'))}
-            className="group px-10 py-5 bg-[#C1502E] text-[#F5E6D3] text-xl font-black border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all duration-150 flex items-center gap-3 hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-1 hover:-translate-y-1 active:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1">
-              <Rocket className="h-6 w-6" />
+          <div className="flex flex-wrap gap-4 sm:gap-6">
+            <button onClick={() => (navigate('/dsa'))}
+              className="group px-6 py-4 sm:px-8 sm:py-4 md:px-10 md:py-5 bg-[#C1502E] text-[#F5E6D3] text-base sm:text-lg md:text-xl font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] sm:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all duration-150 flex items-center gap-2 sm:gap-3 hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] sm:hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-1 hover:-translate-y-1 active:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] sm:active:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1">
+              <Rocket className="h-5 w-5 sm:h-6 sm:w-6" />
               START CODING
-              <ArrowRight className="h-6 w-6 group-hover:translate-x-2 transition-transform" />
+              <ArrowRight className="h-5 w-5 sm:h-6 sm:w-6 group-hover:translate-x-2 transition-transform" />
             </button>
-           
+
           </div>
         </div>
 
         {/* Right Side - Code Terminal */}
-<div className="relative">
-  <div
-    className="
+        <div className="relative w-full max-w-full overflow-visible">
+          <div
+            className="
       bg-[#2C1810] dark:bg-[#F5E6D3]
       border-4 border-black 
-      shadow-[12px_12px_0px_0px_rgba(193,80,46,1)]
-      p-8 rotate-2 hover:rotate-0
-      transition-transform duration-300
+      shadow-[6px_6px_0px_0px_rgba(193,80,46,1)] sm:shadow-[8px_8px_0px_0px_rgba(193,80,46,1)] md:shadow-[10px_10px_0px_0px_rgba(193,80,46,1)] lg:shadow-[12px_12px_0px_0px_rgba(193,80,46,1)]
+      p-3 sm:p-4 md:p-6 lg:p-8 rotate-1 sm:rotate-2 hover:rotate-0
+      transition-transform duration-300 max-w-full
     "
-  >
-    {/* Window Buttons */}
-    <div className="flex items-center gap-2 mb-6">
-      <div className="w-4 h-4 bg-[#C1502E] border-2 border-black dark:border-[#F5E6D3]"></div>
-      <div className="w-4 h-4 bg-[#F5E6D3] border-2 border-black dark:border-[#F5E6D3]"></div>
-      <div className="w-4 h-4 bg-[#C1502E] border-2 border-black dark:border-[#F5E6D3]"></div>
-    </div>
-
-    {/* Text */}
-    <div
-      className="
-        font-mono text-lg space-y-3
-        text-[#F5E6D3] dark:text-[#2C1810]
+          >
+            {/* Window Buttons */}
+            <div className="flex items-center gap-2 mb-3 sm:mb-4 md:mb-6">
+              <div className="w-3 h-3 sm:w-4 sm:h-4 bg-[#C1502E] border-2 border-black dark:border-[#F5E6D3]"></div>
+              <div className="w-3 h-3 sm:w-4 sm:h-4 bg-[#F5E6D3] border-2 border-black dark:border-[#F5E6D3]"></div>
+              <div className="w-3 h-3 sm:w-4 sm:h-4 bg-[#C1502E] border-2 border-black dark:border-[#F5E6D3]"></div>
+            </div>
+
+            {/* Text */}
+            <div
+              className="
+        font-mono text-xs sm:text-sm md:text-base lg:text-lg space-y-1.5 sm:space-y-2 md:space-y-3
+        text-[#F5E6D3] dark:text-[#2C1810] overflow-x-auto
       "
-    >
-      {/* Comment */}
-      <div className="text-[#F5E6D3]/60 dark:text-[#2C1810]/60">
+            >
+              {/* Comment */}
+              <div className="text-[#F5E6D3]/60 dark:text-[#2C1810]/60 whitespace-nowrap">
         // Welcome to Call of Code
-      </div>
-
-      {/* Class line */}
-      <div className="font-bold text-[#C1502E]">
-        class <span className="text-[#F5E6D3] dark:text-[#2C1810]">CodingClub</span> {'{'}
-      </div>
-
-      <div className="ml-6">
-        mission =
-        <span className="text-[#C1502E]"> "Inspire & Create"</span>;
-      </div>
-
-      <div className="ml-6">
-        members = <span className="text-[#C1502E] font-bold">∞</span>;
-      </div>
-
-      <div className="ml-6">
-        passion = <span className="text-[#C1502E] font-bold">MAX</span>;
-      </div>
-
-      {/* Dynamic snippet box */}
-      <div
-        className="
-          ml-6 px-3 py-1 inline-block font-bold
+              </div>
+
+              {/* Class line */}
+              <div className="font-bold text-[#C1502E] whitespace-nowrap">
+                class <span className="text-[#F5E6D3] dark:text-[#2C1810]">CodingClub</span> {'{'}
+              </div>
+
+              <div className="ml-3 sm:ml-4 md:ml-6 whitespace-nowrap">
+                mission =
+                <span className="text-[#C1502E]"> "Inspire & Create"</span>;
+              </div>
+
+              <div className="ml-3 sm:ml-4 md:ml-6 whitespace-nowrap">
+                members = <span className="text-[#C1502E] font-bold">∞</span>;
+              </div>
+
+              <div className="ml-3 sm:ml-4 md:ml-6 whitespace-nowrap">
+                passion = <span className="text-[#C1502E] font-bold">MAX</span>;
+              </div>
+
+              {/* Dynamic snippet box */}
+              <div
+                className="
+          ml-3 sm:ml-4 md:ml-6 px-2 py-1 sm:px-3 sm:py-1 inline-block font-bold text-xs sm:text-sm md:text-base
           bg-[#C1502E] text-[#F5E6D3]
           dark:bg-[#C1502E] dark:text-[#2C1810]
-          border-2 border-[#F5E6D3] dark:border-[#2C1810]
+          border-2 border-[#F5E6D3] dark:border-[#2C1810] whitespace-nowrap
         "
-      >
-        {codeSnippets[currentSnippet]}
-      </div>
+              >
+                {codeSnippets[currentSnippet]}
+              </div>
 
-      <div className="font-bold text-[#C1502E]">{'}'}</div>
-    </div>
-  </div>
+              <div className="font-bold text-[#C1502E] whitespace-nowrap">{'}'}</div>
+            </div>
+          </div>
 
-          {/* Decorative elements */}
-          <div className="absolute -bottom-4 -left-4 w-24 h-24 bg-[#C1502E] border-4 border-black -rotate-12"></div>
-          <div className="absolute -top-4 -right-4 w-16 h-16 bg-[#F5E6D3] border-4 border-black rotate-45"></div>
+          {/* Decorative elements - hidden on very small screens to prevent overflow */}
+          <div className="hidden sm:block absolute -bottom-3 -left-3 sm:-bottom-4 sm:-left-4 w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-[#C1502E] border-4 border-black -rotate-12"></div>
+          <div className="hidden sm:block absolute -top-3 -right-3 sm:-top-4 sm:-right-4 w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-[#F5E6D3] border-4 border-black rotate-45"></div>
         </div>
       </div>
     </section>
diff --git a/frontend/src/components/miniCompo/Navbar.jsx b/frontend/src/components/miniCompo/Navbar.jsx
index 5e33b9a..258374a 100644
--- a/frontend/src/components/miniCompo/Navbar.jsx
+++ b/frontend/src/components/miniCompo/Navbar.jsx
@@ -1,13 +1,18 @@
+import { useState } from "react";
 import { useAuth } from "@/context/AuthContext";
 import { useMembers } from "@/hooks/useMember";
-import { Code2, LogOut, User } from "lucide-react";
+import { useTheme } from "@/context/ThemeContext";
+import { Code2, LogOut, User, Menu, X, Sun, Moon } from "lucide-react";
 import { Link, useNavigate, useLocation } from "react-router-dom";
 
 export default function Navbar() {
   const navigate = useNavigate();
   const location = useLocation();
-  const {accessToken} = useAuth();
-  const {logout} = useMembers();
+  const { accessToken } = useAuth();
+  const { logout } = useMembers();
+  const { theme, toggleTheme } = useTheme();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
   // Helper to check if the current path matches the link
   const isActive = (path) => location.pathname === path || location.pathname.startsWith(path + '/');
 
@@ -17,29 +22,33 @@ export default function Navbar() {
   // NEW ACTIVE STYLE: Dark Brown/Beige inverted, no shadow ("pressed" look)
   const activeStyle = "px-6 py-2 font-black border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] dark:bg-[#C1502E] dark:text-[#F5E6D3] translate-x-[4px] translate-y-[4px] shadow-none transition-all duration-150";
 
+  // Mobile menu link style - optimized for mobile
+  const mobileLinkStyle = "w-full px-4 py-2.5 font-black text-base border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(245,230,211,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] dark:active:shadow-[1px_1px_0px_0px_rgba(245,230,211,1)] active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150";
 
-
+  const closeMobileMenu = () => setIsMobileMenuOpen(false);
 
   return (
     <nav className="border-b-4 border-black dark:border-[#F5E6D3] bg-[#F5E6D3] dark:bg-[#2C1810]">
-      <div className="max-w-[90rem] mx-auto px-6 py-6 flex items-center justify-between">
-        <Link to={"/"} className="flex items-center gap-3">
-          <div className="bg-[#C1502E] p-2 border-4 border-black dark:border-[#F5E6D3] rotate-3 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)]">
-            <Code2 className="h-8 w-8 text-[#F5E6D3]" />
+      <div className="max-w-[90rem] mx-auto px-4 sm:px-6 py-4 sm:py-6 flex items-center justify-between">
+        {/* Logo */}
+        <Link to={"/"} className="flex items-center gap-2 sm:gap-3">
+          <div className="bg-[#C1502E] p-1.5 sm:p-2 border-4 border-black dark:border-[#F5E6D3] rotate-3 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)]">
+            <Code2 className="h-6 w-6 sm:h-8 sm:w-8 text-[#F5E6D3]" />
           </div>
-          <h1 className="text-3xl font-black text-[#2C1810] dark:text-[#F5E6D3] tracking-tight">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-black text-[#2C1810] dark:text-[#F5E6D3] tracking-tight">
             CALL OF CODE
           </h1>
         </Link>
 
-        <div className="flex items-center gap-6">
+        {/* Desktop Navigation */}
+        <div className="hidden md:flex items-center gap-4 lg:gap-6">
           <Link
             to={"/dsa"}
             className={isActive("/dsa") ? activeStyle : inactiveStyle}
           >
             DSA
           </Link>
-          
+
           <Link
             to={"/interviewExp"}
             className={isActive("/interviewExp") ? activeStyle : inactiveStyle}
@@ -48,38 +57,164 @@ export default function Navbar() {
           </Link>
 
           <div>
-             {accessToken ? (
-            <div className="flex gap-16 justify-end">
-              <button
-                onClick={() => navigate("/profile")}
-                className={isActive("/profile") ? activeStyle : inactiveStyle}
-              >
-                <User />
-              </button>
+            {accessToken ? (
+              <div className="flex gap-4 lg:gap-6 justify-end">
+                <button
+                  onClick={() => navigate("/profile")}
+                  className={isActive("/profile") ? activeStyle : inactiveStyle}
+                >
+                  <User />
+                </button>
+
+                <button
+                  onClick={() => {
+                    logout.mutate();
+                  }}
+                  disabled={logout.isPending}
+                  className={inactiveStyle}
+                >
+                  <LogOut />
+                </button>
+              </div>
+            ) : (
+              <>
+                <button
+                  onClick={() => navigate("/signup")}
+                  className={isActive("/signup") ? activeStyle : inactiveStyle}
+                >
+                  JOIN NOW
+                </button>
+              </>
+            )}
+          </div>
 
+          {/* Theme Toggle - Desktop */}
+          <button
+            onClick={toggleTheme}
+            className="flex items-center justify-center w-12 h-12 border-4 border-black dark:border-[#F5E6D3] bg-[#F5E6D3] dark:bg-[#2C1810] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(245,230,211,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-none active:translate-x-1 active:translate-y-1 transition-all duration-150"
+            aria-label="Toggle theme"
+          >
+            {theme === "light" ? (
+              <Moon className="w-6 h-6 text-[#2C1810]" />
+            ) : (
+              <Sun className="w-6 h-6 text-[#F5E6D3]" />
+            )}
+          </button>
+        </div>
+
+        {/* Mobile: Theme Toggle + Hamburger */}
+        <div className="md:hidden flex items-center gap-3">
+          {/* Theme Toggle - Mobile */}
+          <button
+            onClick={toggleTheme}
+            className="flex items-center justify-center w-10 h-10 border-4 border-black dark:border-[#F5E6D3] bg-[#F5E6D3] dark:bg-[#2C1810] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(245,230,211,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-none active:translate-x-1 active:translate-y-1 transition-all duration-150"
+            aria-label="Toggle theme"
+          >
+            {theme === "light" ? (
+              <Moon className="w-5 h-5 text-[#2C1810]" />
+            ) : (
+              <Sun className="w-5 h-5 text-[#F5E6D3]" />
+            )}
+          </button>
+
+          {/* Hamburger Button */}
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="flex items-center justify-center w-10 h-10 border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(245,230,211,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] dark:active:shadow-[1px_1px_0px_0px_rgba(245,230,211,1)] active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150"
+            aria-label="Toggle mobile menu"
+          >
+            {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu Overlay */}
+      {isMobileMenuOpen && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="md:hidden fixed inset-0 bg-black/50 z-40"
+            onClick={closeMobileMenu}
+          />
+
+          {/* Mobile Menu */}
+          <div className="md:hidden fixed top-0 right-0 bottom-0 w-[60%] max-w-[280px] bg-[#F5E6D3] dark:bg-[#2C1810] border-l-4 border-black dark:border-[#F5E6D3] z-50 p-4 overflow-y-auto animate-in slide-in-from-right duration-300">
+            {/* Close Button */}
+            <div className="flex justify-end mb-4">
               <button
-                onClick={() => {
-                  logout.mutate();
-                }}
-                disabled={logout.isPending}
-                className={inactiveStyle} // Logout button always keeps default style
+                onClick={closeMobileMenu}
+                className="p-2 border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(245,230,211,1)]"
               >
-                <LogOut/>
+                <X className="h-6 w-6" />
               </button>
             </div>
-          ) : (
-            <>
-              <button
-                onClick={() => navigate("/signup")}
-                className={isActive("/signup") ? activeStyle : inactiveStyle}
+
+            {/* Mobile Navigation Links */}
+            <div className="flex flex-col gap-3">
+              <Link
+                to={"/dsa"}
+                onClick={closeMobileMenu}
+                className={mobileLinkStyle}
               >
-                JOIN NOW
-              </button>
-            </>
-          )}
+                DSA
+              </Link>
+
+              <Link
+                to={"/interviewExp"}
+                onClick={closeMobileMenu}
+                className={mobileLinkStyle}
+              >
+                Interviews
+              </Link>
+
+              {/* Divider */}
+              <div className="my-2 border-t-4 border-black dark:border-[#F5E6D3]" />
+
+              {/* Auth Buttons */}
+              {accessToken ? (
+                <>
+                  <button
+                    onClick={() => {
+                      navigate("/profile");
+                      closeMobileMenu();
+                    }}
+                    className={mobileLinkStyle}
+                  >
+                    <div className="flex items-center gap-3">
+                      <User className="h-5 w-5" />
+                      <span>Profile</span>
+                    </div>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      logout.mutate();
+                      closeMobileMenu();
+                    }}
+                    disabled={logout.isPending}
+                    className={mobileLinkStyle}
+                  >
+                    <div className="flex items-center gap-3">
+                      <LogOut className="h-5 w-5" />
+                      <span>Logout</span>
+                    </div>
+                  </button>
+                </>
+              ) : (
+                <button
+                  onClick={() => {
+                    navigate("/signup");
+                    closeMobileMenu();
+                  }}
+                  className={mobileLinkStyle}
+                >
+                  JOIN NOW
+                </button>
+              )}
+            </div>
           </div>
-        </div>
-      </div>
+        </>
+      )}
     </nav>
   );
 }
\ No newline at end of file