diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 798f92008..89bdeb204 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -15,6 +15,7 @@ import { ShareRoadmapButton } from './ShareRoadmapButton';
 import { TabLink } from './TabLink';
 import { PersonalizedRoadmap } from './PersonalizedRoadmap/PersonalizedRoadmap';
 import RoadmapFeedbackAlert from './Roadmaps/RoadmapFeedbackAlert.astro';
+import {markdownToHtml} from '../lib/markdown';
 
 export interface Props {
   title: string;
@@ -116,8 +117,8 @@ const hasProjects = projectCount > 0;
       <h1 class='mb-0.5 text-2xl font-bold sm:mb-3.5 sm:text-5xl'>
         {title}
       </h1>
-      <p class='text-sm text-balance text-gray-500 sm:text-lg'>
-        {description}
+      <p class='text-sm text-balance text-gray-500 sm:text-lg' set:html={markdownToHtml(description)}>
+        
       </p>
     </div>
 
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index cc1cdf87d..66bcd643d 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -24,10 +24,11 @@ const md = new MarkdownIt({
 
 export function markdownToHtml(markdown: string, isInline = true): string {
   try {
+    const replacedMarkdown = replaceVariables(markdown);
     if (isInline) {
-      return md.renderInline(markdown);
+      return md.renderInline(replacedMarkdown);
     } else {
-      return md.render(markdown);
+      return md.render(replacedMarkdown);
     }
   } catch (e) {
     return markdown;
@@ -86,7 +87,8 @@ export async function markdownToHtmlWithHighlighting(markdown: string) {
       return defaultRender(tokens, idx, options, env, self);
     };
 
-    return markdownItAsync.renderAsync(markdown);
+    return markdownItAsync.renderAsync(replaceVariables(markdown));
+
   } catch (e) {
     return markdown;
   }