diff --git a/src/pages/Frontend.jsx b/src/pages/Frontend.jsx
index a924a85..7bed1ef 100644
--- a/src/pages/Frontend.jsx
+++ b/src/pages/Frontend.jsx
@@ -45,6 +45,13 @@ const sidebarLinks = [
     description: 'Quick Reference Guide',
     color: 'from-gray-500 to-gray-500'
   },
+  { 
+    name: 'Roadmap', 
+    path: '/frontend/roadmap', 
+    icon: '🗺️', 
+    description: 'Learning Path',
+    color: 'from-purple-500 to-indigo-500'
+  },
 ];
 
 const Frontend = () => {
diff --git a/src/pages/FrontendRoadmap.jsx b/src/pages/FrontendRoadmap.jsx
new file mode 100644
index 0000000..c48b887
--- /dev/null
+++ b/src/pages/FrontendRoadmap.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const FrontendRoadmap = () => {
+  const roadmapSteps = [
+    {
+      title: "1. HTML Fundamentals",
+      description: "Learn the building blocks of web pages",
+      topics: [
+        "HTML5 Semantic Elements",
+        "Forms and Input Types",
+        "Accessibility (ARIA, Semantic HTML)",
+        "SEO Basics"
+      ],
+      link: "/frontend/html",
+      color: "from-orange-500 to-red-500"
+    },
+    {
+      title: "2. CSS & Responsive Design",
+      description: "Style your web pages and make them responsive",
+      topics: [
+        "CSS3 Features (Flexbox, Grid)",
+        "Responsive Units (rem, vh, vw)",
+        "CSS Variables",
+        "Animations & Transitions"
+      ],
+      link: "/frontend/css",
+      color: "from-blue-500 to-cyan-500"
+    },
+    {
+      title: "3. JavaScript Fundamentals",
+      description: "Add interactivity to your websites",
+      topics: [
+        "ES6+ Features",
+        "DOM Manipulation",
+        "Async/Await & Promises",
+        "Error Handling"
+      ],
+      link: "/frontend/js",
+      color: "from-yellow-500 to-orange-500"
+    },
+    {
+      title: "4. React.js",
+      description: "Build dynamic user interfaces",
+      topics: [
+        "Components & Props",
+        "Hooks (useState, useEffect, etc.)",
+        "State Management",
+        "React Router"
+      ],
+      link: "/frontend/reactjs",
+      color: "from-cyan-500 to-blue-500"
+    },
+    {
+      title: "5. Styling with Tailwind CSS",
+      description: "Rapid UI development with utility classes",
+      topics: [
+        "Utility-First Approach",
+        "Responsive Design",
+        "Custom Configuration",
+        "Dark Mode"
+      ],
+      link: "/frontend/tailwind",
+      color: "from-teal-500 to-green-500"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-4 md:p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">Frontend Development Roadmap</h1>
+        <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
+          A step-by-step guide to becoming a frontend developer. Follow this structured path and use the resources below to master each topic.
+        </p>
+
+        <div className="space-y-8">
+          {roadmapSteps.map((step, index) => (
+            <div 
+              key={index}
+              className={`bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-l-4 bg-gradient-to-r ${step.color}/5 border-${step.color.split(' ')[0].replace('from-', '')}-500`}
+            >
+              <div className="p-6">
+                <div className="flex items-center mb-4">
+                  <div className={`flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r ${step.color} text-white text-xl font-bold mr-4`}>
+                    {index + 1}
+                  </div>
+                  <div>
+                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{step.title}</h2>
+                    <p className="text-gray-600 dark:text-gray-300">{step.description}</p>
+                  </div>
+                </div>
+                
+                <div className="ml-16 pl-4 border-l-2 border-gray-200 dark:border-gray-700">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">Key Topics:</h3>
+                  <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-4">
+                    {step.topics.map((topic, i) => (
+                      <li key={i} className="flex items-start">
+                        <span className="text-green-500 mr-2">✓</span>
+                        <span className="text-gray-700 dark:text-gray-300">{topic}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  
+                  <Link 
+                    to={step.link}
+                    className={`inline-flex items-center px-4 py-2 rounded-md text-white bg-gradient-to-r ${step.color} hover:opacity-90 transition-opacity`}
+                  >
+                    Learn {step.title.split(' ')[1]}
+                    <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Additional Resources</h2>
+          <ul className="space-y-3">
+            <li>
+              <a 
+                href="https://frontendmasters.com/guides/front-end-handbook/2018/" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-blue-600 dark:text-blue-400 hover:underline flex items-center"
+              >
+                <span>Frontend Developer Handbook</span>
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a 
+                href="https://developer.mozilla.org/en-US/docs/Web" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-blue-600 dark:text-blue-400 hover:underline flex items-center"
+              >
+                <span>MDN Web Docs</span>
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a 
+                href="https://reactjs.org/docs/getting-started.html" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-blue-600 dark:text-blue-400 hover:underline flex items-center"
+              >
+                <span>React Documentation</span>
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a 
+                href="https://tailwindcss.com/docs" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-blue-600 dark:text-blue-400 hover:underline flex items-center"
+              >
+                <span>Tailwind CSS Documentation</span>
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="mt-8 text-center text-gray-500 dark:text-gray-400 text-sm">
+          <p>Remember: Learning is a journey, not a race. Take your time to understand each concept before moving forward.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FrontendRoadmap;
diff --git a/src/routes/routes.jsx b/src/routes/routes.jsx
index d4e30c4..6ff4e39 100644
--- a/src/routes/routes.jsx
+++ b/src/routes/routes.jsx
@@ -6,6 +6,7 @@ import { createBrowserRouter } from "react-router-dom";
 import App from "../App";
 import Home from "../pages/Home";
 import Frontend from "../pages/Frontend";
+import FrontendRoadmap from "../pages/FrontendRoadmap";
 import Backend from "../pages/Backend";
 import MachineLearning from "../pages/MachineLearning";
 import AndroidDevelopmentRoadmap from "../pages/AndroidDevelopmentRoadmap";
@@ -149,6 +150,7 @@ const routes = createBrowserRouter([
           { path: "reactjs", element: <ReactJs /> },
           { path: "tailwind", element: <TailwindCss /> },
           { path: "cheatsheet", element: <CheatSheet /> },
+          { path: "roadmap", element: <FrontendRoadmap /> },
         ],
       },
       { path: "/frontend/frontendprepsheet", element: <FrontendPrepSheet /> },