diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index eaba9b9..8307f71 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -30,43 +30,39 @@
           Gagal memuat kategori.
         </div>
 
-        <!-- Kategori Grid -->
-        <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"
+  <!-- Kategori Grid -->
+    <div 
+      v-else-if="categories.length > 0" 
+      class="mt-12 flex flex-wrap justify-center gap-6"
+    >
+      <div 
+        v-for="category in categories" 
+        :key="category.id + '-' + category.foto"
+        @click="onCategoryClick(category)"
+        class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
+      >
+        <img 
+          v-if="category.foto" 
+          :src="`http://localhost:8000${category.foto}`" 
+          :alt="category.nama" 
+          class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
         >
-          <div 
-            v-for="category in categories" 
-            :key="category.id + '-' + category.foto"
-            @click="onCategoryClick(category)"
-            class="group cursor-pointer bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300"
-          >
-            <!-- Image -->
-            <div class="relative w-full aspect-[4/5] overflow-hidden">
-              <img 
-                v-if="category.foto" 
-                :src="`http://localhost:8000${category.foto}`" 
-                :alt="category.nama" 
-                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-              >
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div>
-              <h3 class="absolute bottom-3 left-3 text-xl font-semibold text-white drop-shadow-lg">
-                {{ category.nama }}
-              </h3>
-            </div>
-
-            <!-- Body -->
-            <div class="p-4">
-              <p class="text-gray-600 text-sm leading-snug line-clamp-3">
-                {{ category.deskripsi }}
-              </p>
-            </div>
-          </div>
+        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
+        <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
+          <h3 class="text-xl font-semibold mb-2">
+            {{ category.nama }}
+          </h3>
+          <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
+            {{ category.deskripsi }}
+          </p>
         </div>
+      </div>
+    </div>
+
+    <div v-else class="mt-12 text-center text-gray-500">
+      Belum ada kategori.
+    </div>
 
-        <div v-else class="mt-12 text-center text-gray-500">
-          Belum ada kategori.
-        </div>
 
         <!-- Header Templates -->
         <div class="mt-20 text-center">