diff --git a/src/data/products.js b/src/data/products.js
index fee8ace..ff2457c 100644
--- a/src/data/products.js
+++ b/src/data/products.js
@@ -98,13 +98,40 @@ export const products = [
 ]
 
 export const categories = [
-  "Semua",
-  "Laptop",
-  "PC",
-  "Monitor",
-  "Keyboard",
-  "Router",
-  "Switch",
-  "Server",
-  "Access Point"
+  {
+    name: "Semua",
+    icon: "Boxes"
+  },
+  {
+    name: "Laptop",
+    icon: "Laptop"
+  },
+  {
+    name: "PC",
+    icon: "PcCase"
+  },
+  {
+    name: "Monitor",
+    icon: "Monitor"
+  },
+  {
+    name: "Keyboard",
+    icon: "Keyboard"
+  },
+  {
+    name: "Router",
+    icon: "Router"
+  },
+  {
+    name: "Switch",
+    icon: "Network"
+  },
+  {
+    name: "Server",
+    icon: "Server"
+  },
+  {
+    name: "Access Point",
+    icon: "Wifi"
+  }
 ]
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ecccda7..f1a913d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -38,12 +38,17 @@
     </div>
 
     <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
-      <div v-for="cat in categoryList" :key="cat" class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md">
-        <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
-          <Cpu size="22" />
-        </div>
-        <p class="font-bold">{{ cat }}</p>
-      </div>
+<div
+  v-for="cat in categoryList"
+  :key="cat.name"
+  class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md"
+>
+  <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
+    <component :is="iconMap[cat.icon]" :size="22" />
+  </div>
+
+  <p class="font-bold">{{ cat.name }}</p>
+</div>
     </div>
   </section>
 
@@ -71,14 +76,38 @@
 
 <script setup>
 import { computed, ref } from "vue"
-import { Cpu } from "lucide-vue-next"
 import ProductCard from "../components/ProductCard.vue"
-import { products, categories } from "../data/products"
 import { getSavedProducts, setSavedProducts } from "../utils"
+import {
+  Boxes,
+  Laptop,
+  PcCase,
+  Monitor,
+  Keyboard,
+  Router,
+  Network,
+  Server,
+  Wifi
+} from "lucide-vue-next"
+
+import { products, categories } from "../data/products"
 
 const saved = ref(getSavedProducts())
-const categoryList = categories.filter((c) => c !== "Semua").slice(0, 6)
+const categoryList = categories
+  .filter((category) => category.name !== "Semua")
+  .slice(0, 6)
 const latestProducts = computed(() => products.slice(0, 4))
+const iconMap = {
+  Boxes,
+  Laptop,
+  PcCase,
+  Monitor,
+  Keyboard,
+  Router,
+  Network,
+  Server,
+  Wifi
+}
 
 function toggleSave(id) {
   if (saved.value.includes(id)) {