diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index f0f856e..57a4943 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto py-8">
+  <div class="max-w-7xl mx-auto px-4 py-8">
     <!-- Back button -->
     <div class="mb-8">
       <NuxtLink 
@@ -28,22 +28,33 @@
     </div>
 
     <!-- Kategori Grid -->
-    <div v-else-if="categories.length > 0" class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+    <div 
+      v-else-if="categories.length > 0" 
+      class="mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
+    >
       <div 
         v-for="category in categories" 
         :key="category.id + '-' + category.foto"
         @click="onCategoryClick(category)"
-        class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
+        class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-full"
       >
+        <!-- Foto portrait -->
         <img 
           v-if="category.foto" 
           :src="`http://localhost:8000${category.foto}`" 
           :alt="category.nama" 
-          class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300"
+          class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
         >
-        <div class="p-6 bg-white">
-          <h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
-          <p class="text-gray-500 mt-2">{{ category.deskripsi }}</p>
+        
+        <!-- Overlay hitam transparan -->
+        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
+
+        <!-- Teks kategori & deskripsi -->
+        <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
+          <h3 class="text-xl font-semibold">{{ category.nama }}</h3>
+          <p class="text-sm mt-1 break-words leading-snug">
+            {{ category.deskripsi }}
+          </p>
         </div>
       </div>
     </div>
@@ -55,7 +66,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, onActivated } from 'vue'
 
 // Event emit ke parent
 const emit = defineEmits(['category-selected'])
@@ -83,23 +94,13 @@ const fetchCategories = async () => {
 onMounted(fetchCategories)
 onActivated(fetchCategories)
 
-// Panggil saat component mounted
-fetchCategories()
-
 // Klik kategori
 const onCategoryClick = (category) => {
   emit('category-selected', category)
 }
 
-// Optional: watch categories untuk debugging
+// Debugging (opsional)
 watch(categories, (val) => {
   console.log('Categories:', val)
 })
 </script>
-
-<style scoped>
-/* Optional hover effect */
-.group:hover img {
-  transform: scale(1.1);
-}
-</style>