diff --git a/pages/AdminKlinikRuang/index.vue b/pages/AdminKlinikRuang/index.vue
index 58f3a94..356630b 100644
--- a/pages/AdminKlinikRuang/index.vue
+++ b/pages/AdminKlinikRuang/index.vue
@@ -9,39 +9,81 @@
     />
 
     <div class="admin-klinik-ruang-index">
-      <v-row class="mt-4">
-      <v-col
-        v-for="klinikRuang in klinikRuangList"
-        :key="klinikRuang.id"
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-      >
-        <v-card
+      <div v-if="klinikRuangList.length > 0" class="klinik-grid">
+        <div
+          v-for="klinikRuang in klinikRuangList"
+          :key="klinikRuang.id"
           class="klinik-card"
-          elevation="2"
           @click="navigateToKlinik(klinikRuang.kodeKlinik)"
         >
-          <v-card-text class="text-center pa-6">
-            <v-icon size="64" color="warning" class="mb-4">mdi-hospital-building</v-icon>
-            <div class="klinik-name">{{ klinikRuang.namaKlinik }}</div>
-            <v-chip size="small" color="warning" class="mt-2">
-              {{ klinikRuang.kodeKlinik }}
-            </v-chip>
-            <div class="ruang-count mt-3">
-              <v-icon size="16" class="mr-1">mdi-door</v-icon>
-              {{ klinikRuang.ruangList.length }} Ruang
+          <div class="klinik-card-header">
+            <div class="klinik-info">
+              <h3 class="klinik-name">{{ klinikRuang.namaKlinik }}</h3>
+              <div class="klinik-details">
+                <v-chip 
+                  size="x-small" 
+                  :class="klinikRuang.jenisLayanan === 'Reguler' ? 'chip-reguler' : 'chip-eksekutif'"
+                >
+                  {{ klinikRuang.jenisLayanan }}
+                </v-chip>
+                <span class="kode-chip">{{ klinikRuang.kodeKlinik }}</span>
+              </div>
             </div>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+          </div>
+          
+          <div class="klinik-preview">
+            <div class="klinik-room-count">
+              <v-icon size="18" color="primary-600">mdi-door</v-icon>
+              <span>{{ klinikRuang.ruangList.length }} Ruang</span>
+            </div>
+            <div class="klinik-tags">
+              <v-chip
+                v-for="(ruang, idx) in klinikRuang.ruangList.slice(0, 3)"
+                :key="idx"
+                size="small"
+                class="ma-1 chip-preview"
+              >
+                {{ ruang.namaRuang }}
+              </v-chip>
+              <v-chip
+                v-if="klinikRuang.ruangList.length > 3"
+                size="small"
+                class="ma-1 chip-more"
+              >
+                +{{ klinikRuang.ruangList.length - 3 }}
+              </v-chip>
+            </div>
+          </div>
 
-    <div v-if="klinikRuangList.length === 0" class="empty-state">
-      <v-icon size="64" color="grey-lighten-2">mdi-hospital-building-outline</v-icon>
-      <div class="empty-text">Tidak ada klinik ruang yang tersedia</div>
-    </div>
+          <!-- <div class="klinik-card-footer">
+            <v-btn
+              color="primary-600"
+              variant="flat"
+              size="large"
+              block
+              class="btn-view text-white"
+            >
+              <v-icon left>mdi-clipboard-list</v-icon>
+              Kelola Antrian
+            </v-btn>
+          </div> -->
+        </div>
+      </div>
+
+      <div v-else class="empty-state">
+        <v-icon size="64" color="grey-lighten-1">mdi-hospital-building-outline</v-icon>
+        <h3>Tidak Ada Klinik Ruang Tersedia</h3>
+        <p>Silakan tambah klinik ruang terlebih dahulu di halaman master</p>
+        <v-btn
+          color="primary-600"
+          variant="flat"
+          class="mt-4"
+          @click="navigateToSettings"
+        >
+          <v-icon left>mdi-cog</v-icon>
+          Ke Halaman Master
+        </v-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -62,14 +104,18 @@ const klinikRuangList = computed(() => {
 const navigateToKlinik = (kodeKlinik) => {
   router.push(`/adminklinikruang/${kodeKlinik}`);
 };
+
+const navigateToSettings = () => {
+  router.push('/setting/masterklinikruang');
+};
 </script>
 
 <style scoped lang="scss">
 .admin-klinik-ruang-index {
   background: var(--color-neutral-300);
-  min-height: 100vh;
+  min-height: calc(100vh - 80px);
   padding: 16px;
-  border-radius: 0 !important;
+  font-family: 'Inter', 'Roboto', sans-serif;
 }
 
 /* Remove rounded edges from PageHeader component */
@@ -77,44 +123,154 @@ const navigateToKlinik = (kodeKlinik) => {
   border-radius: 0 !important;
 }
 
+.klinik-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
 .klinik-card {
-  border-radius: 12px;
-  border: 1px solid var(--color-neutral-500);
   background: var(--color-neutral-100);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 2px solid var(--color-neutral-400);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-    border-color: var(--color-warning-600);
+    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2);
+    border-color: var(--color-primary-600);
   }
 }
 
