diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 17ef772..3d90044 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -1,69 +1,161 @@
-import React from 'react';
-import {Drawer} from "expo-router/drawer";
-import {useSignOut} from "@/hooks/firebase/useSignOut";
-import {DrawerContentScrollView, DrawerItem, DrawerItemList} from "@react-navigation/drawer";
+import React from "react";
+import { Drawer } from "expo-router/drawer";
+import { useSignOut } from "@/hooks/firebase/useSignOut";
+import {
+  DrawerContentScrollView,
+  DrawerItem,
+  DrawerItemList,
+} from "@react-navigation/drawer";
+import { Button, View, Text } from "react-native-ui-lib";
+import { StyleSheet } from "react-native";
+import Feather from "@expo/vector-icons/Feather";
+import DrawerButton from "@/components/shared/DrawerButton";
+import {
+  AntDesign,
+  FontAwesome6,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
 
 export default function TabLayout() {
-    const {mutateAsync: signOut} = useSignOut()
+  const { mutateAsync: signOut } = useSignOut();
 
-    return (
-        <Drawer
-            initialRouteName={"index"}
-            screenOptions={{
-                headerShown: true,
-            }}
-            drawerContent={props => {
-                return (
-                    <DrawerContentScrollView {...props}>
-                        <DrawerItemList {...props} />
-                        <DrawerItem label="Logout" onPress={() => signOut()}/>
-                    </DrawerContentScrollView>
-                )
-            }}
-        >
-            <Drawer.Screen
-                name="index"
-                options={{
-                    drawerLabel: "Calendar",
-                    title: "Calendar",
-                }}
+  return (
+    <Drawer
+      initialRouteName={"index"}
+      screenOptions={{
+        headerShown: true,
+        drawerStyle: { width: "90%", backgroundColor: "#f9f8f7" },
+      }}
+      drawerContent={(props) => {
+        return (
+          <DrawerContentScrollView {...props}>
+            <View centerH centerV margin-30>
+              <Text text50>Welcome to Kali</Text>
+            </View>
+            <View style={{ flexDirection: "row", paddingHorizontal: 30 }}>
+              <View style={{ flex: 1, paddingRight: 5 }}>
+                <DrawerButton
+                  title={"Calendar"}
+                  color="rgb(7, 184, 199)"
+                  bgColor={"rgb(231, 248, 250)"}
+                  pressFunc={() => props.navigation.navigate("calendar")}
+                  icon={
+                    <Feather
+                      name="calendar"
+                      size={30}
+                      color="rgb(7, 184, 199)"
+                    />
+                  }
+                />
+                <DrawerButton
+                  color="#e0ca03"
+                  title={"Brain Dump"}
+                  bgColor={"#fffacb"}
+                  pressFunc={() => props.navigation.navigate("brain_dump")}
+                  icon={<AntDesign name="book" size={30} color="#e0ca03" />}
+                />
+                <DrawerButton
+                  color="#50be0c"
+                  title={"Groceries"}
+                  bgColor={"#eef9e7"}
+                  pressFunc={() => props.navigation.navigate("grocery")}
+                  icon={
+                    <MaterialCommunityIcons
+                      name="food-apple-outline"
+                      size={30}
+                      color="#50be0c"
+                    />
+                  }
+                />
+              </View>
+              <View style={{ flex: 1 }}>
+                <DrawerButton
+                  color="#fd1775"
+                  title={"My Reminders"}
+                  bgColor={"#ffe8f2"}
+                  pressFunc={() => props.navigation.navigate("reminders")}
+                  icon={
+                    <FontAwesome6
+                      name="clock-rotate-left"
+                      size={28}
+                      color="#fd1775"
+                    />
+                  }
+                />
+                <DrawerButton
+                  color="#8005eb"
+                  title={"To Dos"}
+                  bgColor={"#f3e6fd"}
+                  pressFunc={() => props.navigation.navigate("todos")}
+                  icon={
+                    <AntDesign name="checkcircleo" size={30} color="#8005eb" />
+                  }
+                />
+                <DrawerItem label="Logout" onPress={() => signOut()} />
+              </View>
+            </View>
+            <Button
+              label={"Manage Settings"}
+              backgroundColor="white"
+              color="black"
+              paddingV-30
+              marginH-30
+              borderRadius={15}
             />
-            <Drawer.Screen
-                name="calendar"
-                options={{
-                    drawerLabel: "Calendar",
-                    title: "Calendar",
-                    drawerItemStyle: {display: "none"}
-                }}
-            />
-            <Drawer.Screen
-                name="brain_dump"
-                options={{
-                    drawerLabel: "Brain Dump",
-                    title: "Brain Dump",
-                }}
-            />
-            <Drawer.Screen
-                name="grocery"
-                options={{
-                    drawerLabel: "Grocery",
-                    title: "Grocery",
-                }}
-            />
-            <Drawer.Screen
-                name="reminders"
-                options={{
-                    drawerLabel: "Reminders",
-                    title: "Reminders",
-                }}
-            />
-            <Drawer.Screen
-                name="todos"
-                options={{
-                    drawerLabel: "To-Do",
-                    title: "To-Do",
-                }}
-            />
-        </Drawer>
-    );
+          </DrawerContentScrollView>
+        );
+      }}
+    >
+      <Drawer.Screen
+        name="index"
+        options={{
+          drawerLabel: "Calendar",
+          title: "Calendar",
+        }}
+      />
+      <Drawer.Screen
+        name="calendar"
+        options={{
+          drawerLabel: "Calendar",
+          title: "Calendar",
+          drawerItemStyle: { display: "none" },
+        }}
+      />
+      <Drawer.Screen
+        name="brain_dump"
+        options={{
+          drawerLabel: "Brain Dump",
+          title: "Brain Dump",
+        }}
+      />
+      <Drawer.Screen
+        name="grocery"
+        options={{
+          drawerLabel: "Grocery",
+          title: "Grocery",
+        }}
+      />
+      <Drawer.Screen
+        name="reminders"
+        options={{
+          drawerLabel: "Reminders",
+          title: "Reminders",
+        }}
+      />
+      <Drawer.Screen
+        name="todos"
+        options={{
+          drawerLabel: "To-Do",
+          title: "To-Do",
+        }}
+      />
+    </Drawer>
+  );
 }
+
+const styles = StyleSheet.create({
+  square: {
+    width: "100%",
+    aspectRatio: 1, // This ensures the height matches the width, creating a square
+  },
+});
diff --git a/components/shared/DrawerButton.tsx b/components/shared/DrawerButton.tsx
new file mode 100644
index 0000000..6535ebe
--- /dev/null
+++ b/components/shared/DrawerButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, View, Text } from "react-native-ui-lib";
+interface IDrawerButtonProps {
+  bgColor: string;
+  color: string;
+  pressFunc: () => void;
+  icon: React.ReactNode;
+  title: string;
+}
+const DrawerButton = (props: IDrawerButtonProps) => {
+  return (
+    <Button
+      onPress={props.pressFunc}
+      label={props.title}
+      labelStyle={{fontSize: 14}}
+      color={props.color}
+      backgroundColor="white"
+      iconSource={() => (
+        <View
+          backgroundColor={props.bgColor}
+          width={60}
+          height={60}
+          style={{ borderRadius: 50 }}
+          centerV
+          centerH
+        >
+          {props.icon}
+        </View>
+      )}
+      style={{ aspectRatio: 1, borderRadius: 15, marginBottom: 12, flexDirection: 'column', justifyContent: "space-between", paddingVertical: 15 }}
+    >
+    </Button>
+  );
+};
+
+export default DrawerButton;