diff --git a/public/categories.json b/public/categories.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/Catagories/CatagoriesCard/CatagoriesCard.js b/src/Pages/Catagories/CatagoriesCard/CatagoriesCard.js
index f85c732..a5fe3e6 100644
--- a/src/Pages/Catagories/CatagoriesCard/CatagoriesCard.js
+++ b/src/Pages/Catagories/CatagoriesCard/CatagoriesCard.js
@@ -1,25 +1,25 @@
+import { style } from "@mui/system";
 import React from "react";
 import { Link } from "react-router-dom";
 
-const CatagoriesCard = ({category}) => {
-
-    const {catagoriesCode,catagoriesDescription, catagoriesIcon, catagoriesName } = category
+const CatagoriesCard = ({ category }) => {
+  const {
+    catagoriesCode,
+    catagoriesDescription,
+    catagoriesIcon,
+    catagoriesName,
+  } = category;
 
   return (
-    <Link to={`/category/${category?._id}`}>
-      <div className="rounded-xl bg-gradient-to-r text-center from-green-300 via-blue-500 to-primary p-0.5 shadow-xl transition hover:shadow-sm">
-        <div className="rounded-[10px] bg-white p-4 !pt-10 sm:p-6">
-     
-        <div>
-            <img className="w-28 mx-auto" src={catagoriesIcon} alt="" />
-        </div>
-        <div>
-            <h3 className="text-3xl font-semibold text-neutral">{catagoriesName}</h3>
-            {/* <p className="text-">{catagoriesDescription}</p> */}
-        </div>
-         
+    <Link
+      to={`/category/${category?._id}`}
+      className="relative block overflow-hidden rounded-xl  bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${catagoriesIcon})` }}
+    >
+      <div class="relative bg-black bg-opacity-40 p-8 pt-40 text-white">
+        <h3 class="text-2xl font-bold">{catagoriesName}</h3>
 
-        </div>
+       
       </div>
     </Link>
   );