diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 74dbf1a..3a7a397 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -90,6 +90,11 @@ const config: Config = {
           label: 'Blog',
           position: 'left'
         },
+        {
+          to: '/roadmaps',
+          label: 'Roadmaps',
+          position: 'left'
+        },
         {
           type: 'dropdown',
           label: 'More',
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 4375347..7e88121 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -133,7 +133,7 @@ export default function Home(): React.ReactElement {
                   <path d="M5 12h14m-7-7 7 7-7 7" />
                 </svg>
               </a>
-              <a href="#courses-section" className={styles.btnSecondary}>
+              <a href="/roadmaps" className={styles.btnSecondary}>
                 <svg
                   width="20"
                   height="20"
@@ -146,6 +146,21 @@ export default function Home(): React.ReactElement {
                 </svg>
                 See RoadMap
               </a>
+              <a href="https://roadmap.sh" target="_blank" rel="noopener noreferrer" className={styles.btnTertiary}>
+                🗺️ Roadmap.sh
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                  <polyline points="15,3 21,3 21,9" />
+                  <line x1="10" y1="14" x2="21" y2="3" />
+                </svg>
+              </a>
             </div>
           </div>
 
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index f6537ce..3310025 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -271,6 +271,31 @@
   transform: translateY(-2px);
 }
 
+.btnTertiary {
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btnTertiary:hover {
+  color: white;
+  text-decoration: none;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+}
+
 .heroVisual {
   flex: 1 1 45%;
   display: flex;
@@ -633,7 +658,8 @@
   }
 
   .btnPrimary,
-  .btnSecondary {
+  .btnSecondary,
+  .btnTertiary {
     width: 100%;
     justify-content: center;
   }
@@ -959,3 +985,491 @@
   border-radius: 8px;
   margin-top: 0.5rem;
 }
+
+/* Roadmaps Page Styles */
+.roadmapsHeader {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.roadmapsHeader h1 {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.roadmapsSubtitle {
+  font-size: 1.2rem;
+  color: var(--text-secondary);
+  max-width: 800px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.benefitsSection {
+  margin-bottom: 4rem;
+}
+
+.benefitsSection h2 {
+  text-align: center;
+  font-size: 2.2rem;
+  margin-bottom: 2rem;
+  color: var(--text-primary);
+}
+
+.benefitsList {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.benefit {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: var(--bg-card);
+  border-radius: 12px;
+  border: 1px solid var(--border-primary);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.benefit:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.benefit h3 {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+.benefit p {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.roadmapsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2rem;
+  margin-bottom: 4rem;
+}
+
+.roadmapCard {
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px;
+  padding: 2rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.roadmapCard:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.roadmapCard::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+}
+
+.roadmapHeader {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.roadmapIcon {
+  padding: 1rem;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.roadmapTitle h3 {
+  font-size: 1.5rem;
+  margin: 0 0 0.25rem 0;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.difficulty {
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+  background: var(--bg-elevated);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.roadmapDescription {
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.roadmapMeta {
+  margin-bottom: 1.5rem;
+}
+
+.estimatedTime {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.estimatedTime strong {
+  color: var(--text-primary);
+}
+
+.skillsList {
+  margin-bottom: 2rem;
+}
+
+.skillsList h4 {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.skillsList ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+.skillsList li {
+  color: var(--text-secondary);
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-primary);
+  font-size: 0.9rem;
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+.skillsList li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: #10b981;
+  font-weight: bold;
+}
+
+.roadmapActions {
+  margin-top: auto;
+}
+
+.viewRoadmapBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: #3b82f6;
+  color: white;
+  text-decoration: none;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+
+.viewRoadmapBtn:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  color: white;
+  text-decoration: none;
+}
+
+.callToAction {
+  text-align: center;
+  padding: 3rem 2rem;
+  background: var(--bg-card);
+  border-radius: 16px;
+  border: 1px solid var(--border-primary);
+}
+
+.callToAction h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.callToAction p {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ctaButtons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.ctaButton {
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.ctaButton.primary {
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+}
+
+.ctaButton.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+  color: white;
+  text-decoration: none;
+}
+
+.ctaButton.secondary {
+  background: transparent;
+  color: var(--text-primary);
+  border: 2px solid var(--border-secondary);
+}
+
+.ctaButton.secondary:hover {
+  background: var(--bg-elevated);
+  border-color: #3b82f6;
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .roadmapsGrid {
+    grid-template-columns: 1fr;
+  }
+  
+  .benefitsList {
+    grid-template-columns: 1fr;
+  }
+  
+  .roadmapsHeader h1 {
+    font-size: 2.5rem;
+  }
+  
+  .roadmapsSubtitle {
+    font-size: 1.1rem;
+  }
+  
+  .roadmapCard {
+    padding: 1.5rem;
+  }
+  
+  .skillsList ul {
+    grid-template-columns: 1fr;
+  }
+  
+  .ctaButtons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .ctaButton {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+.roadmapsSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+.roadmapsContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.roadmapsHeader {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.roadmapsTitle {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #10b981);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+  animation: gradientShift 3s ease-in-out infinite;
+}
+
+.roadmapsSubtitle {
+  font-size: 1.2rem;
+  color: var(--text-secondary);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.roadmapCardsPreview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+.roadmapCardPreview {
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px;
+  padding: 2rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.roadmapCardPreview:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--shadow-lg);
+  border-color: #3b82f6;
+}
+
+.roadmapCardPreview::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
+  background-size: 200% 200%;
+  animation: gradientShift 2s ease-in-out infinite;
+}
+
+.roadmapCardIcon {
+  width: 80px;
+  height: 80px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+  transition: transform 0.3s ease;
+}
+
+.roadmapCardPreview:hover .roadmapCardIcon {
+  transform: scale(1.1);
+}
+
+.roadmapCardPreview h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.roadmapCardPreview p {
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.roadmapTime {
+  display: inline-block;
+  background: var(--bg-elevated);
+  color: var(--text-tertiary);
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.roadmapsCTA {
+  text-align: center;
+}
+
+.roadmapsButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 2.5rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  text-decoration: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+}
+
+.roadmapsButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+  color: white;
+  text-decoration: none;
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+/* Responsive for roadmaps preview */
+@media (max-width: 768px) {
+  .roadmapsTitle {
+    font-size: 2.5rem;
+  }
+  
+  .roadmapCardsPreview {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .roadmapCardPreview {
+    padding: 1.5rem;
+  }
+  
+  .roadmapsButton {
+    padding: 0.875rem 2rem;
+    font-size: 1rem;
+  }
+}
diff --git a/src/pages/roadmaps.tsx b/src/pages/roadmaps.tsx
new file mode 100644
index 0000000..5da1869
--- /dev/null
+++ b/src/pages/roadmaps.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import Head from "@docusaurus/Head";
+import { ExternalLink, Target, BookOpen, Code2 } from "lucide-react";
+import styles from './index.module.css';
+
+// Roadmap data structure
+const roadmaps = [
+  {
+    id: "frontend",
+    title: "Frontend Developer",
+    description: "Complete roadmap for frontend development including HTML, CSS, JavaScript, React, and modern tools",
+    icon: Code2,
+    url: "https://roadmap.sh/frontend",
+    color: "#3b82f6",
+    skills: [
+      "HTML & CSS Fundamentals",
+      "JavaScript (ES6+)",
+      "React.js",
+      "TypeScript",
+      "State Management",
+      "Build Tools & Bundlers",
+      "Testing",
+      "Performance Optimization"
+    ],
+    estimatedTime: "6-12 months",
+    difficulty: "Beginner to Advanced"
+  },
+  {
+    id: "backend",
+    title: "Backend Developer", 
+    description: "Comprehensive backend development path covering server-side technologies, databases, and APIs",
+    icon: BookOpen,
+    url: "https://roadmap.sh/backend",
+    color: "#10b981",
+    skills: [
+      "Programming Language (Python/Node.js/Java)",
+      "Databases (SQL & NoSQL)",
+      "APIs & RESTful Services",
+      "Authentication & Security",
+      "Caching & Performance",
+      "DevOps Basics",
+      "Testing & Monitoring",
+      "System Design"
+    ],
+    estimatedTime: "8-15 months",
+    difficulty: "Intermediate to Advanced"
+  },
+  {
+    id: "fullstack",
+    title: "Full Stack Developer",
+    description: "Complete full stack development journey combining frontend and backend technologies",
+    icon: Target,
+    url: "https://roadmap.sh/full-stack",
+    color: "#8b5cf6",
+    skills: [
+      "Frontend Technologies",
+      "Backend Development",
+      "Database Management",
+      "Version Control (Git)",
+      "Deployment & Hosting",
+      "API Development",
+      "Security Best Practices",
+      "Project Management"
+    ],
+    estimatedTime: "12-18 months",
+    difficulty: "Beginner to Advanced"
+  },
+  {
+    id: "dsa",
+    title: "Data Structures & Algorithms",
+    description: "Essential DSA concepts for programming interviews and problem-solving skills",
+    icon: BookOpen,
+    url: "https://roadmap.sh/computer-science",
+    color: "#f59e0b",
+    skills: [
+      "Arrays & Strings",
+      "Linked Lists",
+      "Stacks & Queues",
+      "Trees & Graphs",
+      "Dynamic Programming",
+      "Sorting & Searching",
+      "Recursion & Backtracking",
+      "System Design Basics"
+    ],
+    estimatedTime: "6-12 months",
+    difficulty: "Beginner to Advanced"
+  }
+];
+
+const RoadmapCard = ({ roadmap }) => {
+  const IconComponent = roadmap.icon;
+  
+  return (
+    <div className={styles.roadmapCard}>
+      <div className={styles.roadmapHeader}>
+        <div className={styles.roadmapIcon} style={{ backgroundColor: `${roadmap.color}20` }}>
+          <IconComponent size={32} color={roadmap.color} />
+        </div>
+        <div className={styles.roadmapTitle}>
+          <h3>{roadmap.title}</h3>
+          <span className={styles.difficulty}>{roadmap.difficulty}</span>
+        </div>
+      </div>
+      
+      <p className={styles.roadmapDescription}>{roadmap.description}</p>
+      
+      <div className={styles.roadmapMeta}>
+        <div className={styles.estimatedTime}>
+          <strong>Estimated Time:</strong> {roadmap.estimatedTime}
+        </div>
+      </div>
+      
+      <div className={styles.skillsList}>
+        <h4>Key Skills You'll Learn:</h4>
+        <ul>
+          {roadmap.skills.map((skill, index) => (
+            <li key={index}>{skill}</li>
+          ))}
+        </ul>
+      </div>
+      
+      <div className={styles.roadmapActions}>
+        <a 
+          href={roadmap.url} 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className={styles.viewRoadmapBtn}
+          style={{ backgroundColor: roadmap.color }}
+        >
+          View Interactive Roadmap
+          <ExternalLink size={16} />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default function RoadmapsPage() {
+  return (
+    <Layout>
+      <Head>
+        <title>Learning Roadmaps - LearnHub</title>
+        <meta 
+          name="description" 
+          content="Explore comprehensive learning roadmaps for web development, data structures, algorithms, and more. Plan your learning journey with our curated paths."
+        />
+      </Head>
+      
+      <main className="container margin-vert--lg">
+        <div className={styles.roadmapsHeader}>
+          <h1>Learning Roadmaps</h1>
+          <p className={styles.roadmapsSubtitle}>
+            Choose your learning path and follow structured roadmaps to master your chosen technology stack. 
+            These roadmaps are curated from <strong>roadmap.sh</strong> - the community-driven platform for developer roadmaps.
+          </p>
+        </div>
+
+        <div className={styles.benefitsSection}>
+          <h2>Why Follow a Roadmap?</h2>
+          <div className={styles.benefitsList}>
+            <div className={styles.benefit}>
+              <Target size={24} color="#3b82f6" />
+              <div>
+                <h3>Clear Learning Path</h3>
+                <p>Get a structured sequence of topics to study, eliminating confusion about what to learn next.</p>
+              </div>
+            </div>
+            <div className={styles.benefit}>
+              <BookOpen size={24} color="#10b981" />
+              <div>
+                <h3>Goal-Oriented Learning</h3>
+                <p>Plan your 30-day learning schedule effectively with milestone-based progression.</p>
+              </div>
+            </div>
+            <div className={styles.benefit}>
+              <Code2 size={24} color="#8b5cf6" />
+              <div>
+                <h3>Industry-Standard Skills</h3>
+                <p>Learn skills that are in high demand and follow industry best practices.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.roadmapsGrid}>
+          {roadmaps.map((roadmap) => (
+            <RoadmapCard key={roadmap.id} roadmap={roadmap} />
+          ))}
+        </div>
+
+        <div className={styles.callToAction}>
+          <h2>Ready to Start Your Journey?</h2>
+          <p>
+            Select a roadmap that aligns with your goals and start learning today. 
+            Each roadmap provides detailed guidance on topics, resources, and the optimal learning sequence.
+          </p>
+          <div className={styles.ctaButtons}>
+            <a href="/docs/intro" className={styles.ctaButton + " " + styles.primary}>
+              Browse Course Materials
+            </a>
+            <a href="/lectures" className={styles.ctaButton + " " + styles.secondary}>
+              Watch Video Lectures
+            </a>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}
\ No newline at end of file