diff --git a/components/calendar/CalendarComponent.story.tsx b/components/calendar/CalendarComponent.story.tsx
new file mode 100644
index 000000000..f44a9ec4b
--- /dev/null
+++ b/components/calendar/CalendarComponent.story.tsx
@@ -0,0 +1,7 @@
+import CalendarComponent from './CalendarComponent';
+
+export default {
+  title: 'Calendar component',
+};
+
+export const Default = (args: any) => <CalendarComponent {...args} />;
diff --git a/components/calendar/MediaDisplay.story.tsx b/components/calendar/MediaDisplay.story.tsx
new file mode 100644
index 000000000..59eb690bb
--- /dev/null
+++ b/components/calendar/MediaDisplay.story.tsx
@@ -0,0 +1,17 @@
+import MediaDisplay from './MediaDisplay';
+
+export default {
+  title: 'Media display component',
+  args: {
+    media: {
+      id: '1',
+      title: 'Media title',
+      description: 'Media description',
+      poster: 'https://fr.web.img5.acsta.net/pictures/22/04/08/10/30/1779137.jpg',
+      type: 'movie',
+      genres: ['Action', 'Adventure', 'Fantasy'],
+    },
+  },
+};
+
+export const Default = (args: any) => <MediaDisplay {...args} />;