diff --git a/lib/package.json b/lib/package.json
index ce0e9a8b..92061824 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -37,7 +37,8 @@
     "homepage": "https://github.com/the-deep/reporting-module-map-vizzard#readme",
     "dependencies": {
         "@babel/runtime-corejs3": "^7.22.3",
-        "@rollup/plugin-image": "^3.0.3"
+        "@rollup/plugin-image": "^3.0.3",
+        "@knight-lab/timelinejs": "^3.9.3"
     },
     "peerDependencies": {
         "react": "^18.2.0",
diff --git a/lib/rollup.config.js b/lib/rollup.config.js
index cf93dac0..3a2ff8bd 100644
--- a/lib/rollup.config.js
+++ b/lib/rollup.config.js
@@ -9,7 +9,6 @@ import image from '@rollup/plugin-image';
 import postcssPresetEnv from 'postcss-preset-env';
 import postcssNested from 'postcss-nested';
 import postcssNormalize from 'postcss-normalize';
-
 import pkg from './package.json' assert { type: 'json' };
 
 const INPUT_FILE_PATH = 'src/index.ts';
diff --git a/storybook/src/components/Timeline/Timeline.css b/lib/src/Timeline/Timeline.css
similarity index 100%
rename from storybook/src/components/Timeline/Timeline.css
rename to lib/src/Timeline/Timeline.css
diff --git a/lib/src/Timeline/index.tsx b/lib/src/Timeline/index.tsx
new file mode 100644
index 00000000..793938a6
--- /dev/null
+++ b/lib/src/Timeline/index.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { Timeline as TL } from '@knight-lab/timelinejs';
+import '@knight-lab/timelinejs/dist/css/timeline.css';
+import './Timeline.css';
+
+export interface Props {
+    data: {
+        Date: string;
+        Category: string;
+        Details: string;
+        Source: string;
+        Link: string;
+    }[],
+}
+
+function Timeline({ data }: Props) {
+    const timelineoptions = {
+    // initial_zoom: 2,
+        scale_factor: 1.4,
+        timenav_position: 'top',
+        height: '500',
+        width: '100%',
+        lang: 'en',
+        start_at_end: true,
+        font: 'Roboto Slab',
+    };
+
+    // eslint-disable-next-line
+    const evt = data.map((d:any) => (
+        {
+            start_date: new Date(d.Date),
+            display_date: (new Date(d.Date)).toDateString(),
+            group: d.Category,
+            text: {
+                headline: d['Main events'],
+                text: d.Details,
+            },
+        }
+    ));
+
+    const events = { events: evt };
+
+    useEffect(() => {
+    // eslint-disable-next-line
+    const timeline = new TL(
+            'timeline-embed',
+            events,
+            timelineoptions,
+        );
+    });
+
+    return (
+        <div id="timeline-embed" className="container" style={{ height: 500 }} />
+    );
+}
+
+export default Timeline;
diff --git a/lib/src/Timeline/timelinejs.d.ts b/lib/src/Timeline/timelinejs.d.ts
new file mode 100644
index 00000000..6343e406
--- /dev/null
+++ b/lib/src/Timeline/timelinejs.d.ts
@@ -0,0 +1 @@
+declare module '@knight-lab/timelinejs';
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 2a02487c..2988c371 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -4,3 +4,8 @@ export {
     default as KPIs,
     type Props as KPIsProps,
 } from './KPIs';
+
+export {
+    default as Timeline,
+    // type Props as TimelineProps,
+} from './Timeline';
diff --git a/lib/tsconfig.json b/lib/tsconfig.json
index 2bddeb6d..ff49ef42 100644
--- a/lib/tsconfig.json
+++ b/lib/tsconfig.json
@@ -30,5 +30,5 @@
         "sourceMap": true,
         "baseUrl": "."
     },
-    "include": ["./src/index.ts", "./src/declarations"]
+    "include": ["./src/index.ts", "./src/declarations", "src/Timeline/timelinejs.d.ts"]
 }
diff --git a/storybook/src/App.jsx b/storybook/src/App.jsx
index e42eba07..dc313e6f 100644
--- a/storybook/src/App.jsx
+++ b/storybook/src/App.jsx
@@ -4,7 +4,7 @@ import { KPIs } from '@the-deep/reporting-module-components';
 import '@the-deep/reporting-module-components/build/esm/index.css';
 
 import MapVizzard from './components/MapVizzard';
-import Timeline from './components/Timeline/Timeline';
+import Timeline from '@the-deep/reporting-module-components/src/Timeline/Timeline';
 import timelineData from './stories/Timeline.json';
 import kpiData from './stories/KPIs.json';
 import styles from './App.module.css';
diff --git a/storybook/src/components/Timeline/Timeline.jsx b/storybook/src/components/Timeline/Timeline.jsx
deleted file mode 100644
index 61ff6ba0..00000000
--- a/storybook/src/components/Timeline/Timeline.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useEffect } from 'react';
-import { Timeline as TL } from '@knight-lab/timelinejs';
-import '@knight-lab/timelinejs/dist/css/timeline.css';
-import './Timeline.css';
-
-function Timeline({
-  data,
-}) {
-  const timelineoptions = {
-    // initial_zoom: 2,
-    scale_factor: 1.4,
-    timenav_position: 'top',
-    height: '500',
-    width: '100%',
-    lang: 'en',
-    start_at_end: true,
-    font: 'Roboto Slab',
-  };
-
-  // parse data
-  const evt = data.map((d) => (
-    {
-      start_date: new Date(d.Date),
-      display_date: (new Date(d.Date)).toDateString(),
-      group: d.Category,
-      text: {
-        headline: d['Main events'],
-        text: d.Details,
-      },
-    }
-  ));
-
-  const events = { events: evt };
-
-  useEffect(() => {
-    // eslint-disable-next-line
-    const timeline = new TL(
-      'timeline-embed',
-      events,
-      timelineoptions,
-    );
-  }, []);
-
-  return (
-    <div id="timeline-embed" className="container" style={{ height: 500 }} />
-  );
-}
-
-export default Timeline;
diff --git a/storybook/src/stories/Timeline.stories.js b/storybook/src/stories/Timeline.stories.js
index 6e777592..d019c7ef 100644
--- a/storybook/src/stories/Timeline.stories.js
+++ b/storybook/src/stories/Timeline.stories.js
@@ -1,4 +1,5 @@
-import Timeline from '../components/Timeline/Timeline';
+import { Timeline } from '@the-deep/reporting-module-components';
+
 import data from './Timeline.json';
 
 // Story Config
diff --git a/storybook/tsconfig.json b/storybook/tsconfig.json
index a273b0cf..d11fbd9c 100644
--- a/storybook/tsconfig.json
+++ b/storybook/tsconfig.json
@@ -22,5 +22,5 @@
   },
   "include": [
     "src"
-  ]
+, "../lib/src/Timeline"  ]
 }