diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index ae835140..6670bb18 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -99,10 +99,10 @@ const config: Config = {
               value: `<div class="grid grid-cols-3 gap-4 w-xl">
                 <a class="border-r col-span-1" href="/courses/" style="color:black ; ">Tutorials</a>
                 <div class="grid grid-cols-4 col-span-2">
-                  <a href="/docs/category/sql/" class="nav__icons"> <img src="/icons/sql.svg" title="SQL" alt="SQL" /> </a>
-                  <a href="/docs/category/python/" class="nav__icons"> <img src="/icons/python.svg" title="Python" alt="Python" /> </a>
-                  <a href="/docs/category/GitHub/" class="nav__icons" > <img src="/icons/github.svg" title="GitHub" alt="GitHub" /> </a>
-                  <a href="/docs/category/nextjs/" class="nav__icons" > <img src="/icons/nextjs.svg" title="Nextjs" alt="Nextjs" /> </a>
+                  <a href="/docs/sql/intro-sql" class="nav__icons"> <img src="/icons/sql.svg" title="SQL" alt="SQL" /> </a>
+                  <a href="/docs/python/intro-python" class="nav__icons"> <img src="/icons/python.svg" title="Python" alt="Python" /> </a>
+                  <a href="/docs/GitHub/intro-github" class="nav__icons" > <img src="/icons/github.svg" title="GitHub" alt="GitHub" /> </a>
+                  <a href="/docs/Nextjs/intro-github" class="nav__icons" > <img src="/icons/nextjs.svg" title="Nextjs" alt="Nextjs" /> </a>
                 </div>
               </div>`,
             },
diff --git a/sidebars.ts b/sidebars.ts
index 28971397..ed4dba48 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -13,21 +13,133 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  Create as many sidebars as you want.
  */
 const sidebars: SidebarsConfig = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  /*
+  // Custom manual sidebar configuration for complete control
   tutorialSidebar: [
-    'intro',
-    'hello',
     {
       type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
+      label: '🐙 GitHub',
+      className: 'custom-sidebar-github',
+      items: [
+        'GitHub/intro-github',
+        {
+          type: 'category',
+          label: '⚙️ Setup Environment',
+          className: 'custom-sidebar-setup',
+          items: [
+            'GitHub/setup-environment/setup-environment',
+            'GitHub/setup-environment/setup-git-on-windows',
+            'GitHub/setup-environment/setup-git-on-mac',
+            'GitHub/setup-environment/git-commands',
+          ],
+        },
+        {
+          type: 'category',
+          label: '📚 GitHub Basics',
+          className: 'custom-sidebar-basics',
+          items: [
+            'GitHub/GitHub-basics/create-github-repo',
+            'GitHub/GitHub-basics/github-repo-command-line',
+            'GitHub/GitHub-basics/how-to-clone-repository',
+            'GitHub/GitHub-basics/how-to-fork',
+            'GitHub/GitHub-basics/firs-opensource-code',
+          ],
+        },
+        {
+          type: 'category',
+          label: '👨‍💼 Maintainer Guide',
+          className: 'custom-sidebar-maintainer',
+          items: [
+            'GitHub/Maintainer-guide/github-labels',
+            'GitHub/Maintainer-guide/milestone',
+            'GitHub/Maintainer-guide/github-project',
+            'GitHub/Maintainer-guide/enable-dicussion',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: '🐍 Python',
+      className: 'custom-sidebar-python',
+      items: [
+        'python/intro-python',
+        'python/setup-environment',
+        'python/python-syntax',
+        'python/python-variables',
+        'python/datatype-python',
+        'python/python-casting',
+        'python/python-string',
+        'python/python-operators',
+        'python/python-list',
+        'python/python-tuple',
+        'python/python-set',
+        'python/python-dictionaries',
+        'python/python-array',
+        'python/python-conditional-statements',
+      ],
+    },
+    {
+      type: 'category',
+      label: '🗄️ SQL',
+      className: 'custom-sidebar-sql',
+      items: [
+        'sql/intro-sql',
+        'sql/setup-environment',
+        {
+          type: 'category',
+          label: '📊 SQL Basics',
+          className: 'custom-sidebar-sql-basics',
+          items: [
+            'sql/SQL-basics/selecting-data',
+            'sql/SQL-basics/filtering-data',
+            'sql/SQL-basics/ordering-data',
+            'sql/SQL-basics/grouping-data',
+            'sql/SQL-basics/the-inequality-operator',
+          ],
+        },
+        {
+          type: 'category',
+          label: '🔄 Table Transformation',
+          className: 'custom-sidebar-sql-transform',
+          items: [
+            'sql/table-transformation/table-creation',
+            'sql/table-transformation/alter-table',
+            'sql/table-transformation/data-operations',
+            'sql/table-transformation/list-drop-table',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: '⚡ Next.js',
+      className: 'custom-sidebar-nextjs',
+      items: [
+        'Nextjs/intro-github',
+        'Nextjs/setup-environment',
+        'Nextjs/git-commands',
+      ],
+    },
+    {
+      type: 'category',
+      label: '🎓 Google Student Ambassador',
+      className: 'custom-sidebar-gsa',
+      items: [
+        'Google-Student-Ambassador/part-1-getting-started/gsa-part-1',
+        'Google-Student-Ambassador/part-2-application-process/gsa-part-2',
+        'Google-Student-Ambassador/part-3-eligibility/gsa-part-3',
+        'Google-Student-Ambassador/part-4-gemini-pro/gsa-part-4',
+      ],
+    },
+    {
+      type: 'category',
+      label: '🔧 Technical',
+      className: 'custom-sidebar-technical',
+      items: [
+        'Technical/intro-github',
+      ],
     },
   ],
-   */
 };
 
 export default sidebars;
diff --git a/src/components/CustomSidebar.module.css b/src/components/CustomSidebar.module.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/CustomSidebar.tsx b/src/components/CustomSidebar.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/css/custom.css b/src/css/custom.css
index 92dcaedb..f0512874 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -10,6 +10,208 @@
 /* You can override the default Infima variables here. */
 @import "tailwindcss";
 
