diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index 57a4943..ddc98b3 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -30,13 +30,13 @@
     <!-- 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"
+      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-full"
+        class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
       >
         <!-- Foto portrait -->
         <img 
@@ -50,9 +50,13 @@
         <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">
+        <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>