diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 7b51e8c..8ccb933 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -98,7 +98,7 @@ export default function HeaderBar(props: Props) {
 
   const StyledAppBar = styled(AppBar)(() => ({
     borderRadius: "2%",
-    background: "#13bf8d",
+    background: 'primary.main' ,
     marginTop: "0",
   }));
 
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 0c83bcf..a42c705 100644
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -10,6 +10,7 @@ const ImgBox = styled(Box)(({ theme }) => ({
   width: "6em",
   boxShadow: "3px 4px 8px #888888",
   textAlign: "center",
+  backgroundColor:"#fefefe",
   [theme.breakpoints.down("xs")]: {
     width: "115px",
   },
diff --git a/src/main.css b/src/main.css
index aa8c2b2..42cac0c 100644
--- a/src/main.css
+++ b/src/main.css
@@ -3,8 +3,9 @@ body {
   font-size: 1.2135rem;
   margin: 0 auto;
   width: 100%;
-  background-color: rgb(227, 244, 229);
+  background-color: #fefefe;
   overflow-x: hidden;
+  color:#393232
 }
 
 .App {
diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index 23ff8f0..8560a65 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -88,14 +88,14 @@ export default function FoodOfTheMonth() {
       <Tabs
         value={foodType}
         onChange={(_, value) => handleChange(value)}
-        variant="fullWidth"
-        sx={{ fontWeight: 700 }}
+        variant="fullWidth"     
+        sx={{ fontWeight: 700}}
         aria-label="tabs for the selection of fruits, vegetables or others"
       >
         <Tab
           label={
             <span>
-              <Chip label={num_fruits} sx={{ mr: 1 }} size="small" />
+              <Chip label={num_fruits} sx={{ mr: 1, }} size="small" />
               {t("FoodOfTheMonth_fruitsTabText")}
             </span>
           }
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 29fa429..ed2ec13 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -30,13 +30,15 @@ import { useTranslation } from "react-i18next";
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#13bf8d",
-      light: "#f4fbeb",
-      dark: "#555766",
+      main: "#3A6351",
+      light: "#F2EDD7",
+      dark: "#393232", 
+      
+      
     },
     secondary: {
-      main: "#ff7664", //red
-      dark: "#4071d8", //blue
+      main: "#E48257", //red
+      
     },
   }
 });
@@ -149,7 +151,7 @@ function Layout({ food }: { food: FoodList }) {
 
   return (
     <ThemeProvider theme={theme}>
-      <MainBox bgcolor="primary.white" className="main-container">
+      <MainBox bgcolor="primary.light" className="main-container">
         <Drawer open={state} onClick={toggleDrawer}>
           {sideBarList}
         </Drawer>