diff --git a/app/components/contribute.tsx b/app/components/contribute.tsx
index 77a7299..6fb6b32 100644
--- a/app/components/contribute.tsx
+++ b/app/components/contribute.tsx
@@ -2,19 +2,19 @@ import Link from "next/link";
 
 export default function ContributionsSection() {
   return (
-    <section id="contribute" className="px-6 py-12 text-center">
-      <h2 className="text-8xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Contributions are Welcome!</h2>
+    <section id="contribute" className="px-6 py-12 text-center scroll-mt-20">
+      <h2 className="text-7xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Contributions are Welcome!</h2>
       <p className="mb-8 text-2xl flex px-6" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
         openCSE is community-driven. Want to add or improve docs? Contribute on GitHub.
       </p>
-      <div className="mt-6 px-6 flex flex-col md:flex-row gap-8">
-        <img src="/Contribute.png" alt="GitHub Issues" className="w-[40vw] shadow-md" />
-        <div className="text-left max-w-[60vw]">
-          <h3 className="font-semibold text-5xl mb-4" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>Browse and Tackle Issues</h3>
-          <p className="mt-2 text-2xl" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
+      <div className="mt-6 px-6 flex flex-col md:flex-row gap-8 w-full">
+        <img src="/Contribute.png" alt="GitHub Issues" className="w-full md:w-[40%] " />
+        <div className="text-left w-full md:w-[60%]">
+          <h3 className="font-semibold w-full text-5xl mb-4" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>Browse and Tackle Issues</h3>
+          <p className="mt-2 text-2xl w-full" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
             Check out the available issues on our <span className="underline"><Link href="https://github.com/pushkarsinghh/opencse/issues">GitHub repository</Link></span>. Pick one to work on, or raise your own if you spot something new!
           </p>
-          <ul className="list-disc ml-5 text-2xl mt-3 space-y-1" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
+          <ul className="list-disc md:w-[60%] ml-5 text-2xl mt-3 space-y-1" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
             <li>Find beginner-friendly and advanced issues</li>
             <li>Discuss solutions and get feedback</li>
             <li>Help us improve by reporting bugs or suggesting features</li>
diff --git a/app/components/hero.tsx b/app/components/hero.tsx
index f3859d2..4801393 100644
--- a/app/components/hero.tsx
+++ b/app/components/hero.tsx
@@ -11,8 +11,9 @@ export default function HeroSection() {
   return (
     <section
       className="relative overflow-hidden text-center 
-        py-4 sm:py-6 md:py-10 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 
-        rounded-3xl mt-6 mx-4 sm:mx-6 md:mx-10 lg:mx-15 mb-6"
+        py-12 sm:py-6 md:py-10 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 
+        rounded-3xl mt-6 mx-4 sm:mx-6 md:mx-10 lg:mx-15 mb-6
+        min-h-[70vh] sm:min-h-fit flex items-center justify-center"
       style={{
         backgroundImage: "url('/HeroBG.png')",
         backgroundSize: "cover",
@@ -28,10 +29,10 @@ export default function HeroSection() {
       />
 
       {/* Content Container */}
-      <div className="relative z-10">
+      <div className="relative z-10 px-2 sm:px-4 md:px-6 lg:px-8">
         <h1
           className={`font-bold ${roadRage.variable} text-black text-center 
-            text-3xl sm:text-5xl md:text-5xl lg:text-[90px] xl:text-[112px] 
+            text-7xl sm:text-6xl md:text-5xl lg:text-[90px] xl:text-[112px] 
             leading-snug sm:leading-tight md:leading-tight lg:leading-[95px] xl:leading-[102px] pt-6 sm:pt-8 md:pt-10 lg:pt-[70px]`}
           style={{
             fontFamily: "var(--font-road-rage), 'Road Rage', cursive",
@@ -44,7 +45,7 @@ export default function HeroSection() {
         </h1>
 
         <p
-          className="mt-4 sm:mt-6 text-base sm:text-lg md:text-2xl lg:text-3xl xl:text-[45px] text-black"
+          className="mt-6 sm:mt-6 text-xl sm:text-lg md:text-2xl lg:text-3xl xl:text-[45px] text-black"
           style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
         >
           Free, open, and beginner-friendly documentation
@@ -57,11 +58,11 @@ export default function HeroSection() {
             const el = document.getElementById("subjects");
             if (el) el.scrollIntoView({ behavior: "smooth" });
           }}
-          className="mt-8 sm:mt-10 mb-6 sm:mb-8 px-5 sm:px-8 md:px-12 lg:px-18 
-            py-2.5 sm:py-3.5 md:py-5 lg:py-6 rounded-full 
-            text-base sm:text-xl md:text-2xl lg:text-4xl xl:text-5xl
+          className="mt-12 sm:mt-10 mb-8 sm:mb-8 px-6 sm:px-8 md:px-12 lg:px-18 
+            py-3 sm:py-3.5 md:py-5 lg:py-6 rounded-full 
+            text-xl sm:text-xl md:text-2xl lg:text-4xl xl:text-5xl
             bg-[#38220b] text-white hover:bg-[#2a1809] hover:scale-105 
-            transition-all duration-300 cursor-pointer"
+            transition-all duration-300 cursor-pointer font-semibold"
           style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
         >
           Explore Subjects
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index 16a6347..7f8c320 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -13,7 +13,7 @@ export default function Navbar() {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <nav className="sticky h-14 top-0 left-0 w-full z-50 flex justify-between items-center pr-6 pl-4 py-1 bg-[#1B0D00] text-white">
+    <nav className="fixed h-14 top-0 inset-x-0 z-50 flex justify-between items-center pr-6 pl-4 py-1 bg-[#1B0D00] text-white">
       <Link href="/"><div className="flex items-center gap-1">
         <img src="/mascot.png" alt="openCSE" className="w-8 h-11 pt-0.5" />
         {/* <img src="/logo.png" alt="openCSE" className="w-38 h-17" /> */}
@@ -38,7 +38,9 @@ export default function Navbar() {
         }}
       >
         <li>
-          <Link href="/">HOME</Link>
+          <Link href="/" className="hover:opacity-80 transition-opacity">
+            HOME
+          </Link>
         </li>
         <li>
           <Link href="/#subjects">SUBJECTS</Link>
@@ -76,47 +78,51 @@ export default function Navbar() {
         />
       </button>
       {/* Mobile Menu */}
-      {menuOpen && (
-        <div className="md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg">
-          <ul
-            className="flex flex-col items-center gap-4 py-4 font-bold"
-            style={{
-              color: "white",
-              fontFamily: '"Road Rage", sans-serif',
-              fontSize: "28px",
-              fontStyle: "normal",
-              fontWeight: 400,
-              lineHeight: "normal",
-            }}
-          >
-            <li>
-              <Link href="/" onClick={() => setMenuOpen(false)}>
-          HOME
-              </Link>
-            </li>
-            <li>
-              <Link href="#subjects" onClick={() => setMenuOpen(false)}>
-          SUBJECTS
-              </Link>
-            </li>
-            <li>
-              <Link href="#contribute" onClick={() => setMenuOpen(false)}>
-          CONTRIBUTE
-              </Link>
-            </li>
-            <li>
-              <Link href="#sponsor" onClick={() => setMenuOpen(false)}>
-          SPONSOR
-              </Link>
-            </li>
-            <li>
+      <div 
+        className={`md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg transition-all duration-300 origin-top ${
+          menuOpen 
+            ? "opacity-100 scale-y-100" 
+            : "opacity-0 scale-y-0 pointer-events-none"
+        }`}
+      >
+        <ul
+          className="flex flex-col items-center gap-4 py-4 font-bold"
+          style={{
+            color: "white",
+            fontFamily: '"Road Rage", sans-serif',
+            fontSize: "28px",
+            fontStyle: "normal",
+            fontWeight: 400,
+            lineHeight: "normal",
+          }}
+        >
+          <li>
+            <Link href="/" onClick={() => setMenuOpen(false)} className="hover:opacity-80 transition-opacity">
+        HOME
+            </Link>
+          </li>
+          <li>
+            <Link href="/#subjects" onClick={() => setMenuOpen(false)}>
+        SUBJECTS
+            </Link>
+          </li>
+          <li>
+            <Link href="/#contribute" onClick={() => setMenuOpen(false)}>
+        CONTRIBUTE
+            </Link>
+          </li>
+          <li>
+            <Link href="/#sponsor" onClick={() => setMenuOpen(false)}>
+        SPONSOR
+            </Link>
+          </li>
+          <li>
               <Link href="/quiz" onClick={() => setMenuOpen(false)}>
           QUIZ
               </Link>
             </li>
-          </ul>
-        </div>
-      )}
+        </ul>
+      </div>
     </nav>
   );
 }
\ No newline at end of file
diff --git a/app/components/sponsor.tsx b/app/components/sponsor.tsx
index 725f271..8ede1ee 100644
--- a/app/components/sponsor.tsx
+++ b/app/components/sponsor.tsx
@@ -1,11 +1,11 @@
 export default function SponsorSection() {
   return (
-    <section id="sponsor" className="px-6 py-12 text-center">
-      <h2 className="text-8xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Sponsor Us</h2>
+    <section id="sponsor" className="px-6 py-12 text-center scroll-mt-20">
+      <h2 className="text-8xl items-center justify-center flex md:justify-start px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Sponsor Us</h2>
       <p className="mb-8 text-2xl flex px-6" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
         If you find openCSE useful, consider supporting us to keep the project alive:
       </p>
-      <div className="mt-12 flex px-6 gap-4 flex-wrap">
+      <div className="mt-12 flex justify-center md:justify-start items-center px-6 gap-4 flex-wrap">
         <a href="https://buymeacoffee.com/pushkarsinghh" className="rounded-md font-bold flex items-center gap-2 hover:scale-105">
           <img src="/BuyMeACoffee.png" alt="Buy Me a Coffee" className="h-22" />
         </a>
diff --git a/app/components/subjects.tsx b/app/components/subjects.tsx
index 489c3b3..b1fb566 100644
--- a/app/components/subjects.tsx
+++ b/app/components/subjects.tsx
@@ -127,9 +127,9 @@ const available = ["ep", "c", "em1", "em2", "oops","os", "ml"];
 
 export default function SubjectsSection() {
   return (
-    <section id="subjects" className="px-6 py-12 text-center">
+    <section id="subjects" className="px-6 pb-12 md:pt-12 text-center scroll-mt-20">
       <h2
-        className="text-8xl flex px-6 mb-0"
+        className="text-7xl flex px-6 mb-0"
         style={{ fontFamily: '"Road Rage", sans-serif' }}
       >
         Browse Subjects
diff --git a/app/globals.css b/app/globals.css
index 8908918..995c377 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+html {
+  scroll-behavior: smooth;
+}
+
 :root {
   --background: #FAE8D7;
   --foreground: #1B0D00;
diff --git a/app/layout.tsx b/app/layout.tsx
index d5b8ccb..2cdd16c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 // app/layout.tsx
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
@@ -20,6 +20,13 @@ export const metadata: Metadata = {
   description: "Free and Open Documentations for CSE subjects",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 0,
+  maximumScale: 5,
+  userScalable: true,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
diff --git a/app/not-found.tsx b/app/not-found.tsx
index dab5f73..13f6de9 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -5,7 +5,7 @@ export default function NotFound() {
   return (
     // BREAKOUT CONTAINER: Ignores the body's broken flex rules and covers the screen
     <div 
-      className="absolute inset-0 z-50 flex flex-col"
+      className="absolute inset-0 z-50 flex flex-col pt-14"
       style={{ backgroundColor: 'var(--background)' }}
     >
       {/* We keep the Navbar inside our breakout container so it still shows up */}
diff --git a/app/page.tsx b/app/page.tsx
index 83aa1c4..2c11a22 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
       scrollbarColor: "yellow transparent",
       scrollbarWidth: "thin",
       }}
-      className="scrollbar-yellow"
+      className="scrollbar-yellow pt-14"
     >
       <Navbar />
       <HeroSection />
diff --git a/app/quiz/[slug]/QuizClient.tsx b/app/quiz/[slug]/QuizClient.tsx
index a2fc3ce..d20791b 100644
--- a/app/quiz/[slug]/QuizClient.tsx
+++ b/app/quiz/[slug]/QuizClient.tsx
@@ -84,7 +84,7 @@ export default function QuizClient({ quiz }: Props) {
 
   if (state === "idle") {
     return (
-      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
         <Navbar />
 
         <section
@@ -150,7 +150,7 @@ export default function QuizClient({ quiz }: Props) {
     const grade = pct >= 80 ? "Excellent!" : pct >= 60 ? "Good work!" : "Keep studying!";
 
     return (
-      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
         <Navbar />
         
         <section
@@ -254,7 +254,7 @@ export default function QuizClient({ quiz }: Props) {
   }
 
   return (
-    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
       <Navbar />
       <section
         className="relative overflow-hidden w-full py-16 sm:py-24 px-4 sm:px-6 md:px-10 lg:px-16 text-center shadow-lg"
diff --git a/app/quiz/page.tsx b/app/quiz/page.tsx
index 41809f1..20e2fd0 100644
--- a/app/quiz/page.tsx
+++ b/app/quiz/page.tsx
@@ -24,7 +24,7 @@ export const metadata = {
 
 export default function QuizIndexPage() {
   return (
-    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
       <Navbar />
 
       <section
diff --git a/app/sem1/c/components/sidebar.tsx b/app/sem1/c/components/sidebar.tsx
index feb81a8..95759c5 100644
--- a/app/sem1/c/components/sidebar.tsx
+++ b/app/sem1/c/components/sidebar.tsx
@@ -2,7 +2,7 @@
 import { Righteous } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const righteous = Righteous({
   subsets: ["latin"],
@@ -12,7 +12,13 @@ const righteous = Righteous({
 
 export default function Sidebar() {
   const pathname = usePathname();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
 
   const chapters = [
     { id: "ch0", title: "Course Outline" },
@@ -38,12 +44,20 @@ export default function Sidebar() {
   const quizActive = pathname.startsWith("/quiz");
 
   return (
-    <div className="flex relative">
-      <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
-        }`}
-      >
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
+        {/* Sidebar */}
+        <aside
+          className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+            open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
+          }`}
+        >
         <h2
           className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
           style={{ fontFamily: "Rockwell, Serif, serif" }}
@@ -101,13 +115,17 @@ export default function Sidebar() {
 
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
         </p>
       </button>
     </div>
+    </>
   );
 }
\ No newline at end of file
diff --git a/app/sem1/c/layout.tsx b/app/sem1/c/layout.tsx
index c051243..b2c5f0b 100644
--- a/app/sem1/c/layout.tsx
+++ b/app/sem1/c/layout.tsx
@@ -9,18 +9,18 @@ export const metadata = {
 
 export default function Sem1CLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem1-c-root min-h-screen">
+    <div className="sem1-c-root min-h-screen flex flex-col pt-14">
       {/* Navigation Bar */}
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         {/* Sidebar */}
         <Sidebar />
 
         {/* Main Area */}
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col min-w-0">
           {/* Page Content */}
-          <main className="flex-1 overflow-y-auto px-6">
+          <main className="flex-1 overflow-auto">
             {children}
           </main>
         </div>
diff --git a/app/sem1/em1/components/sidebar.tsx b/app/sem1/em1/components/sidebar.tsx
index 2814c81..8bfd49a 100644
--- a/app/sem1/em1/components/sidebar.tsx
+++ b/app/sem1/em1/components/sidebar.tsx
@@ -3,7 +3,7 @@
 import { Righteous } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const righteous = Righteous({
   subsets: ["latin"],
@@ -13,7 +13,13 @@ const righteous = Righteous({
 
 export default function Sidebar() {
   const pathname = usePathname();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
 
   const chapters = [
     { id: "ch0", title: "Course Outline" },
@@ -40,11 +46,18 @@ export default function Sidebar() {
     const quizActive = pathname.startsWith("/quiz");
 
   return (
-    <div className="flex relative">
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
       {/* Sidebar */}
       <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
+        className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+          open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
         }`}
       >
         <h2
@@ -106,13 +119,17 @@ export default function Sidebar() {
       {/* Toggle Button */}
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
         </p>
       </button>
     </div>
+    </>
   );
 }
diff --git a/app/sem1/em1/layout.tsx b/app/sem1/em1/layout.tsx
index e8138ee..986e623 100644
--- a/app/sem1/em1/layout.tsx
+++ b/app/sem1/em1/layout.tsx
@@ -9,14 +9,14 @@ export const metadata = {
 
 export default function Sem1EpLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem1-ep-root min-h-screen">
+    <div className="sem1-ep-root min-h-screen flex flex-col pt-14">
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         <Sidebar />
 
-        <div className="flex-1 flex flex-col">
-          <main className="flex-1 overflow-y-auto px-6">{children}</main>
+        <div className="flex-1 flex flex-col min-w-0">
+          <main className="flex-1 overflow-auto">{children}</main>
         </div>
       </div>
     </div>
diff --git a/app/sem1/ep/components/sidebar.tsx b/app/sem1/ep/components/sidebar.tsx
index ad9e445..b8bbe87 100644
--- a/app/sem1/ep/components/sidebar.tsx
+++ b/app/sem1/ep/components/sidebar.tsx
@@ -2,7 +2,7 @@
 import { Righteous } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const righteous = Righteous({
   subsets: ["latin"],
@@ -12,7 +12,13 @@ const righteous = Righteous({
 
 export default function Sidebar() {
   const pathname = usePathname();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
 
   const chapters = [
     { id: "ch0", title: "Course Outline" },
@@ -37,10 +43,18 @@ export default function Sidebar() {
     const quizActive = pathname.startsWith("/quiz");
 
   return (
-    <div className="flex relative">
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
+      {/* Sidebar */}
       <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
+        className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+          open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
         }`}
       >
         <h2
@@ -100,13 +114,17 @@ export default function Sidebar() {
 
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
         </p>
       </button>
     </div>
+    </>
   );
 }
diff --git a/app/sem1/ep/layout.tsx b/app/sem1/ep/layout.tsx
index 6bc5540..a688740 100644
--- a/app/sem1/ep/layout.tsx
+++ b/app/sem1/ep/layout.tsx
@@ -9,14 +9,14 @@ export const metadata = {
 
 export default function Sem1EpLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem1-ep-root min-h-screen">
+    <div className="sem1-ep-root min-h-screen flex flex-col pt-14">
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         <Sidebar />
 
-        <div className="flex-1 flex flex-col">
-          <main className="flex-1 overflow-y-auto px-6">{children}</main>
+        <div className="flex-1 flex flex-col min-w-0">
+          <main className="flex-1 overflow-auto">{children}</main>
         </div>
       </div>
     </div>
diff --git a/app/sem2/em2/components/sidebar.tsx b/app/sem2/em2/components/sidebar.tsx
index 91cc586..5a558cb 100644
--- a/app/sem2/em2/components/sidebar.tsx
+++ b/app/sem2/em2/components/sidebar.tsx
@@ -3,7 +3,7 @@
 import { Righteous } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const righteous = Righteous({
   subsets: ["latin"],
@@ -13,7 +13,13 @@ const righteous = Righteous({
 
 export default function Sidebar() {
   const pathname = usePathname();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
 
   const chapters = [
     { id: "ch0", title: "Course Outline" },
@@ -37,11 +43,18 @@ export default function Sidebar() {
     const quizActive = pathname.startsWith("/quiz");
 
   return (
-    <div className="flex relative">
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
 
       <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
+        className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+          open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
         }`}
       >
         <h2
@@ -103,13 +116,17 @@ export default function Sidebar() {
       {/* Sidebar Toggle */}
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
         </p>
       </button>
     </div>
+    </>
   );
 }
diff --git a/app/sem2/em2/layout.tsx b/app/sem2/em2/layout.tsx
index 9ff8968..a8a9cd3 100644
--- a/app/sem2/em2/layout.tsx
+++ b/app/sem2/em2/layout.tsx
@@ -9,14 +9,14 @@ export const metadata = {
 
 export default function Sem1EpLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem1-ep-root min-h-screen">
+    <div className="sem1-ep-root min-h-screen flex flex-col pt-14">
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         <Sidebar />
 
-        <div className="flex-1 flex flex-col">
-          <main className="flex-1 overflow-y-auto px-6">{children}</main>
+        <div className="flex-1 flex flex-col min-w-0">
+          <main className="flex-1 overflow-auto">{children}</main>
         </div>
       </div>
     </div>
diff --git a/app/sem2/oops/components/sidebar.tsx b/app/sem2/oops/components/sidebar.tsx
index 6f0294f..901e302 100644
--- a/app/sem2/oops/components/sidebar.tsx
+++ b/app/sem2/oops/components/sidebar.tsx
@@ -2,7 +2,7 @@
 import { Righteous } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const righteous = Righteous({
   subsets: ["latin"],
@@ -12,7 +12,13 @@ const righteous = Righteous({
 
 export default function Sidebar() {
   const pathname = usePathname();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
 
   const chapters = [
     { id: "ch0", title: "Course Outline" },
@@ -40,12 +46,19 @@ export default function Sidebar() {
     const quizActive = pathname.startsWith("/quiz");
 
   return (
-    <div className="flex relative">
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
 
       {/* Sidebar */}
       <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
+        className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+          open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
         }`}
       >
         <h2
@@ -106,8 +119,11 @@ export default function Sidebar() {
 
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
@@ -115,5 +131,6 @@ export default function Sidebar() {
       </button>
 
     </div>
+    </>
   );
 }
diff --git a/app/sem2/oops/layout.tsx b/app/sem2/oops/layout.tsx
index 8a98720..0a31f98 100644
--- a/app/sem2/oops/layout.tsx
+++ b/app/sem2/oops/layout.tsx
@@ -9,14 +9,14 @@ export const metadata = {
 
 export default function Sem1EpLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem1-ep-root min-h-screen">
+    <div className="sem1-ep-root min-h-screen flex flex-col pt-14">
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         <Sidebar />
 
-        <div className="flex-1 flex flex-col">
-          <main className="flex-1 overflow-y-auto px-6">{children}</main>
+        <div className="flex-1 flex flex-col min-w-0">
+          <main className="flex-1 overflow-auto">{children}</main>
         </div>
       </div>
     </div>
diff --git a/app/sem4/os/components/sidebar.tsx b/app/sem4/os/components/sidebar.tsx
index 65cc299..b2a7f19 100644
--- a/app/sem4/os/components/sidebar.tsx
+++ b/app/sem4/os/components/sidebar.tsx
@@ -1,77 +1,129 @@
-"use client";
-import { Righteous } from "next/font/google";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-
-const righteous = Righteous({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-righteous",
-});
-
-export default function Sidebar() {
-  const pathname = usePathname();
-  const [open, setOpen] = useState(true);
-
-  const chapters = [
-    { id: "ch0", title: "Course Outline" },
-    // { id: "ch1", title: "Introduction to Operating Systems" },
-    // { id: "ch2", title: "Process Management" },
-    // { id: "ch3", title: "CPU Scheduling" },
-    // { id: "ch4", title: "Process Synchronization" },
-    // { id: "ch5", title: "Deadlocks" },
-    // { id: "ch6", title: "Memory Management" },
-    // { id: "ch7", title: "Paging and Segmentation" },
-    // { id: "ch8", title: "File Systems and I/O Management" },
-  ];
-
-  return (
-    <div className="flex relative">
-      {/* Sidebar */}
-      <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
-        }`}
-      >
-        <h2
-          className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
-          style={{ fontFamily: "Rockwell, Serif, serif" }}
-        >
-          Chapters
-        </h2>
-
-        <ul className="flex-1 overflow-y-auto space-y-0">
-          {chapters.map((ch) => {
-            const active =
-              pathname === `/sem4/os/${ch.id}`;
-
-            return (
-              <li key={ch.id}>
-                <Link
-                  href={`/sem4/os/${ch.id}`}
-                  className={`block px-3 py-2 text-xl transition ${
-                    active ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
-                  } ${righteous.className}`}
-                >
-                  {ch.title}
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </aside>
-
-      {/* Toggle Button (always visible) */}
-      <button
-        onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
-      >
-        <p className="leading-5">
-          C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
-        </p>
-      </button>
-    </div>
-  );
-}
\ No newline at end of file
+"use client";
+import { Righteous } from "next/font/google";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
+
+const righteous = Righteous({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-righteous",
+});
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
+
+  const chapters = [
+    { id: "ch0", title: "Course Outline" },
+    // { id: "ch1", title: "Introduction to Operating Systems" },
+    // { id: "ch2", title: "Process Management" },
+    // { id: "ch3", title: "CPU Scheduling" },
+    // { id: "ch4", title: "Process Synchronization" },
+    // { id: "ch5", title: "Deadlocks" },
+    // { id: "ch6", title: "Memory Management" },
+    // { id: "ch7", title: "Paging and Segmentation" },
+    // { id: "ch8", title: "File Systems and I/O Management" },
+  ];
+
+  const quizSlugMap: Record<string, string> = {
+    os: "os",
+  };
+
+  const subjectKey = pathname.split("/")[2] ?? "";
+  const quizSlug = quizSlugMap[subjectKey];
+  const quizHref = quizSlug ? `/quiz/${quizSlug}` : "/quiz";
+  const quizActive = pathname.startsWith("/quiz");
+
+  return (
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
+        {/* Sidebar */}
+        <aside
+          className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+            open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
+          }`}
+        >
+        <h2
+          className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
+          style={{ fontFamily: "Rockwell, Serif, serif" }}
+        >
+          Chapters
+        </h2>
+        <ul className="flex-1 overflow-y-auto space-y-0">
+          {chapters.map((ch) => {
+            const active = pathname === `/sem4/os/${ch.id}`;
+            return (
+              <li key={ch.id}>
+                <Link
+                  href={`/sem4/os/${ch.id}`}
+                  className={`block px-3 py-2 text-xl transition ${
+                    active ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
+                  } ${righteous.className}`}
+                >
+                  {ch.title}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="border-t-4 border-[#1B0D00]">
+          <h2
+            className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2"
+            style={{ fontFamily: "Rockwell, Serif, serif" }}
+          >
+            Quiz
+          </h2>
+          <Link
+            href={quizHref}
+            className={`flex items-center gap-2 px-3 py-2 text-xl transition ${
+              quizActive ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
+            } ${righteous.className}`}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-5 h-5 shrink-0"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12 20h9" />
+              <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
+            </svg>
+            Take the Quiz
+          </Link>
+        </div>
+      </aside>
+
+      <button
+        onClick={() => setOpen(!open)}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
+      >
+        <p className="leading-5">
+          C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
+        </p>
+      </button>
+    </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/app/sem4/os/layout.tsx b/app/sem4/os/layout.tsx
index 7438920..85c8f65 100644
--- a/app/sem4/os/layout.tsx
+++ b/app/sem4/os/layout.tsx
@@ -15,18 +15,18 @@ export default function OperatingSystemLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="operating-system-root min-h-screen">
+    <div className="operating-system-root min-h-screen flex flex-col pt-14">
       {/* Navigation Bar */}
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         {/* Sidebar */}
         <Sidebar />
 
         {/* Main Area */}
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col min-w-0">
           {/* Page Content */}
-          <main className="flex-1 overflow-y-auto px-6">
+          <main className="flex-1 overflow-auto">
             {children}
           </main>
         </div>
diff --git a/app/sem6/ml/components/sidebar.tsx b/app/sem6/ml/components/sidebar.tsx
index eb44f83..4fc2188 100644
--- a/app/sem6/ml/components/sidebar.tsx
+++ b/app/sem6/ml/components/sidebar.tsx
@@ -15,20 +15,36 @@ export default function Sidebar() {
   const pathname = usePathname();
   const [open, setOpen] = useState(false);
 
-  // Default to open on desktop, closed on mobile
   useEffect(() => {
-    const isDesktop = window.innerWidth >= 1024;
-    setOpen(isDesktop);
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
   }, []);
 
+  const quizSlugMap: Record<string, string> = {
+    ml: "ml",
+  };
+
+  const subjectKey = pathname.split("/")[2] ?? "";
+  const quizSlug = quizSlugMap[subjectKey];
+  const quizHref = quizSlug ? `/quiz/${quizSlug}` : "/quiz";
+  const quizActive = pathname.startsWith("/quiz");
+
   return (
-    <div className="flex relative">
-      {/* Sidebar */}
-      <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
-        }`}
-      >
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+      
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
+        {/* Sidebar */}
+        <aside
+          className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+            open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
+          }`}
+        >
         <h2
           className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
           style={{ fontFamily: "Rockwell, Serif, serif" }}
@@ -52,18 +68,51 @@ export default function Sidebar() {
             );
           })}
         </ul>
+
+        <div className="border-t-4 border-[#1B0D00]">
+          <h2
+            className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2"
+            style={{ fontFamily: "Rockwell, Serif, serif" }}
+          >
+            Quiz
+          </h2>
+          <Link
+            href={quizHref}
+            className={`flex items-center gap-2 px-3 py-2 text-xl transition ${
+              quizActive ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
+            } ${righteous.className}`}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-5 h-5 shrink-0"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12 20h9" />
+              <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
+            </svg>
+            Take the Quiz
+          </Link>
+        </div>
       </aside>
 
-      {/* Toggle Button (always visible) */}
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
         </p>
       </button>
     </div>
+    </>
   );
 }
diff --git a/app/sem6/ml/layout.tsx b/app/sem6/ml/layout.tsx
index 6a5e614..f893b4a 100644
--- a/app/sem6/ml/layout.tsx
+++ b/app/sem6/ml/layout.tsx
@@ -9,18 +9,18 @@ export const metadata = {
 
 export default function MLLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem6-ml-root min-h-screen">
+    <div className="sem6-ml-root min-h-screen flex flex-col pt-14">
       {/* Navigation Bar */}
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         {/* Sidebar */}
         <Sidebar />
 
         {/* Main Area */}
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col min-w-0">
           {/* Page Content */}
-          <main className="flex-1 overflow-y-auto px-6">
+          <main className="flex-1 overflow-auto">
             {children}
           </main>
         </div>