diff --git a/Bubbles/app/(tabs)/chat.tsx b/Bubbles/app/(tabs)/chat.tsx
index 74dbe0c..ff5e72d 100644
--- a/Bubbles/app/(tabs)/chat.tsx
+++ b/Bubbles/app/(tabs)/chat.tsx
@@ -1,27 +1,242 @@
-// app/Chat.tsx
+// // app/Chat.tsx
+// // import React, { useEffect, useState } from 'react';
+// // import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
+// // import socket from '@/hooks/socket'; // import your socket instance
+
+// // const ChatScreen = () => {
+// //   const [messages, setMessages] = useState<string[]>([]);
+// //   const [message, setMessage] = useState('');
+
+// //   useEffect(() => {
+// //     // listen for incoming messages
+// //     socket.on('message', (newMessage: string) => {
+// //       setMessages((prevMessages) => [...prevMessages, newMessage]);
+// //     });
+
+// //     // clean up the listener on unmount
+// //     return () => {
+// //       socket.off('message');
+// //     };
+// //   }, []);
+
+// //   const sendMessage = () => {
+// //     if (message.trim()) {
+// //       socket.emit('message', message);
+// //       setMessage('');
+// //     }
+// //   };
+
+// //   return (
+// //     <View style={styles.container}>
+// //       <FlatList
+// //         data={messages}
+// //         renderItem={({ item }) => (
+// //           <View style={styles.messageContainer}>
+// //             <Text>{item}</Text>
+// //           </View>
+// //         )}
+// //         keyExtractor={(item, index) => index.toString()}
+// //       />
+// //       <TextInput
+// //         value={message}
+// //         onChangeText={setMessage}
+// //         placeholder="Type a message"
+// //         style={styles.input}
+// //       />
+// //       <Button title="Send" onPress={sendMessage} />
+// //     </View>
+// //   );
+// // };
+
+// // const styles = StyleSheet.create({
+// //   container: {
+// //     flex: 1,
+// //     padding: 16,
+// //   },
+// //   input: {
+// //     borderBottomWidth: 1,
+// //     marginBottom: 16,
+// //   },
+// //   messageContainer: {
+// //     padding: 10,
+// //     borderBottomWidth: 1,
+// //   },
+// // });
+
+// // export default ChatScreen;
+// import React, { useEffect, useState } from 'react';
+// import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
+// import socket from '@/hooks/socket'; // import your socket instance
+// import AsyncStorage from '@react-native-async-storage/async-storage';
+
+
+// const ChatScreen = () => {
+//   const [messages, setMessages] = useState<string[]>([]);
+//   const [message, setMessage] = useState('');
+//   const [username, setUsername] = useState<string | null>(null);
+
+//   // Function to retrieve username from AsyncStorage
+//   const retrieveUsername = async () => {
+//     try {
+//       const storedUsername = await AsyncStorage.getItem('username');
+//       if (storedUsername !== null) {
+//         console.log('Retrieved username:', storedUsername);
+//         setUsername(storedUsername);
+//       }
+//     } catch (error) {
+//       console.error('Failed to retrieve username:', error);
+//     }
+//   };
+
+
+//   useEffect(() => {
+//     retrieveUsername();
+    
+//     socket.connect();
+
+//     socket.on('connect', () => {
+//       console.log('Connected to Socket.IO server with ID:', socket.id);
+//     });
+
+//     // Listen for incoming messages
+//     socket.on('message', (newMessage: string) => {
+//       console.log("setMessages() was run")
+//       setMessages((prevMessages) => [...prevMessages, newMessage]);
+//     });
+
+//     // Clean up the listener on unmount
+//     return () => {
+//       console.log("socket.off() was run");
+//       socket.off('message');
+//     };
+//   }, []);
+
+//   const sendMessage = () => {
+//     if (message.trim()) {
+//       socket.connect();
+
+//       // socket.on('connect', () => {
+//       //   console.log('Connected to Socket.IO server with ID:', socket.id);
+//       // });
+
+
+//       console.log(username);
+//       console.log(message);
+      
+//       socket.emit('message', {
+//         'source_username': username,
+//         'target_username':'jonathan',
+//         'message':message});
+//       setMessage('');
+//     }
+//   };
+
+//   return (
+//     <View style={styles.container}>
+//       <FlatList
+//         data={messages}
+//         renderItem={({ item }) => (
+//           <View style={styles.messageContainer}>
+//             <Text>{item}</Text>
+//           </View>
+//         )}
+//         keyExtractor={(item, index) => index.toString()}
+//       />
+//       <TextInput
+//         value={message}
+//         onChangeText={setMessage}
+//         placeholder="Type a message"
+//         style={styles.input}
+//       />
+//       <Button title="Send" onPress={sendMessage} />
+//     </View>
+//   );
+// };
+
+// const styles = StyleSheet.create({
+//   container: {
+//     flex: 1,
+//     padding: 16,
+//   },
+//   input: {
+//     borderBottomWidth: 1,
+//     marginBottom: 16,
+//   },
+//   messageContainer: {
+//     padding: 10,
+//     borderBottomWidth: 1,
+//   },
+// });
+
+// export default ChatScreen;
 import React, { useEffect, useState } from 'react';
 import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import socket from '@/hooks/socket'; // import your socket instance
 
 const ChatScreen = () => {
-  const [messages, setMessages] = useState<string[]>([]);
+  const [messages, setMessages] = useState<{ source_username: string; message: string }[]>([]);
   const [message, setMessage] = useState('');
+  const [username, setUsername] = useState<string | null>(null);
+
+  // Function to retrieve username from AsyncStorage
+  const retrieveUsername = async () => {
+    try {
+      const storedUsername = await AsyncStorage.getItem('username');
+      if (storedUsername !== null) {
+        console.log('Retrieved username:', storedUsername);
+        setUsername(storedUsername);
+      }
+    } catch (error) {
+      console.error('Failed to retrieve username:', error);
+    }
+  };
+
+  // Function to log the entire conversation history
+  const logConversationHistory = () => {
+    console.log('Conversation History:', messages);
+  };
 
   useEffect(() => {
-    // listen for incoming messages
-    socket.on('message', (newMessage: string) => {
-      setMessages((prevMessages) => [...prevMessages, newMessage]);
+    retrieveUsername();
+    socket.connect();
+
+    socket.emit('setname', username);
+
+    socket.on('connect', () => {
+      console.log('Connected to Socket.IO server with ID:', socket.id);
+    });
+
+    // Listen for incoming messages
+    socket.on('message_received', (newMessage: { source_username: string; target_username: string; message: string }) => {
+      console.log("setMessages() was run");
+      // Only add the message if the target_username matches the local username
+      if (username && newMessage.target_username === username) {
+        setMessages((prevMessages) => {
+          const updatedMessages = [...prevMessages, newMessage];
+          // Log the entire conversation history whenever a new message is received
+          logConversationHistory();
+          return updatedMessages;
+        });
+      }
     });
 
-    // clean up the listener on unmount
+    // Clean up the listener on unmount
     return () => {
+      console.log("socket.off() was run");
       socket.off('message');
     };
-  }, []);
+  }, [username]);
 
   const sendMessage = () => {
-    if (message.trim()) {
-      socket.emit('message', message);
+    if (message.trim() && username) {
+      console.log(username);
+      console.log(message);
+      socket.emit('message', {
+        source_username: username,
+        target_username: 'targeted', // Replace with the actual target username
+        message: message,
+      });
       setMessage('');
     }
   };
@@ -32,7 +247,7 @@ const ChatScreen = () => {
         data={messages}
         renderItem={({ item }) => (
           <View style={styles.messageContainer}>
-            <Text>{item}</Text>
+            <Text>{`${item.source_username}: ${item.message}`}</Text>
           </View>
         )}
         keyExtractor={(item, index) => index.toString()}
diff --git a/Bubbles/app/index.tsx b/Bubbles/app/index.tsx
index 6c4fb9d..6324df3 100644
--- a/Bubbles/app/index.tsx
+++ b/Bubbles/app/index.tsx
@@ -1,5 +1,6 @@
 import { Redirect } from 'expo-router';
 
 export default function Index() {
-  return <Redirect href="/(tabs)/home"/>;
+  // return <Redirect href="/(tabs)/home"/>;
+  return <Redirect href="/welcome"/>;
 }
\ No newline at end of file
diff --git a/Bubbles/app/signup.tsx b/Bubbles/app/signup.tsx
index 43819b2..25ea696 100644
--- a/Bubbles/app/signup.tsx
+++ b/Bubbles/app/signup.tsx
@@ -3,6 +3,7 @@ import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'reac
 import { Input, Icon } from '@rneui/themed';
 import styles from '../assets/stylesheet';
 import { useNavigation, router } from 'expo-router';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 
 export default function SignUp () {
@@ -53,7 +54,7 @@ export default function SignUp () {
   const handleBack = () => {
       router.push("/welcome");
   };
-  const handleContinue = () => {
+  const handleContinue = async () => {
     if (password !== confirmPassword || username.length < 1 || 
         passwordError != '' || confirmPasswordError != '' || usernameError != ''
     ) {
@@ -62,13 +63,21 @@ export default function SignUp () {
       return;
     }
 
-    // Here you would typically call an API to register the user
-    console.log('Sign up with:', { username, email, password });
-    Alert.alert('Success', 'Account created successfully!');
-    router.push({
-      pathname: '/(tabs)/home', 
-      params: {username, email, password}
-    });
+    try {
+      await AsyncStorage.setItem('username', username);
+      console.log('Username saved:', username);
+
+      // Here you would typically call an API to register the user
+      console.log('Sign up with:', { username, email, password });
+      Alert.alert('Success', 'Account created successfully!');
+      router.push({
+        pathname: '/(tabs)/home', 
+        params: {username, email, password}
+      });
+    } catch (error) {
+      console.error('Failed to save username:', error);
+    }
+
     // Reset form or navigate to another screen
   };
 
diff --git a/Bubbles/hooks/socket.ts b/Bubbles/hooks/socket.ts
index 736e86e..3cea1cc 100644
--- a/Bubbles/hooks/socket.ts
+++ b/Bubbles/hooks/socket.ts
@@ -1,5 +1,10 @@
 import { io } from 'socket.io-client';
 
-const socket = io('http://10.17.67.160:38433/');
+const socket = io('http://sydneyhome.ddns.net:38433/',{
+    // Optional configuration here, e.g.
+    // auth: { token: 'your_token' },
+    // transports: ['websocket'],
+});
+
 
 export default socket;
\ No newline at end of file
diff --git a/Bubbles/package-lock.json b/Bubbles/package-lock.json
index 9a7143f..4246fe3 100644
--- a/Bubbles/package-lock.json
+++ b/Bubbles/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@expo/metro-runtime": "~3.2.3",
         "@expo/vector-icons": "^14.0.2",
+        "@react-native-async-storage/async-storage": "^2.0.0",
         "@react-navigation/native": "^6.0.2",
         "@rneui/themed": "^4.0.0-rc.8",
         "@splinetool/react-spline": "^4.0.0",
@@ -4707,6 +4708,17 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.0.0.tgz",
+      "integrity": "sha512-af6H9JjfL6G/PktBfUivvexoiFKQTJGQCtSWxMdivLzNIY94mu9DdiY0JqCSg/LyPCLGKhHPUlRQhNvpu3/KVA==",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || >=0.65 <1.0"
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "13.6.9",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-13.6.9.tgz",
@@ -12282,6 +12294,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -15533,6 +15553,17 @@
       "integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
diff --git a/Bubbles/package.json b/Bubbles/package.json
index edbb503..b05b9f6 100644
--- a/Bubbles/package.json
+++ b/Bubbles/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@expo/metro-runtime": "~3.2.3",
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-navigation/native": "^6.0.2",
     "@rneui/themed": "^4.0.0-rc.8",
     "@splinetool/react-spline": "^4.0.0",