diff --git a/components/layout/Aside.tsx b/components/layout/Aside.tsx
new file mode 100644
index 000000000..f5367042f
--- /dev/null
+++ b/components/layout/Aside.tsx
@@ -0,0 +1,19 @@
+import { Aside as MantineAside, Space } from '@mantine/core';
+import CalendarComponent, { CalendarModule } from '../modules/calendar/CalendarModule';
+import DateComponent from '../modules/date/DateModule';
+import ModuleWrapper from '../modules/moduleWrapper';
+
+export default function Aside() {
+  return (
+    <MantineAside
+      height="100%"
+      hiddenBreakpoint="md"
+      hidden
+      width={{
+        base: 'auto',
+      }}
+    >
+			<ModuleWrapper module={CalendarModule} />
+    </MantineAside>
+  );
+}
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index 5e4d45cdd..303d647b5 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -1,7 +1,10 @@
-import { AppShell, Aside, Center, createStyles } from '@mantine/core';
+import { AppShell, Center, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import CalendarComponent from '../modules/calendar/CalendarModule';
+import DateComponent from '../modules/date/DateModule';
+import Aside from './Aside';
+import Navbar from './Navbar';
 
 const useStyles = createStyles((theme) => ({
   main: {
@@ -15,18 +18,8 @@ export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
   return (
     <AppShell
-      aside={
-        <Aside
-          height="auto"
-          hiddenBreakpoint="md"
-          hidden
-          width={{
-            base: 'auto',
-          }}
-        >
-          <CalendarComponent />
-        </Aside>
-      }
+      navbar={<Navbar />}
+      aside={<Aside />}
       header={<Header links={[]} />}
       footer={<Footer links={[]} />}
     >
diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
new file mode 100644
index 000000000..48c749474
--- /dev/null
+++ b/components/layout/Navbar.tsx
@@ -0,0 +1,17 @@
+import { Navbar as MantineNavbar } from '@mantine/core';
+import DateComponent, { DateModule } from '../modules/date/DateModule';
+import ModuleWrapper from '../modules/moduleWrapper';
+export default function Navbar() {
+  return (
+    <MantineNavbar
+      height="100%"
+      hiddenBreakpoint="md"
+      hidden
+      width={{
+        base: 'auto',
+      }}
+    >
+      <ModuleWrapper module={DateModule} />
+    </MantineNavbar>
+  );
+}