diff --git a/app.vue b/app.vue
index 5375c3a..e971a69 100644
--- a/app.vue
+++ b/app.vue
@@ -1,22 +1,33 @@
 <template>
-  <div class="grid grid-rows-[max-content_1fr_max-content] grid-cols-[1fr] w-full justify-items-center">
+  <div
+    class="grid grid-rows-[max-content_1fr_max-content] grid-cols-[1fr] w-full justify-items-center"
+  >
     <div class="max-w-[1300px] w-full lg:px-md">
       <SvgIcon name="logo" class="w-[170px] mt-md" />
     </div>
     <div class="max-w-[1100px] w-full grid gap-2xl">
-    <div class="grid gap-lg grid-cols-2 grid-rows-1 sm:grid-cols-1 mt-3xl items-center">
-      <div class="h-max lg:px-md">
-        <h1 class="font-title text-5xl text-white-50 font-bold">Race to stake</h1>
-        <p class="text-xl text-white-200 mt-sm">
-          Secure the network, earn rewards
-        </p>
+      <div
+        class="grid gap-lg grid-cols-2 grid-rows-1 sm:grid-cols-1 mt-3xl items-center"
+      >
+        <div class="h-max lg:px-md">
+          <h1 class="font-title text-5xl text-white-50 font-bold">
+            Race to stake
+          </h1>
+          <p class="text-xl text-white-200 mt-sm">
+            Secure the network, earn rewards
+          </p>
+        </div>
+        <APYCalculator :total-staked="totalStaked" />
+      </div>
+      <StakeVolume
+        :visible-stakers="visibleStakers"
+        :total-staked="totalStaked"
+        :loading="loading"
+        class="h-max md:m-md"
+      />
+      <div class="md:m-md">
+        <LeaderBoard :visible-stakers="visibleStakers" class="h-max" />
       </div>
-      <APYCalculator />
-    </div>
-    <StakeVolume :visible-stakers="visibleStakers" :loading="loading" class="h-max md:m-md" />
-    <div class="md:m-md">
-      <LeaderBoard :visible-stakers="visibleStakers" class="h-max" />
-    </div>
     </div>
     <WFooter class="!bg-black-800 mt-2xl" :footer-sections="footerSections" />
   </div>
@@ -61,6 +72,12 @@ const visibleStakers = computed(() => {
   })
 })
 
+const totalStaked = computed(() => {
+  return visibleStakers.value
+    ? visibleStakers.value.reduce((acc, staker) => acc + staker.amount, 0)
+    : 0
+})
+
 // const visibleStakers = ref(mockStakers);
 const loading = ref(false)
 
diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
index b2ad1e6..f0cec9b 100644
--- a/assets/styles/tailwind.css
+++ b/assets/styles/tailwind.css
@@ -1,5 +1,4 @@
-
 @import url("wit-vue-ui/style.css");
 html {
   @apply bg-black-950;
-}
\ No newline at end of file
+}
diff --git a/components/APYCalculator.vue b/components/APYCalculator.vue
index e315914..e52d62c 100644
--- a/components/APYCalculator.vue
+++ b/components/APYCalculator.vue
@@ -5,11 +5,11 @@
     </h2>
     <p class="text-white-200">Calculate your potential earnings</p>
 
-    <div class="grid grid-cols-[1fr_max-content] sm:grid-cols-1 gap-md sm:gap-sm justify-center items-end">
+    <div
+      class="grid grid-cols-[1fr_max-content] sm:grid-cols-1 gap-md sm:gap-sm justify-center items-end"
+    >
       <div class="mt-md">
-        <label
-          class="block text-xs font-bold text-[rgb(0,226,237)] mb-sm"
-        >
+        <label class="block text-xs font-bold text-[rgb(0,226,237)] mb-sm">
           Enter an Amount
         </label>
         <input
@@ -25,64 +25,65 @@
       >
         Calculate APY
       </button>
-      <p
-        v-if="showError"
-        class="text-red-50 text-sm"
-      >
-       {{ errorMessage }} 
+      <p v-if="showError" class="text-red-50 text-sm">
+        {{ errorMessage }}
       </p>
     </div>
 
