diff --git a/src/App.tsx b/src/App.tsx
index 18453fd..1a45f47 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,7 +37,7 @@ const App: FC<ProductProps> = () => {
   }
 
   return (
-    <div className={`${DarkMode?.isEnabled ? "dark:bg-darkModeBg text-darkModeText" : "bg-white"} relative`}>
+    <div className={`${DarkMode?.isEnabled ? "dark:bg-darkModeBg text-darkModeText" : "bg-gradient-primary from-primary-start to-parimary-end"} relative`}>
       {showPopUp && <PopupCard setShowPopUp={setShowPopUp} />}
       <Header toggleDarkMode={() => { }} />
       <Suspense fallback={<div className="text-center mt-10">Loading...</div>} >
diff --git a/src/components/CustomProductsRows.tsx b/src/components/CustomProductsRows.tsx
index 8230ed1..a0ee0e0 100644
--- a/src/components/CustomProductsRows.tsx
+++ b/src/components/CustomProductsRows.tsx
@@ -64,7 +64,7 @@ const CustomProductsRows: FC<RowProps> = ({ title, endProducts, starProducts })
     // e.preventDefault(); // Prevent the default window scroll behavior when using touch events (optional)
   };
   return (
-    <div className={`relative ${darkMode?.isEnabled ? "bg-darkModeBg text-darkModeText" : "bg-white"} m-2 `} onWheel={handleScroll} >
+    <div className={`relative ${darkMode?.isEnabled ? "bg-darkModeBg text-darkModeText" : ""} m-2 `} onWheel={handleScroll} >
       <Link to="/ProductGallery" >
         <button type="button" title="Display More products" onClick={() => setRefreshSite(true)}>
           {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6b4eae7..ca76628 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -41,7 +41,7 @@ export const Header: FC<HeaderProps> = () => {
     dispatch(toggleDarkMode())
   }
   return (
-    <header className={`h-[50px] ${darkMode?.isEnabled ? " bg-darkModeBg text-darkModeText" : "bg-white"} md:h-[66px] flex items-center justify-around   md:flex-row  md:justify-between relative`}>
+    <header className={`h-[50px] ${darkMode?.isEnabled ? " bg-darkModeBg text-darkModeText" : "bg-secondaryColor"} md:h-[66px] flex items-center justify-around   md:flex-row  md:justify-between relative`}>
       {/* Logo */}
       <div className="flex items-center gap-4 md:gap-0 ">
         <button type="button" title="Click to toggle" onClick={() => setToggleMenu(!toggleMenu)}>
diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx
index 7b03a7a..afeb9e6 100644
--- a/src/components/HeaderCategory.tsx
+++ b/src/components/HeaderCategory.tsx
@@ -35,7 +35,7 @@ export const HeaderCategory: FC<headerCategoriesProps> = () => {
   }, [])
 
   return (
-    <div className={`flex gap-1 flex-shrink-0 justify-between ${DarkMode?.isEnabled ? "bg-slate-800 text-white" : "bg-[#e4adff] md:bg-white"}  md:gap-3 header-category-img-p  relative`}>
+    <div className={`flex gap-1 flex-shrink-0 justify-between ${DarkMode?.isEnabled ? "bg-slate-800 text-white" : ""}  md:gap-3 header-category-img-p  relative`}>
       {headerCategories?.map((category, index) => (
         <Link to="/productsGroup" key={index}>
           <div
diff --git a/tailwind.config.js b/tailwind.config.js
index 9b79ebf..37e877f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,8 @@ export default {
         robo:['Roboto','sans-serif']
       },
       backgroundColor:{
+        primaryColor: "#e2dfd2",
+        secondaryColor:"#c7b6a3",
         lightGray:"#D1D5DB",
         darkModeBg:"#1f2937"
       },
@@ -21,7 +23,16 @@ export default {
         lightGray:"#D1D5DB",
         primary:"#2874f0"
       },
-      
+      backgroundImage: {
+        'gradient-primary': 'linear-gradient(to right, var(--tw-gradient-stops))',
+        'gradient-secondary': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
+      },
+      gradientColorStops: theme => ({
+        'primary-start': theme('colors.primaryColor'),
+        'primary-end': theme('colors.secondaryColor'),
+        'dark-start': theme('colors.darkModeBg'),
+        'dark-end': theme('colors.dark'),
+      }),
       
     },
   },