diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 4647a82..4d29954 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -1,24 +1,26 @@
 import { ReactNode } from "react";
-import { View, Text, GestureResponderEvent } from "react-native";
+import { View, GestureResponderEvent, StyleSheet } from "react-native";
 import { Button as PaperButton } from "react-native-paper";
 
+import { colors } from "@/constants/colors";
+
 interface ButtonProps {
   buttonColor?: string;
   buttonMode?: "outlined" | "contained";
   buttonTextColor?: string;
   onPress: (event: GestureResponderEvent) => void;
-  disabled: boolean;
+  disabled?: boolean;
   children: ReactNode;
   className?: string;
   icon?: string;
 }
 
 export const Button = ({
-  buttonColor = "#6750a4",
+  buttonColor = colors.primaryPurpleDark,
   buttonMode = "outlined",
   buttonTextColor = "white",
   onPress,
-  disabled,
+  disabled = false,
   children,
   className,
   icon,
@@ -33,14 +35,17 @@ export const Button = ({
         disabled={disabled}
         textColor={buttonTextColor}
         icon={icon}
-        style={{ borderRadius: 4, borderColor: "transparent" }}
+        style={styles.buttonStyle}
       >
-        {typeof children === "string" || typeof children === "number" ? (
-          <Text>{children}</Text>
-        ) : (
-          children
-        )}
+        {children}
       </PaperButton>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  buttonStyle: {
+    borderRadius: 4,
+    borderColor: "transparent",
+  },
+});
diff --git a/components/ui/CustomCheckbox.tsx b/components/ui/CustomCheckbox.tsx
index e48dd59..94d5bf3 100644
--- a/components/ui/CustomCheckbox.tsx
+++ b/components/ui/CustomCheckbox.tsx
@@ -1,6 +1,8 @@
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "react-native-paper";
 
+import { colors } from "@/constants/colors";
+
 interface CustomCheckboxProps {
   checked: boolean;
   onPress: () => void;
@@ -32,7 +34,7 @@ export const CustomCheckbox = ({
           borderRadius: 2,
           justifyContent: "center",
           alignItems: "center",
-          backgroundColor: checked ? "#6750a4" : "transparent",
+          backgroundColor: checked ? colors.primaryPurpleDark : "transparent",
         }}
       >
         {checked && (
diff --git a/components/ui/CustomPicker.tsx b/components/ui/CustomPicker.tsx
index 1553824..e788eff 100644
--- a/components/ui/CustomPicker.tsx
+++ b/components/ui/CustomPicker.tsx
@@ -2,6 +2,8 @@ import { View, StyleSheet } from "react-native";
 import { Picker, PickerProps } from "@react-native-picker/picker";
 import { Ionicons } from "@expo/vector-icons";
 
+import { colors } from "@/constants/colors";
+
 export const PickerItem = Picker.Item;
 
 interface CustomPickerProps extends PickerProps {
@@ -17,9 +19,7 @@ export const CustomPicker = ({
     <View style={styles.container}>
       <Picker
         selectedValue={selectedValue}
-        onValueChange={(itemValue, itemIndex) => {
-          onValueChange?.(itemValue, itemIndex);
-        }}
+        onValueChange={onValueChange}
         style={[styles.pickerStyle, { appearance: "none" } as any]}
       >
         {children}
@@ -27,7 +27,7 @@ export const CustomPicker = ({
       <Ionicons
         name="chevron-down"
         size={20}
-        color="#333"
+        color={colors.darkGray}
         style={styles.customIcon}
       />
     </View>
diff --git a/components/ui/SearchableDropdown.tsx b/components/ui/SearchableDropdown.tsx
index 98dd75e..37bed46 100644
--- a/components/ui/SearchableDropdown.tsx
+++ b/components/ui/SearchableDropdown.tsx
@@ -40,8 +40,8 @@ export const SearchableDropdown = ({
   const selectedIds = Array.isArray(selectedIdsProp)
     ? selectedIdsProp
     : selectedIdsProp
-    ? [selectedIdsProp]
-    : [];
+      ? [selectedIdsProp]
+      : [];
 
   const selectedItems = items.filter((item) => selectedIds.includes(item.id));
 
@@ -65,7 +65,7 @@ export const SearchableDropdown = ({
 
         // Filter to only keep items that are still selected
         return Array.from(itemsMap.values()).filter((item) =>
-          selectedIds.includes(item.id)
+          selectedIds.includes(item.id),
         );
       });
     }
@@ -163,7 +163,7 @@ export const SearchableDropdown = ({
           mode === "multi" ||
           isOpen) && (
           <TextInput
-            className={`border !mr-0 ${
+            className={`border mr-0! ${
               error ? "border-highRisk" : "border-gray-300"
             } rounded p-2 text-base bg-white`}
             value={searchQuery}
diff --git a/constants/colors.ts b/constants/colors.ts
new file mode 100644
index 0000000..4d022a9
--- /dev/null
+++ b/constants/colors.ts
@@ -0,0 +1,21 @@
+export const colors = {
+  primaryPurple: "#49385D",
+  primaryPurpleLight: "#A78FA1",
+  primaryPurpleDark: "#6750a4",
+  darkGray: "#49454F",
+  darkMediumGray: "#7A757C",
+  mediumGray: "#C4BEBE",
+  lightGray: "#D9D9D9",
+  secondary: "#B768FF",
+  tertiary: "#2E1155",
+  accent: "#FF00FF",
+  background: "#1E0933",
+  highRisk: "#F83434",
+  mediumRisk: "#F8F834",
+  lowRisk: "#22C927",
+  orange: "#FF9800",
+  blue: "#56B3FA",
+} as const;
+
+// CommonJS export for tailwind.config.js
+export default colors;
diff --git a/frontend.zip b/frontend.zip
deleted file mode 100644
index a5ce9ab..0000000
Binary files a/frontend.zip and /dev/null differ
diff --git a/store/api/baseApi.ts b/store/api/baseApi.ts
index 8898a93..6285704 100644
--- a/store/api/baseApi.ts
+++ b/store/api/baseApi.ts
@@ -46,7 +46,7 @@ export const baseApi = createApi({
       return headers;
     },
   }),
-  refetchOnFocus: true,
+  refetchOnFocus: false,
   refetchOnReconnect: true,
   tagTypes: ["Users", "Todos", "UserLogs"],
   endpoints: () => ({}),
diff --git a/tailwind.config.js b/tailwind.config.js
index 776b267..4ea7548 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,35 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 
-module.exports = {
-  content: ["./components/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {
-      fontFamily: {
-        inter: ["Inter", "sans-serif"],
-      },
-      fontSize: {
-        inter: "16px",
-      },
-      colors: {
-        primaryPurple: "#49385D",
-        primaryPurpleLight: "#A78FA1",
-        primaryPurpleDark: "#6750a4",
-        darkGray: "#49454F",
-        darkMediumGray: "#7A757C",
-        mediumGray: "#C4BEBE",
-        lightGray: "#D9D9D9",
-        secondary: "#B768FF",
-        tertiary: "#2E1155",
-        accent: "#FF00FF",
-        background: "#1E0933",
-        highRisk: "#F83434",
-        mediumRisk: "#F8F834",
-        lowRisk: "#22C927",
-        orange: "#FF9800",
-        blue: "#56B3FA",
-      },
+import { colors } from "./constants/colors";
+
+export const content = [
+  "./components/**/*.{js,jsx,ts,tsx}",
+  "./app/**/*.{js,jsx,ts,tsx}",
+];
+export const presets = [require("nativewind/preset")];
+export const theme = {
+  extend: {
+    fontFamily: {
+      inter: ["Inter", "sans-serif"],
     },
+    fontSize: {
+      inter: "16px",
+    },
+    colors,
   },
-  plugins: [],
 };
+export const plugins = [];