diff --git a/pvc-vue/src/components/VMDetail.vue b/pvc-vue/src/components/VMDetail.vue
index 8baefca..2dced00 100644
--- a/pvc-vue/src/components/VMDetail.vue
+++ b/pvc-vue/src/components/VMDetail.vue
@@ -1,113 +1,79 @@
 <template>
   <div class="vm-detail">
     <!-- Basic Info Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.info }">
-      <!-- Only show header when collapsed -->
-      <div v-if="!sections.info" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">VM Information</h6>
-          </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('info')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
+    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+      <div class="info-row">
+        <ValueCard 
+          title="State" 
+          :value="vm.state || 'Unknown'"
+          :status="getStateColor(vm.state)"
+        />
+        <ValueCard 
+          title="Node" 
+          :value="vm.node || 'N/A'"
+        />
+        <ValueCard 
+          title="CPUs" 
+          :value="vm.vcpus || 0"
+        />
+        <ValueCard 
+          title="Memory" 
+          :value="formatMemory(vm.memory)"
+        />
       </div>
-      <!-- Content when expanded -->
-      <div v-show="sections.info" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="info-cards">
-            <ValueCard title="Current State" :value="vm.state" :status="getStateColor(vm.state)" />
-            <ValueCard title="Virtual CPUs" :value="vm.vcpu" />
-            <ValueCard title="Memory (MB)" :value="vm.memory" />
-            <ValueCard title="Host Node" :value="vm.node" />
-            <ValueCard title="Migration Status" :value="vm.migrated || 'No'" />
-          </div>
-        </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('info')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
+    </CollapsibleSection>
+
+    <!-- Resources Section -->
+    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+      <div class="resources-row">
+        <ValueCard 
+          title="Disk Size" 
+          :value="formatStorage(vm.disk_size)"
+        />
+        <ValueCard 
+          title="Network IPs" 
+          :value="vm.ips?.join(', ') || 'None'"
+        />
       </div>
-    </div>
+    </CollapsibleSection>
 
     <!-- Networks Section -->
-    <template v-if="vm.networks && vm.networks.length > 0">
-      <div v-for="network in vm.networks" :key="network.vni" class="section-container" :class="{ 'collapsed': !sections[`network_${network.vni}`] }">
-        <!-- Only show header when collapsed -->
-        <div v-if="!sections[`network_${network.vni}`]" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Network Interface {{ network.vni }}</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Content when expanded -->
-        <div v-show="sections[`network_${network.vni}`]" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="info-cards">
-              <ValueCard title="Interface Type" :value="network.type" />
-              <ValueCard title="MAC Address" :value="network.mac" />
-              <ValueCard title="Network Model" :value="network.model" />
-              <ValueCard title="Network Source" :value="network.source" />
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
+    <CollapsibleSection 
+      v-if="vm.networks?.length" 
+      title="Network Interfaces" 
+      :initially-expanded="sections.networks"
+    >
+      <div class="networks-row">
+        <div v-for="network in vm.networks" :key="network.vni" class="network-card">
+          <ValueCard title="Interface" :value="network.vni" />
+          <ValueCard title="Type" :value="network.type" />
+          <ValueCard title="MAC" :value="network.mac" />
+          <ValueCard title="Source" :value="network.source" />
         </div>
       </div>
-    </template>
+    </CollapsibleSection>
 
-    <!-- Disks Section -->
-    <template v-if="vm.disks && vm.disks.length > 0">
-      <div v-for="disk in vm.disks" :key="disk.dev" class="section-container" :class="{ 'collapsed': !sections[`disk_${disk.dev}`] }">
-        <!-- Only show header when collapsed -->
-        <div v-if="!sections[`disk_${disk.dev}`]" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Disk {{ disk.dev }}</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Content when expanded -->
-        <div v-show="sections[`disk_${disk.dev}`]" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="info-cards">
-              <ValueCard title="Storage Type" :value="disk.type" />
-              <ValueCard title="Storage Pool" :value="getDiskPool(disk.name)" />
-              <ValueCard title="Volume Name" :value="getDiskVolume(disk.name)" />
-              <ValueCard title="Bus Interface" :value="disk.bus" />
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
+    <!-- Storage Section -->
+    <CollapsibleSection 
+      v-if="vm.disks?.length" 
+      title="Storage" 
+      :initially-expanded="sections.storage"
+    >
+      <div class="storage-row">
+        <div v-for="disk in vm.disks" :key="disk.dev" class="storage-card">
+          <ValueCard title="Device" :value="disk.dev" />
+          <ValueCard title="Type" :value="disk.type" />
+          <ValueCard title="Bus" :value="disk.bus" />
+          <ValueCard title="Source" :value="disk.name" />
         </div>
       </div>
