diff --git a/packages/playground/src/calculator/pricing_calculator.vue b/packages/playground/src/calculator/pricing_calculator.vue
new file mode 100644
index 0000000000..2413f6d9cd
--- /dev/null
+++ b/packages/playground/src/calculator/pricing_calculator.vue
@@ -0,0 +1,295 @@
+<template>
+  <ViewLayout>
+    <VCard>
+      <VCardTitle class="bg-primary text-center">
+        <VIcon icon="mdi-calculator" />
+        Pricing Calculator
+      </VCardTitle>
+      <VCardText>
+        <VContainer fluid>
+          <VAlert type="info" class="mb-10">
+            For more information about Threefold Pricing check
+            <a
+              class="app-link"
+              target="_blank"
+              href="https://manual.grid.tf/wiki/cloudunits/pricing/pricing.html#cloud-unit-pricing"
+              v-text="'here'"
+            />
+          </VAlert>
+
+          <VForm
+            ref="form"
+            @vue:mounted="($refs.form as VForm).validate()"
+            :model-value="valid"
+            @update:model-value="
+              valid = $event as boolean;
+              if ($event) {
+                priceTask.run();
+              }
+            "
+            @input="priceTask.run()"
+          >
+            <VRow>
+              <VCol cols="6">
+                <InputTooltip tooltip="The number of virtual cores.">
+                  <VTextField
+                    label="CPU (vCores)"
+                    suffix="vCores"
+                    min="1"
+                    max="256"
+                    :rules="[cruRules]"
+                    v-model="resources.cru"
+                  />
+                </InputTooltip>
+              </VCol>
+
+              <VCol cols="6">
+                <InputTooltip tooltip="The amount of RAM (Random Access Memory) in GB.">
+                  <VTextField
+                    label="Memory (GB)"
+                    suffix="GB"
+                    min="1"
+                    max="1024"
+                    :rules="[mruRules]"
+                    v-model="resources.mru"
+                  />
+                </InputTooltip>
+              </VCol>
+
+              <VCol cols="6">
+                <InputTooltip tooltip="The SSD capacity storage.">
+                  <VTextField
+                    label="Disk SSD"
+                    suffix="GB"
+                    min="1"
+                    max="1000000"
+                    :rules="[sruRules]"
+                    v-model="resources.sru"
+                  />
+                </InputTooltip>
+              </VCol>
+
+              <VCol cols="6">
+                <InputTooltip tooltip="The HDD capacity storage.">
+                  <VTextField
+                    label="Disk HDD"
+                    suffix="GB"
+                    min="0"
+                    max="1000000"
+                    :rules="[hruRules]"
+                    v-model="resources.hru"
+                  />
+                </InputTooltip>
+              </VCol>
+
+              <VCol cols="12">
+                <InputTooltip tooltip="The amount of TFT to calculate discount.">
+                  <VTextField
+                    label="Balance"
+                    suffix="TFT"
+                    :rules="[balanceRules]"
+                    :disabled="userBalance && resources.useCurrentBalance"
+                    :model-value="userBalance && resources.useCurrentBalance ? userBalance.free : resources.balance"
+                    @update:model-value="resources.balance = $event"
+                  />
+                </InputTooltip>
+              </VCol>
+
+              <VCol cols="4">
+                <InputTooltip
+                  inline
+                  tooltip=" A certified node will receive 25% more reward compared to a non-certified node."
+                >
+                  <VSwitch color="primary" inset label="Certified Node" hide-details v-model="resources.certified" />
+                </InputTooltip>
+              </VCol>
+
+              <VCol cols="4">
+                <InputTooltip
+                  inline
+                  tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet"
+                >
+                  <VSwitch color="primary" inset label="With a Public IPv4" hide-details v-model="resources.ipv4" />
+                </InputTooltip>
+              </VCol>
+
+              <VCol
+                cols="4"
+                v-if="userBalance"
+                @vue:unmounted="
+                  resources.useCurrentBalance = true;
+                  priceTask.run();
+                "
+              >
+                <input-tooltip inline tooltip="Use current balance to calculate the discount.">
+                  <VSwitch
+                    color="primary"
+                    inset
+                    label="Use current balance"
+                    hide-details
+                    v-model="resources.useCurrentBalance"
+                  />
+                </input-tooltip>
+              </VCol>
+            </VRow>
+          </VForm>
+
+          <VDivider class="my-8" />
+          <VRow v-if="valid && priceTask.error">
+            <VCol cols="12">
+              <VAlert type="error" :text="normalizeError(priceTask.error, 'Failed to calculate price.')" />
+            </VCol>
+          </VRow>
+
+          <VRow class="text-center text-body-1 text-black" v-else-if="valid">
+            <VCol cols="6">
+              <div
+                class="rounded pa-4 h-100 d-flex justify-center align-center"
+                :style="{ background: computePackageColor(priceTask.data?.dedicatedPackage.package) }"
+              >
+                <p>
+                  Cost of reserving a <strong v-text="'Dedicated Node'" /> of the same specifications<br />
+                  <strong v-text="'Loading...'" v-if="priceTask.loading" />
+                  <strong v-else v-text="dedicatedPriceUSD + ' USD/month, ' + dedicatedPriceTFT + ' TFT/month'" />. A
+                  user can reserve an entire node then use it exclusively to deploy solutions
+                </p>
+              </div>
+            </VCol>
+            <VCol cols="6">
+              <div
+                class="rounded pa-4 h-100 d-flex justify-center align-center"
+                :style="{ background: computePackageColor(priceTask.data?.sharedPackage.package) }"
+              >
+                <p>
+                  Cost of reservation on a <strong v-text="'Shared Node'" /><br />
+                  <strong v-text="'Loading...'" v-if="priceTask.loading" />
+                  <strong v-else v-text="sharedPriceUSD + ' USD/month, ' + sharedPriceTFT + ' TFT/month'" />. Shared
+                  Nodes allow several users to host various workloads on a single node
+                </p>
+              </div>
+            </VCol>
+          </VRow>
+
+          <VRow v-else>
+            <VCol cols="12">
+              <VAlert type="error">
+                Please provide a valid data inorder to calculate your deployment price correctly.
+              </VAlert>
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VCardText>
+    </VCard>
+  </ViewLayout>
+</template>
+
+<script lang="ts">
+import { QueryClient } from "@threefold/tfchain_client";
+import { computed, ref } from "vue";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { VForm } from "vuetify/components/VForm";
+
+import { calculator as Calculator } from "../../../grid_client/dist/es6";
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import { useAsync } from "../hooks";
+import { useProfileManager } from "../stores";
+import { normalizeError } from "../utils/helpers";
+import { balanceRules, cruRules, hruRules, mruRules, sruRules } from "../utils/pricing_calculator";
+import { computePackageColor, normalizePrice } from "../utils/pricing_calculator";
+
+export default {
+  name: "PricingCalculator",
+  setup() {
+    const calculator = new Calculator(new QueryClient(window.env.SUBSTRATE_URL));
+    const profileManager = useProfileManager();
+    const userBalance = useProfileManagerController().balance;
+    const valid = ref(true);
+    const resources = ref({
+      cru: "1",
+      mru: "1",
+      sru: "25",
+      hru: "100",
+      balance: "1",
+      certified: false,
+      ipv4: false,
+      useCurrentBalance: true,
+    });
+
+    const tftPriceTask = useAsync(() => calculator.tftPrice(), { init: true, default: 0 });
+    const priceTask = useAsync(
+      () => {
+        return calculator.calculate({
+          cru: +resources.value.cru,
+          mru: +resources.value.mru,
+          hru: +resources.value.hru,
+          sru: +resources.value.sru,
+          ipv4u: resources.value.ipv4,
+          certified: resources.value.certified,
+          balance:
+            userBalance.value && resources.value.useCurrentBalance ? userBalance.value.free : +resources.value.balance,
+        });
+      },
+      {
+        init: true,
+        shouldRun: () => valid.value,
+      },
+    );
+
+    const dedicatedPriceUSD = computed(() => {
+      const price = priceTask.value.data?.dedicatedPrice;
+      if (price) {
+        return normalizePrice(price);
+      }
+      return 0;
+    });
+
+    const dedicatedPriceTFT = computed(() => {
+      const tftPrice = tftPriceTask.value.data;
+      const dedicatedPrice = dedicatedPriceUSD.value;
+      if (dedicatedPrice && tftPrice) {
+        const price = dedicatedPrice / tftPrice;
+        return normalizePrice(price);
+      }
+      return 0;
+    });
+
+    const sharedPriceUSD = computed(() => {
+      const price = priceTask.value.data?.sharedPrice;
+      if (price) {
+        return normalizePrice(price);
+      }
+      return 0;
+    });
+
+    const sharedPriceTFT = computed(() => {
+      const tftPrice = tftPriceTask.value.data;
+      const sharedPrice = sharedPriceUSD.value;
+      if (sharedPrice && tftPrice) {
+        const price = sharedPrice / tftPrice;
+        return normalizePrice(price);
+      }
+      return 0;
+    });
+
+    return {
+      valid,
+      cruRules,
+      mruRules,
+      sruRules,
+      hruRules,
+      balanceRules,
+      userBalance,
+      resources,
+      priceTask,
+
+      dedicatedPriceUSD,
+      dedicatedPriceTFT,
+      sharedPriceUSD,
+      sharedPriceTFT,
+      computePackageColor,
+      normalizeError,
+      profileManager,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/calculator/resource_pricing.vue b/packages/playground/src/calculator/resource_pricing.vue
deleted file mode 100644
index c70d8e19d9..0000000000
--- a/packages/playground/src/calculator/resource_pricing.vue
+++ /dev/null
@@ -1,356 +0,0 @@
-<template>
-  <div class="border px-4 pb-4 rounded position-relative mt-2">
-    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
-      <v-icon size="30" class="pr-3">mdi-calculator</v-icon>
-      <v-card-title class="pa-0">Pricing Calculator</v-card-title>
-    </v-card>
-    <v-card class="pa-3">
-      <v-row class="mt-3 px-3 pl-6">
-        <v-alert type="info" variant="tonal">
-          For more information about Threefold Pricing check
-          <a class="app-link" @click="openManual()">here</a>
-        </v-alert>
-      </v-row>
-      <v-row class="mt-3 px-3">
-        <v-col cols="6">
-          <input-validator
-            :value="CRU"
-            :rules="[
-              validators.required('CPU is required.'),
-              validators.isInt('CPU must be a valid integer.'),
-              validators.min('CPU min is 1 cores.', 1),
-              validators.max('CPU max is 256 cores.', 256),
-            ]"
-            #="{ props }"
-          >
-            <input-tooltip tooltip="The number of virtual cores.">
-              <v-text-field
-                label="CPU (vCores)"
-                suffix="vCores"
-                type="number"
-                min="1"
-                max="256"
-                oninput="if(Number(this.value) > 256) this.value = 256;"
-                v-model.number="CRU"
-                v-bind="props"
-                ref="valid"
-              />
-            </input-tooltip>
-          </input-validator>
-        </v-col>
-        <v-col cols="6">
-          <input-validator
-            :value="MRU"
-            :rules="[
-              validators.required('Memory is required.'),
-              validators.isInt('Memory must be a valid integer.'),
-              validators.max('Maximum allowed memory is 1024 GB.', 1024),
-            ]"
-            #="{ props }"
-          >
-            <input-tooltip tooltip="The amount of RAM (Random Access Memory) in GB.">
-              <v-text-field
-                label="Memory (GB)"
-                type="number"
-                suffix="GB"
-                min="1"
-                max="1024"
-                oninput="if(Number(this.value) > 1024) this.value = 1024;"
-                v-model.number="MRU"
-                v-bind="props"
-                ref="valid"
-              />
-            </input-tooltip>
-          </input-validator>
-        </v-col>
-      </v-row>
-
-      <v-row class="px-3">
-        <v-col cols="6">
-          <input-validator
-            :value="SRU"
-            :rules="[
-              validators.required('SSD Storage size is required.'),
-              validators.isInt('SSD Storage size must be a valid integer.'),
-              validators.max('Maximum allowed ssd storage size is 1000000 GB.', 1000000),
-            ]"
-            #="{ props }"
-          >
-            <input-tooltip tooltip="The SSD capacity storage.">
-              <v-text-field
-                label="Disk SSD"
-                suffix="GB"
-                type="number"
-                min="1"
-                max="1000000"
-                oninput="if(Number(this.value) > 1000000) this.value = 1000000;"
-                v-model.number="SRU"
-                v-bind="props"
-                ref="valid"
-              />
-            </input-tooltip>
-          </input-validator>
-        </v-col>
-        <v-col cols="6">
-          <input-validator
-            :value="HRU"
-            :rules="[
-              validators.isInt('HDD Storage size must be a valid integer.'),
-              validators.max('Maximum allowed hdd storage size is 1000000 GB.', 1000000),
-              validators.min('Minimum allowed hdd storage size is 0 GB.', 0),
-            ]"
-            #="{ props }"
-          >
-            <input-tooltip tooltip="The HDD capacity storage.">
-              <v-text-field
-                label="Disk HDD"
-                suffix="GB"
-                type="number"
-                min="0"
-                max="1000000"
-                oninput="if(Number(this.value) > 1000000) this.value = 1000000;"
-                v-model.number="HRU"
-                v-bind="props"
-                ref="valid"
-              />
-            </input-tooltip>
-          </input-validator>
-        </v-col>
-      </v-row>
-
-      <v-row class="px-3">
-        <v-col cols="12">
-          <input-validator
-            :rules="[validators.min('Balance should be a positive integer.', 1)]"
-            :value="balance"
-            #="{ props }"
-          >
-            <input-tooltip tooltip="The amount of TFT to calculate discount.">
-              <v-text-field
-                label="Balance"
-                :disabled="currentbalance && hasActiveProfile"
-                suffix="TFT"
-                type="number"
-                v-bind="props"
-                v-model.number="balance"
-                ref="valid"
-              />
-            </input-tooltip>
-          </input-validator>
-        </v-col>
-      </v-row>
-      <v-row class="my-0 my-3 px-6">
-        <input-tooltip
-          inline
-          class="px-2"
-          tooltip=" A certified node will receive 25% more reward compared to a non-certified node."
-        >
-          <v-switch color="primary" inset label="Certified Node" v-model="isCertified" hide-details />
-        </input-tooltip>
-        <input-tooltip
-          inline
-          class="px-2"
-          tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet"
-        >
-          <v-switch color="primary" inset label="With a Public IPv4" v-model="ipv4" hide-details />
-        </input-tooltip>
-        <input-tooltip
-          v-if="hasActiveProfile"
-          inline
-          class="px-2"
-          tooltip="Use current balance to calculate the discount."
-        >
-          <v-switch color="primary" inset label="Use current balance" v-model="currentbalance" hide-details />
-        </input-tooltip>
-      </v-row>
-      <v-divider />
-
-      <v-row class="pa-3" style="text-color: black">
-        <v-col cols="6" v-for="price in prices" :key="price.price">
-          <v-card
-            class="pa-3 text-center price-box"
-            height="100%"
-            :style="{ color: price.color, background: price.backgroundColor }"
-          >
-            <span class="price">
-              <p v-if="price.label === 'Dedicated Node'">
-                Cost of reserving a
-                <span class="name"
-                  ><b>{{ price.label + " " }}</b></span
-                >
-                of the same specifications
-              </p>
-              <p v-else>
-                Cost of reservation on a
-                <span class="name"
-                  ><b>{{ price.label !== undefined ? price.label + " " : " " }}</b></span
-                >
-              </p>
-              <span class="package">
-                <b>{{ price.packageName != "none" ? capitalize(price.packageName) + " Package: " : "" }}</b></span
-              >
-              <b>${{ Number(price.price).toFixed(4) }}/month, {{ Number(price.TFTs).toFixed(4) }} TFT/month. </b>
-            </span>
-            <span> {{ price.info }}</span>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-card>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { QueryClient } from "@threefold/tfchain_client";
-import { capitalize, computed, watch } from "vue";
-import { onMounted } from "vue";
-import { ref } from "vue";
-
-import { useProfileManagerController } from "@/components/profile_manager_controller.vue";
-import { useProfileManager } from "@/stores/profile_manager";
-
-import { calculator as Calculator } from "../../../grid_client/dist/es6";
-import { useGrid } from "../stores";
-import { color } from "../utils/background_color";
-
-const CRU = ref<number>(1);
-const MRU = ref<number>(1);
-const SRU = ref<number>(25);
-const HRU = ref<number>(0);
-const balance = ref<number>(0);
-const TFTPrice = ref<number>(0);
-
-const isCertified = ref<boolean>(false);
-const ipv4 = ref<boolean>(false);
-const currentbalance = ref<boolean>(false);
-
-const profileManagerController = useProfileManagerController();
-const freeBalance = computed(() => +(profileManagerController.balance.value?.free?.toFixed(2) ?? 0));
-
-const valid = ref();
-interface PriceType {
-  label?: string;
-  color: string;
-  price: string;
-  packageName: any;
-  backgroundColor: string;
-  TFTs: any;
-  info: string;
-}
-const prices = ref<PriceType[]>([]);
-const gridStore = useGrid();
-const profileManager = useProfileManager();
-const hasActiveProfile = computed(() => {
-  return !!profileManager.profile;
-});
-const calculator = computed(() => {
-  return hasActiveProfile.value && gridStore.grid
-    ? gridStore.grid?.calculator
-    : new Calculator(new QueryClient(window.env.SUBSTRATE_URL));
-});
-watch(
-  [CRU, MRU, SRU, HRU, balance, isCertified, ipv4, currentbalance, hasActiveProfile],
-  async () => {
-    let pkgs: any;
-    if (!valid.value?.error) {
-      if (currentbalance.value && hasActiveProfile.value && gridStore.grid) {
-        balance.value = freeBalance.value;
-      }
-      pkgs = await calculator.value?.calculate({
-        cru: CRU.value,
-        mru: MRU.value,
-        hru: HRU.value ? HRU.value : 0,
-        sru: SRU.value,
-        ipv4u: ipv4.value,
-        certified: isCertified.value,
-        balance: balance.value,
-      });
-      setPriceList(pkgs);
-    }
-  },
-  { immediate: true },
-);
-
-watch(currentbalance, (newCurrentBalance, oldCurrentBalance) => {
-  if (oldCurrentBalance && !newCurrentBalance) {
-    balance.value = 0;
-  }
-});
-
-watch(
-  hasActiveProfile,
-  async newVal => {
-    if (newVal) {
-      currentbalance.value = true;
-      balance.value = freeBalance.value;
-    } else {
-      balance.value = 0;
-      currentbalance.value = false;
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  freeBalance,
-  newVal => {
-    if (newVal && currentbalance) {
-      balance.value = freeBalance.value;
-    } else {
-      balance.value = 0;
-    }
-  },
-  { immediate: true },
-);
-
-async function setPriceList(pkgs: any): Promise<PriceType[]> {
-  TFTPrice.value = await calculator.value?.tftPrice();
-  prices.value = [
-    {
-      label: "Dedicated Node",
-      price: `${pkgs.dedicatedPrice}`,
-      color: "black",
-      packageName: pkgs.dedicatedPackage.package,
-      backgroundColor: color(pkgs.dedicatedPackage.package),
-      TFTs: (+pkgs.dedicatedPrice / TFTPrice.value).toFixed(2),
-      info: "A user can reserve an entire node then use it exclusively to deploy solutions",
-    },
-    {
-      label: "Shared Node",
-      price: `${pkgs.sharedPrice}`,
-      color: "black",
-      packageName: pkgs.sharedPackage.package,
-      backgroundColor: color(pkgs.sharedPackage.package),
-      TFTs: (+pkgs.sharedPrice / TFTPrice.value).toFixed(2),
-      info: "Shared Nodes allow several users to host various workloads on a single node",
-    },
-  ];
-  return prices.value;
-}
-
-onMounted(async () => {
-  balance.value = freeBalance.value;
-  const pkgs = await calculator.value.calculate({
-    cru: CRU.value,
-    mru: MRU.value,
-    hru: HRU.value ? HRU.value : 0,
-    sru: SRU.value,
-    ipv4u: ipv4.value,
-    certified: isCertified.value,
-    balance: balance.value,
-  });
-  await setPriceList(pkgs);
-});
-
-function openManual() {
-  window.open("https://www.manual.grid.tf/knowledge_base/cloud/pricing/pricing.html", "_blank");
-}
-</script>
-
-<style>
-.custom-container {
-  width: 80%;
-}
-.v-label {
-  font-size: 0.875rem;
-}
-</style>
diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
index 2240b9ad65..1cd89fdd46 100644
--- a/packages/playground/src/router/index.ts
+++ b/packages/playground/src/router/index.ts
@@ -469,7 +469,7 @@ function createDeployRoutes(): RouteRecordRaw[] {
       children: [
         {
           path: DashboardRoutes.Deploy.PricingCalculator,
-          component: () => import("../calculator/resource_pricing.vue"),
+          component: () => import("../calculator/pricing_calculator.vue"),
           meta: { title: "Resource Pricing", publicPath: true },
         },
         {
diff --git a/packages/playground/src/utils/background_color.ts b/packages/playground/src/utils/background_color.ts
deleted file mode 100644
index 1172165b19..0000000000
--- a/packages/playground/src/utils/background_color.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export function color(pkg: string): string {
-  let color = "";
-
-  switch (pkg) {
-    case "default":
-      color = "#74DDC3";
-      break;
-    case "bronze":
-      color = "linear-gradient(270deg, #AF6114 0%, #ffc58b 25%, #DC8E41 49.83%, #f9d1a9 77.32%, #AF6114 100%)";
-      break;
-    case "silver":
-      color =
-        "linear-gradient(270deg, #7d7d7d 0%, #ffffff 15%, #adadad 24.83%, #ffffff 50.32%, #adadad 71.83%, #ffffff 87.32%, #a0a0a0 100%)";
-      break;
-    case "gold":
-      color = "linear-gradient(270deg, #bf953f 0%, #fffce0 25%, #d7ae56 49.83%, #fffce0 77.32%, #aa771c 100%)";
-      break;
-    default:
-      color = "#f3f3f3";
-      break;
-  }
-  return color;
-}
diff --git a/packages/playground/src/utils/pricing_calculator.ts b/packages/playground/src/utils/pricing_calculator.ts
new file mode 100644
index 0000000000..c515dccb9e
--- /dev/null
+++ b/packages/playground/src/utils/pricing_calculator.ts
@@ -0,0 +1,59 @@
+import { isInt, max, min, required } from "./validators";
+
+function _applyRules(rules: Array<(value: string) => { message: string } | void>): (value: string) => true | string {
+  return (value: string) => {
+    for (const rule of rules) {
+      const res = rule(value);
+      if (res && res.message) {
+        return res.message;
+      }
+    }
+    return true;
+  };
+}
+
+export const cruRules = _applyRules([
+  required("CPU is required."),
+  isInt("CPU must be a valid integer."),
+  min("CPU min is 1 cores.", 1),
+  max("CPU max is 256 cores.", 256),
+]);
+
+export const mruRules = _applyRules([
+  required("Memory is required."),
+  isInt("Memory must be a valid integer."),
+  max("Maximum allowed memory is 1024 GB.", 1024),
+]);
+
+export const sruRules = _applyRules([
+  required("SSD Storage size is required."),
+  isInt("SSD Storage size must be a valid integer."),
+  max("Maximum allowed ssd storage size is 1000000 GB.", 1000000),
+]);
+
+export const hruRules = _applyRules([
+  isInt("HDD Storage size must be a valid integer."),
+  max("Maximum allowed hdd storage size is 1000000 GB.", 1000000),
+  min("Minimum allowed hdd storage size is 0 GB.", 0),
+]);
+
+export const balanceRules = _applyRules([min("Balance should be a positive integer.", 1)]);
+
+export function normalizePrice(price: number) {
+  return parseInt(String(price * 1000)) / 1000;
+}
+
+export function computePackageColor(packageName?: string): string {
+  switch (packageName) {
+    case "default":
+      return "#74DDC3";
+    case "bronze":
+      return "linear-gradient(270deg, #AF6114 0%, #ffc58b 25%, #DC8E41 49.83%, #f9d1a9 77.32%, #AF6114 100%)";
+    case "silver":
+      return "linear-gradient(270deg, #7d7d7d 0%, #ffffff 15%, #adadad 24.83%, #ffffff 50.32%, #adadad 71.83%, #ffffff 87.32%, #a0a0a0 100%)";
+    case "gold":
+      return "linear-gradient(270deg, #bf953f 0%, #fffce0 25%, #d7ae56 49.83%, #fffce0 77.32%, #aa771c 100%)";
+    default:
+      return "#f3f3f3";
+  }
+}