diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.html b/src/app/component/circular-heatmap/circular-heatmap.component.html
index bf1e6837..cb32c31b 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.html
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.html
@@ -45,7 +45,19 @@ <h2>Nothing to show</h2>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <p [innerHTML]="activityDetails.description"></p>
+                  <div
+                    *ngIf="
+                      markdown.render(activityDetails.description);
+                      else ifFileIsNotAMarkdown
+                    ">
+                    <p
+                      [innerHTML]="
+                        markdown.render(activityDetails.description)
+                      "></p>
+                  </div>
+                  <ng-template #ifFileIsNotAMarkdown>
+                    <p [innerHTML]="activityDetails.description"></p>
+                  </ng-template>
                 </ng-template>
               </mat-expansion-panel>
               <mat-expansion-panel
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts
index 2f848ed6..01670e78 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.ts
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.ts
@@ -10,6 +10,7 @@ import * as d3 from 'd3';
 import * as yaml from 'js-yaml';
 import { Router } from '@angular/router';
 import { MatChip } from '@angular/material/chips';
+import * as md from 'markdown-it';
 
 export interface activitySchema {
   uuid: string;
@@ -56,6 +57,7 @@ export class CircularHeatmapComponent implements OnInit {
   segment_labels: string[] = [];
   activityDetails: any;
   showOverlay: boolean;
+  markdown: md = md();
 
   constructor(
     private yaml: ymlService,