diff --git a/.vscode/settings.json b/.vscode/settings.json
index aab46ab3347..1f1f12968da 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,7 +24,6 @@
     "**/.pnp.*": true
   },
   "eslint.nodePath": ".yarn/sdks",
-  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
   "markdownlint.config": {
     "MD025": false,
     "MD033": false
diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 0054f8b3f79..a00753bfff7 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -1,385 +1,128 @@
-<script lang="ts">
-import type {
-  ComputeUnit,
-  StorageUnit,
-  PriceListItem,
-  MachineFlavor,
-  ComputeLabSum,
-  StorageLabSum,
-  StorageUsageType,
-  StorageType,
-  Catalogue,
-} from "./types"
-
-export default {
-  name: "LabCard",
-  emits: ["updateStorage", "updateCompute", "removeLab"],
-  props: {
-    title: { type: String, required: true, default: "Lab " },
-    catalogue: {
-      type: Object as () => Catalogue,
-      required: true,
-    },
-    storageCostByType: {
-      type: Object as () => { [key: string]: { size: number; cost: number } },
-      default: () => ({}),
-    },
-    initSelectedCompute: { type: Array as () => ComputeUnit[], default: null },
-    initSelectedStorage: { type: Array as () => StorageUnit[], default: null },
-  },
-  data() {
-    return {
-      computeId: 0,
-      isComputeModalOpen: false,
-      editingComputeItem: null as ComputeUnit | null,
-      selectedCompute: [] as ComputeUnit[],
-      isLoadingComputePrices: false,
-      computeHeaders: [
-        { title: "Name", align: "start", sortable: true, key: "name" },
-        { title: "Machine type", align: "start", sortable: true, key: "flavor" },
-        { title: "cpu cores", align: "start", sortable: true, key: "core_count" },
-        { title: "Memory [TB]", align: "start", sortable: true, key: "ram" },
-        { title: "Type", align: "start", sortable: true, key: "type" },
-        { title: "Price / month", align: "start", sortable: true, key: "monthlyPrice" },
-        { title: "Price / year", align: "start", sortable: true, key: "yearlyPrice" },
-        { title: "Actions", key: "actions", align: "end", sortable: false },
-      ],
-      computeLabSum: { monthlyPrice: 0.0, yearlyPrice: 0.0, ram: 0, cpu_count: 0 } as ComputeLabSum,
-      storageId: 0,
-      isStorageModalOpen: false,
-      editingStorageItem: null as StorageUnit | null,
-      selectedStorage: [] as StorageUnit[],
-      storageHeaders: [
-        { title: "Name", align: "start", sortable: true, key: "name" },
-        { title: "Usage", align: "start", sortable: true, key: "usage" },
-        { title: "Type", align: "start", sortable: true, key: "type" },
-        { title: "Size [TB]", align: "start", sortable: true, key: "size" },
-        { title: "Price / year", align: "start", sortable: true, key: "price" }, 
-        { title: "Actions", key: "actions", align: "end", sortable: false },
-      ],
-      storageLabSum: {
-        size: 0.0,
-        type: null,
-        price: 0.0,
-      } as StorageLabSum,
-      snackbar: {
-        show: false,
-        message: "",
-      },
-    }
-  },
-  computed: {
-    displaySelectedCompute() {
-      return this.selectedCompute.map(item => {
-        return {
-          id: item.id,
-          name: item.name,
-          flavor: item.flavor,
-          core_count: item.core_count,
-          ram: item.ram,
-          type: item.type,
-          monthlyPrice: item.monthlyPrice.toFixed(2) + " kr",
-          yearlyPrice: item.yearlyPrice.toFixed(2) + " kr",
-        }
-      })
-    },
-
-    displayStorageSumPrice() {
-      return this.storageLabSum.price.toFixed(2) + " kr"
-    },
-    displayselectedStorage() {
-      return this.selectedStorage.map(item => {
-        return {
-          id: item.id,
-          name: item.name,
-          usage: item.usage,
-          type: item.type,
-          size: item.size + " TB",
-          price: item.price.toFixed(2) + " kr",
-        }
-      })
-    },
-  },
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import { DataTableHeader } from "vuetify"
+import { priceEstimatorStore } from "./stores/priceEstimatorStore"
+import type { ComputeUnit, StorageUnit, LabCard } from "./types"
+import MachineModal from "./MachineModal.vue"
+import StorageModal from "./StorageModal.vue"
 
-  methods: {
-    initializeState() {
-      if (this.initSelectedCompute && this.initSelectedCompute.length > 0) {
-        this.selectedCompute = this.initSelectedCompute.map(item => {
-          const flavorParts = item.flavor.split(" + ")
-          const mainFlavor = flavorParts[0]
-          const gpuFlavor = item.gpu
-          const prices = this.getComputePriceForLab(mainFlavor, item.type, gpuFlavor)
-          return { ...item, ...prices }
-        })
-        this.computeId = this.initSelectedCompute.length
-      } else {
-        this.selectedCompute = []
-        this.computeId = 0
-        this.pushDefaultComputeUnit()
-      }
-
-      if (this.initSelectedStorage && this.initSelectedStorage.length > 0) {
-        this.selectedStorage = this.initSelectedStorage.map(item => ({ ...item, price: 0 }))
-        this.storageId = this.initSelectedStorage.length
-      } else {
-        this.selectedStorage = []
-        this.storageId = 0
-        this.pushDefaultStorage()
-      }
-      this.updateLabSumCompute(true)
-      this.updateLabSumStorage(true)
-    },
-    updateLabSumCompute(emit=true) {
-      this.computeLabSum.monthlyPrice = this.selectedCompute.reduce(
-        (acc, item) => Number(acc) + Number(item.monthlyPrice),
-        0,
-      )
-      this.computeLabSum.yearlyPrice = this.selectedCompute.reduce(
-        (acc, item) => Number(acc) + Number(item.yearlyPrice),
-        0,
-      )
-      this.computeLabSum.ram = this.selectedCompute.reduce((acc, item) => acc + item.ram, 0)
-      this.computeLabSum.cpu_count = this.selectedCompute.reduce((acc, item) => acc + item.core_count, 0)
-      if (emit) {
-      this.$emit("updateCompute", {
-        monthlyPrice: this.computeLabSum.monthlyPrice,
-        yearlyPrice: this.computeLabSum.yearlyPrice,
-        numCompute: this.selectedCompute.length || 0,
-        selectedCompute: this.selectedCompute,
-      })
-      }
-    },
-    updateLabSumStorage(emit = true) {
-      this.storageLabSum.size = this.selectedStorage.reduce((acc, item) => acc + item.size, 0)
-
-      this.updateAddedStorage()
-      this.storageLabSum.price = this.selectedStorage.reduce((acc, item) => acc + item.price, 0)
-      if (emit) {
-        this.$emit("updateStorage", {
-        size: this.storageLabSum.size,
-        price: this.storageLabSum.price,
-        selectedStorage: this.selectedStorage,
-      })
-      }
-    },
-
-    addMachine() {
-      this.editingComputeItem = null
-      this.isComputeModalOpen = true
-    },
-
-    addStorage() {
-      this.editingStorageItem = null
-      this.isStorageModalOpen = true
-    },
-    editStorage(item: StorageUnit) {
-      this.editingStorageItem = item
-      this.isStorageModalOpen = true
-    },
-    editCompute(item: ComputeUnit) {
-      this.editingComputeItem = item
-      this.isComputeModalOpen = true
-    },
-    closeComputeModal(payload: any) {
-      if (payload) {
-        if (this.editingComputeItem) {
-          const index = this.selectedCompute.findIndex(item => item.id === this.editingComputeItem!.id)
-          if (index !== -1) {
-            this.selectedCompute.splice(index, 1, { ...payload, id: this.editingComputeItem!.id })
-          }
-        } else {
-          this.selectedCompute.push({ ...payload, id: this.computeId })
-          this.computeId = this.computeId + 1
-          if (this.selectedCompute.length > this.selectedStorage.length) {
-            this.pushDefaultStorage()
-          }
-        }
-        this.updateLabSumCompute()
-      }
-      this.isComputeModalOpen = false
-      this.editingComputeItem = null
-    },
-    closeStorageModal(payload: any) {
-      if (payload) {
-        const price = this.calculateStoragePriceForVolume(payload.size, payload.type)
-        if (this.editingStorageItem) {
-          const index = this.selectedStorage.findIndex(item => item.id === this.editingStorageItem!.id)
-          if (index !== -1) {
-            this.selectedStorage.splice(index, 1, {
-              id: this.editingStorageItem!.id,
-              name: payload.name,
-              usage: payload.usage,
-              type: payload.type,
-              size: payload.size,
-              price: price,
-            })
-          }
-        } else {
-          this.storageId = this.storageId + 1
-          this.selectedStorage.push({
-            id: this.storageId,
-            name: payload.name,
-            usage: payload.usage,
-            type: payload.type,
-            size: payload.size,
-            price: price,
-          })
-        }
-        this.updateAddedStorage()
-        this.updateLabSumStorage()
-      }
-      this.isStorageModalOpen = false
-      this.editingStorageItem = null
-    },
-    openSnackbar(message: string) {
-      this.snackbar.message = message
-      this.snackbar.show = true
-    },
-
-    removeComputeById(id: number) {
-      if (id === 0) {
-        this.openSnackbar("Cannot remove the default machine")
-        return
-      }
-      this.selectedCompute = this.selectedCompute.filter(item => item.id !== id)
-      this.updateLabSumCompute()
-    },
-
-    removeStorageById(id: number) {
-      this.selectedStorage = this.selectedStorage.filter(item => item.id !== id)
-      this.updateLabSumStorage()
-    },
-    pushDefaultComputeUnit() {
-      const defaultUnit = this.catalogue.computePrices.find(
-        (item: PriceListItem) =>
-          item["service.unit"] === "default.c1" &&
-          item["service.level"] === "COMMITMENT" &&
-          item["service.commitment"] === "1Y",
-      )
-      if (!defaultUnit) return
-      
-      const machineInfo = this.catalogue.machineCatalogue.find((item: MachineFlavor) => item["value"] === defaultUnit["service.unit"])
-      if (!machineInfo) return
-      
-      const machinetitle = machineInfo["title"].split(" - ")[1].split(" / ")
-      const core_count = parseInt(machinetitle[0].split(" ")[0])
-      const ram = parseInt(machinetitle[1].split(" ")[0])
-      this.selectedCompute.push({
-        id: this.computeId,
-        name: "machine-0",
-        flavor: defaultUnit["service.unit"],
-        core_count: core_count,
-        gpu: null,
-        ram: ram,
-        type: "COMMITMENT_1Y",
-        monthlyPrice: defaultUnit["price.nok.ex.vat"] / 12,
-        yearlyPrice: defaultUnit["price.nok.ex.vat"],
-      })
-      this.computeId += 1
-    },
-    pushDefaultStorage() {
-      const defaultStorage: StorageUnit = {
-        id: this.storageId,
-        name: "volume-" + this.storageId,
-        usage: "Archive" as StorageUsageType,
-        type: "HDD" as StorageType,
-        size: 1,
-        price: 0,
-      }
-      this.selectedStorage.push(defaultStorage)
-      this.storageId += 1
-      this.updateLabSumStorage()
-    },
-    updateAddedStorage() {
-      this.selectedStorage.forEach(item => {
-        item.price = this.calculateStoragePriceForVolume(item.size, item.type)
-      })
-    },
-
-    calculateStoragePriceForVolume(volumeSize: number, storageType: StorageType) {
-      const typeCostData = this.storageCostByType[storageType]
-      
-      if (!typeCostData || typeCostData.size === 0) {
-        return 0
-      }
-      
-      const unitPrice = typeCostData.cost / typeCostData.size
-      return volumeSize * unitPrice
-    },
-
-
-    getComputePriceForLab(flavor: string, type: string, gpuFlavor: string | null = null) {
-      let totalYearlyPrice = 0
-      let totalMonthlyPrice = 0
-      let mainFlavorPrice: number | undefined
-      let gpuYearly: number | undefined
-
-      if (type.includes("COMMITMENT")) {
-        if (type === "COMMITMENT_3Y") {
-          const found3Y = this.catalogue.computePrices.find(
-            (p: PriceListItem) =>
-              p["service.unit"] === flavor &&
-              p["service.level"] === "COMMITMENT" &&
-              p["service.commitment"] === "3Y"
-          )
-          if (found3Y) {
-            mainFlavorPrice = found3Y["price.nok.ex.vat"] / 3
-          }
-        } else {
-          mainFlavorPrice = this.catalogue.computePrices.find(
-            (p: PriceListItem) =>
-              p["service.unit"] === flavor &&
-              p["service.level"] === "COMMITMENT" &&
-              p["service.commitment"] === "1Y"
-          )?.["price.nok.ex.vat"]
-        }
-      } else {
-        const foundPrice = this.catalogue.computePrices.find(
-          (p: PriceListItem) => p["service.unit"] === flavor && p["service.level"] === type
-        )
-        mainFlavorPrice = foundPrice?.["price.nok.ex.vat"]
-      }
-
-      if (mainFlavorPrice) {
-        totalYearlyPrice += mainFlavorPrice
-      }
-
-      totalMonthlyPrice = Number((totalYearlyPrice / 12))
-
-      if (gpuFlavor) {
-        const gpuPrice = this.catalogue.gpuPrices.find(
-          (p: PriceListItem) => p["service.unit"] === gpuFlavor && p["service.level"] === "ONDEMAND"
-        )
-        if (gpuPrice) {
-          gpuYearly = gpuPrice["price.nok.ex.vat"]
-          totalYearlyPrice += gpuYearly
-          totalMonthlyPrice = totalMonthlyPrice + Number((gpuYearly / 12))
-        }
-      }
-      return {
-        monthlyPrice: totalMonthlyPrice,
-        yearlyPrice: totalYearlyPrice,
-      }
-    },
-  },
+// Props
+const props = defineProps({
+  lab: { type: Object as () => LabCard, required: true },
+})
 
-  created() {
-    this.initializeState()
-  },
-  watch: {
-    storageCostByType: {
-      handler(newVal) {
-        if (newVal && Object.keys(newVal).length > 0 && this.selectedStorage.length > 0) {
-          const needsUpdate = this.selectedStorage.some(item => item.price === 0)
-          if (needsUpdate) {
-            this.updateAddedStorage()
-            this.updateLabSumStorage(false)
-          }
-        }
-      },
-      deep: true,
-    },
+// State
+const isComputeModalOpen = ref(false)
+let editingComputeItem: ComputeUnit | null = null
+
+const computeHeaders = ref<DataTableHeader[]>([
+  { title: "Name", align: "start", sortable: true, key: "name" },
+  { title: "Machine type", align: "start", sortable: true, key: "flavor" },
+  { title: "CPU cores", align: "start", sortable: true, key: "core_count" },
+  { title: "Memory [GB]", align: "start", sortable: true, key: "ram" },
+  { title: "GPU", align: "start", sortable: true, key: "gpu" },
+  { title: "Type", align: "start", sortable: true, key: "type" },
+  { title: "Price / month", align: "start", sortable: true, key: "monthlyPrice" },
+  { title: "Price / year", align: "start", sortable: true, key: "yearlyPrice" },
+  { title: "Actions", key: "actions", align: "end", sortable: false },
+])
+
+const isStorageModalOpen = ref(false)
+let editingStorageItem: StorageUnit | null = null
+
+const storageHeaders = ref([
+  { title: "Name", align: "start", sortable: true, key: "name" },
+  { title: "Usage", align: "start", sortable: true, key: "usage" },
+  { title: "Type", align: "start", sortable: true, key: "type" },
+  { title: "Size [TB]", align: "start", sortable: true, key: "size" },
+  { title: "Price / month", align: "start", sortable: true, key: "monthlyPrice" },
+  { title: "Price / year", align: "start", sortable: true, key: "yearlyPrice" },
+  { title: "Actions", key: "actions", align: "end", sortable: false },
+] as const)
+
+const snackbar = ref({
+  show: false,
+  message: "",
+})
+
+const selectedCompute = computed(() => props.lab.selectedCompute || [])
+const selectedStorage = computed(() => props.lab.selectedStorage || [])
+
+const computeLabSum = computed(() => {
+  return priceEstimatorStore.getLabComputePriceSum(props.lab.id)
+})
+
+const storageLabSum = computed(() => {
+  return priceEstimatorStore.getLabStoragePriceSum(props.lab.id)
+})
+
+const LabSum = computed(() => {
+  return (
+    computeLabSum.value.yearlyCostTotal +
+    storageLabSum.value.HDD.yearlyCostTotal +
+    storageLabSum.value.NVME.yearlyCostTotal
+  )
+})
+
+const localTitle = ref(props.lab.title)
+
+watch(
+  () => props.lab.title,
+  val => {
+    localTitle.value = val
   },
+)
+
+const updateTitle = (val: string) => {
+  priceEstimatorStore.updateLabTitle(props.lab.id, val)
+}
+
+// Methods
+const addMachine = () => {
+  editingComputeItem = null
+  isComputeModalOpen.value = true
+}
+
+const addStorage = () => {
+  editingStorageItem = null
+  isStorageModalOpen.value = true
+}
+
+const editStorage = (item: StorageUnit) => {
+  editingStorageItem = item
+  isStorageModalOpen.value = true
+}
+
+const editCompute = (item: ComputeUnit) => {
+  editingComputeItem = item
+  isComputeModalOpen.value = true
+}
+
+const closeComputeModal = () => {
+  isComputeModalOpen.value = false
+  editingComputeItem = null
+}
+
+const closeStorageModal = () => {
+  isStorageModalOpen.value = false
+  editingStorageItem = null
+}
+
+const openSnackbar = (message: string) => {
+  snackbar.value.message = message
+  snackbar.value.show = true
+}
+
+const removeComputeById = (computeId: number) => {
+  if (computeId === selectedCompute.value[0]?.id) {
+    openSnackbar("Cannot remove the default machine")
+    return
+  }
+  priceEstimatorStore.removeComputeFromLab(props.lab.id, computeId)
+}
+
+const removeStorageById = (storageId: number) => {
+  priceEstimatorStore.removeStorageFromLab(props.lab.id, storageId)
 }
 </script>
 
@@ -387,29 +130,45 @@ export default {
   <v-container>
     <v-sheet class="lab-card ma-0">
       <v-card class="ma-0">
-        <v-row class="ma-2" align="center" justify="space-between">
-          <v-card-title>{{ title }}</v-card-title>
-          <v-btn icon @click="$emit('removeLab')">
+        <v-row class="ma-2 d-flex" align="center" justify="space-between">
+          <v-btn icon style="visibility: hidden"> </v-btn>
+          <v-text-field
+            v-model="localTitle"
+            variant="underlined"
+            hide-details
+            density="compact"
+            class="lab-title-input flex-grow-0"
+            @update:model-value="updateTitle"
+          ></v-text-field>
+          <v-btn icon @click="priceEstimatorStore.removeLab(props.lab.id)">
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </v-row>
 
         <v-card flat>
-          <v-card-title> Compute</v-card-title>
-          <v-card-subtitle> {{ "Add a machine to " + title }}</v-card-subtitle>
+          <v-card-title>Compute</v-card-title>
 
           <v-data-table-virtual
-            :items="displaySelectedCompute"
+            :items="selectedCompute"
             :headers="computeHeaders"
-            :loading="isLoadingComputePrices"
             hide-default-footer
             hover
             item-value="id"
           >
-
+            <template v-slot:item.monthlyPrice="{ item }">
+              {{ item.monthlyPrice.toFixed(2) + " kr" }}
+            </template>
+            <template v-slot:item.yearlyPrice="{ item }">
+              {{ item.yearlyPrice.toFixed(2) + " kr" }}
+            </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="editCompute(item)"></v-icon>
+                <v-icon
+                  color="medium-emphasis"
+                  icon="mdi-pencil"
+                  size="small"
+                  @click="editCompute(selectedCompute.find(c => c.id === item.id)!)"
+                ></v-icon>
                 <v-icon
                   color="medium-emphasis"
                   icon="mdi-delete"
@@ -422,32 +181,24 @@ export default {
             <template v-slot:body.append="{}">
               <tr>
                 <th :colspan="computeHeaders.length + 1" class="text-center">
-                  <v-tooltip bottom>
-                    <template #activator="{ props }">
-                      <v-btn v-bind="props" icon="mdi-plus" size="small" @click="addMachine"></v-btn>
-                    </template>
-                    <span>Add a new machine</span>
-                  </v-tooltip>
+                  <v-btn size="small" @click="addMachine" append-icon="mdi-plus"> Add machine </v-btn>
                 </th>
               </tr>
 
               <tr>
-                <th role="columnheader" class="pt-4 pb-2">
-                  <span><strong>Total</strong> </span>
+                <th role="columnheader">
+                  <span><strong>Total compute</strong> </span>
                 </th>
                 <th></th>
-                <th>
-                  <strong>{{ computeLabSum?.cpu_count || 0 }}</strong>
-                </th>
-                <th>
-                  <strong> {{ computeLabSum?.ram || 0 }}</strong>
-                </th>
+                <th></th>
+                <th></th>
+                <th></th>
                 <th></th>
                 <th>
-                  <strong>{{ Number(computeLabSum?.monthlyPrice || 0).toFixed(2) + " kr" }} </strong>
+                  <strong>{{ Number(computeLabSum?.monthlyCostTotal || 0).toFixed(2) + " kr" }} </strong>
                 </th>
                 <th>
-                  <strong>{{ Number(computeLabSum?.yearlyPrice || 0).toFixed(2) + " kr" }} </strong>
+                  <strong>{{ Number(computeLabSum?.yearlyCostTotal || 0).toFixed(2) + " kr" }} </strong>
                 </th>
                 <th></th>
               </tr>
@@ -456,22 +207,34 @@ export default {
         </v-card>
 
         <v-card flat>
-          <v-card-title> Storage</v-card-title>
-          <v-card-subtitle> Add storage to {{ title }} </v-card-subtitle>
-          <v-card-subtitle> Each compute unit needs a volume of storage of atleast 1 TB</v-card-subtitle>
-            
+          <v-card-title>Storage</v-card-title>
+
           <v-data-table-virtual
-            v-model="selectedStorage"
-            :items="displayselectedStorage"
+            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) + " TB" }}
+            </template>
+            <template v-slot:item.monthlyPrice="{ item }">
+              {{ item.monthlyPrice.toFixed(2) + " kr" }}
+            </template>
+            <template v-slot:item.yearlyPrice="{ item }">
+              {{ item.yearlyPrice.toFixed(2) + " kr" }}
+            </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-pencil"
+                  size="small"
+                  @click="editStorage(selectedStorage.find(s => s.id === item.id)!)"
+                ></v-icon>
                 <v-icon
                   color="medium-emphasis"
                   icon="mdi-delete"
@@ -481,28 +244,44 @@ export default {
               </div>
             </template>
 
-
             <template v-slot:body.append="{}">
               <tr>
                 <th :colspan="storageHeaders.length + 1" class="text-center">
-                  <v-tooltip bottom>
-                    <template #activator="{ props }">
-                      <v-btn v-bind="props" icon="mdi-plus" size="small" @click="addStorage"></v-btn>
-                    </template>
-
-                    <span>Add storage</span>
-                  </v-tooltip>
+                  <v-btn size="small" @click="addStorage" append-icon="mdi-plus"> Add storage </v-btn>
                 </th>
               </tr>
-              <tr>
-                <th role="columnheader" class="pt-4 pb-2">
-                  <span><strong>Total</strong> </span>
+              <tr v-for="(item, storageType, index) in storageLabSum" :key="storageType">
+                <th>
+                  <strong v-if="index === 0">Total storage</strong>
                 </th>
                 <th></th>
+                <th>
+                  <span>
+                    <strong>{{ storageType }}</strong>
+                  </span>
+                </th>
+                <th>
+                  <strong>{{ item.size.toFixed(2) }} TB</strong>
+                </th>
+                <th>
+                  <strong>{{ item.monthlyCostTotal.toFixed(2) }} kr</strong>
+                </th>
+                <th>
+                  <strong>{{ item.yearlyCostTotal.toFixed(2) }} kr</strong>
+                </th>
+              </tr>
+              <tr style="background-color: #f5f5f5">
+                <th>
+                  <strong>Total lab resources</strong>
+                </th>
+                <th></th>
+                <th></th>
+                <th></th>
                 <th></th>
                 <th>
-                  <strong>{{ (storageLabSum?.size || 0) + " TB" }}</strong>
+                  <strong>{{ LabSum.toFixed(2) }} kr</strong>
                 </th>
+                <th></th>
               </tr>
             </template>
           </v-data-table-virtual>
@@ -511,20 +290,25 @@ export default {
     </v-sheet>
 
     <v-dialog v-model="isComputeModalOpen" max-width="600px" min-width="600px">
-      <Machine
-        :compute-id="computeId"
-        :catalogue="catalogue"
-        :initial-data="editingComputeItem"
+      <MachineModal
+        :lab-id="lab.id"
+        :compute-id="lab.selectedCompute.length"
+        :edit-data="editingComputeItem"
         @close="closeComputeModal"
         @open-snackbar="openSnackbar"
       />
     </v-dialog>
 
     <v-dialog v-model="isStorageModalOpen" max-width="600px" min-width="600px">
-      <Storage :storage-id="storageId" :initial-data="editingStorageItem" @close="closeStorageModal" />
+      <StorageModal
+        :lab-id="lab.id"
+        :storage-id="lab.selectedStorage.length"
+        :edit-data="editingStorageItem"
+        @close="closeStorageModal"
+      />
     </v-dialog>
 
-    <v-snackbar v-model="snackbar.show"> {{ snackbar.message }}</v-snackbar>
+    <v-snackbar v-model="snackbar.show">{{ snackbar.message }}</v-snackbar>
   </v-container>
 </template>
 
@@ -532,4 +316,14 @@ export default {
 .lab-card {
   padding: 3px;
 }
+
+.lab-title-input {
+  min-width: 200px;
+}
+
+.lab-title-input :deep(.v-field__input) {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+}
 </style>
diff --git a/docs/.vitepress/theme/components/price-estimator/LabModal.vue b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
new file mode 100644
index 00000000000..e4d7bcada2c
--- /dev/null
+++ b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue"
+import { priceEstimatorStore } from "./stores/priceEstimatorStore"
+import type { MachineFlavor } from "./types"
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const formData = ref({
+  name: "",
+  subscription: "1Y",
+  machineFlavor: "default.c1",
+  machineSubscription: "COMMITMENT_1Y",
+  hddSize: 1,
+  nvmeSize: 0,
+})
+
+const subscriptions = computed(() => {
+  return priceEstimatorStore.catalogue.labPrices.map(p => {
+    const price = p["price.nok.ex.vat"]
+    const is3Y = p["service.commitment"] === "3Y"
+    return {
+      title: `${is3Y ? "3 Years" : "1 Year"} - ${price.toFixed(0)} NOK`,
+      value: p["service.commitment"],
+    }
+  })
+})
+
+const machineSubscriptions = [
+  { title: "Commitment - 1 Year", value: "COMMITMENT_1Y" },
+  { title: "Commitment - 3 Years", value: "COMMITMENT_3Y" },
+]
+
+const machineFlavors = computed(() => {
+  return priceEstimatorStore.catalogue.machinePrices
+})
+
+const save = () => {
+  priceEstimatorStore.addLab({
+    name: formData.value.name,
+    subscriptionType: formData.value.subscription,
+    machineFlavor: formData.value.machineFlavor,
+    machineSubscription: formData.value.machineSubscription,
+    hddSize: Number(formData.value.hddSize),
+    nvmeSize: Number(formData.value.nvmeSize),
+  })
+  emit("close")
+}
+
+onMounted(() => {
+  formData.value.name = `Lab ${priceEstimatorStore.labs.length + 1}`
+})
+</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-col cols="12">
+            <v-select
+              v-model="formData.subscription"
+              :items="subscriptions"
+              label="Subscription Period"
+              variant="outlined"
+            ></v-select>
+          </v-col>
+
+          <v-col cols="12">
+            <v-autocomplete
+              v-model="formData.machineFlavor"
+              :items="machineFlavors"
+              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" sm="6">
+            <v-text-field
+              v-model="formData.hddSize"
+              label="HDD Storage (TB)"
+              type="number"
+              variant="outlined"
+              min="0"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12" sm="6">
+            <v-text-field
+              v-model="formData.nvmeSize"
+              label="NVMe Storage (TB)"
+              type="number"
+              variant="outlined"
+              min="0"
+            ></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>
+</template>
diff --git a/docs/.vitepress/theme/components/price-estimator/Machine.vue b/docs/.vitepress/theme/components/price-estimator/Machine.vue
deleted file mode 100644
index 48077aaf071..00000000000
--- a/docs/.vitepress/theme/components/price-estimator/Machine.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<script lang="ts">
-import type {
-  ComputeUnit,
-  PriceListItem,
-  GpuModel,
-  MachineFlavor,
-  MachineFormData,
-  Catalogue,
-} from "./types"
-
-export default {
-  name: "Machine",
-  props: {
-    computeId: { type: Number, default: () => 0 },
-    catalogue: {
-      type: Object as () => Catalogue,
-      required: true,
-    },
-    selectedRadio: { type: String, default: "1Y" },
-    initialData: { type: Object as () => ComputeUnit | null, default: null },
-  },
-
-  emits: ["close", "open-snackbar"],
-
-  data() {
-    return {
-      formData: {
-        id: null,
-        name: null,
-        flavor: null,
-        gpu: null,
-        subscription: null,
-      } as MachineFormData,
-      subscriptions: [
-        { text: "Commitment - 1 Year", value: "COMMITMENT_1Y" },
-        { text: "Commitment - 3 Years", value: "COMMITMENT_3Y" },
-        { text: "On demand", value: "ONDEMAND" },
-        { text: "Spot", value: "SPOT" },
-      ],
-    }
-  },
-
-  computed: {
-    getComputePriceYear(): string | number {
-      if (!this.formData.flavor || !this.formData.subscription) {
-        return 0
-      }
-      let price: number | undefined
-      if (this.formData.subscription.includes("COMMITMENT")) {
-        if (this.formData.subscription === "COMMITMENT_3Y") {
-          const item = this.catalogue.computePrices.find(
-            (item: PriceListItem) =>
-              item["service.unit"] === this.formData.flavor &&
-              item["service.level"] === "COMMITMENT" &&
-              item["service.commitment"] === "3Y",
-          )
-          price = item ? item["price.nok.ex.vat"] / 3 : undefined
-        } else {
-          const item = this.catalogue.computePrices.find(
-            (item: PriceListItem) =>
-              item["service.unit"] === this.formData.flavor &&
-              item["service.level"] === "COMMITMENT" &&
-              item["service.commitment"] === "1Y",
-          )
-          price = item ? item["price.nok.ex.vat"] : undefined
-        }
-      } else {
-        const item = this.catalogue.computePrices.find(
-          (item: PriceListItem) => item["service.unit"] === this.formData.flavor && item["service.level"] === this.formData.subscription,
-        )
-        price = item ? item["price.nok.ex.vat"] : undefined
-      }
-      return price ? Number(price).toFixed(2) : 0
-    },
-    getComputePriceMonth(): string | number {
-      const yearly = Number(this.getComputePriceYear)
-      return yearly ? Number(yearly / 12).toFixed(2) : 0
-    },
-
-    getGpuPriceYear(): string | number {
-      if (!this.formData.gpu) {
-        return 0
-      }
-      const price = this.catalogue.gpuPrices.find(
-        (item: PriceListItem) => item["service.unit"] === this.formData.gpu && item["service.level"] === "ONDEMAND"
-      )
-      return price ? Number(price["price.nok.ex.vat"]).toFixed(2) : 0
-    },
-    getGpuPriceMonth(): string | number {
-      const yearlyGpu = Number(this.getGpuPriceYear)
-      return yearlyGpu ? Number(yearlyGpu / 12).toFixed(2) : 0
-    },
-    getFlavors(): MachineFlavor[] {
-      if (!this.formData.subscription) {
-        return []
-      }
-      return this.catalogue.machineCatalogue.filter((item: MachineFlavor) => item)
-    },
-    getGpus() {
-      return this.catalogue.availableGpus.map((item: GpuModel) => {
-        return {
-          title: item["type"] + " - " + item["vram"] + " GB VRAM",
-          value: item["type"],
-        }
-      })
-    },
-  },
-
-  created() {
-    if (this.initialData) {
-      this.formData.id = this.initialData.id
-      this.formData.name = this.initialData.name.replace(" (incl. GPU)", "")
-      this.formData.subscription = this.initialData.type
-
-      if (this.initialData.flavor.includes(" + ")) {
-        const parts = this.initialData.flavor.split(" + ")
-        this.formData.flavor = parts[0]
-        this.formData.gpu = parts[1]
-      } else {
-        this.formData.flavor = this.initialData.flavor
-        this.formData.gpu = this.initialData.gpu || null
-      }
-    } else {
-      this.formData.id = this.computeId
-      this.formData.name = `machine-${this.computeId}`
-    }
-  },
-
-  methods: {
-    getSummedPrice(num1: string | number, num2: string | number): number {
-      return (Number(num1) + Number(num2))
-    },
-    close() {
-      this.$emit("close")
-    },
-    save() {
-      if (!this.formData.flavor) {
-        this.$emit("open-snackbar", "No machine type selected")
-        return
-      }
-
-      const name = this.formData.gpu ? `${this.formData.name} (incl. GPU)` : this.formData.name
-      const monthlyPrice = this.getSummedPrice(this.getComputePriceMonth, this.getGpuPriceMonth)
-      const yearlyPrice = this.getSummedPrice(this.getComputePriceYear, this.getGpuPriceYear)
-      const machinetitle = this.catalogue.machineCatalogue
-        .filter((item: MachineFlavor) => item["value"] === this.formData.flavor)[0]
-        ["title"].split(" - ")[1]
-        .split(" / ")
-      const core_count = parseInt(machinetitle[0].split(" ")[0])
-      const ram = parseInt(machinetitle[1].split(" ")[0])
-      const flavorWithGpu = this.formData.gpu ? this.formData.flavor + " + " + this.formData.gpu : this.formData.flavor
-      this.$emit("close", {
-        id: this.formData.id,
-        name: name,
-        flavor: this.formData.flavor ? flavorWithGpu : null,
-        gpu: this.formData.gpu ? this.formData.gpu : null,
-        core_count: core_count,
-        ram: ram,
-        monthlyPrice: monthlyPrice,
-        yearlyPrice: yearlyPrice,
-        type: this.formData.subscription,
-      })
-    },
-  },
-}
-</script>
-
-<template>
-  <v-card light class="d-flex justify-center align-center">
-    <v-card-title>
-      <span class="text-h5">Add Compute</span>
-    </v-card-title>
-    <v-card-text style="width: 100%">
-      <v-container>
-        <v-row dense>
-          <v-col cols="12">
-            <v-text-field v-model="formData.name" label="Name" required variant="outlined"></v-text-field>
-          </v-col>
-          <v-col cols="12">
-            <v-autocomplete
-              v-model="formData.subscription"
-              :items="subscriptions"
-              item-title="text"
-              item-value="value"
-              label="Subscription type"
-              required
-              variant="outlined"
-            >
-            </v-autocomplete>
-          </v-col>
-          <v-col cols="12">
-            <v-autocomplete
-              v-model="formData.flavor"
-              :items="getFlavors"
-              label="Machine type"
-              variant="outlined"
-              required
-              :disabled="!formData.subscription"
-              width="100%"
-            >
-              <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 v-show="formData.flavor" cols="12" sm="6">
-            <v-text-field
-              v-model="getComputePriceMonth"
-              label="Compute Price / Month"
-              suffix="NOK ex. VAT"
-              readonly
-              variant="outlined"
-            ></v-text-field>
-          </v-col>
-          <v-col v-show="formData.flavor" cols="12" sm="6">
-            <v-text-field
-              v-model="getComputePriceYear"
-              label="Compute Price / Year"
-              suffix="NOK ex. VAT / Year"
-              readonly
-              variant="outlined"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12">
-            <v-select
-              v-model="formData.gpu"
-              :items="getGpus"
-              label="GPU type (optional)"
-              variant="outlined"
-              clearable
-              :disabled="!formData.subscription"
-            ></v-select>
-          </v-col>
-          <v-col v-show="formData.gpu" cols="12" sm="6">
-            <v-text-field
-              v-model="getGpuPriceMonth"
-              label="GPU Price / Month"
-              suffix="NOK ex. VAT"
-              readonly
-              variant="outlined"
-            ></v-text-field>
-          </v-col>
-          <v-col v-show="formData.gpu" cols="12" sm="6">
-            <v-text-field
-              v-model="getGpuPriceYear"
-              label="GPU Price / Year"
-              suffix="NOK ex. VAT / Year"
-              readonly
-              variant="outlined"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-text>
-    <v-card-actions>
-      <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-card-actions>
-  </v-card>
-</template>
diff --git a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
new file mode 100644
index 00000000000..e34d8aca07d
--- /dev/null
+++ b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue"
+import type { ComputeUnit, PriceListItem, GpuModel, MachineFlavor, MachineFormData } from "./types"
+import { priceEstimatorStore } from "./stores/priceEstimatorStore"
+
+const props = defineProps({
+  labId: { type: Number, required: true },
+  computeId: { type: Number, required: true },
+  editData: { type: Object as () => ComputeUnit | null },
+  selectedRadio: { type: String, default: "1Y" },
+})
+
+const emit = defineEmits<{
+  close: [data?: any]
+  "open-snackbar": [message: string]
+}>()
+
+const formData = ref<MachineFormData>({
+  id: undefined,
+  name: undefined,
+  flavor: undefined,
+  gpu: undefined,
+  subscription: undefined,
+})
+
+const subscriptions = [
+  { text: "Commitment - 1 Year", value: "COMMITMENT_1Y" },
+  { text: "Commitment - 3 Years", value: "COMMITMENT_3Y" },
+  { text: "On demand", value: "ONDEMAND" },
+  { text: "Spot", value: "SPOT" },
+]
+
+const getComputePriceYear = computed((): string | number => {
+  if (!formData.value.flavor || !formData.value.subscription) {
+    return 0
+  }
+  let price: number | undefined
+  if (formData.value.subscription.includes("COMMITMENT")) {
+    if (formData.value.subscription === "COMMITMENT_3Y") {
+      const item = priceEstimatorStore.catalogue.computePrices.find(
+        (item: PriceListItem) =>
+          item["service.unit"] === formData.value.flavor &&
+          item["service.level"] === "COMMITMENT" &&
+          item["service.commitment"] === "3Y",
+      )
+      price = item ? item["price.nok.ex.vat"] / 3 : undefined
+    } else {
+      const item = priceEstimatorStore.catalogue.computePrices.find(
+        (item: PriceListItem) =>
+          item["service.unit"] === formData.value.flavor &&
+          item["service.level"] === "COMMITMENT" &&
+          item["service.commitment"] === "1Y",
+      )
+      price = item ? item["price.nok.ex.vat"] : undefined
+    }
+  } else {
+    const item = priceEstimatorStore.catalogue.computePrices.find(
+      (item: PriceListItem) =>
+        item["service.unit"] === formData.value.flavor && item["service.level"] === formData.value.subscription,
+    )
+    price = item ? item["price.nok.ex.vat"] : undefined
+  }
+  return price ? Number(price).toFixed(2) : 0
+})
+
+const getComputePriceMonth = computed((): string | number => {
+  const yearly = Number(getComputePriceYear.value)
+  return yearly ? Number(yearly / 12).toFixed(2) : 0
+})
+
+const getGpuPriceYear = computed((): string | number => {
+  if (!formData.value.gpu) {
+    return 0
+  }
+  const price = priceEstimatorStore.catalogue.gpuPrices.find(
+    (item: PriceListItem) => item["service.unit"] === formData.value.gpu && item["service.level"] === "ONDEMAND",
+  )
+  return price ? Number(price["price.nok.ex.vat"]).toFixed(2) : 0
+})
+
+const getGpuPriceMonth = computed((): string | number => {
+  const yearlyGpu = Number(getGpuPriceYear.value)
+  return yearlyGpu ? Number(yearlyGpu / 12).toFixed(2) : 0
+})
+
+const getFlavors = computed((): MachineFlavor[] => {
+  if (!formData.value.subscription) {
+    return []
+  }
+  return priceEstimatorStore.catalogue.machinePrices.filter((item: MachineFlavor) => item)
+})
+
+const getGpus = computed(() => {
+  return priceEstimatorStore.catalogue.availableGpus.map((item: GpuModel) => {
+    return {
+      title: item["type"] + " - " + item["vram"] + " GB VRAM",
+      value: item["type"],
+    }
+  })
+})
+
+const close = () => {
+  emit("close")
+}
+
+const save = () => {
+  if (!formData.value.flavor) {
+    emit("open-snackbar", "No machine type selected")
+    return
+  }
+
+  const name = formData.value.name
+  const machinetitle = priceEstimatorStore.catalogue.machinePrices
+    .filter((item: MachineFlavor) => item["value"] === formData.value.flavor)[0]
+    ["title"].split(" - ")[1]
+    .split(" / ")
+  const core_count = parseInt(machinetitle[0].split(" ")[0])
+  const ram = parseInt(machinetitle[1].split(" ")[0])
+  const flavorWithGpu = formData.value.flavor
+  const subscription = formData.value.subscription
+  const gpu = formData.value.gpu
+
+  if (props.editData) {
+    priceEstimatorStore.editComputeInLab(props.labId, props.editData.id, {
+      name: name!,
+      flavor: flavorWithGpu,
+      core_count: core_count,
+      ram: ram,
+      type: subscription!,
+      gpu: gpu,
+    })
+  } else {
+    // Add new compute
+    priceEstimatorStore.addComputeToLab(props.labId, {
+      name: name!,
+      flavor: flavorWithGpu!,
+      core_count: core_count,
+      ram: ram,
+      type: subscription!,
+      gpu: gpu,
+    })
+  }
+
+  emit("close")
+}
+
+onMounted(() => {
+  if (props.editData) {
+    formData.value.id = props.editData.id
+    formData.value.name = props.editData.name
+    formData.value.subscription = props.editData.type
+
+    if (props.editData.flavor.includes(" + ")) {
+      const parts = props.editData.flavor.split(" + ")
+      formData.value.flavor = parts[0]
+      formData.value.gpu = parts[1]
+    } else {
+      formData.value.flavor = props.editData.flavor
+      formData.value.gpu = props.editData.gpu
+    }
+  } else {
+    formData.value.id = props.computeId
+    formData.value.name = `machine-${props.computeId + 1}`
+  }
+})
+</script>
+
+<template>
+  <v-card light class="d-flex justify-center align-center">
+    <v-card-title>
+      <span class="text-h5">Add Compute</span>
+    </v-card-title>
+    <v-card-text style="width: 100%">
+      <v-container>
+        <v-row dense>
+          <v-col cols="12">
+            <v-text-field v-model="formData.name" label="Name" required variant="outlined"></v-text-field>
+          </v-col>
+          <v-col cols="12">
+            <v-autocomplete
+              v-model="formData.subscription"
+              :items="subscriptions"
+              item-title="text"
+              item-value="value"
+              label="Subscription type"
+              required
+              variant="outlined"
+            >
+            </v-autocomplete>
+          </v-col>
+          <v-col cols="12">
+            <v-autocomplete
+              v-model="formData.flavor"
+              :items="getFlavors"
+              label="Machine type"
+              variant="outlined"
+              required
+              :disabled="!formData.subscription"
+              width="100%"
+            >
+              <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 v-show="formData.flavor" cols="12" sm="6">
+            <v-text-field
+              v-model="getComputePriceMonth"
+              label="Compute Price / Month"
+              suffix="NOK ex. VAT"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+          </v-col>
+          <v-col v-show="formData.flavor" cols="12" sm="6">
+            <v-text-field
+              v-model="getComputePriceYear"
+              label="Compute Price / Year"
+              suffix="NOK ex. VAT / Year"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12">
+            <v-select
+              v-model="formData.gpu"
+              :items="getGpus"
+              label="GPU type (optional)"
+              variant="outlined"
+              clearable
+              :disabled="!formData.subscription"
+            ></v-select>
+          </v-col>
+          <v-col v-show="formData.gpu" cols="12" sm="6">
+            <v-text-field
+              v-model="getGpuPriceMonth"
+              label="GPU Price / Month"
+              suffix="NOK ex. VAT"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+          </v-col>
+          <v-col v-show="formData.gpu" cols="12" sm="6">
+            <v-text-field
+              v-model="getGpuPriceYear"
+              label="GPU Price / Year"
+              suffix="NOK ex. VAT / Year"
+              readonly
+              variant="outlined"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <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-card-actions>
+  </v-card>
+</template>
diff --git a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
index 3f4a7da4f14..ee4685426d0 100644
--- a/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
+++ b/docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue
@@ -1,369 +1,64 @@
-<script lang="ts">
-import { defineComponent, nextTick } from "vue"
-import pricesApi from "./api/pricesApi.js"
-import type {
-  LabCard,
-  ComputeUnit,
-  StorageUnit,
-  PriceListItem,
-  GpuModel,
-  MachineFlavor,
-  TotalPriceItem,
-  UpdateComputePayload,
-  UpdateStoragePayload,
-  Catalogue,
-} from "./types"
-
-const ISSERVER = typeof window === "undefined"
-
-export default defineComponent({
-  props: {
-    title: { type: String, default: "Title" },
-  },
-
-  data() {
-    return {
-      labCards: [] as LabCard[],
-      nextLabId: 1,
-      catalogue: {
-        computePrices: [] as PriceListItem[],
-        storagePrices: [] as PriceListItem[],
-        gpuPrices: [] as PriceListItem[],
-        machineCatalogue: [] as MachineFlavor[],
-        availableGpus: [] as GpuModel[],
-      } as Catalogue,
-
-      labPrices: [] as PriceListItem[],
-      totals: {
-        computePrice: 0.0,
-        storageCost: {} as { [key: string]: { size: number; cost: number } }
-      },
-      totalLabCost: [] as TotalPriceItem[],
-      itemsComputeExport: [] as ComputeUnit[][],
-      itemsStorageExport: [] as StorageUnit[][],
-      isLoadingCatalogues : false,
-      isLoadingState: false,
-    }
-  },
-
-  watch: {
-    labCards: {
-      handler() {
-        if (!this.isLoadingState) {
-          this.saveState()
-        }
-      },
-      deep: true,
-    },
-    totals: {
-      handler() {
-        if (!this.isLoadingState) {
-          this.setTotalItems()
-        }
-      },
-      deep: true,
-    },
-  },
-
-  created() {
-    this.initializeAll().then(() => {
-      this.loadState()
-    })
+<script lang="ts" setup>
+import { onMounted, ref, watch, nextTick, computed } from "vue"
+import { priceEstimatorStore } from "./stores/priceEstimatorStore"
+import LabCard from "./LabCard.vue"
+import TotalBlock from "./TotalBlock.vue"
+import LabModal from "./LabModal.vue"
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const isLabModalOpen = ref(false)
+
+watch(
+  () => priceEstimatorStore.labs,
+  () => {
+    if (!priceEstimatorStore.isInitializingPriseEstimator) priceEstimatorStore.saveStateToLocal()
   },
+  { deep: true },
+)
 
-  methods: {
-    saveState() {
-      const stateToSave = {
-        labCards: this.labCards.map((lab: LabCard) => ({
-          id: lab.id,
-          title: lab.title,
-          storage: lab.storage,
-          priceStorage: lab.priceStorage,
-          priceComputeYearly: lab.priceComputeYearly,
-          numCompute: lab.numCompute,
-          initSelectedCompute: lab.selectedCompute || [],
-          initSelectedStorage: lab.selectedStorage || [],
-        })),
-        nextLabId: this.nextLabId,
-      }
-
-      if (!ISSERVER) {
-        localStorage.setItem("priceEstimatorState", JSON.stringify(stateToSave))
-      }
-    },
-
-    loadState() {
-      try {
-        let savedState
-        if (!ISSERVER) {
-          savedState = localStorage.getItem("priceEstimatorState")
-        }
-        if (savedState) {
-          this.isLoadingState = true
-          const state = JSON.parse(savedState)
-          this.labCards = (state.labCards || []).map((lab: any) => ({
-            id: lab.id,
-            title: lab.title,
-            storage: lab.storage || 0,
-            priceStorage: lab.priceStorage || 0,
-            priceComputeYearly: lab.priceComputeYearly || 0,
-            numCompute: lab.numCompute || 0,
-            selectedCompute: lab.initSelectedCompute || [],
-            selectedStorage: lab.initSelectedStorage || [],
-          }))
-          this.nextLabId = state.nextLabId || 1
-
-          this.totals.computePrice = this.labCards.reduce((total: number, lab: LabCard) => total + lab.priceComputeYearly, 0)
-          this.totals.storageCost = this.calculateStorageCost()
-          this.setTotalItems()
-
-          this.$nextTick(() => {
-            this.isLoadingState = false
-          })
-        }
-      } catch (error) {
-        console.error("Failed to load state:", error)
-        this.labCards = []
-        this.nextLabId = 1
-        this.isLoadingState = false
-      }
-    },
-
-    initializeAll() {
-        this.isLoadingCatalogues = true
-
-      const priceListPromise = pricesApi.getPriceList().then((json: PriceListItem[]) => {
-        this.catalogue.computePrices = json.filter((item: PriceListItem) => item["service.group"] === "cpu").map(this.preparePricesToYearly)
-        this.catalogue.storagePrices = json.filter((item: PriceListItem) => item["service.family"] === "store")
-        this.catalogue.gpuPrices = json.filter((item: PriceListItem) => item["service.group"] === "gpu").map(this.preparePricesToYearly)
-        this.labPrices = json.filter((item: PriceListItem) => item["service.group"] === "lab")
-      })
-
-      const gpusPromise = pricesApi.getAvailableGPUS().then((gpus: GpuModel[]) => {
-        this.catalogue.availableGpus = gpus
-      })
-
-      const machinesPromise = pricesApi.getMachineFlavors().then((machine: MachineFlavor[]) => {
-        this.catalogue.machineCatalogue = machine
-      })
-      this.setTotalItems()
-
-      return Promise.all([priceListPromise, gpusPromise, machinesPromise]).then(() => {
-        this.isLoadingCatalogues = false
-      })
-    },
-
-    preparePricesToYearly(item: PriceListItem): PriceListItem {
-      if (item["service.commitment"] === "1D") {
-        item["service.commitment"] = "1Y"
-        item["price.nok.ex.vat"] = item["price.nok.ex.vat"] * 365
-      }
-      return item
-    },
-
-    addLabCard() {
-      const newLabCard = {
-        id: this.nextLabId,
-        title: `Lab ${this.nextLabId}`,
-        storage: 0,
-        priceStorage: 0,
-        priceComputeYearly: 0,
-        numCompute: 0,
-        initSelectedCompute: [],
-        initSelectedStorage: [],
-      }
-      this.labCards.push(newLabCard)
-      this.nextLabId++
-    },
-
-    calculateStorageCost() {
-      let totalStorageByType: { [key: string]: number } = {}
-      this.labCards.forEach((lab: LabCard) => {
-          lab.selectedStorage?.forEach((storage: StorageUnit) => {
-            if (totalStorageByType[storage.type]) {
-              totalStorageByType[storage.type] += storage.size
-            } else {
-              totalStorageByType[storage.type] = storage.size
-            }
-          })
-        })
-      let totalCost = {} as { [key: string]: {size: number, cost: number} }
-      for (const [type, size] of Object.entries(totalStorageByType)) {
-        totalCost[type] = { size: size, cost: 0 }
-        const blockType = type === "NVME" ? "block.nvme.rep" : "block.hdd.rep"
-        let remainingSize = size
-        const priceEntries = this.catalogue.storagePrices.filter((item: PriceListItem) => item["service.group"] === blockType && item["service.level"] === "COMMITMENT" && item["service.commitment"] === "1Y")
-        for (const entry of priceEntries) {
-          let applicableSize = 0
-          if (entry["service.unit"] === "First 10 TB") {
-            applicableSize = Math.min(remainingSize, 10)
-          } else if (entry["service.unit"] === "Next 90 TB") {
-            applicableSize = Math.min(remainingSize, 90)
-          } else {
-            applicableSize = remainingSize
-          }
-          remainingSize -= applicableSize
-
-          totalCost[type].cost += entry["price.nok.ex.vat"] * applicableSize
-        }
-      }
-      return totalCost
-
-    },
-
-
-    updateLabCardStorage(id: number, payload: UpdateStoragePayload) {
-      const labCard = this.labCards.find((lab: LabCard) => lab.id === id)
-      if (labCard) {
-        labCard.storage = payload.size
-        labCard.priceStorage = payload.price
-        labCard.selectedStorage = payload.selectedStorage
-      }
-      this.totals.storageCost = this.calculateStorageCost()
-      this.itemsStorageExport[id] = payload.selectedStorage
-    },
-
-    updateLabCardCompute(id: number, prices: UpdateComputePayload) {
-      const labCard = this.labCards.find((lab: LabCard) => lab.id === id)
-      if (labCard) {
-        labCard.priceComputeYearly = Number(prices.yearlyPrice)
-        labCard.numCompute = Number(prices.numCompute)
-        labCard.selectedCompute = prices.selectedCompute
-      }
-      this.totals.computePrice = this.labCards.reduce((total: number, lab: LabCard) => total + lab.priceComputeYearly, 0)
-      this.itemsComputeExport[id] = prices.selectedCompute
-    },
-    removeLabCard(id: number) {
-      this.labCards = this.labCards.filter(lab => lab.id !== id)
-      delete this.itemsComputeExport[id]
-      delete this.itemsStorageExport[id]
-      this.totals.computePrice = this.labCards.reduce((total: number, lab: LabCard) => total + lab.priceComputeYearly, 0)
-      this.totals.storageCost = this.calculateStorageCost()
-    },
-
-    removeAllLabs() {
-      this.labCards = []
-      this.itemsComputeExport = []
-      this.itemsStorageExport = []
-      this.totals = {
-        computePrice: 0.0,
-        storageCost: {} as { [key: string]: { size: number; cost: number } }
-      }
-      this.nextLabId = 1
-      if (!ISSERVER) {
-        localStorage.removeItem("priceEstimatorState")
-      }
-    },
-
-    setTotalItems() {
-      let priceItems: { name: string; subscription: string | null; units: number | string; price: number }[] = []
-      if (this.labCards && this.labCards.length > 0 && this.labPrices.length > 0) {
-        this.labCards.forEach(item => {
-          priceItems.push({
-            name: item.title,
-            subscription: "1 Year",
-            units: 1,
-            price: this.labPrices[0]["price.nok.ex.vat"],
-          })
-        })
-      }
-      let numOfCompute = this.labCards.reduce((total, lab) => total + lab.numCompute, 0)
-      priceItems.push({
-        name: "Compute",
-        subscription: null,
-        units: numOfCompute || 0,
-        price: this.totals.computePrice,
-      })
-      const summedStorageCost = Object.values(this.totals.storageCost).reduce((a, b) => a + b.cost, 0)
-      const summedStorageSize = Object.values(this.totals.storageCost).reduce((a, b) => a + b.size, 0)
-      priceItems.push({
-        name: "Storage",
-        subscription: "Commitment",
-        units: `${summedStorageSize} TB`,
-        price: summedStorageCost,
-      })
-      this.totalLabCost = priceItems
-    },
-    triggerFileUpload() {
-      (this.$refs.fileInput as HTMLInputElement).click()
-    },
-
-    async handleFileUpload(event: Event) {
-      const target = event.target as HTMLInputElement
-      const file = target.files?.[0]
-      if (!file) return
-
-      const reader = new FileReader()
-      reader.onload = async e => {
-        try {
-          await this.initializeAll()
-
-          const data = JSON.parse(e.target?.result as string)
-
-          if (!data.version || !Array.isArray(data.labs)) {
-            throw new Error("Invalid JSON format: 'version' or 'labs' property is missing.")
-          }
-
-          this.isLoadingState = true
-          this.labCards = []
-          this.itemsComputeExport = []
-          this.itemsStorageExport = []
-          this.totals = {
-            computePrice: 0.0,
-            storageCost: {} as { [key: string]: { size: number; cost: number } }
-          }
-          this.nextLabId = 1
-
-          data.labs.forEach((lab: any) => {
-            const newLabCard: LabCard = {
-              id: lab.id,
-              title: lab.name,
-              storage: 0,
-              priceStorage: 0,
-              priceComputeYearly: 0,
-              numCompute: 0,
-              selectedCompute: lab.compute || [],
-              selectedStorage: lab.storage || [],
-            }
-            this.labCards.push(newLabCard)
-            if (lab.id >= this.nextLabId) {
-              this.nextLabId = lab.id + 1
-            }
-          })
-
-          await nextTick()
-          this.isLoadingState = false
-          target.value = ""
-        } catch (error) {
-          console.error("Failed to parse or process JSON file:", error)
-          alert("Error: Could not import file. Please ensure it is a valid JSON file with the correct format.")
-        }
-      }
-      reader.onerror = error => {
-        console.error("FileReader error:", error)
-        alert("Error reading file.")
-      }
-      reader.readAsText(file)
-    },
-  },
+onMounted(async () => {
+  await priceEstimatorStore.initializePriceEstimatorStore()
 })
+
+function triggerFileUpload() {
+  fileInput.value?.click()
+}
+
+async function handleFileUpload(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  try {
+    await priceEstimatorStore.importLabs(file)
+    target.value = ""
+  } catch (err) {
+    console.error(err)
+    alert(err)
+  }
+}
 </script>
 
 <template>
-  <v-container v-if="!isLoadingCatalogues" >
+  <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 a rough estimate of how much our services cost</v-card-subtitle>
+      <v-card-subtitle> This calculator gives a rough estimate of how much our services cost </v-card-subtitle>
+
       <v-container>
-        <v-row lex-direction="row-reverse" justify="space-between">
+        <v-row justify="space-between">
           <v-col cols="auto">
-            <v-btn density="default" size="large" dark @click="addLabCard">Add lab</v-btn>
+            <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="labCards.length !== 0">
-                <v-btn density="default" size="large" dark @click="removeAllLabs"> Remove all </v-btn>
+              <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"
@@ -381,32 +76,22 @@ export default defineComponent({
           </v-col>
         </v-row>
       </v-container>
+
       <v-row>
-        <v-col v-for="(lab, index) in labCards" :key="index" cols="12">
-          <LabCard
-            :key="lab.id"
-            :title="lab.title"
-            :catalogue="catalogue"
-            :storage-cost-by-type="totals.storageCost"
-            :init-selected-compute="lab.selectedCompute || []"
-            :init-selected-storage="lab.selectedStorage || []"
-            @updateStorage="updateLabCardStorage(lab.id, $event)"
-            @updateCompute="updateLabCardCompute(lab.id, $event)"
-            @removeLab="removeLabCard(lab.id)"
-          />
+        <v-col>
+          <LabCard v-for="lab of priceEstimatorStore.labs" :key="lab.id" :lab="lab" />
         </v-col>
       </v-row>
-      <v-row v-if="labCards.length !== 0">
-        <TotalBlock
-          :total-items="totalLabCost"
-          :totals="totals"
-          :itemsComputeExport="itemsComputeExport"
-          :itemsStorageExport="itemsStorageExport"
-        />
+
+      <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>
   </v-container>
 </template>
-
-<style scoped>
-</style>
diff --git a/docs/.vitepress/theme/components/price-estimator/Storage.vue b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
similarity index 57%
rename from docs/.vitepress/theme/components/price-estimator/Storage.vue
rename to docs/.vitepress/theme/components/price-estimator/StorageModal.vue
index 7b38d16e27e..d4953051867 100644
--- a/docs/.vitepress/theme/components/price-estimator/Storage.vue
+++ b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
@@ -1,50 +1,64 @@
-<script lang="ts">
+<script setup lang="ts">
+import { reactive, onMounted } from "vue"
 import type { StorageFormData, StorageUnit } from "./types"
+import { priceEstimatorStore } from "./stores/priceEstimatorStore"
 
-export default {
-  name: "Storage",
-  emits: ["close"],
-  props: {
-    storageId: { type: Number, default: () => 0 },
-    initialData: { type: Object as () => StorageUnit | null, default: null },
-  },
-  data: () => ({
-    formData: {
-      id: null,
-      name: null,
-      usage: "Archive",
-      type: "HDD",
-      size: 1,
-    } as StorageFormData,
-  }),
+const props = defineProps({
+  labId: { type: Number, required: true },
+  storageId: { type: Number, required: true },
+  editData: { type: Object as () => StorageUnit | null },
+})
 
-  created() {
-    if (this.initialData) {
-      this.formData.id = this.initialData.id
-      this.formData.name = this.initialData.name
-      this.formData.usage = this.initialData.usage
-      this.formData.type = this.initialData.type
-      this.formData.size = this.initialData.size
-    } else {
-      this.formData.id = this.storageId
-      this.formData.name = `volume-${this.storageId}`
-    }
-  },
-  methods: {
-    close() {
-      this.$emit("close")
-    },
-    save() {
-      this.$emit("close", {
-        id: this.formData.id,
-        name: this.formData.name,
-        size: Number(this.formData.size),
-        usage: this.formData.usage,
-        type: this.formData.type,
-      })
-    },
-  },
+const emit = defineEmits<{
+  close: [data?: StorageUnit]
+}>()
+
+const formData = reactive<StorageFormData>({
+  id: undefined,
+  name: undefined,
+  usage: "Archive",
+  type: "HDD",
+  size: 1,
+})
+
+const close = () => {
+  emit("close")
+}
+
+const save = () => {
+  if (props.editData) {
+    // Edit
+    priceEstimatorStore.editStorageInLab(props.labId, props.editData.id, {
+      name: formData.name!,
+      usage: formData.usage!,
+      type: formData.type!,
+      size: Number(formData.size),
+    })
+  } else {
+    // Add new
+    priceEstimatorStore.addStorageToLab(props.labId, {
+      name: formData.name!,
+      usage: formData.usage!,
+      type: formData.type!,
+      size: Number(formData.size),
+    })
+  }
+
+  emit("close")
 }
+
+onMounted(() => {
+  if (props.editData) {
+    formData.id = props.editData.id
+    formData.name = props.editData.name
+    formData.usage = props.editData.usage
+    formData.type = props.editData.type
+    formData.size = props.editData.size
+  } else {
+    formData.id = props.storageId
+    formData.name = `volume-${props.storageId + 1}`
+  }
+})
 </script>
 
 <template>
diff --git a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
index e2791f4e68b..be336841c06 100644
--- a/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
+++ b/docs/.vitepress/theme/components/price-estimator/TotalBlock.vue
@@ -1,141 +1,175 @@
-<script>
-export default {
-  name: "TotalBlock",
-  props: {
-    totalItems: { type: Array, default: () => [] },
-    totals: {
-      type: Object,
-      default: () => ({
-        computePrice: 0.0,
-        storageCost: {},
-      }),
-    },
-    itemsComputeExport: { type: Array, default: () => [] },
-    itemsStorageExport: { type: Array, default: () => [] },
-  },
-
-  data() {
-    return {
-      totalHeaders: [
-        { title: "Name", align: "start", sortable: true, key: "name" },
-        { title: "Total units", align: "start", sortable: true, key: "units" },
-        { title: "Price / year", align: "start", sortable: true, key: "price" },
-      ],
-    }
-  },
-  computed: {
-    formattedTotalItems() {
-      if (!this.totalItems) {
-        return []
-      }
-      return this.totalItems.map(item => ({
-        ...item,
-        price: Number(item.price).toFixed(2) + " kr",
-      }))
-    },
-    sumInTotal() {
-
-      const summedStorageCost = Object.values(this.totals.storageCost).reduce((a, b) => a + b.cost, 0)
-      const labsTotal = this.totalItems
-        .filter(item => item.name.startsWith('Lab'))
-        .reduce((sum, item) => sum + item.price, 0)
-      return labsTotal + this.totals.computePrice + summedStorageCost
-    },
-  },
-  methods: {
-    exportItems() {
-      const computeItemsClean = JSON.parse(JSON.stringify(this.itemsComputeExport))
-      const storageItemsClean = JSON.parse(JSON.stringify(this.itemsStorageExport))
-
-      const labs = [] 
-      const maxId = Math.max(computeItemsClean.length, storageItemsClean.length)
-      for (let id = 1; id < maxId; id++) {
-        const compute = computeItemsClean[id]
-        const storage = storageItemsClean[id]
-        if (compute || storage) {
-          const labObject = {
-            id: id,
-            name: "lab " + id,
-          }
-
-          if (compute) {
-            labObject.compute = compute.map(item => {
-              delete item.monthlyPrice
-              delete item.yearlyPrice
-              return item
-            })
-          }
-
-          if (storage) {
-            labObject.storage = storage.map(item => {
-              delete item.price
-              return item
-            })
-          }
-          labs.push(labObject)
-        }
-      }
-
-      const exportData = {
-        version: "1.0",
-        labs: labs,
-      }
-
-      const jsonString = JSON.stringify(exportData, null, 2)
-      const blob = new Blob([jsonString], { type: "application/json" })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement("a")
-      a.href = url
-      a.download = "lab-export.json"
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    },
-  },
-}
+<script setup>
+import { computed } from "vue"
+import { priceEstimatorStore } from "./stores/priceEstimatorStore"
+
+const currencyFormatter = new Intl.NumberFormat("nb-NO", {
+  style: "currency",
+  currency: "NOK",
+  maximumFractionDigits: 0,
+})
+
+const headers = [
+  { title: "Name", key: "name", sortable: false },
+  { title: "Units", key: "units", sortable: false },
+  { title: "Price / year", key: "cost", sortable: false },
+]
+
+const rawSummary = computed(() => priceEstimatorStore.updateTotalSummary())
+
+const tableItems = computed(() => {
+  const s = rawSummary.value || {}
+  const items = []
+
+  let totalFlat = 0
+  let totalDiscount = 0
+  let totalSubsequent = 0
+
+  // Lab subscriptions 1Y
+  if (s.labSubscriptions?.["1Y"]?.units > 0) {
+    const flat = Number(s.labSubscriptions["1Y"].price ?? 0)
+    totalFlat += flat
+    totalSubsequent += flat
+
+    items.push({
+      id: "labSubscriptions1Y",
+      name: "Lab Subscriptions (1 year)",
+      units: s.labSubscriptions["1Y"].units,
+      cost: flat,
+    })
+  }
+
+  // Lab subscriptions 3Y
+  if (s.labSubscriptions?.["3Y"]?.units > 0) {
+    const flat = Number(s.labSubscriptions["3Y"].price ?? 0)
+    totalFlat += flat
+    // 3Y subscription is paid upfront (or in first year context), not added to subsequent years
+
+    items.push({
+      id: "labSubscriptions3Y",
+      name: "Lab Subscriptions (3 years)",
+      units: s.labSubscriptions["3Y"].units,
+      cost: flat,
+    })
+  }
+
+  // Compute
+  if (s.allCompute) {
+    const flat = Number(s.allCompute.price ?? 0)
+    totalFlat += flat
+    totalSubsequent += flat
+
+    items.push({
+      id: "compute",
+      name: "Compute",
+      units: s.allCompute.units ?? 0,
+      cost: flat,
+    })
+  }
+
+  // Storage
+  if (s.allStorage) {
+    Object.entries(s.allStorage).forEach(([type, obj]) => {
+      const flat = Number(obj.costFlat ?? 0)
+      const tiered = Number(obj.costTiered ?? flat)
+      const discount = Math.max(0, flat - tiered)
+
+      totalFlat += flat
+      totalSubsequent += flat
+      totalDiscount += discount
+
+      items.push({
+        id: `storage-${type}`,
+        name: `Storage: ${type}`,
+        units: obj.size ?? 0,
+        cost: flat,
+      })
+    })
+  }
+
+  // Discount row
+  items.push({
+    id: "discount-row",
+    name: "Storage Discount",
+    units: "",
+    cost: totalDiscount > 0 ? -totalDiscount : 0,
+    isDiscountRow: true,
+  })
+
+  // Total row
+  items.push({
+    id: "total-row",
+    name: "Total first year",
+    units: "",
+    cost: totalFlat - totalDiscount,
+    isTotalRow: true,
+  })
+
+  // Only show subsequent years if we have 3Y subscriptions (which are paid upfront/differently)
+  if (s.labSubscriptions?.["3Y"]?.units > 0) {
+    items.push({
+      id: "total-row-2",
+      name: "Total subsequent years",
+      units: "",
+      cost: totalSubsequent - totalDiscount,
+      isTotalRow: true,
+    })
+  }
+
+  return items
+})
 </script>
 
 <template>
-  <v-sheet class="lab-card">
-    <v-card class="ma-0 pa-4">
-      <v-card-title> Total</v-card-title>
-      <v-data-table-virtual
-        :items="formattedTotalItems"
-        :headers="totalHeaders"
-        hover
-        hide-default-footer
-        item-value="id"
-      >
-      </v-data-table-virtual>
-      <v-row dense>
-        <v-col cols="5">
-          <v-btn class="mt-5" @click="exportItems">
-            <v-icon left>mdi-export</v-icon>
-            Export
-          </v-btn>
-        </v-col>
-        <v-col cols="7">
-          <v-list dense>
-            <v-list-item>
-              <v-list-item-title> <strong> Estimated total price: </strong></v-list-item-title>
-              <v-list-item-subtitle class="align-end">
-                {{ Number(this.sumInTotal).toFixed(2) }} NOK ex. VAT / Year
-              </v-list-item-subtitle>
-            </v-list-item>
-          </v-list>
-        </v-col>
-      </v-row>
-    </v-card>
-  </v-sheet>
+  <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 :headers="headers" :items="tableItems" hide-default-footer item-value="id" class="mt-2">
+      <template #item.name="{ item }">
+        <strong v-if="item.isTotalRow">{{ item.name }}</strong>
+        <span v-else>{{ item.name }}</span>
+      </template>
+
+      <template #item.cost="{ item }">
+        <span v-if="item.isDiscountRow" class="text-green-darken-3" style="font-weight: 600">
+          - {{ currencyFormatter.format(Math.abs(item.cost)) }}
+        </span>
+
+        <span v-else-if="item.isTotalRow" style="font-weight: 700">
+          {{ currencyFormatter.format(item.cost) }}
+        </span>
+
+        <span v-else>
+          {{ currencyFormatter.format(item.cost) }}
+        </span>
+      </template>
+
+      <template #item.units="{ item }">
+        <strong v-if="item.isTotalRow">{{ item.units }}</strong>
+        <span v-else>{{ item.units }}</span>
+      </template>
+
+      <template #no-data>
+        <v-sheet class="pa-4">No summary data available</v-sheet>
+      </template>
+    </v-data-table>
+  </v-card>
 </template>
 
 <style scoped>
-.lab-card {
-  width: 94%;
-  margin: auto;
-}
-
 .v-card {
   background-color: #f5f5f5;
 }
diff --git a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
new file mode 100644
index 00000000000..e20cb95e802
--- /dev/null
+++ b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
@@ -0,0 +1,734 @@
+// src/stores/pricingEstimatorStore.ts
+import { reactive } from "vue"
+import {
+  type LabCard,
+  type ComputeUnit,
+  type StorageUnit,
+  type StorageType,
+  type PriceListItem,
+  type GpuModel,
+  type MachineFlavor,
+  type Catalogue,
+  type SubscriptionType,
+  storageTypes,
+  StorageCostByType,
+} from "../types/index.js"
+import pricesApi from "../api/pricesApi.js"
+import { StorageUsageType } from "../types/index"
+
+const ISSERVER = typeof window === "undefined"
+
+export const priceEstimatorStore = reactive({
+  /* State */
+
+  isInitializingPriseEstimator: false,
+  labs: [] as LabCard[],
+  catalogue: {
+    computePrices: [] as PriceListItem[],
+    storagePrices: [] as PriceListItem[],
+    gpuPrices: [] as PriceListItem[],
+    machinePrices: [] as MachineFlavor[],
+    availableGpus: [] as GpuModel[],
+    labPrices: [] as PriceListItem[],
+  } as Catalogue,
+
+  /* Generic Helper */
+
+  async initializePriceEstimatorStore() {
+    console.log("initializing")
+    this.isInitializingPriseEstimator = true
+
+    await this.getCatalogueAPI()
+
+    // Load saved data from localstorage
+    let saved = false
+
+    if (!ISSERVER) {
+      try {
+        const savedJson = localStorage.getItem("hunt-cloud-estimator-state")
+        if (savedJson) {
+          const state = JSON.parse(savedJson)
+          if (state.labs && Array.isArray(state.labs)) {
+            this.labs = []
+
+            for (const lab of state.labs) {
+              const newLabId = this.labs.length
+              this.labs.push({
+                id: newLabId,
+                title: lab.title,
+                selectedCompute: [],
+                selectedStorage: [],
+                // @ts-ignore
+                subscriptionType: lab.subscriptionType,
+              })
+
+              if (lab.selectedCompute) {
+                for (const comp of lab.selectedCompute) {
+                  this.addComputeToLab(newLabId, {
+                    name: comp.name,
+                    flavor: comp.flavor,
+                    core_count: comp.core_count,
+                    ram: comp.ram,
+                    type: comp.type,
+                    gpu: comp.gpu,
+                  })
+                }
+              }
+
+              if (lab.selectedStorage) {
+                for (const store of lab.selectedStorage) {
+                  this.addStorageToLab(newLabId, {
+                    name: store.name,
+                    usage: store.usage,
+                    type: store.type,
+                    size: store.size,
+                  })
+                }
+              }
+            }
+            saved = true
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load state:", err)
+      }
+    }
+
+    this.updateTotalSummary()
+    this.isInitializingPriseEstimator = false
+  },
+
+  async getCatalogueAPI() {
+    // Get price list from the API
+    const priceListPromise = pricesApi.getPriceList().then((json: PriceListItem[]) => {
+      this.catalogue.computePrices = json
+        .filter(item => item["service.group"] === "cpu")
+        .map(this.convertPricesToYearly)
+      this.catalogue.storagePrices = json.filter(item => item["service.family"] === "store")
+      this.catalogue.gpuPrices = json.filter(item => item["service.group"] === "gpu").map(this.convertPricesToYearly)
+      this.catalogue.labPrices = json.filter(item => item["service.group"] === "lab")
+    })
+
+    const gpusPromise = pricesApi.getAvailableGPUS().then((gpus: GpuModel[]) => {
+      this.catalogue.availableGpus = gpus
+    })
+
+    const machinesPromise = pricesApi.getMachineFlavors().then((machine: MachineFlavor[]) => {
+      this.catalogue.machinePrices = machine
+    })
+
+    await Promise.all([priceListPromise, gpusPromise, machinesPromise])
+  },
+
+  convertPricesToYearly(item: PriceListItem) {
+    if (item["service.commitment"] === "1D") {
+      item["service.commitment"] = "1Y"
+      item["price.nok.ex.vat"] *= 365
+    }
+    return item
+  },
+
+  saveStateToLocal() {
+    if (this.isInitializingPriseEstimator || ISSERVER) return
+
+    try {
+      const stateToSave = {
+        labs: this.labs,
+      }
+      localStorage.setItem("hunt-cloud-estimator-state", JSON.stringify(stateToSave))
+    } catch (err) {
+      console.error("Failed to save state:", err)
+    }
+  },
+
+  /* Lab helpers */
+  addLab(payload: {
+    name: string
+    subscriptionType: string
+    machineFlavor: string
+    machineSubscription: string
+    hddSize: number
+    nvmeSize: number
+  }) {
+    const newLab: LabCard = {
+      id: this.labs.length,
+      title: payload.name,
+      selectedCompute: [],
+      selectedStorage: [],
+      // @ts-ignore
+      subscriptionType: payload.subscriptionType,
+    }
+
+    // Add compute
+    const machineInfo = this.catalogue.machinePrices.find(
+      (item: MachineFlavor) => item["value"] === payload.machineFlavor,
+    )
+
+    if (machineInfo) {
+      const prices = this.getComputePriceFromCatalogue(payload.machineFlavor, payload.machineSubscription)
+
+      const machineTitle = machineInfo["title"].split(" - ")[1].split(" / ")
+      const coreCount = parseInt(machineTitle[0].split(" ")[0])
+      const ram = parseInt(machineTitle[1].split(" ")[0])
+      const unit: ComputeUnit = {
+        id: 0,
+        name: "machine-1",
+        flavor: payload.machineFlavor,
+        core_count: coreCount,
+        ram,
+        type: payload.machineSubscription as SubscriptionType,
+        monthlyPrice: prices.monthlyPrice,
+        yearlyPrice: prices.yearlyPrice,
+      }
+      newLab.selectedCompute.push(unit)
+    }
+
+    // Add HDD storage
+    if (payload.hddSize > 0) {
+      const hddPrices = this.getStoragePriceFromCatalogue("HDD", payload.hddSize)
+      if (hddPrices) {
+        newLab.selectedStorage.push({
+          id: 0,
+          name: "volume-1",
+          usage: "Archive",
+          type: "HDD",
+          size: payload.hddSize,
+          monthlyPrice: hddPrices.monthlyPrice,
+          yearlyPrice: hddPrices.yearlyPrice,
+        })
+      }
+    }
+
+    // Add NVME storage
+    if (payload.nvmeSize > 0) {
+      const nvmePrices = this.getStoragePriceFromCatalogue("NVME", payload.nvmeSize)
+      if (nvmePrices) {
+        newLab.selectedStorage.push({
+          id: newLab.selectedStorage.length,
+          name: "volume-nvme",
+          usage: "Work",
+          type: "NVME",
+          size: payload.nvmeSize,
+          monthlyPrice: nvmePrices.monthlyPrice,
+          yearlyPrice: nvmePrices.yearlyPrice,
+        })
+      }
+    }
+
+    // Update
+    this.labs.push(newLab)
+    this.saveStateToLocal()
+  },
+
+  removeLab(labId: number) {
+    this.labs = this.labs.filter(lab => lab.id !== labId)
+  },
+
+  getLabComputePriceSum(labId: number) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) {
+      console.log("Lab not found")
+      return { monthlyCostTotal: 0, yearlyCostTotal: 0 }
+    }
+
+    const monthlyCostTotal = lab.selectedCompute.reduce((a, b) => a + b.monthlyPrice, 0)
+    const yearlyCostTotal = lab.selectedCompute.reduce((a, b) => a + b.yearlyPrice, 0)
+
+    return { monthlyCostTotal, yearlyCostTotal }
+  },
+
+  getLabStoragePriceSum(labId: number): StorageCostByType {
+    const results: StorageCostByType = {
+      HDD: { size: 0, yearlyCostTotal: 0, monthlyCostTotal: 0 },
+      NVME: { size: 0, yearlyCostTotal: 0, monthlyCostTotal: 0 },
+    }
+
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) {
+      return results
+    }
+
+    for (const storageType of storageTypes) {
+      const storages = lab.selectedStorage.filter(str => str.type === storageType)
+      const size = storages.reduce((sum, s) => sum + s.size, 0)
+      const yearlyCostTotal = storages.reduce((sum, s) => sum + s.yearlyPrice, 0)
+      const monthlyCostTotal = storages.reduce((sum, s) => sum + s.monthlyPrice, 0)
+      results[storageType] = { size, yearlyCostTotal, monthlyCostTotal }
+    }
+
+    return results
+  },
+
+  clearAllLabs() {
+    this.labs = []
+
+    if (!ISSERVER) localStorage.removeItem("hunt-cloud-estimator-state")
+  },
+
+  updateLabTitle(id: number, title: string) {
+    const lab = this.labs.find(l => l.id === id)
+    if (lab) {
+      lab.title = title
+      this.saveStateToLocal()
+    }
+  },
+
+  /* Storage helpers */
+
+  calculateTotalStorageCost() {
+    // Calculate current total storage size by types
+    const totalStorageByType: { [key: string]: number } = {}
+    this.labs.forEach((lab: LabCard) => {
+      for (const storage of lab.selectedStorage) {
+        if (totalStorageByType[storage.type]) {
+          totalStorageByType[storage.type] += storage.size
+        } else {
+          totalStorageByType[storage.type] = storage.size
+        }
+      }
+    })
+
+    const totalCost = {} as {
+      [key: string]: { size: number; costTiered: number; costFlat: number }
+    }
+
+    for (const [type, size] of Object.entries(totalStorageByType)) {
+      totalCost[type] = { size: size, costTiered: 0, costFlat: 0 }
+
+      const blockType = type === "NVME" ? "block.nvme.rep" : "block.hdd.rep"
+
+      const priceEntries = this.catalogue.storagePrices.filter(
+        (item: PriceListItem) =>
+          item["service.group"] === blockType &&
+          item["service.level"] === "COMMITMENT" &&
+          item["service.commitment"] === "1Y",
+      )
+
+      // Tiered calculation
+      let remainingSize = size
+      for (const entry of priceEntries) {
+        let applicableSize = 0
+        if (entry["service.unit"] === "First 10 TB") {
+          applicableSize = Math.min(remainingSize, 10)
+        } else if (entry["service.unit"] === "Next 90 TB") {
+          applicableSize = Math.min(remainingSize, 90)
+        } else {
+          applicableSize = remainingSize
+        }
+        remainingSize -= applicableSize
+
+        const unitPrice = Number(entry["price.nok.ex.vat"]) || 0
+        totalCost[type].costTiered += unitPrice * applicableSize
+      }
+
+      // Flat rate
+      const defaultPriceEntry = priceEntries.find((e: PriceListItem) => e["service.unit"] === "First 10 TB")
+      const flatUnitPrice = Number(defaultPriceEntry!["price.nok.ex.vat"]) || 0
+      totalCost[type].costFlat = flatUnitPrice * size
+    }
+
+    return totalCost
+  },
+
+  addStorageToLab(labId: number, payload: { name: string; usage: StorageUsageType; type: StorageType; size: number }) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) return
+
+    const prices = this.getStoragePriceFromCatalogue(payload.type, payload.size)
+    const storageId = lab.selectedStorage?.length || 0
+    const newStorage: StorageUnit = {
+      id: storageId,
+      name: payload.name,
+      usage: payload.usage,
+      type: payload.type,
+      size: payload.size,
+      yearlyPrice: prices?.yearlyPrice!,
+      monthlyPrice: prices?.monthlyPrice!,
+    }
+    lab.selectedStorage.push(newStorage)
+
+    this.saveStateToLocal()
+  },
+
+  editStorageInLab(
+    labId: number,
+    storageId: number,
+    payload: { name: string; usage: StorageUsageType; type: StorageType; size: number },
+  ) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) return
+
+    const idx = lab.selectedStorage?.findIndex(s => s.id === storageId) ?? -1
+    if (idx === -1) return
+    const price = this.getStoragePriceFromCatalogue(payload.type, payload.size)
+    lab.selectedStorage![idx] = {
+      id: storageId,
+      name: payload.name,
+      usage: payload.usage,
+      type: payload.type,
+      size: payload.size,
+      yearlyPrice: price?.yearlyPrice!,
+      monthlyPrice: price?.monthlyPrice!,
+    }
+
+    this.saveStateToLocal()
+  },
+
+  removeStorageFromLab(labId: number, storageId: number) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) return
+
+    lab.selectedStorage = lab.selectedStorage?.filter(s => s.id !== storageId)
+
+    this.saveStateToLocal()
+  },
+
+  getStoragePriceFromCatalogue(type: string, size: number) {
+    // This gets default storage value. No discount.
+
+    let totalYearlyPrice = 0
+    let totalMonthlyPrice = 0
+
+    if (type === "HDD") {
+      const defaultHDDUnit = this.catalogue.storagePrices.find(
+        (item: PriceListItem) =>
+          item["service.group"] === "block.hdd.rep" &&
+          item["service.unit"] === "First 10 TB" &&
+          item["service.level"] === "COMMITMENT" &&
+          item["service.commitment"] === "1Y",
+      )
+      if (!defaultHDDUnit) return
+
+      totalYearlyPrice = defaultHDDUnit?.["price.nok.ex.vat"] * size
+      totalMonthlyPrice = Number(totalYearlyPrice / 12)
+
+      return {
+        monthlyPrice: totalMonthlyPrice,
+        yearlyPrice: totalYearlyPrice,
+      }
+    }
+
+    if (type === "NVME") {
+      const defaultNVMEUnit = this.catalogue.storagePrices.find(
+        (item: PriceListItem) =>
+          item["service.group"] === "block.nvme.rep" &&
+          item["service.unit"] === "First 10 TB" &&
+          item["service.level"] === "COMMITMENT" &&
+          item["service.commitment"] === "1Y",
+      )
+
+      if (!defaultNVMEUnit) return
+
+      totalYearlyPrice = defaultNVMEUnit?.["price.nok.ex.vat"] * size
+      totalMonthlyPrice = Number(totalYearlyPrice / 12)
+
+      return {
+        monthlyPrice: totalMonthlyPrice,
+        yearlyPrice: totalYearlyPrice,
+      }
+    }
+  },
+
+  /*  Compute helpers  */
+
+  getComputePriceFromCatalogue(flavor: string, type: string, gpuFlavor?: string) {
+    let totalYearlyPrice = 0
+    let totalMonthlyPrice = 0
+    let mainFlavorPrice: number | undefined
+    let gpuYearly: number | undefined
+
+    if (type.includes("COMMITMENT")) {
+      if (type === "COMMITMENT_3Y") {
+        const found3Y = this.catalogue.computePrices.find(
+          p => p["service.unit"] === flavor && p["service.level"] === "COMMITMENT" && p["service.commitment"] === "3Y",
+        )
+        if (found3Y) {
+          mainFlavorPrice = found3Y["price.nok.ex.vat"] / 3
+        }
+      } else {
+        mainFlavorPrice = this.catalogue.computePrices.find(
+          p => p["service.unit"] === flavor && p["service.level"] === "COMMITMENT" && p["service.commitment"] === "1Y",
+        )?.["price.nok.ex.vat"]
+      }
+    } else {
+      const foundPrice = this.catalogue.computePrices.find(
+        p => p["service.unit"] === flavor && p["service.level"] === type,
+      )
+      mainFlavorPrice = foundPrice?.["price.nok.ex.vat"]
+    }
+
+    if (mainFlavorPrice) {
+      totalYearlyPrice += mainFlavorPrice
+    }
+
+    totalMonthlyPrice = Number(totalYearlyPrice / 12)
+
+    if (gpuFlavor) {
+      const gpuPrice = this.catalogue.gpuPrices.find(
+        p => p["service.unit"] === gpuFlavor && p["service.level"] === "ONDEMAND",
+      )
+      if (gpuPrice) {
+        gpuYearly = gpuPrice["price.nok.ex.vat"]
+        totalYearlyPrice += gpuYearly
+        totalMonthlyPrice = totalMonthlyPrice + Number(gpuYearly / 12)
+      }
+    }
+    return {
+      monthlyPrice: totalMonthlyPrice,
+      yearlyPrice: totalYearlyPrice,
+    }
+  },
+
+  addComputeToLab(
+    labId: number,
+    payload: { name: string; flavor: string; core_count: number; ram: number; type: string; gpu?: string },
+  ) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) return
+
+    const compId = lab.selectedCompute?.length || 0
+    const prices = this.getComputePriceFromCatalogue(payload.flavor, payload.type, payload.gpu)
+    const newCompute: ComputeUnit = {
+      id: compId,
+      name: payload.name,
+      flavor: payload.flavor,
+      core_count: payload.core_count,
+      gpu: payload.gpu,
+      ram: payload.ram,
+      type: payload.type as SubscriptionType,
+      monthlyPrice: prices.monthlyPrice,
+      yearlyPrice: prices.yearlyPrice,
+    }
+    lab.selectedCompute = lab.selectedCompute || []
+    lab.selectedCompute.push(newCompute)
+
+    this.saveStateToLocal()
+  },
+
+  editComputeInLab(
+    labId: number,
+    computeId: number,
+    payload: { name: string; flavor: string; core_count: number; ram: number; type: string; gpu?: string },
+  ) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab || !lab.selectedCompute) return
+
+    const idx = lab.selectedCompute.findIndex(c => c.id === computeId)
+    if (idx === -1) return
+
+    const prices = this.getComputePriceFromCatalogue(payload.flavor, payload.type, payload.gpu)
+    lab.selectedCompute[idx] = {
+      id: computeId,
+      name: payload.name,
+      flavor: payload.flavor,
+      core_count: payload.core_count,
+      gpu: payload.gpu,
+      ram: payload.ram,
+      type: payload.type as SubscriptionType,
+      monthlyPrice: prices.monthlyPrice,
+      yearlyPrice: prices.yearlyPrice,
+    }
+
+    this.saveStateToLocal()
+  },
+
+  removeComputeFromLab(labId: number, computeId: number) {
+    const lab = this.labs.find(l => l.id === labId)
+    if (!lab) return
+    lab.selectedCompute = lab.selectedCompute?.filter(c => c.id !== computeId)
+    this.saveStateToLocal()
+  },
+
+  /* Total Helpers */
+  updateTotalSummary() {
+    // Get lab subscriptions
+    const summary = {
+      labSubscriptions: {
+        "1Y": { units: 0, price: 0 },
+        "3Y": { units: 0, price: 0 },
+      },
+      allCompute: { units: 0, price: 0 },
+      allStorage: {},
+    }
+
+    if (this.labs.length > 0 && this.catalogue.labPrices.length > 0) {
+      this.labs.forEach(lab => {
+        // @ts-ignore
+        const type = lab.subscriptionType as "1Y" | "3Y"
+        const priceItem = this.catalogue.labPrices.find(p => p["service.commitment"] === type)
+        console.log(summary.labSubscriptions[type])
+        summary.labSubscriptions[type].units += 1
+        if (priceItem) {
+          summary.labSubscriptions[type].price += priceItem["price.nok.ex.vat"]
+        } else {
+          summary.labSubscriptions[type].price += this.catalogue.labPrices[0]["price.nok.ex.vat"]
+        }
+      })
+    }
+
+    // Get total compute from labs
+    const totalComputeUnits = this.labs.reduce((sum, lab) => sum + lab.selectedCompute.length, 0)
+    const totalComputeForAllLabs = this.labs.reduce((labSum, lab) => {
+      const computeSum = lab.selectedCompute.reduce((sum, comp) => sum + comp.yearlyPrice, 0)
+      return labSum + computeSum
+    }, 0)
+    const allCompute = {
+      units: totalComputeUnits,
+      price: totalComputeForAllLabs,
+    }
+    summary.allCompute = allCompute
+
+    // Get total storages from labs
+
+    const storageSum = this.calculateTotalStorageCost()
+    console.log("SUMMARY", storageSum)
+    summary.allStorage = storageSum
+    console.log("FINAL SUMMARY", summary)
+    return summary
+  },
+
+  exportItems() {
+    const labsToExport = this.labs.map(lab => ({
+      id: lab.id,
+      name: lab.title,
+      // @ts-ignore
+      subscriptionType: lab.subscriptionType,
+      compute: lab.selectedCompute.map(c => ({
+        id: c.id,
+        name: c.name,
+        flavor: c.flavor,
+        core_count: c.core_count,
+        ram: c.ram,
+        gpu: c.gpu,
+        type: c.type,
+      })),
+      storage: lab.selectedStorage.map(s => ({
+        id: s.id,
+        name: s.name,
+        usage: s.usage,
+        type: s.type,
+        size: s.size,
+      })),
+    }))
+
+    const exportData = {
+      version: "1.0",
+      labs: labsToExport,
+    }
+
+    const jsonString = JSON.stringify(exportData, null, 2)
+    const blob = new Blob([jsonString], { type: "application/json" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "hunt-cloud-estimate.json"
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  },
+
+  async importLabs(file: File) {
+    return new Promise<void>((resolve, reject) => {
+      const reader = new FileReader()
+
+      reader.onload = e => {
+        try {
+          const data = JSON.parse(e.target?.result as string)
+
+          // Validation
+          if (!data.version) throw new Error("Invalid JSON format: Missing version")
+          if (!Array.isArray(data.labs)) throw new Error("Invalid JSON format: 'labs' must be an array")
+
+          data.labs.forEach((lab: any, labIndex: number) => {
+            if (!lab.name) throw new Error(`Invalid lab at index ${labIndex}: Missing 'name'`)
+
+            if (lab.compute) {
+              if (!Array.isArray(lab.compute)) throw new Error(`Invalid lab '${lab.name}': 'compute' must be an array`)
+              lab.compute.forEach((comp: any, compIndex: number) => {
+                const required = ["name", "flavor", "core_count", "ram", "type"]
+                const missing = required.filter(
+                  field => comp[field] === undefined || comp[field] === null || comp[field] === "",
+                )
+                if (missing.length > 0) {
+                  throw new Error(
+                    `Invalid compute item at index ${compIndex} in lab '${lab.name}': Missing fields: ${missing.join(", ")}`,
+                  )
+                }
+              })
+            }
+
+            if (lab.storage) {
+              if (!Array.isArray(lab.storage)) throw new Error(`Invalid lab '${lab.name}': 'storage' must be an array`)
+              lab.storage.forEach((store: any, storeIndex: number) => {
+                const required = ["name", "usage", "type", "size"]
+                const missing = required.filter(
+                  field => store[field] === undefined || store[field] === null || store[field] === "",
+                )
+                if (missing.length > 0) {
+                  throw new Error(
+                    `Invalid storage item at index ${storeIndex} in lab '${lab.name}': Missing fields: ${missing.join(", ")}`,
+                  )
+                }
+              })
+            }
+          })
+
+          this.isInitializingPriseEstimator = true
+          this.clearAllLabs()
+
+          for (const labData of data.labs) {
+            const newLabId = this.labs.length
+
+            this.labs.push({
+              id: newLabId,
+              title: labData.name,
+              selectedCompute: [],
+              selectedStorage: [],
+              // @ts-ignore
+              subscriptionType: labData.subscriptionType,
+            })
+
+            if (labData.compute) {
+              for (const comp of labData.compute) {
+                this.addComputeToLab(newLabId, {
+                  name: comp.name,
+                  flavor: comp.flavor,
+                  core_count: comp.core_count,
+                  ram: comp.ram,
+                  type: comp.type,
+                  gpu: comp.gpu,
+                })
+              }
+            }
+
+            if (labData.storage) {
+              for (const store of labData.storage) {
+                this.addStorageToLab(newLabId, {
+                  name: store.name,
+                  usage: store.usage,
+                  type: store.type,
+                  size: store.size,
+                })
+              }
+            }
+          }
+
+          this.updateTotalSummary()
+          this.isInitializingPriseEstimator = false
+          resolve()
+        } catch (err) {
+          this.isInitializingPriseEstimator = false
+          reject(err)
+        }
+      }
+
+      reader.onerror = () => {
+        this.isInitializingPriseEstimator = false
+        reject(new Error("Failed to read file"))
+      }
+
+      reader.readAsText(file)
+    })
+  },
+})
diff --git a/docs/.vitepress/theme/components/price-estimator/types/index.ts b/docs/.vitepress/theme/components/price-estimator/types/index.ts
index b36b93383ef..41373233e42 100644
--- a/docs/.vitepress/theme/components/price-estimator/types/index.ts
+++ b/docs/.vitepress/theme/components/price-estimator/types/index.ts
@@ -1,57 +1,46 @@
+/*
+
+Definition
+
+Price: Defined price from the catalogue API
+Cost: Calculated amount of prices. Used for Summary.
+
+*/
+
+export type SubscriptionType = "COMMITMENT_1Y" | "COMMITMENT_3Y" | "ONDEMAND" | "SPOT"
+export type StorageUsageType = "Archive" | "Work" | "Scratch" | "Backup"
+export const storageTypes = ["HDD", "NVME"] as const
+export type StorageType = (typeof storageTypes)[number]
+
+export interface PriceListItem {
+  "service.group": string
+  "service.family": string
+  "service.unit": string
+  "service.level": string
+  "service.commitment"?: string
+  "price.nok.ex.vat": number
+}
+
 export interface ComputeUnit {
   id: number
   name: string
   flavor: string
   core_count: number
   ram: number
-  gpu: string | null
+  gpu?: string
   type: SubscriptionType
   monthlyPrice: number
   yearlyPrice: number
 }
-export interface ComputeLabSum {
-  monthlyPrice: number
-  yearlyPrice: number
-  ram: number
-  cpu_count: number
-}
-
-export type SubscriptionType = "COMMITMENT_1Y" | "COMMITMENT_3Y" | "ONDEMAND" | "SPOT"
 
 export interface StorageUnit {
   id: number
   name: string
-  usage: StorageUsageType
-  type: StorageType
-  size: number
-  price: number
-}
-
-export type StorageUsageType = "Archive" | "Work" | "Scratch" | "Home"
-
-export type StorageType = "HDD" | "NVME"
-
-export interface StorageLabSum {
+  yearlyPrice: number
+  monthlyPrice: number
   size: number
-  type: string | null
-  price: number
-}
-
-export interface Catalogue {
-  computePrices: PriceListItem[]
-  storagePrices: PriceListItem[]
-  gpuPrices: PriceListItem[]
-  machineCatalogue: MachineFlavor[]
-  availableGpus: GpuModel[]
-}
-
-export interface PriceListItem {
-  "service.group": string
-  "service.family": string
-  "service.unit": string
-  "service.level": string
-  "service.commitment"?: string
-  "price.nok.ex.vat": number
+  type: StorageType
+  usage: StorageUsageType
 }
 
 export interface GpuModel {
@@ -66,39 +55,47 @@ export interface MachineFlavor {
   divider?: boolean
 }
 
+export interface Catalogue {
+  computePrices: PriceListItem[]
+  storagePrices: PriceListItem[]
+  gpuPrices: PriceListItem[]
+  availableGpus: GpuModel[]
+  machinePrices: MachineFlavor[]
+  labPrices: PriceListItem[]
+}
+
 export interface LabCard {
   id: number
   title: string
-  storage: number
-  priceStorage: number
-  priceComputeYearly: number
-  numCompute: number
-  initSelectedCompute?: ComputeUnit[]
-  initSelectedStorage?: StorageUnit[]
-  selectedCompute?: ComputeUnit[]
-  selectedStorage?: StorageUnit[]
+  selectedCompute: ComputeUnit[]
+  selectedStorage: StorageUnit[]
+  // Storage price changes based on the whole labs storages
 }
 
-export interface TotalPriceItem {
-  name: string
-  units: number | string
-  price: number
+interface StoragePrice {
+  size: number
+  monthlyCostTotal: number
+  yearlyCostTotal: number
+}
+
+export type StorageCostByType = {
+  [key in StorageType]: StoragePrice
 }
 
 export interface MachineFormData {
-  id: number | null
-  name: string | null
-  flavor: string | null
-  gpu: string | null
-  subscription: SubscriptionType | null
+  id?: number
+  name?: string
+  flavor?: string
+  gpu?: string
+  subscription?: SubscriptionType
 }
 
 export interface StorageFormData {
-  id: number | null
-  name: string | null
-  usage: StorageUsageType
-  type: StorageType
-  size: number
+  id?: number
+  name?: string
+  usage?: StorageUsageType
+  type?: StorageType
+  size?: number
 }
 
 export interface UpdateComputePayload {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 51f4c65d4a0..f41ceea108f 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -33,8 +33,8 @@ import DesignNewPassphrase from "./components/lab-access/DesignNewPassphrase.vue
 
 import PriceEstimator from "./components/price-estimator/PriceEstimator.vue"
 import LabCard from "./components/price-estimator/LabCard.vue"
-import Machine from "./components/price-estimator/Machine.vue"
-import Storage from "./components/price-estimator/Storage.vue"
+import MachineModal from "./components/price-estimator/MachineModal.vue"
+import StorageModal from "./components/price-estimator/StorageModal.vue"
 import TotalBlock from "./components/price-estimator/TotalBlock.vue"
 
 import "@mdi/font/css/materialdesignicons.css"
@@ -208,8 +208,8 @@ export default {
     // Price estimator
     app.component("PriceEstimator", PriceEstimator)
     app.component("LabCard", LabCard)
-    app.component("Machine", Machine)
-    app.component("Storage", Storage)
+    app.component("Machine", MachineModal)
+    app.component("Storage", StorageModal)
     app.component("TotalBlock", TotalBlock)
   },
 } satisfies Theme
diff --git a/package.json b/package.json
index e7a750e154a..8d86dea9792 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
     "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "happy-dom": "^19.0.2",
     "markdown-it-container": "^4.0.0",
     "prettier": "^3.6.2",
diff --git a/tests/PriceEstimator.test.ts b/tests/PriceEstimator.test.ts
index 53b917a7fb2..6b696967076 100644
--- a/tests/PriceEstimator.test.ts
+++ b/tests/PriceEstimator.test.ts
@@ -2,124 +2,136 @@ import { vuetify } from "../docs/.vitepress/theme/plugins/vuetify"
 import { mount, flushPromises } from "@vue/test-utils"
 import PriceEstimator from "../docs/.vitepress/theme/components/price-estimator/PriceEstimator.vue"
 import { describe, it, expect, beforeEach, vi } from "vitest"
+import { priceEstimatorStore } from "../docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore"
+import type { StorageUnit } from "../docs/.vitepress/theme/components/price-estimator/types"
+
+// Mock the pricesApi module
+const { mockPriceList } = vi.hoisted(() => {
+  return {
+    mockPriceList: [
+      {
+        "service.group": "block.nvme.rep",
+        "service.family": "store",
+        "service.unit": "First 10 TB",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 1000,
+      },
+      {
+        "service.group": "block.nvme.rep",
+        "service.family": "store",
+        "service.unit": "Next 90 TB",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 800,
+      },
+      {
+        "service.group": "block.nvme.rep",
+        "service.family": "store",
+        "service.unit": "Above 100 TB",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 600,
+      },
+      {
+        "service.group": "block.hdd.rep",
+        "service.family": "store",
+        "service.unit": "First 10 TB",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 500,
+      },
+      {
+        "service.group": "block.hdd.rep",
+        "service.family": "store",
+        "service.unit": "Next 90 TB",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 400,
+      },
+      {
+        "service.group": "block.hdd.rep",
+        "service.family": "store",
+        "service.unit": "Above 100 TB",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 300,
+      },
+      {
+        "service.group": "cpu",
+        "service.unit": "default.c1",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 50000,
+      },
+      {
+        "service.group": "lab",
+        "service.unit": "lab",
+        "service.level": "COMMITMENT",
+        "service.commitment": "1Y",
+        "price.nok.ex.vat": 20000,
+      },
+    ],
+  }
+})
 
-const title = ""
-import type { StorageUnit, PriceListItem } from "../docs/.vitepress/theme/components/price-estimator/types"
-
+vi.mock("../docs/.vitepress/theme/components/price-estimator/api/pricesApi.js", () => ({
+  default: {
+    getPriceList: vi.fn().mockResolvedValue(mockPriceList),
+    getAvailableGPUS: vi.fn().mockResolvedValue([]),
+    getMachineFlavors: vi.fn().mockResolvedValue([
+      {
+        value: "default.c1",
+        title: "Default - 4 cores / 8 GB",
+      },
+    ]),
+  },
+}))
 
 describe("PriceEstimator", () => {
-  let mockPricesApi: any
-
   beforeEach(() => {
-    mockPricesApi = {
-      getPriceList: vi.fn().mockResolvedValue([
-        {
-          "service.group": "block.nvme.rep",
-          "service.family": "store",
-          "service.unit": "First 10 TB",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 1000,
-        },
-        {
-          "service.group": "block.nvme.rep",
-          "service.family": "store",
-          "service.unit": "Next 90 TB",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 800,
-        },
-        {
-          "service.group": "block.nvme.rep",
-          "service.family": "store",
-          "service.unit": "Above 100 TB",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 600,
-        },
-        {
-          "service.group": "block.hdd.rep",
-          "service.family": "store",
-          "service.unit": "First 10 TB",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 500,
-        },
-        {
-          "service.group": "block.hdd.rep",
-          "service.family": "store",
-          "service.unit": "Next 90 TB",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 400,
-        },
-        {
-          "service.group": "block.hdd.rep",
-          "service.family": "store",
-          "service.unit": "Above 100 TB",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 300,
-        },
-        {
-          "service.group": "cpu",
-          "service.unit": "default.c1",
-          "service.level": "COMMITMENT",
-          "service.commitment": "1Y",
-          "price.nok.ex.vat": 50000,
-        },
-      ]),
-      getAvailableGPUS: vi.fn().mockResolvedValue([]),
-      getMachineFlavors: vi.fn().mockResolvedValue([
-        {
-          value: "default.c1",
-          title: "Default - 4 cores / 8 GB",
-        },
-      ]),
-    }
+    priceEstimatorStore.clearAllLabs()
+    // Manually populate catalogue for tests that need it
+    priceEstimatorStore.catalogue.storagePrices = mockPriceList.filter(
+      (item: any) => item["service.family"] === "store",
+    ) as any
+    priceEstimatorStore.catalogue.computePrices = mockPriceList.filter(
+      (item: any) => item["service.group"] === "cpu",
+    ) as any
+    priceEstimatorStore.catalogue.labPrices = mockPriceList.filter(
+      (item: any) => item["service.group"] === "lab",
+    ) as any
+    priceEstimatorStore.catalogue.machinePrices = [
+      {
+        value: "default.c1",
+        title: "Default - 4 cores / 8 GB",
+      },
+    ] as any
   })
 
   describe("Component Rendering", () => {
     it("renders the component", async () => {
       const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test Price Estimator",
-        },
         global: {
           plugins: [vuetify],
-          mocks: {
-            pricesApi: mockPricesApi,
-          },
         },
       })
 
       await flushPromises()
       expect(wrapper.exists()).toBe(true)
-      expect(wrapper.findComponent(PriceEstimator).exists()).toBe(true)
+      // We can check if the store was initialized
+      expect(priceEstimatorStore.catalogue.storagePrices.length).toBeGreaterThan(0)
+      wrapper.unmount()
     })
   })
 
   describe("Storage Cost Calculation", () => {
     it("calculates NVME storage cost correctly for 15 TB (crosses first tier)", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
-      })
-
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-
-
-      vm.labCards = [
+      priceEstimatorStore.labs = [
         {
           id: 1,
           title: "Lab 1",
-          storage: 15,
+          selectedCompute: [],
           selectedStorage: [
             {
               id: 1,
@@ -127,37 +139,28 @@ describe("PriceEstimator", () => {
               type: "NVME",
               size: 15,
               usage: "Work",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
           ],
         },
       ]
 
-      const result = vm.calculateStorageCost()
-      const actual = 10 * 1000 + 5 * 800
-      expect(result.NVME.cost).toBeCloseTo(actual, 0)
+      const result = priceEstimatorStore.calculateTotalStorageCost()
+      const expectedTiered = 10 * 1000 + 5 * 800
+      const expectedFlat = 15 * 1000
+
+      expect(result.NVME.costTiered).toBeCloseTo(expectedTiered, 0)
+      expect(result.NVME.costFlat).toBeCloseTo(expectedFlat, 0)
       expect(result.NVME.size).toBe(15)
     })
 
     it("calculates NVME storage cost correctly for 110 TB (all three tiers)", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
-      })
-
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-
-      vm.labCards = [
+      priceEstimatorStore.labs = [
         {
           id: 1,
           title: "Lab 1",
-          storage: 110,
+          selectedCompute: [],
           selectedStorage: [
             {
               id: 1,
@@ -165,38 +168,28 @@ describe("PriceEstimator", () => {
               type: "NVME",
               size: 110,
               usage: "Work",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
           ],
         },
       ]
 
-      const result = vm.calculateStorageCost()
-      const actual = 10 * 1000 + 90 * 800 + 10 * 600
+      const result = priceEstimatorStore.calculateTotalStorageCost()
+      const expectedTiered = 10 * 1000 + 90 * 800 + 10 * 600
+      const expectedFlat = 110 * 1000
 
-      expect(result.NVME.cost).toBeCloseTo(actual, 0)
+      expect(result.NVME.costTiered).toBeCloseTo(expectedTiered, 0)
+      expect(result.NVME.costFlat).toBeCloseTo(expectedFlat, 0)
       expect(result.NVME.size).toBe(110)
     })
 
     it("calculates HDD storage cost correctly for first 10 TB", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
-      })
-
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-
-      vm.labCards = [
+      priceEstimatorStore.labs = [
         {
           id: 1,
           title: "Lab 1",
-          storage: 8,
+          selectedCompute: [],
           selectedStorage: [
             {
               id: 1,
@@ -204,35 +197,28 @@ describe("PriceEstimator", () => {
               type: "HDD",
               size: 8,
               usage: "Archive",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
           ],
         },
       ]
 
-      const result = vm.calculateStorageCost()
-      expect(result.HDD.cost).toBeCloseTo(4000, 0)
+      const result = priceEstimatorStore.calculateTotalStorageCost()
+      const expectedTiered = 8 * 500
+      const expectedFlat = 8 * 500
+
+      expect(result.HDD.costTiered).toBeCloseTo(expectedTiered, 0)
+      expect(result.HDD.costFlat).toBeCloseTo(expectedFlat, 0)
       expect(result.HDD.size).toBe(8)
     })
 
     it("calculates mixed storage types correctly", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
-      })
-
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-      vm.labCards = [
+      priceEstimatorStore.labs = [
         {
           id: 1,
           title: "Lab 1",
-          storage: 13,
+          selectedCompute: [],
           selectedStorage: [
             {
               id: 1,
@@ -240,7 +226,8 @@ describe("PriceEstimator", () => {
               type: "NVME",
               size: 5,
               usage: "Work",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
             {
               id: 2,
@@ -248,39 +235,26 @@ describe("PriceEstimator", () => {
               type: "HDD",
               size: 8,
               usage: "Archive",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
           ],
         },
       ]
-      const actualNvmeCost = 5 * 1000
-      const actualHddCost = 8 * 500
+      const expectedNvmeTiered = 5 * 1000
+      const expectedHddTiered = 8 * 500
 
-      const result = vm.calculateStorageCost()
-      expect(result.NVME.cost).toBeCloseTo(actualNvmeCost, 0)
-      expect(result.HDD.cost).toBeCloseTo(actualHddCost, 0)
-      
+      const result = priceEstimatorStore.calculateTotalStorageCost()
+      expect(result.NVME.costTiered).toBeCloseTo(expectedNvmeTiered, 0)
+      expect(result.HDD.costTiered).toBeCloseTo(expectedHddTiered, 0)
     })
 
     it("calculates storage across multiple labs correctly", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
-      })
-
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-
-      vm.labCards = [
+      priceEstimatorStore.labs = [
         {
           id: 1,
           title: "Lab 1",
-          storage: 6,
+          selectedCompute: [],
           selectedStorage: [
             {
               id: 1,
@@ -288,14 +262,15 @@ describe("PriceEstimator", () => {
               type: "NVME",
               size: 6,
               usage: "Work",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
           ],
         },
         {
           id: 2,
           title: "Lab 2",
-          storage: 7,
+          selectedCompute: [],
           selectedStorage: [
             {
               id: 1,
@@ -303,232 +278,290 @@ describe("PriceEstimator", () => {
               type: "NVME",
               size: 7,
               usage: "Work",
-              price: 0,
+              monthlyPrice: 0,
+              yearlyPrice: 0,
             } as StorageUnit,
           ],
         },
       ]
 
-      const result = vm.calculateStorageCost()
-      expect(result.NVME.cost).toBeCloseTo(12400, 0)
-      expect(result.NVME.size).toBe(13)
-    })
-
-    it("returns empty object for no storage", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
-      })
-
-      const vm = wrapper.vm as any
-      vm.labCards = []
+      const result = priceEstimatorStore.calculateTotalStorageCost()
+      const expectedTiered = 10 * 1000 + 3 * 800
+      const expectedFlat = 13 * 1000
 
-      const result = vm.calculateStorageCost()
-      expect(Object.keys(result).length).toBe(0)
+      expect(result.NVME.costTiered).toBeCloseTo(expectedTiered, 0)
+      expect(result.NVME.costFlat).toBeCloseTo(expectedFlat, 0)
+      expect(result.NVME.size).toBe(13)
     })
   })
 
   describe("Lab Management", () => {
     it("adds a new lab card", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
+      expect(priceEstimatorStore.labs.length).toBe(0)
+
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
+      })
+      expect(priceEstimatorStore.labs.length).toBe(1)
+      expect(priceEstimatorStore.labs[0].title).toBe("Lab 1")
+
+      priceEstimatorStore.addLab({
+        name: "Lab 2",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
+      })
+      expect(priceEstimatorStore.labs.length).toBe(2)
+      expect(priceEstimatorStore.labs[1].title).toBe("Lab 2")
+    })
+
+    it("Removing labs", async () => {
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
+      })
+      priceEstimatorStore.addLab({
+        name: "Lab 2",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
       })
 
-      const vm = wrapper.vm as any
-      expect(vm.labCards.length).toBe(0)
+      priceEstimatorStore.addLab({
+        name: "Lab 3",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
+      })
+      expect(priceEstimatorStore.labs.length).toBe(3)
 
-      vm.addLabCard()
-      expect(vm.labCards.length).toBe(1)
-      expect(vm.labCards[0].title).toBe("Lab 1")
-      expect(vm.nextLabId).toBe(2)
+      priceEstimatorStore.removeLab(0) // Removes Lab 1 (id 0)
+      expect(priceEstimatorStore.labs.length).toBe(2)
+      expect(priceEstimatorStore.labs[0].title).toBe("Lab 2")
 
-      vm.addLabCard()
-      expect(vm.labCards.length).toBe(2)
-      expect(vm.labCards[1].title).toBe("Lab 2")
-      expect(vm.nextLabId).toBe(3)
+      priceEstimatorStore.clearAllLabs()
+      expect(priceEstimatorStore.labs.length).toBe(0)
     })
 
-    it("removes a lab card", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
+    it("adds compute to a lab correctly using catalogue prices", () => {
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
       })
+      const labId = priceEstimatorStore.labs[0].id
 
-      const vm = wrapper.vm as any
-      vm.addLabCard()
-      vm.addLabCard()
-      expect(vm.labCards.length).toBe(2)
+      // Clear defaults
+      priceEstimatorStore.labs[0].selectedCompute = []
 
-      vm.removeLabCard(1)
-      expect(vm.labCards.length).toBe(1)
-      expect(vm.labCards[0].id).toBe(2)
+      priceEstimatorStore.addComputeToLab(labId, {
+        name: "My Machine",
+        flavor: "default.c1",
+        core_count: 4,
+        ram: 8,
+        type: "COMMITMENT_1Y",
+      })
+
+      const addedCompute = priceEstimatorStore.labs[0].selectedCompute[0]
+      expect(addedCompute).toBeDefined()
+      expect(addedCompute.name).toBe("My Machine")
+      // Mock data has 50000 for default.c1
+      expect(addedCompute.yearlyPrice).toBe(50000)
+      expect(addedCompute.monthlyPrice).toBeCloseTo(50000 / 12, 4)
     })
 
-    it("removes all labs", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
+    it("adds storage to a lab correctly using catalogue prices", () => {
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
+      })
+      const labId = priceEstimatorStore.labs[0].id
+
+      // Clear defaults
+      priceEstimatorStore.labs[0].selectedStorage = []
+
+      priceEstimatorStore.addStorageToLab(labId, {
+        name: "My Volume",
+        usage: "Work",
+        type: "NVME",
+        size: 2,
       })
 
-      const vm = wrapper.vm as any
-      vm.addLabCard()
-      vm.addLabCard()
-      vm.addLabCard()
-      expect(vm.labCards.length).toBe(3)
-
-      vm.removeAllLabs()
-      expect(vm.labCards.length).toBe(0)
-      expect(vm.nextLabId).toBe(1)
-      expect(vm.totals.computePrice).toBe(0)
-      expect(Object.keys(vm.totals.storageCost).length).toBe(0)
+      const addedStorage = priceEstimatorStore.labs[0].selectedStorage[0]
+      expect(addedStorage).toBeDefined()
+      expect(addedStorage.name).toBe("My Volume")
+      // Mock data has 1000 for NVME First 10 TB. 2 * 1000 = 2000.
+      expect(addedStorage.yearlyPrice).toBe(2000)
+      expect(addedStorage.monthlyPrice).toBeCloseTo(2000 / 12, 4)
     })
   })
 
   describe("Total Calculations", () => {
     it("updates compute price total when lab card compute changes", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
       })
+      const labId = priceEstimatorStore.labs[0].id
 
-      const vm = wrapper.vm as any
-      vm.addLabCard()
+      // Clear default compute added by addLab
+      priceEstimatorStore.labs[0].selectedCompute = []
 
-      vm.updateLabCardCompute(1, {
-        yearlyPrice: 50000,
-        monthlyPrice: 4166.67,
-        numCompute: 1,
-        selectedCompute: [],
+      priceEstimatorStore.addComputeToLab(labId, {
+        name: "machine-1",
+        flavor: "default.c1",
+        core_count: 4,
+        ram: 8,
+        type: "COMMITMENT_1Y",
       })
 
-      expect(vm.totals.computePrice).toBe(50000)
+      const summary = priceEstimatorStore.updateTotalSummary()
+
+      // @ts-ignore
+      expect(summary.allCompute.price).toBe(50000)
+      // @ts-ignore
+      expect(summary.allCompute.units).toBe(1)
     })
 
     it("updates storage total when lab card storage changes", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
       })
+      const labId = priceEstimatorStore.labs[0].id
 
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-
-      vm.addLabCard()
+      // Clear default storage added by addLab
+      priceEstimatorStore.labs[0].selectedStorage = []
 
-      vm.updateLabCardStorage(1, {
+      priceEstimatorStore.addStorageToLab(labId, {
+        name: "volume-1",
+        usage: "Work",
+        type: "NVME",
         size: 5,
-        price: 5000,
-        selectedStorage: [
-          {
-            id: 1,
-            name: "volume-1",
-            type: "NVME",
-            size: 5,
-            usage: "Work",
-            price: 5000,
-          },
-        ],
       })
 
-      await flushPromises()
+      const summary = priceEstimatorStore.updateTotalSummary()
 
-      expect(vm.totals.storageCost.NVME).toBeDefined()
-      expect(vm.totals.storageCost.NVME.size).toBe(5)
-      expect(vm.totals.storageCost.NVME.cost).toBeCloseTo(5000, 0)
+      // @ts-ignore
+      expect(summary.allStorage.NVME).toBeDefined()
+      // @ts-ignore
+      expect(summary.allStorage.NVME.size).toBe(5)
+      // 5 * 1000 (First 10 TB price)
+      // @ts-ignore
+      expect(summary.allStorage.NVME.costFlat).toBeCloseTo(5000, 0)
     })
+
     it("Updates totals when multiple labs are added with compute and storage", async () => {
-      const wrapper = mount(PriceEstimator, {
-        props: {
-          title: "Test",
-        },
-        global: {
-          plugins: [vuetify],
-        },
+      priceEstimatorStore.addLab({
+        name: "Lab 1",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
       })
-
-      const vm = wrapper.vm as any
-      const storagePrices = await mockPricesApi.getPriceList()
-      vm.catalogue.storagePrices = storagePrices.filter((item: PriceListItem) => item["service.family"] === "store")
-      
-      vm.addLabCard()
-      vm.updateLabCardCompute(1, {
-        yearlyPrice: 60000,
-        monthlyPrice: 5000,
-        numCompute: 1,
-        selectedCompute: [],
+      const lab1Id = priceEstimatorStore.labs[0].id
+      priceEstimatorStore.labs[0].selectedCompute = []
+      priceEstimatorStore.labs[0].selectedStorage = []
+
+      // Lab 1: 1 machine (50k), 10TB NVME (10k)
+      priceEstimatorStore.addComputeToLab(lab1Id, {
+        name: "machine-1",
+        flavor: "default.c1",
+        core_count: 4,
+        ram: 8,
+        type: "COMMITMENT_1Y",
       })
-      vm.updateLabCardStorage(1, {
+      priceEstimatorStore.addStorageToLab(lab1Id, {
+        name: "volume-1",
+        usage: "Work",
+        type: "NVME",
         size: 10,
-        price: 10000,
-        selectedStorage: [
-          {
-            id: 1,
-            name: "volume-1",
-            type: "NVME",
-            size: 10,
-            usage: "Work",
-            price: 10000,
-          },
-        ],
       })
 
-      await flushPromises()
-
-      vm.addLabCard()
-      vm.updateLabCardCompute(2, {
-        yearlyPrice: 120000,
-        monthlyPrice: 10000,
-        numCompute: 2,
-        selectedCompute: [],
+      priceEstimatorStore.addLab({
+        name: "Lab 2",
+        subscriptionType: "1Y",
+        machineFlavor: "default.c1",
+        machineSubscription: "COMMITMENT_1Y",
+        hddSize: 1,
+        nvmeSize: 0,
       })
-      vm.updateLabCardStorage(2, {
+      const lab2Id = priceEstimatorStore.labs[1].id
+      priceEstimatorStore.labs[1].selectedCompute = []
+      priceEstimatorStore.labs[1].selectedStorage = []
+
+      // Lab 2: 2 machines (100k), 20TB NVME (20k flat)
+      priceEstimatorStore.addComputeToLab(lab2Id, {
+        name: "machine-2a",
+        flavor: "default.c1",
+        core_count: 4,
+        ram: 8,
+        type: "COMMITMENT_1Y",
+      })
+      priceEstimatorStore.addComputeToLab(lab2Id, {
+        name: "machine-2b",
+        flavor: "default.c1",
+        core_count: 4,
+        ram: 8,
+        type: "COMMITMENT_1Y",
+      })
+      priceEstimatorStore.addStorageToLab(lab2Id, {
+        name: "volume-2",
+        usage: "Work",
+        type: "NVME",
         size: 20,
-        price: 20000,
-        selectedStorage: [
-          {
-            id: 2,
-            name: "volume-2",
-            type: "NVME",
-            size: 20,
-            usage: "Work",
-            price: 20000,
-          },
-        ],
       })
-      
-      await flushPromises()
-      expect(vm.totals.computePrice).toBe(180000)
-      expect(vm.totals.storageCost.NVME).toBeDefined()
-      expect(vm.totals.storageCost.NVME.size).toBe(30)
-      const actualNvmeCost = 10 * 1000 + 20 * 800
-      expect(vm.totals.storageCost.NVME.cost).toBeCloseTo(actualNvmeCost, 0)
 
+      const summary = priceEstimatorStore.updateTotalSummary()
+
+      // Total compute: 50k + 50k + 50k = 150k
+      // @ts-ignore
+      expect(summary.allCompute.price).toBe(150000)
+
+      // @ts-ignore
+      expect(summary.allStorage.NVME).toBeDefined()
+      // Total storage size: 10 + 20 = 30 TB
+      // @ts-ignore
+      expect(summary.allStorage.NVME.size).toBe(30)
+
+      // Tiered calculation for 30TB NVME:
+      // First 10TB @ 1000 = 10,000
+      // Next 20TB @ 800 = 16,000
+      // Total = 26,000
+      const expectedNvmeTiered = 10 * 1000 + 20 * 800
+      // @ts-ignore
+      expect(summary.allStorage.NVME.costTiered).toBeCloseTo(expectedNvmeTiered, 0)
     })
   })
 })
diff --git a/yarn.lock b/yarn.lock
index 3fe51f00bf0..1f1314f910e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1263,6 +1263,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/core@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@pkgr/core@npm:0.2.9"
+  checksum: 10c0/ac8e4e8138b1a7a4ac6282873aef7389c352f1f8b577b4850778f5182e4a39a5241facbe48361fec817f56d02b51691b383010843fb08b34a8e8ea3614688fd5
+  languageName: node
+  linkType: hard
+
 "@rolldown/pluginutils@npm:1.0.0-beta.50":
   version: 1.0.0-beta.50
   resolution: "@rolldown/pluginutils@npm:1.0.0-beta.50"
@@ -2786,6 +2793,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-config-prettier@npm:^10.1.8":
+  version: 10.1.8
+  resolution: "eslint-config-prettier@npm:10.1.8"
+  peerDependencies:
+    eslint: ">=7.0.0"
+  bin:
+    eslint-config-prettier: bin/cli.js
+  checksum: 10c0/e1bcfadc9eccd526c240056b1e59c5cd26544fe59feb85f38f4f1f116caed96aea0b3b87868e68b3099e55caaac3f2e5b9f58110f85db893e83a332751192682
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-prettier@npm:^5.5.4":
+  version: 5.5.4
+  resolution: "eslint-plugin-prettier@npm:5.5.4"
+  dependencies:
+    prettier-linter-helpers: "npm:^1.0.0"
+    synckit: "npm:^0.11.7"
+  peerDependencies:
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: ">= 7.0.0 <10.0.0 || >=10.1.0"
+    prettier: ">=3.0.0"
+  peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
+    eslint-config-prettier:
+      optional: true
+  checksum: 10c0/5cc780e0ab002f838ad8057409e86de4ff8281aa2704a50fa8511abff87028060c2e45741bc9cbcbd498712e8d189de8026e70aed9e20e50fe5ba534ee5a8442
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^8.4.0":
   version: 8.4.0
   resolution: "eslint-scope@npm:8.4.0"
@@ -2939,6 +2977,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-diff@npm:^1.1.2":
+  version: 1.3.0
+  resolution: "fast-diff@npm:1.3.0"
+  checksum: 10c0/5c19af237edb5d5effda008c891a18a585f74bf12953be57923f17a3a4d0979565fc64dbc73b9e20926b9d895f5b690c618cbb969af0cf022e3222471220ad29
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -4091,6 +4136,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-linter-helpers@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "prettier-linter-helpers@npm:1.0.0"
+  dependencies:
+    fast-diff: "npm:^1.1.2"
+  checksum: 10c0/81e0027d731b7b3697ccd2129470ed9913ecb111e4ec175a12f0fcfab0096516373bf0af2fef132af50cafb0a905b74ff57996d615f59512bb9ac7378fcc64ab
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^3.6.2":
   version: 3.7.1
   resolution: "prettier@npm:3.7.1"
@@ -4290,6 +4344,8 @@ __metadata:
     axios: "npm:^1.12.2"
     country-list-json: "npm:^1.1.0"
     eslint: "npm:^9.35.0"
+    eslint-config-prettier: "npm:^10.1.8"
+    eslint-plugin-prettier: "npm:^5.5.4"
     happy-dom: "npm:^19.0.2"
     markdown-it: "npm:^14.1.0"
     markdown-it-container: "npm:^4.0.0"
@@ -4541,6 +4597,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.11.7":
+  version: 0.11.11
+  resolution: "synckit@npm:0.11.11"
+  dependencies:
+    "@pkgr/core": "npm:^0.2.9"
+  checksum: 10c0/f0761495953d12d94a86edf6326b3a565496c72f9b94c02549b6961fb4d999f4ca316ce6b3eb8ed2e4bfc5056a8de65cda0bd03a233333a35221cd2fdc0e196b
+  languageName: node
+  linkType: hard
+
 "tabbable@npm:^6.3.0":
   version: 6.3.0
   resolution: "tabbable@npm:6.3.0"