diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index 4eb7245..a73007e 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -15,7 +15,7 @@ export default function Layout() {
             backgroundColor: colors.containerColor,
         },
         tabBar: {
-            backgroundColor: colors.backgroundColor,
+            backgroundColor: colors.containerColor,
             borderTopColor: colors.backgroundColor
         }
     });
diff --git a/app/(tabs)/budget/index.tsx b/app/(tabs)/budget/index.tsx
index 4ca010e..31f3243 100644
--- a/app/(tabs)/budget/index.tsx
+++ b/app/(tabs)/budget/index.tsx
@@ -11,7 +11,7 @@ import { useTheme } from '../../contexts/ThemeContext';
 
 export default function Page() {
     const {colors} = useTheme()
-    const containerColor = colors.containerColor;
+    const containerColor = colors.backgroundColor;
 
     const [selectedPage, setSelectedPage] = useState("noPageLoaded");
 
diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index eaa0b22..4295b50 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -72,7 +72,7 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
+        <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
             {plusShow && <Plus onPress={()=>{
                 // router.push("/(tabs)/home/addItem");
 
diff --git a/components/home/expenseItem.tsx b/components/home/expenseItem.tsx
index d541d48..253a0fd 100644
--- a/components/home/expenseItem.tsx
+++ b/components/home/expenseItem.tsx
@@ -10,7 +10,7 @@ export default function ExpenseItem(itemProps : ExpenseItemProps) {
   return (
       <CustomCard>
         <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
-        <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
+        <View style={[styles.textSection, {backgroundColor: colors.containerColor}]}>
           <Text style={{
             fontSize: SIZES.normal,
             color: colors.primaryText
@@ -24,7 +24,7 @@ export default function ExpenseItem(itemProps : ExpenseItemProps) {
             color: colors.primaryText
           }} numberOfLines={1}>{itemProps.date}</Text>
         </View>
-        <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
+        <View style={[styles.valueSection, {backgroundColor: colors.containerColor}]}>
           <Text style={{
             fontSize: SIZES.xxLarge,
             color: colors.primaryText