diff --git a/app/StatusPage.tsx b/app/StatusPage.tsx
index 2d39a67..f7a00bc 100644
--- a/app/StatusPage.tsx
+++ b/app/StatusPage.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
 import useWebSocket from "react-use-websocket";
 import axios from "axios";
-import { Animated, Easing, ImageBackground, StyleSheet, View } from "react-native";
+import {Animated, Easing, ImageBackground, StyleSheet, useColorScheme, View} from "react-native";
 import { Avatar, List, Button, useTheme,  } from "react-native-paper";
+import { themes } from "@/app/themes";
 
 export const API_URL = process.env.EXPO_PUBLIC_API_URL;
 export const WS_URL = process.env.EXPO_PUBLIC_WS_URL;
@@ -12,6 +13,7 @@ interface Message {
     Name: string;
     Image: string;
     Status: string;
+    Theme: string;
     Timestamp: string;
 }
 
@@ -69,13 +71,15 @@ interface StatusProps {
     image: string;
     currentStatus: string;
     setStatus: (currentStatus: string) => void;
+    currentTheme: string;
     isProfileActive: boolean;
 }
 
-const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, isProfileActive })  => {
+const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive })  => {
     //console.log("WebSocket URL: ", WS_URL);
     //console.log("API URL: ", API_URL);
     const theme = useTheme();
+    const colorScheme = useColorScheme();
     const [messages, setMessages] = useState<Message[]>([]);
     const { lastMessage } = useWebSocket(WS_URL + "/ws", {
         shouldReconnect: () => true,
@@ -146,6 +150,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                     Name: name,
                     Image: image,
                     Status: "none",
+                    Theme: currentTheme,
                     Timestamp: new Date().toISOString()
                 };
                 await axios.post(API_URL + "/set", message);
@@ -160,6 +165,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                     Name: name,
                     Image: image,
                     Status: status,
+                    Theme: currentTheme,
                     Timestamp: new Date().toISOString()
                 };
                 await axios.post(API_URL + "/set", message);
@@ -213,13 +219,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                             {messages.filter(msg => msg.Status === "On the Way")
                                 .sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
                                 .map(item => (
-                                    <View key={item.Id} style={[styles.card, { backgroundColor: theme.colors.primaryContainer }]}>
+                                    <View key={item.Id} style={[styles.card,
+                                        { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
                                         <List.Item
                                             key={item.Id}
                                             title={item.Name}
-                                            titleStyle={{ color: theme.colors.onSurface }}
+                                            titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             description={new Date(item.Timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
-                                            descriptionStyle={{ color: theme.colors.onSurface }}
+                                            descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
                                         />
                                     </View>
@@ -232,13 +239,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                             {messages.filter(msg => msg.Status === "Arrived")
                                 .sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
                                 .map(item => (
-                                    <View key={item.Id} style={[styles.card, { backgroundColor: theme.colors.primaryContainer }]}>
+                                    <View key={item.Id} style={[styles.card,
+                                        { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
                                         <List.Item
                                             key={item.Id}
                                             title={item.Name}
-                                            titleStyle={{ color: theme.colors.onSurface }}
+                                            titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             description={new Date(item.Timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
-                                            descriptionStyle={{ color: theme.colors.onSurface }}
+                                            descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
                                         />
                                     </View>
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 7613c9f..effd99a 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -41,12 +41,13 @@ function InnerRootLayout() {
   const themeKey: 'blue' | 'green' | 'red' | 'yellow' | 'orange' = (currentTheme as 'blue' | 'green' | 'red' | 'yellow' | 'orange') || 'blue';
 
   // Use the themeKey to index into the themes object
-  const appTheme = themes[themeKey][colorScheme === 'dark' ? 'dark' : 'light'];
 
+  const appTheme = themes[themeKey][colorScheme === 'dark' ? 'dark' : 'light'];
+  const appTheme2 = themes[currentTheme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light']
 
   return (
       <Provider>
-        <PaperProvider theme={appTheme}>
+        <PaperProvider theme={appTheme2}>
           <Stack>
             <Stack.Screen name="index" options={{ headerShown: false }} />
           </Stack>
diff --git a/app/index.tsx b/app/index.tsx
index 1143306..e986df9 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -45,6 +45,7 @@ const Index = () => {
                 image={userImage}
                 currentStatus={userStatus}
                 setStatus={setUserStatus}
+                currentTheme={currentTheme}
                 isProfileActive={isProfileActive}
             />
             <ProfileScreen