diff --git a/assets/.DS_Store b/assets/.DS_Store
index c7db539..98f3246 100644
Binary files a/assets/.DS_Store and b/assets/.DS_Store differ
diff --git a/assets/img/Investor Pitchdeck Q1 2025.pdf b/assets/img/Investor Pitchdeck Q1 2025.pdf
new file mode 100644
index 0000000..01d39d8
Binary files /dev/null and b/assets/img/Investor Pitchdeck Q1 2025.pdf differ
diff --git a/package.json b/package.json
index 1a6c933..5b01434 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
+    "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.26",
     "vue-router": "^4.3.2"
   },
diff --git a/pages/teerdays.vue b/pages/teerdays.vue
index 370a7a5..19be082 100644
--- a/pages/teerdays.vue
+++ b/pages/teerdays.vue
@@ -1,131 +1,686 @@
 <template>
-  <div class="mt-3 text-center sm:mt-5">
-    <span as="h3" class="text-base font-semibold leading-6 text-white"
-      >TEERdays
-    </span>
-
-    <div class="mt-2">
-      <p class="text-sm text-gray-400 text-justify">blabla</p>
-      <div class="mt-2" v-if="accounts.length < 1">
-        <button @click="connect">Connect!</button><br />
-
-        You need some signer extension to use this page. Please make sure to
+  <div class="text-center py-4 lg:px-4">
+    <div
+      class="p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
+      role="alert"
+    >
+      <span
+        class="flex rounded-full incognitee-blue uppercase px-2 py-1 text-xs font-bold mr-3"
+        >Note</span
+      >
+      <span class="text-xs mr-2 text-left flex-auto"
+        >You need some signer extension to use this page. Please make sure to
         enable your extension and reload the page in case the connect button
-        doesn't work.
-
-        <br />
-        These are some options:
-        <li>
-          <a href="https://polkadot.js.org/extension/">polkadot.js extension</a>
-        </li>
-        <li>
-          <a href="https://talisman.xyz/download">talisman</a>
-        </li>
-        <li>
-          <a href="https://novawallet.io/">nova wallet</a>
-        </li>
-        <li>
-          <a href="https://www.subwallet.app/">subwallet</a>
-        </li>
-        others may work too.
-      </div>
-      <div v-if="accounts.length" class="mt-2">
-        <select v-model="selectedAccount">
-          <option
-            v-for="account in accounts"
-            :key="account.address"
-            :value="account.address"
+        doesn't work.</span
+      >
+    </div>
+  </div>
+
+  <div class="py-24 sm:py-32 container">
+    <div
+      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+      aria-hidden="true"
+    >
+      <div
+        class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+        style="
+          clip-path: polygon(
+            74.1% 44.1%,
+            100% 61.6%,
+            97.5% 26.9%,
+            85.5% 0.1%,
+            80.7% 2%,
+            72.5% 32.5%,
+            60.2% 62.4%,
+            52.4% 68.1%,
+            47.5% 58.3%,
+            45.2% 34.5%,
+            27.5% 76.7%,
+            0.1% 64.9%,
+            17.9% 100%,
+            27.6% 76.8%,
+            76.1% 97.7%,
+            74.1% 44.1%
+          );
+        "
+      />
+    </div>
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div
+        class="grid grid-cols-1 items-center gap-x-8 gap-y-16 lg:grid-cols-2"
+      >
+        <div class="mx-auto w-full max-w-xl lg:mx-0">
+          <h2
+            class="title text-4xl font-bold tracking-tight text-white sm:text-6xl"
+          >
+            Incognitee TEERdays
+          </h2>
+          <p class="mt-6 text-gray-300">
+            Collect TEERdays now and get the pole position for the Incognitee
+            Go-Live. Collect TEERdays now and get the pole position for the
+            Incognitee Go-Live. Collect TEERdays now and get the pole position
+            for the Incognitee Go-Live. Collect TEERdays now and get the pole
+            position for the Incognitee Go-Live.​
+          </p>
+          <div
+            class="mx-auto mt-10 grid max-w-lg grid-cols-4 gap-x-3 gap-y-3 sm:max-w-xl sm:grid-cols-4 sm:gap-x-3 lg:mx-0 lg:max-w-none lg:grid-cols-4"
           >
-            {{ account.meta.name }}
-          </option>
-        </select>
-        <div>
-          <p>Selected account: {{ accountStore.getAddress }}</p>
+            <a href="https://talisman.xyz/download"
+              ><img
+                class="col-span-1 max-h-10 w-full object-contain lg:col-span-1"
+                src="/img/index/talisman-logo.svg"
+                alt="talisman"
+            /></a>
+            <a href="https://novawallet.io/"
+              ><img
+                class="col-span-1 max-h-7 w-full object-contain lg:col-span-1"
+                src="/img/index/nova-wallet-logo.svg"
+                alt="nova wallet"
+            /></a>
+            <a href="https://www.subwallet.app/"
+              ><img
+                class="col-span-1 max-h-10 w-full object-contain lg:col-span-1"
+                src="/img/index/sub-wallet-logo.svg"
+                alt="sub wallet"
+            /></a>
+            <a href="https://polkadot.js.org/extension/"
+              ><img
+                class="col-span-1 max-h-7 w-full object-contain lg:col-span-1"
+                src="/img/index/polkadotjs-logo.svg"
+                alt="polkajs"
+            /></a>
+          </div>
+          <div v-if="accounts.length < 1" class="mt-10 flex">
+            <button
+              @click="connect"
+              class="incognitee-bg rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+            >
+              Connect Wallet
+            </button>
+          </div>
         </div>
