diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index d33e1f16..f057518b 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -192,7 +192,7 @@ const config: Config = {
             },
             {
               label: "🗺️ Roadmap",
-              to: "/roadmaps",
+              href: "https://github.com/orgs/recodehive/projects/9",
             },
             {
               label: "🤝 Community",
diff --git a/src/data/roadmaps/html.tsx b/src/data/roadmaps/html.tsx
deleted file mode 100644
index d429bf11..00000000
--- a/src/data/roadmaps/html.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-const comingSoonLink = "/roadmaps/html-coming-soon";
-
-export const htmlRoadmapData = [
-  {
-    title: "HTML Basics",
-    items: [
-      {
-        text: "Introduction to HTML",
-        link: "/docs/html/intro-html/",
-        status: "todo",
-      },
-      { text: "HTML Documents Structure", link: comingSoonLink, status: "todo" },
-      { text: "Basic HTML Tags", link: comingSoonLink, status: "todo" },
-      { text: "Attributes in HTML", link: comingSoonLink, status: "todo" },
-      {
-        text: "HTML Paragraphs and Text Formatting",
-        link: comingSoonLink,
-        status: "todo",
-      },
-      { text: "Links and Images in HTML", link: comingSoonLink, status: "todo" },
-      { text: "HTML Lists", link: comingSoonLink, status: "todo" },
-    ],
-  },
-  {
-    title: "HTML Forms",
-    items: [
-      { text: "Introduction to HTML Forms", link: comingSoonLink, status: "todo" },
-      { text: "Form Elements and Attributes", link: comingSoonLink, status: "todo" },
-      { text: "Input Types in HTML", link: comingSoonLink, status: "todo" },
-      { text: "Form Action and Method", link: comingSoonLink, status: "todo" },
-      { text: "HTML Form Validation", link: comingSoonLink, status: "todo" },
-    ],
-  },
-  {
-    title: "HTML5 Elements",
-    items: [
-      { text: "HTML5 Semantic Elements", link: comingSoonLink, status: "todo" },
-      { text: "HTML5 Media Elements", link: comingSoonLink, status: "todo" },
-      { text: "HTML5 Graphics Elements", link: comingSoonLink, status: "todo" },
-      { text: "HTML5 Form Types", link: comingSoonLink, status: "todo" },
-      { text: "HTML5 New Attributes", link: comingSoonLink, status: "todo" },
-      { text: "Web Storage in HTML5", link: comingSoonLink, status: "todo" },
-    ],
-  },
-  {
-    title: "HTML Tables",
-    items: [
-      { text: "Basic HTML Table Structure", link: comingSoonLink, status: "todo" },
-      { text: "HTML Table Attributes", link: comingSoonLink, status: "todo" },
-      { text: "Row and Colspan in HTML", link: comingSoonLink, status: "todo" },
-      { text: "Table Caption and Summary", link: comingSoonLink, status: "todo" },
-      { text: "Complex Tables in HTML", link: comingSoonLink, status: "todo" },
-    ],
-  },
-  {
-    title: "HTML and SEO",
-    items: [
-      { text: "Basic SEO Concepts", link: comingSoonLink, status: "todo" },
-      { text: "HTML Tags and SEO", link: comingSoonLink, status: "todo" },
-      { text: "SEO and HTML Meta Tags", link: comingSoonLink, status: "todo" },
-      { text: "SEO and HTML Sitemap", link: comingSoonLink, status: "todo" },
-      { text: "SEO and HTML Robots", link: comingSoonLink, status: "todo" },
-    ],
-  },
-  {
-    title: "Responsive Web Design",
-    items: [
-      {
-        text: "Understanding Responsive Web Design",
-        link: comingSoonLink,
-        status: "todo",
-      },
-      { text: "Media Queries in CSS", link: comingSoonLink, status: "todo" },
-      { text: "Responsive Images", link: comingSoonLink, status: "todo" },
-      { text: "CSS Flexbox", link: comingSoonLink, status: "todo" },
-      { text: "CSS Grid", link: comingSoonLink, status: "todo" },
-      { text: "CSS Frameworks", link: comingSoonLink, status: "todo" },
-    ],
-  },
-];
diff --git a/src/data/roadmaps/index.tsx b/src/data/roadmaps/index.tsx
deleted file mode 100644
index ec6f7d5b..00000000
--- a/src/data/roadmaps/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-export interface Lesson {
-  id: string;
-  title: string;
-  duration: string;
-  link: string;
-}
-
-export interface MyRoadmap {
-  id: string;
-  title: string;
-  description: string;
-  lessons: Lesson[];
-}
-
-export const roadmaps: MyRoadmap[] = [
-  {
-    id: "html",
-    title: "HTML Basics",
-    description: "Learn the basics of HTML",
-    lessons: [
-      {
-        id: "html_intro",
-        title: "Introduction to HTML",
-        duration: "1 hour",
-        link: "https://www.w3schools.com/html/",
-      },
-      {
-        id: "html_elements",
-        title: "HTML Elements",
-        duration: "2 hours",
-        link: "https://www.w3schools.com/html/html_elements.asp",
-      },
-      // Add more lessons as needed
-    ],
-  },
-  {
-    id: "css",
-    title: "CSS Styling",
-    description: "Learn CSS for styling web pages",
-    lessons: [
-      {
-        id: "css_intro",
-        title: "Introduction to CSS",
-        duration: "1.5 hours",
-        link: "https://www.w3schools.com/css/",
-      },
-      {
-        id: "css_selectors",
-        title: "CSS Selectors",
-        duration: "2.5 hours",
-        link: "https://www.w3schools.com/css/css_selectors.asp",
-      },
-      // Add more lessons as needed
-    ],
-  },
-  // Add more courses (React, Node.js, etc.)
-];
diff --git a/src/data/roadmaps/javascript/index.tsx b/src/data/roadmaps/javascript/index.tsx
deleted file mode 100644
index 01ee89d1..00000000
--- a/src/data/roadmaps/javascript/index.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-export interface Topic {
-  title: string;
-  description: string;
-}
-
-export interface RoadmapItem {
-  title: string;
-  description: string;
-  topics: Topic[];
-}
-
-const roadmapJavaScript: RoadmapItem[] = [
-  {
-    title: "Beginner Topics",
-    description: "Start with these!",
-    topics: [
-      {
-        title: "Introduction to JavaScript",
-        description: "Learn the basics of JavaScript",
-      },
-      {
-        title: "Variables",
-        description: "Learn how to declare variables",
-      },
-      {
-        title: "Data Types",
-        description: "Learn about the different data types in JavaScript",
-      },
-      {
-        title: "Operators",
-        description: "Learn about the different operators in JavaScript",
-      },
-      {
-        title: "Control Structures",
-        description: "Learn about control structures in JavaScript",
-      },
-      {
-        title: "Functions",
-        description: "Learn about functions in JavaScript",
-      },
-      {
-        title: "Arrays",
-        description: "Learn about arrays in JavaScript",
-      },
-      {
-        title: "Objects",
-        description: "Learn about objects in JavaScript",
-      },
-      {
-        title: "Classes",
-        description: "Learn about classes in JavaScript",
-      },
-      {
-        title: "DOM Manipulation",
-        description: "Learn about manipulating the DOM in JavaScript",
-      },
-      {
-        title: "Events",
-        description: "Learn about events in JavaScript",
-      },
-      {
-        title: "AJAX",
-        description: "Learn about AJAX in JavaScript",
-      },
-      {
-        title: "ES6 Features",
-        description: "Learn about the new features in ES6",
-      },
-    ],
-  },
-  {
-    title: "Intermediate Topics",
-    description: "Pick these after beginner topics",
-    topics: [
-      {
-        title: "Promises",
-        description: "Learn about promises in JavaScript",
-      },
-      {
-        title: "Async/Await",
-        description: "Learn about async/await in JavaScript",
-      },
-      {
-        title: "Modules",
-        description: "Learn about modules in JavaScript",
-      },
-      {
-        title: "Error Handling",
-        description: "Learn about error handling in JavaScript",
-      },
-      {
-        title: "Regular Expressions",
-        description: "Learn about regular expressions in JavaScript",
-      },
-      {
-        title: "Closures",
-        description: "Learn about closures in JavaScript",
-      },
-      {
-        title: "Scope",
-        description: "Learn about scope in JavaScript",
-      },
-      {
-        title: "This Keyword",
-        description: "Learn about the this keyword in JavaScript",
-      },
-      {
-        title: "Prototype",
-        description: "Learn about prototype in JavaScript",
-      },
-      {
-        title: "Functional Programming",
-        description: "Learn about functional programming in JavaScript",
-      },
-      {
-        title: "Testing",
-        description: "Learn about testing in JavaScript",
-      },
-      {
-        title: "Debugging",
-        description: "Learn about debugging in JavaScript",
-      },
-      {
-        title: "Performance",
-        description: "Learn about performance in JavaScript",
-      },
-    ],
-  },
-  {
-    title: "Advanced Topics",
-    description: "Pick these after intermediate topics",
-    topics: [
-      {
-        title: "Web Components",
-        description: "Learn about web components in JavaScript",
-      },
-      {
-        title: "Web Workers",
-        description: "Learn about web workers in JavaScript",
-      },
-      {
-        title: "Service Workers",
-        description: "Learn about service workers in JavaScript",
-      },
-      {
-        title: "Web Assembly",
-        description: "Learn about web assembly in JavaScript",
-      },
-      {
-        title: "Web Sockets",
-        description: "Learn about web sockets in JavaScript",
-      },
-      {
-        title: "WebRTC",
-        description: "Learn about webRTC in JavaScript",
-      },
-      {
-        title: "Node.js",
-        description: "Learn about Node.js",
-      },
-      {
-        title: "Express.js",
-        description: "Learn about Express.js",
-      },
-      {
-        title: "GraphQL",
-        description: "Learn about GraphQL",
-      },
-      {
-        title: "React",
-        description: "Learn about React",
-      },
-      {
-        title: "Vue",
-        description: "Learn about Vue",
-      },
-      {
-        title: "Angular",
-        description: "Learn about Angular",
-      },
-      {
-        title: "TypeScript",
-        description: "Learn about TypeScript",
-      },
-    ],
-  },
-  // Add more items as needed
-];
-
-export default roadmapJavaScript;
diff --git a/src/pages/roadmaps/css.tsx b/src/pages/roadmaps/css.tsx
deleted file mode 100644
index c47b9143..00000000
--- a/src/pages/roadmaps/css.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from "react";
-import Layout from "@theme-original/Layout";
-import Link from "@docusaurus/Link";
-import { roadmaps } from "../../data/roadmaps/index";
-import Head from "@docusaurus/Head";
-import "./roadmaps.css";
-
-export default function CSSRoadmap(): React.JSX.Element {
-  const cssRoadmap = roadmaps.find(r => r.id === 'css');
-  
-  if (!cssRoadmap) {
-    return (
-      <Layout title="Roadmap Not Found">
-        <div className="container" style={{ padding: '5rem 0', textAlign: 'center' }}>
-          <h1>Roadmap Not Found</h1>
-          <Link to="/roadmaps">Back to All Roadmaps</Link>
-        </div>
-      </Layout>
-    );
-  }
-
-  return (
-    <Layout
-      title="CSS Learning Roadmap"
-      description="Master the art of styling web pages with CSS, from fundamentals to advanced layouts."
-    >
-      <Head>
-        <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@300;400;500;600;700;800&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
-
-      <div className="roadmap-page">
-        {/* Back Link */}
-        <div className="container" style={{ paddingTop: '2rem' }}>
-          <Link to="/roadmaps" className="back-link">
-            ← Back to All Roadmaps
-          </Link>
-        </div>
-
-        {/* Hero Section */}
-        <section className="roadmap-hero" style={{ padding: '3rem 0' }}>
-          <div className="container">
-            <h1 className="hero-title">
-              <span className="gradient-text">CSS</span> Roadmap
-            </h1>
-            <p className="hero-subtitle">
-              {cssRoadmap.description}
-            </p>
-          </div>
-        </section>
-
-        {/* Timeline Section */}
-        <div className="roadmap-timeline">
-          <div className="timeline-section">
-            <div className="section-dot"></div>
-            <h2 className="section-title">Core Concepts</h2>
-            <div className="timeline-items">
-              {cssRoadmap.lessons.map((lesson, idx) => (
-                <a 
-                  key={idx} 
-                  href={lesson.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="timeline-item"
-                >
-                  <div className="item-content">
-                    <span className="item-status-icon">⭕</span>
-                    <div>
-                      <div className="item-text">{lesson.title}</div>
-                      <div className="item-subtext" style={{ fontSize: '0.85rem', opacity: 0.6 }}>Duration: {lesson.duration}</div>
-                    </div>
-                  </div>
-                  <span className="item-arrow">↗</span>
-                </a>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/roadmaps/html-coming-soon.tsx b/src/pages/roadmaps/html-coming-soon.tsx
deleted file mode 100644
index 4fcf336b..00000000
--- a/src/pages/roadmaps/html-coming-soon.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import Layout from "@theme-original/Layout";
-import Link from "@docusaurus/Link";
-import Head from "@docusaurus/Head";
-
-export default function HTMLRoadmapComingSoon(): JSX.Element {
-  return (
-    <Layout
-      title="HTML Topic Coming Soon"
-      description="Temporary page for HTML roadmap items that are not published yet."
-    >
-      <Head>
-        <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;800&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
-
-      <main
-        style={{
-          minHeight: "calc(100vh - 80px)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "4rem 1.5rem",
-          background:
-            "radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%)",
-        }}
-      >
-        <section
-          style={{
-            width: "100%",
-            maxWidth: "760px",
-            borderRadius: "28px",
-            padding: "3rem",
-            background: "rgba(255, 255, 255, 0.88)",
-            border: "1px solid rgba(148, 163, 184, 0.25)",
-            boxShadow: "0 30px 80px rgba(15, 23, 42, 0.12)",
-            backdropFilter: "blur(14px)",
-          }}
-        >
-          <p
-            style={{
-              margin: 0,
-              textTransform: "uppercase",
-              letterSpacing: "0.18em",
-              fontSize: "0.8rem",
-              fontWeight: 700,
-              color: "#2563eb",
-            }}
-          >
-            HTML Roadmap
-          </p>
-          <h1
-            style={{
-              margin: "0.75rem 0 1rem",
-              fontSize: "clamp(2.25rem, 5vw, 4rem)",
-              lineHeight: 1.05,
-              color: "#0f172a",
-            }}
-          >
-            Coming soon
-          </h1>
-          <p
-            style={{
-              margin: 0,
-              maxWidth: "56ch",
-              fontSize: "1.1rem",
-              lineHeight: 1.75,
-              color: "#475569",
-            }}
-          >
-            This HTML topic has not been published yet. We&apos;re replacing placeholder roadmap links with this page so every item has a real destination while the documentation is being completed.
-          </p>
-
-          <div
-            style={{
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "0.85rem",
-              marginTop: "2rem",
-            }}
-          >
-            <Link
-              to="/roadmaps/html"
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "0.9rem 1.25rem",
-                borderRadius: "999px",
-                background: "#2563eb",
-                color: "#fff",
-                fontWeight: 700,
-                textDecoration: "none",
-                boxShadow: "0 10px 24px rgba(37, 99, 235, 0.24)",
-              }}
-            >
-              Back to HTML roadmap
-            </Link>
-            <Link
-              to="/docs/html/intro-html/"
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "0.9rem 1.25rem",
-                borderRadius: "999px",
-                border: "1px solid rgba(37, 99, 235, 0.2)",
-                background: "#fff",
-                color: "#1d4ed8",
-                fontWeight: 700,
-                textDecoration: "none",
-              }}
-            >
-              Start with Introduction to HTML
-            </Link>
-          </div>
-        </section>
-      </main>
-    </Layout>
-  );
-}
diff --git a/src/pages/roadmaps/html.tsx b/src/pages/roadmaps/html.tsx
deleted file mode 100644
index a67220fe..00000000
--- a/src/pages/roadmaps/html.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import Layout from "@theme-original/Layout";
-import Link from "@docusaurus/Link";
-import { htmlRoadmapData } from "../../data/roadmaps/html";
-import Head from "@docusaurus/Head";
-import "./roadmaps.css";
-
-export default function HTMLRoadmap(): React.JSX.Element {
-  return (
-    <Layout
-      title="HTML Learning Roadmap"
-      description="A comprehensive step-by-step guide to mastering HTML, from basics to SEO and accessibility."
-    >
-      <Head>
-        <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@300;400;500;600;700;800&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
-
-      <div className="roadmap-page">
-        {/* Back Link */}
-        <div className="container" style={{ paddingTop: '2rem' }}>
-          <Link to="/roadmaps" className="back-link">
-            ← Back to All Roadmaps
-          </Link>
-        </div>
-
-        {/* Hero Section */}
-        <section className="roadmap-hero" style={{ padding: '3rem 0' }}>
-          <div className="container">
-            <h1 className="hero-title">
-              <span className="gradient-text">HTML</span> Roadmap
-            </h1>
-            <p className="hero-subtitle">
-              The foundation of the web. Follow this path to learn how to 
-              structure your web pages correctly and optimize them for 
-              search engines.
-            </p>
-          </div>
-        </section>
-
-        {/* Timeline Section */}
-        <div className="roadmap-timeline">
-          {htmlRoadmapData.map((section, idx) => (
-            <div key={idx} className="timeline-section">
-              <div className="section-dot"></div>
-              <h2 className="section-title">{section.title}</h2>
-              <div className="timeline-items">
-                {section.items.map((item, itemIdx) => (
-                  <Link 
-                    key={itemIdx} 
-                    to={item.link !== '#' ? item.link : undefined}
-                    className={`timeline-item ${item.link === '#' ? 'inactive' : ''}`}
-                  >
-                    <div className="item-content">
-                      <span className="item-status-icon">
-                        {item.status === 'completed' ? '✅' : '⭕'}
-                      </span>
-                      <span className="item-text">{item.text}</span>
-                    </div>
-                    {item.link !== '#' && <span className="item-arrow">→</span>}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/roadmaps/index.tsx b/src/pages/roadmaps/index.tsx
deleted file mode 100644
index 84a18e14..00000000
--- a/src/pages/roadmaps/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import { roadmaps } from "../../data/roadmaps/index";
-import Head from "@docusaurus/Head";
-import "./roadmaps.css";
-
-export default function RoadmapLanding(): React.JSX.Element {
-  return (
-    <Layout
-      title="Learning Roadmaps"
-      description="Step-by-step guides to mastering web development and modern technologies."
-    >
-      <Head>
-        <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@300;400;500;600;700;800&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
-
-      <div className="roadmap-page">
-        {/* Hero Section */}
-        <section className="roadmap-hero">
-          <div className="container">
-            <h1 className="hero-title">
-              <span className="gradient-text">Master</span> Your Craft
-            </h1>
-            <p className="hero-subtitle">
-              Choose a path and follow our step-by-step guides to become a 
-              professional developer. Our roadmaps are curated by experts to 
-              take you from zero to hero.
-            </p>
-          </div>
-        </section>
-
-        {/* Roadmaps Grid */}
-        <section className="roadmaps-section">
-          <div className="container">
-            <div className="roadmaps-grid">
-              {roadmaps.map((roadmap) => (
-                <Link
-                  to={`/roadmaps/${roadmap.id}`}
-                  key={roadmap.id}
-                  className="roadmap-card"
-                >
-                  <div className="card-icon">
-                    {roadmap.id === 'html' && '📄'}
-                    {roadmap.id === 'css' && '🎨'}
-                    {roadmap.id === 'javascript' && '⚡'}
-                    {!['html', 'css', 'javascript'].includes(roadmap.id) && '🚀'}
-                  </div>
-                  <h3 className="card-title">{roadmap.title}</h3>
-                  <p className="card-description">{roadmap.description}</p>
-                  <div className="card-footer">
-                    <span className="lesson-count">
-                      {roadmap.lessons.length} Modules
-                    </span>
-                    <span className="explore-btn">Explore Path →</span>
-                  </div>
-                </Link>
-              ))}
-            </div>
-          </div>
-        </section>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/roadmaps/javascript.tsx b/src/pages/roadmaps/javascript.tsx
deleted file mode 100644
index ebcb04f9..00000000
--- a/src/pages/roadmaps/javascript.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import Layout from "@theme-original/Layout";
-import Link from "@docusaurus/Link";
-import roadmapJavaScript from "../../data/roadmaps/javascript/index";
-import Head from "@docusaurus/Head";
-import "./roadmaps.css";
-
-export default function JavascriptRoadmap(): React.JSX.Element {
-  return (
-    <Layout
-      title="JavaScript Learning Roadmap"
-      description="Step-by-step guide to mastering JavaScript, from beginner to advanced topics."
-    >
-      <Head>
-        <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@300;400;500;600;700;800&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
-
-      <div className="roadmap-page">
-        {/* Back Link */}
-        <div className="container" style={{ paddingTop: '2rem' }}>
-          <Link to="/roadmaps" className="back-link">
-            ← Back to All Roadmaps
-          </Link>
-        </div>
-
-        {/* Hero Section */}
-        <section className="roadmap-hero" style={{ padding: '3rem 0' }}>
-          <div className="container">
-            <h1 className="hero-title">
-              <span className="gradient-text">JavaScript</span> Roadmap
-            </h1>
-            <p className="hero-subtitle">
-              The language of the web. Move from basic syntax to advanced 
-              asynchronous patterns and modern frameworks.
-            </p>
-          </div>
-        </section>
-
-        {/* Timeline Section */}
-        <div className="roadmap-timeline">
-          {roadmapJavaScript.map((section, idx) => (
-            <div key={idx} className="timeline-section">
-              <div className="section-dot"></div>
-              <h2 className="section-title">{section.title}</h2>
-              <p className="section-desc" style={{ marginBottom: '1.5rem', opacity: 0.7 }}>{section.description}</p>
-              <div className="timeline-items">
-                {section.topics.map((topic, topicIdx) => (
-                  <div key={topicIdx} className="timeline-item inactive">
-                    <div className="item-content">
-                      <span className="item-status-icon">⭕</span>
-                      <div>
-                        <div className="item-text">{topic.title}</div>
-                        <div className="item-subtext" style={{ fontSize: '0.85rem', opacity: 0.6 }}>{topic.description}</div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/roadmaps/roadmaps.css b/src/pages/roadmaps/roadmaps.css
deleted file mode 100644
index 73a5af6f..00000000
--- a/src/pages/roadmaps/roadmaps.css
+++ /dev/null
@@ -1,225 +0,0 @@
-.roadmap-page {
-  font-family: 'Inter', sans-serif;
-  background-color: var(--ifm-background-color);
-  min-height: 100vh;
-  padding-bottom: 5rem;
-}
-
-.roadmap-hero {
-  padding: 6rem 0 4rem;
-  text-align: center;
-  background: radial-gradient(circle at top, rgba(var(--ifm-color-primary-rgb), 0.1) 0%, transparent 70%);
-}
-
-.hero-title {
-  font-size: 4rem;
-  font-weight: 800;
-  margin-bottom: 1.5rem;
-  letter-spacing: -0.02em;
-}
-
-.gradient-text {
-  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-darker) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  color: var(--ifm-font-color-base);
-  max-width: 800px;
-  margin: 0 auto;
-  line-height: 1.6;
-  opacity: 0.8;
-}
-
-.roadmaps-section {
-  padding: 4rem 0;
-}
-
-.roadmaps-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 2.5rem;
-}
-
-.roadmap-card {
-  display: flex;
-  flex-direction: column;
-  padding: 2.5rem;
-  background: var(--ifm-card-background-color);
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 24px;
-  text-decoration: none !important;
-  color: inherit !important;
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.roadmap-card:hover {
-  transform: translateY(-10px);
-  border-color: var(--ifm-color-primary);
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.card-icon {
-  font-size: 3rem;
-  margin-bottom: 1.5rem;
-}
-
-.card-title {
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-}
-
-.card-description {
-  font-size: 1rem;
-  line-height: 1.6;
-  margin-bottom: 2rem;
-  opacity: 0.7;
-  flex-grow: 1;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.lesson-count {
-  font-weight: 600;
-  color: var(--ifm-color-primary);
-  font-size: 0.9rem;
-}
-
-.explore-btn {
-  font-weight: 700;
-  font-size: 0.95rem;
-  color: var(--ifm-color-primary);
-  transition: transform 0.3s ease;
-}
-
-.roadmap-card:hover .explore-btn {
-  transform: translateX(5px);
-}
-
-/* Specific Roadmap Detail Page Styles */
-.roadmap-detail-header {
-  padding: 4rem 0;
-  background: var(--ifm-color-emphasis-100);
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.roadmap-timeline {
-  max-width: 900px;
-  margin: 4rem auto;
-  padding: 0 2rem;
-  position: relative;
-}
-
-.roadmap-timeline::before {
-  content: '';
-  position: absolute;
-  left: 2rem;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  background: var(--ifm-color-emphasis-200);
-  border-radius: 2px;
-}
-
-.timeline-section {
-  margin-bottom: 4rem;
-  position: relative;
-  padding-left: 3.5rem;
-}
-
-.section-dot {
-  position: absolute;
-  left: -0.6rem;
-  top: 0.25rem;
-  width: 24px;
-  height: 24px;
-  background: var(--ifm-color-primary);
-  border: 4px solid var(--ifm-background-color);
-  border-radius: 50%;
-  z-index: 1;
-}
-
-.section-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-  color: var(--ifm-color-primary);
-}
-
-.timeline-items {
-  display: grid;
-  gap: 1.5rem;
-}
-
-.timeline-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem;
-  background: var(--ifm-card-background-color);
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 16px;
-  transition: all 0.3s ease;
-  text-decoration: none !important;
-  color: inherit !important;
-}
-
-.timeline-item:hover {
-  transform: translateX(10px);
-  border-color: var(--ifm-color-primary);
-  background: rgba(var(--ifm-color-primary-rgb), 0.02);
-}
-
-.item-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.item-status-icon {
-  font-size: 1.25rem;
-}
-
-.item-text {
-  font-weight: 500;
-  font-size: 1.1rem;
-}
-
-.item-arrow {
-  color: var(--ifm-color-primary);
-  font-weight: 700;
-}
-
-.back-link {
-  display: inline-block;
-  margin-bottom: 2rem;
-  font-weight: 600;
-  color: var(--ifm-color-primary);
-  text-decoration: none !important;
-}
-
-[data-theme="dark"] .roadmap-card,
-[data-theme="dark"] .timeline-item {
-  background: #1e1e1e;
-  border-color: #333;
-}
-
-@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.5rem;
-  }
-  
-  .roadmaps-grid {
-    grid-template-columns: 1fr;
-  }
-}