diff --git a/components/featured-content/journeys.js b/components/featured-content/journeys.js
index f0a8b341c..ac97ea7e6 100644
--- a/components/featured-content/journeys.js
+++ b/components/featured-content/journeys.js
@@ -30,7 +30,7 @@ const FeaturedJourneys = () => (
         </div>
         <div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
           <a href="#">
-            <img src="/static/dan-abramove.jpeg" alt="" />
+            <img src="/static/dan-abramov.jpeg" alt="" />
             <div className="journey-meta">
               <h4>Dan Abramov</h4>
               <p>Co-founder and CTO at Blink</p>
diff --git a/data/roadmaps.json b/data/roadmaps.json
index 7b4d01175..3bf353309 100644
--- a/data/roadmaps.json
+++ b/data/roadmaps.json
@@ -2,16 +2,19 @@
   {
     "title": "Frontend Developer",
     "description": "Roadmap to becoming a frontend developer",
-    "slug": "frontend"
+    "slug": "frontend",
+    "picture": "/static/roadmaps/frontend.png"
   },
   {
     "title": "Backend Developer",
     "description": "Roadmap to becoming a backend developer",
-    "slug": "backend"
+    "slug": "backend",
+    "picture": "/static/roadmaps/backend.png"
   },
   {
     "title": "DevOps",
     "description": "Roadmap for DevOps or any other Operations Role",
-    "slug": "devops"
+    "slug": "devops",
+    "picture": "/static/roadmaps/devops.png"
   }
 ]
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index dbccdd348..6a90131f2 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,6 +8,12 @@ module.exports = withCSS(withSass({
       '/about': { page: '/about' },
       '/privacy': { page: '/privacy' },
       '/terms': { page: '/terms' },
+      '/frontend': { page: '/frontend' },
+      '/backend': { page: '/backend' },
+      '/devops': { page: '/devops' },
+      '/roadmaps/frontend': { page: '/roadmaps/frontend' },
+      '/roadmaps/backend': { page: '/roadmaps/backend' },
+      '/roadmaps/devops': { page: '/roadmaps/devops' },
     };
   },
 
diff --git a/pages/roadmaps/[roadmap].js b/pages/roadmaps/[roadmap].js
index cde6c4248..74d14457a 100644
--- a/pages/roadmaps/[roadmap].js
+++ b/pages/roadmaps/[roadmap].js
@@ -1,17 +1,25 @@
 import { useRouter } from 'next/router';
 import DefaultLayout from '../../layouts/default/index';
 import PageHeader from '../../components/page-header/index';
+// import roadmaps from "../../data/roadmaps";
 
 const Roadmap = (props) => {
   const router = useRouter();
   const {
-    roadmap = props.roadmap,
+    roadmap: slug,
   } = router.query;
 
+  console.log(router);
+
+  // @todo handle 404
+  // const roadmap = roadmaps.find(roadmap => roadmap.slug === slug);
+
   return (
     <DefaultLayout>
       <PageHeader />
-      <p>Show roadmap for { roadmap } here</p>
+      <div className="container">
+        {/*<img src={ roadmap.picture } alt="" />*/}
+      </div>
     </DefaultLayout>
   );
 };
diff --git a/static/dan-abramove.jpeg b/static/dan-abramov.jpeg
similarity index 100%
rename from static/dan-abramove.jpeg
rename to static/dan-abramov.jpeg
diff --git a/static/meabed.png b/static/meabed.png
deleted file mode 100644
index 0a8d30153..000000000
Binary files a/static/meabed.png and /dev/null differ
diff --git a/static/roadmaps/backend.png b/static/roadmaps/backend.png
new file mode 100644
index 000000000..303469073
Binary files /dev/null and b/static/roadmaps/backend.png differ
diff --git a/static/roadmaps/devops.png b/static/roadmaps/devops.png
new file mode 100644
index 000000000..ae785b71c
Binary files /dev/null and b/static/roadmaps/devops.png differ
diff --git a/static/roadmaps/frontend.png b/static/roadmaps/frontend.png
new file mode 100644
index 000000000..935b3d26a
Binary files /dev/null and b/static/roadmaps/frontend.png differ