-        <div v-if="selectedAccount">
-          <div v-if="isFetchingTeerBalance" class="spinner"></div>
-          <div class="text-2xl font-semibold" v-else>
-            <div>
-              free: {{ accountStore.getHumanFree }}
-              <span class="text-sm font-semibold">TEER</span>
-            </div>
-            <div>
-              reserved: {{ accountStore.getHumanReserved }}
-              <span class="text-sm font-semibold">TEER</span>
-            </div>
-            <div>
-              frozen: {{ accountStore.getHumanFrozen }}
-              <span class="text-sm font-semibold">TEER</span>
+      </div>
+    </div>
+
+    <div v-if="accounts.length" class="py-12 sm:py-16">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <h1
+            class="title mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
+          >
+            Wallet Details
+          </h1>
+
+          <div class="mt-5">
+            <div
+              class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 my-10"
+            >
+              <div class="sm:col-span-3">
+                <label
+                  for="account.address"
+                  class="text-sm font-medium leading-6 text-gray-300"
+                  >Select your account</label
+                >
+                <div class="mt-2">
+                  <select
+                    v-model="selectedAccount"
+                    id="account.address"
+                    name="account.address"
+                    placeholder="account.address"
+                    class="w-full rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
+                  >
+                    <option
+                      v-for="account in accounts"
+                      :key="account.address"
+                      :value="account.address"
+                    >
+                      {{ account.meta.name }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label
+                  for="last-name"
+                  class="text-sm font-medium leading-6 text-gray-300"
+                  >Selected Address</label
+                >
+                <div class="mt-2">
+                  <span class="text-sm text-gray-300">{{
+                    accountStore.getAddress
+                  }}</span>
+                </div>
+              </div>
             </div>
-            <div>
-              current bond: {{ currentBond ? currentBond.getTeerBonded() : 0 }}
-              <span class="text-sm font-semibold">TEER</span>
+
+            <div v-if="selectedAccount">
+              <div v-if="isFetchingTeerBalance">
+                <div
+                  class="spinner border-t-transparent border-solid animate-spin rounded-full border-gray-400 border-4 h-8 w-8"
+                ></div>
+              </div>
+
+              <div v-else class="container mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+                  <div>
+                    <div
+                      class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-5"
+                    >
+                      <dl class="flex flex-wrap">
+                        <div
+                          class="w-full flex flex-col md:flex-row justify-between px-6 pt-6"
+                        >
+                          <div class="flex-auto mb-4 md:mb-0">
+                            <dt
+                              class="text-sm font-semibold leading-6 text-gray-300"
+                            >
+                              Current bond
+                            </dt>
+                            <dd
+                              class="mt-1 text-base font-semibold leading-6 text-white"
+                            >
+                              {{
+                                currentBond ? currentBond.getTeerBonded() : 0
+                              }}
+                              TEER
+                            </dd>
+                          </div>
+
+                          <div class="flex-auto text-left md:text-right">
+                            <dt
+                              class="text-sm font-semibold leading-6 text-gray-300"
+                            >
+                              Accumulated TEERdays
+                            </dt>
+                            <dd
+                              class="mt-1 text-base font-semibold leading-6 text-white"
+                            >
+                              {{ currentBond ? currentBond.getTeerDays() : 0 }}
+                              TEERdays
+                            </dd>
+                          </div>
+                        </div>
+
+                        <div
+                          class="mt-6 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-6"
+                        >
+                          <dt
+                            class="text-sm font-semibold leading-6 text-gray-300"
+                          >
+                            Reserved
+                          </dt>
+                          <dd class="text-sm leading-6 text-gray-400">
+                            <time datetime="2023-01-31"
+                              >{{ accountStore.getHumanReserved }} TEER</time
+                            >
+                          </dd>
+                        </div>
+
+                        <div class="flex w-full flex-none gap-x-4 px-6">
+                          <dt
+                            class="text-sm font-semibold leading-6 text-gray-300"
+                          >
+                            Frozen
+                          </dt>
+                          <dd class="text-sm leading-6 text-gray-400">
+                            <time datetime="2023-01-31"
+                              >{{ accountStore.getHumanFrozen }} TEER</time
+                            >
+                          </dd>
+                        </div>
+
+                        <div class="flex w-full flex-none gap-x-4 px-6">
+                          <dt
+                            class="text-sm font-semibold leading-6 text-gray-300"
+                          >
+                            Free
+                          </dt>
+                          <dd class="text-sm leading-6 text-gray-400">
+                            <time datetime="2023-01-31"
+                              >{{ accountStore.getHumanFree }} TEER</time
+                            >
+                          </dd>
+                        </div>
+
+                        <div
+                          v-if="pendingUnlock"
+                          class="w-full flex justify-between flex-col md:flex-row px-6 pt-6"
+                        >
+                          <div class="flex-auto mb-4 md:mb-0">
+                            <div class="flex w-full flex-none gap-x-4">
+                              <dt
+                                class="text-sm font-semibold leading-6 text-gray-300"
+                              >
+                                Pending unlock
+                              </dt>
+                              <dd class="text-sm leading-6 text-gray-400">
+                                <time datetime="2023-01-31"
+                                  >{{
+                                    pendingUnlock
+                                      ? pendingUnlock.getTeerToUnlock()
+                                      : 0
+                                  }}
+                                  TEER</time
+                                >
+                              </dd>
+                            </div>
+
+                            <div class="flex w-full flex-none gap-x-4">
+                              <dt
+                                class="text-sm font-semibold leading-6 text-gray-300"
+                              >
+                                Unlocked on
+                              </dt>
+                              <dd class="text-sm leading-6 text-gray-400">
+                                <time datetime="2023-01-31">{{
+                                  pendingUnlock?.getDueDateStr()
+                                }}</time>
+                              </dd>
+                            </div>
+                          </div>
+
+                          <div
+                            v-if="pendingUnlock?.canWithdraw()"
+                            class="flex-auto text-left md:text-right gap-x-4"
+                          >
+                            <button
+                              @click="withdrawUnbonded"
+                              class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white btn btn_gradient"
+                            >
+                              Withdraw!
+                            </button>
+                          </div>
+                        </div>
+                      </dl>
+                    </div>
+                  </div>
+
+                  <div>
+                    <div>
+                      <div class="text-sm font-medium leading-6 text-gray-300">
+                        Bond TEER to accumulate TEERdays
+                      </div>
+                      <div
+                        v-if="accountStore.getTransferrable < Math.pow(10, 9)"
+                        class="text-sm text-red-500"
+                      >
+                        Not enough transferrable TEER. Please get free test TEER
+                        at our
+                        <a
+                          :href="
+                            'https://substratefaucet.xyz/integritee/' +
+                            accountStore.getAddress
+                          "
+                          target="_blank"
+                          class="text-indigo-500 underline"
+                          >testnet faucet</a
+                        >.
+                      </div>
+
+                      <form @submit.prevent="bondAmount" class="space-y-2">
+                        <div class="flex flex-col sm:flex-row sm:space-x-2">
+                          <input
+                            type="number"
+                            v-model="amountToBond"
+                            placeholder="Enter amount to bond"
+                            required
+                            class="flex-grow rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
+                          />
+                          <button
+                            type="submit"
+                            class="w-full sm:w-40 mt-5 sm:mt-0 inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 btn btn_gradient"
+                          >
+                            Bond!
+                          </button>
+                        </div>
+                      </form>
+                    </div>
+
+                    <div class="form-container mt-8" v-if="currentBond">
+                      <div class="text-sm font-medium leading-6 text-gray-300">
+                        Unbond TEER
+                      </div>
+
+                      <div v-if="pendingUnlock" class="text-sm text-red-500">
+                        Not possible until pending unlock expired and withdrawn.
+                      </div>
+
+                      <div v-else class="space-y-2">
+                        <form @submit.prevent="unbondAmount" class="space-y-2">
+                          <div class="flex flex-col sm:flex-row sm:space-x-2">
+                            <input
+                              type="number"
+                              v-model="amountToUnbond"
+                              placeholder="Enter amount to unbond"
+                              required
+                              class="flex-grow rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
+                            />
+                            <button
+                              type="submit"
+                              class="w-full sm:w-40 mt-5 sm:mt-0 inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 btn btn_gradient"
+                            >
+                              Unbond!
+                            </button>
+                          </div>
+                        </form>
+                        <p
+                          class="mt-2 text-xs text-gray-500"
+                          id="email-description"
+                        >
+                          Unbonded TEER will be locked for 7 days.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-            <div v-if="pendingUnlock">
-              pending unlock:
-              {{ pendingUnlock ? pendingUnlock.getTeerToUnlock() : 0 }}
-              <span class="text-sm font-semibold">TEER</span>
-              unlocked on {{ pendingUnlock?.getDueDateStr() }}
-              <div
-                class="form-container mt-2"
-                v-if="pendingUnlock?.canWithdraw()"
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="py-10">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <h1
+            class="title mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl"
+          >
+            TEERdays Statistics
+          </h1>
+          <dl
+            class="mt-10 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-3"
+          >
+            <div
+              v-for="stat in stats"
+              :key="stat.id"
+              class="flex flex-col bg-white/5 p-8"
+            >
+              <dt class="text-sm font-semibold leading-6 text-gray-300">
+                {{ stat.name }}
+              </dt>
+              <dd
+                class="order-first text-3xl font-semibold tracking-tight text-white"
               >
-                <button @click="withdrawUnbonded">Withdraw!</button>
-              </div>
+                {{ stat.value }}
+              </dd>
             </div>
-            <div>
-              accumulated TEERdays:
-              {{ currentBond ? currentBond.getTeerDays() : 0 }}
-              <span class="text-sm font-semibold">TEERdays</span>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0"
+    >
+      <div
+        class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10"
+      >
+        <div
+          class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+        >
+          <div class="lg:pr-4">
+            <div class="lg:max-w-lg">
+              <h1
+                class="title mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl"
+              >
+                TEERdays Intro​
+              </h1>
+              <p class="mt-6 text-gray-300">
+                By bonding your TEER now, you can accumulate TEERdays for the
+                launch of Incognitee. TEERdays are calculated by the amount of
+                TEER * with the number of days bonded. You can unbond your TEER
+                anytime within 7 days, but you will lose 90%-100% of the
+                accumulated TEERdays as a penalty. During the unlock period,
+                you're not accumulating TEERdays. TEERdays are non-transferable.
+                Start now to get the best position for the Incognitee launch. ​
+              </p>
             </div>
           </div>
-          <div class="form-container mt-8">
-            bond TEER to accumulate TEERdays:
-            <div v-if="accountStore.getTransferrable < Math.pow(10, 9)">
-              not enough transferrable TEER. Please get free test TEER at our
-              <a
-                :href="
-                  'https://substratefaucet.xyz/integritee/' +
-                  accountStore.getAddress
-                "
-                target="_blank"
-                >testnet faucet</a
+        </div>
+
+        <div
+          class="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
+        >
+          <svg
+            viewBox="0 0 366 729"
+            role="img"
+            class="mx-auto w-[22.875rem] max-w-full drop-shadow-xl"
+          >
+            <defs>
+              <clipPath id="2ade4387-9c63-4fc4-b754-10e687a0d332">
+                <rect width="316" height="684" rx="36" />
+              </clipPath>
+            </defs>
+            <path
+              fill="#4B5563"
+              d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
+            />
+            <path
+              fill="#343E4E"
+              d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
+            />
+            <foreignObject
+              width="316"
+              height="684"
+              transform="translate(24 24)"
+              clip-path="url(#2ade4387-9c63-4fc4-b754-10e687a0d332)"
+            >
+              <img
+                src="https://tailwindui.com/img/component-images/mobile-app-screenshot.png"
+                alt=""
+              />
+            </foreignObject>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="relative isolate overflow-hidden px-6 py-5 sm:py-5 lg:overflow-visible lg:px-0"
+    >
+      <div
+        class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10"
+      >
+        <!-- Text on the Right -->
+        <div class="lg:pr-4">
+          <div class="lg:max-w-lg">
+            <h1
+              class="title mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl"
+            >
+              Why collect TEERdays?​
+            </h1>
+            <p class="mt-6 text-gray-300">
+              TEERdays can be used to increase your revenue share for the launch
+              of Incognitee on Polkadot/Kusama and will also increase your
+              governance voting power for future decisions related to
+              Incognitee. ​
+            </p>
+          </div>
+        </div>
+        <!-- Image on the Left -->
+        <div
+          class="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-1 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
+        >
+          <img
+            class="w-[48rem] max-w-none rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+            src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="relative isolate overflow-hidden py-20 lg:overflow-visible lg:px-0"
+    >
+      <div
+        class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10"
+      >
+        <div
+          class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+        >
+          <div class="lg:pr-4">
+            <div class="lg:max-w-lg">
+              <h1
+                class="title mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl"
               >
+                How to participate?​​
+              </h1>
+
+              <p class="mt-6 text-gray-300">
+                1. First you need to possess some TEER. Grab them at one of the
+                avenues like Kraken, Gate or Basilisk. ​<br />
+
+                2. Download the Polkadot JS browser Extension and connect your
+                wallet. ​​<br />
+
+                3. Transfer TEER to your wallet. ​​<br />
+
+                4. Bond your TEER here ( link to wallet)​​<br />
+
+                5. Start automatically collecting TEERdays​​<br />
+
+                6. Refer a friend ​
+              </p>
             </div>
-            <form @submit.prevent="bondAmount">
-              <input
-                type="number"
-                v-model="amountToBond"
-                placeholder="Enter amount to bond"
-                required
-              />
-              TEER<br />
-              <button type="submit">Bond!</button>
-            </form>
           </div>
-          <div class="form-container mt-8" v-if="currentBond">
-            unbond TEER:
-            <div v-if="pendingUnlock">
-              not possible until pending unlock expired and withdrawn
+        </div>
+        <div
+          class="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
+        >
+          <img
+            class="w-[48rem] max-w-none rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+            src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="mx-auto max-w-7xl">
+      <div class="px-4 sm:px-6 lg:px-8">
+        <div class="mt-5 flow-root">
+          <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div
+              class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
+            >
+              <h1
+                class="title text-3xl font-bold tracking-tight text-white sm:text-4xl"
+              >
+                Leaderboard​​
+              </h1>
+              <table class="min-w-full divide-y divide-gray-700 mt-10">
+                <thead>
+                  <tr>
+                    <th
+                      scope="col"
+                      class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-0"
+                    >
+                      Rank
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-white"
+                    >
+                      TEERdays
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-white"
+                    >
+                      Wallet
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-white"
+                    >
+                      TEER bonded
+                    </th>
+                    <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
+                      <span class="sr-only">Edit</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-800">
+                  <tr v-for="leaderboard in leaderboard">
+                    <td
+                      class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-white sm:pl-0"
+                    >
+                      {{ leaderboard.rank }}
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-300"
+                    >
+                      {{ leaderboard.teerdays }}
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-300"
+                    >
+                      {{ leaderboard.wallet }}
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-300"
+                    >
+                      {{ leaderboard.teerbonded }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <div v-else>
-              <p>unbonded TEER will be locked for 7 days</p>
-              <form @submit.prevent="unbondAmount">
-                <input
-                  type="number"
-                  v-model="amountToUnbond"
-                  placeholder="Enter amount to unbond"
-                  required
-                />
-                TEER<br />
-                <button type="submit">Unbond!</button>
-              </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0"
+    >
+      <div
+        class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10"
+      >
+        <div
+          class="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
+        >
+          <img
+            class="w-[48rem] max-w-none rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+            src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+            alt=""
+          />
+        </div>
+        <div
+          class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+        >
+          <div class="lg:pr-4">
+            <div class="lg:max-w-lg">
+              <h1
+                class="title mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl"
+              >
+                Rules​​
+              </h1>
+              <ul class="list-disc list-outside text-gray-300 mt-6">
+                <li>You can bond as many TEER as you like​</li>
+                <li>You can unbond any time with a 7-day unbonding period​</li>
+                <li>
+                  You will not accumulate any TEERdays during the unbonding
+                  period​
+                </li>
+                <li>
+                  You will lose a % of your TEERdays if you unbond your TEER pro
+                  rata of the unbonded amount​
+                </li>
+                <li>TEERdays are non-transferable​</li>
+                <li>
+                  TEERdays are calculated as follows:​<br />
+                  Amount of TEER * with the number of days bonded = TEERdays​<br />
+                  Example: 20 TEER * 7 days = 140 TEERdays​
+                </li>
+              </ul>
             </div>
           </div>
         </div>
       </div>
-      <!-- this is necessary to avoid the footer overlapping the text -->
-      <br /><br /><br /><br /><br /><br /><br />
     </div>
   </div>
 </template>
@@ -139,7 +694,6 @@ import {
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import { onMounted, ref, watch } from "vue";
 import { useAccount } from "@/store/teerAccount.ts";
-import BN from "bn.js";
 import { useInterval } from "@vueuse/core";
 
 const accountStore = useAccount();
@@ -403,35 +957,93 @@ class PendingUnlock {
     return this.due < new Date();
   }
 }
+
+const stats = [
+  { id: 1, name: "TEERday holder", value: "400" },
+  { id: 2, name: "Total TEER bonded​", value: "1000" },
+  { id: 4, name: "Total TEERdays ​active​", value: "100 000" },
+];
+
+import { ref } from "vue";
+const leaderboard = [
+  {
+    rank: "1",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "2",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "3",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "4",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "5",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "6",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "7",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  {
+    rank: "8",
+    teerdays: "12345",
+    wallet: "x0sdkgfskdfhskjdflshdfkjsdkf",
+    teerbonded: "12345",
+  },
+  // More people...
+];
+
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { ChevronDownIcon } from "@heroicons/vue/20/solid";
 </script>
 
 <style scoped>
-h1 {
-  font-size: 2em; /* Adjust as needed */
-  font-weight: bold; /* Makes the text bold */
-  color: #999; /* Change color as needed */
-  text-align: center; /* Centers the text */
-  margin-bottom: 20px; /* Adds space below the heading */
+.incognitee-bg {
+  background: linear-gradient(84.58deg, #24ad7c, #1845b9);
 }
 
-p {
-  padding: 10px 20px; /* Adds 10px padding top and bottom, 20px padding left and right */
-  line-height: 1.5; /* Increases the space between lines of text */
-  color: #fff; /* Change color as needed */
-  text-align: justify;
+.incognitee-blue {
+  background: #1845b9;
 }
 
-a {
-  color: #99f; /* Change color as needed */
+.incognitee-green {
+  background: #24ad7c;
 }
 
-select {
-  background-color: black;
-  color: white;
+/* Hide the arrows for number input fields */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-input {
-  background-color: black;
-  color: white;
+input[type="number"] {
+  -moz-appearance: textfield;
+  /* Hides the arrows in Firefox */
 }
 </style>
diff --git a/plugins/qrcode-reader.ts b/plugins/qrcode-reader.ts
index 59a087a..3d939eb 100644
--- a/plugins/qrcode-reader.ts
+++ b/plugins/qrcode-reader.ts
@@ -1,4 +1,6 @@
-import Vue from "vue";
+import { defineNuxtPlugin } from "#app";
 import { QrcodeStream } from "vue-qrcode-reader";
 
-Vue.component("qrcode-stream", QrcodeStream);
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component("qrcode-stream", QrcodeStream);
+});
diff --git a/public/img/.DS_Store b/public/img/.DS_Store
index 5b6b4ce..7ca4984 100644
Binary files a/public/img/.DS_Store and b/public/img/.DS_Store differ
diff --git a/public/img/index/TEERdays-icon-black.svg b/public/img/index/TEERdays-icon-black.svg
new file mode 100644
index 0000000..b75797b
--- /dev/null
+++ b/public/img/index/TEERdays-icon-black.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 270">
+  <g id="Ebene_1-2" data-name="Ebene_1">
+    <g>
+      <path d="M329.15,132.01c-24.44-42.79-48.76-85.64-73.02-128.53-1.41-2.5-3.01-3.39-5.87-3.39C176.74.14,103.23.11,29.73,0c-2.73,0-4.16.85-5.4,3.2-3.54,6.73-7.34,13.33-11.01,19.99-4.36,7.91-8.69,15.83-13.32,24.26,1.62.09,2.4.18,3.18.17,24.28-.08,48.56-.2,72.84-.25,47.56-.1,95.13-.1,142.69-.33,5.04-.02,8.03,1.32,10.6,5.98,14.38,26.05,29.14,51.88,43.86,77.74,1.56,2.74,1.63,4.93.07,7.77-14.69,26.8-29.29,53.65-43.72,80.59-1.66,3.1-3.47,4.16-6.9,4.13-20.29-.14-40.58,0-60.87-.15-3.26-.03-5.08.96-6.65,3.81-7.4,13.47-15.03,26.82-22.55,40.24-.41.74-.48,1.67-.68,2.4,3.15,0,5.97,0,8.78,0,32.93.05,65.87-.4,98.78.43,10.66.27,16.24-2.74,21.48-12.26,21.89-39.82,44.87-79.05,67.47-118.49,1.34-2.34,2.44-4.28.76-7.23Z"/>
+      <path d="M220.74,79.77c-.68-1.27-3.19-2.25-4.85-2.25-48.22-.12-96.44-.13-144.66.04-1.82,0-4.35,1.51-5.33,3.07-3.77,6.02-7.05,12.33-10.48,18.56-4.12,7.47-8.21,14.96-12.51,22.78h199.73c-7.43-14.43-14.53-28.38-21.9-42.19Z"/>
+      <path d="M169.28,144.12c-1.33-.16-1.94-.29-2.55-.29-15.96.03-31.93.25-47.89,0-4.23-.06-6.43,1.2-8.4,4.94-20.66,39.17-41.52,78.23-62.3,117.34-.57,1.07-.9,2.27-1.45,3.67,16.36,0,32.16-.2,47.94.12,5.06.1,7.65-1.73,9.96-6.07,19.22-35.98,38.68-71.84,58.08-107.74,2.09-3.87,4.25-7.72,6.6-11.98Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/index/TEERdays-icon-gradient.svg b/public/img/index/TEERdays-icon-gradient.svg
new file mode 100644
index 0000000..a14cc9f
--- /dev/null
+++ b/public/img/index/TEERdays-icon-gradient.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 270">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#Unbenannter_Verlauf_2);
+      }
+
+      .cls-2 {
+        fill: url(#Unbenannter_Verlauf_2-2);
+      }
+
+      .cls-3 {
+        fill: url(#Unbenannter_Verlauf_2-3);
+      }
+    </style>
+    <linearGradient id="Unbenannter_Verlauf_2" data-name="Unbenannter Verlauf 2" x1="0" y1="135" x2="330" y2="135" gradientUnits="userSpaceOnUse">
+      <stop offset=".09" stop-color="#24ad7c"/>
+      <stop offset="1" stop-color="#1845b9"/>
+    </linearGradient>
+    <linearGradient id="Unbenannter_Verlauf_2-2" data-name="Unbenannter Verlauf 2" x1="42.92" y1="99.7" x2="242.64" y2="99.7" xlink:href="#Unbenannter_Verlauf_2"/>
+    <linearGradient id="Unbenannter_Verlauf_2-3" data-name="Unbenannter Verlauf 2" x1="46.69" y1="206.87" x2="169.28" y2="206.87" xlink:href="#Unbenannter_Verlauf_2"/>
+  </defs>
+  <g id="Ebene_1-2" data-name="Ebene_1">
+    <g>
+      <path class="cls-1" d="M329.15,132.01c-24.44-42.79-48.76-85.64-73.02-128.53-1.41-2.5-3.01-3.39-5.87-3.39C176.74.14,103.23.11,29.73,0c-2.73,0-4.16.85-5.4,3.2-3.54,6.73-7.34,13.33-11.01,19.99-4.36,7.91-8.69,15.83-13.32,24.26,1.62.09,2.4.18,3.18.17,24.28-.08,48.56-.2,72.84-.25,47.56-.1,95.13-.1,142.69-.33,5.04-.02,8.03,1.32,10.6,5.98,14.38,26.05,29.14,51.88,43.86,77.74,1.56,2.74,1.63,4.93.07,7.77-14.69,26.8-29.29,53.65-43.72,80.59-1.66,3.1-3.47,4.16-6.9,4.13-20.29-.14-40.58,0-60.87-.15-3.26-.03-5.08.96-6.65,3.81-7.4,13.47-15.03,26.82-22.55,40.24-.41.74-.48,1.67-.68,2.4,3.15,0,5.97,0,8.78,0,32.93.05,65.87-.4,98.78.43,10.66.27,16.24-2.74,21.48-12.26,21.89-39.82,44.87-79.05,67.47-118.49,1.34-2.34,2.44-4.28.76-7.23Z"/>
+      <path class="cls-2" d="M220.74,79.77c-.68-1.27-3.19-2.25-4.85-2.25-48.22-.12-96.44-.13-144.66.04-1.82,0-4.35,1.51-5.33,3.07-3.77,6.02-7.05,12.33-10.48,18.56-4.12,7.47-8.21,14.96-12.51,22.78h199.73c-7.43-14.43-14.53-28.38-21.9-42.19Z"/>
+      <path class="cls-3" d="M169.28,144.12c-1.33-.16-1.94-.29-2.55-.29-15.96.03-31.93.25-47.89,0-4.23-.06-6.43,1.2-8.4,4.94-20.66,39.17-41.52,78.23-62.3,117.34-.57,1.07-.9,2.27-1.45,3.67,16.36,0,32.16-.2,47.94.12,5.06.1,7.65-1.73,9.96-6.07,19.22-35.98,38.68-71.84,58.08-107.74,2.09-3.87,4.25-7.72,6.6-11.98Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/index/TEERdays-icon-white.svg b/public/img/index/TEERdays-icon-white.svg
new file mode 100644
index 0000000..28f078c
--- /dev/null
+++ b/public/img/index/TEERdays-icon-white.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 270">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_1-2" data-name="Ebene_1">
+    <g>
+      <path class="cls-1" d="M329.15,132.01c-24.44-42.79-48.76-85.64-73.02-128.53-1.41-2.5-3.01-3.39-5.87-3.39C176.74.14,103.23.11,29.73,0c-2.73,0-4.16.85-5.4,3.2-3.54,6.73-7.34,13.33-11.01,19.99-4.36,7.91-8.69,15.83-13.32,24.26,1.62.09,2.4.18,3.18.17,24.28-.08,48.56-.2,72.84-.25,47.56-.1,95.13-.1,142.69-.33,5.04-.02,8.03,1.32,10.6,5.98,14.38,26.05,29.14,51.88,43.86,77.74,1.56,2.74,1.63,4.93.07,7.77-14.69,26.8-29.29,53.65-43.72,80.59-1.66,3.1-3.47,4.16-6.9,4.13-20.29-.14-40.58,0-60.87-.15-3.26-.03-5.08.96-6.65,3.81-7.4,13.47-15.03,26.82-22.55,40.24-.41.74-.48,1.67-.68,2.4,3.15,0,5.97,0,8.78,0,32.93.05,65.87-.4,98.78.43,10.66.27,16.24-2.74,21.48-12.26,21.89-39.82,44.87-79.05,67.47-118.49,1.34-2.34,2.44-4.28.76-7.23Z"/>
+      <path class="cls-1" d="M220.74,79.77c-.68-1.27-3.19-2.25-4.85-2.25-48.22-.12-96.44-.13-144.66.04-1.82,0-4.35,1.51-5.33,3.07-3.77,6.02-7.05,12.33-10.48,18.56-4.12,7.47-8.21,14.96-12.51,22.78h199.73c-7.43-14.43-14.53-28.38-21.9-42.19Z"/>
+      <path class="cls-1" d="M169.28,144.12c-1.33-.16-1.94-.29-2.55-.29-15.96.03-31.93.25-47.89,0-4.23-.06-6.43,1.2-8.4,4.94-20.66,39.17-41.52,78.23-62.3,117.34-.57,1.07-.9,2.27-1.45,3.67,16.36,0,32.16-.2,47.94.12,5.06.1,7.65-1.73,9.96-6.07,19.22-35.98,38.68-71.84,58.08-107.74,2.09-3.87,4.25-7.72,6.6-11.98Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/index/nova-wallet-logo.svg b/public/img/index/nova-wallet-logo.svg
new file mode 100644
index 0000000..3607732
--- /dev/null
+++ b/public/img/index/nova-wallet-logo.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 30">
+  <defs>
+    <style>
+      .cls-1 {
+        mask: url(#mask);
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: red;
+      }
+    </style>
+    <mask id="mask" x="0" y="0" width="30" height="30" maskUnits="userSpaceOnUse">
+      <g id="svg-1087215166_3282_b">
+        <path class="cls-3" d="M0,7.8C0,3.5,3.5,0,7.8,0h14.4c4.3,0,7.8,3.5,7.8,7.8v14.4c0,4.3-3.5,7.8-7.8,7.8H7.8c-4.3,0-7.8-3.5-7.8-7.8V7.8Z"/>
+      </g>
+    </mask>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="svg-1087215166_3282">
+      <g>
+        <g class="cls-1">
+          <path class="cls-2" d="M0,0h30v30H0V0Z"/>
+        </g>
+        <path class="cls-2" d="M25.3,15v.3c-1.7.3-5.3.9-7.1,1.6-.6.2-1.1.7-1.4,1.4-.7,1.8-1.3,5.4-1.6,7.1h-.5c-.3-1.7-.9-5.4-1.6-7.1-.3-.6-.8-1.1-1.4-1.4-1.8-.7-5.4-1.3-7.1-1.6v-.5c1.7-.3,5.3-.9,7.1-1.6.6-.2,1.1-.7,1.4-1.4.7-1.8,1.3-5.4,1.6-7.1h.5c.3,1.7.9,5.4,1.6,7.1.3.6.8,1.1,1.4,1.4,1.8.7,5.4,1.3,7.1,1.6,0,0,0,.3,0,.3ZM41.5,22.6l1.1,5.1,1.2-5.1h1.1l-1.5,6.1h-1.4l-1.1-5.1-1.1,5.1h-1.4l-1.6-6.1h1.1l1.2,5.1,1.1-5.1h1.4ZM51.2,28.7l-.4-1.2h-2.8l-.5,1.2h-1.1l2.3-6.1h1.2l2.3,6.1h-1.1,0ZM50.4,26.6l-1.1-3-1.1,3h2.2s0,0,0,0ZM54.8,22.6h1v5.2h3.2v.9h-4.2s0-6.1,0-6.1ZM61.7,22.6h1v5.2h3.2v.9h-4.2s0-6.1,0-6.1ZM68.6,22.6h4.2v.9h-3.2v1.7h2.9v.9h-2.9v1.7h3.2v.9h-4.2s0-6.1,0-6.1ZM76.9,28.7v-5.2h-1.9v-.9h4.9v.9h-1.9v5.2h-1ZM40.2,1.5l7.2,9.9V1.5h3.7v16h-3.5l-7.2-9.9v9.9h-3.7V1.5h3.5ZM61.2,1.3c1.2,0,2.3.2,3.3.6,1,.4,1.8.9,2.5,1.7.7.7,1.2,1.6,1.6,2.6.4,1,.6,2.1.6,3.3s-.2,2.3-.6,3.3c-.4,1-.9,1.9-1.6,2.6-.7.7-1.5,1.3-2.5,1.7-1,.4-2.1.6-3.3.6-1.2,0-2.4-.2-3.4-.6-1-.4-1.8-1-2.5-1.7-.7-.7-1.2-1.6-1.6-2.6-.4-1-.6-2.1-.6-3.3s.2-2.3.6-3.3c.4-1,.9-1.9,1.6-2.6.7-.7,1.5-1.3,2.5-1.7,1-.4,2.1-.6,3.3-.6h0s0,0,0,0ZM56.9,9.5c0,.6,0,1.2.3,1.8.2.6.4,1.1.8,1.5.4.5.8.8,1.3,1.1.5.3,1.2.4,1.9.4.7,0,1.4-.1,1.9-.4.5-.3,1-.6,1.3-1.1.3-.5.6-1,.8-1.5.2-.6.2-1.2.2-1.7s0-1.2-.2-1.7c-.2-.6-.4-1.1-.8-1.5-.4-.5-.8-.8-1.3-1.1-.5-.3-1.2-.4-1.9-.4s-1.4.1-1.9.4c-.5.3-1,.6-1.3,1.1-.4.5-.6,1-.8,1.5-.2.6-.3,1.2-.3,1.8ZM81.7,1.5h4l-6.2,16h-3.7l-6.2-16h4l4.1,11.4s4-11.4,4-11.4ZM88.5,14.9l-1,2.6h-4l6.3-16h3.9l6.2,16h-4l-.9-2.6h-6.5ZM89.6,11.6h4.3c-.3-1-.7-2-1-3-.4-1-.7-2-1.1-3l-2.2,6Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/index/polkadotjs-logo.svg b/public/img/index/polkadotjs-logo.svg
new file mode 100644
index 0000000..74a97d4
--- /dev/null
+++ b/public/img/index/polkadotjs-logo.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 155 30">
+  <defs>
+    <style>
+      .cls-1 {
+        opacity: .3;
+      }
+
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <circle class="cls-1" cx="15" cy="15" r="15"/>
+        <path class="cls-2" d="M15,4.2c-4.5,0-8.1,3.6-8.1,8.1s.2,1.8.4,2.6c.2.6.8.9,1.4.7.6-.2.9-.8.7-1.4-.2-.7-.3-1.4-.3-2.1,0-3,2.5-5.5,5.5-5.7,3.4-.2,6.2,2.5,6.2,5.8s-2.4,5.7-5.5,5.8c0,0-1.1,0-1.7.1-.3,0-.5,0-.6.1,0,0-.1,0-.1-.1l.2-.9,1-4.8c.1-.6-.3-1.2-.9-1.3s-1.2.3-1.3.9c0,0-2.5,11.8-2.6,11.9-.1.6.3,1.2.9,1.3.6.1,1.2-.3,1.3-.9,0-.1.4-1.7.4-1.7.3-1.2,1.2-2.1,2.4-2.2.3,0,1.3-.1,1.3-.1,4.2-.3,7.5-3.8,7.5-8.1,0-4.5-3.6-8.1-8.1-8.1ZM15.6,22.9c-.7-.1-1.5.3-1.6,1.1-.1.7.3,1.5,1.1,1.6.7.1,1.5-.3,1.6-1,.2-.8-.3-1.5-1.1-1.6Z"/>
+      </g>
+      <g>
+        <path class="cls-2" d="M39.3,6.8c1.1-.2,2.5-.3,4.3-.3s3.9.5,4.9,1.5c1,.8,1.5,2.1,1.5,3.7s-.5,2.8-1.4,3.7c-1.2,1.3-3.1,1.9-5.4,1.9s-1.3,0-1.8-.2v7h-2.3V6.8ZM41.6,15.2c.5.1,1.1.2,1.9.2,2.7,0,4.4-1.3,4.4-3.7s-1.6-3.4-4.1-3.4-1.7,0-2.1.2v6.8Z"/>
+        <path class="cls-2" d="M63.8,17.7c0,4.7-3.2,6.7-6.3,6.7s-6-2.5-6-6.5,2.8-6.7,6.2-6.7,6.1,2.6,6.1,6.5ZM53.8,17.8c0,2.8,1.6,4.8,3.8,4.8s3.8-2.1,3.8-4.9-1.1-4.8-3.8-4.8-3.9,2.5-3.9,4.9Z"/>
+        <path class="cls-2" d="M66.7,5.6h2.3v18.5h-2.3V5.6Z"/>
+        <path class="cls-2" d="M75.1,17.3h0c.3-.4.8-1,1.1-1.4l3.7-4.3h2.8l-4.9,5.2,5.5,7.4h-2.8l-4.3-6-1.2,1.3v4.7h-2.3V5.6h2.3v11.6Z"/>
+        <path class="cls-2" d="M92.5,24.1l-.2-1.6h0c-.7,1-2.1,1.9-3.8,1.9-2.5,0-3.8-1.8-3.8-3.6,0-3,2.7-4.7,7.6-4.7v-.3c0-1-.3-2.9-2.9-2.9s-2.4.4-3.3.9l-.5-1.5c1-.7,2.5-1.1,4.1-1.1,3.8,0,4.8,2.6,4.8,5.1v4.7c0,1.1,0,2.2.2,3h-2.1ZM92.1,17.7c-2.5,0-5.3.4-5.3,2.8s1,2.2,2.2,2.2,2.7-1,3-2.1c0-.2.1-.5.1-.7v-2.2Z"/>
+        <path class="cls-2" d="M108.9,5.6v15.2c0,1.1,0,2.4.1,3.2h-2.1v-2.2h-.2c-.7,1.4-2.2,2.5-4.3,2.5-3,0-5.4-2.6-5.4-6.4,0-4.2,2.6-6.8,5.6-6.8s3.2.9,3.8,1.9h0v-7.5h2.3ZM106.6,16.6c0-.3,0-.7-.1-1-.3-1.5-1.6-2.7-3.3-2.7s-3.8,2.1-3.8,4.9,1.2,4.7,3.7,4.7,2.9-1,3.4-2.7c0-.3.1-.6.1-1v-2.2Z"/>
+        <path class="cls-2" d="M124.1,17.7c0,4.7-3.2,6.7-6.3,6.7s-6-2.5-6-6.5,2.8-6.7,6.2-6.7,6.1,2.6,6.1,6.5ZM114.1,17.8c0,2.8,1.6,4.8,3.8,4.8s3.8-2.1,3.8-4.9-1.1-4.8-3.8-4.8-3.9,2.5-3.9,4.9Z"/>
+        <path class="cls-2" d="M129.7,7.9v3.6h3.3v1.7h-3.3v6.8c0,1.6.4,2.4,1.7,2.4s1,0,1.3-.2v1.7c-.3.2-1,.3-1.9.3s-1.9-.3-2.5-1c-.6-.7-.9-1.8-.9-3.3v-6.9h-2v-1.7h2v-3l2.2-.6Z"/>
+        <path class="cls-2" d="M139.2,6.6h2.3v11.7c0,4.7-2.3,6.1-5.3,6.1s-1.8-.2-2.4-.4l.3-1.8c.5.2,1.1.3,1.9.3,2,0,3.2-.9,3.2-4.3V6.6Z"/>
+        <path class="cls-2" d="M145,21.3c1,.6,2.5,1.1,4.1,1.1,2.3,0,3.7-1.2,3.7-3s-.9-2.6-3.3-3.5c-2.9-1-4.6-2.5-4.6-5s2.3-4.8,5.7-4.8,3.1.4,3.9.9l-.6,1.8c-.6-.3-1.7-.8-3.3-.8-2.4,0-3.3,1.4-3.3,2.6s1.1,2.4,3.5,3.4c3,1.1,4.5,2.6,4.5,5.1s-2,5-6.1,5-3.5-.5-4.5-1.1l.6-1.9Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/index/sub-wallet-logo.svg b/public/img/index/sub-wallet-logo.svg
new file mode 100644
index 0000000..d54784e
--- /dev/null
+++ b/public/img/index/sub-wallet-logo.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 155 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2, .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-4 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" x="13.8" y="0" width="19.9" height="30"/>
+    </clipPath>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Ebene_1">
+      <path class="cls-2" d="M47,11.4h2.1s0-4.7-5.1-4.7c0,0-4.4-.5-5.3,3.3,0,0-.5,2.4.8,3.6,1.2,1,2.6,1.7,4.1,1.9,1.3.2,4.2,1.1,3.9,3.7-.3,2.6-7.3,3.6-7.5-1.7h-2.1s-.3,4.8,4.4,5.8c4.8,1,7.5-1.8,7.3-5.1-.2-3.2-3.5-4.1-5.9-4.7-2.4-.5-3.1-1.7-2.9-2.9.2-1.2,1.8-1.7,3-1.7.8,0,1.5.2,2.1.7.6.5,1,1.2,1.1,2ZM52.2,11.6h2.1v9.4h5.1v-9.4h2.2v11.7h-9.4v-11.7ZM71.2,11.7c.4,0,.8,0,1.1.1.7.2,1.3.5,1.7.9.5.5.9,1,1.1,1.7.3.7.4,1.4.4,2.2v1.4c0,.4,0,.8-.1,1.1-.8,4.2-4,4-4,4h-2c-1.1,0-2.1-.6-2.8-1.3l-.3,1.5h-1.8V6.8h2.1v6.1c.8-.8,1.9-1.2,3.1-1.1h1.4ZM72.5,20.3c.5-.5.7-1.1.7-1.7v-2.4c0-.6-.3-1.3-.7-1.7-.5-.5-1.1-.7-1.7-.7h-1.6c-.6,0-1.3.3-1.7.7-.5.5-.7,1.1-.7,1.7v2.4c0,.6.3,1.3.7,1.7.5.5,1.1.7,1.7.7h1.6c.6,0,1.3-.3,1.7-.7ZM75.9,6.8h2.2l3.4,14.2h.4l2.7-14.2h3.9l2.8,14.3h.4l3.4-14.1h2.2l-3.9,16.4h-3.9l-2.8-14.2h-.4l-2.6,14.2h-3.9l-3.9-16.5ZM107.2,11.7v9.3h1.5v2.2h-3.4l-.3-1.3s-1.2,1.8-4.2,1.3c-3-.5-3.7-3.1-3-5.3.7-2.2,3.9-2.1,3.9-2.1h3.3v-2.1h-6.3v-2.1h8.4ZM101.3,21.2c3,.6,3.7-1.8,3.7-1.8v-1.5h-3.3c-1.5.3-1.7,1.1-1.7,1.1,0,.2-.1.5-.1.7,0,.3,0,.5.2.7.1.2.3.4.5.6.2.1.4.2.7.3ZM113.4,7h-2.1v16.3h2.1V7ZM115.8,7h2.1v16.3h-2.1V7ZM126.1,11.8s-4.7-.8-6,3.5c0,0-.8,3.4.5,5.6.5.8,1.2,1.5,2.1,1.9.9.4,1.8.6,2.8.5,3.5-.3,4.7-2.1,4.7-3.5h-2.2s0,1.3-1.9,1.3c0,0-.2,0-.3,0-1.8,0-3.9,0-3.8-2.6h8.5s.8-6.2-4.4-6.7ZM122.1,16.5c0-1.1,1-3,3.6-2.8.7,0,1.4.3,2,.8.5.5.8,1.2.8,2h-6.4ZM136,6.8h-2.1v4.9s-1.9,0-1.9,0v2.2h1.9v9.4h6.9v-2.3h-4.8v-7.2h3.9v-2.1h-4v-4.9Z"/>
+      <g class="cls-4">
+        <path class="cls-3" d="M33.7,10.8v-4.2L17.1,0l-3.3,1.7v13s12.4,5,12.4,5l-6.6,2.8v-2.2l-3-1.2-2.7,1.3v7.9l3.3,1.7,16.6-7.5v-5.3l-14.9-6v-3.6l11.9,4.8,3.1-1.4Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/index/talisman-logo.svg b/public/img/index/talisman-logo.svg
new file mode 100644
index 0000000..712c639
--- /dev/null
+++ b/public/img/index/talisman-logo.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 155 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill-rule: evenodd;
+      }
+
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Ebene_1">
+      <g>
+        <path class="cls-2" d="M42.5,24.4h3.8V8.2h7.2v-3.1h-18.1v3.1h7.1v16.2Z"/>
+        <path class="cls-2" d="M51.3,20.8c0,2.4,1.9,3.9,4.7,3.9s3.9-1.3,4.5-3.3h1.3c0,2.1.6,2.9,3,2.9h1.5v-2.6h-1.4c-.8,0-.9-.1-.9-.8v-5.5c0-3.3-2.2-5.1-6.2-5.1s-6.4,2-6.7,4l3.2.8c.4-1.4,1.5-2.3,3.5-2.3s2.7.7,2.7,2.1v.5c-2.8.2-5,.8-6.7,1.6-1.7.8-2.5,2.1-2.5,3.8ZM60.5,18.7c0,2.3-1.5,3.5-3.3,3.5s-2.2-.6-2.2-1.7c0-1.8,2-2.5,5.5-2.9v1.1Z"/>
+        <path class="cls-2" d="M68.6,24.4h3.6V5.1h-3.6v19.3Z"/>
+        <path class="cls-2" d="M76.4,8.5h3.8v-3.4h-3.8v3.4ZM76.5,24.4h3.5v-13.7h-3.5v13.7Z"/>
+        <path class="cls-2" d="M83.1,20.8c.6,2.4,3.4,3.9,6.7,3.9s6.4-1.7,6.4-4.4-.5-2.2-1.5-2.9c-1-.7-2.1-1.1-3.5-1.4l-1.9-.3c-1.8-.3-2.2-.7-2.2-1.5s.8-1.5,2.4-1.5,2.7.9,3.2,2.1l3-1.2c-.7-1.7-2.6-3.3-6.1-3.3s-5.9,1.7-5.9,4.3,1.8,3.6,4.7,4.1l1.9.3c1.6.3,2.2.9,2.2,1.7s-.9,1.6-2.6,1.6-3.2-1.2-3.5-2.4l-3.3,1Z"/>
+        <path class="cls-2" d="M99.4,24.4h3.6v-6.8c0-1.5.1-2.8,1-3.8.4-.5,1.1-.7,2-.7,1.8,0,2.6,1,2.6,2.9v8.4h3.5v-6.8c0-1.6,0-2.8,1-3.8.4-.5,1.1-.7,2-.7,1.7,0,2.6.9,2.6,2.9v8.4h3.5v-8.9c0-3.3-2-5.2-4.9-5.2s-3.6,1.3-4.2,3.2h-1.3c-.5-2.1-2-3.2-4-3.2s-3.4,1.3-3.9,3.2h-1.7c.6-.8,1.1-2,1.1-2.8h-3.2v13.7Z"/>
+        <path class="cls-2" d="M124.6,20.8c0,2.4,1.9,3.9,4.7,3.9s3.9-1.3,4.5-3.3h1.3c0,2.1.6,2.9,3,2.9h1.5v-2.6h-1.4c-.8,0-.9-.1-.9-.8v-5.5c0-3.3-2.2-5.1-6.2-5.1s-6.4,2-6.7,4l3.2.8c.4-1.4,1.5-2.3,3.5-2.3s2.7.7,2.7,2.1v.5c-2.8.2-5,.8-6.7,1.6-1.7.8-2.5,2.1-2.5,3.8ZM133.8,18.7c0,2.3-1.5,3.5-3.3,3.5s-2.2-.6-2.2-1.7c0-1.8,2-2.5,5.5-2.9v1.1Z"/>
+        <path class="cls-2" d="M141.9,24.4h3.6v-6.3c0-1.7.1-3.1,1.1-4.2.5-.6,1.3-.9,2.3-.9,1.7,0,2.6,1,2.6,2.9v8.4h3.6v-9c0-3.2-1.7-5.1-5-5.1s-3.9,1.7-4.6,3.6h-1.7c.8-1.1,1.4-2.4,1.4-3.2h-3.3v13.7Z"/>
+        <path class="cls-1" d="M26.7,17.1c-.5.5-1.4.3-1.7-.4,0-.1,0-.3,0-.4V5.6c0-1.3-1.1-2.3-2.5-2.3s-2.5,1-2.5,2.3v5.4c0,.5-.5.8-1,.6-.3,0-.5-.3-.5-.6V2.3C18.4,1,17.3,0,15.9,0s-2.5,1-2.5,2.3v8.7c0,.3-.2.6-.5.6-.5.1-1-.2-1-.6v-5.4c0-1.3-1.1-2.3-2.5-2.3-1.4,0-2.5,1-2.5,2.3v10.7c0,.1,0,.3,0,.4-.3.6-1.2.8-1.7.3l-.9-.9c-1-.9-2.5-.9-3.5,0-1,.9-1,2.4,0,3.3l7.3,6.9c1.8,2.2,4.7,3.6,7.9,3.6s5.8-1.3,7.6-3.3l7.6-7.2c1-.9,1-2.4,0-3.3s-2.5-.9-3.5,0l-.9.9ZM15.9,26.3c4.4,0,8-4.7,8-4.7,0,0-3.6-4.7-8-4.7s-8,4.7-8,4.7c0,0,3.6,4.7,8,4.7Z"/>
+        <path class="cls-2" d="M18.9,21.6c0,1.6-1.3,2.8-3,2.8s-3-1.3-3-2.8,1.3-2.8,3-2.8,3,1.3,3,2.8Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index dcfadae..e869bc3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./components/**/*.{vue,js}",
+    "./layouts/**/*.{vue,js}",
+    "./pages/**/*.{vue,js}",
+    "./plugins/**/*.{js,ts}",
+    "./nuxt.config.{js,ts}",
+  ],
   theme: {
     extend: {
       backgroundColor: {
diff --git a/yarn.lock b/yarn.lock
index 3d7b4a5..8d39064 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10386,6 +10386,7 @@ __metadata:
     tailwindcss: "npm:^3.4.3"
     typescript: "npm:^5.4.5"
     vite: "npm:^5.2.10"
+    vite-svg-loader: "npm:^5.1.0"
     vue: "npm:^3.4.26"
     vue-qrcode: "npm:^2.2.2"
     vue-qrcode-reader: "npm:^5.5.4"
@@ -14043,6 +14044,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-svg-loader@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "vite-svg-loader@npm:5.1.0"
+  dependencies:
+    svgo: "npm:^3.0.2"
+  peerDependencies:
+    vue: ">=3.2.13"
+  checksum: 10c0/39f218db6384aec56ec6fb9517723eaee49701225688e1d5f5132f0730605a9e59201464911b19cbfdc647caebacf4c8737dffe2472cd815ebb6645c2292993c
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.0.0, vite@npm:^5.2.10, vite@npm:^5.2.8":
   version: 5.2.12
   resolution: "vite@npm:5.2.12"