-.klinik-name {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--color-neutral-900);
-  margin-bottom: 8px;
-}
-
-.ruang-count {
-  font-size: 13px;
-  color: var(--color-neutral-700);
+.klinik-card-header {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.klinik-info {
+  flex: 1;
+}
+
+.klinik-name {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0 0 8px 0;
+  color: var(--color-neutral-900);
+  line-height: 1.2;
+}
+
+.klinik-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.chip-reguler {
+  background-color: var(--color-primary-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.chip-eksekutif {
+  background-color: var(--color-secondary-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.kode-chip {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  background: var(--color-neutral-400);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.klinik-preview {
+  flex: 1;
+}
+
+.klinik-room-count {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-primary-600);
+  margin-bottom: 12px;
+}
+
+.klinik-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.chip-preview {
+  background-color: var(--color-primary-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+.chip-more {
+  background-color: var(--color-neutral-600) !important;
+  color: var(--color-neutral-100) !important;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.klinik-card-footer {
+  margin-top: auto;
+}
+
+.btn-view {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
 }
 
 .empty-state {
   text-align: center;
-  padding: 64px 16px;
+  padding: 80px 20px;
+  color: var(--color-neutral-700);
+
+  h3 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 24px 0 8px 0;
+    color: var(--color-neutral-800);
+  }
+
+  p {
+    font-size: 16px;
+    color: var(--color-neutral-600);
+  }
 }
 
-.empty-text {
-  font-size: 16px;
-  color: var(--color-neutral-600);
-  margin-top: 16px;
+@media (max-width: 768px) {
+  .admin-klinik-ruang-index {
+    padding: 12px;
+  }
+
+  .klinik-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
 }
 </style>
 
diff --git a/pages/Setting/MasterKlinikRuang.vue b/pages/Setting/MasterKlinikRuang.vue
index 4d1e956..438518c 100644
--- a/pages/Setting/MasterKlinikRuang.vue
+++ b/pages/Setting/MasterKlinikRuang.vue
@@ -55,6 +55,14 @@
             <span class="ml-2 body-3 text-medium">{{ item.namaKlinik }}</span>
           </template>
           
+          <template v-slot:item.namaRuang="{ item }">
+            <span v-if="item.ruangList && item.ruangList.length > 3">
+              {{ item.ruangList.slice(0, 3).map(r => r.namaRuang).join(', ') }}
+              <span class="text-neutral-600"> +({{ item.ruangList.length - 3 }} ruang lainnya)</span>
+            </span>
+            <span v-else>{{ item.namaRuang }}</span>
+          </template>
+          
           <template v-slot:item.layarInformasi="{ item }">
             <v-btn
               size="small"
@@ -66,6 +74,15 @@
               Preview
             </v-btn>
           </template>
+          
+          <template v-slot:item.jenisLayanan="{ item }">
+            <v-chip 
+              size="small" 
+              :class="item.jenisLayanan === 'Reguler' ? 'chip-reguler' : 'chip-eksekutif'"
+            >
+              {{ item.jenisLayanan }}
+            </v-chip>
+          </template>
 
           <template v-slot:item.aksi="{ item }">
             <v-btn
@@ -281,10 +298,14 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useMasterStore } from '@/stores/masterStore';
+import { useClinicStore } from '@/stores/clinicStore';
+import { useRuangStore } from '@/stores/ruangStore';
 
 const masterStore = useMasterStore();
+const clinicStore = useClinicStore();
+const ruangStore = useRuangStore();
 const dialog = ref(false);
 const isEdit = ref(false);
 const formRef = ref(null);
@@ -303,6 +324,7 @@ const headers = ref([
   { title: 'Nama Klinik', value: 'namaKlinik', sortable: true },
   { title: 'Kode', value: 'kodeKlinik', sortable: true },
   { title: 'Nama Ruang', value: 'namaRuang', sortable: true },
+  { title: 'Jenis Layanan', value: 'jenisLayanan', sortable: true },
   { title: 'Layar Informasi', value: 'layarInformasi', sortable: false, width: '150px' },
   { title: 'Aksi', value: 'aksi', sortable: false },
 ]);
@@ -425,6 +447,120 @@ const closePreviewDialog = () => {
   previewItem.value = null;
   previewUrl.value = '';
 };
+
+// Generate rooms from clinics based on spesialis field
+const generateRoomsFromClinics = () => {
+  console.log('🔄 Generating rooms from clinics...');
+  const allRooms = [];
+  let roomIdCounter = 1;
+  
+  // Get all clinics (Reguler from API + Eksekutif from seed)
+  const allClinics = clinicStore.clinics;
+  console.log('📊 Total clinics:', allClinics.length);
+  console.log('📊 Clinics by type:', {
+    Reguler: allClinics.filter(c => c.jenisLayanan === 'Reguler').length,
+    Eksekutif: allClinics.filter(c => c.jenisLayanan === 'Eksekutif').length
+  });
+  
+  allClinics.forEach(clinic => {
+    console.log(`\n  Processing clinic: ${clinic.name} (${clinic.kode}) - ${clinic.jenisLayanan}`);
+    
+    if (clinic.jenisLayanan === 'Reguler') {
+      // For Reguler: check spesialis from API
+      if (clinic.spesialis && Array.isArray(clinic.spesialis) && clinic.spesialis.length > 0) {
+        // Create room ONLY for each specialist (no duplicate clinic-name room)
+        console.log(`  ✅ Has ${clinic.spesialis.length} specialists - creating rooms ONLY from specialists`);
+        clinic.spesialis.forEach((spec, index) => {
+          allRooms.push({
+            id: roomIdCounter++,
+            kodeKlinik: clinic.kode,
+            namaKlinik: clinic.name,
+            kodeRuang: `${clinic.kode}-${spec.idspesialis}`,
+            namaRuang: spec.Spesialis,
+            nomorRuang: (index + 1).toString(),
+            nomorScreen: `${clinic.kode}${index + 1}`,
+            jenisLayanan: 'Reguler'
+          });
+          console.log(`    → Room: ${spec.Spesialis}`);
+        });
+      } else {
+        // Only create 1 room with clinic name when NO spesialis
+        console.log('  ⚠️ No specialists, creating 1 room with clinic name');
+        allRooms.push({
+          id: roomIdCounter++,
+          kodeKlinik: clinic.kode,
+          namaKlinik: clinic.name,
+          kodeRuang: clinic.kode,
+          namaRuang: clinic.name,
+          nomorRuang: '1',
+          nomorScreen: `${clinic.kode}1`,
+          jenisLayanan: 'Reguler'
+        });
+      }
+    } else if (clinic.jenisLayanan === 'Eksekutif') {
+      // For Eksekutif: always 1 room (no spesialis in seed data)
+      console.log('  📦 Eksekutif clinic, creating 1 room');
+      allRooms.push({
+        id: roomIdCounter++,
+        kodeKlinik: clinic.kode,
+        namaKlinik: clinic.name,
+        kodeRuang: clinic.kode,
+        namaRuang: clinic.name,
+        nomorRuang: '1',
+        nomorScreen: `${clinic.kode}1`,
+        jenisLayanan: 'Eksekutif'
+      });
+    } else {
+      console.log(`  ⚠️ Unknown jenisLayanan: ${clinic.jenisLayanan}`);
+    }
+  });
+  
+  console.log(`\n✅ Generated ${allRooms.length} rooms from ${allClinics.length} clinics`);
+  console.log('📋 Rooms by Jenis Layanan:');
+  console.log('  - Reguler:', allRooms.filter(r => r.jenisLayanan === 'Reguler').length);
+  console.log('  - Eksekutif:', allRooms.filter(r => r.jenisLayanan === 'Eksekutif').length);
+  
+  // Update ruangStore with generated rooms
+  const result = ruangStore.replaceAllRooms(allRooms);
+  console.log('💾 Rooms saved to ruangStore:', result.message);
+  
+  return result;
+};
+
+// Fetch clinics and generate rooms on mount
+onMounted(async () => {
+  console.log('🚀 MasterKlinikRuang mounted, fetching clinics...');
+  
+  try {
+    // Fetch clinics from API (uses cache if available)
+    const fetchResult = await clinicStore.fetchRegulerClinics();
+    console.log('📥 Fetch result:', fetchResult);
+    
+    if (!fetchResult.success) {
+      snackbar.value = {
+        show: true,
+        message: fetchResult.message,
+        color: 'warning'
+      };
+    }
+    
+    // Generate rooms based on fetched data
+    const generateResult = generateRoomsFromClinics();
+    
+    snackbar.value = {
+      show: true,
+      message: generateResult.message,
+      color: 'success'
+    };
+  } catch (error) {
+    console.error('❌ Error in onMounted:', error);
+    snackbar.value = {
+      show: true,
+      message: `Error: ${error.message}`,
+      color: 'error'
+    };
+  }
+});
 </script>
 
 <style scoped lang="scss">
@@ -689,6 +825,22 @@ $font-weight-semibold: 600;
   line-height: 16px;
 }
 
+.chip-reguler {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-eksekutif {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 // ============================================
 // RUANG ITEMS
 // ============================================
diff --git a/stores/clinicStore.js b/stores/clinicStore.js
index e4c9388..22a668f 100644
--- a/stores/clinicStore.js
+++ b/stores/clinicStore.js
@@ -830,6 +830,7 @@ export const useClinicStore = defineStore('clinic', () => {
               autoShift: false,
               jadwalKlinik: parsed.jadwalKlinik,
               tanggalTutup: [],
+              spesialis: item.spesialis || [], // Preserve spesialis for room generation
               jenisLayanan: "Reguler",
             };
           });
diff --git a/stores/ruangStore.js b/stores/ruangStore.js
index c0e9355..3de9726 100644
--- a/stores/ruangStore.js
+++ b/stores/ruangStore.js
@@ -280,6 +280,53 @@ export const useRuangStore = defineStore('ruang', () => {
     return deleteKlinikRuang(ruangId);
   };
 
+  // New method for replacing all rooms (used by MasterKlinikRuang when generating from API)
+  const replaceAllRooms = (newRoomsData) => {
+    // Group rooms by clinic CODE + JENIS LAYANAN (to keep Reguler and Eksekutif separate)
+    const groupedByClinic = {};
+    
+    newRoomsData.forEach(room => {
+      // Use kodeKlinik + jenisLayanan as key to separate same clinic with different service types
+      const key = `${room.kodeKlinik}-${room.jenisLayanan}`;
+      
+      if (!groupedByClinic[key]) {
+        groupedByClinic[key] = {
+          id: room.id || generateRoomId(),
+          kodeKlinik: room.kodeKlinik,
+          namaKlinik: room.namaKlinik,
+          jenisLayanan: room.jenisLayanan,
+          ruangList: []
+        };
+      }
+      
+      groupedByClinic[key].ruangList.push({
+        nomorRuang: room.nomorRuang,
+        namaRuang: room.namaRuang,
+        nomorScreen: room.nomorScreen,
+        kodeRuang: room.kodeRuang
+      });
+    });
+    
+    // Convert to array and add display names
+    const newRuangData = Object.values(groupedByClinic).map((clinic, index) => ({
+      ...clinic,
+      no: index + 1,
+      namaRuang: clinic.ruangList.map(r => r.namaRuang).join(', ')
+    }));
+    
+    ruangData.value = newRuangData;
+    
+    return {
+      success: true,
+      message: `${newRuangData.length} klinik dengan total ${newRoomsData.length} ruangan berhasil dimuat`
+    };
+  };
+
+  // Helper to generate unique room ID
+  const generateRoomId = () => {
+    return Date.now() + Math.floor(Math.random() * 1000);
+  };
+
   return {
     // State
     masterKlinikList,
@@ -306,6 +353,9 @@ export const useRuangStore = defineStore('ruang', () => {
     addRuang,
     updateRuang,
     deleteRuang,
+    
+    // New method for API-based room generation
+    replaceAllRooms,
   };
 }, {
   persist: {