diff --git a/src/components/GridRoadmapItem.astro b/src/components/GridRoadmapItem.astro
new file mode 100644
index 000000000..fe2cb6d2c
--- /dev/null
+++ b/src/components/GridRoadmapItem.astro
@@ -0,0 +1,30 @@
+---
+import type { RoadmapFrontmatter } from '../lib/roadmap';
+
+export interface Props {
+  roadmap: RoadmapFrontmatter;
+}
+
+const { roadmap } = Astro.props;
+---
+
+<a
+  href={`/${roadmap.id}`}
+  class="bg-gradient-to-r from-slate-900 to-amber-900 hover:from-stone-900 hover:to-stone-900 hover:bg-gray-100 flex flex-col p-2.5 sm:p-5 rounded-md sm:rounded-lg border border-gray-200 relative h-full"
+>
+  <span
+    class="font-regular sm:font-medium text-md sm:text-xl hover:text-gray-50 text-gray-200 sm:text-gray-100 mb-0 sm:mb-1.5"
+    >{roadmap.title}</span
+  >
+  <span class="text-sm leading-normal text-gray-400 hidden sm:block"
+    >{roadmap.description}</span
+  >
+
+  {
+    roadmap.isNew && (
+      <span class="absolute bottom-1 right-1 bg-yellow-300 text-yellow-900 text-xs font-medium px-1 sm:px-1.5 py-0.5 rounded-sm uppercase">
+        New
+      </span>
+    )
+  }
+</a>
diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts
index 3648402e6..27ad0f8f5 100644
--- a/src/lib/roadmap.ts
+++ b/src/lib/roadmap.ts
@@ -12,6 +12,7 @@ export interface RoadmapFrontmatter {
   title: string;
   description: string;
   hasTopics: boolean;
+  isNew: boolean;
   dimensions: {
     width: number;
     height: number;
@@ -63,5 +64,7 @@ export async function getRoadmapsByTag(tag: string): Promise<RoadmapFileType[]>
   const roadmapFiles: MarkdownFileType<RoadmapFrontmatter>[] = Object.values(roadmapFilesMap);
   const filteredRoadmaps = roadmapFiles.filter(roadmapFile => roadmapFile.frontmatter.tags.includes(tag));
 
-  return filteredRoadmaps;
+  return filteredRoadmaps.sort(
+    (a, b) => a.frontmatter.order - b.frontmatter.order
+  );
 }
\ No newline at end of file
diff --git a/src/pages/roadmaps.astro b/src/pages/roadmaps.astro
index 79c2553ad..e48ac8cd0 100644
--- a/src/pages/roadmaps.astro
+++ b/src/pages/roadmaps.astro
@@ -1,4 +1,5 @@
 ---
+import GridRoadmapItem from '../components/GridRoadmapItem.astro';
 import SimplePageHeader from '../components/SimplePageHeader.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getRoadmapsByTag } from '../lib/roadmap';
@@ -17,8 +18,17 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
   <div class="bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16">
     <div class="container">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3">
-        <h1>{ roleRoadmaps.length }</h1>
-        <h1>{ skillRoadmaps.length }</h1>
+        {
+          roleRoadmaps.map((roleRoadmap) => (
+            <GridRoadmapItem roadmap={roleRoadmap.frontmatter} />
+          ))
+        }
+
+        {
+          skillRoadmaps.map((skillRoadmap) => (
+            <GridRoadmapItem roadmap={skillRoadmap.frontmatter} />
+          ))
+        }
       </div>
     </div>
   </div>