From 8d44ab4f03ae23a8cf2004ebdaf50928a6e6f371 Mon Sep 17 00:00:00 2001
From: Matus Kosut <matus.kosut@ntnu.no>
Date: Tue, 21 Jul 2026 16:08:37 +0200
Subject: [PATCH 1/7] feat: tests

---
 .../components/price-estimator/LabCard.vue    | 451 ++++++++++--------
 .../components/price-estimator/LabModal.vue   |  15 +-
 .../price-estimator/MachineModal.vue          |  15 +-
 .../price-estimator/PriceEstimator.vue        | 158 ++++--
 .../price-estimator/StorageModal.vue          |  15 +-
 .../components/price-estimator/TotalBlock.vue |  78 ++-
 docs/.vitepress/theme/plugins/vuetify.ts      |  25 +
 7 files changed, 479 insertions(+), 278 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 7bdfebc66ec..c612e8fba31 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -153,195 +153,209 @@ 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-data-table-virtual :items="selectedCompute" :headers="computeHeaders" hide-default-footer hover item-value="id">
-            <template v-slot:item.gpu="{ item }">
-              <div v-if="item.gpu" class="d-flex justify-end v-data-table-column--nowrap">{{ item.gpu_count }} x {{ item.gpu }}</div>
-            </template>
-            <template v-slot:item.monthlyPrice="{ item }">
-              <div class="d-flex justify-end v-data-table-column--nowrap">
-                <span class="text-right"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </span>
-              </div>
-            </template>
-            <template v-slot:item.yearlyPrice="{ item }">
-              <div class="d-flex justify-end v-data-table-column--nowrap">
-                <span class="text-right"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </span>
-              </div>
-            </template>
-            <template v-slot:item.actions="{ item }">
-              <div class="d-flex ga-2 justify-end">
-                <v-icon icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
-                <v-icon :color="item.isDefault ? 'rgba(0, 0, 0, 0.3)' : ''" icon="mdi-delete" size="small" @click="removeMachine(item)"></v-icon>
-              </div>
-            </template>
-
-            <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>
-              </tr>
-
-              <tr v-if="showLocalComputeSummary">
-                <!-- Name -->
-                <th role="columnheader">
-                  <span><strong>Total compute</strong> </span>
-                </th>
-                <!-- Machine type -->
-                <th></th>
-                <!-- vCPUs -->
-                <th class="v-data-table-column--align-end"></th>
-                <!-- RAM [GB] -->
-                <th class="v-data-table-column--align-end"></th>
-                <!-- GPU count -->
-                <!-- <th class="v-data-table-column--align-end"></th> -->
-                <!-- GPU -->
-                <th class="v-data-table-column--align-end"></th>
-                <!-- Subscription -->
-                <th></th>
-                <!-- Price / month -->
-                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                  <strong>{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
-                </th>
-                <!-- Price / year -->
-                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                  <strong>{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
-                </th>
-                <!-- Actions -->
-                <th class="v-data-table-column--align-end"></th>
-              </tr>
-            </template>
-          </v-data-table-virtual>
-        </v-card>
-
-        <v-card flat>
-          <v-card-title>Storage</v-card-title>
-
-          <v-data-table-virtual
-            v-model="props.lab.selectedStorage"
-            :items="selectedStorage"
-            :headers="storageHeaders"
-            hover
-            hide-default-footer
-            item-value="id"
-            aria-placeholder="No storage added yet"
-          >
-            <template v-slot:item.size="{ item }"> {{ item.size.toFixed(2) }}&nbsp;TB </template>
-            <template v-slot:item.monthlyPrice="{ item }"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </template>
-            <template v-slot:item.yearlyPrice="{ item }"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </template>
-            <template v-slot:item.actions="{ item }">
-              <div class="d-flex ga-2 justify-end">
-                <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editStorage(selectedStorage.find((s) => s.id === item.id)!)"></v-icon>
-                <v-icon color="medium-emphasis" icon="mdi-delete" size="small" @click="removeStorageById(item.id)"></v-icon>
-              </div>
-            </template>
-
-            <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>
-              </tr>
-              <tr v-if="showLocalStorageSummary" v-for="(item, storageType, index) in storageLabSum" :key="storageType">
-                <!-- Name -->
-                <th>
-                  <strong v-if="index === 0">Total storage</strong>
-                </th>
-                <!-- Usage -->
-                <th></th>
-                <!-- Type -->
-                <th>
-                  <span>
-                    <strong>{{ storageType }}</strong>
-                  </span>
-                </th>
-                <!-- Size [TB] -->
-                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                  <strong>{{ item.size.toFixed(2) }}&nbsp;TB</strong>
-                </th>
-                <!-- Price / month -->
-                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                  <strong>{{ item.monthlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
-                </th>
-                <!-- Price / year -->
-                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                  <strong>{{ item.yearlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
-                </th>
-                <!-- Actions -->
-                <th></th>
-              </tr>
-            </template>
-          </v-data-table-virtual>
-        </v-card>
-        <v-card flat class="ma-2">
-          <v-card-title>Lab summary</v-card-title>
-          <v-table>
-            <thead>
-              <tr>
-                <th></th>
-                <th></th>
-                <th class="text-right">Price / month</th>
-                <th class="text-right">Price / year</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <strong>Lab Subscription ({{ lab.subscription }})</strong>
-                </td>
-                <td></td>
-                <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.monthly).toFixed(2) }}&nbsp;NOK</td>
-                <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.yearly).toFixed(2) }}&nbsp;NOK</td>
-              </tr>
-              <tr>
-                <td><strong>Compute</strong></td>
-                <td></td>
-                <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
-                <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
-              </tr>
-              <tr>
-                <td><strong>Storage</strong></td>
-                <td></td>
-                <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">
-                <td><strong>Total</strong></td>
-                <td></td>
-                <td class="text-right v-data-table-column--nowrap">
-                  <strong>{{ Number(LabSumMonthly.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
-                </td>
-                <td class="text-right v-data-table-column--nowrap">
-                  <strong>{{ Number(LabSum.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-card>
+  <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">
+      <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"
+        @update:model-value="updateTitle"
+      ></v-text-field>
+
+      <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="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>
+
+    <div 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 }">
+            <div v-if="item.gpu" class="d-flex justify-end v-data-table-column--nowrap">{{ item.gpu_count }} x {{ item.gpu }}</div>
+          </template>
+          <template v-slot:item.monthlyPrice="{ item }">
+            <div class="d-flex justify-end v-data-table-column--nowrap">
+              <span class="text-right"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </span>
+            </div>
+          </template>
+          <template v-slot:item.yearlyPrice="{ item }">
+            <div class="d-flex justify-end v-data-table-column--nowrap">
+              <span class="text-right"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </span>
+            </div>
+          </template>
+          <template v-slot:item.actions="{ item }">
+            <div class="d-flex ga-2 justify-end">
+              <v-icon icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
+              <v-icon :color="item.isDefault ? 'rgba(0, 0, 0, 0.3)' : ''" icon="mdi-delete" size="small" @click="removeMachine(item)"></v-icon>
+            </div>
+          </template>
+
+          <template v-slot:body.append="{ headers }">
+            <tr>
+              <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>
+
+            <tr v-if="showLocalComputeSummary">
+              <!-- Name -->
+              <th role="columnheader">
+                <span><strong>Total compute</strong> </span>
+              </th>
+              <!-- Machine type -->
+              <th></th>
+              <!-- vCPUs -->
+              <th class="v-data-table-column--align-end"></th>
+              <!-- RAM [GB] -->
+              <th class="v-data-table-column--align-end"></th>
+              <!-- GPU count -->
+              <!-- <th class="v-data-table-column--align-end"></th> -->
+              <!-- GPU -->
+              <th class="v-data-table-column--align-end"></th>
+              <!-- Subscription -->
+              <th></th>
+              <!-- Price / month -->
+              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                <strong>{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
+              </th>
+              <!-- Price / year -->
+              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                <strong>{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
+              </th>
+              <!-- Actions -->
+              <th class="v-data-table-column--align-end"></th>
+            </tr>
+          </template>
+        </v-data-table-virtual>
       </v-card>
-    </v-sheet>
+
+      <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"
+          :items="selectedStorage"
+          :headers="storageHeaders"
+          hover
+          hide-default-footer
+          item-value="id"
+          aria-placeholder="No storage added yet"
+        >
+          <template v-slot:item.size="{ item }"> {{ item.size.toFixed(2) }}&nbsp;TB </template>
+          <template v-slot:item.monthlyPrice="{ item }"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </template>
+          <template v-slot:item.yearlyPrice="{ item }"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </template>
+          <template v-slot:item.actions="{ item }">
+            <div class="d-flex ga-2 justify-end">
+              <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editStorage(selectedStorage.find((s) => s.id === item.id)!)"></v-icon>
+              <v-icon color="medium-emphasis" icon="mdi-delete" size="small" @click="removeStorageById(item.id)"></v-icon>
+            </div>
+          </template>
+
+          <template v-slot:body.append="{}">
+            <tr>
+              <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">
+              <!-- Name -->
+              <th>
+                <strong v-if="index === 0">Total storage</strong>
+              </th>
+              <!-- Usage -->
+              <th></th>
+              <!-- Type -->
+              <th>
+                <span>
+                  <strong>{{ storageType }}</strong>
+                </span>
+              </th>
+              <!-- Size [TB] -->
+              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                <strong>{{ item.size.toFixed(2) }}&nbsp;TB</strong>
+              </th>
+              <!-- Price / month -->
+              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                <strong>{{ item.monthlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
+              </th>
+              <!-- Price / year -->
+              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                <strong>{{ item.yearlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
+              </th>
+              <!-- Actions -->
+              <th></th>
+            </tr>
+          </template>
+        </v-data-table-virtual>
+      </v-card>
+      <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>
+              <th></th>
+              <th class="text-right">Price / month</th>
+              <th class="text-right">Price / year</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <strong>Lab Subscription ({{ lab.subscription }})</strong>
+              </td>
+              <td></td>
+              <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.monthly).toFixed(2) }}&nbsp;NOK</td>
+              <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.yearly).toFixed(2) }}&nbsp;NOK</td>
+            </tr>
+            <tr>
+              <td><strong>Compute</strong></td>
+              <td></td>
+              <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
+              <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
+            </tr>
+            <tr>
+              <td><strong>Storage</strong></td>
+              <td></td>
+              <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="summary-total-row">
+              <td><strong>Total</strong></td>
+              <td></td>
+              <td class="text-right v-data-table-column--nowrap">
+                <strong>{{ Number(LabSumMonthly.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
+              </td>
+              <td class="text-right v-data-table-column--nowrap">
+                <strong>{{ Number(LabSum.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card>
+    </div>
 
     <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 +366,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(46, 117, 120, 0.12);
+  transition: box-shadow 0.2s ease;
+}
+
+.lab-card:hover {
+  box-shadow:
+    0 6px 20px rgba(46, 117, 120, 0.12),
+    0 2px 6px rgba(0, 0, 0, 0.06) !important;
+}
+
+.lab-header {
+  background: linear-gradient(135deg, #f3f8f8 0%, #eef3f3 100%);
+  border-bottom: 1px solid rgba(46, 117, 120, 0.12);
 }
 
 .lab-title-input {
@@ -365,8 +392,46 @@ 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: #1f2d2d;
+  padding-top: 0;
+}
+
+.section-card {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #fcfdfd;
+}
+
+.section-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: #1f2d2d;
+  padding-bottom: 4px;
+}
+
+.section-card :deep(.v-data-table) {
+  background: transparent;
+}
+
+.section-card :deep(thead th) {
+  font-weight: 600 !important;
+  color: #5a6b6b !important;
+  text-transform: uppercase;
+  font-size: 0.72rem !important;
+  letter-spacing: 0.04em;
+}
+
+.summary-table {
+  background: transparent;
+}
+
+.summary-total-row td {
+  background: rgba(46, 117, 120, 0.08);
+}
+
+.summary-total-row td strong {
+  color: #21595c;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/price-estimator/LabModal.vue b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
index 73e45c28d24..77e588f57ee 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
@@ -57,8 +57,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-card light class="d-flex justify-center align-center">
-    <v-card-title>Add New Lab</v-card-title>
+  <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>
@@ -98,10 +102,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-1" text @click="$emit('close')">Cancel</v-btn>
-      <v-btn color="green darken-1" text @click="save">Add Lab</v-btn>
+      <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..b84899baf71 100644
--- a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
+++ b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
@@ -43,52 +43,114 @@ 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;
+  color: #5a6b6b;
+}
+
+.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..d8dcec9e8c7 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(46, 117, 120, 0.18);
+  overflow: hidden;
+}
+
+.total-header {
+  background: linear-gradient(135deg, #eef3f3 0%, #e3eeee 100%);
+  border-bottom: 1px solid rgba(46, 117, 120, 0.15);
+}
+
+.total-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: #1f2d2d;
+}
+
+.total-table :deep(thead th) {
+  font-weight: 600 !important;
+  color: #5a6b6b !important;
+  text-transform: uppercase;
+  font-size: 0.72rem !important;
+  letter-spacing: 0.04em;
+}
+
+.total-table :deep(tr.total-row td) {
+  background: rgba(46, 117, 120, 0.08);
+  font-size: 1rem;
+}
+
+.total-table :deep(tr.total-row:last-child td) {
+  background: rgba(46, 117, 120, 0.14);
+}
+
+.total-table :deep(tr.discount-row td) {
+  background: rgba(46, 125, 50, 0.06);
 }
 </style>
diff --git a/docs/.vitepress/theme/plugins/vuetify.ts b/docs/.vitepress/theme/plugins/vuetify.ts
index fa7a7155473..88d25c8cf36 100644
--- a/docs/.vitepress/theme/plugins/vuetify.ts
+++ b/docs/.vitepress/theme/plugins/vuetify.ts
@@ -4,6 +4,26 @@ 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: {
+    background: "#ffffff",
+    surface: "#ffffff",
+    "surface-variant": "#eef3f3",
+    "on-surface-variant": "#2e7578",
+    primary: "#2e7578",
+    "primary-darken-1": "#21595c",
+    secondary: "#3a5a78",
+    accent: "#f4ac67",
+    error: "#c0392b",
+    info: "#2e7578",
+    success: "#2e7d32",
+    warning: "#e08a2b",
+  },
+}
+
 export const vuetify = createVuetify({
   components: {
     ...components,
@@ -12,6 +32,11 @@ export const vuetify = createVuetify({
     VStepperVerticalActions,
   },
   directives,
+  theme: {
+    themes: {
+      huntCloud,
+    },
+  },
 })
 
 export default vuetify

From 42cba5eb4e41b98a6e5d0f43b1ae7608a9c58168 Mon Sep 17 00:00:00 2001
From: Matus Kosut <matus.kosut@ntnu.no>
Date: Tue, 21 Jul 2026 16:10:29 +0200
Subject: [PATCH 2/7] fix: remove setting

---
 .yarnrc.yml | 2 --
 1 file changed, 2 deletions(-)

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
 

From b75f75b9ec303c7b2453b1f97ae93c33f82df1c4 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Wed, 22 Jul 2026 09:48:52 +0200
Subject: [PATCH 3/7] color stuff, toggles

---
 .../components/price-estimator/LabCard.vue    | 406 ++++++++++--------
 .../price-estimator/PriceEstimator.vue        |   1 -
 .../components/price-estimator/TotalBlock.vue |   2 +-
 .../components/price-estimator/types/index.ts |   1 +
 docs/.vitepress/theme/plugins/vuetify.ts      |   4 +-
 5 files changed, 228 insertions(+), 186 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index c612e8fba31..2b8f73c3f13 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -17,6 +17,12 @@ const showLocalComputeSummary = ref(false)
 const showLocalStorageSummary = ref(false)
 let editingComputeItem: ComputeUnit | null = null
 
+// Collapse state
+const isCollapsed = ref(props.lab.collapse ? props.lab.collapse : true)
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
 const computeHeaders = ref<DataTableHeader[]>([
   { title: "Name", align: "start", sortable: true, key: "name" },
   { title: "Machine type", align: "start", sortable: true, key: "machine_type" },
@@ -155,7 +161,12 @@ const removeStorageById = (storageId: number) => {
 <template>
   <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">
+    <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"
@@ -164,198 +175,205 @@ const removeStorageById = (storageId: number) => {
         hide-details
         density="compact"
         class="lab-title-input flex-grow-1"
+        @click.stop
         @update:model-value="updateTitle"
       ></v-text-field>
 
+      <transition name="fade">
+        <span v-if="isCollapsed" 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="priceEstimatorStore.removeLab(props.lab.id)">
+      <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>
 
-    <div 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 }">
-            <div v-if="item.gpu" class="d-flex justify-end v-data-table-column--nowrap">{{ item.gpu_count }} x {{ item.gpu }}</div>
-          </template>
-          <template v-slot:item.monthlyPrice="{ item }">
-            <div class="d-flex justify-end v-data-table-column--nowrap">
-              <span class="text-right"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </span>
-            </div>
-          </template>
-          <template v-slot:item.yearlyPrice="{ item }">
-            <div class="d-flex justify-end v-data-table-column--nowrap">
-              <span class="text-right"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </span>
-            </div>
-          </template>
-          <template v-slot:item.actions="{ item }">
-            <div class="d-flex ga-2 justify-end">
-              <v-icon icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
-              <v-icon :color="item.isDefault ? 'rgba(0, 0, 0, 0.3)' : ''" icon="mdi-delete" size="small" @click="removeMachine(item)"></v-icon>
-            </div>
-          </template>
-
-          <template v-slot:body.append="{ headers }">
-            <tr>
-              <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>
-
-            <tr v-if="showLocalComputeSummary">
-              <!-- Name -->
-              <th role="columnheader">
-                <span><strong>Total compute</strong> </span>
-              </th>
-              <!-- Machine type -->
-              <th></th>
-              <!-- vCPUs -->
-              <th class="v-data-table-column--align-end"></th>
-              <!-- RAM [GB] -->
-              <th class="v-data-table-column--align-end"></th>
-              <!-- GPU count -->
-              <!-- <th class="v-data-table-column--align-end"></th> -->
-              <!-- GPU -->
-              <th class="v-data-table-column--align-end"></th>
-              <!-- Subscription -->
-              <th></th>
-              <!-- Price / month -->
-              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                <strong>{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
-              </th>
-              <!-- Price / year -->
-              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                <strong>{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
-              </th>
-              <!-- Actions -->
-              <th class="v-data-table-column--align-end"></th>
-            </tr>
-          </template>
-        </v-data-table-virtual>
-      </v-card>
-
-      <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"
-          :items="selectedStorage"
-          :headers="storageHeaders"
-          hover
-          hide-default-footer
-          item-value="id"
-          aria-placeholder="No storage added yet"
-        >
-          <template v-slot:item.size="{ item }"> {{ item.size.toFixed(2) }}&nbsp;TB </template>
-          <template v-slot:item.monthlyPrice="{ item }"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </template>
-          <template v-slot:item.yearlyPrice="{ item }"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </template>
-          <template v-slot:item.actions="{ item }">
-            <div class="d-flex ga-2 justify-end">
-              <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editStorage(selectedStorage.find((s) => s.id === item.id)!)"></v-icon>
-              <v-icon color="medium-emphasis" icon="mdi-delete" size="small" @click="removeStorageById(item.id)"></v-icon>
-            </div>
-          </template>
-
-          <template v-slot:body.append="{}">
-            <tr>
-              <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">
-              <!-- Name -->
-              <th>
-                <strong v-if="index === 0">Total storage</strong>
-              </th>
-              <!-- Usage -->
-              <th></th>
-              <!-- Type -->
-              <th>
-                <span>
-                  <strong>{{ storageType }}</strong>
-                </span>
-              </th>
-              <!-- Size [TB] -->
-              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                <strong>{{ item.size.toFixed(2) }}&nbsp;TB</strong>
-              </th>
-              <!-- Price / month -->
-              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                <strong>{{ item.monthlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
-              </th>
-              <!-- Price / year -->
-              <th class="v-data-table-column--align-end v-data-table-column--nowrap">
-                <strong>{{ item.yearlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
-              </th>
-              <!-- Actions -->
-              <th></th>
-            </tr>
-          </template>
-        </v-data-table-virtual>
-      </v-card>
-      <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>
-              <th></th>
-              <th class="text-right">Price / month</th>
-              <th class="text-right">Price / year</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <strong>Lab Subscription ({{ lab.subscription }})</strong>
-              </td>
-              <td></td>
-              <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.monthly).toFixed(2) }}&nbsp;NOK</td>
-              <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.yearly).toFixed(2) }}&nbsp;NOK</td>
-            </tr>
-            <tr>
-              <td><strong>Compute</strong></td>
-              <td></td>
-              <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
-              <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
-            </tr>
-            <tr>
-              <td><strong>Storage</strong></td>
-              <td></td>
-              <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="summary-total-row">
-              <td><strong>Total</strong></td>
-              <td></td>
-              <td class="text-right v-data-table-column--nowrap">
-                <strong>{{ Number(LabSumMonthly.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
-              </td>
-              <td class="text-right v-data-table-column--nowrap">
-                <strong>{{ Number(LabSum.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
-              </td>
-            </tr>
-          </tbody>
-        </v-table>
-      </v-card>
-    </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 }">
+              <div v-if="item.gpu" class="d-flex justify-end v-data-table-column--nowrap">{{ item.gpu_count }} x {{ item.gpu }}</div>
+            </template>
+            <template v-slot:item.monthlyPrice="{ item }">
+              <div class="d-flex justify-end v-data-table-column--nowrap">
+                <span class="text-right"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </span>
+              </div>
+            </template>
+            <template v-slot:item.yearlyPrice="{ item }">
+              <div class="d-flex justify-end v-data-table-column--nowrap">
+                <span class="text-right"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </span>
+              </div>
+            </template>
+            <template v-slot:item.actions="{ item }">
+              <div class="d-flex ga-2 justify-end">
+                <v-icon icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
+                <v-icon :color="item.isDefault ? 'rgba(0, 0, 0, 0.3)' : ''" icon="mdi-delete" size="small" @click="removeMachine(item)"></v-icon>
+              </div>
+            </template>
+
+            <template v-slot:body.append="{ headers }">
+              <tr>
+                <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>
+
+              <tr v-if="showLocalComputeSummary">
+                <!-- Name -->
+                <th role="columnheader">
+                  <span><strong>Total compute</strong> </span>
+                </th>
+                <!-- Machine type -->
+                <th></th>
+                <!-- vCPUs -->
+                <th class="v-data-table-column--align-end"></th>
+                <!-- RAM [GB] -->
+                <th class="v-data-table-column--align-end"></th>
+                <!-- GPU count -->
+                <!-- <th class="v-data-table-column--align-end"></th> -->
+                <!-- GPU -->
+                <th class="v-data-table-column--align-end"></th>
+                <!-- Subscription -->
+                <th></th>
+                <!-- Price / month -->
+                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                  <strong>{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
+                </th>
+                <!-- Price / year -->
+                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                  <strong>{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</strong>
+                </th>
+                <!-- Actions -->
+                <th class="v-data-table-column--align-end"></th>
+              </tr>
+            </template>
+          </v-data-table-virtual>
+        </v-card>
+
+        <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"
+            :items="selectedStorage"
+            :headers="storageHeaders"
+            hover
+            hide-default-footer
+            item-value="id"
+            aria-placeholder="No storage added yet"
+          >
+            <template v-slot:item.size="{ item }"> {{ item.size.toFixed(2) }}&nbsp;TB </template>
+            <template v-slot:item.monthlyPrice="{ item }"> {{ item.monthlyPrice.toFixed(2) }}&nbsp;NOK </template>
+            <template v-slot:item.yearlyPrice="{ item }"> {{ item.yearlyPrice.toFixed(2) }}&nbsp;NOK </template>
+            <template v-slot:item.actions="{ item }">
+              <div class="d-flex ga-2 justify-end">
+                <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editStorage(selectedStorage.find((s) => s.id === item.id)!)"></v-icon>
+                <v-icon color="medium-emphasis" icon="mdi-delete" size="small" @click="removeStorageById(item.id)"></v-icon>
+              </div>
+            </template>
+
+            <template v-slot:body.append="{}">
+              <tr>
+                <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">
+                <!-- Name -->
+                <th>
+                  <strong v-if="index === 0">Total storage</strong>
+                </th>
+                <!-- Usage -->
+                <th></th>
+                <!-- Type -->
+                <th>
+                  <span>
+                    <strong>{{ storageType }}</strong>
+                  </span>
+                </th>
+                <!-- Size [TB] -->
+                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                  <strong>{{ item.size.toFixed(2) }}&nbsp;TB</strong>
+                </th>
+                <!-- Price / month -->
+                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                  <strong>{{ item.monthlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
+                </th>
+                <!-- Price / year -->
+                <th class="v-data-table-column--align-end v-data-table-column--nowrap">
+                  <strong>{{ item.yearlyCostTotal.toFixed(2) }}&nbsp;NOK</strong>
+                </th>
+                <!-- Actions -->
+                <th></th>
+              </tr>
+            </template>
+          </v-data-table-virtual>
+        </v-card>
+        <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>
+                <th></th>
+                <th class="text-right">Price / month</th>
+                <th class="text-right">Price / year</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <strong>Lab Subscription ({{ lab.subscription }})</strong>
+                </td>
+                <td></td>
+                <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.monthly).toFixed(2) }}&nbsp;NOK</td>
+                <td class="text-right v-data-table-column--nowrap">{{ Number(labSubscriptionPrice.yearly).toFixed(2) }}&nbsp;NOK</td>
+              </tr>
+              <tr>
+                <td><strong>Compute</strong></td>
+                <td></td>
+                <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
+                <td class="text-right v-data-table-column--nowrap">{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) }}&nbsp;NOK</td>
+              </tr>
+              <tr>
+                <td><strong>Storage</strong></td>
+                <td></td>
+                <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="summary-total-row">
+                <td><strong>Total</strong></td>
+                <td></td>
+                <td class="text-right v-data-table-column--nowrap">
+                  <strong>{{ Number(LabSumMonthly.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
+                </td>
+                <td class="text-right v-data-table-column--nowrap">
+                  <strong>{{ Number(LabSum.toFixed(2) || 0).toFixed(2) }}&nbsp;NOK</strong>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card>
+      </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" />
@@ -378,8 +396,8 @@ const removeStorageById = (storageId: number) => {
 
 .lab-card:hover {
   box-shadow:
-    0 6px 20px rgba(46, 117, 120, 0.12),
-    0 2px 6px rgba(0, 0, 0, 0.06) !important;
+    0 6px 20px rgba(216, 230, 231, 0.12),
+    0 2px 6px rgba(223, 196, 196, 0.06) !important;
 }
 
 .lab-header {
@@ -399,6 +417,30 @@ const removeStorageById = (storageId: number) => {
   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: #fcfdfd;
diff --git a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
index b84899baf71..d567cda3a8c 100644
--- a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
+++ b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
@@ -129,7 +129,6 @@ async function handleFileUpload(event: Event) {
 .pe-subtitle {
   margin-top: 2px;
   font-size: 0.95rem;
-  color: #5a6b6b;
 }
 
 .pe-empty {
diff --git a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
index d8dcec9e8c7..43fa826332e 100644
--- a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
+++ b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
@@ -183,7 +183,7 @@ const tableItems = computed(() => {
 }
 
 .total-header {
-  background: linear-gradient(135deg, #eef3f3 0%, #e3eeee 100%);
+  background: linear-gradient(135deg, #f3f8f8 0%, #eef3f3 100%);
   border-bottom: 1px solid rgba(46, 117, 120, 0.15);
 }
 
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 88d25c8cf36..1b3c4751027 100644
--- a/docs/.vitepress/theme/plugins/vuetify.ts
+++ b/docs/.vitepress/theme/plugins/vuetify.ts
@@ -12,8 +12,8 @@ const huntCloud = {
     background: "#ffffff",
     surface: "#ffffff",
     "surface-variant": "#eef3f3",
-    "on-surface-variant": "#2e7578",
-    primary: "#2e7578",
+    "on-surface-variant": "#00509e",
+    primary: "#00509e",
     "primary-darken-1": "#21595c",
     secondary: "#3a5a78",
     accent: "#f4ac67",

From ac01bc511c25521ef078e30d6c2fb48aa4601653 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Wed, 22 Jul 2026 10:54:21 +0200
Subject: [PATCH 4/7] collapse features

---
 .../components/price-estimator/LabCard.vue    |  6 +-
 .../components/price-estimator/LabModal.vue   | 89 ++++++++++---------
 .../stores/priceEstimatorStore.ts             | 24 ++++-
 3 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 2b8f73c3f13..b628f01374f 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -18,9 +18,11 @@ const showLocalStorageSummary = ref(false)
 let editingComputeItem: ComputeUnit | null = null
 
 // Collapse state
-const isCollapsed = ref(props.lab.collapse ? props.lab.collapse : true)
+const isCollapsed = ref(props.lab.collapse === undefined ? true : props.lab.collapse)
+console.log(props.lab.id, "toggle", props.lab.collapse, isCollapsed.value)
 const toggleCollapse = () => {
   isCollapsed.value = !isCollapsed.value
+  priceEstimatorStore.updateLabCollapse(props.lab.id, isCollapsed.value)
 }
 
 const computeHeaders = ref<DataTableHeader[]>([
@@ -180,7 +182,7 @@ const removeStorageById = (storageId: number) => {
       ></v-text-field>
 
       <transition name="fade">
-        <span v-if="isCollapsed" class="collapsed-summary mr-3 text-medium-emphasis"> {{ Number(LabSumMonthly || 0).toFixed(2) }}&nbsp;NOK / month </span>
+        <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">
diff --git a/docs/.vitepress/theme/components/price-estimator/LabModal.vue b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
index 77e588f57ee..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")
 }
@@ -58,55 +59,55 @@ onMounted(() => {
 
 <template>
   <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-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 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-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/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) {

From f756c572c05283b929817ff8662f563cddf58ba4 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Wed, 22 Jul 2026 11:14:54 +0200
Subject: [PATCH 5/7] css

---
 .../components/price-estimator/LabCard.vue    | 22 +++++++++----------
 .../components/price-estimator/TotalBlock.vue | 16 +++++++-------
 docs/.vitepress/theme/plugins/vuetify.ts      | 15 +++++++++----
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index b628f01374f..5bec25d1e3b 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -392,19 +392,19 @@ const removeStorageById = (storageId: number) => {
 <style scoped>
 .lab-card {
   overflow: hidden;
-  border: 1px solid rgba(46, 117, 120, 0.12);
+  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(216, 230, 231, 0.12),
-    0 2px 6px rgba(223, 196, 196, 0.06) !important;
+    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, #f3f8f8 0%, #eef3f3 100%);
-  border-bottom: 1px solid rgba(46, 117, 120, 0.12);
+  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 {
@@ -415,7 +415,7 @@ const removeStorageById = (storageId: number) => {
   font-size: 1.35rem;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: #1f2d2d;
+  color: rgb(var(--v-theme-on-surface-strong));
   padding-top: 0;
 }
 
@@ -445,13 +445,13 @@ const removeStorageById = (storageId: number) => {
 
 .section-card {
   border: 1px solid rgba(0, 0, 0, 0.06);
-  background: #fcfdfd;
+  background: rgb(var(--v-theme-surface-bright));
 }
 
 .section-title {
   font-size: 1.05rem;
   font-weight: 600;
-  color: #1f2d2d;
+  color: rgb(var(--v-theme-on-surface-strong));
   padding-bottom: 4px;
 }
 
@@ -461,7 +461,7 @@ const removeStorageById = (storageId: number) => {
 
 .section-card :deep(thead th) {
   font-weight: 600 !important;
-  color: #5a6b6b !important;
+  color: rgb(var(--v-theme-on-surface-muted)) !important;
   text-transform: uppercase;
   font-size: 0.72rem !important;
   letter-spacing: 0.04em;
@@ -472,10 +472,10 @@ const removeStorageById = (storageId: number) => {
 }
 
 .summary-total-row td {
-  background: rgba(46, 117, 120, 0.08);
+  background: rgba(var(--v-theme-info), 0.08);
 }
 
 .summary-total-row td strong {
-  color: #21595c;
+  color: rgb(var(--v-theme-primary-darken-1));
 }
 </style>
diff --git a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
index 43fa826332e..35727922bff 100644
--- a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
+++ b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
@@ -178,40 +178,40 @@ const tableItems = computed(() => {
 
 <style scoped>
 .total-block {
-  border: 1px solid rgba(46, 117, 120, 0.18);
+  border: 1px solid rgba(var(--v-theme-info), 0.18);
   overflow: hidden;
 }
 
 .total-header {
-  background: linear-gradient(135deg, #f3f8f8 0%, #eef3f3 100%);
-  border-bottom: 1px solid rgba(46, 117, 120, 0.15);
+  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: #1f2d2d;
+  color: rgb(var(--v-theme-on-surface-strong));
 }
 
 .total-table :deep(thead th) {
   font-weight: 600 !important;
-  color: #5a6b6b !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(46, 117, 120, 0.08);
+  background: rgba(var(--v-theme-info), 0.08);
   font-size: 1rem;
 }
 
 .total-table :deep(tr.total-row:last-child td) {
-  background: rgba(46, 117, 120, 0.14);
+  background: rgba(var(--v-theme-info), 0.14);
 }
 
 .total-table :deep(tr.discount-row td) {
-  background: rgba(46, 125, 50, 0.06);
+  background: rgba(var(--v-theme-success), 0.06);
 }
 </style>
diff --git a/docs/.vitepress/theme/plugins/vuetify.ts b/docs/.vitepress/theme/plugins/vuetify.ts
index 1b3c4751027..15427bb21d5 100644
--- a/docs/.vitepress/theme/plugins/vuetify.ts
+++ b/docs/.vitepress/theme/plugins/vuetify.ts
@@ -9,18 +9,25 @@ import { VStepperVertical, VStepperVerticalItem, VStepperVerticalActions } from
 const huntCloud = {
   dark: false,
   colors: {
+    primary: "#00509e",
     background: "#ffffff",
     surface: "#ffffff",
-    "surface-variant": "#eef3f3",
-    "on-surface-variant": "#00509e",
-    primary: "#00509e",
-    "primary-darken-1": "#21595c",
     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",
   },
 }
 

From 92f9159dd8bd30cbbafcc26a7832c08b2477f039 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Wed, 22 Jul 2026 11:15:21 +0200
Subject: [PATCH 6/7] remove log

---
 docs/.vitepress/theme/components/price-estimator/LabCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 5bec25d1e3b..6dfd78fda74 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -19,7 +19,6 @@ let editingComputeItem: ComputeUnit | null = null
 
 // Collapse state
 const isCollapsed = ref(props.lab.collapse === undefined ? true : props.lab.collapse)
-console.log(props.lab.id, "toggle", props.lab.collapse, isCollapsed.value)
 const toggleCollapse = () => {
   isCollapsed.value = !isCollapsed.value
   priceEstimatorStore.updateLabCollapse(props.lab.id, isCollapsed.value)

From 40c3cf6a0513f94972117627300e4d3a75b5b995 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Wed, 22 Jul 2026 13:29:14 +0200
Subject: [PATCH 7/7] update subscription bottom

---
 .../theme/components/price-estimator/LabCard.vue  | 15 +++++++++++++--
 .../price-estimator/stores/priceEstimatorStore.ts |  8 ++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 6dfd78fda74..dc275f821bd 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -24,6 +24,17 @@ const toggleCollapse = () => {
   priceEstimatorStore.updateLabCollapse(props.lab.id, isCollapsed.value)
 }
 
+const changeSubscription = () => {
+  let subscription = props.lab.subscription
+  if (subscription == "1Y") {
+    subscription = "3Y"
+  } else {
+    subscription = "1Y"
+  }
+
+  priceEstimatorStore.updateLabSubscription(props.lab.id, subscription)
+}
+
 const computeHeaders = ref<DataTableHeader[]>([
   { title: "Name", align: "start", sortable: true, key: "name" },
   { title: "Machine type", align: "start", sortable: true, key: "machine_type" },
@@ -162,7 +173,7 @@ const removeStorageById = (storageId: number) => {
 <template>
   <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">
+    <div class="lab-header d-flex align-center px-5 py-3" 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>
@@ -186,7 +197,7 @@ const removeStorageById = (storageId: number) => {
 
       <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>
+          <v-chip size="small" variant="tonal" color="primary" class="mr-2 font-weight-medium" v-bind="props" @click="changeSubscription">{{ lab.subscription }}</v-chip>
         </template>
       </v-tooltip>
       <v-btn size="small" variant="text" icon color="error" @click.stop="priceEstimatorStore.removeLab(props.lab.id)">
diff --git a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
index 9d2e7a9ba5b..a3aefbe76dc 100644
--- a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
+++ b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
@@ -327,6 +327,14 @@ export const priceEstimatorStore = reactive({
     }
   },
 
+  updateLabSubscription(id: number, subscription: string) {
+    const lab = this.labs.find((l) => l.id === id)
+    if (lab) {
+      lab.subscription = subscription as LabSubscriptionType
+      this.saveStateToLocal()
+    }
+  },
+
   /* Storage helpers */
 
   calculateTotalStorageCost() {