-    </template>
+    </CollapsibleSection>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
+import CollapsibleSection from './CollapsibleSection.vue';
 import ValueCard from './ValueCard.vue';
 
 const props = defineProps({
@@ -117,58 +83,34 @@ const props = defineProps({
   }
 });
 
-// Dynamic sections state
+// Section visibility state
 const sections = ref({
-  info: true
+  info: true,
+  resources: true,
+  networks: true,
+  storage: true
 });
 
-// Initialize sections for networks and disks
-onMounted(() => {
-  if (props.vm.networks) {
-    props.vm.networks.forEach(network => {
-      sections.value[`network_${network.vni}`] = true;
-    });
-  }
-  if (props.vm.disks) {
-    props.vm.disks.forEach(disk => {
-      sections.value[`disk_${disk.dev}`] = true;
-    });
-  }
-});
-
-const toggleSection = (section) => {
-  sections.value[section] = !sections.value[section];
-};
-
+// Helper functions
 const getStateColor = (state) => {
   if (!state) return '';
-  
   switch(state.toLowerCase()) {
-    case 'start':
-      return 'success';
-    case 'migrate':
-    case 'unmigrate':
-    case 'disable':
-    case 'provision':
-      return 'info';
-    case 'shutdown':
-    case 'restart':
-      return 'warning';
-    case 'stop':
-      return 'danger';
-    case 'mirror':
-      return 'purple';
-    default:
-      return '';
+    case 'start': return 'success';
+    case 'stop': return 'danger';
+    case 'disable': return 'warning';
+    default: return '';
   }
 };
 
-const getDiskPool = (name) => {
-  return name ? name.split('/')[0] : '';
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  return Math.round(memoryMB / 1024) + ' GB';
 };
 
-const getDiskVolume = (name) => {
-  return name ? name.split('/')[1] : '';
+const formatStorage = (sizeGB) => {
+  if (!sizeGB) return '0 GB';
+  if (sizeGB < 1024) return sizeGB + ' GB';
+  return (sizeGB / 1024).toFixed(1) + ' TB';
 };
 </script>
 
@@ -177,142 +119,39 @@ const getDiskVolume = (name) => {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  width: 100%;
 }
 
-/* Section styling - match Overview/Node pages exactly */
-.section-container {
-  position: relative;
-}
-
-.section-content-wrapper {
-  display: flex;
-  position: relative;
-}
-
-.section-content {
-  flex: 1;
-  min-width: 0;
-  padding-right: 40px;
-}
-
-/* Toggle button styling */
-.toggle-column {
-  position: absolute;
-  top: 4px;
-  right: 0;
-  width: 40px;
-  height: 30px;
-  z-index: 10;
-  padding-left: 6px;
-}
-
-.section-toggle {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  transition: all 0.2s;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.section-toggle:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #333;
-}
-
-.section-toggle:focus {
-  outline: none;
-}
-
-/* Collapsed section header */
-.collapsed-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
-  height: 38px;
-  width: 100%;
-}
-
-.collapsed-section-header .card-title {
-  margin: 0;
-  color: #495057;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-/* Card grid layout */
-.info-cards {
+.info-row,
+.resources-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 0.5rem;
   width: 100%;
 }
 
-/* Metric card styles */
-:deep(.metric-card) {
-  min-width: 180px;
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.125);
+.networks-row,
+.storage-row {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.network-card,
+.storage-card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.02);
   border-radius: 0.25rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
 }
 
-:deep(.metric-card .card-header) {
-  background-color: rgba(0, 0, 0, 0.03);
-  padding: 0.5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  height: 38px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+@media (min-width: 1201px) {
+  .info-row { grid-template-columns: repeat(4, 1fr); }
+  .resources-row { grid-template-columns: repeat(2, 1fr); }
 }
 
-:deep(.card-header h6) {
-  font-size: 0.95rem;
-  font-weight: 600;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0;
-}
-
-:deep(.metric-card .card-body) {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-:deep(.metric-card .metric-value) {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-align: center;
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
-.metric-label {
-  color: #495057;
-  font-weight: 600;
+@media (max-width: 1200px) {
+  .info-row { grid-template-columns: repeat(2, 1fr); }
+  .resources-row { grid-template-columns: 1fr; }
 }
 </style> 
\ No newline at end of file
diff --git a/pvc-vue/src/components/VMOverview.vue b/pvc-vue/src/components/VMOverview.vue
index 8882494..f2ee0ad 100644
--- a/pvc-vue/src/components/VMOverview.vue
+++ b/pvc-vue/src/components/VMOverview.vue
@@ -1,149 +1,125 @@
 <template>
-  <!-- VM Selector Controls -->
-  <div class="vm-controls-container">
-    <div class="controls-row">
-      <button 
-        class="btn btn-outline-secondary list-toggle-btn" 
-        @click="toggleVMList"
-        :class="{ 'active': showVMList }"
-      >
-        <i class="fas fa-list"></i> List VMs
-      </button>
-      
-      <div class="search-box">
-        <i class="fas fa-search search-icon"></i>
-        <input 
-          type="text" 
-          placeholder="Search VMs..." 
-          :value="showVMList ? searchQuery : (selectedVMData?.name || '')"
-          @input="handleSearch"
-          @focus="handleSearchFocus"
-          @blur="handleSearchBlur"
-          class="form-control search-input"
-        >
+  <div class="overview-container">
+    <!-- VM Controls -->
+    <div class="vm-controls-container">
+      <div class="controls-row">
         <button 
-          v-if="searchQuery && showVMList" 
-          class="btn-clear" 
-          @click="clearSearch"
+          class="btn btn-outline-secondary list-toggle-btn" 
+          @click="toggleVMList"
+          :class="{ 'active': showVMList }"
         >
-          <i class="fas fa-times"></i>
+          <i class="fas fa-list"></i> List VMs
         </button>
-      </div>
-      
-      <div class="filter-dropdown">
-        <button 
-          class="btn btn-outline-secondary dropdown-toggle" 
-          :disabled="!showVMList"
-          @click="toggleFilterMenu"
-        >
-          <i class="fas fa-filter"></i> Filters
-          <span v-if="activeFiltersCount > 0" class="filter-badge">{{ activeFiltersCount }}</span>
-        </button>
-        <div class="filter-menu" v-show="showFilterMenu">
-          <div class="filter-section">
-            <h6>Status</h6>
-            <div class="filter-options-dropdown">
-              <div class="filter-pills">
-                <button 
-                  v-for="state in availableStates" 
-                  :key="state"
-                  class="filter-pill"
-                  :class="{ 'active': appliedFilters.states[state] }"
-                  @click="toggleFilter('states', state)"
-                >
-                  {{ state }}
-                </button>
+        
+        <div class="search-box">
+          <i class="fas fa-search search-icon"></i>
+          <input 
+            type="text" 
+            placeholder="Search VMs..." 
+            :value="showVMList ? searchQuery : (selectedVMData?.name || '')"
+            @input="handleSearch"
+            @focus="handleSearchFocus"
+            @blur="handleSearchBlur"
+            class="form-control search-input"
+          >
+          <button 
+            v-if="searchQuery && showVMList" 
+            class="btn-clear" 
+            @click="clearSearch"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        
+        <div class="filter-dropdown">
+          <button 
+            class="btn btn-outline-secondary dropdown-toggle" 
+            :disabled="!showVMList"
+            @click="toggleFilterMenu"
+          >
+            <i class="fas fa-filter"></i> Filters
+            <span v-if="activeFiltersCount > 0" class="filter-badge">{{ activeFiltersCount }}</span>
+          </button>
+          <div class="filter-menu" v-show="showFilterMenu">
+            <div class="filter-section">
+              <h6>Status</h6>
+              <div class="filter-options-dropdown">
+                <div class="filter-pills">
+                  <button 
+                    v-for="state in availableStates" 
+                    :key="state"
+                    class="filter-pill"
+                    :class="{ 'active': appliedFilters.states[state] }"
+                    @click="toggleFilter('states', state)"
+                  >
+                    {{ state }}
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          
-          <div class="filter-section">
-            <h6>Node</h6>
-            <div class="filter-options-dropdown">
-              <div class="filter-pills">
-                <button 
-                  v-for="node in availableNodes" 
-                  :key="node"
-                  class="filter-pill"
-                  :class="{ 'active': appliedFilters.nodes[node] }"
-                  @click="toggleFilter('nodes', node)"
-                >
-                  {{ node }}
-                </button>
+            
+            <div class="filter-section">
+              <h6>Node</h6>
+              <div class="filter-options-dropdown">
+                <div class="filter-pills">
+                  <button 
+                    v-for="node in availableNodes" 
+                    :key="node"
+                    class="filter-pill"
+                    :class="{ 'active': appliedFilters.nodes[node] }"
+                    @click="toggleFilter('nodes', node)"
+                  >
+                    {{ node }}
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          
-          <div class="filter-actions">
-            <button class="btn btn-sm btn-outline-secondary" @click="resetFilters">Reset All</button>
-            <button class="btn btn-sm btn-primary" @click="toggleFilterMenu">Close</button>
+            
+            <div class="filter-actions">
+              <button class="btn btn-sm btn-outline-secondary" @click="resetFilters">Reset All</button>
+              <button class="btn btn-sm btn-primary" @click="toggleFilterMenu">Close</button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- VM List (Full Page) -->
-  <div v-if="showVMList" class="vm-list-fullpage">
-    <div v-if="filteredVMs.length === 0" class="no-vms-message">
-      <p>No VMs match your search criteria</p>
-    </div>
-    <div v-else class="vm-list">
-      <button
-        v-for="vm in filteredVMs"
-        :key="vm.name"
-        class="vm-list-item"
-        :class="{ 'active': selectedVM === vm.name }"
-        @click="selectVM(vm.name)"
-        :ref="el => { if (vm.name === selectedVM) selectedVMRef = el; }"
-      >
-        <div class="vm-item-content">
-          <div class="vm-name">{{ vm.name }}</div>
-          <div class="vm-status" :class="getStatusClass(vm.state)">
-            <i class="fas fa-circle status-indicator"></i>
-            <span>{{ vm.state }}</span>
+    <!-- VM List -->
+    <div v-if="showVMList" class="vm-list-container">
+      <div v-if="filteredVMs.length === 0" class="no-vms-message">
+        <p>No VMs match your search criteria</p>
+      </div>
+      <div v-else class="vm-list">
+        <button
+          v-for="vm in filteredVMs"
+          :key="vm.name"
+          class="vm-list-item"
+          :class="{ 'active': selectedVM === vm.name }"
+          @click="selectVM(vm.name)"
+          :ref="el => { if (vm.name === selectedVM) selectedVMRef = el; }"
+        >
+          <div class="vm-item-content">
+            <div class="vm-name">{{ vm.name }}</div>
+            <div class="vm-status" :class="getStatusClass(vm.state)">
+              <i class="fas fa-circle status-indicator"></i>
+              <span>{{ vm.state }}</span>
+            </div>
           </div>
-        </div>
-      </button>
+        </button>
+      </div>
     </div>
-  </div>
 
-  <!-- VM Details -->
-  <div v-if="selectedVMData && !showVMList" class="vm-details">
-    <!-- Information Section -->
-    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
-      <div class="info-row">
-        <!-- ... VM info cards ... -->
+    <!-- VM Details -->
+    <div v-if="selectedVMData && !showVMList" class="vm-details">
+      <VMDetail :vm="selectedVMData" />
+    </div>
+
+    <!-- No VM Selected Message -->
+    <div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
+      <div class="alert alert-info">
+        <i class="fas fa-info-circle me-2"></i>
+        Please select a VM from the list to view its details
       </div>
-    </CollapsibleSection>
-
-    <!-- Graphs Section -->
-    <CollapsibleSection title="Utilization Graphs" :initially-expanded="sections.graphs">
-      <div class="graphs-row">
-        <!-- ... VM graphs ... -->
-      </div>
-    </CollapsibleSection>
-
-    <!-- Resources Section -->
-    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
-      <div class="resources-row">
-        <!-- ... resource cards ... -->
-      </div>
-    </CollapsibleSection>
-
-    <!-- Network Section -->
-    <CollapsibleSection title="Network" :initially-expanded="sections.network">
-      <div class="network-row">
-        <!-- ... network info ... -->
-      </div>
-    </CollapsibleSection>
-  </div>
-
-  <!-- No VM Selected Message -->
-  <div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
-    <div class="alert alert-info">
-      <i class="fas fa-info-circle me-2"></i>
-      Please select a VM from the list to view its details
     </div>
   </div>
 </template> 
@@ -380,7 +356,7 @@ const handleSearchFocus = () => {
 // Handle search blur
 const handleSearchBlur = (event) => {
   // Don't close the list if clicking on another element within the list
-  const vmList = document.querySelector('.vm-list-fullpage');
+  const vmList = document.querySelector('.vm-list-container');
   if (vmList && vmList.contains(event.relatedTarget)) {
     return;
   }
@@ -443,7 +419,7 @@ const handleClickOutside = (event) => {
   // Only handle this if a VM is selected and the list is showing
   if (selectedVM.value && showVMList.value) {
     const vmControls = document.querySelector('.vm-controls-container');
-    const vmList = document.querySelector('.vm-list-fullpage');
+    const vmList = document.querySelector('.vm-list-container');
     
     // If click is outside both the controls and list, close the list
     if ((!vmControls || !vmControls.contains(event.target)) && 
@@ -513,98 +489,19 @@ watch(() => props.vmData, (newData) => {
 </script> 
 
 <style scoped>
-/* ... continuing from where we left off ... */
-
-.collapsed-section-header .card-title {
-  margin: 0;
-  color: #495057;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.metric-label {
-  color: #495057;
-  font-weight: 600;
-}
-
-/* Responsive Styles */
-@media (max-width: 768px) {
-  .search-filter-container {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .search-box {
-    width: 100%;
-  }
-  
-  .filter-buttons {
-    width: 100%;
-    justify-content: space-between;
-  }
-}
-
-/* Grid layouts for details sections */
-.info-row,
-.graphs-row,
-.resources-row,
-.network-row {
-  display: grid;
+.overview-container {
+  display: flex;
+  flex-direction: column;
   gap: 0.5rem;
   width: 100%;
 }
 
-@media (min-width: 1201px) {
-  .info-row {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .graphs-row {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .resources-row {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .network-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 801px) and (max-width: 1200px) {
-  .info-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .graphs-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .resources-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .network-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 800px) {
-  .info-row,
-  .graphs-row,
-  .resources-row,
-  .network-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* VM Controls */
 .vm-controls-container {
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
   padding: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .controls-row {
@@ -675,24 +572,20 @@ watch(() => props.vmData, (newData) => {
 }
 
 /* VM List styles */
-.vm-list-fullpage {
+.vm-list-container {
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
-  margin-bottom: 1rem;
   overflow: hidden;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 200px);
+  margin-bottom: 0.5rem;
 }
 
 .vm-list {
   display: flex;
   flex-direction: column;
   width: 100%;
-  overflow-y: auto;
   max-height: calc(100vh - 200px);
+  overflow-y: auto;
 }
 
 .vm-list-item {
@@ -771,15 +664,16 @@ watch(() => props.vmData, (newData) => {
 }
 
 .no-vm-selected {
-  padding: 2rem;
   text-align: center;
+  padding: 2rem;
 }
 
 /* VM Details */
 .vm-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
 }
 
 /* Filter menu styles */