-    <div
-        v-if="calculatedAPY && !errorMessage"
-        class="mt-md p-6 rounded-lg"
-      >
-        <div class="flex sm:flex-col gap-md">
-          <div class="grid justify-center items-middle text-center p-md bg-black-950 rounded-lg w-full">
-            <p class="text-sm text-white-200 mb-xs">
-              Annual Percentage Yield
-            </p>
-            <p class="text-2xl font-bold text-wit-blue-500">
-              {{ calculatedAPY }}%
-            </p>
-          </div>
-          <div class="grid justify-center items-middle text-center p-md bg-black-950 rounded-lg w-full">
-            <p class="text-sm text-white-200 mb-xs">Monthly Rewards</p>
-            <p class="text-2xl font-bold text-wit-blue-500 w-max">
-              {{ estimatedMonthlyRewards }} $WIT
-            </p>
-          </div>
+    <div v-if="calculatedAPY && !errorMessage" class="mt-md p-6 rounded-lg">
+      <div class="flex sm:flex-col gap-md">
+        <div
+          class="grid justify-center items-middle text-center p-md bg-black-950 rounded-lg w-full"
+        >
+          <p class="text-sm text-white-200 mb-xs">Annual Percentage Yield</p>
+          <p class="text-2xl font-bold text-wit-blue-500">
+            {{ calculatedAPY }}%
+          </p>
+        </div>
+        <div
+          class="grid justify-center items-middle text-center p-md bg-black-950 rounded-lg w-full"
+        >
+          <p class="text-sm text-white-200 mb-xs">Monthly Rewards</p>
+          <p class="text-2xl font-bold text-wit-blue-500 w-max">
+            {{ estimatedMonthlyRewards }} $WIT
+          </p>
         </div>
       </div>
-</BaseCard>
+    </div>
+  </BaseCard>
 </template>
 
 <script setup>
 import { formatNumber } from "@/utils/formatNumber.js"
 import { ref } from "vue"
 
