diff --git a/.yarnrc.yml b/.yarnrc.yml
index c167cc7bc37..741eac0d3cb 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1,5 +1,3 @@
-approvedGitRepositories:
-  - "**"
 
 enableScripts: false
 
diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 7bdfebc66ec..6dfd78fda74 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -17,6 +17,13 @@ const showLocalComputeSummary = ref(false)
 const showLocalStorageSummary = ref(false)
 let editingComputeItem: ComputeUnit | null = null
 
+// Collapse state
+const isCollapsed = ref(props.lab.collapse === undefined ? true : props.lab.collapse)
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  priceEstimatorStore.updateLabCollapse(props.lab.id, isCollapsed.value)
+}
+
 const computeHeaders = ref<DataTableHeader[]>([
   { title: "Name", align: "start", sortable: true, key: "name" },
   { title: "Machine type", align: "start", sortable: true, key: "machine_type" },
@@ -153,28 +160,48 @@ const removeStorageById = (storageId: number) => {
 </script>
 
 <template>
-  <v-container>
-    <v-sheet class="lab-card ma-0">
-      <v-card style="background-color: #f5f5f5" class="ma-0">
-        <v-row class="ma-2 d-flex" align="center" justify="space-between">
-          <v-btn size="small" icon style="visibility: hidden"> </v-btn>
-          <v-text-field
-            v-model="localTitle"
-            label=""
-            placeholder="Lab name"
-            variant="plain"
-            hide-details
-            density="compact"
-            class="lab-title-input flex-grow-0"
-            @update:model-value="updateTitle"
-          ></v-text-field>
-          <v-btn size="small" icon @click="priceEstimatorStore.removeLab(props.lab.id)">
-            <v-icon size="default">mdi-delete</v-icon>
-          </v-btn>
-        </v-row>
-
-        <v-card flat>
-          <v-card-title>Compute</v-card-title>
+  <v-card class="lab-card mb-6" rounded="xl" elevation="2">
+    <!-- Lab header -->
+    <div class="lab-header d-flex align-center px-5 py-3" @click="toggleCollapse" style="cursor: pointer">
+      <v-btn size="small" variant="text" icon class="mr-1 collapse-toggle" :class="{ 'collapse-toggle--collapsed': isCollapsed }" @click.stop="toggleCollapse">
+        <v-icon>mdi-chevron-down</v-icon>
+        <v-tooltip activator="parent" location="top">{{ isCollapsed ? "Expand lab" : "Collapse lab" }}</v-tooltip>
+      </v-btn>
+
+      <v-icon class="mr-3" color="primary">mdi-flask-outline</v-icon>
+      <v-text-field
+        v-model="localTitle"
+        placeholder="Lab name"
+        variant="plain"
+        hide-details
+        density="compact"
+        class="lab-title-input flex-grow-1"
+        @click.stop
+        @update:model-value="updateTitle"
+      ></v-text-field>
+
+      <transition name="fade">
+        <span class="collapsed-summary mr-3 text-medium-emphasis"> {{ Number(LabSumMonthly || 0).toFixed(2) }}&nbsp;NOK / month </span>
+      </transition>
+
+      <v-tooltip text="Renewal period" location="top">
+        <template v-slot:activator="{ props }">
+          <v-chip size="small" variant="tonal" color="primary" class="mr-2 font-weight-medium" v-bind="props">{{ lab.subscription }}</v-chip>
+        </template>
+      </v-tooltip>
+      <v-btn size="small" variant="text" icon color="error" @click.stop="priceEstimatorStore.removeLab(props.lab.id)">
+        <v-icon>mdi-delete-outline</v-icon>
+        <v-tooltip activator="parent" location="top">Remove lab</v-tooltip>
+      </v-btn>
+    </div>
+
+    <v-expand-transition>
+      <div v-show="!isCollapsed" class="pa-4">
+        <v-card flat rounded="lg" class="section-card mb-4">
+          <div class="section-title d-flex align-center px-4 pt-3">
+            <v-icon size="small" color="primary" class="mr-2">mdi-memory</v-icon>
+            <span>Compute</span>
+          </div>
 
           <v-data-table-virtual :items="selectedCompute" :headers="computeHeaders" hide-default-footer hover item-value="id">
             <template v-slot:item.gpu="{ item }">
@@ -199,8 +226,8 @@ const removeStorageById = (storageId: number) => {
 
             <template v-slot:body.append="{ headers }">
               <tr>
-                <th :colspan="computeHeaders.length + 1" class="text-center">
-                  <v-btn size="small" @click="addMachine" append-icon="mdi-plus"> Add machine </v-btn>
+                <th :colspan="computeHeaders.length + 1" class="text-center py-2">
+                  <v-btn size="small" variant="tonal" color="primary" rounded="lg" class="text-none" @click="addMachine" prepend-icon="mdi-plus"> Add machine </v-btn>
                 </th>
               </tr>
 
@@ -236,8 +263,11 @@ const removeStorageById = (storageId: number) => {
           </v-data-table-virtual>
         </v-card>
 
-        <v-card flat>
-          <v-card-title>Storage</v-card-title>
+        <v-card flat rounded="lg" class="section-card mb-4">
+          <div class="section-title d-flex align-center px-4 pt-3">
+            <v-icon size="small" color="primary" class="mr-2">mdi-database-outline</v-icon>
+            <span>Storage</span>
+          </div>
 
           <v-data-table-virtual
             v-model="props.lab.selectedStorage"
@@ -260,8 +290,8 @@ const removeStorageById = (storageId: number) => {
 
             <template v-slot:body.append="{}">
               <tr>
-                <th :colspan="storageHeaders.length + 1" class="text-center">
-                  <v-btn size="small" @click="addStorage" append-icon="mdi-plus"> Add storage </v-btn>
+                <th :colspan="storageHeaders.length + 1" class="text-center py-2">
+                  <v-btn size="small" variant="tonal" color="primary" rounded="lg" class="text-none" @click="addStorage" prepend-icon="mdi-plus"> Add storage </v-btn>
                 </th>
               </tr>
               <tr v-if="showLocalStorageSummary" v-for="(item, storageType, index) in storageLabSum" :key="storageType">
@@ -295,9 +325,12 @@ const removeStorageById = (storageId: number) => {
             </template>
           </v-data-table-virtual>
         </v-card>
-        <v-card flat class="ma-2">
-          <v-card-title>Lab summary</v-card-title>
-          <v-table>
+        <v-card flat rounded="lg" class="section-card">
+          <div class="section-title d-flex align-center px-4 pt-3">
+            <v-icon size="small" color="primary" class="mr-2">mdi-receipt-text-outline</v-icon>
+            <span>Lab summary</span>
+          </div>
+          <v-table class="summary-table">
             <thead>
               <tr>
                 <th></th>
@@ -327,7 +360,7 @@ const removeStorageById = (storageId: number) => {
                 <td class="text-right v-data-table-column--nowrap">{{ Number(storageLabPriceSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
                 <td class="text-right v-data-table-column--nowrap">{{ Number(storageLabPriceSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
               </tr>
-              <tr class="bg-grey-lighten-3">
+              <tr class="summary-total-row">
                 <td><strong>Total</strong></td>
                 <td></td>
                 <td class="text-right v-data-table-column--nowrap">
@@ -340,8 +373,8 @@ const removeStorageById = (storageId: number) => {
             </tbody>
           </v-table>
         </v-card>
-      </v-card>
-    </v-sheet>
+      </div>
+    </v-expand-transition>
 
     <v-dialog v-model="isComputeModalOpen" max-width="600px" min-width="600px">
       <MachineModal :lab-id="lab.id" :compute-id="lab.selectedCompute.length" :edit-data="editingComputeItem" @close="closeComputeModal" @open-snackbar="openSnackbar" />
@@ -352,12 +385,25 @@ const removeStorageById = (storageId: number) => {
     </v-dialog>
 
     <v-snackbar color="orange-darken-4" v-model="snackbar.show">{{ snackbar.message }}</v-snackbar>
-  </v-container>
+  </v-card>
 </template>
 
 <style scoped>
 .lab-card {
-  padding: 3px;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-info), 0.12);
+  transition: box-shadow 0.2s ease;
+}
+
+.lab-card:hover {
+  box-shadow:
+    0 6px 20px rgba(var(--v-theme-shadow-cool), 0.12),
+    0 2px 6px rgba(var(--v-theme-shadow-warm), 0.06) !important;
+}
+
+.lab-header {
+  background: linear-gradient(135deg, rgb(var(--v-theme-header-gradient-start)) 0%, rgb(var(--v-theme-header-gradient-end)) 100%);
+  border-bottom: 1px solid rgba(var(--v-theme-info), 0.12);
 }
 
 .lab-title-input {
@@ -365,8 +411,70 @@ const removeStorageById = (storageId: number) => {
 }
 
 .lab-title-input :deep(.v-field__input) {
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-align: center;
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: rgb(var(--v-theme-on-surface-strong));
+  padding-top: 0;
+}
+
+.collapse-toggle .v-icon {
+  transition: transform 0.2s ease;
+}
+
+.collapse-toggle--collapsed .v-icon {
+  transform: rotate(-90deg);
+}
+
+.collapsed-summary {
+  font-size: 0.85rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.section-card {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgb(var(--v-theme-surface-bright));
+}
+
+.section-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface-strong));
+  padding-bottom: 4px;
+}
+
+.section-card :deep(.v-data-table) {
+  background: transparent;
+}
+
+.section-card :deep(thead th) {
+  font-weight: 600 !important;
+  color: rgb(var(--v-theme-on-surface-muted)) !important;
+  text-transform: uppercase;
+  font-size: 0.72rem !important;
+  letter-spacing: 0.04em;
+}
+
+.summary-table {
+  background: transparent;
+}
+
+.summary-total-row td {
+  background: rgba(var(--v-theme-info), 0.08);
+}
+
+.summary-total-row td strong {
+  color: rgb(var(--v-theme-primary-darken-1));
 }
 </style>
diff --git a/docs/.vitepress/theme/components/price-estimator/LabModal.vue b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
index 73e45c28d24..6e7d32a1212 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
@@ -47,6 +47,7 @@ const save = () => {
     work: Number(formData.value.work),
     scratch: Number(formData.value.scratch),
     isDefault: true,
+    collapse: false,
   })
   emit("close")
 }
@@ -57,51 +58,56 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-card light class="d-flex justify-center align-center">
-    <v-card-title>Add New Lab</v-card-title>
-    <v-card-text>
-      <v-container>
-        <v-row dense>
-          <v-col cols="12">
-            <v-text-field v-model="formData.name" label="Lab Name" variant="outlined"></v-text-field>
-          </v-col>
+  <v-theme-provider theme="huntCloud" with-background>
+    <v-card rounded="lg">
+      <v-card-title class="d-flex align-center px-5 pt-4">
+        <v-icon color="primary" class="mr-2">mdi-flask-plus-outline</v-icon>
+        <span class="text-h6">Add new lab</span>
+      </v-card-title>
+      <v-card-text>
+        <v-container>
+          <v-row dense>
+            <v-col cols="12">
+              <v-text-field v-model="formData.name" label="Lab Name" variant="outlined"></v-text-field>
+            </v-col>
 
-          <v-col cols="12">
-            <v-select v-model="formData.subscription" :items="subscriptions" label="Renewal Period" variant="outlined"></v-select>
-          </v-col>
+            <v-col cols="12">
+              <v-select v-model="formData.subscription" :items="subscriptions" label="Renewal Period" variant="outlined"></v-select>
+            </v-col>
 
-          <v-col cols="12">
-            <v-autocomplete v-model="formData.machineType" :items="machineType" label="Default Home Machine" variant="outlined" item-title="title" item-value="value">
-              <template #item="{ item, props }">
-                <VDivider v-if="'divider' in item.raw" />
-                <VListSubheader v-else-if="'header' in item.raw" :title="item.raw.header" />
-                <VListItem v-else v-bind="props" :title="item.title" :value="item.value" />
-              </template>
-            </v-autocomplete>
-          </v-col>
+            <v-col cols="12">
+              <v-autocomplete v-model="formData.machineType" :items="machineType" label="Default Home Machine" variant="outlined" item-title="title" item-value="value">
+                <template #item="{ item, props }">
+                  <VDivider v-if="'divider' in item.raw" />
+                  <VListSubheader v-else-if="'header' in item.raw" :title="item.raw.header" />
+                  <VListItem v-else v-bind="props" :title="item.title" :value="item.value" />
+                </template>
+              </v-autocomplete>
+            </v-col>
 
-          <v-col cols="12">
-            <v-select v-model="formData.machineSubscription" :items="machineSubscriptions" label="Home Machine Subscription" variant="outlined"></v-select>
-          </v-col>
+            <v-col cols="12">
+              <v-select v-model="formData.machineSubscription" :items="machineSubscriptions" label="Home Machine Subscription" variant="outlined"></v-select>
+            </v-col>
 
-          <v-col cols="12" sm="6">
-            <v-text-field v-model="formData.archive" label="Archive Storage (TB)" type="number" variant="outlined" min="0" placeholder="0.4"></v-text-field>
-          </v-col>
+            <v-col cols="12" sm="6">
+              <v-text-field v-model="formData.archive" label="Archive Storage (TB)" type="number" variant="outlined" min="0" placeholder="0.4"></v-text-field>
+            </v-col>
 
-          <v-col cols="12" sm="6">
-            <v-text-field v-model="formData.work" label="Work Storage (TB)" type="number" variant="outlined" min="0" placeholder="0.3"></v-text-field>
-          </v-col>
+            <v-col cols="12" sm="6">
+              <v-text-field v-model="formData.work" label="Work Storage (TB)" type="number" variant="outlined" min="0" placeholder="0.3"></v-text-field>
+            </v-col>
 
-          <v-col cols="12" sm="6">
-            <v-text-field v-model="formData.scratch" label="Scratch Storage (TB)" type="number" variant="outlined" min="0" placeholder="0.4"></v-text-field>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-text>
-    <v-card-actions>
-      <v-spacer></v-spacer>
-      <v-btn color="red darken-1" text @click="$emit('close')">Cancel</v-btn>
-      <v-btn color="green darken-1" text @click="save">Add Lab</v-btn>
-    </v-card-actions>
-  </v-card>
+            <v-col cols="12" sm="6">
+              <v-text-field v-model="formData.scratch" label="Scratch Storage (TB)" type="number" variant="outlined" min="0" placeholder="0.4"></v-text-field>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="px-5 pb-4">
+        <v-spacer></v-spacer>
+        <v-btn variant="text" rounded="lg" class="text-none" @click="$emit('close')">Cancel</v-btn>
+        <v-btn variant="flat" color="primary" rounded="lg" class="text-none" prepend-icon="mdi-plus" @click="save">Add lab</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-theme-provider>
 </template>
diff --git a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
index c3690f37140..8dc990699b0 100644
--- a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
@@ -193,9 +193,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-card light class="d-flex justify-center align-center">
-    <v-card-title>
-      <span class="text-h5">Add Compute</span>
+  <v-theme-provider theme="huntCloud" with-background>
+  <v-card rounded="lg">
+    <v-card-title class="d-flex align-center px-5 pt-4">
+      <v-icon color="primary" class="mr-2">mdi-memory</v-icon>
+      <span class="text-h6">{{ editData ? "Edit compute" : "Add compute" }}</span>
     </v-card-title>
     <v-card-text style="width: 100%">
       <v-container>
@@ -245,10 +247,11 @@ onMounted(() => {
         </v-row>
       </v-container>
     </v-card-text>
-    <v-card-actions>
+    <v-card-actions class="px-5 pb-4">
       <v-spacer></v-spacer>
-      <v-btn color="red darken-2" text @click="close()"> Close </v-btn>
-      <v-btn color="green darken-2" text @click="save()"> Save </v-btn>
+      <v-btn variant="text" rounded="lg" class="text-none" @click="close()"> Cancel </v-btn>
+      <v-btn variant="flat" color="primary" rounded="lg" class="text-none" prepend-icon="mdi-content-save-outline" @click="save()"> Save </v-btn>
     </v-card-actions>
   </v-card>
+  </v-theme-provider>
 </template>
diff --git a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
index e0b5dd85a4d..d567cda3a8c 100644
--- a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
+++ b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
@@ -43,52 +43,113 @@ async function handleFileUpload(event: Event) {
 </script>
 
 <template>
-  <v-container v-if="!priceEstimatorStore.isInitializingPriseEstimator">
-    <v-sheet class="group-slider-wrapper ma-auto pt-0" elevation="0" max-width="1120">
-      <v-card-title>Price estimator for HUNT Cloud</v-card-title>
-      <v-card-subtitle> This calculator gives an estimate of how much our services cost </v-card-subtitle>
-
-      <v-container>
-        <v-row justify="space-between">
-          <v-col cols="auto">
-            <v-btn density="default" size="large" dark @click="isLabModalOpen = true">Add lab</v-btn>
-          </v-col>
-
-          <v-col cols="auto">
-            <v-row>
-              <v-col cols="auto" v-if="priceEstimatorStore.labs.length">
-                <v-btn density="default" size="large" dark @click="priceEstimatorStore.clearAllLabs()"> Remove all </v-btn>
-              </v-col>
-
-              <v-col cols="auto">
-                <input ref="fileInput" type="file" style="display: none" accept="application/json" @change="handleFileUpload" />
-                <v-btn density="default" size="large" dark @click="triggerFileUpload">
-                  <v-icon left>mdi-import</v-icon>
-                  Import
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <v-row>
-        <v-col>
-          <LabCard v-for="lab of priceEstimatorStore.labs" :key="lab.id" :lab="lab" />
-        </v-col>
-      </v-row>
-
-      <v-row v-if="priceEstimatorStore.labs.length">
-        <v-col>
-          <TotalBlock />
-        </v-col>
-      </v-row>
-    </v-sheet>
-
-    <v-dialog v-model="isLabModalOpen" max-width="600px">
-      <LabModal @close="isLabModalOpen = false" />
-    </v-dialog>
-
-    <AlertCart v-if="localStorageError.status" title="Error" :message="localStorageError.message"></AlertCart>
-  </v-container>
+  <v-theme-provider theme="huntCloud" with-background>
+    <v-container v-if="!priceEstimatorStore.isInitializingPriseEstimator" class="pe-root pa-0">
+      <v-sheet class="pe-wrapper ma-auto my-6" color="transparent" max-width="1120">
+        <!-- Hero header -->
+        <v-sheet class="pe-hero pa-6 mb-6" rounded="xl" elevation="0">
+          <div class="d-flex align-center mb-2">
+            <v-avatar color="primary" variant="tonal" rounded="lg" size="48" class="mr-4">
+              <v-icon size="28">mdi-calculator-variant-outline</v-icon>
+            </v-avatar>
+            <div>
+              <h2 class="pe-title">Price estimator for HUNT Cloud</h2>
+              <div class="pe-subtitle">Build your labs below to estimate the cost of our services.</div>
+            </div>
+          </div>
+
+          <v-divider class="my-4" />
+
+          <div class="d-flex flex-wrap align-center ga-3">
+            <v-btn color="primary" size="large" rounded="lg" prepend-icon="mdi-flask-plus-outline" class="text-none" @click="isLabModalOpen = true"> Add lab </v-btn>
+
+            <v-spacer />
+
+            <input ref="fileInput" type="file" style="display: none" accept="application/json" @change="handleFileUpload" />
+            <v-btn variant="tonal" color="primary" size="large" rounded="lg" prepend-icon="mdi-import" class="text-none" @click="triggerFileUpload"> Import </v-btn>
+            <v-btn
+              v-if="priceEstimatorStore.labs.length"
+              variant="text"
+              color="error"
+              size="large"
+              rounded="lg"
+              prepend-icon="mdi-delete-sweep-outline"
+              class="text-none"
+              @click="priceEstimatorStore.clearAllLabs()"
+            >
+              Remove all
+            </v-btn>
+          </div>
+        </v-sheet>
+
+        <!-- Empty state -->
+        <v-sheet v-if="!priceEstimatorStore.labs.length" class="pe-empty pa-10 text-center" rounded="xl" elevation="0">
+          <v-icon size="56" color="primary" class="mb-3 pe-empty-icon">mdi-flask-outline</v-icon>
+          <h3 class="pe-empty-title mb-1">No labs yet</h3>
+          <p class="pe-empty-text mb-5">Add your first lab to start estimating your monthly and yearly costs.</p>
+          <v-btn color="primary" size="large" rounded="lg" prepend-icon="mdi-plus" class="text-none" @click="isLabModalOpen = true"> Add your first lab </v-btn>
+        </v-sheet>
+
+        <!-- Labs -->
+        <LabCard v-for="lab of priceEstimatorStore.labs" :key="lab.id" :lab="lab" />
+
+        <TotalBlock v-if="priceEstimatorStore.labs.length" />
+      </v-sheet>
+
+      <v-dialog v-model="isLabModalOpen" max-width="600px">
+        <LabModal @close="isLabModalOpen = false" />
+      </v-dialog>
+
+      <AlertCart v-if="localStorageError.status" title="Error" :message="localStorageError.message"></AlertCart>
+    </v-container>
+  </v-theme-provider>
 </template>
+
+<style scoped>
+.pe-root {
+  font-family: var(--vp-font-family-base, inherit);
+}
+
+.pe-hero {
+  background: linear-gradient(135deg, #f3f8f8 0%, #eef3f3 100%);
+  border: 1px solid rgba(46, 117, 120, 0.12);
+}
+
+.pe-title {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: #1f2d2d;
+  border: none;
+  padding: 0;
+}
+
+.pe-subtitle {
+  margin-top: 2px;
+  font-size: 0.95rem;
+}
+
+.pe-empty {
+  border: 1px dashed rgba(46, 117, 120, 0.3);
+  background: #fafcfc;
+}
+
+.pe-empty-icon {
+  opacity: 0.85;
+}
+
+.pe-empty-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2d2d;
+  border: none;
+  padding: 0;
+}
+
+.pe-empty-text {
+  color: #5a6b6b;
+  font-size: 0.95rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/price-estimator/StorageModal.vue b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
index 9cc896a030c..5be3f786411 100644
--- a/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
@@ -62,9 +62,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-card class="d-flex justify-center align-center">
-    <v-card-title>
-      <span class="headline">Storage</span>
+  <v-theme-provider theme="huntCloud" with-background>
+  <v-card rounded="lg">
+    <v-card-title class="d-flex align-center px-5 pt-4">
+      <v-icon color="primary" class="mr-2">mdi-database-outline</v-icon>
+      <span class="text-h6">{{ editData ? "Edit storage" : "Add storage" }}</span>
     </v-card-title>
     <v-card-text style="width: 100%">
       <v-container>
@@ -98,10 +100,11 @@ onMounted(() => {
         </v-row>
       </v-container>
     </v-card-text>
-    <v-card-actions>
+    <v-card-actions class="px-5 pb-4">
       <v-spacer></v-spacer>
-      <v-btn color="red darken-2" text @click="close()"> Close </v-btn>
-      <v-btn color="green darken-2" text @click="save()"> Save </v-btn>
+      <v-btn variant="text" rounded="lg" class="text-none" @click="close()"> Cancel </v-btn>
+      <v-btn variant="flat" color="primary" rounded="lg" class="text-none" prepend-icon="mdi-content-save-outline" @click="save()"> Save </v-btn>
     </v-card-actions>
   </v-card>
+  </v-theme-provider>
 </template>
diff --git a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
index 63666286934..35727922bff 100644
--- a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
+++ b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
@@ -121,24 +121,28 @@ const tableItems = computed(() => {
 </script>
 
 <template>
-  <v-card class="ma-4 pa-4">
-    <v-row align="center" justify="space-between">
-      <v-col>
-        <v-card-title>Total Summary</v-card-title>
-      </v-col>
-      <v-col cols="auto">
-        <v-tooltip text="Save this configuration to a JSON file">
-          <template v-slot:activator="{ props }">
-            <v-btn density="default" size="large" v-bind="props" dark @click="priceEstimatorStore.exportItems()">
-              <v-icon left>mdi-export</v-icon>
-              Save config
-            </v-btn>
-          </template>
-        </v-tooltip>
-      </v-col>
-    </v-row>
-
-    <v-data-table-virtual :headers="headers" :items="tableItems" hide-default-footer item-value="id" class="mt-2">
+  <v-card class="total-block mt-6" rounded="xl" elevation="3">
+    <div class="total-header d-flex flex-wrap align-center px-5 py-4">
+      <v-icon color="primary" class="mr-3">mdi-cart-outline</v-icon>
+      <span class="total-title">Total summary</span>
+      <v-spacer />
+      <v-tooltip text="Save this configuration to a JSON file" location="top">
+        <template v-slot:activator="{ props }">
+          <v-btn variant="tonal" color="primary" size="large" rounded="lg" v-bind="props" prepend-icon="mdi-export" class="text-none" @click="priceEstimatorStore.exportItems()">
+            Save config
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </div>
+
+    <v-data-table-virtual
+      :headers="headers"
+      :items="tableItems"
+      hide-default-footer
+      item-value="id"
+      class="total-table"
+      :row-props="(data) => ({ class: data.item.isTotalRow ? 'total-row' : data.item.isDiscountRow ? 'discount-row' : '' })"
+    >
       <template v-slot:item.name="{ item }">
         <span v-if="item.isTotalRow">
           <strong>{{ item.name }}</strong>
@@ -173,7 +177,41 @@ const tableItems = computed(() => {
 </template>
 
 <style scoped>
-.v-card {
-  background-color: #f5f5f5;
+.total-block {
+  border: 1px solid rgba(var(--v-theme-info), 0.18);
+  overflow: hidden;
+}
+
+.total-header {
+  background: linear-gradient(135deg, rgb(var(--v-theme-header-gradient-start)) 0%, rgb(var(--v-theme-header-gradient-end)) 100%);
+  border-bottom: 1px solid rgba(var(--v-theme-info), 0.15);
+}
+
+.total-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: rgb(var(--v-theme-on-surface-strong));
+}
+
+.total-table :deep(thead th) {
+  font-weight: 600 !important;
+  color: rgb(var(--v-theme-on-surface-muted)) !important;
+  text-transform: uppercase;
+  font-size: 0.72rem !important;
+  letter-spacing: 0.04em;
+}
+
+.total-table :deep(tr.total-row td) {
+  background: rgba(var(--v-theme-info), 0.08);
+  font-size: 1rem;
+}
+
+.total-table :deep(tr.total-row:last-child td) {
+  background: rgba(var(--v-theme-info), 0.14);
+}
+
+.total-table :deep(tr.discount-row td) {
+  background: rgba(var(--v-theme-success), 0.06);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
index 6270f74e1d8..9d2e7a9ba5b 100644
--- a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
+++ b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
@@ -62,6 +62,7 @@ export const priceEstimatorStore = reactive({
                 selectedCompute: [],
                 selectedStorage: [],
                 subscription: lab.subscription,
+                collapse: lab.collapse,
               })
 
               if (lab.selectedCompute) {
@@ -157,13 +158,24 @@ export const priceEstimatorStore = reactive({
   },
 
   /* Lab helpers */
-  addLab(payload: { name: string; subscription: string; machineType: string; machineSubscription: string; isDefault: boolean; archive: number; work: number; scratch: number }) {
+  addLab(payload: {
+    name: string
+    subscription: string
+    machineType: string
+    machineSubscription: string
+    isDefault: boolean
+    archive: number
+    work: number
+    scratch: number
+    collapse: boolean
+  }) {
     const newLab: LabCard = {
       id: this.labs.length,
       title: payload.name,
       selectedCompute: [],
       selectedStorage: [],
       subscription: payload.subscription as LabSubscriptionType,
+      collapse: payload.collapse,
     }
 
     // Add compute
@@ -307,6 +319,14 @@ export const priceEstimatorStore = reactive({
     }
   },
 
+  updateLabCollapse(id: number, collapse: boolean) {
+    const lab = this.labs.find((l) => l.id === id)
+    if (lab) {
+      lab.collapse = collapse
+      this.saveStateToLocal()
+    }
+  },
+
   /* Storage helpers */
 
   calculateTotalStorageCost() {
@@ -638,6 +658,7 @@ export const priceEstimatorStore = reactive({
         type: s.type,
         size: s.size,
       })),
+      collapse: lab.collapse === undefined ? true : lab.collapse,
     }))
 
     const exportData = {
@@ -707,6 +728,7 @@ export const priceEstimatorStore = reactive({
               selectedCompute: [],
               selectedStorage: [],
               subscription: labData.subscription,
+              collapse: labData.collapse,
             })
 
             if (labData.compute) {
diff --git a/docs/.vitepress/theme/components/price-estimator/types/index.ts b/docs/.vitepress/theme/components/price-estimator/types/index.ts
index 72d93ae2814..5dfbbd2f666 100644
--- a/docs/.vitepress/theme/components/price-estimator/types/index.ts
+++ b/docs/.vitepress/theme/components/price-estimator/types/index.ts
@@ -74,6 +74,7 @@ export interface LabCard {
   selectedCompute: ComputeUnit[]
   selectedStorage: StorageUnit[]
   subscription: LabSubscriptionType
+  collapse: boolean
 }
 
 interface StoragePrice {
diff --git a/docs/.vitepress/theme/plugins/vuetify.ts b/docs/.vitepress/theme/plugins/vuetify.ts
index fa7a7155473..15427bb21d5 100644
--- a/docs/.vitepress/theme/plugins/vuetify.ts
+++ b/docs/.vitepress/theme/plugins/vuetify.ts
@@ -4,6 +4,33 @@ import * as directives from "vuetify/directives"
 
 import { VStepperVertical, VStepperVerticalItem, VStepperVerticalActions } from "vuetify/labs/VStepperVertical"
 
+// Scoped theme for the Price estimator. Applied via <v-theme-provider theme="huntCloud">
+// so it only affects the estimator and not other Vuetify components across the site.
+const huntCloud = {
+  dark: false,
+  colors: {
+    primary: "#00509e",
+    background: "#ffffff",
+    surface: "#ffffff",
+    secondary: "#3a5a78",
+    accent: "#f4ac67",
+    error: "#c0392b",
+    info: "#2e7578",
+    success: "#2e7d32",
+    warning: "#e08a2b",
+    "surface-variant": "#eef3f3",
+    "surface-bright": "#fcfdfd",
+    "on-surface-variant": "#00509e",
+    "on-surface-strong": "#1f2d2d",
+    "on-surface-muted": "#5a6b6b",
+    "primary-darken-1": "#21595c",
+    "header-gradient-start": "#f3f8f8",
+    "header-gradient-end": "#eef3f3",
+    "shadow-cool": "#d8e6e7",
+    "shadow-warm": "#dfc4c4",
+  },
+}
+
 export const vuetify = createVuetify({
   components: {
     ...components,
@@ -12,6 +39,11 @@ export const vuetify = createVuetify({
     VStepperVerticalActions,
   },
   directives,
+  theme: {
+    themes: {
+      huntCloud,
+    },
+  },
 })
 
 export default vuetify