diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 49429078a3..e6bb468e34 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -26,7 +26,7 @@
                     :key="item.route"
                     :value="item.route"
                     @click="clickHandler(item)"
-                    color="primary"
+                    color="secondary"
                     :active="$route.path === item.route"
                   >
                     <template v-slot:prepend v-if="item.icon">
@@ -49,7 +49,7 @@
                   :key="item.route"
                   :value="item.route"
                   @click="clickHandler(item)"
-                  color="primary"
+                  color="secondary"
                   :active="$route.path === item.route"
                 >
                   <template v-slot:prepend v-if="item.icon">
@@ -72,7 +72,7 @@
 
         <template v-if="version">
           <div class="version">
-            <v-chip color="primary">
+            <v-chip color="secondary">
               {{ version }}
             </v-chip>
           </div>
@@ -106,7 +106,7 @@
           <v-container fluid :style="{ paddingBottom: '100px' }">
             <div class="d-flex align-center">
               <v-btn
-                color="primary"
+                color="secondary"
                 @click="openSidebar = true"
                 icon="mdi-menu"
                 variant="tonal"
@@ -393,6 +393,10 @@ a {
   width: 35px !important;
 }
 
+.v-list-item-title {
+  font-size: 0.875rem;
+}
+
 .v-list-item--density-default.v-list-item--one-line {
   min-height: 40px;
 }
diff --git a/packages/playground/src/calculator/resource_pricing.vue b/packages/playground/src/calculator/resource_pricing.vue
index 186485e301..568f4b4902 100644
--- a/packages/playground/src/calculator/resource_pricing.vue
+++ b/packages/playground/src/calculator/resource_pricing.vue
@@ -1,184 +1,182 @@
 <template>
-  <div class="mt-8">
-    <v-container class="custom-container">
-      <v-card color="title" class="d-flex justify-center items-center mt-3 pa-3 text-center">
-        <v-icon size="30" class="pr-3" color="white">mdi-calculator</v-icon>
-        <v-card-title class="pa-0" lor="white">Resource Pricing Calculator</v-card-title>
-      </v-card>
-      <v-card class="pa-3">
-        <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"
-                  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"
-                  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"
-                  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.required('HDD Storage size is required.'),
-                validators.isInt('HDD Storage size must be a valid integer.'),
-                validators.max('Maximum allowed hdd storage size is 1000000 GB.', 1000000),
-              ]"
-              #="{ props }"
-            >
-              <input-tooltip tooltip="The HDD capacity storage.">
-                <v-text-field
-                  label="Disk HDD"
-                  suffix="GB"
-                  type="number"
-                  v-model.number="HRU"
-                  v-bind="props"
-                  ref="valid"
-                />
-              </input-tooltip>
-            </input-validator>
-          </v-col>
-        </v-row>
+  <v-container class="custom-container">
+    <v-card color="title" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3" color="white">mdi-calculator</v-icon>
+      <v-card-title class="pa-0" lor="white">Resource Pricing Calculator</v-card-title>
+    </v-card>
+    <v-card class="pa-3">
+      <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"
+                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"
+                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="12">
-            <input-validator
-              :rules="[
-                validators.required('Balance is required.'),
-                validators.required('Balance is required.'),
-                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"
-                  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-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 }"
           >
-            <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"
+            <input-tooltip tooltip="The SSD capacity storage.">
+              <v-text-field
+                label="Disk SSD"
+                suffix="GB"
+                type="number"
+                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.required('HDD Storage size is required.'),
+              validators.isInt('HDD Storage size must be a valid integer.'),
+              validators.max('Maximum allowed hdd storage size is 1000000 GB.', 1000000),
+            ]"
+            #="{ props }"
           >
-            <v-switch color="primary" inset label="With a Public IPv4" v-model="ipv4" hide-details />
-          </input-tooltip>
-          <input-tooltip 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 />
+            <input-tooltip tooltip="The HDD capacity storage.">
+              <v-text-field
+                label="Disk HDD"
+                suffix="GB"
+                type="number"
+                v-model.number="HRU"
+                v-bind="props"
+                ref="valid"
+              />
+            </input-tooltip>
+          </input-validator>
+        </v-col>
+      </v-row>
 