+const props = defineProps({
+  totalStaked: Number,
+})
+
 const calculatedAPY = ref(null)
 const estimatedMonthlyRewards = ref(null)
 const calculatorInput = ref("")
 const errorMessage = ref("")
 const calculateAPY = () => {
   if (!Number(calculatorInput.value)) {
-    errorMessage.value = "Please enter a valid number" 
-    return 
+    errorMessage.value = "Please enter a valid number"
+    return
   } else if (Number(calculatorInput.value) < 10_000) {
     errorMessage.value = "Minimum skate amount is 10,000 $WIT"
     return
-  }  else if (Number(calculatorInput.value) > 10_000_000) {
+  } else if (Number(calculatorInput.value) > 10_000_000) {
     errorMessage.value = "Maximum skate amount is 10,000,000 $WIT"
     return
   } else {
     errorMessage.value = ""
-    // const yearlyEmission = 78_840_000
-    // const initial = 300_000_000
-    const apy = 0.2628 // yearlyEmission / initial
-    calculatedAPY.value = "26.28"
+    const yearlyEmission = 78_840_000_000_000_000
+    const apy = yearlyEmission / props.totalStaked
+    calculatedAPY.value = (apy * 100).toFixed(2)
     const amount = parseFloat(calculatorInput.value) || 100000
-    estimatedMonthlyRewards.value = formatNumber(Math.floor((amount * apy) / 12))
+    estimatedMonthlyRewards.value = formatNumber(
+      Math.floor((amount * apy) / 12),
+    )
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/BaseCard.vue b/components/BaseCard.vue
index 1dac3dd..d98d3c8 100644
--- a/components/BaseCard.vue
+++ b/components/BaseCard.vue
@@ -2,4 +2,4 @@
   <div class="bg-black-800 rounded-3xl">
     <slot></slot>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/components/LeaderBoard.vue b/components/LeaderBoard.vue
index b28c77f..7af78f4 100644
--- a/components/LeaderBoard.vue
+++ b/components/LeaderBoard.vue
@@ -1,73 +1,70 @@
 <template>
-<BaseCard class="!w-full">
-  <h2 class="text-xl font-bold text-white-50 mb-md p-md sm:w-max">
-    Staking Leaderboard
-  </h2>
-      <table class="w-full divide-y divide-white-500 text-white-200 mb-md sm:w-md">
-        <thead class="text-xs text-white-200 sm:hidden">
-            <tr>
-                <th scope="col" class="px-md py-md text-start">
-                  Rank
-                </th>
-                <th scope="col" class="px-md py-md text-start">
-                  Address
-                </th>
-                <th scope="col" class="px-md py-md text-start">
-                  Staked Amount
-                </th>
-                <th scope="col" class="px-md text-end">
-                  Timestamp
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(staker, index) in visibleStakers"
-            :key="staker.withdrawer"
-            class="transition-all duration-200 even:bg-black-600 sm:grid sm:grid-col-1 sm:py-md"
+  <BaseCard class="!w-full">
+    <h2 class="text-xl font-bold text-white-50 mb-md p-md sm:w-max">
+      Staking Leaderboard
+    </h2>
+    <table
+      class="w-full divide-y divide-white-500 text-white-200 mb-md sm:w-md"
+    >
+      <thead class="text-xs text-white-200 sm:hidden">
+        <tr>
+          <th scope="col" class="px-md py-md text-start">Rank</th>
+          <th scope="col" class="px-md py-md text-start">Address</th>
+          <th scope="col" class="px-md py-md text-start">Staked Amount</th>
+          <th scope="col" class="px-md text-end">Timestamp</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(staker, index) in visibleStakers"
+          :key="staker.withdrawer"
+          class="transition-all duration-200 even:bg-black-600 sm:grid sm:grid-col-1 sm:py-md"
+        >
+          <th class="label">Rank</th>
+          <td class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap">
+            {{ index + 1 }}
+          </td>
+          <th class="label">Address</th>
+          <td
+            class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap text-sm text-wit-blue-500 font-mono truncate hover:cursor-pointer [&&]sm:py-xs"
           >
-            <th class="label">Rank</th>
-            <td class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap">
-              {{ index + 1 }}
-            </td>
-            <th class="label">Address</th>
-            <td
-              class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap text-sm text-wit-blue-500 font-mono truncate hover:cursor-pointer [&&]sm:py-xs"
+            <a
+              :href="`https://witnet.network/search/${staker.withdrawer}`"
+              target="_blank"
             >
-              <a :href="`https://witnet.network/search/${staker.withdrawer}`" target="_blank">
-                {{ staker.withdrawer ?? "unknown" }}
-              </a>
-            </td>
-            <th class="label">Amount</th>
-            <td
-             class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap text-sm font-bold text-black"
-            >
-              {{ formatNumber(nanoWitToWit(staker.amount).toFixed()) }} $WIT
-            </td>
-            <th class="label">Timestamp</th>
-            <td
-              class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap text-sm text-end sm:text-start sm:py-sm font-mono"
-            >
-              {{ formatDate(staker.timestamp) }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div v-if="loading" class="text-center py-4">
-        <div
-          class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-wit-blue-500"
-        />
-      </div>
+              {{ staker.withdrawer ?? "unknown" }}
+            </a>
+          </td>
+          <th class="label">Amount</th>
+          <td
+            class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap text-sm font-bold text-black"
+          >
+            {{ formatNumber(nanoWitToWit(staker.amount).toFixed()) }} $WIT
+          </td>
+          <th class="label">Timestamp</th>
+          <td
+            class="px-md py-md [&&]:sm:pt-sm whitespace-nowrap text-sm text-end sm:text-start sm:py-sm font-mono"
+          >
+            {{ formatDate(staker.timestamp) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="loading" class="text-center py-4">
+      <div
+        class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-wit-blue-500"
+      />
+    </div>
     <!-- <div class="border-t border-white-500 flex justify-end pb-md" v-if="total > pageSize">
       <WPagination :total="total" :pageSize="pageSize" :page="currentPage" v-model:page="currentPage" class="text-white-50 mt-md" />
     </div> -->
-</BaseCard>
+  </BaseCard>
 </template>
 
 <script setup>
 import dayjs from "dayjs"
 // import { WPagination } from "wit-vue-ui"
-import {ref, watch} from 'vue'
+import { ref, watch } from "vue"
 const props = defineProps({
   loading: Boolean,
   visibleStakers: Array,
@@ -82,7 +79,7 @@ const pageSize = ref(15)
 const currentPage = ref(1)
 const total = computed(() => props.visibleStakers.length)
 watch(currentPage, (valX, _valY) => {
-  console.log('Page updated:', valX)
+  console.log("Page updated:", valX)
 })
 </script>
 <style lang="scss" scoped>
@@ -95,4 +92,4 @@ watch(currentPage, (valX, _valY) => {
 .t-value {
   @apply px-md py-md [&&]:sm:pt-sm;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/StakeVolume.vue b/components/StakeVolume.vue
index bb79a51..897800d 100644
--- a/components/StakeVolume.vue
+++ b/components/StakeVolume.vue
@@ -1,56 +1,42 @@
 <template>
-      <div class="">
-        <div class="grid grid-cols-3 sm:grid-cols-1 mb-md">
-          <div class="text-center mb-md">
-            <p class="title">
-              Total Staked
-            </p>
-            <p class="data">
-              {{ formatNumber(totalStaked) }} $WIT
-            </p>
-          </div>
-          <div class="text-center mb-md">
-            <p class="title">
-              Progress to Goal
-            </p>
-            <p class="data ">
-              {{ ((totalStaked / stakingGoal) * 100).toFixed(2) }}%
-            </p>
-          </div>
-          <div class="text-center mb-md">
-            <p class="title">
-              Target
-            </p>
-            <p class="data ">
-              {{ formatNumber(stakingGoal) }} $WIT
-            </p>
-          </div>
-        </div>
+  <div class="">
+    <div class="grid grid-cols-3 sm:grid-cols-1 mb-md">
+      <div class="text-center mb-md">
+        <p class="title">Total Staked</p>
+        <p class="data">{{ formatNumber(totalStakedFormatted) }} $WIT</p>
+      </div>
+      <div class="text-center mb-md">
+        <p class="title">Progress to Goal</p>
+        <p class="data">
+          {{ ((totalStakedFormatted / stakingGoal) * 100).toFixed(2) }}%
+        </p>
+      </div>
+      <div class="text-center mb-md">
+        <p class="title">Target</p>
+        <p class="data">{{ formatNumber(stakingGoal) }} $WIT</p>
+      </div>
+    </div>
 
-        <div class="relative">
-          <div class="overflow-hidden h-md bg-black-800 rounded-full">
-            <div
-              class="h-full bg-wit-blue-500 rounded-full transition-all duration-300"
-              :style="{ width: `${(totalStaked / stakingGoal) * 100}%` }"
-            />
-          </div>
-        </div>
+    <div class="relative">
+      <div class="overflow-hidden h-md bg-black-800 rounded-full">
+        <div
+          class="h-full bg-wit-blue-500 rounded-full transition-all duration-300"
+          :style="{ width: `${(totalStaked / stakingGoal) * 100}%` }"
+        />
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { WCard } from "wit-vue-ui"
-import { formatNumber } from '@/utils/formatNumber.js'
+import { formatNumber } from "@/utils/formatNumber.js"
 const props = defineProps({
   visibleStakers: Array,
+  totalStaked: Number,
 })
 const stakingGoal = 300_000_000
-const totalStaked = computed(() => {
-  return props.visibleStakers
-    ? nanoWitToWit(
-        props.visibleStakers.reduce((acc, staker) => acc + staker.amount, 0),
-      ).toFixed()
-    : 0
+const totalStakedFormatted = computed(() => {
+  return props.totalStaked ? nanoWitToWit(props.totalStaked).toFixed() : 0
 })
 </script>
 
@@ -61,4 +47,4 @@ const totalStaked = computed(() => {
 .data {
   @apply font-title text-white-50 text-3xl font-bold;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/SvgIcon.vue b/components/SvgIcon.vue
index bbc52bc..fb33e6a 100644
--- a/components/SvgIcon.vue
+++ b/components/SvgIcon.vue
@@ -1,5 +1,5 @@
 <template>
-<customIcon v-if="name" />
+  <customIcon v-if="name" />
 </template>
 <script setup>
 const props = defineProps({
@@ -10,5 +10,6 @@ const props = defineProps({
 })
 const url = computed(() => `${props.name}`.trim())
 const customIcon = defineAsyncComponent(
-  () => import(`@/assets/svg/${url.value}.svg`))
-</script>
\ No newline at end of file
+  () => import(`@/assets/svg/${url.value}.svg`),
+)
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4dbb864..de9e7e4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,4 @@
-import svgLoader from 'vite-svg-loader'
+import svgLoader from "vite-svg-loader"
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -6,104 +6,104 @@ export default defineNuxtConfig({
   app: {
     head: {
       htmlAttrs: {
-        lang: 'en-US',
+        lang: "en-US",
       },
-      title: 'Wit/Stake: Secure the network, earn rewards.',
+      title: "Wit/Stake: Secure the network, earn rewards.",
       meta: [
-        { charset: 'utf-8' },
+        { charset: "utf-8" },
         {
-          name: 'viewport',
-          content: 'viewport-fit=cover, width=device-width, initial-scale=1',
+          name: "viewport",
+          content: "viewport-fit=cover, width=device-width, initial-scale=1",
         },
         {
-          hid: 'title',
-          name: 'title',
-          content: 'Wit/Stake: Secure the network, earn rewards.',
+          hid: "title",
+          name: "title",
+          content: "Wit/Stake: Secure the network, earn rewards.",
         },
         {
-          hid: 'description',
-          name: 'description',
+          hid: "description",
+          name: "description",
           content:
-            'Track live Stake Volume and Leaderboard rankings in real time. See total wagered amounts and top $WIT stakers at a glance with accurate, up-to-date data. Stay ahead of the game!',
+            "Track live Stake Volume and Leaderboard rankings in real time. See total wagered amounts and top $WIT stakers at a glance with accurate, up-to-date data. Stay ahead of the game!",
         },
         {
-          hid: 'twitter:title',
-          name: 'twitter:title',
-          content: 'Wit/Stake: Secure the network, earn rewards.',
+          hid: "twitter:title",
+          name: "twitter:title",
+          content: "Wit/Stake: Secure the network, earn rewards.",
         },
         {
-          hid: 'twitter:description',
-          name: 'twitter:description',
+          hid: "twitter:description",
+          name: "twitter:description",
           content:
-            'Track live Stake Volume and Leaderboard rankings in real time. See total wagered amounts and top $WIT stakers at a glance with accurate, up-to-date data. Stay ahead of the game!',
+            "Track live Stake Volume and Leaderboard rankings in real time. See total wagered amounts and top $WIT stakers at a glance with accurate, up-to-date data. Stay ahead of the game!",
         },
         {
-          hid: 'twitter:image',
-          name: 'twitter:image',
-          content: '/meta-image.png',
+          hid: "twitter:image",
+          name: "twitter:image",
+          content: "/meta-image.png",
         },
         {
-          hid: 'twitter:image:alt',
-          name: 'twitter:image:alt',
-          content: 'Wit/Oracle',
+          hid: "twitter:image:alt",
+          name: "twitter:image:alt",
+          content: "Wit/Oracle",
         },
         {
-          hid: 'og:title',
-          property: 'og:title',
-          content: 'Wit/Stake: Secure the network, earn rewards.',
+          hid: "og:title",
+          property: "og:title",
+          content: "Wit/Stake: Secure the network, earn rewards.",
         },
         {
-          hid: 'og:description',
-          property: 'og:description',
+          hid: "og:description",
+          property: "og:description",
           content:
-            'Track live Stake Volume and Leaderboard rankings in real time. See total wagered amounts and top $WIT stakers at a glance with accurate, up-to-date data. Stay ahead of the game!',
+            "Track live Stake Volume and Leaderboard rankings in real time. See total wagered amounts and top $WIT stakers at a glance with accurate, up-to-date data. Stay ahead of the game!",
         },
         {
-          hid: 'og:image',
-          property: 'og:image',
-          content: '/meta-image.png',
+          hid: "og:image",
+          property: "og:image",
+          content: "/meta-image.png",
         },
         {
-          hid: 'og:image:secure_url',
-          property: 'og:image:secure_url',
-          content: '/meta-image.png',
+          hid: "og:image:secure_url",
+          property: "og:image:secure_url",
+          content: "/meta-image.png",
         },
         {
-          hid: 'og:image:alt',
-          property: 'og:image:alt',
-          content: 'Wit/Oracle',
+          hid: "og:image:alt",
+          property: "og:image:alt",
+          content: "Wit/Oracle",
         },
       ],
       link: [
         {
-          rel: 'preload stylesheet',
-          href: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
-          as: 'style',
-          type: 'text/css',
+          rel: "preload stylesheet",
+          href: "https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
+          as: "style",
+          type: "text/css",
         },
-        { rel: 'apple-touch-icon', type: 'image/x-icon', href: '/favicon.ico' },
+        { rel: "apple-touch-icon", type: "image/x-icon", href: "/favicon.ico" },
         {
-          rel: 'icon',
-          sizes: '180x180',
-          href: '/apple-touch-icon.png',
-          type: 'image/png',
+          rel: "icon",
+          sizes: "180x180",
+          href: "/apple-touch-icon.png",
+          type: "image/png",
         },
         {
-          rel: 'icon',
-          sizes: '32x32',
-          href: '/favicon-32x32.png',
-          type: 'image/png',
+          rel: "icon",
+          sizes: "32x32",
+          href: "/favicon-32x32.png",
+          type: "image/png",
         },
         {
-          rel: 'icon',
-          sizes: '16x16',
-          href: '/favicon-16x16.png',
-          type: 'image/png',
+          rel: "icon",
+          sizes: "16x16",
+          href: "/favicon-16x16.png",
+          type: "image/png",
         },
-        { rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' },
-        { rel: 'manifest', href: '/site.webmanifest' },
-        { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '2D2C39' },
-        { rel: 'shortcut icon', href: '/favicon.ico' },
+        { rel: "icon", href: "/favicon.ico", type: "image/x-icon" },
+        { rel: "manifest", href: "/site.webmanifest" },
+        { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "2D2C39" },
+        { rel: "shortcut icon", href: "/favicon.ico" },
       ],
       script: [
         {
@@ -116,7 +116,7 @@ export default defineNuxtConfig({
             twq('config','ovifm');
             </script>
             <!-- End Twitter conversion tracking base code -->`,
-          type: 'text/javascript',
+          type: "text/javascript",
         },
       ],
     },
@@ -124,16 +124,14 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ["@nuxtjs/tailwindcss"],
   components: true,
-  css: [
-    '~/assets/styles/tailwind.css',
-  ],
+  css: ["~/assets/styles/tailwind.css"],
   vite: {
     plugins: [
       svgLoader({
         svgoConfig: {
           plugins: [
             {
-              name: 'preset-default',
+              name: "preset-default",
               params: {
                 overrides: {
                   removeViewBox: false,
@@ -145,5 +143,5 @@ export default defineNuxtConfig({
         },
       }),
     ],
-  }
+  },
 })
diff --git a/package.json b/package.json
index 73a7962..e9f1eb7 100644
--- a/package.json
+++ b/package.json
@@ -26,5 +26,6 @@
   },
   "devDependencies": {
     "vite-svg-loader": "^5.1.0"
-  }
+  },
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }
diff --git a/public/site.webmanifest b/public/site.webmanifest
index ccf313a..981d97f 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -18,4 +18,4 @@
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 8e5d8fb..2d51206 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,96 +1,96 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/components/**/*.{js,vue,ts}'],
+  content: ["./src/components/**/*.{js,vue,ts}"],
   theme: {
     colors: {
       white: {
-        50: '#ffffff',
-        100: '#efefef',
-        200: '#dcdcdc',
-        300: '#bdbdbd',
-        400: '#989898',
-        500: '#7c7c7c',
-        600: '#656565',
-        700: '#525252',
-        800: '#464646',
-        900: '#3d3d3d',
-        950: '#292929'
+        50: "#ffffff",
+        100: "#efefef",
+        200: "#dcdcdc",
+        300: "#bdbdbd",
+        400: "#989898",
+        500: "#7c7c7c",
+        600: "#656565",
+        700: "#525252",
+        800: "#464646",
+        900: "#3d3d3d",
+        950: "#292929",
       },
       gray: {
-        50: '#f6f6f6',
-        100: '#e7e7e7',
-        200: '#d1d1d1',
-        300: '#b0b0b0',
-        400: '#888888',
-        500: '#707070',
-        600: '#5d5d5d',
-        700: '#4f4f4f',
-        800: '#454545',
-        900: '#3d3d3d',
-        950: '#262626'
+        50: "#f6f6f6",
+        100: "#e7e7e7",
+        200: "#d1d1d1",
+        300: "#b0b0b0",
+        400: "#888888",
+        500: "#707070",
+        600: "#5d5d5d",
+        700: "#4f4f4f",
+        800: "#454545",
+        900: "#3d3d3d",
+        950: "#262626",
       },
       black: {
-        50: '#f6f6f6',
-        100: '#e7e7e7',
-        200: '#d1d1d1',
-        300: '#b0b0b0',
-        400: '#888888',
-        500: '#6d6d6d',
-        600: '#5d5d5d',
-        700: '#4f4f4f',
-        800: '#454545',
-        900: '#3d3d3d',
-        950: '#232323'
+        50: "#f6f6f6",
+        100: "#e7e7e7",
+        200: "#d1d1d1",
+        300: "#b0b0b0",
+        400: "#888888",
+        500: "#6d6d6d",
+        600: "#5d5d5d",
+        700: "#4f4f4f",
+        800: "#454545",
+        900: "#3d3d3d",
+        950: "#232323",
       },
-      'wit-blue': {
-        50: '#ebfffe',
-        100: '#cefffe',
-        200: '#a2feff',
-        300: '#63fafd',
-        400: '#1cecf4',
-        500: '#00e2ed',
-        600: '#03a6b7',
-        700: '#0a8494',
-        800: '#126978',
-        900: '#145765',
-        950: '#063a46'
+      "wit-blue": {
+        50: "#ebfffe",
+        100: "#cefffe",
+        200: "#a2feff",
+        300: "#63fafd",
+        400: "#1cecf4",
+        500: "#00e2ed",
+        600: "#03a6b7",
+        700: "#0a8494",
+        800: "#126978",
+        900: "#145765",
+        950: "#063a46",
       },
       red: {
-        50: '#df4b4b',
-        950: '#df4b4b23',
+        50: "#df4b4b",
+        950: "#df4b4b23",
       },
     },
     extend: {
       fontFamily: {
-        title: ['Outfit', 'sans-serif']
-      }
+        title: ["Outfit", "sans-serif"],
+      },
     },
     screens: {
-      lg: { max: '1600px' },
-      md: { max: '1200px' },
-      sm: { max: '706px' },
-      xs: { max: '350px' }
+      lg: { max: "1600px" },
+      md: { max: "1200px" },
+      sm: { max: "706px" },
+      xs: { max: "350px" },
     },
     spacing: {
-      xs: '4px',
-      sm: '8px',
-      md: '16px',
-      'md-alt': '24px',
-      lg: '32px',
-      xl: '40px',
-      '2xl': '64px',
-      '3xl': '80px',
-      'sm-x-screen': '15vw',
-      'md-x-screen': '50vw',
-      '2-md-x-screen': '70vw',
-      'lg-x-screen': '90vw',
-      'xl-x-screen': '100vw',
-      'sm-y-screen': '15vh',
-      'md-y-screen': '50vh',
-      '2-md-y-screen': '70vh',
-      'lg-y-screen': '90vh',
-      'xl-y-screen': '100vh'
+      xs: "4px",
+      sm: "8px",
+      md: "16px",
+      "md-alt": "24px",
+      lg: "32px",
+      xl: "40px",
+      "2xl": "64px",
+      "3xl": "80px",
+      "sm-x-screen": "15vw",
+      "md-x-screen": "50vw",
+      "2-md-x-screen": "70vw",
+      "lg-x-screen": "90vw",
+      "xl-x-screen": "100vw",
+      "sm-y-screen": "15vh",
+      "md-y-screen": "50vh",
+      "2-md-y-screen": "70vh",
+      "lg-y-screen": "90vh",
+      "xl-y-screen": "100vh",
     },
   },
-  plugins: []
+  plugins: [],
 }
diff --git a/utils/formatNumber.js b/utils/formatNumber.js
index 38cb490..cd94255 100644
--- a/utils/formatNumber.js
+++ b/utils/formatNumber.js
@@ -1,3 +1,3 @@
 export const formatNumber = (num) => {
   return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-}
\ No newline at end of file
+}