diff --git a/src/components/pages/Timeline/components/ModuleHeading/index.tsx b/src/components/pages/Timeline/components/ModuleHeading/index.tsx
index 9ed67a7597fc7060f466f1dc4039763549cbc9f6..172cb89c16421f2b7a8c4d150f70dc7d0465f156 100644
--- a/src/components/pages/Timeline/components/ModuleHeading/index.tsx
+++ b/src/components/pages/Timeline/components/ModuleHeading/index.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from "react";
 import Card from "react-bootstrap/Card";
 import styles from "./style.module.scss";
-
+import { Link } from "react-router-dom";
 export interface ModuleHeadingprops {
   moduleCode: string;
   title: string;
@@ -14,7 +14,12 @@ const ModuleHeading: React.FC<ModuleHeadingprops> = ({
   style,
 }) => {
   return (
-    <Card style={style} className={styles.moduleCard}>
+    <Card
+      style={style}
+      className={styles.moduleCard}
+      as={Link}
+      to={`modules/${moduleCode}`}
+    >
       <Card.Header>
         <span>{moduleCode}</span>
       </Card.Header>