diff --git a/src/components/Roadmap/index.tsx b/src/components/Roadmap/index.tsx
index d2f6f3be9..0a8d3e19d 100644
--- a/src/components/Roadmap/index.tsx
+++ b/src/components/Roadmap/index.tsx
@@ -14,8 +14,8 @@ const techCategories: TechCategory[] = [
     title: "Frontend",
     technologies: [
       { id: 1, name: "HTML", link: "/roadmap/html" },
-      { id: 2, name: "CSS", link: "#" },
-      { id: 3, name: "JavaScript", link: "#" },
+      { id: 2, name: "CSS", link: "" },
+      { id: 3, name: "JavaScript", link: "/roadmap/javascript" },
       { id: 4, name: "React", link: "#" },
       { id: 5, name: "Angular", link: "#" },
       { id: 6, name: "Vue.js", link: "#" },
diff --git a/src/pages/roadmap/javascript/index.css b/src/pages/roadmap/javascript/index.css
new file mode 100644
index 000000000..3d4bd8a6a
--- /dev/null
+++ b/src/pages/roadmap/javascript/index.css
@@ -0,0 +1,96 @@
+body {
+    font-family: sans-serif;
+    background-color: #f4f4f4;
+  }
+  
+  .maincontainer {
+    width: 500px;
+    margin: 0 auto;
+    background-color: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  h1 {
+    text-align: center;
+    color: #333;
+  }
+  
+  .button {
+    display: block;
+    margin: 20px auto;
+    width: 150px;
+    padding: 10px;
+    padding-bottom: 0px;
+    background-color: #4CAF50;
+    color: white;
+    text-align: center;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .button:hover {
+    background-color: #45a049;
+  }
+  
+  .flowchart {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+  }
+  
+  .step {
+    width: 250px;
+    padding: 15px;
+    margin-bottom: 0px;
+    background-color: #ffff00;
+    border-radius: 5px;
+    text-align: center;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+  .step:hover {
+    background-color: #eded0a;
+    cursor: pointer;
+  }
+  .arrow {
+    display: block;
+    width: 2px;
+    height: 50px;
+    background-color: black;
+
+  }
+  
+  .checkmark {
+    display: inline-block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #4CAF50;
+    margin-left: 10px;
+    top: 2px;
+  }
+  
+  .checkmark::before {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 2px;
+    background-color: white;
+    transform: rotate(45deg);
+    top: 9px;
+    left: 5px;
+  }
+  
+  .checkmark::after {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 10px;
+    background-color: white;
+    transform: rotate(45deg);
+    top: 5px;
+    left: 9px;
+}
\ No newline at end of file
diff --git a/src/pages/roadmap/javascript/index.tsx b/src/pages/roadmap/javascript/index.tsx
new file mode 100644
index 000000000..e94f934b5
--- /dev/null
+++ b/src/pages/roadmap/javascript/index.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import "./index.css";
+
+export default function JsRoadmap(){
+    return(
+    <Layout>
+<div className="maincontainer">
+  <h1>JavaScript </h1>
+
+  <div className="flowchart">
+    <div className="step">Introduction to JavaScript </div>
+    <div className="arrow"></div>
+    <div className="step">All About Variables</div>
+    <div className="arrow"></div>
+    <div className="step">Data Types </div>
+    <div className="arrow"></div>
+    <div className="step">Type Casting</div>
+    <div className="arrow"></div>
+    <div className="step">Equality Comparisons </div>
+    <div className="arrow"></div>
+    <div className="step">Loops and Iterations</div>
+    <div className="arrow"></div>
+    <div className="step">Control Flow </div>
+    <div className="arrow"></div>
+    <div className="step">Functions </div>
+    <div className="arrow"></div>
+    <div className="step">Strict Mode </div>
+    <div className="arrow"></div>
+    <div className="step">Asynchronous JavaScript </div>
+    <div className="arrow"></div>
+    <div className="step">Working with APIs </div>
+    <div className="arrow"></div>
+    <div className="step">Iterators and Generators</div>
+    <div className="arrow"></div>
+    <div className="step">Modules in JavaScript</div>
+    <div className="arrow"></div>
+    <div className="step">Using Chrome Dev Tools </div>
+	<div className="arrow"></div>
+	<div className="step"><a href="https://codeharborhub.github.io/docs/category/javascript/">Resources</a></div>
+
+	
+  </div>
+</div>
+    </Layout>
+    );}
\ No newline at end of file