diff --git a/src/assets/globalUtlities.ts b/src/assets/globalUtlities.ts
index 568707c..f583ccf 100644
--- a/src/assets/globalUtlities.ts
+++ b/src/assets/globalUtlities.ts
@@ -70,7 +70,7 @@ export const rowProductsData = [
   {
     id: 1,
     title: "title",
-    img: "/imgs/demo_row_products/1.png",
+    img: "./imgs/demo_row_products/1.png",
     price: 20,
     quantity: 0,
     offerAvailable: true,
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index 8dccc1c..e4b4a0a 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -7,7 +7,7 @@ const ProductCard = ({
 }: {
   product: ProductProps | undefined;
   index: number;
-  refreshSite:boolean
+  refreshSite: boolean
 }) => {
   return (
     <div className="w-[100px] md:w-[160px] h-[150px] md:h-[212px] border img-card-p flex-shrink-0 md:mx-2">
diff --git a/src/components/ProductFilterSiderbar.tsx b/src/components/ProductFilterSiderbar.tsx
index 6d50b7a..59247a5 100644
--- a/src/components/ProductFilterSiderbar.tsx
+++ b/src/components/ProductFilterSiderbar.tsx
@@ -53,7 +53,7 @@ export const ProductFilterSiderbar = () => {
         { value: 5, label: '5 stars' },
     ];
     return (
-        <div className="w-full xl:w-1/5 bg-white">
+        <div className="w-full xl:w-1/5 ">
             {/* this style will be displayed untill screen size is 1270px */}
             <div className='flex justify-evenly xl:hidden'>
                 <button className="flexCenter">Sort<PiSortAscending />
@@ -70,6 +70,7 @@ export const ProductFilterSiderbar = () => {
                 <div className="relative mb-6">
                     <h4 className="px-2 py-1 text-center">PRICE</h4>
                     <input
+                    title='Set Your Price Range'
                         type="range"
                         min="0"
                         max="100"
diff --git a/src/components/ProductGroupsTab.tsx b/src/components/ProductGroupsTab.tsx
index 7c1be37..b83f2eb 100644
--- a/src/components/ProductGroupsTab.tsx
+++ b/src/components/ProductGroupsTab.tsx
@@ -2,7 +2,7 @@ import { headerCategories } from "../assets/HeaderCatogoryData"
 
 export const ProductGroupsTab = () => {
     return (
-        <ul className="h-[40px] bg-white flex items-center justify-evenly">{headerCategories?.map((category, index) => <li key={index} className="text-[14px] font-semibold">{category.title}</li>)}
+        <ul className="h-[40px] flex items-center justify-evenly">{headerCategories?.map((category, index) => <li key={index} className="text-[14px] font-semibold">{category.title}</li>)}
         </ul>
     )
 }
diff --git a/src/pages/ProductsGroup.tsx b/src/pages/ProductsGroup.tsx
index 2569b55..0718e05 100644
--- a/src/pages/ProductsGroup.tsx
+++ b/src/pages/ProductsGroup.tsx
@@ -1,14 +1,17 @@
+import { useSelector } from "react-redux"
 import { rowProductsData } from "../assets/globalUtlities"
 import { ProductCard, ProductFilterSiderbar, ProductGroupsTab } from "../paths"
+import { RootState } from "../redux/store"
 
 const ProductsGroup = () => {
+  const darkMode = useSelector((state: RootState) => state?.dark)
   return (
-    <div className="mt-1 md:mt-2">
+    <div className={`mt-1 md:mt-2 ${darkMode?.isEnabled ? "bg-darkModeBg" : "bg-white"} `}>
       <ProductGroupsTab />
       <section className="flex flex-col xl:flex-row mt-2">
         <ProductFilterSiderbar />
-        <div className="flex flex-wrap justify-between gap-2 bg-black ml-2" >
-          {rowProductsData?.map((_item, index) => <ProductCard product={undefined} index={index} refreshSite={false} />)}
+        <div className="flex flex-wrap gap-2  ml-2" >
+          {rowProductsData?.map((item, index) => <ProductCard product={item} index={index} refreshSite={false} />)}
         </div>
       </section>
     </div>