-        <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" ? price.packageName + " Package: " : "" }}</b></span
+      <v-row class="px-3">
+        <v-col cols="12">
+          <input-validator
+            :rules="[
+              validators.required('Balance is required.'),
+              validators.required('Balance is required.'),
+              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"
+                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 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
                 >
-                <b>${{ price.price }}/month, {{ price.TFTs }} TFT/month. </b>
-              </span>
-              <span> {{ price.info }}</span>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-card>
-    </v-container>
-  </div>
+              </p>
+              <span class="package">
+                <b>{{ price.packageName != "none" ? price.packageName + " Package: " : "" }}</b></span
+              >
+              <b>${{ price.price }}/month, {{ price.TFTs }} TFT/month. </b>
+            </span>
+            <span> {{ price.info }}</span>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-container>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/playground/src/components/connect_wallet_landing.vue b/packages/playground/src/components/connect_wallet_landing.vue
index 8fe37dc816..638bb93ad3 100644
--- a/packages/playground/src/components/connect_wallet_landing.vue
+++ b/packages/playground/src/components/connect_wallet_landing.vue
@@ -3,10 +3,10 @@
     <v-alert type="info" variant="tonal">
       Please connect to your tfchain wallet <a class="app-link" @click="$emit('openProfile')">here</a>
     </v-alert>
-    <div>
+    <v-container class="custom-container">
       <h4 class="text-center text-h3 mt-16">A Co-Owned Global Sovereign Internet</h4>
       <v-container class="d-flex justify-center mt-4">
-        <p class="text-center">
+        <p class="text-center w-75">
           ThreeFold is
           <strong
             >a peer-to-peer open-source Internet platform that connects users directly with local Internet
@@ -17,13 +17,11 @@
           <a href="https://threefold.io/" target="_blank" class="app-link">Find More!</a>
         </p>
       </v-container>
-    </div>
 
-    <v-container>
       <div
         :style="{
           backgroundImage: 'url(' + baseUrl + 'images/live-and-operational-background.png)',
-          padding: '100px 0',
+          padding: '50px 0',
           backgroundSize: 'cover',
           backgroundPosition: 'center center',
           minHeight: '850px',
@@ -31,49 +29,46 @@
       >
         <!-- class="d-flex justify-center align-center" -->
         <div class="d-flex justify-center mb-10">
-          <v-card flat class="py-1 px-2 d-inline-block m-auto">
-            <h4 class="text-center text-h3">Live and Operational</h4>
-          </v-card>
+          <h4 class="text-center text-h4">Live and Operational</h4>
         </div>
 
-        <div class="d-flex flex-wrap justify-space-around">
-          <div v-for="s in stats" :key="s.value" class="stats">
-            <v-card>
+        <div class="d-flex flex-wrap justify-center">
+          <div v-for="s in stats" :key="s.value" class="stats px-5 py-10">
+            <v-card class="my-10">
               <v-img
                 cover
-                width="200"
+                width="150"
                 class="mx-auto"
                 :src="baseUrl + 'images/icons/live-and-operational/' + s.image"
               />
               <v-card-text>
-                <p class="text-center font-weight-bold text-h4">{{ s.value }}</p>
-                <p class="text-center text-h6">{{ s.label }}</p>
+                <p class="text-center font-weight-regular text-h4">{{ s.value }}</p>
+                <p class="text-center font-weight-light text-h6">{{ s.label }}</p>
               </v-card-text>
             </v-card>
           </div>
         </div>
 
-        <div class="d-flex justify-center mt-16">
+        <div class="d-flex justify-center mt-5">
           <v-btn color="primary" target="_blank" :href="capacityURL"> Explore ThreeFold Grid Capacity </v-btn>
         </div>
       </div>
-    </v-container>
-
-    <v-container>
-      <h4 class="text-center text-h3 mb-8">The <strong>Layer Zero</strong> for a Decentralized World</h4>
-      <p class="text-center">
-        Anything that runs on Linux can run on ThreeFold – with more security, more sustainably, and in true
-        decentralization. The ThreeFold Grid can support workloads from Blockchain to Web2 to Web3 to IoT and Metaverse
-        and more.
-      </p>
+      <div class="text-center">
+        <h4 class="text-h4 mb-8">The <strong>Layer Zero</strong> for a Decentralized World</h4>
+        <p class="w-75 mx-auto">
+          Anything that runs on Linux can run on ThreeFold – with more security, more sustainably, and in true
+          decentralization. The ThreeFold Grid can support workloads from Blockchain to Web2 to Web3 to IoT and
+          Metaverse and more.
+        </p>
 
