diff --git a/app/index.tsx b/app/index.tsx
index 7f1d8c7..b974fbd 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -7,16 +7,17 @@ import ChipsSelector from "@/components/ChipsSelector";
 import ChipDistributionSummary from "@/components/ChipDistributionSummary";
 import ChipDetection from "@/components/ChipDetection";
 import CurrencySelector from "@/components/CurrencySelector";
-import { saveState, loadState } from "@/components/CalculatorState";
+import { saveState, loadState } from "@/util/CalculatorState";
 import {
   savePersistentState,
   loadPersistentState,
-} from "@/components/PersistentState";
+} from "@/util/PersistentState";
 import styles from "@/styles/styles";
 import Section from "@/containers/Section";
 import AppContext from "@/util/context";
 import { Picker } from "@react-native-picker/picker";
 import i18n from "@/i18n/i18n";
+import PokerAppUi from "@/containers/PokerAppUi";
 
 const IndexScreen: React.FC = () => {
   const [playerCount, setPlayerCount] = useState(2);
@@ -25,23 +26,21 @@ const IndexScreen: React.FC = () => {
   const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
   const [selectedCurrency, setSelectedCurrency] = useState<string>("$");
   const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
+  const [lightGrayMode, setLightGrayMode] = useState<boolean>(false);
+
   const context = useContext(AppContext);
   const isSettingsVisible = useMemo(() => context.showSettings, [context]);
 
   useEffect(() => {
     const loadPersistentData = async () => {
       try {
-        console.log("Loading persistent game state...");
         const savedState = await loadPersistentState();
         if (savedState) {
-          console.log("Persistent state restored:", savedState);
           setPlayerCount(savedState.playerCount || 2);
           setBuyInAmount(savedState.buyInAmount || 20);
           setNumberOfChips(savedState.numberOfChips || 5);
           setTotalChipsCount(savedState.totalChipsCount || []);
           setSelectedCurrency(savedState.selectedCurrency || "$");
-        } else {
-          console.log("No persistent state found, using defaults.");
         }
       } catch (error) {
         console.error("Error loading persistent state:", error);
@@ -62,35 +61,23 @@ const IndexScreen: React.FC = () => {
       totalChipsCount,
       selectedCurrency,
     };
-    try {
-      await saveState(slot, state);
-      await savePersistentState(state);
-      console.log(`Game state saved to ${slot}:`, state);
-      Alert.alert(i18n.t("success"), i18n.t("state_saved", { slot })); // Fixed interpolation
-    } catch (error) {
-      console.error("Error saving state:", error);
-      Alert.alert(i18n.t("error"), i18n.t("failed_to_save_state"));
-    }
+    await saveState(slot, state);
+    await savePersistentState(state);
+    Alert.alert(i18n.t("success"), i18n.t("state_saved", { slot }));
   };
 
   const handleLoad = async (slot: "SLOT1" | "SLOT2") => {
-    try {
-      const loadedState = await loadState(slot);
-      if (loadedState) {
-        setPlayerCount(loadedState.playerCount);
-        setBuyInAmount(loadedState.buyInAmount ?? 20);
-        setNumberOfChips(loadedState.numberOfChips);
-        setTotalChipsCount(loadedState.totalChipsCount);
-        setSelectedCurrency(loadedState.selectedCurrency || "$");
-        await savePersistentState(loadedState);
-        console.log(`Game state loaded from ${slot}:`, loadedState);
-        Alert.alert(i18n.t("success"), i18n.t("state_loaded_from", { slot })); // Fixed interpolation
-      } else {
-        Alert.alert(i18n.t("info"), i18n.t("no_saved_state_found"));
-      }
-    } catch (error) {
-      console.error("Error loading state:", error);
-      Alert.alert(i18n.t("error"), i18n.t("failed_to_load_state"));
+    const loadedState = await loadState(slot);
+    if (loadedState) {
+      setPlayerCount(loadedState.playerCount);
+      setBuyInAmount(loadedState.buyInAmount ?? 20);
+      setNumberOfChips(loadedState.numberOfChips);
+      setTotalChipsCount(loadedState.totalChipsCount);
+      setSelectedCurrency(loadedState.selectedCurrency || "$");
+      await savePersistentState(loadedState);
+      Alert.alert(i18n.t("success"), i18n.t("state_loaded_from", { slot }));
+    } else {
+      Alert.alert(i18n.t("info"), i18n.t("no_saved_state_found"));
     }
   };
 
@@ -100,107 +87,122 @@ const IndexScreen: React.FC = () => {
   };
 
   return (
-    <ScrollView
-      style={styles.scrollView}
-      contentContainerStyle={styles.scrollViewContent}
-    >
-      {isSettingsVisible && (
+    <PokerAppUi darkMode={lightGrayMode}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollViewContent}
+      >
         <Section
-          title={i18n.t("select_language")}
-          iconName={"language"}
+          title={i18n.t("appearance")}
+          iconName={"brightness-4"}
           orientation="row"
         >
-          <Picker
-            selectedValue={selectedLanguage}
-            onValueChange={handleLanguageChange}
-            style={styles.picker}
-          >
-            <Picker.Item label={i18n.t("english")} value="en" />
-            <Picker.Item label={i18n.t("spanish")} value="es" />
-          </Picker>
-        </Section>
-      )}
-
-      {isSettingsVisible && (
-        <Section
-          title={i18n.t("select_currency")}
-          iconName={"attach-money"}
-          orientation="row"
-        >
-          <CurrencySelector
-            selectedCurrency={selectedCurrency}
-            setSelectedCurrency={setSelectedCurrency}
+          <Button
+            title={
+              lightGrayMode
+                ? i18n.t("switch_to_light_mode")
+                : i18n.t("switch_to_gray_mode")
+            }
+            onPress={() => setLightGrayMode(!lightGrayMode)}
           />
         </Section>
-      )}
 
-      <Section
-        title={i18n.t("select_number_of_players")}
-        iconName={"people"}
-        orientation="row"
-        contentStyle={{ justifyContent: "center", gap: 30 }}
-      >
-        <PlayerSelector
-          playerCount={playerCount}
-          setPlayerCount={setPlayerCount}
-        />
-      </Section>
+        {isSettingsVisible && (
+          <Section
+            title={i18n.t("select_language")}
+            iconName={"language"}
+            orientation="row"
+          >
+            <Picker
+              selectedValue={selectedLanguage}
+              onValueChange={handleLanguageChange}
+              style={styles.picker}
+            >
+              <Picker.Item label={i18n.t("english")} value="en" />
+              <Picker.Item label={i18n.t("spanish")} value="es" />
+            </Picker>
+          </Section>
+        )}
 
-      <Section
-        title={i18n.t("select_buyin_amount")}
-        iconName={"monetization-on"}
-      >
-        <BuyInSelector
-          selectedCurrency={selectedCurrency}
-          setBuyInAmount={setBuyInAmount}
-        />
-      </Section>
+        {isSettingsVisible && (
+          <Section
+            title={i18n.t("select_currency")}
+            iconName={"attach-money"}
+            orientation="row"
+          >
+            <CurrencySelector
+              selectedCurrency={selectedCurrency}
+              setSelectedCurrency={setSelectedCurrency}
+            />
+          </Section>
+        )}
 
-      <Section
-        title={i18n.t("automatic_chip_detection")}
-        iconName={"camera-alt"}
-      >
-        <ChipDetection
-          updateChipCount={(chipData) => {
-            const chipCountArray = Object.values(chipData);
-            setTotalChipsCount(chipCountArray);
-            setNumberOfChips(chipCountArray.length);
-          }}
-        />
-      </Section>
+        <Section
+          title={i18n.t("select_number_of_players")}
+          iconName={"people"}
+          orientation="row"
+          contentStyle={{ justifyContent: "center", gap: 30 }}
+        >
+          <PlayerSelector
+            playerCount={playerCount}
+            setPlayerCount={setPlayerCount}
+          />
+        </Section>
 
-      <Section
-        title={i18n.t("manual_chip_adjustment")}
-        iconName={"account-balance"}
-        orientation="row"
-        contentStyle={{ alignItems: "center" }}
-      >
-        <ChipsSelector
-          totalChipsCount={totalChipsCount}
-          setTotalChipsCount={setTotalChipsCount}
-          numberOfChips={numberOfChips}
-          setNumberOfChips={setNumberOfChips}
-        />
-      </Section>
+        <Section
+          title={i18n.t("select_buyin_amount")}
+          iconName={"monetization-on"}
+        >
+          <BuyInSelector
+            selectedCurrency={selectedCurrency}
+            setBuyInAmount={setBuyInAmount}
+          />
+        </Section>
 
-      <Section
-        title={i18n.t("distribution_and_denomination")}
-        iconName={"currency-exchange"}
-      >
-        <ChipDistributionSummary
-          playerCount={playerCount}
-          buyInAmount={buyInAmount}
-          totalChipsCount={totalChipsCount}
-          selectedCurrency={selectedCurrency}
-        />
-      </Section>
+        <Section
+          title={i18n.t("automatic_chip_detection")}
+          iconName={"camera-alt"}
+        >
+          <ChipDetection
+            updateChipCount={(chipData) => {
+              const chipCountArray = Object.values(chipData);
+              setTotalChipsCount(chipCountArray);
+              setNumberOfChips(chipCountArray.length);
+            }}
+          />
+        </Section>
 
-      <Section
-        title={i18n.t("save_and_load")}
-        iconName={"save"}
-        orientation="row"
-      >
-        <>
+        <Section
+          title={i18n.t("manual_chip_adjustment")}
+          iconName={"account-balance"}
+          orientation="row"
+          contentStyle={{ alignItems: "center" }}
+        >
+          <ChipsSelector
+            totalChipsCount={totalChipsCount}
+            setTotalChipsCount={setTotalChipsCount}
+            numberOfChips={numberOfChips}
+            setNumberOfChips={setNumberOfChips}
+          />
+        </Section>
+
+        <Section
+          title={i18n.t("distribution_and_denomination")}
+          iconName={"currency-exchange"}
+        >
+          <ChipDistributionSummary
+            playerCount={playerCount}
+            buyInAmount={buyInAmount}
+            totalChipsCount={totalChipsCount}
+            selectedCurrency={selectedCurrency}
+          />
+        </Section>
+
+        <Section
+          title={i18n.t("save_and_load")}
+          iconName={"save"}
+          orientation="row"
+        >
           <Button
             title={i18n.t("save_slot_1")}
             onPress={() => handleSave("SLOT1")}
@@ -219,9 +221,9 @@ const IndexScreen: React.FC = () => {
             title={i18n.t("load_slot_2")}
             onPress={() => handleLoad("SLOT2")}
           />
-        </>
-      </Section>
-    </ScrollView>
+        </Section>
+      </ScrollView>
+    </PokerAppUi>
   );
 };
 
diff --git a/containers/Button.tsx b/containers/Button.tsx
index 624f7d9..ed85970 100644
--- a/containers/Button.tsx
+++ b/containers/Button.tsx
@@ -1,9 +1,69 @@
-import { ButtonProps, Button } from "react-native";
-import { COLORS } from "@/styles/styles";
+import React from "react";
+import { Text, TouchableOpacity, StyleSheet } from "react-native";
 
-// More styling can be done, or swap this out with more flexible component like a TouchableOpacity if needed
-const AppButton = (props: ButtonProps) => (
-  <Button color={COLORS.PRIMARY} {...props} />
-);
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  darkMode: boolean;
+}
 
-export default AppButton;
+const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  disabled,
+  darkMode,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      style={[
+        styles.button,
+        darkMode ? styles.darkButton : styles.lightButton,
+        disabled && styles.disabled,
+      ]}
+    >
+      <Text
+        style={[
+          styles.buttonText,
+          darkMode ? styles.darkText : styles.lightText,
+        ]}
+      >
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    marginHorizontal: 5,
+    marginVertical: 5,
+  },
+  darkButton: {
+    backgroundColor: "#333333",
+  },
+  lightButton: {
+    backgroundColor: "#DDDDDD",
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  darkText: {
+    color: "#FFFFFF",
+  },
+  lightText: {
+    color: "#000000",
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export default Button;
diff --git a/containers/PokerAppUi.tsx b/containers/PokerAppUi.tsx
new file mode 100644
index 0000000..150f3c2
--- /dev/null
+++ b/containers/PokerAppUi.tsx
@@ -0,0 +1,52 @@
+import React, { ReactNode } from "react";
+import {
+  SafeAreaView,
+  StatusBar,
+  View,
+  StyleSheet,
+  Dimensions,
+} from "react-native";
+
+interface PokerAppUiProps {
+  children: ReactNode;
+  darkMode?: boolean;
+}
+
+const PokerAppUi: React.FC<PokerAppUiProps> = ({
+  children,
+  darkMode = false,
+}) => {
+  const screenHeight = Dimensions.get("window").height;
+
+  return (
+    <SafeAreaView
+      style={[styles.safeArea, darkMode ? styles.lightGray : styles.light]}
+    >
+      <StatusBar barStyle={"dark-content"} />
+      <View style={[styles.container, { minHeight: screenHeight }]}>
+        {children}
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    width: "100%",
+    padding: 16,
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  light: {
+    backgroundColor: "#F5F5F5",
+  },
+  lightGray: {
+    backgroundColor: "#D3D3D3",
+  },
+});
+
+export default PokerAppUi;
diff --git a/package-lock.json b/package-lock.json
index abe86fb..5757d4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@react-native-picker/picker": "^2.11.0",
         "@react-navigation/bottom-tabs": "7.2.0",
         "@react-navigation/native": "7.0.14",
-        "expo": "52.0.37",
+        "expo": "^52.0.37",
         "expo-blur": "14.0.3",
         "expo-constants": "17.0.7",
         "expo-file-system": "18.0.11",
diff --git a/package.json b/package.json
index 20552fe..9ed1424 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@react-native-picker/picker": "^2.11.0",
     "@react-navigation/bottom-tabs": "7.2.0",
     "@react-navigation/native": "7.0.14",
-    "expo": "52.0.37",
+    "expo": "^52.0.37",
     "expo-blur": "14.0.3",
     "expo-constants": "17.0.7",
     "expo-file-system": "18.0.11",
@@ -31,6 +31,7 @@
     "expo-haptics": "14.0.1",
     "expo-image-picker": "16.0.6",
     "expo-linking": "7.0.5",
+    "expo-localization": "~16.0.1",
     "expo-router": "4.0.17",
     "expo-splash-screen": "0.29.22",
     "expo-status-bar": "2.0.1",
@@ -47,8 +48,7 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "4.4.0",
     "react-native-web": "0.19.13",
-    "react-native-webview": "13.12.5",
-    "expo-localization": "~16.0.1"
+    "react-native-webview": "13.12.5"
   },
   "devDependencies": {
     "@babel/core": "7.26.9",
diff --git a/components/CalculatorState.tsx b/util/CalculatorState.ts
similarity index 100%
rename from components/CalculatorState.tsx
rename to util/CalculatorState.ts
diff --git a/components/PersistentState.tsx b/util/PersistentState.ts
similarity index 100%
rename from components/PersistentState.tsx
rename to util/PersistentState.ts
diff --git a/components/__tests__/CalculatorState.test.tsx b/util/tests/CalculatorState.test.ts
similarity index 96%
rename from components/__tests__/CalculatorState.test.tsx
rename to util/tests/CalculatorState.test.ts
index 67f4279..06eccf0 100644
--- a/components/__tests__/CalculatorState.test.tsx
+++ b/util/tests/CalculatorState.test.ts
@@ -1,12 +1,12 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { saveState, loadState, PokerState } from "../CalculatorState";
+import { saveState, loadState, PokerState } from "@/util/CalculatorState";
 
 // Mock AsyncStorage
 jest.mock("@react-native-async-storage/async-storage", () =>
   require("@react-native-async-storage/async-storage/jest/async-storage-mock")
 );
 
-describe("CalculatorState.tsx", () => {
+describe("CalculatorState.ts", () => {
   const mockState: PokerState = {
     playerCount: 4,
     buyInAmount: 50,
diff --git a/components/__tests__/PersistentState.test.tsx b/util/tests/PersistentState.test.ts
similarity index 97%
rename from components/__tests__/PersistentState.test.tsx
rename to util/tests/PersistentState.test.ts
index a24b389..edfa2dc 100644
--- a/components/__tests__/PersistentState.test.tsx
+++ b/util/tests/PersistentState.test.ts
@@ -3,14 +3,14 @@ import {
   savePersistentState,
   loadPersistentState,
   PokerState,
-} from "../PersistentState";
+} from "@/util/PersistentState";
 
 jest.mock("@react-native-async-storage/async-storage", () => ({
   setItem: jest.fn(),
   getItem: jest.fn(),
 }));
 
-describe("PersistentState.tsx", () => {
+describe("PersistentState.ts", () => {
   const mockState: PokerState = {
     playerCount: 4,
     buyInAmount: 50,