diff --git a/client/src/components/Common/ChatMessage.tsx b/client/src/components/Common/ChatMessage.tsx
index 1b97cd9dd..72f06f4ef 100644
--- a/client/src/components/Common/ChatMessage.tsx
+++ b/client/src/components/Common/ChatMessage.tsx
@@ -1,12 +1,7 @@
 import React, { useContext } from "react";
 import { View, StyleSheet, Text, Image, Dimensions } from "react-native";
 import { useSettings } from "../../contexts/SettingsContext";
-
-interface MessageProps {
-  messageContent: string;
-  author: string,
-  time: number // Unix timestamp; Date.now() returns a Number.
-};
+import { MessageProps } from "../../types/Props";
 
 const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
   const settings = useSettings();
diff --git a/client/src/components/Common/CustomButtons.tsx b/client/src/components/Common/CustomButtons.tsx
index 1b9cd5cb7..6ab96b49c 100644
--- a/client/src/components/Common/CustomButtons.tsx
+++ b/client/src/components/Common/CustomButtons.tsx
@@ -1,9 +1,6 @@
 import React from 'react'
 import { View, StyleSheet, Text, TouchableOpacity, Image, Dimensions } from 'react-native'
-
-interface ChatSendButtonProps {
-  onPress?: () => void,
-}
+import { ChatSendButtonProps } from '../../types/Props';
 
 export const ChatSendButton: React.FC<ChatSendButtonProps> = ({ onPress }) => {
   return (
diff --git a/client/src/components/Common/CustomInputs.tsx b/client/src/components/Common/CustomInputs.tsx
index 336530378..de9c88724 100644
--- a/client/src/components/Common/CustomInputs.tsx
+++ b/client/src/components/Common/CustomInputs.tsx
@@ -1,36 +1,19 @@
-import React from "react";
-import {
-  TextInput,
-  View,
-  StyleSheet,
-  Dimensions,
-  Platform,
-} from "react-native";
-import { useFonts } from "expo-font";
-import { ChatSendButton } from "./CustomButtons";
+import React from 'react'
+import { TextInput, View, StyleSheet, Dimensions, Platform } from 'react-native'
+import { ChatInputProps } from '../../types/Props';
+import { ChatSendButton } from './CustomButtons'
 
-interface ChatInputProps {
-  value?: string;
-  onChangeText?: (text: string) => void;
-  invalid?: boolean;
-  onSend?: () => void;
+export const WelcomeEmailInput: React.FC<ChatInputProps> = ({ value, onChangeText }) => {
+    return (
+        <TextInput style={styles.welcomeEmailInput}
+        placeholder='Email'
+        multiline={false}
+        value={value}
+        onChangeText={onChangeText}
+        />
+    )
 }
 
-export const WelcomeEmailInput: React.FC<ChatInputProps> = ({
-  value,
-  onChangeText,
-}) => {
-  return (
-    <TextInput
-      style={styles.welcomeEmailInput}
-      placeholder="Email"
-      multiline={false}
-      value={value}
-      onChangeText={onChangeText}
-    />
-  );
-};
-
 // Maybe will put LogInEmailInput & LogInPasswordInput two together into a single component
 
 export const LogInEmailInput: React.FC<ChatInputProps> = ({
diff --git a/client/src/components/Common/LogInButton.tsx b/client/src/components/Common/LogInButton.tsx
new file mode 100644
index 000000000..860dedf9e
--- /dev/null
+++ b/client/src/components/Common/LogInButton.tsx
@@ -0,0 +1,47 @@
+import { router } from "expo-router";
+import React from "react";
+import { useFonts } from "expo-font";
+import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
+import { LogInButtonProps } from "../../types/Props";
+
+
+const LogInButton: React.FC<LogInButtonProps> = ({ onPress }) => {
+
+  const [fontsLoaded, fontError] = useFonts({
+    'Gilroy-ExtraBold': require('../../../assets/fonts/Gilroy-ExtraBold.otf'),
+    'Gilroy-Light': require('../../../assets/fonts/Gilroy-Light.otf'),
+  });
+
+  if (!fontsLoaded && !fontError) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <Text style={styles.button_text}>Log In</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  
+
+  button: {
+    backgroundColor: "#5dbea3",
+    width: Dimensions.get("window").width * 0.5,
+    height: Dimensions.get("window").height * 0.05,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+  },
+
+  button_text: {
+    color: "white",
+    fontFamily: "Gilroy-ExtraBold",
+    fontSize: Dimensions.get("window").height * 0.03,
+
+  },
+});
+
+export default LogInButton;
diff --git a/client/src/components/Common/MessageChannel.tsx b/client/src/components/Common/MessageChannel.tsx
index 3ff4c8629..03aaec1d0 100644
--- a/client/src/components/Common/MessageChannel.tsx
+++ b/client/src/components/Common/MessageChannel.tsx
@@ -1,11 +1,8 @@
 import React from 'react'
 import Message from './ChatMessage'
 import { FlatList, StyleSheet, View } from 'react-native'
-import { MessageType } from '../../types/Message'
+import { MessageChannelProps } from '../../types/Props';
 
-interface MessageChannelProps {
-  messages: MessageType[],
-}
 
 const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
   const reverseMessages = [...messages].reverse()
@@ -16,11 +13,11 @@ const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
           width: '100%',
         }}
         data={reverseMessages}
-        keyExtractor={(item) => item.msgId.toString()}
+        keyExtractor={(item) => item.msgId}
         renderItem={({ item }) => (
           <Message
             messageContent={item.msgContent}
-            author={item.author.uid} 
+            author={item.author.uid} // TODO: call server to get author name from UID. Or should this stored with MessageType?
             time={item.timeSent}
           />
         )}
diff --git a/client/src/components/Common/NearbyCount.tsx b/client/src/components/Common/NearbyCount.tsx
index 801aaae0c..962154cb2 100644
--- a/client/src/components/Common/NearbyCount.tsx
+++ b/client/src/components/Common/NearbyCount.tsx
@@ -6,10 +6,7 @@ import {
     Text,
     Dimensions
 } from 'react-native';
-
-interface CounterProps {
-    count: number;
-}
+import { CounterProps } from '../../types/Props';
 
 const NearbyCount: React.FC<CounterProps> = ({count}) => {
     return (
diff --git a/client/src/components/Common/NearbyHeader.tsx b/client/src/components/Common/NearbyHeader.tsx
index 9767967d7..a4d5ad750 100644
--- a/client/src/components/Common/NearbyHeader.tsx
+++ b/client/src/components/Common/NearbyHeader.tsx
@@ -1,10 +1,7 @@
-import { View, Text, StyleSheet, Dimensions } from "react-native";
-import React from "react";
-import NearbyCount from "./NearbyCount";
 
-interface CounterProps {
-  count: number;
-}
+import { View, Text, StyleSheet, Dimensions, Image } from 'react-native'
+import React from 'react'
+import { CounterProps } from '../../utils/types'
 
 export const NearbyHeader: React.FC<CounterProps> = ({ count }) => {
   return (
diff --git a/client/src/components/Common/SafeAreaWrapper.tsx b/client/src/components/Common/SafeAreaWrapper.tsx
index 391dcdcba..ba4b574bc 100644
--- a/client/src/components/Common/SafeAreaWrapper.tsx
+++ b/client/src/components/Common/SafeAreaWrapper.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import { useSettings } from "../../contexts/SettingsContext";
 import { SafeAreaView, Platform, StyleSheet, StatusBar } from "react-native";
-
-interface SafeAreaWrapperProps {
-  children: React.ReactNode;
-}
+import { SafeAreaWrapperProps } from "../../utils/types";
 
 const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({ children }) => {
   const settings = useSettings();
diff --git a/client/src/components/Common/SignUpButton.tsx b/client/src/components/Common/SignUpButton.tsx
index bed41ed8f..499fe6ba8 100644
--- a/client/src/components/Common/SignUpButton.tsx
+++ b/client/src/components/Common/SignUpButton.tsx
@@ -2,11 +2,7 @@ import { router } from "expo-router";
 import React from "react";
 import { useFonts } from "expo-font";
 import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
-
-// Interface for props function onPress
-interface SignUpButtonProps {
-  onPress?: () => void;
-}
+import { SignUpButtonProps } from "../../utils/types";
 
 const SignUpButton: React.FC<SignUpButtonProps> = ({ onPress }) => {
 
@@ -27,8 +23,6 @@ const SignUpButton: React.FC<SignUpButtonProps> = ({ onPress }) => {
 };
 
 const styles = StyleSheet.create({
-  
-
   button: {
     backgroundColor: "#5dbea3",
     width: Dimensions.get("window").width * 0.5,
diff --git a/client/src/configs/firebaseConfig.ts b/client/src/configs/firebaseConfig.ts
index 0468e3797..30f89f090 100644
--- a/client/src/configs/firebaseConfig.ts
+++ b/client/src/configs/firebaseConfig.ts
@@ -1,7 +1,7 @@
 import { initializeApp, getApp, getApps } from "firebase/app";
 import { initializeAuth, getReactNativePersistence, getAuth, Auth } from "firebase/auth";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import {API_KEY, AUTH_DOMAIN, PROJECT_ID, STORAGE_BUCKET, MESSAGING_SENDER_ID, APP_ID} from "@env"; // Don't worry about this env error!
+import {API_KEY, AUTH_DOMAIN} from "@env"; // Don't worry about this env error!
 
 const firebaseConfig = {
   apiKey: API_KEY || "Mock-Key",
diff --git a/client/src/types/Props.ts b/client/src/types/Props.ts
new file mode 100644
index 000000000..7784a15b4
--- /dev/null
+++ b/client/src/types/Props.ts
@@ -0,0 +1,43 @@
+import React from "react";
+import { MessageType } from "./Message";
+
+/* button props */
+export type LogInButtonProps = {
+  onPress?: () => void;
+}
+
+export type SignUpButtonProps = {
+    onPress?: () => void;
+}
+
+export type ChatSendButtonProps = {
+    onPress?: () => void,
+}
+  
+/* input props */
+export type ChatInputProps = {
+    value?: string,
+    onChangeText?: (text: string) => void
+}
+
+/* message related props */
+export type MessageProps =  {
+    messageContent: string;
+    time: number;
+    author: string;
+}
+
+export type MessageChannelProps = {
+  messages: MessageType[],
+}
+
+/* misc props*/
+export type CounterProps = {
+  count: number;
+}
+
+export type SafeAreaWrapperProps = {
+  children: React.ReactNode;
+}
+
+
diff --git a/client/src/utils/types.ts b/client/src/utils/types.ts
deleted file mode 100644
index a1eaa5023..000000000
--- a/client/src/utils/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type MessageType = {
-  messageContent: string;
-  author: string;
-  msgID: string;
-};
-
-export type UserType = {
-  userID: string;
-  displayName: string;
-  pfp: string;
-};
\ No newline at end of file