-      <div class="d-flex justify-center align-center flex-wrap mt-8">
-        <v-btn class="mr-2" variant="tonal" color="primary" target="_blank" href="https://www.threefold.io/grid/">
-          Learn about the grid
-        </v-btn>
-        <v-btn variant="tonal" color="primary" target="_blank" href="https://www.threefold.io/build/">
-          Use The Grid
-        </v-btn>
+        <div class="d-flex justify-center align-center flex-wrap mt-8">
+          <v-btn class="mr-2" color="primary" target="_blank" href="https://www.threefold.io/grid/">
+            Learn about the grid
+          </v-btn>
+          <v-btn variant="outlined" color="secondary" target="_blank" href="https://www.threefold.io/build/">
+            Use The Grid
+          </v-btn>
+        </div>
       </div>
     </v-container>
   </div>
@@ -125,9 +120,7 @@ export default {
 
 <style>
 .stats {
-  flex-grow: 1;
   min-width: 280px;
   max-width: 300px;
-  padding: 15px 15px 0;
 }
 </style>
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index e8a6abc4bb..f84c41fd5a 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -130,7 +130,7 @@ onBeforeUnmount(() => {
 
 <style>
 .bold-text {
-  font-weight: bold;
+  font-weight: 500;
   padding-left: 1rem;
 }
 </style>
diff --git a/packages/playground/src/components/disclaimer_toolbar.vue b/packages/playground/src/components/disclaimer_toolbar.vue
index 3969b8d09f..c3babcf1dc 100644
--- a/packages/playground/src/components/disclaimer_toolbar.vue
+++ b/packages/playground/src/components/disclaimer_toolbar.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title class="font-weight-bold">Disclaimer</v-card-title>
-    <v-card-text v-if="network !== 'main' && nw !== 'main'">
+    <v-card-text class="px-4" v-if="network !== 'main' && nw !== 'main'">
       This is {{ nw }} environment. We're still ironing out the kinks. If there are any issues, please let us know
       <a class="app-link" href="https://github.com/threefoldtech/test_feedback/issues" target="_blank">here.</a>
     </v-card-text>
diff --git a/packages/playground/src/components/statistics_card.vue b/packages/playground/src/components/statistics_card.vue
index 55ac965d85..e1340bede7 100644
--- a/packages/playground/src/components/statistics_card.vue
+++ b/packages/playground/src/components/statistics_card.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="mt-2 text-center">
-    <v-card color="primary" class="pa-3 pt-4">
-      <div class="d-flex align-center justify-center items-center py-2 font-weight-bold text-h6">
-        <v-icon class="mr-3" size="large">{{ item.icon }} </v-icon>
+    <v-card color="primary" class="pt-2">
+      <div class="d-flex align-center justify-center items-center font-weight-medium">
+        <v-icon class="mr-2" size="small">{{ item.icon }} </v-icon>
         <span>
           {{ item.title }}
         </span>
       </div>
 
-      <v-divider class="mt-1" />
+      <v-divider class="mt-1 text-red-700" />
 
       <v-card-text class="card-body"> {{ item.data }} </v-card-text>
     </v-card>
@@ -30,6 +30,12 @@ export default {
 
 <style>
 .card-body {
-  font-size: 1.1rem !important;
+  font-size: 0.875rem !important;
+}
+.v-card-text {
+  padding: 0.6em;
+}
+.v-divider {
+  opacity: 0.5;
 }
 </style>
diff --git a/packages/playground/src/explorer/stats.vue b/packages/playground/src/explorer/stats.vue
index 93a6fa3e6a..2d80a0ff28 100644
--- a/packages/playground/src/explorer/stats.vue
+++ b/packages/playground/src/explorer/stats.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <v-container>
+    <v-container class="custom-container">
+      <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+        <v-icon size="30" class="pr-3" color="white">mdi-chart-scatter-plot</v-icon>
+        <v-card-title class="pa-0">statistics</v-card-title>
+      </v-card>
       <div class="text-center">
         <v-row align="center" justify="center">
           <v-col cols="12" sm="6" md="4">
@@ -10,25 +14,28 @@
           </v-col>
         </v-row>
       </div>
-      <v-row>
-        <v-col color="red" v-if="failed">
-          <v-alert type="error" variant="tonal">
-            Failed to get stats data after 3 attempts, Feel free to contact the support team or try again later.
-            <v-btn @click="fetchData" color="transparent">
-              <v-icon> mdi-refresh</v-icon>
-            </v-btn>
-          </v-alert>
-        </v-col>
-        <v-col v-if="Istats.length !== 0" class="d-flex flex-wrap justify-center">
-          <v-col v-for="item of Istats" :key="item.title" xl="2" lg="3" md="4" sm="6" cols="12" class="px-2">
-            <StatisticsCard :item="item" />
+      <v-card class="pa-5">
+        <v-row>
+          <v-col color="red" v-if="failed">
+            <v-alert type="error" variant="tonal">
+              Failed to get stats data after 3 attempts, Feel free to contact the support team or try again later.
+              <v-btn @click="fetchData" color="transparent">
+                <v-icon> mdi-refresh</v-icon>
+              </v-btn>
+            </v-alert>
           </v-col>
-        </v-col>
-        <v-col cols="12" class="mx-auto">
-          <tf-map r="125" g="227" b="200" :nodes="nodesDistribution" />
-        </v-col>
-      </v-row>
-      <v-divider class="mt-2 mb-2" />
+          <v-col cols="12" sm="12" md="12" lg="8" class="mx-auto mt-3">
+            <tf-map r="125" g="227" b="200" :nodes="nodesDistribution" />
+          </v-col>
+          <v-divider class="v-divider--vertical mx-2 my-4" />
+          <v-col v-if="Istats.length !== 0" class="d-flex flex-wrap justify-center">
+            <v-col v-for="item of Istats" :key="item.title" xl="6" lg="6" md="4" sm="12" cols="12" class="px-2 py-0">
+              <StatisticsCard :item="item" />
+            </v-col>
+          </v-col>
+        </v-row>
+      </v-card>
+      <!-- <v-divider class="mt-4 mb-2" /> -->
     </v-container>
   </div>
 </template>
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 111f549365..7b0e229c47 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -18,8 +18,8 @@ const vuetify = createVuetify({
       dark: {
         dark: true,
         colors: {
-          primary: "#7de3c8",
-          secondary: "#14A1B8",
+          primary: "#1aa18f",
+          secondary: "#74DDC3",
           title: "#1AA18F",
           info: "#7de3c8",
           warning: "#FFCC00",
diff --git a/packages/playground/src/portal/bridge_view.vue b/packages/playground/src/portal/bridge_view.vue
index dcb7d2a862..713c6018dd 100644
--- a/packages/playground/src/portal/bridge_view.vue
+++ b/packages/playground/src/portal/bridge_view.vue
@@ -1,30 +1,28 @@
 <template>
-  <div class="mt-8">
-    <v-container class="custom-container">
-      <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-swap-horizontal</v-icon>
-        <v-card-title class="pa-0" lor="white">Transfer TFT Across Chains</v-card-title>
-      </v-card>
-      <v-card class="pa-5 my-5 white--text">
-        <v-row class="pa-5 text-center">
-          <v-col cols="12">
-            <v-select
-              :items="items"
-              label="Please select a chain:"
-              item-title="name"
-              item-value="id"
-              v-model="selectedItem"
-            ></v-select>
-          </v-col>
-        </v-row>
-        <v-row class="pa-4 px-8">
-          <v-btn color="primary" class="mr-2 bold-text" @click="openDepositDialog = true">Deposit</v-btn>
-          <v-btn color="black" class="mr-2 bold-text" @click="openWithdrawDialog = true">Withdraw</v-btn>
-          <v-btn color="blue" class="ml-auto bold-text" @click="navigation">Learn How?</v-btn>
-        </v-row>
-      </v-card>
-    </v-container>
-  </div>
+  <v-container class="custom-container">
+    <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-swap-horizontal</v-icon>
+      <v-card-title class="pa-0">Transfer TFT Across Chains</v-card-title>
+    </v-card>
+    <v-card class="pa-5 white--text">
+      <v-row class="pa-5 text-center">
+        <v-col cols="12">
+          <v-select
+            :items="items"
+            label="Please select a chain:"
+            item-title="name"
+            item-value="id"
+            v-model="selectedItem"
+          ></v-select>
+        </v-col>
+      </v-row>
+      <v-row class="pa-4 px-8">
+        <v-btn color="primary" class="mr-2" @click="openDepositDialog = true">Deposit</v-btn>
+        <v-btn variant="outlined" color="secondary" class="mr-2" @click="openWithdrawDialog = true">Withdraw</v-btn>
+        <v-btn color="blue" class="ml-auto" @click="navigation">Learn How?</v-btn>
+      </v-row>
+    </v-card>
+  </v-container>
 
   <!-- Deposit Dialog -->
   <deposit-dialog
diff --git a/packages/playground/src/portal/dao_view.vue b/packages/playground/src/portal/dao_view.vue
index cc756f916c..c1aa890003 100644
--- a/packages/playground/src/portal/dao_view.vue
+++ b/packages/playground/src/portal/dao_view.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-container fluid>
-    <v-card color="#1AA18F" class="my-3 pa-3 d-flex justify-center align-baseline">
-      <v-icon width="26" class="mx-2">mdi-note-check-outline</v-icon>
-      <h2>DAO</h2>
+  <v-container class="custom-container">
+    <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-note-check-outline</v-icon>
+      <v-card-title class="pa-0">DAO</v-card-title>
     </v-card>
     <div class="d-flex my-12 align-center justify-center" v-if="loadingProposals">
       <v-progress-circular :size="70" :width="7" indeterminate color="primary"></v-progress-circular>
@@ -20,7 +20,7 @@
           <v-icon @click="openInfoModal = true" class="mx-3"> mdi-information-outline </v-icon>
         </h4>
         <v-tabs v-model="activeTab" align-tabs="center">
-          <v-tab color="primary" v-for="(tab, index) in tabs" :key="index" :value="`${index}`">{{ tab.title }}</v-tab>
+          <v-tab color="secondary" v-for="(tab, index) in tabs" :key="index" :value="`${index}`">{{ tab.title }}</v-tab>
         </v-tabs>
       </v-card>
       <v-window v-model="activeTab">
@@ -31,12 +31,12 @@
               v-model="searchTerm"
               variant="underlined"
               label="Search by proposal description"
-              class="pa-3"
+              class="pa-5"
             ></v-text-field>
           </v-card>
 
-          <v-card class="my-3 pa-3" v-for="(proposal, i) in filteredProposals(tab.content.value)" :key="i">
-            <v-card-title class="pa-3 mb-2" v-if="proposal.action">
+          <v-card class="my-3 pa-5" v-for="(proposal, i) in filteredProposals(tab.content.value)" :key="i">
+            <v-card-title class="pa-0 mb-5" v-if="proposal.action">
               {{ proposal.action }}
             </v-card-title>
             <!-- <v-card-subtitle class="pb-0">
@@ -46,22 +46,22 @@
             </v-card-subtitle> -->
             <v-card-text class="pb-0">
               <v-row>
-                <p class="font-weight-bold mr-3">Description:</p>
+                <p class="font-weight-medium mr-3">Description:</p>
                 <span class="text--secondary">
                   {{ proposal.description }}
                   <a v-bind:href="proposal.link" v-bind:target="'blank'">More details</a>
                 </span>
               </v-row>
               <v-row v-if="expired(proposal.end)">
-                <p class="font-weight-bold mr-3">You can vote until:</p>
+                <p class="font-weight-medium mr-3">You can vote until:</p>
                 <span class="text--secondary">{{ proposal.end }}</span>
               </v-row>
               <v-row v-else>
-                <p class="font-weight-bold mr-3">Voting ended on:</p>
+                <p class="font-weight-medium mr-3">Voting ended on:</p>
                 <span class="text--secondary">{{ proposal.end }}</span>
               </v-row>
             </v-card-text>
-            <v-container fluid>
+            <v-row class="my-3">
               <v-col class="votes">
                 <v-container class="" :style="{}">
                   <v-row v-if="expired(proposal.end)" class="d-flex justify-space-between">
@@ -89,8 +89,8 @@
                   <v-row v-if="expired(proposal.end)" class="">
                     <div :style="{ width: `${proposal.ayesProgress}%` }">
                       <v-progress-linear
-                        :height="20"
-                        color="#1AA18F"
+                        :height="24"
+                        color="primary"
                         v-model="proposal.ayesProgress"
                         :style="{
                           backgroundColor: '#1AA18F',
@@ -106,7 +106,7 @@
                     </div>
                     <div :style="{ width: `${proposal.nayesProgress}%` }">
                       <v-progress-linear
-                        :height="20"
+                        :height="24"
                         color="#9e9e9e"
                         v-model="proposal.nayesProgress"
                         :style="{
@@ -131,8 +131,8 @@
                       v-if="proposal.ayesProgress > proposal.nayesProgress"
                       rounded
                       v-model="proposal.ayesProgress"
-                      color="#1AA18F"
-                      height="20"
+                      color="primary"
+                      height="24"
                       :style="{
                         width: '100%',
                         color: '#fff',
@@ -149,7 +149,7 @@
                       v-model="proposal.nayesProgress"
                       color="grey lighten-2"
                       backgroundColor="#e0e0e0"
-                      height="20"
+                      height="24"
                       :style="{
                         width: '100%',
                         color: '#333',
@@ -163,7 +163,7 @@
                   </v-row>
                 </v-container>
               </v-col>
-            </v-container>
+            </v-row>
           </v-card>
         </v-window-item>
       </v-window>
@@ -331,6 +331,9 @@ async function castVote() {
 }
 </script>
 <style scoped>
+.custom-container {
+  width: 80%;
+}
 .votes {
   display: flex;
   flex-direction: column;
diff --git a/packages/playground/src/portal/transfer_view.vue b/packages/playground/src/portal/transfer_view.vue
index 2ebfeb3621..31c0e5c26b 100644
--- a/packages/playground/src/portal/transfer_view.vue
+++ b/packages/playground/src/portal/transfer_view.vue
@@ -1,13 +1,13 @@
 <template>
-  <v-container>
-    <v-card color="primary" class="my-3 pa-3 text-center">
-      <v-icon width="26">mdi-account-arrow-right-outline</v-icon>
-      <h2>Transfer TFTs on the TFChain</h2>
+  <v-container class="custom-container">
+    <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-account-arrow-right-outline</v-icon>
+      <v-card-title class="pa-0">Transfer TFTs on the TFChain</v-card-title>
     </v-card>
     <v-card>
       <v-tabs v-model="activeTab" align-tabs="center">
-        <v-tab :value="0" color="primary">By Twin ID</v-tab>
-        <v-tab :value="1" color="primary">By Address</v-tab>
+        <v-tab :value="0" color="secondary">By Twin ID</v-tab>
+        <v-tab :value="1" color="secondary">By Address</v-tab>
       </v-tabs>
       <v-window v-model="activeTab">
         <!-- TwinID Transfer -->
diff --git a/packages/playground/src/portal/twin_view.vue b/packages/playground/src/portal/twin_view.vue
index c86275e2d6..1f574b6c4e 100644
--- a/packages/playground/src/portal/twin_view.vue
+++ b/packages/playground/src/portal/twin_view.vue
@@ -1,51 +1,49 @@
 <template>
-  <div class="mt-8">
-    <v-container v-if="editingTwin">
-      <v-dialog v-model="editingTwin" max-width="600">
-        <v-card>
-          <v-toolbar color="primary" dark class="custom-toolbar">Edit Twin</v-toolbar>
-          <div class="text-h2 pa-10">
-            <v-text-field v-model="relay" outlined label="Relay" :error-messages="errorMsg"></v-text-field>
-          </div>
-          <v-card-actions class="justify-end pa-5">
-            <v-btn @click="editingTwin = false" class="grey lighten-2 black--text">Close</v-btn>
-            <v-btn @click="UpdateRelay" class="primary white--text">Save</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-container>
-
-    <v-container class="custom-container">
-      <v-card color="primary" class="my-3 pa-3 text-center">
-        <v-icon width="26">mdi-account-supervisor-outline</v-icon>
-        <h2>Twin Details</h2>
-      </v-card>
-
+  <v-container v-if="editingTwin">
+    <v-dialog v-model="editingTwin" max-width="600">
       <v-card>
-        <v-list class="custom-list">
-          <v-row>
-            <v-col cols="1" sm="2" class="column-style">
-              <v-list-item> ID </v-list-item>
-              <v-divider></v-divider>
-              <v-list-item> Address </v-list-item>
-              <v-divider></v-divider>
-              <v-list-item> Relay </v-list-item>
-            </v-col>
-            <v-col cols="1" sm="10">
-              <v-list-item> {{ profileManager.profile?.twinId.toString() }} </v-list-item>
-              <v-divider></v-divider>
-              <v-list-item> {{ profileManager.profile?.address }} </v-list-item>
-              <v-divider></v-divider>
-              <v-list-item> {{ profileManager.profile?.relay }} </v-list-item>
-            </v-col>
-          </v-row>
-        </v-list>
-        <v-card-actions v-if="updateRelay" class="justify-end mx-4 mb-4">
-          <v-btn class="custom-button bg-primary" @click="editTwin">Edit</v-btn>
+        <v-toolbar color="primary" dark class="custom-toolbar">Edit Twin</v-toolbar>
+        <div class="text-h2 pa-10">
+          <v-text-field v-model="relay" outlined label="Relay" :error-messages="errorMsg"></v-text-field>
+        </div>
+        <v-card-actions class="justify-end pa-5">
+          <v-btn @click="editingTwin = false" class="grey lighten-2 black--text">Close</v-btn>
+          <v-btn @click="UpdateRelay" class="primary white--text">Save</v-btn>
         </v-card-actions>
       </v-card>
-    </v-container>
-  </div>
+    </v-dialog>
+  </v-container>
+
+  <v-container class="custom-container">
+    <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-account-supervisor-outline</v-icon>
+      <v-card-title class="pa-0">Twin Details</v-card-title>
+    </v-card>
+
+    <v-card>
+      <v-list class="custom-list">
+        <v-row>
+          <v-col cols="1" sm="2" class="column-style my-4">
+            <v-list-item> ID </v-list-item>
+            <v-divider></v-divider>
+            <v-list-item> Address </v-list-item>
+            <v-divider></v-divider>
+            <v-list-item> Relay </v-list-item>
+          </v-col>
+          <v-col cols="1" sm="10" class="my-4">
+            <v-list-item> {{ profileManager.profile?.twinId.toString() }} </v-list-item>
+            <v-divider></v-divider>
+            <v-list-item> {{ profileManager.profile?.address }} </v-list-item>
+            <v-divider></v-divider>
+            <v-list-item> {{ profileManager.profile?.relay }} </v-list-item>
+          </v-col>
+        </v-row>
+      </v-list>
+      <v-card-actions v-if="updateRelay" class="justify-end mx-4 mb-4">
+        <v-btn class="custom-button bg-primary" @click="editTwin">Edit</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
 </template>
 
 <script lang="ts" setup>
@@ -105,7 +103,7 @@ async function UpdateRelay() {
 
 .custom-list {
   overflow: hidden;
-  font-size: 20px;
+  font-size: 1rem;
   padding: 10px;
 }
 
diff --git a/packages/playground/src/views/page_not_found.vue b/packages/playground/src/views/page_not_found.vue
index f841424ffc..5a7ab182df 100644
--- a/packages/playground/src/views/page_not_found.vue
+++ b/packages/playground/src/views/page_not_found.vue
@@ -32,14 +32,14 @@ export default {
 }
 
 .text1 {
-  font-size: 30px;
+  font-size: 20px;
   text-align: center;
-  font-weight: 500;
-  margin-top: 50px;
+  font-weight: 400;
+  margin-top: 10px;
 }
 
 .text2 {
-  font-size: 20px;
+  font-size: 16px;
   text-align: center;
   font-weight: 400;
 }
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 9c72598aa4..1c4dbbb1a2 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -231,7 +231,7 @@
             <div class="d-flex justify-center">
               <VBtn
                 type="submit"
-                color="primary"
+                color="secondary"
                 variant="tonal"
                 :loading="activating"
                 :disabled="