diff --git a/client/app.json b/client/app.json
index 69e66da8b..cc2c81b15 100644
--- a/client/app.json
+++ b/client/app.json
@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "34D1BF"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -27,6 +25,7 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
+    "newArchEnabled": true,
     "plugins": [
       "expo-router",
       [
diff --git a/client/app/components/chat/ChatScreenFooter.tsx b/client/app/components/chat/ChatScreenFooter.tsx
index 93f1a9f79..3495949e9 100644
--- a/client/app/components/chat/ChatScreenFooter.tsx
+++ b/client/app/components/chat/ChatScreenFooter.tsx
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: Dimensions.get("window").width * 0.058,
     marginHorizontal: Dimensions.get("window").width * 0.005,
-    marginBottom: Platform.OS === "ios" ? 0 : 5,
+    marginBottom: 3,
     minHeight: Dimensions.get("window").width * 0.113,
     maxHeight: Dimensions.get("window").width * 0.3,
   },
diff --git a/client/app/components/chat/NearbyHeader.tsx b/client/app/components/chat/NearbyHeader.tsx
index f9b61f9a2..03b8db8b2 100644
--- a/client/app/components/chat/NearbyHeader.tsx
+++ b/client/app/components/chat/NearbyHeader.tsx
@@ -9,17 +9,24 @@ import {
 } from "react-native";
 import { ChevronLeft } from "react-native-feather";
 
-export const NearbyHeader: React.FC = () => {
+interface NearbyHeaderProps {
+  onClick: () => void;
+}
+
+export const NearbyHeader: React.FC<NearbyHeaderProps> = ({ onClick }) => {
   return (
     <View style={styles.nearbyContainer}>
       <Text style={styles.nearbyText}>Nearby</Text>
-      <View style={styles.iconContainer}>
-        <Image
-          style={styles.peopleIcon}
-          source={require("../../../assets/icons/misc/nearby_icon.png")}
-        />
-        <Text style={styles.countText}>{5}</Text>
-      </View>
+      <TouchableOpacity onPress={onClick}>
+        <View style={styles.iconContainer}>
+          <Image
+            style={styles.peopleIcon}
+            source={require("../../../assets/icons/misc/nearby_icon.png")}
+          />
+
+          <Text style={styles.countText}>{5}</Text>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -40,6 +47,7 @@ const styles = StyleSheet.create({
     paddingRight: "5%",
     paddingLeft: "10%",
     gap: 10,
+    zIndex: 1,
   },
   nearbyText: {
     fontFamily: "Quicksand",
diff --git a/client/app/components/chat/NearbyUserDrawer.tsx b/client/app/components/chat/NearbyUserDrawer.tsx
new file mode 100644
index 000000000..058a752fb
--- /dev/null
+++ b/client/app/components/chat/NearbyUserDrawer.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, FlatList, Dimensions } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import NearbyHeader from "./NearbyHeader";
+import { Pressable } from "react-native";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+const NearbyUserDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const translateX = useSharedValue(SCREEN_WIDTH);
+
+  const toggleDrawer = () => {
+    translateX.value = isOpen
+      ? withTiming(SCREEN_WIDTH, {
+          duration: 300, // Duration in milliseconds
+          easing: Easing.out(Easing.ease), // Smooth easing out
+        })
+      : withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease), // Smooth easing out
+        });
+    setIsOpen(!isOpen);
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const nearbyUsers = ["Alice", "Bob", "Charlie", "Diana", "Eve"]; // Example names
+
+  return (
+    <View style={styles.container}>
+      <NearbyHeader onClick={toggleDrawer} />
+      {/* Overlay and Drawer */}
+      {isOpen && <Pressable style={styles.overlay} onPress={toggleDrawer} />}
+      <Animated.View style={[styles.drawer, animatedStyle]}>
+        <Text style={styles.headerText}>Nearby Users</Text>
+        <FlatList
+          data={nearbyUsers}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item }) => <Text style={styles.name}>{item}</Text>}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    height: Dimensions.get("screen").height,
+    flexDirection: "column",
+    alignItems: "center",
+    position: "absolute",
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.15)",
+    zIndex: 1,
+  },
+  drawer: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    width: SCREEN_WIDTH * 0.6,
+    height: "100%",
+    backgroundColor: "#fff",
+    borderLeftWidth: 1,
+    borderLeftColor: "#ddd",
+    padding: 30,
+    shadowColor: "#000",
+    shadowOffset: { width: -2, height: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    zIndex: 2,
+    gap: 20,
+  },
+  headerText: {
+    fontFamily: "Quicksand",
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  name: {
+    fontSize: 18,
+    marginVertical: 10,
+  },
+});
+
+export default NearbyUserDrawer;
diff --git a/client/app/index.js b/client/app/index.js
index 3e0dc8607..f55f6536f 100644
--- a/client/app/index.js
+++ b/client/app/index.js
@@ -16,9 +16,7 @@ const App = () => {
 
   if (!initialized) return <Text>Loading...</Text>;
 
-  return (
-    isLoggedin ? <AppNavigator /> : <AuthNavigator />
-  );
+  return isLoggedin ? <AppNavigator /> : <AuthNavigator />;
 };
 
 export default App;
diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
index 7616b7925..1f9df6d55 100644
--- a/client/app/screens/chat/ChatScreen.tsx
+++ b/client/app/screens/chat/ChatScreen.tsx
@@ -19,6 +19,7 @@ import { useState, useEffect } from "react";
 import { useUser } from "@app/contexts/UserContext";
 import NearbyHeader from "@app/components/chat/NearbyHeader";
 import React from "react";
+import NearbyUserDrawer from "@app/components/chat/NearbyUserDrawer";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -91,7 +92,7 @@ const ChatScreen = () => {
           Platform.OS === "ios" ? screenHeight * 0.055 : 0
         }>
         <View style={styles.mainContainer}>
-          <NearbyHeader />
+          <NearbyUserDrawer />
           <View style={styles.chatContainer}>
             <MessageChannel messages={messages} />
           </View>
@@ -135,7 +136,6 @@ const styles = StyleSheet.create({
 
   footerContainer: {
     width: "95%",
-
     maxHeight: Dimensions.get("window").height * 0.15,
     display: "flex",
     flexDirection: "row",
diff --git a/client/gesture-handler.js b/client/gesture-handler.js
new file mode 100644
index 000000000..8a56fae40
--- /dev/null
+++ b/client/gesture-handler.js
@@ -0,0 +1,2 @@
+// Don't import react-native-gesture-handler on web
+// React docs say to keep this file to prevent errors in production even for mobile development
diff --git a/client/gesture-handler.native.js b/client/gesture-handler.native.js
new file mode 100644
index 000000000..7b0751605
--- /dev/null
+++ b/client/gesture-handler.native.js
@@ -0,0 +1,2 @@
+// Only import react-native-gesture-handler on native platforms
+import "react-native-gesture-handler";
diff --git a/client/package-lock.json b/client/package-lock.json
index 4062245b1..9d1b6b9ba 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -30,8 +30,10 @@
         "react": "18.3.1",
         "react-native": "0.76.2",
         "react-native-dotenv": "^3.4.11",
+        "react-native-drawer-layout": "^4.0.1",
         "react-native-feather": "^1.1.2",
         "react-native-gesture-handler": "~2.20.2",
+        "react-native-reanimated": "^3.16.1",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.0.0",
         "react-native-svg": "15.8.0",
@@ -1674,7 +1676,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
       "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -15898,6 +15899,20 @@
         "@babel/runtime": "^7.20.6"
       }
     },
+    "node_modules/react-native-drawer-layout": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-4.0.1.tgz",
+      "integrity": "sha512-395LypsQKNqcaMFHDj41jPXe3m9LbQRF7XKR1BzJh8B/kkc95OTZhwpXzMRBOLUiq4y4yL0loRzQtQRiruG+fQ==",
+      "dependencies": {
+        "use-latest-callback": "^0.2.1"
+      },
+      "peerDependencies": {
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 2.0.0",
+        "react-native-reanimated": ">= 2.0.0"
+      }
+    },
     "node_modules/react-native-feather": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/react-native-feather/-/react-native-feather-1.1.2.tgz",
@@ -15944,6 +15959,29 @@
         "react-native": ">=0.73.0"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.1.tgz",
+      "integrity": "sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ==",
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-class-properties": "^7.0.0-0",
+        "@babel/plugin-transform-classes": "^7.0.0-0",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-transform-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.12.0.tgz",
diff --git a/client/package.json b/client/package.json
index b883f4890..271eb5391 100644
--- a/client/package.json
+++ b/client/package.json
@@ -37,8 +37,10 @@
     "react": "18.3.1",
     "react-native": "0.76.2",
     "react-native-dotenv": "^3.4.11",
+    "react-native-drawer-layout": "^4.0.1",
     "react-native-feather": "^1.1.2",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.0.0",
     "react-native-svg": "15.8.0",