diff --git a/app.json b/app.json
index be40188..4f2a3df 100644
--- a/app.json
+++ b/app.json
@@ -1,5 +1,6 @@
 {
   "expo": {
+    "jsEngine": "hermes",
     "name": "caldav",
     "slug": "caldav",
     "version": "1.0.0",
diff --git a/app/Themes.tsx b/src/Themes.tsx
similarity index 100%
rename from app/Themes.tsx
rename to src/Themes.tsx
diff --git a/app/Chat.tsx b/src/app/Chat.tsx
similarity index 95%
rename from app/Chat.tsx
rename to src/app/Chat.tsx
index 376a285..c8743f1 100644
--- a/app/Chat.tsx
+++ b/src/app/Chat.tsx
@@ -1,8 +1,12 @@
 import { View, Text, FlatList, TextInput } from "react-native";
-import currentTheme from "./Themes";
+import currentTheme from "../Themes";
 import { useState } from "react";
+import Header from "../components/Header";
 
 // TODO: better shadows for everything
+// (maybe with extra library because of differences between android and ios)
+// TODO: max width for messages
+// TODO: create new messages
 
 type BubbleSide = "left" | "right";
 type ChatMessageProps = {
@@ -11,7 +15,7 @@ type ChatMessageProps = {
   height: number;
 };
 
-type messageData = {
+type MessageData = {
   id: string;
   side: BubbleSide;
   width: number;
@@ -28,7 +32,7 @@ const getRandomInt = (min: number, max: number) => {
 const randomWidth = () => getRandomInt(100, 400);
 const randomHeight = () => getRandomInt(50, 100);
 
-const messages: messageData[] = [
+const messages: MessageData[] = [
   // {{{
   {
     id: "1",
@@ -246,20 +250,6 @@ const Chat = () => {
       }}
     >
       <ChatHeader />
-      <View
-        className="h-2 bg-black"
-        style={{
-          shadowColor: "#000",
-          shadowOffset: {
-            width: 0,
-            height: 5,
-          },
-          shadowOpacity: 0.34,
-          shadowRadius: 6.27,
-
-          elevation: 10,
-        }}
-      />
       <FlatList
         inverted
         data={messages}
@@ -280,12 +270,7 @@ const Chat = () => {
 
 const ChatHeader = () => {
   return (
-    <View
-      className="flex flex-row items-center py-4"
-      style={{
-        backgroundColor: currentTheme.chatBot,
-      }}
-    >
+    <Header>
       <View
         className="ml-3 w-12 h-12 rounded-3xl border border-solid"
         style={{
@@ -294,7 +279,21 @@ const ChatHeader = () => {
         }}
       ></View>
       <Text className="text-lg pl-3">CalChat</Text>
-    </View>
+      <View
+        className="h-2 bg-black"
+        style={{
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 5,
+          },
+          shadowOpacity: 0.34,
+          shadowRadius: 6.27,
+
+          elevation: 10,
+        }}
+      />
+    </Header>
   );
 };
 
diff --git a/app/Hello_World.tsx b/src/app/Hello_World.tsx
similarity index 100%
rename from app/Hello_World.tsx
rename to src/app/Hello_World.tsx
diff --git a/app/_layout.tsx b/src/app/_layout.tsx
similarity index 83%
rename from app/_layout.tsx
rename to src/app/_layout.tsx
index ee0e86e..9a78701 100644
--- a/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -1,5 +1,5 @@
 import { Stack } from "expo-router";
-import "../global.css";
+import "../../global.css";
 
 export default function RootLayout() {
   return <Stack screenOptions={{ headerShown: false }} />;
diff --git a/app/index.tsx b/src/app/index.tsx
similarity index 61%
rename from app/index.tsx
rename to src/app/index.tsx
index 67a3cf9..691c873 100644
--- a/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import Chat from "./Chat";
+import Calender from "./Calender";
 
 export default function Index() {
   return (
-    <Chat />
+    // <Chat />
+    <Calender />
   );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..4fa5bf4
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,38 @@
+import { View } from "react-native";
+import currentTheme from "../Themes";
+import { ReactNode } from "react";
+
+type HeaderProps = {
+  children?: ReactNode;
+};
+
+const Header = (props: HeaderProps) => {
+  return (
+    <View>
+      <View
+        className="w-full h-32 flex flex-row items-center pt-10 pb-4"
+        style={{
+          backgroundColor: currentTheme.chatBot,
+        }}
+      >
+        {props.children}
+      </View>
+      <View
+        className="h-2 bg-black"
+        style={{
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 5,
+          },
+          shadowOpacity: 0.34,
+          shadowRadius: 6.27,
+
+          elevation: 10,
+        }}
+      />
+    </View>
+  );
+};
+
+export default Header;