diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index 02bf8d1..e42f382 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -20,88 +20,76 @@
     </div>
 
     <div class="anjungan-container">
-      <v-card elevation="0" class="main-content-card">
-        <v-card-text class="pa-6">
-          <v-row>
-            <v-col
-            v-for="clinic in filteredClinics"
-            :key="clinic.id"
-            cols="12"
-            sm="6"
-            md="4"
-            lg="3"
-            class="pa-2"
-          >
-            <v-card
-              :class="{
-                'clinic-card': true,
-                'clinic-available': clinic.available,
-                'clinic-closed': !clinic.available,
-              }"
-              :disabled="!clinic.available"
-              @click="selectClinic(clinic)"
-              elevation="0"
-            >
-              <v-card-text class="clinic-content">
-                <h3 class="clinic-name">
-                  {{ clinic.name }}
-                </h3>
+      <div v-if="filteredClinics.length > 0" class="clinic-grid">
+        <v-card
+          v-for="clinic in filteredClinics"
+          :key="clinic.id"
+          :class="{
+            'clinic-card': true,
+            'clinic-available': clinic.available,
+            'clinic-closed': !clinic.available,
+          }"
+          :disabled="!clinic.available"
+          @click="selectClinic(clinic)"
+          elevation="0"
+        >
+          <v-card-text class="clinic-content">
+            <h3 class="clinic-name">
+              {{ clinic.name }}
+            </h3>
 
-                <div class="doctor-info">
-                  <v-icon
-                    size="14"
-                    :color="
-                      clinic.available
-                        ? 'var(--color-primary-600)'
-                        : 'var(--color-neutral-600)'
-                    "
-                  >
-                    mdi-doctor
-                  </v-icon>
-                  <span>{{ getDisplayDoctorInfo(clinic) }}</span>
-                </div>
+            <div class="doctor-info">
+              <v-icon
+                size="14"
+                :color="
+                  clinic.available
+                    ? 'var(--color-primary-600)'
+                    : 'var(--color-neutral-600)'
+                "
+              >
+                mdi-doctor
+              </v-icon>
+              <span>{{ getDisplayDoctorInfo(clinic) }}</span>
+            </div>
 
-                <div class="schedule-info">
-                  <v-icon
-                    size="12"
-                    :color="
-                      clinic.available
-                        ? 'var(--color-neutral-600)'
-                        : 'var(--color-neutral-600)'
-                    "
-                  >
-                    mdi-clock-outline
-                  </v-icon>
-                  <span>{{ clinic.schedule || "Tidak tersedia" }}</span>
-                </div>
+            <div class="schedule-info">
+              <v-icon
+                size="12"
+                :color="
+                  clinic.available
+                    ? 'var(--color-neutral-600)'
+                    : 'var(--color-neutral-600)'
+                "
+              >
+                mdi-clock-outline
+              </v-icon>
+              <span>{{ clinic.schedule || "Tidak tersedia" }}</span>
+            </div>
 
-                <div class="clinic-icon-wrapper">
-                  <v-icon
-                    :icon="clinic.icon"
-                    size="28"
-                    :color="
-                      clinic.available
-                        ? 'var(--color-primary-600)'
-                        : 'var(--color-neutral-100)'
-                    "
-                  ></v-icon>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
+            <div class="clinic-icon-wrapper">
+              <v-icon
+                :icon="clinic.icon"
+                size="28"
+                :color="
+                  clinic.available
+                    ? 'var(--color-primary-600)'
+                    : 'var(--color-neutral-100)'
+                "
+              ></v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </div>
 
-        <div v-if="filteredClinics.length === 0" class="empty-state">
-          <v-icon size="48" color="grey-lighten-1"
-            >mdi-hospital-marker-outline</v-icon
-          >
-          <h3 class="empty-title">Tidak ada klinik yang sesuai</h3>
-          <p class="empty-subtitle">
-            Anjungan ini belum memiliki klinik terpilih
-          </p>
-        </div>
-      </v-card-text>
-    </v-card>
+      <div v-if="filteredClinics.length === 0" class="empty-state">
+        <v-icon size="48" color="grey-lighten-1"
+          >mdi-hospital-marker-outline</v-icon
+        >
+        <h3 class="empty-title">Tidak ada klinik yang sesuai</h3>
+        <p class="empty-subtitle">
+          Anjungan ini belum memiliki klinik terpilih
+        </p>
+      </div>
 
     <v-dialog
       v-model="showVisitTypeDialog"
@@ -1378,16 +1366,11 @@ watch(lastRegisteredPatient, (newVal) => {
   line-height: 22px;
 }
 
-.main-content-card {
-  border-radius: 12px;
-  border: 1px solid var(--color-neutral-500);
-  background: var(--color-neutral-100);
-  max-height: calc(100vh - 180px);
-  overflow-y: auto;
-}
-
-.main-content-card .v-card-text {
-  padding: 16px !important;
+.clinic-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+  width: 100%;
 }
 
 /* CLINIC CARD - Improved Hierarchy */