diff --git a/src/pages/categories/Contractors.tsx b/src/pages/categories/Contractors.tsx
index f67ae65d..f57fe793 100644
--- a/src/pages/categories/Contractors.tsx
+++ b/src/pages/categories/Contractors.tsx
@@ -132,43 +132,46 @@ const Contractors: React.FC = () => {
 
   <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
 
-    {/* General Contracting */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-3xl mb-3">🏗️</div>
-      <h3 className="text-lg font-semibold text-gray-800">General Contracting</h3>
-      <p className="text-sm text-gray-500 mt-2">
-        Complete construction projects civil work, structure & site management.
-      </p>
-    </div>
-
-    {/* Design & Build */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-3xl mb-3">🧭</div>
-      <h3 className="text-lg font-semibold text-gray-800">Design & Build</h3>
-      <p className="text-sm text-gray-500 mt-2">
-        End-to-end service: design, engineering, and execution under one contract.
-      </p>
-    </div>
+  {/* General Contracting */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🏗️</div>
+    <h3 className="text-lg font-semibold text-gray-800">General Contracting</h3>
+    <p className="hidden sm:block text-sm text-gray-500 mt-2">
+      Construction, structure & site management.
+    </p>
+  </div>
 
-    {/* Renovation & Remodeling */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-3xl mb-3">🔨</div>
-      <h3 className="text-lg font-semibold text-gray-800">Renovation & Remodeling</h3>
-      <p className="text-sm text-gray-500 mt-2">
-        Home/office refurbishments, extensions, interiors and retrofit works.
-      </p>
-    </div>
+  {/* Design & Build */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🧭</div>
+    <h3 className="text-lg font-semibold text-gray-800">Design & Build</h3>
+    <p className="hidden sm:block text-sm text-gray-500 mt-2">
+      Design, engineering & execution.
+    </p>
+  </div>
 
-    {/* Project Management & Consultancy */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-3xl mb-3">📋</div>
-      <h3 className="text-lg font-semibold text-gray-800">Project Mgmt & Consultancy</h3>
-      <p className="text-sm text-gray-500 mt-2">
-        Cost estimation, scheduling, quality control & permit management.
-      </p>
-    </div>
+  {/* Renovation & Remodeling */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🔨</div>
+    <h3 className="text-lg font-semibold text-gray-800">Renovation & Remodeling</h3>
+    <p className="hidden sm:block text-sm text-gray-500 mt-2">
+      Refurbishments, extensions, interiors & retrofit works.
+    </p>
+  </div>
 
+  {/* Project Management & Consultancy */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">📋</div>
+    <h3 className="text-lg font-semibold text-gray-800">
+      Project Management & Consultancy
+    </h3>
+    <p className="hidden sm:block text-sm text-gray-500 mt-2">
+      Estimation, scheduling, quality control & permits.
+    </p>
   </div>
+
+</div>
+
 </div>
 
 
diff --git a/src/pages/categories/Suppliers.tsx b/src/pages/categories/Suppliers.tsx
index c2351584..ff5aca5c 100644
--- a/src/pages/categories/Suppliers.tsx
+++ b/src/pages/categories/Suppliers.tsx
@@ -235,69 +235,85 @@ const MaterialSupplierPage = () => {
     Popular Material Categories
   </h2>
 
-  <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-5 gap-8 text-center">
+<div className="max-w-6xl mx-auto grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 text-center">
+
+  {/* Cement & Concrete */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🏗️</div>
+    <h3 className="text-lg font-semibold text-gray-800">Cement & Concrete</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Cement, RMC & premium materials.
+    </p>
+  </div>
 
-    {/* Cement */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-gray-500 text-4xl mb-3">🏗️</div>
-      <h3 className="text-lg font-semibold text-gray-800">Cement</h3>
-    </div>
+  {/* Steel & Iron */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">⛓️</div>
+    <h3 className="text-lg font-semibold text-gray-800">Steel & Iron</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      TMT bars, rods & reinforcement.
+    </p>
+  </div>
 
-    {/* Steel & Iron */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-gray-800 text-4xl mb-3">⛓️</div>
-      <h3 className="text-lg font-semibold text-gray-800">Steel & Iron</h3>
-    </div>
+  {/* Bricks & Blocks */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🧱</div>
+    <h3 className="text-lg font-semibold text-gray-800">Bricks & Blocks</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Red bricks, fly ash & AAC.
+    </p>
+  </div>
 
-    {/* Bricks */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-red-600 text-4xl mb-3">🧱</div>
-      <h3 className="text-lg font-semibold text-gray-800">Bricks</h3>
-    </div>
+  {/* Sand & Aggregates */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🏜️</div>
+    <h3 className="text-lg font-semibold text-gray-800">Sand & Aggregates</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      River sand, M-sand, aggregates.
+    </p>
+  </div>
 
-    {/* Sand & Aggregates */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-yellow-600 text-4xl mb-3">🏜️</div>
-      <h3 className="text-lg font-semibold text-gray-800">Sand & Bajri</h3>
-    </div>
+  {/* Wood & Timber */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🪵</div>
+    <h3 className="text-lg font-semibold text-gray-800">Wood & Timber</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Plywood, hardwood & timber.
+    </p>
+  </div>
 
-    {/* Wood & Timber */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-amber-800 text-4xl mb-3">🪵</div>
-      <h3 className="text-lg font-semibold text-gray-800">Wood & Timber</h3>
-    </div>
+  {/* Tiles & Marble */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">⬜</div>
+    <h3 className="text-lg font-semibold text-gray-800">Tiles & Marble</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Tiles, marble, granite & stone.
+    </p>
+  </div>
 
-    {/* Tiles & Marbles */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-indigo-500 text-4xl mb-3">⬜</div>
-      <h3 className="text-lg font-semibold text-gray-800">Tiles & Marble</h3>
-    </div>
+  {/* Paints & Coatings */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🎨</div>
+    <h3 className="text-lg font-semibold text-gray-800">Paints & Coatings</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Interior, exterior, waterproof paints.
+    </p>
+  </div>
 
-    {/* Paints */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-pink-500 text-4xl mb-3">🎨</div>
-      <h3 className="text-lg font-semibold text-gray-800">Paints</h3>
-    </div>
+  {/* Electrical & Plumbing */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🛠️</div>
+    <h3 className="text-lg font-semibold text-gray-800">Electrical & Plumbing</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Wires, pipes, fittings & hardware.
+    </p>
+  </div>
+
+</div>
 
-    {/* Electrical */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-yellow-400 text-4xl mb-3">💡</div>
-      <h3 className="text-lg font-semibold text-gray-800">Electrical</h3>
-    </div>
 
-    {/* Plumbing */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-blue-500 text-4xl mb-3">🚰</div>
-      <h3 className="text-lg font-semibold text-gray-800">Plumbing</h3>
-    </div>
 
-    {/* Glass & Hardware */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-cyan-600 text-4xl mb-3">🪟</div>
-      <h3 className="text-lg font-semibold text-gray-800">Glass & Hardware</h3>
-    </div>
 
-  </div>
 </div>
 
       {/* Registration Form */}
diff --git a/src/pages/categories/Workers.tsx b/src/pages/categories/Workers.tsx
index 65731e98..294fc4ca 100644
--- a/src/pages/categories/Workers.tsx
+++ b/src/pages/categories/Workers.tsx
@@ -64,69 +64,83 @@ const Workers: React.FC = () => {
     Popular Worker Categories
   </h2>
 
-  <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-5 gap-8 text-center">
-
-    {/* Plumber */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-orange-500 text-4xl mb-3">🔧</div>
-      <h3 className="text-lg font-semibold text-gray-800">Plumber</h3>
-    </div>
+<div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+
+  {/* Plumbing Services */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🔧</div>
+    <h3 className="text-lg font-semibold text-gray-800">Plumbing Services</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Installation, repair & water system maintenance.
+    </p>
+  </div>
 
-    {/* Carpenter */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-blue-500 text-4xl mb-3">🪚</div>
-      <h3 className="text-lg font-semibold text-gray-800">Carpenter</h3>
-    </div>
+  {/* Electrical Works */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">💡</div>
+    <h3 className="text-lg font-semibold text-gray-800">Electrical Works</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Wiring, lighting, fittings & safety solutions.
+    </p>
+  </div>
 
-    {/* Mason */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-green-500 text-4xl mb-3">⚒️</div>
-      <h3 className="text-lg font-semibold text-gray-800">Mason</h3>
-    </div>
+  {/* Carpentry & Woodwork */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🪚</div>
+    <h3 className="text-lg font-semibold text-gray-800">Carpentry & Woodwork</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Doors, furniture & custom wood fittings.
+    </p>
+  </div>
 
-    {/* Electrician */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-purple-500 text-4xl mb-3">💡</div>
-      <h3 className="text-lg font-semibold text-gray-800">Electrician</h3>
-    </div>
+  {/* Masonry & Civil Work */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🧱</div>
+    <h3 className="text-lg font-semibold text-gray-800">Masonry & Civil Work</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Brickwork, plaster, concrete & structure.
+    </p>
+  </div>
 
-    {/* Painter */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-red-500 text-4xl mb-3">🎨</div>
-      <h3 className="text-lg font-semibold text-gray-800">Painter</h3>
-    </div>
+  {/* Painting & Finishing */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🎨</div>
+    <h3 className="text-lg font-semibold text-gray-800">Painting & Finishing</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Interior & exterior premium finishes.
+    </p>
+  </div>
 
-    {/* Tiles & Floor Work */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-indigo-500 text-4xl mb-3">🧱</div>
-      <h3 className="text-lg font-semibold text-gray-800">Tiles & Floor Work</h3>
-    </div>
+  {/* Flooring & Tiling */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🧩</div>
+    <h3 className="text-lg font-semibold text-gray-800">Flooring & Tiling</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Tiles, marble, granite & installations.
+    </p>
+  </div>
 
-    {/* Steel Cutter */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-gray-800 text-4xl mb-3">🔩</div>
-      <h3 className="text-lg font-semibold text-gray-800">Steel Cutter</h3>
-    </div>
+  {/* Welding & Fabrication */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">🔥</div>
+    <h3 className="text-lg font-semibold text-gray-800">Welding & Fabrication</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Steel fabrication, welding & metal works.
+    </p>
+  </div>
 
-    {/* Labour */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-yellow-500 text-4xl mb-3">👷</div>
-      <h3 className="text-lg font-semibold text-gray-800">Labour</h3>
-    </div>
+  {/* Skilled Manpower */}
+  <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
+    <div className="text-3xl mb-3">👷</div>
+    <h3 className="text-lg font-semibold text-gray-800">Skilled Manpower</h3>
+    <p className="text-sm text-gray-500 mt-2 hidden sm:block">
+      Labour, technicians & on-site support.
+    </p>
+  </div>
 
-    {/* Welder */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-teal-600 text-4xl mb-3">🔥</div>
-      <h3 className="text-lg font-semibold text-gray-800">Welder</h3>
-    </div>
+</div>
 
-    {/* Steel Fixer */}
-    <div className="cursor-pointer p-6 rounded-2xl border hover:shadow-xl transition bg-gray-50">
-      <div className="text-amber-700 text-4xl mb-3">🛠️</div>
-      <h3 className="text-lg font-semibold text-gray-800">Steel Fixer</h3>
-    </div>
 
-  </div>
 </div>
 
       {/* FORM SECTION */}