diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 7faff1d..27fa348 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
-import {Drawer} from "expo-router/drawer";
-import {useSignOut} from "@/hooks/firebase/useSignOut";
-import {DrawerContentScrollView,} from "@react-navigation/drawer";
-import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
-import {ImageBackground, StyleSheet} from "react-native";
+import { Drawer } from "expo-router/drawer";
+import { useSignOut } from "@/hooks/firebase/useSignOut";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
+import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
+import { ImageBackground, StyleSheet } from "react-native";
 import DrawerButton from "@/components/shared/DrawerButton";
 import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@@ -11,107 +11,114 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
 import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
-import {MaterialIcons} from "@expo/vector-icons";
-import {useSetAtom} from "jotai";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useSetAtom } from "jotai";
 import {
-    isFamilyViewAtom,
-    settingsPageIndex,
-    toDosPageIndex,
-    userSettingsView,
+  isFamilyViewAtom,
+  settingsPageIndex,
+  toDosPageIndex,
+  userSettingsView,
 } from "@/components/pages/calendar/atoms";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import Constants from "expo-constants";
 import * as Device from "expo-device";
 import { DeviceType } from "expo-device";
+import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
 
 export default function TabLayout() {
-    const {mutateAsync: signOut} = useSignOut();
-    const setIsFamilyView = useSetAtom(isFamilyViewAtom);
-    const setPageIndex = useSetAtom(settingsPageIndex);
-    const setUserView = useSetAtom(userSettingsView);
-    const setToDosIndex = useSetAtom(toDosPageIndex);
+  const { mutateAsync: signOut } = useSignOut();
+  const setIsFamilyView = useSetAtom(isFamilyViewAtom);
+  const setPageIndex = useSetAtom(settingsPageIndex);
+  const setUserView = useSetAtom(userSettingsView);
+  const setToDosIndex = useSetAtom(toDosPageIndex);
 
-    return (
-        <Drawer
-            initialRouteName={"index"}
-            detachInactiveScreens
-            screenOptions={({ navigation }) => ({
-                headerShown: true,
-                headerRight: () =>
-          Device.deviceType === DeviceType.TABLET ? (
-            <ViewSwitch navigation={navigation} />
-          ) : (
-            <></>
-          ),
+  return (
+    <Drawer
+      initialRouteName={"index"}
+      detachInactiveScreens
+      screenOptions={({ navigation, route }) => ({
+        headerShown: true,
+        headerRight: () => {
+          // Only show ViewSwitch on calendar and todos pages
+          const showViewSwitch = ["calendar", "todos", "index"].includes(
+            route.name
+          );
+          return Device.deviceType === DeviceType.TABLET && showViewSwitch ? (
+            <View marginR-16>
+              <ViewSwitch navigation={navigation} />
+            </View>
+          ) : null;
+        },
+        headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
         drawerStyle: {
-                    width: "90%",
-                    backgroundColor: "#f9f8f7",
-                    height: "100%",
-                },
-            })}
-            drawerContent={(props) => {
-                return (
-                    <DrawerContentScrollView {...props} style={{}}>
-                        <View centerV marginH-30 marginT-20 marginB-20 row>
-                            <ImageBackground
-                                source={require("../../assets/images/splash.png")}
-                                style={{
-                                    backgroundColor: "transparent",
-                                    height: 51.43,
-                                    aspectRatio: 1,
-                                    marginRight: 8,
-                                }}
-                            />
-                            <Text style={styles.title}>Welcome to Cally</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");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavCalendarIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#50be0c"
-                                    title={"Groceries"}
-                                    bgColor={"#eef9e7"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("grocery");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavGroceryIcon/>}/>
-                                <DrawerButton
-                                    color="#ea156d"
-                                    title={"Feedback"}
-                                    bgColor={"#fdedf4"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("feedback");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<FeedbackNavIcon/>}
-                                />
-                            </View>
-                            <View style={{flex: 1}}>
-                                {/*<DrawerButton
+          width: "90%",
+          backgroundColor: "#f9f8f7",
+          height: "100%",
+        },
+      })}
+      drawerContent={(props) => {
+        return (
+          <DrawerContentScrollView {...props} style={{}}>
+            <View centerV marginH-30 marginT-20 marginB-20 row>
+              <ImageBackground
+                source={require("../../assets/images/splash.png")}
+                style={{
+                  backgroundColor: "transparent",
+                  height: 51.43,
+                  aspectRatio: 1,
+                  marginRight: 8,
+                }}
+              />
+              <Text style={styles.title}>Welcome to Cally</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");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavCalendarIcon />}
+                />
+                <DrawerButton
+                  color="#50be0c"
+                  title={"Groceries"}
+                  bgColor={"#eef9e7"}
+                  pressFunc={() => {
+                    props.navigation.navigate("grocery");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavGroceryIcon />}
+                />
+                <DrawerButton
+                  color="#ea156d"
+                  title={"Feedback"}
+                  bgColor={"#fdedf4"}
+                  pressFunc={() => {
+                    props.navigation.navigate("feedback");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<FeedbackNavIcon />}
+                />
+              </View>
+              <View style={{ flex: 1 }}>
+                {/*<DrawerButton
                   color="#fd1775"
                   title={"My Reminders"}
                   bgColor={"#ffe8f2"}
@@ -124,169 +131,175 @@ export default function TabLayout() {
                     />
                   }
                 />*/}
-                                <DrawerButton
-                                    color="#8005eb"
-                                    title={"To Do's"}
-                                    bgColor={"#f3e6fd"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("todos");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavToDosIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#e0ca03"
-                                    title={"Brain Dump"}
-                                    bgColor={"#fffacb"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("brain_dump");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavBrainDumpIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#e0ca03"
-                                    title={"Notifications"}
-                                    bgColor={"#ffdda1"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("notifications");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<Ionicons name="notifications-outline" size={24} color={"#ffa200"} />}
-                                />
-                            </View>
-                        </View>
-                        <Button
-                            onPress={() => {
-                                props.navigation.navigate("settings");
-                                setPageIndex(0);
-                                setToDosIndex(0);
-                                setUserView(true);
-                                setIsFamilyView(false);
-                            }}
-                            label={"Manage Settings"}
-                            labelStyle={styles.label}
-                            iconSource={() => (
-                                <View
-                                    backgroundColor="#ededed"
-                                    width={60}
-                                    height={60}
-                                    style={{borderRadius: 50}}
-                                    marginR-10
-                                    centerV
-                                    centerH
-                                >
-                                    <NavSettingsIcon/>
-                                </View>
-                            )}
-                            backgroundColor="white"
-                            color="#464039"
-                            paddingV-30
-                            marginH-30
-                            borderRadius={18.55}
-                            style={{elevation: 0}}
-                        />
+                <DrawerButton
+                  color="#8005eb"
+                  title={"To Do's"}
+                  bgColor={"#f3e6fd"}
+                  pressFunc={() => {
+                    props.navigation.navigate("todos");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavToDosIcon />}
+                />
+                <DrawerButton
+                  color="#e0ca03"
+                  title={"Brain Dump"}
+                  bgColor={"#fffacb"}
+                  pressFunc={() => {
+                    props.navigation.navigate("brain_dump");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavBrainDumpIcon />}
+                />
+                <DrawerButton
+                  color="#e0ca03"
+                  title={"Notifications"}
+                  bgColor={"#ffdda1"}
+                  pressFunc={() => {
+                    props.navigation.navigate("notifications");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={
+                    <Ionicons
+                      name="notifications-outline"
+                      size={24}
+                      color={"#ffa200"}
+                    />
+                  }
+                />
+              </View>
+            </View>
+            <Button
+              onPress={() => {
+                props.navigation.navigate("settings");
+                setPageIndex(0);
+                setToDosIndex(0);
+                setUserView(true);
+                setIsFamilyView(false);
+              }}
+              label={"Manage Settings"}
+              labelStyle={styles.label}
+              iconSource={() => (
+                <View
+                  backgroundColor="#ededed"
+                  width={60}
+                  height={60}
+                  style={{ borderRadius: 50 }}
+                  marginR-10
+                  centerV
+                  centerH
+                >
+                  <NavSettingsIcon />
+                </View>
+              )}
+              backgroundColor="white"
+              color="#464039"
+              paddingV-30
+              marginH-30
+              borderRadius={18.55}
+              style={{ elevation: 0 }}
+            />
 
-                        <Button
-                            size={ButtonSize.large}
-                            marginH-10
-                            marginT-12
-                            paddingV-15
-                            style={{
-                                marginTop: 50,
-                                backgroundColor: "transparent",
-                                borderWidth: 1.3,
-                                borderColor: "#fd1775",
-                            }}
-                            label="Sign out of Cally"
-                            color="#fd1775"
-                            labelStyle={styles.signOut}
-                            onPress={() => signOut()}
-                        />
-                    </DrawerContentScrollView>
-                );
-            }}
-        >
-            <Drawer.Screen
-                name="index"
-                options={{
-                    drawerLabel: "Calendar",
-                    title: "Calendar",
-                }}
+            <Button
+              size={ButtonSize.large}
+              marginH-10
+              marginT-12
+              paddingV-15
+              style={{
+                marginTop: 50,
+                backgroundColor: "transparent",
+                borderWidth: 1.3,
+                borderColor: "#fd1775",
+              }}
+              label="Sign out of Cally"
+              color="#fd1775"
+              labelStyle={styles.signOut}
+              onPress={() => signOut()}
             />
-            <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="settings"
-                options={{
-                    drawerLabel: "Settings",
-                    title: "Settings",
-                }}
-            />
-            <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-Dos",
-                }}
-            />
-            <Drawer.Screen
-                name="notifications"
-                options={{
-                    drawerLabel: "Notifications",
-                    title: "Notifications",
-                }}
-            />
-            <Drawer.Screen
-                name="feedback"
-                options={{drawerLabel: "Feedback", title: "Feedback"}}
-            />
-        </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="settings"
+        options={{
+          drawerLabel: "Settings",
+          title: "Settings",
+        }}
+      />
+      <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-Dos",
+        }}
+      />
+      <Drawer.Screen
+        name="notifications"
+        options={{
+          drawerLabel: "Notifications",
+          title: "Notifications",
+        }}
+      />
+      <Drawer.Screen
+        name="feedback"
+        options={{ drawerLabel: "Feedback", title: "Feedback" }}
+      />
+    </Drawer>
+  );
 }
 
 const styles = StyleSheet.create({
-    signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
-    label: {fontFamily: "Poppins_400Medium", fontSize: 15},
-    title: {
-        fontSize: 26.13,
-        fontFamily: "Manrope_600SemiBold",
-        color: "#262627",
-    },
+  signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
+  label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
+  title: {
+    fontSize: 26.13,
+    fontFamily: "Manrope_600SemiBold",
+    color: "#262627",
+  },
 });
diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx
index 8bbbc71..e8120f2 100644
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@@ -30,7 +30,7 @@ export default function Screen() {
   }, [setRefreshTrigger]);
   
   return (
-    <View style={{ backgroundColor: "white" }}>
+    <>
       {Device.deviceType === DeviceType.TABLET ? (
         <TabletCalendarPage />
       ) : (
@@ -58,6 +58,6 @@ export default function Screen() {
       <CalendarPage />
     </ScrollView>
       )}
-    </View>
+    </>
   );
 }
diff --git a/app/(unauth)/index.tsx b/app/(unauth)/index.tsx
index 25d0cd0..8990779 100644
--- a/app/(unauth)/index.tsx
+++ b/app/(unauth)/index.tsx
@@ -2,6 +2,8 @@ import {SafeAreaView} from "react-native-safe-area-context";
 import {Button, Image, Text, View} from "react-native-ui-lib";
 import React from "react";
 import {useRouter} from "expo-router";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 export default function Screen() {
     const router = useRouter()
@@ -25,7 +27,7 @@ export default function Screen() {
 
                 <View flexG/>
 
-                <View width={"100%"}>
+                <View width={"100%"} centerH>
                     <Button
                         label="Continue"
                         marginT-50
@@ -34,7 +36,7 @@ export default function Screen() {
                             fontSize: 16,
                         }}
                         onPress={() => router.push("/(unauth)/get_started")}
-                        style={{height: 50}}
+                        style={{height: 50, width: Device.deviceType === DeviceType.TABLET ? 629 : "100%"}}
                         backgroundColor="#fd1775"
                     />
                 </View>
diff --git a/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx b/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
index 68cb0a1..589e68f 100644
--- a/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
+++ b/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
@@ -32,6 +32,7 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
     flex: 1,
+    flexDirection: 'row',
     borderTopColor: "#a9a9a9",
     borderTopWidth: 1,
   },
diff --git a/components/pages/settings/UserSettings.tsx b/components/pages/settings/UserSettings.tsx
index bb908dd..8d9b093 100644
--- a/components/pages/settings/UserSettings.tsx
+++ b/components/pages/settings/UserSettings.tsx
@@ -1,131 +1,139 @@
-import {FloatingButton, Text, TouchableOpacity, View,} from "react-native-ui-lib";
-import React, {useState} from "react";
-import {Ionicons} from "@expo/vector-icons";
-import {ScrollView, StyleSheet} from "react-native";
+import {
+  Button,
+  FloatingButton,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
+import React, { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { Dimensions, ScrollView, StyleSheet } from "react-native";
 import MyProfile from "./user_settings_views/MyProfile";
 import MyGroup from "./user_settings_views/MyGroup";
-import {useAtom, useSetAtom} from "jotai";
-import {settingsPageIndex, userSettingsView} from "../calendar/atoms";
+import { useAtom, useSetAtom } from "jotai";
+import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
 import PlusIcon from "@/assets/svgs/PlusIcon";
 
 const UserSettings = () => {
-    const setPageIndex = useSetAtom(settingsPageIndex);
-    const [userView, setUserView] = useAtom(userSettingsView);
-    const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
+  const setPageIndex = useSetAtom(settingsPageIndex);
+  const [userView, setUserView] = useAtom(userSettingsView);
+  const [onNewUserClick, setOnNewUserClick] = useState<boolean>(false);
 
-    return (
-        <View flexG>
-            <ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
-                <TouchableOpacity
-                    onPress={() => {
-                        setPageIndex(0);
-                        setUserView(true);
-                    }}
+  return (
+    <View flexG>
+      <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
+        <TouchableOpacity
+          onPress={() => {
+            setPageIndex(0);
+            setUserView(true);
+          }}
+        >
+          <View row marginT-20 marginB-20 marginL-20 centerV>
+            <Ionicons
+              name="chevron-back"
+              size={14}
+              color="#979797"
+              style={{ paddingBottom: 3 }}
+            />
+            <Text
+              style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
+              color="#979797"
+            >
+              Return to main settings
+            </Text>
+          </View>
+        </TouchableOpacity>
+        <View marginH-26 flexG style={{ minHeight: "90%" }}>
+          <Text text60R marginB-25>
+            User Management
+          </Text>
+          <View style={styles.buttonSwitch} spread row>
+            <TouchableOpacity
+              onPress={() => setUserView(true)}
+              centerV
+              centerH
+              style={userView == true ? styles.btnSelected : styles.btnNot}
+            >
+              <View>
+                <Text
+                  style={styles.btnTxt}
+                  color={userView ? "white" : "black"}
                 >
-                    <View row marginT-20 marginB-20 marginL-20 centerV>
-                        <Ionicons
-                            name="chevron-back"
-                            size={14}
-                            color="#979797"
-                            style={{paddingBottom: 3}}
-                        />
-                        <Text
-                            style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
-                            color="#979797"
-                        >
-                            Return to main settings
-                        </Text>
-                    </View>
-                </TouchableOpacity>
-                <View marginH-26 flexG style={{minHeight: "90%"}}>
-                    <Text text60R marginB-25>
-                        User Management
-                    </Text>
-                    <View style={styles.buttonSwitch} spread row>
-                        <TouchableOpacity
-                            onPress={() => setUserView(true)}
-                            centerV
-                            centerH
-                            style={userView == true ? styles.btnSelected : styles.btnNot}
-                        >
-                            <View>
-                                <Text
-                                    style={styles.btnTxt}
-                                    color={userView ? "white" : "black"}
-                                >
-                                    My Profile
-                                </Text>
-                            </View>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            onPress={() => setUserView(false)}
-                            centerV
-                            centerH
-                            style={userView == false ? styles.btnSelected : styles.btnNot}
-                        >
-                            <View>
-                                <Text
-                                    style={styles.btnTxt}
-                                    color={!userView ? "white" : "black"}
-                                >
-                                    My Group
-                                </Text>
-                            </View>
-                        </TouchableOpacity>
-                    </View>
-                    {userView && <MyProfile/>}
-                    {!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
-                </View>
-            </ScrollView>
-            {!userView && (
-                <FloatingButton
-                    fullWidth
-                    hideBackgroundOverlay
-                    visible
-                    button={{
-                        label: " Add a user device",
-                        iconSource: () => <PlusIcon height={13} width={14}/>,
-                        onPress: () => setOnNewUserClick(true),
-                        style: styles.bottomButton,
-                        labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
-                    }}
-                />
-            )}
+                  My Profile
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setUserView(false)}
+              centerV
+              centerH
+              style={userView == false ? styles.btnSelected : styles.btnNot}
+            >
+              <View>
+                <Text
+                  style={styles.btnTxt}
+                  color={!userView ? "white" : "black"}
+                >
+                  My Group
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+          {userView && <MyProfile />}
+          {!userView && (
+            <MyGroup
+              onNewUserClick={onNewUserClick}
+              setOnNewUserClick={setOnNewUserClick}
+            />
+          )}
         </View>
-    );
+      </ScrollView>
+      {!userView && (
+        <View marginH-28>
+          <Button
+            style={styles.bottomButton}
+            labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
+            label=" Add a user device"
+            iconSource={() => <PlusIcon height={13} width={14} />}
+            onPress={() => setOnNewUserClick(true)}
+          />
+        </View>
+      )}
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    bottomButton: {
-        position: "absolute",
-        bottom: 15,
-        marginHorizontal: 28,
-        width: 337,
-        backgroundColor: "#e8156c",
-        height: 53.26,
-    },
-    buttonSwitch: {
-        borderRadius: 50,
-        width: "100%",
-        backgroundColor: "#ebebeb",
-        height: 45,
-    },
-    btnSelected: {
-        backgroundColor: "#05a8b6",
-        height: "100%",
-        width: "50%",
-        borderRadius: 50,
-    },
-    btnTxt: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 15,
-    },
-    btnNot: {
-        height: "100%",
-        width: "50%",
-        borderRadius: 50,
-    },
-    title: {fontFamily: "Manrope_600SemiBold", fontSize: 18},
+  bottomButton: {
+    position: "absolute",
+    bottom: 15,
+    marginHorizontal: 0,
+    width: "100%",
+    backgroundColor: "#e8156c",
+    height: 53.26,
+  },
+  buttonSwitch: {
+    borderRadius: 50,
+    width: "100%",
+    backgroundColor: "#ebebeb",
+    height: 45,
+  },
+  btnSelected: {
+    backgroundColor: "#05a8b6",
+    height: "100%",
+    width: "50%",
+    borderRadius: 50,
+  },
+  btnTxt: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  btnNot: {
+    height: "100%",
+    width: "50%",
+    borderRadius: 50,
+  },
+  title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
 });
 
 export default UserSettings;