diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 2498eede7..0706942b8 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -13,7 +13,7 @@ import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
 import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
-import CalendarComponent from '../calendar/CalendarComponent';
+import CalendarComponent from '../modules/calendar/CalendarModule';
 
 const HEADER_HEIGHT = 60;
 
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index bccde5ef1..5e4d45cdd 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -1,7 +1,7 @@
 import { AppShell, Aside, Center, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import CalendarComponent from '../calendar/CalendarComponent';
+import CalendarComponent from '../modules/calendar/CalendarModule';
 
 const useStyles = createStyles((theme) => ({
   main: {
diff --git a/components/calendar/CalendarComponent.story.tsx b/components/modules/calendar/CalendarComponent.story.tsx
similarity index 70%
rename from components/calendar/CalendarComponent.story.tsx
rename to components/modules/calendar/CalendarComponent.story.tsx
index f44a9ec4b..678e7ccdf 100644
--- a/components/calendar/CalendarComponent.story.tsx
+++ b/components/modules/calendar/CalendarComponent.story.tsx
@@ -1,4 +1,4 @@
-import CalendarComponent from './CalendarComponent';
+import CalendarComponent from './CalendarModule';
 
 export default {
   title: 'Calendar component',
diff --git a/components/calendar/CalendarComponent.tsx b/components/modules/calendar/CalendarModule.tsx
similarity index 90%
rename from components/calendar/CalendarComponent.tsx
rename to components/modules/calendar/CalendarModule.tsx
index 58c7c52ca..ac8dcc5a8 100644
--- a/components/calendar/CalendarComponent.tsx
+++ b/components/modules/calendar/CalendarModule.tsx
@@ -3,11 +3,19 @@ import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
-import { useConfig } from '../../tools/state';
+import { useConfig } from '../../../tools/state';
+import { CalendarIcon } from '@modulz/radix-icons';
+import { MHPModule } from '../modules';
+
+export const CalendarModule: MHPModule = {
+  title: 'Calendar',
+  description: 'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
+  icon: CalendarIcon,
+  component: CalendarComponent,
+};
 
 export default function CalendarComponent(props: any) {
   const { config } = useConfig();
-  const [opened, setOpened] = useState(false);
   const [sonarrMedias, setSonarrMedias] = useState([] as any);
   const [radarrMedias, setRadarrMedias] = useState([] as any);
 
diff --git a/components/calendar/MediaDisplay.story.tsx b/components/modules/calendar/MediaDisplay.story.tsx
similarity index 100%
rename from components/calendar/MediaDisplay.story.tsx
rename to components/modules/calendar/MediaDisplay.story.tsx
diff --git a/components/calendar/MediaDisplay.tsx b/components/modules/calendar/MediaDisplay.tsx
similarity index 100%
rename from components/calendar/MediaDisplay.tsx
rename to components/modules/calendar/MediaDisplay.tsx
diff --git a/components/calendar/mediaExample.ts b/components/modules/calendar/mediaExample.ts
similarity index 100%
rename from components/calendar/mediaExample.ts
rename to components/modules/calendar/mediaExample.ts
diff --git a/components/modules/modules.tsx b/components/modules/modules.tsx
new file mode 100644
index 000000000..11da5b84e
--- /dev/null
+++ b/components/modules/modules.tsx
@@ -0,0 +1,11 @@
+// This interface is to be used in all the modules of the project
+// Each module should have its own interface and call the following function:
+// TODO: Add a function to register a module
+// Note: Maybe use context to keep track of the modules
+export interface MHPModule {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  component: React.ComponentType;
+  props?: any;
+}