diff --git a/client/app/components/chat/ChatMessage.tsx b/client/app/components/chat/ChatMessage.tsx
index d11b4d1bf..c27491f7b 100644
--- a/client/app/components/chat/ChatMessage.tsx
+++ b/client/app/components/chat/ChatMessage.tsx
@@ -3,9 +3,15 @@ import { View, StyleSheet, Text, Image, Dimensions } from "react-native";
 
 import { useSettings } from "../../contexts/SettingsContext";
 import { MessageProps } from "../../types/Props";
+import { SettingStore } from "../../services/SettingsStore"
+import { icons } from "../../styles/icons"
+
+const Message: React.FC<MessageProps> = ({ messageContent, time, author, profilePicIndex , profileColor }) => {
+  // Import textSettings from useSettings
+  const textSettings = useSettings();
+  // Import current settings from SettingStore container
+  //const profileSettings = SettingStore.useState();
 
-const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
-  const settings = useSettings();
   const currDay = new Date(Date.now()).toLocaleDateString([], {
     weekday: "long",
   })
@@ -20,14 +26,14 @@ const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
   // Text should have a different color to contrast with the background color
   const authorStyleProps = {
     ...styles.authorStyle,
-    color: settings && settings.theme !== "light" ? "white" : "black",
+    color: textSettings && textSettings.theme !== "light" ? "white" : "black",
   };
   return (
     <View style={styles.container}>
       <View style={styles.profileImageContainer}>
         <Image
-          style={styles.profileImage}
-          source={require("../../../assets/icons/user/fake_pfp.jpg")}
+          style={[styles.profileImage, { backgroundColor: profileColor }]}
+          source={icons[profilePicIndex]}
         />
       </View>
       <View style={styles.contentContainer}>
@@ -35,7 +41,7 @@ const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
           <Text style={authorStyleProps}>{author}</Text>
           <Text
             style={{
-              color: settings && settings.theme !== "light" ? "white" : "black",
+              color: textSettings && textSettings.theme !== "light" ? "white" : "black",
               fontSize: 12,
             }}>
             {[weekday, " at ", timestamp]}
@@ -44,7 +50,7 @@ const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
         <View style={styles.messageContent}>
           <Text
             style={{
-              color: settings && settings.theme !== "light" ? "white" : "black",
+              color: textSettings && textSettings.theme !== "light" ? "white" : "black",
             }}>
             {messageContent}
           </Text>
@@ -107,4 +113,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Message;
+export default Message;
\ No newline at end of file
diff --git a/client/app/components/chat/MessageChannel.tsx b/client/app/components/chat/MessageChannel.tsx
index 872262e23..67ade3703 100644
--- a/client/app/components/chat/MessageChannel.tsx
+++ b/client/app/components/chat/MessageChannel.tsx
@@ -18,6 +18,8 @@ const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
         <Message
           messageContent={item.msgContent}
           author={item.author.displayName} // TODO: call server to get author name from UID. Or should this stored with MessageType?
+          profilePicIndex={item.author.profilePicIndex}
+          profileColor={item.author.profileColor}
           time={item.timestamp}
         />
       )}
diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
index 7616b7925..e8a20f825 100644
--- a/client/app/screens/chat/ChatScreen.tsx
+++ b/client/app/screens/chat/ChatScreen.tsx
@@ -16,17 +16,17 @@ import { useSocket } from "../../contexts/SocketContext";
 import { AuthStore } from "../../services/AuthStore";
 import { Message } from "../../types/Message";
 import { useState, useEffect } from "react";
