diff --git a/frontend/App.js b/frontend/App.js
index 4e1bd0c..dce42bb 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -16,11 +16,23 @@ import Login from './app/screens/Login';
 import ForgotPassword from './app/screens/ForgotPassword';
 import SignupStepOne from './app/screens/signupStepOne';
 import SignupStepTwo from './app/screens/signupStepTwo';
-
+import CreateCommunity from './app/screens/CreateCommunity';
 
 const Stack = createNativeStackNavigator();
 const BottomTab = createBottomTabNavigator();
+const CommunityStack = createNativeStackNavigator();
 
+const CommunityStackGroup = () => {
+  return (
+    <CommunityStack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}>
+      <CommunityStack.Screen name="Community" component={Community} />
+      <CommunityStack.Screen name="CreateCommunity" component={CreateCommunity} />
+    </CommunityStack.Navigator>
+  );
+}
 const BottomTabGroup = () => {
   return (
     <BottomTab.Navigator
@@ -49,7 +61,7 @@ const BottomTabGroup = () => {
       <BottomTab.Screen name="Home" component={Home} />
       <BottomTab.Screen name="Tasks" component={Tasks} />
       <BottomTab.Screen name="Rebot" component={Rebot} />
-      <BottomTab.Screen name="Community" component={Community} />
+      <BottomTab.Screen name="Community" component={CommunityStackGroup} />
     </BottomTab.Navigator>
   );
 }
diff --git a/frontend/app/screens/CreateCommunity.js b/frontend/app/screens/CreateCommunity.js
new file mode 100644
index 0000000..e1e0180
--- /dev/null
+++ b/frontend/app/screens/CreateCommunity.js
@@ -0,0 +1,332 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, TextInput, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import * as ImagePicker from 'expo-image-picker';
+
+const CreateCommunity = () => {
+    // State management for form  inputs
+    const [communityName, setCommunityName] = useState('');
+    const [description, setDescription] = useState('');
+    const [selectedIcon, setSelectedIcon] = useState(null);
+    const [category, setCategory] = useState('');
+
+    const nameInputRef = useRef(null);
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        setTimeout(() => {
+            if(nameInputRef.current) {
+                nameInputRef.current.focus();
+            }
+        },100);
+    }, []);
+
+  // Function to handle icon selection
+  const selectIcon = async () => {
+    // Request permission to access media library
+    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
+
+    if (!permissionResult.granted) {
+      alert("Permission to access media library is required!");
+      return;
+    }
+
+    // Launch the image picker
+    const pickerResult = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1], // Square aspect ratio
+      quality: 1, // High quality
+    });
+
+    if (!pickerResult.canceled) {
+      // Set the selected image URI
+      setSelectedIcon(pickerResult.assets[0].uri);
+    }
+  };
+   
+   const handleCreateCommunity = () => {
+    // Validation checks for required fields
+    if (!communityName.trim()) {
+      alert("Please enter a name for your community");
+      return;
+    }
+    
+    if (!description.trim()) {
+      alert("Please enter a description for your community");
+      return;
+    }
+    
+    if (!category.trim()) {
+      alert("Please select a category for your community");
+      return;
+    }
+    
+    // Create community object with all form data
+       const community = {
+      name: communityName,
+      description: description,
+      icon: selectedIcon,
+      category: category,
+      createdAt: new Date().toISOString(),
+    };
+    
+    // Log new community details and navigate back
+    // In a real app, this would likely save to a database
+    console.log("Creating community:", community);
+    alert("Community created successfully!");
+    navigation.goBack();
+  };
+  return (
+    <SafeAreaView style={styles.container}>
+      <KeyboardAvoidingView 
+        behavior={Platform.OS === "ios" ? "padding" : "height"} 
+        style={styles.keyboardAvoidingView}
+      >
+        {/* Header Section with back button and title */}
+        <View style={styles.header}>
+          <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
+            <Text style={styles.backButtonText}>←</Text>
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>Create Community</Text>
+          <View style={styles.placeholder} />
+        </View>
+        
+        <ScrollView style={styles.scrollView}>
+          {/* Icon Selection Section */}
+          <View style={styles.iconSection}>
+            <TouchableOpacity onPress={selectIcon} style={styles.iconPicker}>
+              {selectedIcon ? (
+                <Image source={{ uri: selectedIcon }} style={styles.iconPreview} />
+              ) : (
+                <View style={styles.iconPlaceholder}>
+                  <Text style={styles.iconPlaceholderText}>Add Icon</Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          </View>
+          
+          {/* Community Name Input */}
+          <Text style={styles.inputLabel}>Community Name*</Text>
+          <TextInput
+            ref={nameInputRef}
+            style={styles.input}
+            placeholder="Enter community name"
+            value={communityName}
+            onChangeText={setCommunityName}
+            maxLength={50}
+          />
+          
+          {/* Description Input - Multiline text area */}
+          <Text style={styles.inputLabel}>Description*</Text>
+          <TextInput
+            style={styles.descriptionInput}
+            placeholder="What is this community about?"
+            value={description}
+            onChangeText={setDescription}
+            multiline
+            textAlignVertical="top"
+          />
+          
+          {/* Category Input */}
+          <Text style={styles.inputLabel}>Category*</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="E.g. Recovery, All adictions,only srceen addiction "
+            value={category}
+            onChangeText={setCategory}
+          />
+          
+          {/* Private Community option has been removed */}
+          
+          {/* Community Guidelines/Rules Section */}
+          <View style={styles.rulesSection}>
+            <Text style={styles.rulesTitle}>Community Guidelines</Text>
+            <Text style={styles.rulesText}>
+              • Be respectful and supportive to other members
+              {"\n"}• No spam or self-promotion
+              {"\n"}• Keep discussions relevant to the community purpose
+            </Text>
+          </View>
+        </ScrollView>
+        
+        {/* Create Button Section - Footer */}
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[
+              styles.createButton,
+              (!communityName.trim() || !description.trim() || !category.trim()) 
+                ? styles.createButtonDisabled 
+                : {}
+            ]}
+            onPress={handleCreateCommunity}
+            disabled={!communityName.trim() || !description.trim() || !category.trim()}
+          >
+            <Text style={styles.createButtonText}>Create Community</Text>
+          </TouchableOpacity>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};         
+
+// Styles definition and component export
+const styles = StyleSheet.create({
+  // Container and layout styles
+  container: { 
+    flex: 1, 
+    backgroundColor: "#fff"
+  },
+  keyboardAvoidingView: { 
+    flex: 1
+  },
+  header: { 
+    height: 60, 
+    borderBottomWidth: 1, 
+    borderBottomColor: "#E0E0E0", 
+    flexDirection: "row",
+    justifyContent: "space-between", 
+    alignItems: "center", 
+    paddingHorizontal: 16 
+  },
+  backButton: {
+    padding: 8,
+  },
+  backButtonText: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  headerTitle: { 
+    fontSize: 18, 
+    fontWeight: "bold" 
+  },
+  placeholder: {
+    width: 40,
+  },
+  scrollView: { 
+    flex: 1, 
+    padding: 16 
+  },
+
+  // Icon section styles
+  iconSection: {
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  iconPicker: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "#4CAF50",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  iconPreview: {
+    width: "100%",
+    height: "100%",
+  },
+  iconPlaceholder: {
+    backgroundColor: "#F2F2F2",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  iconPlaceholderText: {
+    fontSize: 14,
+    color: "#4CAF50",
+    textAlign: "center",
+  },
+
+  // Form input styles
+  inputLabel: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 8,
+    color: "#333",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  descriptionInput: {
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    minHeight: 100,
+    marginBottom: 16,
+  },
+
+  // Privacy section styles
+  privacySection: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#F8F8F8",
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 16,
+  },
+  privacyTextContainer: {
+    flex: 1,
+  },
+  privacyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  privacyDescription: {
+    fontSize: 14,
+    color: "#666",
+    marginTop: 4,
+  },
+
+  // Rules section styles
+  rulesSection: {
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 32,
+  },
+  rulesTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  rulesText: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: "#666",
+  },
+
+  // Footer and button styles
+  footer: {
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: "#E0E0E0",
+  },
+  createButton: {
+    backgroundColor: "#4CAF50",
+    borderRadius: 8,
+    paddingVertical: 14,
+    alignItems: "center",
+  },
+  createButtonDisabled: {
+    backgroundColor: "#BDBDBD",
+  },
+  createButtonText: {
+    color: "white",
+    fontWeight: "bold",
+    fontSize: 16,
+  },
+});
+
+export default CreateCommunity;
\ No newline at end of file
diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js
index b9214c4..131bfbc 100644
--- a/frontend/app/screens/tabs/Community.js
+++ b/frontend/app/screens/tabs/Community.js
@@ -1,140 +1,304 @@
-import React from "react";
-import { View, Image, StyleSheet, Text, TextInput } from "react-native";
+import React, { useState } from "react";
+import {
+  View,
+  Image,
+  StyleSheet,
+  Text,
+  TextInput,
+  ScrollView,
+  TouchableOpacity,
+} from "react-native";
 import Card from "../../fragments/card";
+import { useNavigation} from "@react-navigation/native";
+import AntDesign from '@expo/vector-icons/AntDesign';
 
 // Main community card(ReWire Community)
 export default function Community() {
-    
-    return (
-        <View style={{ padding: 10, borderRadius: 20 }}>
-            <View style={styles.searchContainer}>
-                <Image source={require('../../assets/search-icon.png')} style={styles.searchIcon} />
-                <TextInput
-                    style={styles.searchInput}
-                    placeholder="Search communities..."
-                    placeholderTextColor="grey"
-                    onChangeText={(text) => console.log("Searching for:", text)}
-                />
-            </View>
-            <Text style={styles.text}>Main Community</Text>
-            <Card onPress={() => console.log("Card Pressed")} style={styles.communitycard}>
-                <View style={styles.titleContainer}>
-                    <Image source={require('../../assets/rewire-logo.png')}
-                        style={styles.image} />
-                    <Card.Title>ReWire Community</Card.Title>
-                    
-                </View>
-            </Card>
-            <Text style={styles.text}>Joined Community</Text>
-            <Card onPress={() => console.log("Card Pressed")} style={styles.communitycard}>
-                <View style={styles.titleContainer}>
-                    <Image source={require('../../assets/habits.jpeg')}
-                        style={styles.image} />
-                    <Card.Title>Braking Habits</Card.Title>
-                    
-                </View>
-            </Card>
-            <Card onPress={() => console.log("Card Pressed")} style={styles.communitycard}>
-                <View style={styles.titleContainer}>
-                    <Image source={require('../../assets/freedom.jpeg')}
-                        style={styles.image} />
-                    <Card.Title>Fight For Freedom</Card.Title>
-                    
-                </View>
-            </Card>
-             <Text style={styles.text}>Suggestions</Text>
 
-             <Card onPress={() => console.log("Card Pressed")} style={styles.communitycard}>
-                <View style={styles.titleContainer}>
-                    <Image source={require('../../assets/rise.png')}
-                        style={styles.image} />
-                    <Card.Title>Rise from Darkness</Card.Title>
-                    
-                </View>
-            </Card>
-            <Card onPress={() => console.log("Card Pressed")}style={styles.communitycard}>
-                <View style={styles.titleContainer}>
-                    <Image source={require('../../assets/better future.jpeg')}
-                        style={styles.image} />
-                    <Card.Title>Better Future Together</Card.Title>
-                    
-                </View>
-            </Card>
-            <Card onPress={() => console.log("Create Community Pressed")} style={styles.CreateCommCard}>
-                <View style={styles.createCommContainer}>
-                    <Image source={require('../../assets/community-icon.png')}
-                    style = {styles.CommunityImage}/>
-                    <Text style = {styles.commmunityText}>Create Community</Text>
-                </View>
-            </Card>
-        </View>
-    );
-}
+  const navigation = useNavigation();
 
-// Card stylesheet
-const styles = StyleSheet.create({
-    searchContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: "#D9D9D6",
-        borderRadius: 30,
-        padding: 10,
-        marginBottom: 5,
-    },
-    searchIcon: {
-        width: 20,
-        height: 20,
-        marginRight: 10,
-    },
-    searchInput: {
-        flex: 1,
-        fontSize: 16,
+  const [joinedCommunities, setJoinedCommunities] = useState([
+    {
+      id: "0001",
+      name: 'Braking Habits',
+      image: require("../../assets/habits.jpeg"),
+      members: 100,
     },
-   
-    titleContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 30,     
+    {
+      id: "0002",
+      name: 'Fight For Freedom',
+      image: require("../../assets/freedom.jpeg"),
+      members: 67,
     },
+  ]);
 
-    communitycard: {
-        borderRadius: 30,
+  const [suggestedCommunities, setSuggestedCommunities] = useState([
+    {
+      id: "0003",
+      name: 'Rise from Darkness',
+      image: require("../../assets/rise.png"),
+      members: 45,
     },
-    image: {
-        width: 40,
-        height: 40,
-        borderRadius: 40,
-        borderColor: "green",
-        borderWidth: 2,  
-     },
-     text: {
-        color: "grey",
-        fontSize: 14,
-        paddingLeft: 5,
-        paddingBottom: 10,
-        textAlign: "left",
-     },
-    CreateCommCard: {
-        backgroundColor: '#D9D9D6',
-        padding: 10,
-        borderRadius: 45,
-        marginTop: 10,
+    {
+      id: "0004",
+      name: 'Better Future Together',
+      image: require("../../assets/better future.jpeg"),
+      members: 23,
     },
-    createCommContainer:{
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 10,
+    {
+      id: "0005",
+      name: 'Better Future Together',
+      image: require("../../assets/better future.jpeg"),
+      members: 23,
     },
-    CommunityImage: {
-        width: 50,
-        height: 50,
-        marginRight: 10,
-     },
-    commmunityText: {
-        color: "green",
-        fontSize: 18,
-        fontWeight: "bold",
-        paddingLeft: 5,
+  ]);
+
+  const [maincommunity, setMainCommunity] = useState([
+    {
+      id: "0000",
+      name: 'ReWire Community',
+      image: require("../../assets/rewire-logo.png"),
+      members: 200,
     },
+  ]);
+
+  const handleJoinCommunity = (community) => {
+    setJoinedCommunities([...joinedCommunities, community]);
+    setSuggestedCommunities(suggestedCommunities.filter(c => c.id !== community.id));
+  };
+
+  const handleLeaveCommunity = (community) => {
+    setJoinedCommunities(joinedCommunities.filter(c => c.id !== community.id));
+    setSuggestedCommunities([...suggestedCommunities, community]);
+  };
+
+  const communityCard = (item, section) => (
+    <Card
+      key={item.id}
+      onPress={() => console.log(item.name + " Card Pressed")}
+      style={styles.communitycard}
+    >
+      <View style={styles.cardRow}>
+        <View style={styles.leftContent}>
+          <Image
+            source={item.image}
+            style={styles.avatar}
+          />
+          <View style={styles.textBox}>
+            <Text style={styles.heading}>{item.name}</Text>
+            {item.members && <Text style={styles.members}>{item.members} members</Text>}
+          </View>
+        </View>
+        {section !== 'mainCommunity' && (
+          <TouchableOpacity
+            style={[
+              styles.button,
+              section === 'joinedCommunities' ? styles.greenBorder : styles.greenButton
+            ]}
+            onPress={(e) => {
+              e.stopPropagation();
+              section === 'joinedCommunities'
+                ? handleLeaveCommunity(item)
+                : handleJoinCommunity(item);
+            }}
+          >
+            <Text
+              style={[
+                styles.buttonText,
+                section === 'joinedCommunities' ? styles.greenText : styles.whiteText
+              ]}
+            >
+              {section === 'joinedCommunities' ? 'Joined' : 'Join'}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </Card>
+  );
+
+  return (
+    <View style={styles.container}>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContent}>
+
+        {/* Search bar */}
+        <View style={styles.searchBar}>
+          <Image
+            source={require("../../assets/search-icon.png")}
+            style={styles.searchIcon}
+          />
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search communities..."
+            placeholderTextColor="grey"
+            onChangeText={(text) => console.log("Searching for:", text)}
+          />
+        </View>
+
+        {/* Communities */}
+        <Text style={styles.heading}>Main Community</Text>
+        {communityCard(maincommunity[0], 'mainCommunity')}
+
+        <Text style={styles.heading}>Joined Community</Text>
+        {joinedCommunities.map((item) =>
+          communityCard(item, 'joinedCommunities')
+        )}
+
+        <Text style={styles.heading}>Suggestions</Text>
+        {suggestedCommunities.map((item) =>
+          communityCard(item, 'suggestedCommunities')
+        )}
+
+        {/* Create Community button as a card */}
+        <Card
+          onPress={() => {
+            console.log("Create Community pressed");
+            navigation.navigate("CreateCommunity");
+          }}
+          style={styles.CreateCard}
+        >
+          <View style={styles.createContent}>
+            <AntDesign name="addusergroup" size={24} color="green" />
+            <Text style={styles.createText}>Create Community</Text>
+          </View>
+        </Card>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: 20,
+    
+  },
+  searchBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#D9D9D6",
+    borderRadius: 15,
+    padding: 10,
+    marginBottom: 16,
+    marginTop: 5,
+    marginVertical: 10,
+  },
+  searchIcon: {
+    width: 20,
+    height: 20,
+    marginRight: 10,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 16,
+  },
+  heading: {
+    color: "#333",
+    fontSize: 16,
+    fontWeight: "500",
+    paddingLeft: 5,
+    paddingVertical: 10,
+  },
+  card: {
+    borderRadius: 15,
+    marginBottom: 10,
+    backgroundColor: "#fff",
+    padding: 12,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  cardRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  leftContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 40,
+    borderColor: "#4CAF50",
+    borderWidth: 2,
+  },
+  textBox: {
+    marginLeft: 15,
+  },
+  members: {
+    color: "grey",
+    fontSize: 12,
+    marginTop: -5,
+  },
+  button: {
+    paddingVertical: 6,
+    paddingHorizontal: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+  },
+  greenButton: {
+    backgroundColor: "#4CAF50",
+    borderColor: "#4CAF50",
+  },
+  greenBorder: {
+    backgroundColor: "transparent",
+    borderColor: "#4CAF50",
+  },
+  buttonText: {
+    fontWeight: "bold",
+    fontSize: 12,
+  },
+  whiteText: {
+    color: "#fff",
+  },
+  greenText: {
+    color: "#4CAF50",
+  },
+  createCard: {
+    backgroundColor: "#D9D9D6", 
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  createContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 10,
+  },
+  createIcon: {
+    width: 50,
+    height: 50,
+    marginRight: 10,
+  },
+  createText: {
+    color: "green",
+    fontSize: 18,
+    fontWeight: "bold",
+    paddingLeft: 5,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+  },
+  communitycard: {
+    marginBottom: 10,
+    borderRadius: 15,
+    padding: 12,
+    backgroundColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  CreateCard: {
+    backgroundColor: "#D9D9D6", 
+    marginTop: 10,
+    marginBottom: 20,
+    borderRadius: 15,
+    padding: 12,
+  },
 });
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 21056f1..b93712c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "@rneui/base": "^4.0.0-rc.7",
         "@rneui/themed": "^4.0.0-rc.8",
         "expo": "~52.0.23",
+        "expo-image-picker": "^16.0.6",
         "expo-status-bar": "~2.0.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -5982,6 +5983,27 @@
         "react": "*"
       }
     },
+    "node_modules/expo-image-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-5.0.0.tgz",
+      "integrity": "sha512-Eg+5FHtyzv3Jjw9dHwu2pWy4xjf8fu3V0Asyy42kO+t/FbvW/vjUixpTjPtgKQLQh+2/9Nk4JjFDV6FwCnF2ZA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-image-picker": {
+      "version": "16.0.6",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-16.0.6.tgz",
+      "integrity": "sha512-HN4xZirFjsFDIsWFb12AZh19fRzuvZjj2ll17cGr19VNRP06S/VPQU3Tdccn5vwUzQhOBlLu704CnNm278boiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-image-loader": "~5.0.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-14.0.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6438063..2c96752 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@rneui/base": "^4.0.0-rc.7",
     "@rneui/themed": "^4.0.0-rc.8",
     "expo": "~52.0.23",
+    "expo-image-picker": "^16.0.6",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",