+/* ===== UNIFIED SIDEBAR STYLING ===== */
+/**
+ * Combined sidebar styles from:
+ * - custom-sidebar.css
+ * - menu-fixes.css
+ * - sidebar-active.css
+ * - active-sidebar-override.css
+ */
+
+/* ================= SECTION 1: BASIC MENU STRUCTURE ================= */
+
+/* Fix menu overflow and ensure proper display */
+.menu__list {
+  overflow: visible;
+  padding-bottom: 2rem;
+}
+
+/* Ensure the sidebar container allows content to overflow when needed */
+.sidebar {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 5rem;
+}
+
+/* Style for expanded categories to ensure they're fully visible */
+.menu__list-item {
+  overflow: visible;
+  margin: 2px 0;
+}
+
+/* Custom spacing for sidebar */
+.theme-doc-sidebar-container {
+  --doc-sidebar-width: 320px;
+}
+
+/* ================= SECTION 2: ACTIVE ITEM STYLING ================= */
+
+/* Better transitions for all menu links */
+.menu__link {
+  transition: all 0.25s ease-in-out;
+}
+
+/* Force high visibility for active sidebar items - Green Theme */
+.menu__link--active {
+  background-color: #ecfdf5; /* Light green background */
+  color: #2f855a; /* Strong green text */
+  font-weight: bold;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(56, 161, 105, 0.2);
+}
+
+/* Make the active icon stand out in the sidebar */
+.menu__link--active .categoryIcon,
+.menu__link--active .linkIcon {
+  color: #38a169;
+}
+
+/* Make active text bold and larger */
+.menu__link--active span {
+  font-weight: 700;
+  color: #2f855a; /* Strong green color */
+  font-size: 1.05em;
+}
+
+/* ================= SECTION 3: ACTIVE INDICATORS ================= */
+
+/* Add bright indicators */
+.menu__link--active::before {
+  content: "•";
+  position: absolute;
+  left: -2px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 24px;
+  color: #38a169; /* Green dot */
+  animation: breatheGreen 2s infinite;
+}
+
+/* Add arrow indicator to the right */
+.menu__link--active::after {
+  content: "→";
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #38a169;
+  font-weight: bold;
+}
+
+/* Breathing animation for active indicators */
+@keyframes breatheGreen {
+  0% {
+    opacity: 0.7;
+    transform: translateY(-50%) scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    opacity: 0.7;
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+/* ================= SECTION 4: CUSTOM SIDEBAR CATEGORY THEMES ================= */
+
+/* GitHub theme */
+.custom-sidebar-github > .menu__list-item-collapsible > .menu__link {
+  background: linear-gradient(135deg, #24292e, #586069);
+  color: white;
+  border-radius: 8px;
+  margin: 4px 0;
+  font-weight: 600;
+}
+
+/* Python theme */
+.custom-sidebar-python > .menu__list-item-collapsible > .menu__link {
+  background: linear-gradient(135deg, #3776ab, #ffd43b);
+  color: white;
+  border-radius: 8px;
+  margin: 4px 0;
+  font-weight: 600;
+}
+
+/* SQL theme */
+.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link {
+  background: linear-gradient(135deg, #336791, #4479a1);
+  color: white;
+  border-radius: 8px;
+  margin: 4px 0;
+  font-weight: 600;
+}
+
+/* Next.js theme */
+.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link {
+  background: linear-gradient(135deg, #000000, #333333);
+  color: white;
+  border-radius: 8px;
+  margin: 4px 0;
+  font-weight: 600;
+}
+
+/* Google Student Ambassador theme */
+.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link {
+  background: linear-gradient(135deg, #4285f4, #34a853);
+  color: white;
+  border-radius: 8px;
+  margin: 4px 0;
+  font-weight: 600;
+}
+
+/* Technical theme */
+.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+  color: white;
+  border-radius: 8px;
+  margin: 4px 0;
+  font-weight: 600;
+}
+
+/* Custom subcategory styling */
+.custom-sidebar-setup > .menu__list-item-collapsible > .menu__link,
+.custom-sidebar-basics > .menu__list-item-collapsible > .menu__link,
+.custom-sidebar-maintainer > .menu__list-item-collapsible > .menu__link {
+  background: rgba(36, 41, 46, 0.1);
+  border-left: 3px solid #24292e;
+  padding-left: 16px;
+  margin-left: 8px;
+}
+
+/* Hover effects for all custom categories */
+.custom-sidebar-github > .menu__list-item-collapsible > .menu__link:hover,
+.custom-sidebar-python > .menu__list-item-collapsible > .menu__link:hover,
+.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link:hover,
+.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link:hover,
+.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link:hover,
+.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link:hover {
+  transform: translateX(4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+/* ================= SECTION 5: DARK MODE ADJUSTMENTS ================= */
+
+/* Dark mode styles for active items */
+html[data-theme="dark"] .menu__link--active {
+  background-color: rgba(72, 187, 120, 0.15);
+  color: #9ae6b4;
+}
+
+/* Dark mode text color */
+html[data-theme="dark"] .menu__link--active span {
+  color: #9ae6b4;
+}
+
+/* Dark mode indicator colors */
+html[data-theme="dark"] .menu__link--active::before,
+html[data-theme="dark"] .menu__link--active::after {
+  color: #68d391;
+}
+
 /* ===== INSTANT THEME TRANSITIONS ===== */
 html {
   transition: background-color 0.15s ease, color 0.15s ease !important;
@@ -1590,7 +1792,6 @@ html {
     pointer-events: auto !important;
   }
 
-
   /* Fix: Remove extra box/space above dropdown nav items in sidebar */
   .navbar-sidebar__item,
   .navbar-sidebar__link,
@@ -1624,107 +1825,106 @@ html {
 }
 
 /* STAR section border fixes for dark mode */
-[data-theme='dark'] .star-border-red {
-  border-color: #ef4444 !important; 
+[data-theme="dark"] .star-border-red {
+  border-color: #ef4444 !important;
 }
 
-  /* Fix: Remove extra box/space above dropdown nav items in sidebar */
-  .navbar-sidebar__item,
-  .navbar-sidebar__link,
-  .navbar-sidebar__brand {
-    margin-top: 0 !important;
-    padding-top: 0 !important;
-    border-top: none !important;
-    box-shadow: none !important;
-  }
-  .navbar-sidebar__item:first-child,
-  .navbar-sidebar__link:first-child {
-    margin-top: 0 !important;
-    padding-top: 0 !important;
-    border-top: none !important;
-    box-shadow: none !important;
-  }
-  /* Remove any unwanted hr or divider above dropdowns */
-  .navbar-sidebar hr,
-  .navbar-sidebar__item hr {
-    display: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-  }
-  /* Remove grid gap above dropdowns */
-  .navbar-sidebar .grid {
-    gap: 0 !important;
-    margin-top: 0 !important;
-    padding-top: 0 !important;
-  }
-
+/* Fix: Remove extra box/space above dropdown nav items in sidebar */
+.navbar-sidebar__item,
+.navbar-sidebar__link,
+.navbar-sidebar__brand {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+  border-top: none !important;
+  box-shadow: none !important;
+}
+.navbar-sidebar__item:first-child,
+.navbar-sidebar__link:first-child {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+  border-top: none !important;
+  box-shadow: none !important;
+}
+/* Remove any unwanted hr or divider above dropdowns */
+.navbar-sidebar hr,
+.navbar-sidebar__item hr {
+  display: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+}
+/* Remove grid gap above dropdowns */
+.navbar-sidebar .grid {
+  gap: 0 !important;
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
 
 /* STAR section border fixes for dark mode */
-[data-theme='dark'] .star-border-red {
-  border-color: #ef4444 !important; 
+[data-theme="dark"] .star-border-red {
+  border-color: #ef4444 !important;
 }
 
-  [data-theme="dark"] .star-border-green {
-    border-color: #22c55e !important;
-  }
+[data-theme="dark"] .star-border-green {
+  border-color: #22c55e !important;
+}
 
-  [data-theme="dark"] .star-border-blue {
-    border-color: #3b82f6 !important;
-  }
+[data-theme="dark"] .star-border-blue {
+  border-color: #3b82f6 !important;
+}
 
-  [data-theme="light"] .interview-prep-page h1,
-  [data-theme="light"] .interview-prep-page h2,
-  [data-theme="light"] .interview-prep-page h3,
-  [data-theme="light"] .interview-prep-page h4,
-  [data-theme="light"] .interview-prep-page h5,
-  [data-theme="light"] .interview-prep-page h6 {
-    color: #ffffff !important;
-  }
+[data-theme="light"] .interview-prep-page h1,
+[data-theme="light"] .interview-prep-page h2,
+[data-theme="light"] .interview-prep-page h3,
+[data-theme="light"] .interview-prep-page h4,
+[data-theme="light"] .interview-prep-page h5,
+[data-theme="light"] .interview-prep-page h6 {
+  color: #ffffff !important;
+}
 
-  .watch-video-btn {
-    background-color: #dc2626;
-    color: #ffffff;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    display: inline-flex;
-    align-items: center;
-    transition: background-color 0.2s ease-in-out;
-  }
+.watch-video-btn {
+  background-color: #dc2626;
+  color: #ffffff;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  transition: background-color 0.2s ease-in-out;
+}
 
-  .watch-video-btn:hover {
-    background-color: #b91c1c;
-  }
+.watch-video-btn:hover {
+  background-color: #b91c1c;
+}
 
-  [data-theme="dark"] .interview-prep-sidebar:hover {
-    border-color: #3b82f6 !important;
-  }
+[data-theme="dark"] .interview-prep-sidebar:hover {
+  border-color: #3b82f6 !important;
+}
 
-  [data-theme="dark"] .interview-prep-sidebar {
-    border-color: #4b5563 !important;
-  }
+[data-theme="dark"] .interview-prep-sidebar {
+  border-color: #4b5563 !important;
+}
 
-  /* Active tab in dark mode */
-  [data-theme="dark"] .interview-prep-nav-tab-active {
-    border-bottom-color: #60a5fa !important;
-    color: #60a5fa !important;
-  }
+/* Active tab in dark mode */
+[data-theme="dark"] .interview-prep-nav-tab-active {
+  border-bottom-color: #60a5fa !important;
+  color: #60a5fa !important;
+}
 
-  /* Inactive tab in dark mode */
-  [data-theme="dark"] .interview-prep-nav-tab-inactive {
-    border-bottom-color: transparent !important;
-    color: #9ca3af !important;
-  }
+/* Inactive tab in dark mode */
+[data-theme="dark"] .interview-prep-nav-tab-inactive {
+  border-bottom-color: transparent !important;
+  color: #9ca3af !important;
+}
 
-  [data-theme="dark"] .interview-prep-nav-tab-inactive:hover {
-    color: #d1d5db !important;
-  }
+[data-theme="dark"] .interview-prep-nav-tab-inactive:hover {
+  color: #d1d5db !important;
+}
 
-  .interview-prep-discord-btn {
-    color: white;
-  }
+.interview-prep-discord-btn {
+  color: white;
+}
 
 .interview-prep-discord-btn{
   color:white;
@@ -1735,18 +1935,17 @@ html {
 
 }
 
-[data-theme='dark'] .overview-sidebar-blue{
-  border-color:#3b82f6
+[data-theme="dark"] .overview-sidebar-blue {
+  border-color: #3b82f6;
 }
-[data-theme='dark'] .overview-sidebar-green{
-  border-color:#22c55e
+[data-theme="dark"] .overview-sidebar-green {
+  border-color: #22c55e;
 }
-[data-theme='dark'] .overview-sidebar-yellow{
-  border-color:#eab308
+[data-theme="dark"] .overview-sidebar-yellow {
+  border-color: #eab308;
 }
-[data-theme='dark'] .overview-sidebar-purple{
-  border-color: #a855f7
-
+[data-theme="dark"] .overview-sidebar-purple {
+  border-color: #a855f7;
 }
 [data-theme='dark'] .technical-outer{
   border-color: #3b82f6
diff --git a/src/pages/get-started/index.tsx b/src/pages/get-started/index.tsx
index 873f7f07..0f10c19f 100644
--- a/src/pages/get-started/index.tsx
+++ b/src/pages/get-started/index.tsx
@@ -3,9 +3,9 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { motion, useAnimation, useInView } from "framer-motion";
-import Head from '@docusaurus/Head';
-import { useColorMode } from '@docusaurus/theme-common';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import Head from "@docusaurus/Head";
+import { useColorMode } from "@docusaurus/theme-common";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
 // Safe hook for color mode that handles SSR
 function useSafeColorMode() {
@@ -15,17 +15,19 @@ function useSafeColorMode() {
     setMounted(true);
   }, []);
 
-  let colorMode = 'light';
+  let colorMode = "light";
   let isDark = false;
 
   if (mounted && ExecutionEnvironment.canUseDOM) {
     try {
-      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
+      const {
+        useColorMode: useColorModeHook,
+      } = require("@docusaurus/theme-common");
       const colorModeResult = useColorModeHook();
       colorMode = colorModeResult.colorMode;
-      isDark = colorMode === 'dark';
+      isDark = colorMode === "dark";
     } catch (error) {
-      console.warn('Failed to get color mode:', error);
+      console.warn("Failed to get color mode:", error);
     }
   }
 
@@ -77,7 +79,7 @@ const AnimatedSection = ({ children, delay = 0 }: AnimatedSectionProps) => {
           duration: 0.8,
           delay: delay * 0.15,
           ease: [0.16, 1, 0.3, 1],
-          staggerChildren: 0.1
+          staggerChildren: 0.1,
         },
       });
     }
@@ -88,16 +90,18 @@ const AnimatedSection = ({ children, delay = 0 }: AnimatedSectionProps) => {
       ref={ref}
       initial={{ opacity: 0, y: 30 }}
       animate={controls}
-      style={{
-        willChange: 'opacity, transform',
-        backfaceVisibility: 'hidden',
-        WebkitFontSmoothing: 'subpixel-antialiased'
-      } as React.CSSProperties}
+      style={
+        {
+          willChange: "opacity, transform",
+          backfaceVisibility: "hidden",
+          WebkitFontSmoothing: "subpixel-antialiased",
+        } as React.CSSProperties
+      }
     >
       <motion.div
         initial={{ opacity: 0 }}
         animate={isInView ? { opacity: 1 } : { opacity: 0 }}
-        transition={{ duration: 0.5, delay: 0.2 + (delay * 0.1) }}
+        transition={{ duration: 0.5, delay: 0.2 + delay * 0.1 }}
       >
         {children}
       </motion.div>
@@ -122,25 +126,27 @@ function GetStartedHeader() {
     <header className={styles.heroBanner}>
       <div className="container">
         <div className={styles.heroContent}>
-          <motion.h1 
+          <motion.h1
             className="hero__title"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
           >
-            Transform Your Career in <span className={styles.highlight}>Tech</span>
+            Transform Your Career in{" "}
+            <span className={styles.highlight}>Tech</span>
           </motion.h1>
-          
-          <motion.p 
+
+          <motion.p
             className="hero__subtitle"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
           >
-            Master the art of coding with our comprehensive learning paths and hands-on challenges
+            Master the art of coding with our comprehensive learning paths and
+            hands-on challenges
           </motion.p>
-          
-          <motion.div 
+
+          <motion.div
             className={styles.typingContainer}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -150,9 +156,11 @@ function GetStartedHeader() {
               <span className={styles.staticText}>Start</span>
               <div className={styles.typingAnimation}>
                 {texts.map((text, i) => (
-                  <span 
-                    key={i} 
-                    className={`${styles.typingWord} ${i === textIndex ? styles.visible : ''}`}
+                  <span
+                    key={i}
+                    className={`${styles.typingWord} ${
+                      i === textIndex ? styles.visible : ""
+                    }`}
                   >
                     {text}
                   </span>
@@ -161,8 +169,8 @@ function GetStartedHeader() {
               <span className={styles.staticText}>Today</span>
             </div>
           </motion.div>
-          
-          <motion.div 
+
+          <motion.div
             className={styles.buttons}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -174,18 +182,36 @@ function GetStartedHeader() {
             >
               Start Learning Now
               <span className={styles.buttonIcon} aria-hidden="true">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
                 </svg>
               </span>
             </Link>
             <Link
               className={`${styles.button} ${styles.buttonOutline}`}
-              to="/docs/category/github"
+              to="/docs/GitHub/intro-github"
             >
               Explore Docs
               <span className={styles.buttonIcon} aria-hidden="true">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
                   <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                   <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                 </svg>
@@ -201,120 +227,126 @@ function GetStartedHeader() {
 const features = [
   {
     title: "Hands-on Coding Challenges",
-    description: "Master programming through practical coding challenges with real-world applications",
+    description:
+      "Master programming through practical coding challenges with real-world applications",
     icon: "💻",
-    color: "#3b82f6"
+    color: "#3b82f6",
   },
   {
     title: "Real Interview Practice",
-    description: "Prepare with questions from top tech companies like Google, Amazon, and Microsoft",
+    description:
+      "Prepare with questions from top tech companies like Google, Amazon, and Microsoft",
     icon: "🎯",
-    color: "#8b5cf6"
+    color: "#8b5cf6",
   },
   {
     title: "Structured Learning Paths",
-    description: "Follow expert-designed roadmaps for different tech stacks and skill levels",
+    description:
+      "Follow expert-designed roadmaps for different tech stacks and skill levels",
     icon: "🛣️",
-    color: "#10b981"
+    color: "#10b981",
   },
   {
     title: "Interactive Environment",
-    description: "Code directly in your browser with instant feedback and debugging tools",
+    description:
+      "Code directly in your browser with instant feedback and debugging tools",
     icon: "⚡",
-    color: "#f59e0b"
+    color: "#f59e0b",
   },
   {
     title: "100+ Problems",
-    description: "Curated collection of real-world coding interview questions and solutions",
+    description:
+      "Curated collection of real-world coding interview questions and solutions",
     icon: "🔢",
-    color: "#ec4899"
+    color: "#ec4899",
   },
   {
     title: "Multiple Languages",
-    description: "Support for popular programming languages including Python, JavaScript, and more",
+    description:
+      "Support for popular programming languages including Python, JavaScript, and more",
     icon: "🌐",
-    color: "#06b6d4"
-  }
+    color: "#06b6d4",
+  },
 ];
 
 const stats = [
   { value: "10,000+", label: "Active Learners" },
   { value: "100+", label: "Hours of Content" },
   { value: "24/7", label: "Community Support" },
-  { value: "4.9/5", label: "Average Rating" }
+  { value: "4.9/5", label: "Average Rating" },
 ];
 
 const learningPaths = [
   {
     title: "Web Development",
-    description: "Master full-stack development with modern frameworks like React, Node.js, and databases. Build responsive, interactive web applications.",
+    description:
+      "Master full-stack development with modern frameworks like React, Node.js, and databases. Build responsive, interactive web applications.",
     icon: "🖥️",
-    color: "#4f46e5"
+    color: "#4f46e5",
   },
   {
     title: "Data Science",
-    description: "Learn data analysis, visualization, and machine learning with Python, Pandas, and TensorFlow. Turn data into actionable insights.",
+    description:
+      "Learn data analysis, visualization, and machine learning with Python, Pandas, and TensorFlow. Turn data into actionable insights.",
     icon: "📊",
-    color: "#8b5cf6"
+    color: "#8b5cf6",
   },
   {
     title: "Mobile Apps",
-    description: "Create beautiful, performant cross-platform mobile applications using React Native and modern mobile development practices.",
+    description:
+      "Create beautiful, performant cross-platform mobile applications using React Native and modern mobile development practices.",
     icon: "📱",
-    color: "#10b981"
+    color: "#10b981",
   },
   {
     title: "DevOps",
-    description: "Master CI/CD, Docker, Kubernetes, and cloud deployment to build scalable, reliable infrastructure and deployment pipelines.",
+    description:
+      "Master CI/CD, Docker, Kubernetes, and cloud deployment to build scalable, reliable infrastructure and deployment pipelines.",
     icon: "⚙️",
-    color: "#f59e0b"
-  }
+    color: "#f59e0b",
+  },
 ];
 
 function Feature({ title, description, icon, color }: FeatureProps) {
   const [isHovered, setIsHovered] = useState(false);
-  
+
   // Create a ref to apply the custom property
   const featureRef = useRef<HTMLElement>(null);
-  
+
   // Apply the color as a CSS variable when the component mounts or color changes
   useEffect(() => {
     if (featureRef.current) {
-      featureRef.current.style.setProperty('--feature-color', color);
+      featureRef.current.style.setProperty("--feature-color", color);
     }
   }, [color]);
-  
+
   const iconStyle = {
     background: `linear-gradient(135deg, ${color}10, ${color}20)`,
-    color: color
+    color: color,
   };
-  
+
   return (
-    <motion.article 
+    <motion.article
       ref={featureRef}
       className={styles.feature}
       onHoverStart={() => setIsHovered(true)}
       onHoverEnd={() => setIsHovered(false)}
-      whileHover={{ 
+      whileHover={{
         y: -10,
-        boxShadow: `0 20px 40px ${color}20`
+        boxShadow: `0 20px 40px ${color}20`,
       }}
       aria-label={title}
     >
-      <div 
-        className={styles.featureIcon}
-        style={iconStyle}
-        aria-hidden="true"
-      >
+      <div className={styles.featureIcon} style={iconStyle} aria-hidden="true">
         {icon}
       </div>
       <h3 className={styles.featureTitle}>{title}</h3>
       <p className={styles.featureDescription}>{description}</p>
-      <motion.div 
+      <motion.div
         className={styles.featureHover}
         initial={{ width: 0 }}
-        animate={{ width: isHovered ? '100%' : 0 }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
+        animate={{ width: isHovered ? "100%" : 0 }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
         aria-hidden="true"
       />
     </motion.article>
@@ -323,49 +355,47 @@ function Feature({ title, description, icon, color }: FeatureProps) {
 
 function StatCard({ value, label, index = 0 }: StatCardProps) {
   return (
-    <motion.article 
+    <motion.article
       className={styles.statCard}
       initial={{ opacity: 0, y: 30 }}
-      whileInView={{ 
-        opacity: 1, 
+      whileInView={{
+        opacity: 1,
         y: 0,
-        transition: { 
-          duration: 0.6, 
+        transition: {
+          duration: 0.6,
           delay: index * 0.1,
-          ease: "easeOut"
-        }
+          ease: "easeOut",
+        },
       }}
       viewport={{ once: true, margin: "-50px" }}
-      whileHover={{ 
+      whileHover={{
         y: -5,
-        boxShadow: '0 15px 30px rgba(0, 0, 0, 0.2)'
+        boxShadow: "0 15px 30px rgba(0, 0, 0, 0.2)",
       }}
     >
-      <motion.div 
+      <motion.div
         className={styles.statValue}
         aria-label={value}
         initial={{ scale: 0.9 }}
-        whileInView={{ 
+        whileInView={{
           scale: 1,
-          transition: { 
-            delay: 0.2 + (index * 0.05), 
-            type: 'spring', 
-            stiffness: 100 
-          }
+          transition: {
+            delay: 0.2 + index * 0.05,
+            type: "spring",
+            stiffness: 100,
+          },
         }}
         viewport={{ once: true }}
       >
         {value}
       </motion.div>
-      <div className={styles.statLabel}>
-        {label}
-      </div>
-      <motion.div 
+      <div className={styles.statLabel}>{label}</div>
+      <motion.div
         className={styles.statGlow}
         initial={{ opacity: 0 }}
-        whileInView={{ 
+        whileInView={{
           opacity: 0.3,
-          transition: { delay: 0.3 + (index * 0.1) }
+          transition: { delay: 0.3 + index * 0.1 },
         }}
         viewport={{ once: true }}
       />
@@ -373,26 +403,26 @@ function StatCard({ value, label, index = 0 }: StatCardProps) {
   );
 }
 
-const LearningPath = ({ 
-  title, 
-  description, 
-  icon, 
-  color = '#3b82f6',
-  index = 0, 
-  isCompleted = false, 
-  onToggleComplete = () => {}
+const LearningPath = ({
+  title,
+  description,
+  icon,
+  color = "#3b82f6",
+  index = 0,
+  isCompleted = false,
+  onToggleComplete = () => {},
 }: LearningPathProps) => {
   const isEven = index % 2 === 0;
   const delay = index * 0.15;
   const [isHovered, setIsHovered] = React.useState(false);
-  
+
   // State for responsive position and layout
   const [layout, setLayout] = React.useState({
     isMobile: false,
     isTablet: false,
     isLargeTablet: false,
     spacing: 200,
-    cardWidth: 'calc(50% - 1.5rem)'
+    cardWidth: "calc(50% - 1.5rem)",
   });
 
   // Update position on window resize
@@ -402,39 +432,39 @@ const LearningPath = ({
       const isMobileView = width < 768;
       const isTableView = width >= 768 && width < 960;
       const isLargeTableView = width >= 960 && width < 1024;
-      
+
       // Calculate spacing based on viewport
       let spacing, cardWidth;
       if (isMobileView) {
         spacing = 160;
-        cardWidth = '100%';
+        cardWidth = "100%";
       } else if (isTableView) {
         spacing = 180;
-        cardWidth = 'calc(50% - 1rem)';
+        cardWidth = "calc(50% - 1rem)";
       } else if (isLargeTableView) {
         spacing = 200;
-        cardWidth = 'calc(50% - 1.25rem)';
+        cardWidth = "calc(50% - 1.25rem)";
       } else {
         spacing = 220;
-        cardWidth = 'calc(50% - 2rem)';
+        cardWidth = "calc(50% - 2rem)";
       }
-      
+
       setLayout({
         isMobile: isMobileView,
         isTablet: isTableView || isLargeTableView,
         isLargeTablet: isLargeTableView,
         spacing,
-        cardWidth
+        cardWidth,
       });
     };
-    
+
     const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(document.body);
-    
+
     handleResize();
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
       resizeObserver.disconnect();
     };
   }, [index]);
@@ -442,152 +472,178 @@ const LearningPath = ({
   return (
     <motion.article
       className={`${styles.pathCard} group relative overflow-hidden`}
-      style={{
-        '--card-color': color,
-        '--card-color-light': `${color}20`,
-        '--card-color-dark': `${color}80`,
-        position: layout.isMobile ? 'relative' : 'absolute',
-        margin: layout.isMobile ? '0 auto 1.25rem' : '0',
-        maxWidth: '100%',
-        width: layout.isMobile ? '100%' : layout.cardWidth,
-        top: layout.isMobile ? 'auto' : `${80 + (index * layout.spacing)}px`,
-        left: layout.isMobile ? 'auto' : isEven ? '50%' : 'auto',
-        right: layout.isMobile ? 'auto' : isEven ? 'auto' : '50%',
-        transform: layout.isMobile ? 'none' : isEven ? 'none' : 'translateX(50%)',
-        marginLeft: layout.isMobile ? 'auto' : isEven ? 0 : 'auto',
-        marginRight: layout.isMobile ? 'auto' : isEven ? 'auto' : 0,
-        opacity: isCompleted ? 0.9 : 1,
-        filter: isCompleted ? 'saturate(0.9)' : 'none',
-        transition: 'all 0.3s ease-in-out',
-        border: `1px solid ${isCompleted ? `${color}40` : 'rgba(255, 255, 255, 0.1)'}`,
-        background: 'linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98))',
-        boxShadow: '0 8px 20px -5px rgba(0, 0, 0, 0.15)',
-        transformOrigin: 'center',
-        zIndex: isHovered ? 10 : 1,
-        ...(!layout.isMobile && {
-          '@media (min-width: 960px)': {
-            width: 'calc(50% - 1.5rem)'
-          },
-          '@media (min-width: 1024px)': {
-            width: 'calc(50% - 2rem)'
-          },
-          '@media (min-width: 1280px)': {
-            width: 'calc(50% - 3rem)'
-          },
-          '@media (min-width: 1440px)': {
-            width: 'calc(50% - 4rem)'
-          }
-        }),
-      } as React.CSSProperties}
+      style={
+        {
+          "--card-color": color,
+          "--card-color-light": `${color}20`,
+          "--card-color-dark": `${color}80`,
+          position: layout.isMobile ? "relative" : "absolute",
+          margin: layout.isMobile ? "0 auto 1.25rem" : "0",
+          maxWidth: "100%",
+          width: layout.isMobile ? "100%" : layout.cardWidth,
+          top: layout.isMobile ? "auto" : `${80 + index * layout.spacing}px`,
+          left: layout.isMobile ? "auto" : isEven ? "50%" : "auto",
+          right: layout.isMobile ? "auto" : isEven ? "auto" : "50%",
+          transform: layout.isMobile
+            ? "none"
+            : isEven
+            ? "none"
+            : "translateX(50%)",
+          marginLeft: layout.isMobile ? "auto" : isEven ? 0 : "auto",
+          marginRight: layout.isMobile ? "auto" : isEven ? "auto" : 0,
+          opacity: isCompleted ? 0.9 : 1,
+          filter: isCompleted ? "saturate(0.9)" : "none",
+          transition: "all 0.3s ease-in-out",
+          border: `1px solid ${
+            isCompleted ? `${color}40` : "rgba(255, 255, 255, 0.1)"
+          }`,
+          background:
+            "linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98))",
+          boxShadow: "0 8px 20px -5px rgba(0, 0, 0, 0.15)",
+          transformOrigin: "center",
+          zIndex: isHovered ? 10 : 1,
+          ...(!layout.isMobile && {
+            "@media (min-width: 960px)": {
+              width: "calc(50% - 1.5rem)",
+            },
+            "@media (min-width: 1024px)": {
+              width: "calc(50% - 2rem)",
+            },
+            "@media (min-width: 1280px)": {
+              width: "calc(50% - 3rem)",
+            },
+            "@media (min-width: 1440px)": {
+              width: "calc(50% - 4rem)",
+            },
+          }),
+        } as React.CSSProperties
+      }
       initial={{ opacity: 0, x: isEven ? -100 : 100, y: 20 }}
-      animate={{ 
+      animate={{
         opacity: 1,
-        x: 0, 
+        x: 0,
         y: 0,
         scale: isHovered ? 1.02 : 1,
-        boxShadow: isHovered 
-          ? '0 20px 40px -10px rgba(0, 0, 0, 0.3)' 
-          : '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
+        boxShadow: isHovered
+          ? "0 20px 40px -10px rgba(0, 0, 0, 0.3)"
+          : "0 10px 25px -5px rgba(0, 0, 0, 0.1)",
         transition: {
           type: "spring",
           damping: 15,
           stiffness: 100,
-          delay: delay
-        }
+          delay: delay,
+        },
       }}
       whileHover={{
         scale: 1.02,
-        transition: { duration: 0.2 }
+        transition: { duration: 0.2 },
       }}
       onHoverStart={() => setIsHovered(true)}
       onHoverEnd={() => setIsHovered(false)}
     >
       {/* Hover overlay */}
-      <motion.div 
+      <motion.div
         className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"
         style={{
-          background: `radial-gradient(circle at 70% 30%, ${color}10 0%, transparent 70%)`
+          background: `radial-gradient(circle at 70% 30%, ${color}10 0%, transparent 70%)`,
         }}
       />
-      
+
       <div className="relative z-10">
         <div className="flex flex-col sm:flex-row items-start gap-3 sm:gap-4 p-4 sm:p-5 md:p-6">
-          <motion.div 
+          <motion.div
             className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 flex items-center justify-center rounded-xl text-lg sm:text-xl md:text-2xl relative overflow-hidden"
             style={{
               background: `linear-gradient(135deg, ${color}, ${color}80)`,
               boxShadow: `0 4px 15px -5px ${color}80`,
-              opacity: isCompleted ? 0.9 : 1
+              opacity: isCompleted ? 0.9 : 1,
             }}
             whileHover={{
               scale: 1.1,
               rotate: isCompleted ? 0 : 5,
-              transition: { duration: 0.2 }
+              transition: { duration: 0.2 },
             }}
           >
             <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-50"></div>
             <span className="relative z-10">{icon}</span>
           </motion.div>
-          
+
           <div className="flex-1">
             <div className="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-2">
-              <h3 className="text-base sm:text-lg md:text-xl font-bold text-white break-words leading-tight">{title}</h3>
+              <h3 className="text-base sm:text-lg md:text-xl font-bold text-white break-words leading-tight">
+                {title}
+              </h3>
               {isCompleted && (
                 <div className="ml-2 px-2 py-0.5 bg-green-500/20 text-green-400 text-xs font-medium rounded-full flex items-center whitespace-nowrap">
-                  <svg className="w-3 h-3 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  <svg
+                    className="w-3 h-3 mr-1 flex-shrink-0"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
                   </svg>
                   <span className="hidden sm:inline">Completed</span>
                   <span className="sm:hidden">✓</span>
                 </div>
               )}
             </div>
-            
+
             <p className="text-gray-300 mb-4 leading-relaxed">{description}</p>
-            
+
             <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-700/50">
-              <Link 
-                to="/docs/category/github" 
+              <Link
+                to="/docs/GitHub/intro-github"
                 className={`inline-flex items-center text-sm font-medium transition-all duration-200 ${
-                  isCompleted 
-                    ? 'text-green-400 hover:text-green-300' 
-                    : 'text-blue-400 hover:text-blue-300'
+                  isCompleted
+                    ? "text-green-400 hover:text-green-300"
+                    : "text-blue-400 hover:text-blue-300"
                 } group-hover:underline`}
               >
-                {isCompleted ? 'Continue Learning' : 'Start Learning'}
-                <svg 
+                {isCompleted ? "Continue Learning" : "Start Learning"}
+                <svg
                   className={`w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1 ${
-                    isCompleted ? 'text-green-400' : 'text-blue-400'
-                  }`} 
-                  fill="none" 
-                  viewBox="0 0 24 24" 
+                    isCompleted ? "text-green-400" : "text-blue-400"
+                  }`}
+                  fill="none"
+                  viewBox="0 0 24 24"
                   stroke="currentColor"
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </Link>
-              
+
               {/* Improved Completion Toggle */}
-              <motion.button 
+              <motion.button
                 onClick={(e) => {
                   e.preventDefault();
                   onToggleComplete();
                 }}
                 className={`relative inline-flex items-center h-6 rounded-full w-11 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 ${
-                  isCompleted 
-                    ? 'bg-green-500 focus:ring-green-500' 
-                    : 'bg-gray-600 hover:bg-gray-500 focus:ring-blue-500'
+                  isCompleted
+                    ? "bg-green-500 focus:ring-green-500"
+                    : "bg-gray-600 hover:bg-gray-500 focus:ring-blue-500"
                 }`}
                 whileTap={{ scale: 0.95 }}
                 aria-pressed={isCompleted}
-                aria-label={isCompleted ? 'Mark as incomplete' : 'Mark as complete'}
+                aria-label={
+                  isCompleted ? "Mark as incomplete" : "Mark as complete"
+                }
               >
                 <span className="sr-only">
-                  {isCompleted ? 'Mark as incomplete' : 'Mark as complete'}
+                  {isCompleted ? "Mark as incomplete" : "Mark as complete"}
                 </span>
                 <motion.span
                   className={`inline-block w-4 h-4 transform bg-white rounded-full transition-all duration-200 ease-in-out flex items-center justify-center ${
-                    isCompleted ? 'translate-x-6' : 'translate-x-1'
+                    isCompleted ? "translate-x-6" : "translate-x-1"
                   }`}
                   layout
                 >
@@ -599,7 +655,11 @@ const LearningPath = ({
                       xmlns="http://www.w3.org/2000/svg"
                       initial={{ scale: 0 }}
                       animate={{ scale: 1 }}
-                      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 500,
+                        damping: 30,
+                      }}
                     >
                       <path
                         fillRule="evenodd"
@@ -613,22 +673,26 @@ const LearningPath = ({
             </div>
           </div>
         </div>
-        
+
         {/* Bottom border */}
         <div className="absolute bottom-0 left-0 right-0 h-px bg-gray-700/50"></div>
-        
+
         {/* Glow effect on hover */}
         <div className="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg opacity-0 group-hover:opacity-10 blur transition-opacity duration-300 -z-10"></div>
       </div>
-      
+
       {/* Subtle corner accent */}
       <div className="absolute top-0 right-0 w-16 h-16 -mr-8 -mt-8 bg-gradient-to-br from-blue-500/20 to-transparent rounded-full"></div>
-      
+
       {/* Subtle pattern overlay */}
-      <div className="absolute inset-0 opacity-5" style={{
-        backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.4\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
-        backgroundSize: '60px 60px'
-      }}></div>
+      <div
+        className="absolute inset-0 opacity-5"
+        style={{
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")",
+          backgroundSize: "60px 60px",
+        }}
+      ></div>
     </motion.article>
   );
 };
@@ -639,12 +703,12 @@ function GetStartedContent() {
   type CompletedPaths = Record<string, boolean>;
 
   const [completedPaths, setCompletedPaths] = useState<CompletedPaths>(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       try {
-        const saved = localStorage.getItem('completedPaths');
+        const saved = localStorage.getItem("completedPaths");
         return saved ? JSON.parse(saved) : {};
       } catch (e) {
-        console.error('Failed to parse completedPaths from localStorage', e);
+        console.error("Failed to parse completedPaths from localStorage", e);
         return {};
       }
     }
@@ -653,66 +717,81 @@ function GetStartedContent() {
 
   // Toggle completion status for a path
   const togglePathCompletion = React.useCallback((pathTitle: string) => {
-    setCompletedPaths(prev => ({
+    setCompletedPaths((prev) => ({
       ...prev,
-      [pathTitle]: !prev[pathTitle]
+      [pathTitle]: !prev[pathTitle],
     }));
   }, []);
 
   // Calculate completion percentage
-  const completionPercentage = Math.round(
-    (Object.values(completedPaths).filter(Boolean).length / learningPaths.length) * 100
-  ) || 0;
+  const completionPercentage =
+    Math.round(
+      (Object.values(completedPaths).filter(Boolean).length /
+        learningPaths.length) *
+        100
+    ) || 0;
 
   // Save to localStorage whenever completedPaths changes
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       try {
-        localStorage.setItem('completedPaths', JSON.stringify(completedPaths));
+        localStorage.setItem("completedPaths", JSON.stringify(completedPaths));
       } catch (e) {
-        console.error('Failed to save completedPaths to localStorage', e);
+        console.error("Failed to save completedPaths to localStorage", e);
       }
     }
   }, [completedPaths]);
 
   return (
     <Layout
-      title={`Get Started | ${siteConfig?.title || 'Recode Hive'}`}
+      title={`Get Started | ${siteConfig?.title || "Recode Hive"}`}
       description="Start your coding journey with Recode Hive. Learn to code with our interactive platform and structured learning paths."
     >
       <Head>
         <meta name="theme-color" content="#1e40af" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@700;800&display=swap" rel="stylesheet" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@700;800&display=swap"
+          rel="stylesheet"
+        />
       </Head>
-      
+
       <GetStartedHeader />
-      
-      <main className={`transition-colors duration-300 ${
-        isDark ? 'dark-bg-primary dark-text-primary' : 'bg-white text-black'
-      }`}>
+
+      <main
+        className={`transition-colors duration-300 ${
+          isDark ? "dark-bg-primary dark-text-primary" : "bg-white text-black"
+        }`}
+      >
         {/* Features Section */}
         <section className={styles.features}>
           <div className="container">
             <AnimatedSection>
               <div className={styles.sectionHeader}>
                 <h2>Why Choose Recode Hive?</h2>
-                <p>Discover the perfect learning experience tailored for your coding journey</p>
+                <p>
+                  Discover the perfect learning experience tailored for your
+                  coding journey
+                </p>
               </div>
-              
+
               <div className={styles.featuresGrid}>
                 {features.map((props, idx) => (
                   <Feature key={idx} {...props} />
                 ))}
               </div>
             </AnimatedSection>
-            
+
             {/* Stats Section */}
             <AnimatedSection delay={1}>
               <div className={styles.section}>
                 <div className={styles.container}>
-                  <motion.div 
+                  <motion.div
                     className={styles.statsSection}
                     initial="hidden"
                     whileInView="visible"
@@ -722,16 +801,16 @@ function GetStartedContent() {
                       visible: {
                         opacity: 1,
                         transition: {
-                          staggerChildren: 0.1
-                        }
-                      }
+                          staggerChildren: 0.1,
+                        },
+                      },
                     }}
                   >
                     {stats.map((stat, index) => (
-                      <StatCard 
-                        key={index} 
-                        value={stat.value} 
-                        label={stat.label} 
+                      <StatCard
+                        key={index}
+                        value={stat.value}
+                        label={stat.label}
                         index={index}
                       />
                     ))}
@@ -741,27 +820,34 @@ function GetStartedContent() {
             </AnimatedSection>
           </div>
         </section>
-        
+
         {/* Learning Paths - Full Width Section */}
         <AnimatedSection delay={2}>
-          <section className={styles.learningPaths} style={{ width: '100vw', marginLeft: '50%', transform: 'translateX(-50%)' }}>
+          <section
+            className={styles.learningPaths}
+            style={{
+              width: "100vw",
+              marginLeft: "50%",
+              transform: "translateX(-50%)",
+            }}
+          >
             <div className="w-full bg-gray-900 py-16">
               <div className="container mx-auto">
                 <div className="text-center mb-16">
-                  <motion.h2 
+                  <motion.h2
                     className="text-3xl md:text-4xl font-bold mb-4 px-6 py-3 inline-block rounded-xl bg-blue-100 text-gray-900"
                     initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ 
-                      opacity: 1, 
+                    whileInView={{
+                      opacity: 1,
                       y: 0,
-                      transition: { 
+                      transition: {
                         duration: 0.8,
-                        ease: "easeOut"
-                      } 
+                        ease: "easeOut",
+                      },
                     }}
                     viewport={{ once: true, margin: "-100px 0px -100px 0px" }}
                     style={{
-                      textShadow: '0 0 10px rgba(255, 213, 0, 0.5)'
+                      textShadow: "0 0 10px rgba(255, 213, 0, 0.5)",
                     }}
                   >
                     Start Your Journey
@@ -769,10 +855,10 @@ function GetStartedContent() {
                 </div>
               </div>
             </div>
-            
+
             <div className="container mx-auto -mt-10 relative">
               {/* Progress Overview */}
-              <motion.div 
+              <motion.div
                 className="mb-12 p-6 bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-gray-700/50 shadow-lg"
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
@@ -785,7 +871,9 @@ function GetStartedContent() {
                       Your Learning Progress
                     </h3>
                     <p className="text-gray-300 text-sm">
-                      {completionPercentage}% Complete • {Object.values(completedPaths).filter(Boolean).length} of {learningPaths.length} paths started
+                      {completionPercentage}% Complete •{" "}
+                      {Object.values(completedPaths).filter(Boolean).length} of{" "}
+                      {learningPaths.length} paths started
                     </p>
                   </div>
                   <div className="text-right">
@@ -794,50 +882,53 @@ function GetStartedContent() {
                     </span>
                   </div>
                 </div>
-                
+
                 {/* Progress Bar */}
                 <div className="w-full h-3 bg-gray-700/50 rounded-full overflow-hidden">
-                  <motion.div 
+                  <motion.div
                     className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full relative"
                     initial={{ width: 0 }}
                     animate={{ width: `${completionPercentage}%` }}
                     transition={{ duration: 1, ease: "easeOut" }}
                   >
-                    <motion.div 
-                      className="absolute inset-0 bg-white/20" 
+                    <motion.div
+                      className="absolute inset-0 bg-white/20"
                       animate={{
-                        left: ['0%', '100%']
+                        left: ["0%", "100%"],
                       }}
                       transition={{
                         duration: 1.5,
                         repeat: Infinity,
-                        repeatType: 'loop',
-                        ease: 'easeInOut',
+                        repeatType: "loop",
+                        ease: "easeInOut",
                       }}
                       style={{
-                        width: '20%',
-                        height: '100%',
-                        background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
-                        transform: 'skewX(-20deg)'
+                        width: "20%",
+                        height: "100%",
+                        background:
+                          "linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)",
+                        transform: "skewX(-20deg)",
                       }}
                     />
                   </motion.div>
                 </div>
               </motion.div>
-              
+
               <div className={styles.timelineContainer}>
                 <div className={styles.timeline}>
                   {/* Animated progress indicator on the timeline */}
-                  <motion.div 
+                  <motion.div
                     className="absolute left-0 top-0 w-1 bg-gradient-to-b from-blue-400 to-purple-500 h-0"
                     initial={{ height: 0 }}
-                    animate={{ height: `${(completionPercentage / 100) * 100}%` }}
-                    transition={{ duration: 1.5, ease: 'easeInOut' }}
+                    animate={{
+                      height: `${(completionPercentage / 100) * 100}%`,
+                    }}
+                    transition={{ duration: 1.5, ease: "easeInOut" }}
                   />
                 </div>
                 <div className={styles.pathsContainer}>
                   {learningPaths.map((path, idx) => (
-                    <LearningPath 
+                    <LearningPath
                       key={path.title}
                       title={path.title}
                       description={path.description}
@@ -850,8 +941,8 @@ function GetStartedContent() {
                   ))}
                 </div>
               </div>
-              
-              <motion.div 
+
+              <motion.div
                 className="text-center mt-12 pb-12"
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
@@ -862,20 +953,22 @@ function GetStartedContent() {
                   to="/courses"
                   className="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-200 to-blue-300 text-gray-900 font-semibold text-lg rounded-xl hover:from-blue-300 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1"
                   style={{
-                    textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
+                    textShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
                   }}
                 >
-                  <span className="relative z-10">
-                    Explore All Paths
-                  </span>
-                  <svg 
-                    className="w-6 h-6 ml-3 transform group-hover:translate-x-1 transition-transform duration-300" 
-                    fill="none" 
-                    viewBox="0 0 24 24" 
+                  <span className="relative z-10">Explore All Paths</span>
+                  <svg
+                    className="w-6 h-6 ml-3 transform group-hover:translate-x-1 transition-transform duration-300"
+                    fill="none"
+                    viewBox="0 0 24 24"
                     stroke="currentColor"
                     strokeWidth={2.5}
                   >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M14 5l7 7m0 0l-7 7m7-7H3"
+                    />
                   </svg>
                 </Link>
               </motion.div>
diff --git a/src/theme/DocSidebar/Desktop/index.tsx b/src/theme/DocSidebar/Desktop/index.tsx
new file mode 100644
index 00000000..c369f725
--- /dev/null
+++ b/src/theme/DocSidebar/Desktop/index.tsx
@@ -0,0 +1,48 @@
+/**
+ * DocSidebar/Desktop - Main sidebar container component
+ *
+ * This is the top-level component in the sidebar hierarchy that renders
+ * the main documentation sidebar container. It's responsible for:
+ * - Rendering the overall sidebar structure
+ * - Handling sidebar visibility states
+ * - Rendering DocSidebarItems component which handles the item list
+ */
+import React, { useState } from "react";
+import clsx from "clsx";
+import { useThemeConfig } from "@docusaurus/theme-common";
+// @ts-ignore
+import {
+  useHideableNavbar,
+  useNavbarMobileSidebar,
+} from "@docusaurus/theme-common/internal";
+import styles from "./styles.module.css";
+import DocSidebarItems from "@theme/DocSidebarItems";
+
+// Using a custom layout for desktop navigation
+function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }) {
+  const {
+    navbar: { hideOnScroll },
+    docs: {
+      sidebar: { hideable },
+    },
+  } = useThemeConfig();
+
+  return (
+    <div
+      className={clsx(styles.sidebar, styles.sidebarWithHideableNavbar, {
+        [styles.sidebarHidden]: isHidden,
+      })}
+    >
+      <div className={styles.sidebarInner}>
+        {/* Removed the sidebarTop div completely */}
+        <nav className={clsx("menu", styles.menu)}>
+          <DocSidebarItems items={sidebar} activePath={path} level={0} />
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+export default function DocSidebar(props) {
+  return <DocSidebarDesktop {...props} />;
+}
diff --git a/src/theme/DocSidebar/Desktop/styles.module.css b/src/theme/DocSidebar/Desktop/styles.module.css
new file mode 100644
index 00000000..3763fabd
--- /dev/null
+++ b/src/theme/DocSidebar/Desktop/styles.module.css
@@ -0,0 +1,79 @@
+.sidebar {
+  height: 100vh;
+  min-height: 100vh; /* Ensure sidebar takes full viewport height */
+  position: sticky;
+  top: 0;
+  padding: 0;
+  transition: all 0.3s ease;
+  width: var(--doc-sidebar-width);
+  will-change: width;
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  background-color: var(--ifm-background-color);
+  border-right: 1px solid var(--ifm-toc-border-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  overflow: visible; /* Change from hidden to visible to allow dropdowns to extend */
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(240, 242, 245, 0.05) 100%
+  );
+}
+
+.sidebarWithHideableNavbar {
+  padding-top: 0;
+}
+
+.sidebarHidden {
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  width: 0;
+}
+
+.sidebarTop {
+  height: 0;
+  margin: 0;
+  padding: 0;
+  display: none; /* Hide the element completely */
+}
+
+.sidebarLogo {
+  display: none; /* Hide the logo */
+}
+
+.sidebarInner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-top: 1rem; /* Add top padding to give space for the first item */
+  overflow: visible; /* Ensure content isn't cut off */
+}
+
+.menu {
+  padding: 1.25rem 0.5rem;
+  padding-top: 2.5rem; /* Significantly increase top padding to move GitHub down */
+  padding-bottom: 3rem; /* Add extra padding at bottom to prevent items from being cut off */
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: none; /* Ensure menu can grow as needed */
+}
+
+.sidebarTop {
+  padding: 1rem;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    to right,
+    rgba(235, 237, 240, 0.8),
+    rgba(245, 247, 250, 0.8)
+  );
+}
+
+@media (max-width: 996px) {
+  .sidebar {
+    display: none;
+  }
+}
diff --git a/src/theme/DocSidebarItem/Category/index.tsx b/src/theme/DocSidebarItem/Category/index.tsx
new file mode 100644
index 00000000..0309e433
--- /dev/null
+++ b/src/theme/DocSidebarItem/Category/index.tsx
@@ -0,0 +1,279 @@
+/**
+ * DocSidebarItemCategory - Component for rendering collapsible sidebar categories
+ *
+ * This component is responsible for:
+ * - Rendering collapsible sections/folders in the sidebar
+ * - Managing expand/collapse state
+ * - Handling active state for categories
+ * - Rendering nested DocSidebarItem components for child items
+ */
+import React, { useEffect, memo, useState } from "react";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+
+// Create a simple isSamePath utility since we can't import it
+function isSamePath(path1: string, path2: string): boolean {
+  // If either path is empty or null, return false (no active items)
+  if (!path1 || !path2) {
+    return false;
+  }
+  // Simple path comparison function
+  return path1 === path2;
+}
+import {
+  Book,
+  Database,
+  Github,
+  PanelRight,
+  Code2,
+  School,
+  Zap,
+  ChevronDown,
+  ChevronUp,
+  ChevronRight,
+} from "lucide-react";
+import Link from "@docusaurus/Link";
+import clsx from "clsx";
+import { DocSidebarItemCategoryProps } from "../types";
+import styles from "./styles.module.css";
+
+// Recursively get all doc ids from sidebar
+function getAllDocIds(items: any[]): string[] {
+  let ids: string[] = [];
+  for (const item of items) {
+    if (item.type === "category") {
+      // Include the category's href if it exists
+      if (item.href) {
+        ids.push(item.href);
+      }
+      ids = [...ids, ...getAllDocIds(item.items)];
+    } else if (item.type === "doc") {
+      ids.push(item.id);
+    } else if (item.href) {
+      // Handle link type items
+      ids.push(item.href);
+    }
+  }
+  return ids;
+}
+
+const getIcon = (
+  label: string,
+  className: string | undefined
+): React.ReactNode => {
+  // Use the className to determine the appropriate icon and color
+  if (label.includes("GitHub") || className?.includes("github")) {
+    return <Github className={`${styles.categoryIcon} ${styles.githubIcon}`} />;
+  } else if (label.includes("SQL") || className?.includes("sql")) {
+    return <Database className={`${styles.categoryIcon} ${styles.sqlIcon}`} />;
+  } else if (label.includes("Python") || className?.includes("python")) {
+    return <Code2 className={`${styles.categoryIcon} ${styles.pythonIcon}`} />;
+  } else if (label.includes("Next.js") || className?.includes("nextjs")) {
+    return <Zap className={`${styles.categoryIcon} ${styles.nextjsIcon}`} />;
+  } else if (
+    label.includes("Google Student Ambassador") ||
+    className?.includes("gsa")
+  ) {
+    return <School className={`${styles.categoryIcon} ${styles.gsaIcon}`} />;
+  } else if (label.includes("Technical") || className?.includes("technical")) {
+    return (
+      <PanelRight
+        className={`${styles.categoryIcon} ${styles.technicalIcon}`}
+      />
+    );
+  } else {
+    return <Book className={styles.categoryIcon} />;
+  }
+};
+
+// Component responsible for the category collapsing behavior
+function DocSidebarItemCategory({
+  item,
+  onItemClick,
+  activePath,
+  level = 0,
+  index,
+  ...props
+}: DocSidebarItemCategoryProps): React.ReactNode {
+  const { items, label, collapsible, className, href } = item;
+
+  // Check if this is the GitHub category that should not be active by default
+  const isGitHubCategory =
+    label?.includes("GitHub") || className?.includes("github");
+
+  // Use a simpler approach to handle collapsing
+  const [collapsed, setCollapsed] = useState(item.collapsed);
+
+  // Only set active if the path matches AND it's not the GitHub category on initial load
+  const active = href
+    ? isSamePath(href, activePath) && !(isGitHubCategory && !activePath)
+    : false;
+
+  // Use useEffect to update the collapsed state when the active path changes
+  useEffect(() => {
+    if (collapsible) {
+      // If activePath is empty, don't consider any items active
+      if (!activePath) {
+        return;
+      }
+
+      // Don't collapse if this category or any of its items are active
+      const hasActiveItem = items.some((item) => {
+        // Check for direct href match
+        if (item.href && isSamePath(item.href, activePath)) {
+          return true;
+        }
+        // Check for nested items (for categories like SQL Basics)
+        if (item.type === "category" && item.items) {
+          return item.items.some(
+            (subItem) => subItem.href && isSamePath(subItem.href, activePath)
+          );
+        }
+        return false;
+      });
+
+      // Only collapse if not active and no active children
+      if (!active && !hasActiveItem) {
+        setCollapsed(true);
+      } else {
+        // Keep expanded if active or has active children
+        setCollapsed(false);
+      }
+    }
+  }, [activePath, active, collapsible, items]);
+
+  const isHidden = collapsed && !active;
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (collapsible && !href) {
+      e.preventDefault();
+      e.currentTarget.blur();
+      setCollapsed((prev) => !prev);
+    }
+    if (href) {
+      onItemClick?.(item);
+    }
+  };
+
+  const categoryIcon = getIcon(label, className);
+
+  // Determine category theme based on label or className
+  const getCategoryTheme = () => {
+    if (label.includes("GitHub") || className?.includes("github")) {
+      return "custom-sidebar-github";
+    } else if (label.includes("Python") || className?.includes("python")) {
+      return "custom-sidebar-python";
+    } else if (label.includes("SQL") || className?.includes("sql")) {
+      return "custom-sidebar-sql";
+    } else if (label.includes("Next.js") || className?.includes("nextjs")) {
+      return "custom-sidebar-nextjs";
+    } else if (
+      label.includes("Google Student Ambassador") ||
+      className?.includes("gsa")
+    ) {
+      return "custom-sidebar-gsa";
+    } else if (
+      label.includes("Technical") ||
+      className?.includes("technical")
+    ) {
+      return "custom-sidebar-technical";
+    }
+    return "";
+  };
+
+  const categoryTheme = getCategoryTheme();
+
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemCategory,
+        {
+          "menu__list-item--collapsed": collapsed,
+        },
+        className,
+        styles.categoryItem,
+        categoryTheme,
+        {
+          [styles.categoryLevel1]: level === 1,
+          [styles.categoryLevel2]: level === 2,
+        }
+      )}
+    >
+      <div
+        className={clsx(styles.categoryHeader, {
+          [styles.categoryHeaderActive]: active,
+        })}
+      >
+        {href ? (
+          <Link
+            className={clsx(
+              "menu__link",
+              {
+                "menu__link--active": active,
+              },
+              styles.categoryLink
+            )}
+            to={href}
+            onClick={handleClick}
+          >
+            <div className={styles.categoryLinkContent}>
+              {categoryIcon}
+              <span className={styles.categoryLabel}>
+                {label.replace(/^[🐙🐍🗄️⚡🎓🔧📚⚙️👨‍💼🔄📊]+ /g, "")}
+              </span>
+            </div>
+          </Link>
+        ) : (
+          <a
+            className={clsx(
+              "menu__link",
+              {
+                "menu__link--active": active,
+              },
+              styles.categoryLink
+            )}
+            href="#"
+            onClick={handleClick}
+          >
+            <div className={styles.categoryLinkContent}>
+              {categoryIcon}
+              <span className={styles.categoryLabel}>
+                {label.replace(/^[🐙🐍🗄️⚡🎓🔧📚⚙️👨‍💼🔄📊]+ /g, "")}
+              </span>
+            </div>
+            {collapsible && (
+              <div className={styles.categoryCollapseIcon}>
+                {collapsed ? (
+                  <ChevronRight size={16} className={styles.chevronIcon} />
+                ) : (
+                  <ChevronDown size={16} className={styles.chevronIcon} />
+                )}
+              </div>
+            )}
+          </a>
+        )}
+      </div>
+
+      {!isHidden && (
+        <ul className={clsx("menu__list", styles.categoryList)}>
+          {items.map((childItem, i) => {
+            // @ts-ignore
+            const DocSidebarItem = require("@theme/DocSidebarItem").default;
+            return (
+              <DocSidebarItem
+                tabIndex={collapsed ? "-1" : "0"}
+                key={i}
+                item={childItem}
+                onItemClick={onItemClick}
+                activePath={activePath}
+                level={level + 1}
+                index={i}
+              />
+            );
+          })}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export default memo(DocSidebarItemCategory);
diff --git a/src/theme/DocSidebarItem/Category/styles.module.css b/src/theme/DocSidebarItem/Category/styles.module.css
new file mode 100644
index 00000000..dcb427fd
--- /dev/null
+++ b/src/theme/DocSidebarItem/Category/styles.module.css
@@ -0,0 +1,253 @@
+.categoryItem {
+  margin: 0;
+  width: 100%;
+}
+
+/* Adding specific styling for the GitHub category to move it down */
+.custom-sidebar-github {
+  margin-top: 1.5rem;
+}
+
+.categoryHeader {
+  display: flex;
+  width: 100%;
+}
+
+.categoryHeaderActive {
+  background-color: rgba(72, 187, 120, 0.15);
+  box-shadow: 0 2px 8px rgba(72, 187, 120, 0.12);
+}
+
+.categoryLink {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  transition: all 0.2s ease;
+  border-radius: 8px;
+  font-weight: 500;
+  margin: 0.2rem 0;
+}
+
+.categoryLink:hover {
+  background-color: rgba(72, 187, 120, 0.08);
+  text-decoration: none;
+  transform: translateX(4px);
+  color: #38a169;
+}
+
+.categoryLinkContent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.categoryIcon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  color: #38a169;
+  stroke-width: 1.5px;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+}
+
+/* Green-themed icon colors with varying shades */
+.githubIcon {
+  color: #2f855a;
+}
+
+.pythonIcon {
+  color: #38a169;
+}
+
+.sqlIcon {
+  color: #48bb78;
+}
+
+.nextjsIcon {
+  color: #276749;
+}
+
+.gsaIcon {
+  color: #68d391;
+}
+
+.technicalIcon {
+  color: #9ae6b4;
+}
+
+/* Scale up icons on hover */
+.categoryLink:hover .categoryIcon {
+  transform: scale(1.15);
+}
+
+.categoryLabel {
+  flex: 1;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.categoryLink:hover .categoryLabel {
+  color: #38a169;
+}
+
+.categoryCollapseIcon {
+  color: #38a169;
+  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease, opacity 0.2s ease;
+}
+
+.categoryLink:hover .categoryCollapseIcon {
+  opacity: 1;
+  transform: rotate(-5deg);
+}
+
+.chevronIcon {
+  transition: transform 0.2s ease;
+}
+
+.menu__link--active .chevronIcon {
+  color: var(--ifm-color-primary);
+}
+
+.categoryItem.menu__list-item--collapsed .categoryCollapseIcon {
+  opacity: 0.6;
+}
+
+.categoryList {
+  padding-left: 1rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.5rem; /* Add bottom margin for spacing */
+  max-height: 2000px; /* Increase max height to accommodate more items */
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  overflow: visible; /* Change to visible to prevent items from being cut off */
+  opacity: 1;
+}
+
+.menu__list-item--collapsed .categoryList {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out,
+    margin-top 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
+}
+
+/* Styling for subcategories */
+.categoryLevel1 > .categoryHeader > .categoryLink {
+  padding-left: 1.5rem;
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+.categoryLevel2 > .categoryHeader > .categoryLink {
+  padding-left: 2rem;
+  font-size: 0.85rem;
+}
+
+/* Active category styling */
+.menu__link--active {
+  background-color: rgba(72, 187, 120, 0.15);
+  color: #2f855a;
+  transform: translateX(4px);
+  position: relative;
+  border-left: 1px solid #38a169;
+}
+
+.menu__link--active .categoryIcon {
+  color: #2f855a;
+  transform: scale(1.1);
+}
+
+/* Sidebar container styling */
+.sidebar {
+  padding: 1rem 0.5rem;
+  transition: width 0.2s ease;
+}
+
+/* Custom sidebar theme base styles */
+.custom-sidebar-github .categoryLink,
+.custom-sidebar-python .categoryLink,
+.custom-sidebar-sql .categoryLink,
+.custom-sidebar-nextjs .categoryLink,
+.custom-sidebar-gsa .categoryLink,
+.custom-sidebar-technical .categoryLink {
+  background-color: rgba(72, 187, 120, 0.05);
+  /* border-radius: 8px; */
+}
+
+.custom-sidebar-github .categoryLink:hover,
+.custom-sidebar-python .categoryLink:hover,
+.custom-sidebar-sql .categoryLink:hover,
+.custom-sidebar-nextjs .categoryLink:hover,
+.custom-sidebar-gsa .categoryLink:hover,
+.custom-sidebar-technical .categoryLink:hover {
+  background-color: rgba(72, 187, 120, 0.1);
+  box-shadow: 0 2px 6px rgba(72, 187, 120, 0.1);
+}
+
+/* Icon colors */
+.custom-sidebar-github .categoryLink .categoryIcon {
+  color: #2f855a;
+}
+
+.custom-sidebar-python .categoryLink .categoryIcon {
+  color: #38a169;
+}
+
+.custom-sidebar-sql .categoryLink .categoryIcon {
+  color: #48bb78;
+}
+
+.custom-sidebar-nextjs .categoryLink .categoryIcon {
+  color: #276749;
+}
+
+.custom-sidebar-gsa .categoryLink .categoryIcon {
+  color: #68d391;
+}
+
+.custom-sidebar-technical .categoryLink .categoryIcon {
+  color: #9ae6b4;
+}
+
+/* Modern additions for enhanced user experience */
+.categoryLink {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Subtle hover effect */
+.categoryLink::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(to right, #38a169, #9ae6b4);
+  transition: width 0.3s ease;
+  border-radius: 2px;
+}
+
+.categoryLink:hover::after {
+  width: 100%;
+}
+
+/* Dark mode adjustments */
+html[data-theme="dark"] .categoryLink:hover {
+  background-color: rgba(72, 187, 120, 0.12);
+  color: #9ae6b4;
+}
+
+html[data-theme="dark"] .menu__link--active {
+  background-color: rgba(72, 187, 120, 0.2);
+  color: #9ae6b4;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+}
diff --git a/src/theme/DocSidebarItem/Html/index.tsx b/src/theme/DocSidebarItem/Html/index.tsx
new file mode 100644
index 00000000..2d5d6bb0
--- /dev/null
+++ b/src/theme/DocSidebarItem/Html/index.tsx
@@ -0,0 +1,30 @@
+/**
+ * DocSidebarItemHtml - Component for rendering custom HTML in sidebar
+ *
+ * This component handles:
+ * - Rendering custom HTML content in the sidebar
+ * - Preserving any custom classes
+ * - Safely injecting HTML using dangerouslySetInnerHTML
+ * - Managing accessibility through tabIndex
+ */
+import React from "react";
+import clsx from "clsx";
+import { DocSidebarItemHtmlProps } from "../types";
+
+export default function DocSidebarItemHtml({
+  item,
+  level,
+  tabIndex,
+  // We're receiving these props but not using them in this component
+  activePath,
+  index,
+}: DocSidebarItemHtmlProps): React.ReactNode {
+  const { value, className } = item;
+  return (
+    <li
+      className={clsx("menu__list-item", className)}
+      dangerouslySetInnerHTML={{ __html: value }}
+      tabIndex={tabIndex}
+    />
+  );
+}
diff --git a/src/theme/DocSidebarItem/Html/styles.module.css b/src/theme/DocSidebarItem/Html/styles.module.css
new file mode 100644
index 00000000..662e1f8a
--- /dev/null
+++ b/src/theme/DocSidebarItem/Html/styles.module.css
@@ -0,0 +1,6 @@
+/* Styles for HTML sidebar items */
+.htmlItem {
+  margin: 0;
+  padding: 0.5rem 0;
+  width: 100%;
+}
diff --git a/src/theme/DocSidebarItem/Link/index.tsx b/src/theme/DocSidebarItem/Link/index.tsx
new file mode 100644
index 00000000..427c9c59
--- /dev/null
+++ b/src/theme/DocSidebarItem/Link/index.tsx
@@ -0,0 +1,74 @@
+/**
+ * DocSidebarItemLink - Component for rendering sidebar link items
+ *
+ * This component is responsible for:
+ * - Rendering individual documentation page links
+ * - Handling active state styling
+ * - Managing click behavior and navigation
+ */
+import React from "react";
+import clsx from "clsx";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import Link from "@docusaurus/Link";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import { Book } from "lucide-react";
+import { DocSidebarItemLinkProps } from "../types";
+import styles from "./styles.module.css";
+
+// Utility to determine if a sidebar item is active
+function isActiveSidebarItem(item: any, activePath: string): boolean {
+  if (!activePath) {
+    return false;
+  }
+  return item.href === activePath;
+}
+
+export default function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}: DocSidebarItemLinkProps): React.ReactNode {
+  const { href, label, className, autoAddBaseUrl } = item;
+
+  // Determine if item is active based on path matching
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
+
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        "menu__list-item",
+        className,
+        styles.linkItem
+      )}
+      key={label}
+    >
+      <Link
+        className={clsx(
+          "menu__link",
+          {
+            "menu__link--active": isActive,
+          },
+          styles.menuLink
+        )}
+        autoAddBaseUrl={autoAddBaseUrl}
+        aria-current={isActive ? "page" : undefined}
+        to={href}
+        {...(isInternalLink && {
+          onClick: onItemClick ? () => onItemClick(item) : undefined,
+        })}
+        {...props}
+      >
+        <div className={styles.linkContent}>
+          <span className={styles.linkDot}></span>
+          <span>{label}</span>
+        </div>
+      </Link>
+    </li>
+  );
+}
diff --git a/src/theme/DocSidebarItem/Link/styles.module.css b/src/theme/DocSidebarItem/Link/styles.module.css
new file mode 100644
index 00000000..7f22007f
--- /dev/null
+++ b/src/theme/DocSidebarItem/Link/styles.module.css
@@ -0,0 +1,77 @@
+.linkItem {
+  margin: 0;
+  width: 100%;
+}
+
+.menuLink {
+  display: flex;
+  align-items: center;
+  padding: 0.55rem 0.75rem;
+  padding-left: 2.75rem; /* Indent links more than categories */
+  font-size: 0.9rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  margin: 0.15rem 0;
+  opacity: 0.9;
+  position: relative;
+}
+
+.menuLink:hover {
+  background-color: rgba(72, 187, 120, 0.08);
+  text-decoration: none;
+  transform: translateX(4px);
+  opacity: 1;
+  color: #38a169;
+  box-shadow: 0 2px 6px rgba(72, 187, 120, 0.07);
+}
+
+.linkContent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.linkDot {
+  width: 6px;
+  height: 6px;
+  background-color: rgba(28, 38, 32, 0.4);
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 10px;
+  transition: all 0.3s ease;
+  /* Make dots less visible by default */
+  opacity: 0.5;
+}
+
+/* Only show the green dot for truly active items */
+.menu__link--active .linkDot {
+  background-color: #38a169;
+  opacity: 1;
+}
+
+/* Active link styling */
+.menu__link--active .linkIcon {
+  color: #2f855a;
+}
+
+.activeIndicator {
+  position: absolute;
+  right: 10px;
+  font-size: 20px;
+  color: #38a169;
+}
+
+/* Dark mode adjustments */
+html[data-theme="dark"] .menu__link--active {
+  background-color: rgba(72, 187, 120, 0.2);
+  color: #9ae6b4;
+}
+
+html[data-theme="dark"] .linkDot {
+  background-color: rgba(154, 230, 180, 0.4);
+}
+
+html[data-theme="dark"] .menu__link--active .linkDot {
+  background-color: #9ae6b4;
+  box-shadow: 0 0 8px #68d391;
+}
diff --git a/src/theme/DocSidebarItem/index.tsx b/src/theme/DocSidebarItem/index.tsx
new file mode 100644
index 00000000..6b756fc9
--- /dev/null
+++ b/src/theme/DocSidebarItem/index.tsx
@@ -0,0 +1,63 @@
+/**
+ * DocSidebarItem - Router component for sidebar items
+ *
+ * This component acts as a router that:
+ * - Determines the type of sidebar item (category, link, or HTML)
+ * - Renders the appropriate component based on the item type
+ * - Passes relevant props to child components
+ *
+ * It works with three subcomponents:
+ * - DocSidebarItemCategory: For collapsible sections (folders)
+ * - DocSidebarItemLink: For individual page links
+ * - DocSidebarItemHtml: For custom HTML content
+ */
+import React from "react";
+import DocSidebarItemCategory from "@theme/DocSidebarItem/Category";
+import DocSidebarItemLink from "@theme/DocSidebarItem/Link";
+import DocSidebarItemHtml from "@theme/DocSidebarItem/Html";
+import { DocSidebarItemProps } from "./types";
+
+export default function DocSidebarItem({
+  item,
+  ...props
+}: DocSidebarItemProps): React.ReactNode {
+  const activePath = props.activePath || "";
+  const level = props.level || 0;
+  const index = props.index || 0;
+
+  switch (item.type) {
+    case "category":
+      return (
+        <DocSidebarItemCategory
+          item={item as any}
+          activePath={activePath}
+          level={level}
+          index={index}
+          tabIndex={props.tabIndex}
+          onItemClick={props.onItemClick}
+        />
+      );
+    case "html":
+      return (
+        <DocSidebarItemHtml
+          item={item as any}
+          level={level}
+          tabIndex={props.tabIndex}
+          activePath={activePath}
+          index={index}
+        />
+      );
+    case "link":
+    default:
+      return (
+        <DocSidebarItemLink
+          item={item as any}
+          activePath={activePath}
+          level={level}
+          index={index}
+          tabIndex={props.tabIndex}
+          onItemClick={props.onItemClick}
+        />
+      );
+  }
+}
diff --git a/src/theme/DocSidebarItem/types.ts b/src/theme/DocSidebarItem/types.ts
new file mode 100644
index 00000000..f0e957f5
--- /dev/null
+++ b/src/theme/DocSidebarItem/types.ts
@@ -0,0 +1,63 @@
+import {ReactNode} from 'react';
+
+export interface DocSidebarItemCategoryProps {
+  item: {
+    type: 'category';
+    label: string;
+    items: Array<any>;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    className?: string;
+    href?: string;
+  };
+  onItemClick?: (item: any) => void;
+  activePath: string;
+  level?: number;
+  index?: number;
+  tabIndex?: number;
+}
+
+export interface DocSidebarItemLinkProps {
+  item: {
+    type: 'link' | 'doc';
+    label: string;
+    href: string;
+    className?: string;
+    customProps?: Record<string, unknown>;
+    autoAddBaseUrl?: boolean;
+    docId?: string;
+  };
+  onItemClick?: (item: any) => void;
+  activePath: string;
+  level?: number;
+  index?: number;
+  tabIndex?: number;
+}
+
+export interface DocSidebarItemHtmlProps {
+  item: {
+    type: 'html';
+    value: string;
+    className?: string;
+  };
+  tabIndex?: number;
+  level?: number;
+  activePath?: string;
+  index?: number;
+}
+
+export interface DocSidebarItemProps {
+  item: {
+    type: 'category' | 'link' | 'doc' | 'html';
+    label?: string;
+    href?: string;
+    items?: Array<any>;
+    value?: string;
+    className?: string;
+  };
+  onItemClick?: (item: any) => void;
+  activePath?: string;
+  level?: number;
+  index?: number;
+  tabIndex?: number;
+}
diff --git a/src/theme/DocSidebarItems/index.tsx b/src/theme/DocSidebarItems/index.tsx
new file mode 100644
index 00000000..a0a357ce
--- /dev/null
+++ b/src/theme/DocSidebarItems/index.tsx
@@ -0,0 +1,49 @@
+/**
+ * DocSidebarItems - Container for sidebar item list
+ *
+ * This component is responsible for:
+ * - Rendering the list of sidebar items (categories and links)
+ * - Passing props to the DocSidebarItem component
+ * - Managing the overall list structure
+ * - Setting default active state to none on initial load
+ *
+ * It serves as the bridge between DocSidebar/Desktop and individual DocSidebarItem components.
+ */
+import React, { useState, useEffect } from "react";
+import DocSidebarItem from "@theme/DocSidebarItem";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+export default function DocSidebarItems({ items, activePath, level = 0 }) {
+  // Force empty activePath to disable default selection
+  // This will prevent any sidebar items from being marked as active by default
+
+  // Get the current URL path
+  const currentPath =
+    typeof window !== "undefined" ? window.location.pathname : "";
+
+  // Check if we're at the docs root page
+  const isDocsRootPath =
+    currentPath === "/" ||
+    currentPath === "/docs" ||
+    currentPath === "/docs/" ||
+    currentPath.startsWith("/docs/GitHub/intro-github");
+
+  // If we're at the docs root, force an empty active path
+  const effectiveActivePath = isDocsRootPath ? "" : activePath;
+
+  return (
+    <ul className="menu__list">
+      {items.map((item, index) => (
+        <div className={index === 0 ? styles.firstItem : ""} key={index}>
+          <DocSidebarItem
+            item={item}
+            index={index}
+            activePath={effectiveActivePath}
+            level={level}
+          />
+        </div>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/theme/DocSidebarItems/styles.module.css b/src/theme/DocSidebarItems/styles.module.css
new file mode 100644
index 00000000..cf67a52f
--- /dev/null
+++ b/src/theme/DocSidebarItems/styles.module.css
@@ -0,0 +1,3 @@
+.firstItem {
+  margin-top: 1.5rem;
+}