diff --git a/components/featured-content/index.js b/components/featured-content/index.js
index b9e615e04..6b2b179d8 100644
--- a/components/featured-content/index.js
+++ b/components/featured-content/index.js
@@ -7,7 +7,6 @@ const FeaturedContent = (props) => (
   <FeaturedWrap className="border-top border-bottom bg-light">
     <FeaturedRoadmaps />
     <FeaturedGuides />
-    { /*<FeaturedJourneys />*/ }
   </FeaturedWrap>
 );
 
diff --git a/components/page-header/index.js b/components/page-header/index.js
index dca2a5f4d..7abe7a8ae 100644
--- a/components/page-header/index.js
+++ b/components/page-header/index.js
@@ -11,7 +11,6 @@ const PageHeader = () => (
       <div className="nav-links">
         <a href="#">Roadmaps</a>
         <a href="#">Guides</a>
-        <a href="#">Journeys</a>
         <a href="#">FAQs</a>
         <a href="#" className='signup'>Sign Up</a>
       </div>
diff --git a/data/roadmaps.json b/data/roadmaps.json
new file mode 100644
index 000000000..7b4d01175
--- /dev/null
+++ b/data/roadmaps.json
@@ -0,0 +1,17 @@
+[
+  {
+    "title": "Frontend Developer",
+    "description": "Roadmap to becoming a frontend developer",
+    "slug": "frontend"
+  },
+  {
+    "title": "Backend Developer",
+    "description": "Roadmap to becoming a backend developer",
+    "slug": "backend"
+  },
+  {
+    "title": "DevOps",
+    "description": "Roadmap for DevOps or any other Operations Role",
+    "slug": "devops"
+  }
+]
\ No newline at end of file
diff --git a/pages/[fallback].js b/pages/[fallback].js
index b6d43cffc..e6f4dd519 100644
--- a/pages/[fallback].js
+++ b/pages/[fallback].js
@@ -1,16 +1,19 @@
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/router';
+import Roadmap from './roadmaps/[roadmap]';
+import roadmapsList from "../data/roadmaps.json";
 
-// Fallback page to handle the routing for the old roadmap pages
-const Fallback = () => {
+// Fallback page to handle the old roadmap pages implementation
+const OldRoadmap = () => {
   const router = useRouter();
   const { fallback } = router.query;
 
-  return (
-    <div>
-      <h1>{ fallback }</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi dolorum ea earum exercitationem fuga magnam nihil nostrum numquam optio provident quaerat repellendus, repudiandae vitae voluptas, voluptatibus. Consequuntur doloremque maxime perferendis!</p>
-    </div>
-  );
+  // Render the roadmap if it exists, otherwise 404
+  const roadmapExists = !!roadmapsList.find(roadmap => roadmap.slug === fallback);
+  if (roadmapExists) {
+    return <Roadmap roadmap={ fallback } />
+  }
+
+  return <h1>404</h1>;
 };
 
-export default Fallback;
\ No newline at end of file
+export default OldRoadmap;
\ No newline at end of file
diff --git a/pages/roadmaps/[roadmap].js b/pages/roadmaps/[roadmap].js
new file mode 100644
index 000000000..cde6c4248
--- /dev/null
+++ b/pages/roadmaps/[roadmap].js
@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router';
+import DefaultLayout from '../../layouts/default/index';
+import PageHeader from '../../components/page-header/index';
+
+const Roadmap = (props) => {
+  const router = useRouter();
+  const {
+    roadmap = props.roadmap,
+  } = router.query;
+
+  return (
+    <DefaultLayout>
+      <PageHeader />
+      <p>Show roadmap for { roadmap } here</p>
+    </DefaultLayout>
+  );
+};
+
+export default Roadmap;
\ No newline at end of file
diff --git a/pages/roadmaps/index.js b/pages/roadmaps/index.js
new file mode 100644
index 000000000..279c97ad8
--- /dev/null
+++ b/pages/roadmaps/index.js
@@ -0,0 +1,11 @@
+import DefaultLayout from '../../layouts/default/index';
+import PageHeader from '../../components/page-header/index';
+
+const Roadmap = () => (
+  <DefaultLayout>
+    <PageHeader />
+    <p>Show all roadmaps here</p>
+  </DefaultLayout>
+);
+
+export default Roadmap;
\ No newline at end of file