-import { useUser } from "@app/contexts/UserContext";
+import { SettingStore } from "../../services/SettingsStore"
 import NearbyHeader from "@app/components/chat/NearbyHeader";
 import React from "react";
 
 const ChatScreen = () => {
-  const settings = useSettings();
+  const settings = useSettings()
+  const profileSettings = SettingStore.useState();
   const screenHeight = Dimensions.get("window").height;
   const keyboardBehavior = Platform.OS === "ios" ? "padding" : undefined;
   const socket = useSocket();
   const location = useLocation();
-  const user = useUser();
   const userAuth = AuthStore.useState();
   // Note: To prevent complexity, all user information is grabbed from different contexts and services. If we wanted most information inside of UserContext, we would have to import contexts within contexts and have state change as certain things mount, which could cause errors that are difficult to pinpoint.
 
@@ -56,7 +56,9 @@ const ChatScreen = () => {
       const newMessage: Message = {
         author: {
           uid: String(userAuth.userAuthInfo?.uid),
-          displayName: String(user?.displayName),
+          displayName: profileSettings.displayName,
+          profilePicIndex: profileSettings.profilePicIndex,
+          profileColor: profileSettings.profileColor,
         },
         msgId: Crypto.randomUUID(),
         msgContent: messageContent.trim(),
@@ -84,6 +86,7 @@ const ChatScreen = () => {
       style={{
         backgroundColor:
           settings && settings.theme !== "light" ? "#191d20" : "white", // Needs to be changed to be a prop later (new issue?)
+          // Note: Can probably change to use profileSettings.isDarkMode if wanted.
       }}>
       <KeyboardAvoidingView
         behavior={keyboardBehavior}
diff --git a/client/app/screens/settings/SettingsScreen.tsx b/client/app/screens/settings/SettingsScreen.tsx
index d83dd7b22..c02247424 100644
--- a/client/app/screens/settings/SettingsScreen.tsx
+++ b/client/app/screens/settings/SettingsScreen.tsx
@@ -18,6 +18,8 @@ import {
 import { SettingsItem } from "../../components/settings/SettingsItem";
 import {ColorInput, DisplayNameInput} from "@app/components/settings/TextInputs";
 import { appSignOut } from "../../services/AuthStore";
+import { SettingStore, changeName, changeProfileIndex, changeProfileColor } from "../../services/SettingsStore"
+import { icons } from "../../styles/icons"
 
 // List of settings items
 // toggle type: a switch
@@ -51,12 +53,12 @@ const Sections = [
 ];
 
 const SettingsScreen: React.FC = () => {
+  // Import current settings from SettingStore container
+  const settings = SettingStore.useState();
+
   const [data, setData] = useState({
-    displayName: "Display Name",
-    profilePicIndex: 0, // index for icons array
-    profileColor: "#1199ff",
     notifyNewMessage: true,
-    darkMode: false,
+    darkMode: settings.isDarkMode,
     language: "English",
     deleteMessages: false,
   });
@@ -67,19 +69,7 @@ const SettingsScreen: React.FC = () => {
     profileColor: false,
   });
 
-
-  const iconStyle = [styles.icon, {backgroundColor: data.profileColor}]
-
-  const icons = [
-    require("../../../assets/icons/user/face_01.png"),
-    require("../../../assets/icons/user/face_02.png"),
-    require("../../../assets/icons/user/face_03.png"),
-    require("../../../assets/icons/user/face_04.png"),
-    require("../../../assets/icons/user/face_05.png"),
-    require("../../../assets/icons/user/face_06.png"),
-    require("../../../assets/icons/user/face_07.png"),
-    require("../../../assets/icons/user/fake_pfp.jpg"),
-  ];
+  const iconStyle = [styles.icon, {backgroundColor: settings.profileColor}]
 
   const [loading, setLoading] = useState(false);
 
@@ -132,27 +122,31 @@ const SettingsScreen: React.FC = () => {
             <TouchableWithoutFeedback>
               <View style={styles.userModal}>
                 <View style={styles.header}>
-                  <Text style={styles.headerText}>Hi {data.displayName}!</Text>
+                  <Text style={styles.headerText}>Hi {settings.displayName}!</Text>
                   <Text>    </Text>
                   <Pressable onPress={() => setProfileVisible(false)}>
                     <Image
                         style={iconStyle}
-                        source={icons[data.profilePicIndex]}
+                        source={icons[settings.profilePicIndex]}
                     />
                   </Pressable>
                 </View>
 
                 <DisplayNameInput
-                 defaultValue={data.displayName}
+                 defaultValue={settings.displayName}
                  isVisible={inputVisible.displayName}
                  visibleSetter={(value: boolean) => setInputVisible({...inputVisible, ["displayName"]: value})}
-                 outputSetter={(output: string) => setData({...data, ["displayName"]: output})}
+                 outputSetter={(output: string) => {
+                   changeName(output); // Updates the name held in settingStore
+                 }}
                 />
                 <ColorInput
-                    defaultValue={data.profileColor}
+                    defaultValue={settings.profileColor}
                     isVisible={inputVisible.profileColor}
                     visibleSetter={(value: boolean) => setInputVisible({...inputVisible, ["profileColor"]: value})}
-                    outputSetter={(output: string) => setData({...data, ["profileColor"]: output})}
+                    outputSetter={(output: string) => {
+                      changeProfileColor(output);
+                    }}
                 />
 
                 {/* User Settings */}
@@ -177,8 +171,10 @@ const SettingsScreen: React.FC = () => {
                     <FlatList data={icons}
                               numColumns={6}
                               renderItem={icon => (
-                                  <Pressable onPress={() => setData({ ...data, ["profilePicIndex"]: icon.index })}>
-                                    <Image style={[iconStyle, icon.index === data.profilePicIndex ? styles.selected:{margin: 5}]}
+                                  <Pressable onPress={() => {
+                                    changeProfileIndex(icon.index);
+                                  }}>
+                                    <Image style={[iconStyle, icon.index === settings.profilePicIndex ? styles.selected:{margin: 5}]}
                                            source={icon.item}/>
                                   </Pressable>
                               )}>
@@ -197,7 +193,7 @@ const SettingsScreen: React.FC = () => {
           <Pressable onPress={() => setProfileVisible(true)}>
             <Image
                 style={iconStyle}
-                source={icons[data.profilePicIndex]}
+                source={icons[settings.profilePicIndex]}
             />
           </Pressable>
         </View>
diff --git a/client/app/services/SettingsStore.ts b/client/app/services/SettingsStore.ts
index 1724398da..97e54502f 100644
--- a/client/app/services/SettingsStore.ts
+++ b/client/app/services/SettingsStore.ts
@@ -2,10 +2,16 @@ import { Store } from "pullstate";
 
 interface SettingsInterface {
   isDarkMode: boolean;
+  displayName: string,
+  profilePicIndex: number,
+  profileColor: string,
 }
 
 export const SettingStore = new Store<SettingsInterface>({
-  isDarkMode: false,
+  isDarkMode: false, // TODO: isDarkMode not implemented, part of different issue from other three variables
+  displayName: "Display Name",
+  profilePicIndex: 0,
+  profileColor: "#1199ff",
 });
 
 export const toggleTheme = async () => {
@@ -13,3 +19,21 @@ export const toggleTheme = async () => {
     store.isDarkMode = !store.isDarkMode;
   });
 };
+
+export const changeName = async (name: string) => {
+  SettingStore.update((store) => {
+    store.displayName = name;
+  });
+};
+
+export const changeProfileIndex = async (index: number) => {
+  SettingStore.update((store) => {
+    store.profilePicIndex = index;
+  });
+};
+
+export const changeProfileColor = async (color: string) => {
+  SettingStore.update((store) => {
+    store.profileColor = color;
+  });
+};
diff --git a/client/app/styles/icons.ts b/client/app/styles/icons.ts
new file mode 100644
index 000000000..647d13a8c
--- /dev/null
+++ b/client/app/styles/icons.ts
@@ -0,0 +1,11 @@
+// Container for all icons in application, externalized for easier access
+export const icons = [
+    require("../../assets/icons/user/face_01.png"),
+    require("../../assets/icons/user/face_02.png"),
+    require("../../assets/icons/user/face_03.png"),
+    require("../../assets/icons/user/face_04.png"),
+    require("../../assets/icons/user/face_05.png"),
+    require("../../assets/icons/user/face_06.png"),
+    require("../../assets/icons/user/face_07.png"),
+    require("../../assets/icons/user/fake_pfp.jpg"),
+];
\ No newline at end of file
diff --git a/client/app/types/Message.ts b/client/app/types/Message.ts
index c4668f107..f54b72e7b 100644
--- a/client/app/types/Message.ts
+++ b/client/app/types/Message.ts
@@ -2,6 +2,8 @@ export interface Message {
   author: {
     uid: string;
     displayName: string;
+    profilePicIndex: number;
+    profileColor: string;
   };
   msgId: string;
   msgContent: string;
diff --git a/client/app/types/Props.ts b/client/app/types/Props.ts
index a5c1e38d8..9492a8413 100644
--- a/client/app/types/Props.ts
+++ b/client/app/types/Props.ts
@@ -22,6 +22,8 @@ export type ChatInputProps = {
 export type MessageProps = {
   messageContent: string;
   time: number;
+  profilePicIndex: number;
+  profileColor: string;
   author: string;
 };
 
diff --git a/server/.DS_Store b/server/.DS_Store
new file mode 100644
index 000000000..f94362585
Binary files /dev/null and b/server/.DS_Store differ
diff --git a/server/src/.DS_Store b/server/src/.DS_Store
new file mode 100644
index 000000000..f388f635c
Binary files /dev/null and b/server/src/.DS_Store differ