From b2d2bc78eeb5fd0360738f18d568e3a8f49034dc Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 28 May 2024 12:00:10 +0300
Subject: [PATCH 1/5] Apply vuetify default conf for buttons

---
 packages/playground/src/App.vue               |  4 ++-
 .../playground/src/components/TfSwapPrice.vue |  2 +-
 .../playground/src/components/app_info.vue    |  4 +--
 .../playground/src/components/app_theme.vue   |  7 +++-
 .../src/components/connect_wallet_landing.vue |  6 ++--
 .../contracts_list/contracts_table.vue        | 15 +++-----
 .../src/components/deployment_data_dialog.vue |  8 ++---
 .../src/components/deposit_dialog.vue         |  4 +--
 .../src/components/expandable_layout.vue      |  9 +----
 packages/playground/src/components/filter.vue |  1 -
 .../playground/src/components/funds_card.vue  |  6 ++--
 .../src/components/k8s_deployment_table.vue   |  2 +-
 .../src/components/logged_in_landing.vue      |  4 +--
 packages/playground/src/components/logger.vue |  4 +--
 .../playground/src/components/main_footer.vue |  4 +--
 .../manage_caprover_worker_dialog.vue         |  2 +-
 .../src/components/manage_gateway_dialog.vue  |  6 ++--
 .../src/components/manage_worker_dialog.vue   | 25 ++++++-------
 .../src/components/node_details.vue           |  6 ++--
 .../node_details_cards/gpu_details_card.vue   |  2 +-
 .../src/components/node_resources_charts.vue  |  4 +--
 .../ssh_keys/ManageSshDeployemnt.vue          |  9 +----
 .../src/components/ssh_keys/SshDataDialog.vue |  4 +--
 .../src/components/ssh_keys/SshFormDialog.vue |  3 +-
 .../src/components/ssh_keys/SshTable.vue      |  2 --
 .../src/components/vm_deployment_table.vue    |  2 +-
 .../src/components/weblet_layout.vue          | 14 ++++----
 .../src/components/withdraw_dialog.vue        |  3 +-
 .../playground/src/dashboard/bridge_view.vue  |  6 ++--
 .../components/NodeMintingDetails.vue         |  4 +--
 .../src/dashboard/components/add_ip.vue       |  9 ++---
 .../src/dashboard/components/create_farm.vue  | 18 ++++------
 .../dashboard/components/public_config.vue    |  6 +---
 .../dashboard/components/public_ips_table.vue |  4 +--
 .../components/reserve_action_btn.vue         |  4 +--
 .../dashboard/components/set_extra_fee.vue    |  3 +-
 .../src/dashboard/components/user_farms.vue   | 11 ++----
 .../playground/src/dashboard/dao_view.vue     | 17 +++------
 .../src/dashboard/transfer_view.vue           | 35 +++++++++++--------
 .../playground/src/dashboard/twin_view.vue    | 21 +++++------
 packages/playground/src/plugins/vuetify.ts    |  8 +++++
 packages/playground/src/views/farms.vue       |  4 +--
 .../playground/src/views/page_not_found.vue   |  4 +--
 packages/playground/src/views/sshkey_view.vue |  3 --
 packages/playground/src/weblets/freeflow.vue  |  2 +-
 packages/playground/src/weblets/full_vm.vue   |  2 +-
 packages/playground/src/weblets/micro_vm.vue  |  2 +-
 .../src/weblets/profile_manager.vue           |  2 --
 .../playground/src/weblets/tf_algorand.vue    |  2 +-
 .../playground/src/weblets/tf_caprover.vue    |  2 +-
 .../playground/src/weblets/tf_casperlabs.vue  |  2 +-
 .../src/weblets/tf_contracts_list.vue         | 12 +++----
 .../src/weblets/tf_deployment_list.vue        |  7 ++--
 .../playground/src/weblets/tf_discourse.vue   |  9 +++--
 .../playground/src/weblets/tf_funkwhale.vue   |  2 +-
 .../playground/src/weblets/tf_kubernetes.vue  |  2 +-
 .../playground/src/weblets/tf_mattermost.vue  |  9 +++--
 .../playground/src/weblets/tf_nextcloud.vue   |  2 +-
 .../playground/src/weblets/tf_node_pilot.vue  |  2 +-
 .../playground/src/weblets/tf_owncloud.vue    |  2 +-
 .../playground/src/weblets/tf_peertube.vue    |  2 +-
 .../playground/src/weblets/tf_presearch.vue   |  2 +-
 .../src/weblets/tf_staticwebsite.vue          |  2 +-
 .../playground/src/weblets/tf_subsquid.vue    |  6 ++--
 packages/playground/src/weblets/tf_taiga.vue  |  9 +++--
 packages/playground/src/weblets/tf_umbrel.vue |  2 +-
 .../playground/src/weblets/tf_wordpress.vue   |  2 +-
 67 files changed, 179 insertions(+), 226 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 955db1b6fa..a7202dd780 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -128,7 +128,9 @@
               </TfSwapPrice>
             </div>
           </v-spacer>
-          <v-btn class="capitalize" :style="{ pointerEvents: 'none' }" variant="text"> {{ network }}net </v-btn>
+          <v-btn class="capitalize" color="anchor" :style="{ pointerEvents: 'none' }" variant="text">
+            {{ network }}net
+          </v-btn>
           <v-divider vertical class="mx-2" />
           <AppTheme />
           <v-divider vertical class="mx-2" />
diff --git a/packages/playground/src/components/TfSwapPrice.vue b/packages/playground/src/components/TfSwapPrice.vue
index eb2123d152..491b88581d 100644
--- a/packages/playground/src/components/TfSwapPrice.vue
+++ b/packages/playground/src/components/TfSwapPrice.vue
@@ -9,7 +9,7 @@
             class="mx-1 order-1"
             @click="priceTask.error ? priceTask.run() : toggleSwap()"
             :loading="priceTask.loading"
-            :color="priceTask.error ? 'error' : undefined"
+            :color="priceTask.error ? 'error' : 'anchor'"
             v-bind="props"
           />
         </template>
diff --git a/packages/playground/src/components/app_info.vue b/packages/playground/src/components/app_info.vue
index 1167d9e57f..7563fa2799 100644
--- a/packages/playground/src/components/app_info.vue
+++ b/packages/playground/src/components/app_info.vue
@@ -1,7 +1,7 @@
 <template>
   <v-tooltip location="left" :text="tooltip">
     <template #activator="{ props }">
-      <v-btn v-bind="props" icon="mdi-information-outline" @click="setOpenInfo(true)" />
+      <v-btn v-bind="props" variant="tonal" color="anchor" icon="mdi-information-outline" @click="setOpenInfo(true)" />
     </template>
   </v-tooltip>
 
@@ -24,7 +24,7 @@
 
       <v-divider class="mb-2" />
       <v-card-actions class="d-flex justify-end">
-        <v-btn color="anchor" variant="outlined" @click="setOpenInfo(false)">Close</v-btn>
+        <v-btn color="anchor" @click="setOpenInfo(false)">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/packages/playground/src/components/app_theme.vue b/packages/playground/src/components/app_theme.vue
index d89998cf8d..b7ac9582a2 100644
--- a/packages/playground/src/components/app_theme.vue
+++ b/packages/playground/src/components/app_theme.vue
@@ -1,7 +1,12 @@
 <template>
   <v-tooltip location="bottom" :text="light ? 'Switch to dark mode' : 'Switch to light mode'">
     <template #activator="{ props }">
-      <v-btn v-bind="props" @click="light = !light" :icon="light ? 'mdi-moon-waning-crescent' : 'mdi-brightness-4'" />
+      <v-btn
+        v-bind="props"
+        color="anchor"
+        @click="light = !light"
+        :icon="light ? 'mdi-moon-waning-crescent' : 'mdi-brightness-4'"
+      />
     </template>
   </v-tooltip>
 </template>
diff --git a/packages/playground/src/components/connect_wallet_landing.vue b/packages/playground/src/components/connect_wallet_landing.vue
index a262aec081..ae41dc1bc0 100644
--- a/packages/playground/src/components/connect_wallet_landing.vue
+++ b/packages/playground/src/components/connect_wallet_landing.vue
@@ -56,7 +56,7 @@
         </div>
 
         <div class="d-flex justify-center mt-5">
-          <v-btn color="primary" target="_blank" :href="statsUrl"> Explore ThreeFold Grid Capacity </v-btn>
+          <v-btn variant="elevated" target="_blank" :href="statsUrl"> Explore ThreeFold Grid Capacity </v-btn>
         </div>
       </div>
       <div class="text-center">
@@ -67,9 +67,7 @@
           Metaverse and more.
         </p>
         <div class="d-flex justify-center align-center flex-wrap my-4">
-          <v-btn color="primary" variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL">
-            Learn about the grid
-          </v-btn>
+          <v-btn variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL"> Learn about the grid </v-btn>
         </div>
       </div>
     </v-container>
diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index cfaa87a5aa..1f129df50b 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -113,13 +113,11 @@
         v-if="Object.keys(props.lockedContracts).length > 0"
         :disabled="!selectedLockedContracts"
         color="warning"
-        variant="outlined"
         @click="openUnlockDialog"
         >Unlock</v-btn
       >
 
       <v-btn
-        variant="outlined"
         color="anchor"
         prepend-icon="mdi-export-variant"
         :disabled="isExporting || !contracts || contracts.length === 0 || loadingDelete || deleting"
@@ -129,7 +127,6 @@
       </v-btn>
 
       <v-btn
-        variant="outlined"
         color="error"
         :disabled="!selectedContracts.length || loadingDelete || deleting"
         prepend-icon="mdi-trash-can-outline"
@@ -167,9 +164,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn variant="outlined" color="anchor" class="mr-2 px-3" @click="contractStateDialog = false">
-            Close
-          </v-btn>
+          <v-btn color="anchor" class="mr-2 px-3" @click="contractStateDialog = false"> Close </v-btn>
           <v-tooltip
             :text="
               freeBalance < getAmountLocked
@@ -183,7 +178,6 @@
                 <v-btn
                   v-if="!isNodeInRentContracts"
                   :disabled="freeBalance < getAmountLocked"
-                  variant="outlined"
                   color="warning"
                   class="mr-2 px-3"
                   @click="unlockContract([selectedItem.contract_id])"
@@ -215,8 +209,8 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="anchor" variant="outlined" @click="deletingDialog = false"> Cancel </v-btn>
-        <v-btn color="error" variant="outlined" @click="onDelete"> Delete </v-btn>
+        <v-btn color="anchor" @click="deletingDialog = false"> Cancel </v-btn>
+        <v-btn color="error" @click="onDelete"> Delete </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -251,7 +245,7 @@
         </v-chip>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="anchor" variant="outlined" @click="unlockDialog = false"> Cancel </v-btn>
+          <v-btn color="anchor" @click="unlockDialog = false"> Cancel </v-btn>
           <v-tooltip
             :text="
               freeBalance < selectedLockedAmount
@@ -265,7 +259,6 @@
                 <v-btn
                   :disabled="selectedLockedAmount > freeBalance"
                   color="warning"
-                  variant="outlined"
                   class="ml-2"
                   :loading="unlockContractLoading"
                   @click="
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index 3d1ed40522..aa01bc22d0 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -5,8 +5,8 @@
         <v-card-title class="d-flex flex-column" v-if="!onlyJson">
           <div class="d-flex justify-center">
             <v-btn-toggle divided v-model="showType" mandatory>
-              <v-btn variant="outlined"> details </v-btn>
-              <v-btn variant="outlined"> JSON</v-btn>
+              <v-btn> details </v-btn>
+              <v-btn> JSON</v-btn>
             </v-btn-toggle>
           </div>
 
@@ -113,8 +113,8 @@
         </v-card-text>
         <v-card-actions class="my-1">
           <v-spacer />
-          <v-btn color="anchor" variant="outlined" @click="$emit('close')">Close</v-btn>
-          <v-btn color="secondary" variant="outlined" @click="copy">Copy</v-btn>
+          <v-btn color="anchor" @click="$emit('close')">Close</v-btn>
+          <v-btn color="secondary" @click="copy">Copy</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index f39fd43722..feab00a518 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -71,8 +71,8 @@
             </v-row>
           </v-container>
           <v-card-actions class="justify-end">
-            <v-btn variant="outlined" color="anchor" class="mr-2 px-3" @click="closeDialog"> Close </v-btn>
-            <v-btn variant="outlined" color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
+            <v-btn color="anchor" class="mr-2 px-3" @click="closeDialog"> Close </v-btn>
+            <v-btn color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
           </v-card-actions>
         </v-card-text>
       </v-card>
diff --git a/packages/playground/src/components/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
index 752c7ef1a1..d12648e00e 100644
--- a/packages/playground/src/components/expandable_layout.vue
+++ b/packages/playground/src/components/expandable_layout.vue
@@ -5,14 +5,7 @@
       <v-spacer />
       <v-tooltip text="Add">
         <template #activator="{ props }">
-          <v-btn
-            icon="mdi-plus"
-            variant="outlined"
-            color="secondary"
-            @click="$emit('add')"
-            v-bind="props"
-            :disabled="disabled"
-          />
+          <v-btn icon="mdi-plus" color="secondary" @click="$emit('add')" v-bind="props" :disabled="disabled" />
         </template>
       </v-tooltip>
     </div>
diff --git a/packages/playground/src/components/filter.vue b/packages/playground/src/components/filter.vue
index 3653c9474b..09f4b62e54 100644
--- a/packages/playground/src/components/filter.vue
+++ b/packages/playground/src/components/filter.vue
@@ -55,7 +55,6 @@
             <v-btn
               :disabled="!isValidForm || loading || !(formHasValues || Object.keys(route.query).length > 0)"
               @click="resetFilters"
-              variant="outlined"
               color="anchor"
               text="Clear"
             />
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index bd06ffaacb..4586fc9129 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -3,11 +3,9 @@
     <template #activator="{ props }">
       <v-btn
         id="tftBtn"
-        width="2000"
-        color="white"
+        variant="elevated"
         @click="addTFT"
         class="px-lg-6 px-md-2 px-sm-0 mx-sm-0"
-        style="color: white; max-width: 140px; width: auto; background-color: var(--primary)"
         :loading="loadingAddTFT"
         v-bind="props"
       >
@@ -17,7 +15,7 @@
     <div>
       Get TFT on Stellar using BTC or Credit card, then you can bridge it to your tfchain account using the Bridge in
       the dashboard section.
-      <v-btn icon small @click.stop :href="manual.buy_sell_tft" target="_blank"
+      <v-btn icon color="anchor" small @click.stop :href="manual.buy_sell_tft" target="_blank"
         ><v-icon>mdi-information-outline</v-icon></v-btn
       >
     </div>
diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index db595ae2d9..e376042e7a 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -50,7 +50,7 @@
             </li>
           </v-card-text>
           <v-card-actions class="justify-end">
-            <v-btn @click="showDialog = false" variant="outlined" color="anchor">Close</v-btn>
+            <v-btn @click="showDialog = false" color="anchor">Close</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
diff --git a/packages/playground/src/components/logged_in_landing.vue b/packages/playground/src/components/logged_in_landing.vue
index a90f8d50a9..6f977df557 100644
--- a/packages/playground/src/components/logged_in_landing.vue
+++ b/packages/playground/src/components/logged_in_landing.vue
@@ -74,9 +74,7 @@
               </p>
 
               <div class="d-flex justify-center align-center flex-wrap my-4">
-                <v-btn color="primary" variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL">
-                  Learn about the grid
-                </v-btn>
+                <v-btn variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL"> Learn about the grid </v-btn>
               </div>
             </div>
           </v-card>
diff --git a/packages/playground/src/components/logger.vue b/packages/playground/src/components/logger.vue
index b900d1f03a..e2bc3249f2 100644
--- a/packages/playground/src/components/logger.vue
+++ b/packages/playground/src/components/logger.vue
@@ -82,8 +82,8 @@
       <VCardText v-text="'This will delete all of your logs. Be careful this operation is irreversible!'" />
       <v-card-actions>
         <v-spacer />
-        <v-btn variant="outlined" @click="clearDialog = false" text="Cancel" />
-        <v-btn variant="outlined" color="error" @click="clearLogs.run()" text="clear" />
+        <v-btn color="anchor" @click="clearDialog = false" text="Cancel" />
+        <v-btn color="error" @click="clearLogs.run()" text="clear" />
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/packages/playground/src/components/main_footer.vue b/packages/playground/src/components/main_footer.vue
index 7ce298bc81..b5ad597aa1 100644
--- a/packages/playground/src/components/main_footer.vue
+++ b/packages/playground/src/components/main_footer.vue
@@ -21,13 +21,13 @@
               href="https://github.com/threefoldtech/tfgrid-sdk-ts"
               target="_blank"
               :style="{ color: 'rgb(var(--v-footer-color-link)) !important' }"
-              ><v-btn class="" icon="mdi-github" variant="text"></v-btn
+              ><v-btn color="anchor" icon="mdi-github" variant="text"></v-btn
             ></a>
             <a
               href="mailto:info@threefold.io"
               target="_blank"
               :style="{ color: 'rgb(var(--v-footer-color)) !important' }"
-              ><v-btn class="" icon="mdi-email-outline" variant="text"></v-btn
+              ><v-btn color="anchor" icon="mdi-email-outline" variant="text"></v-btn
             ></a>
           </div>
         </v-col>
diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
index 027b4ddf69..1089897de7 100644
--- a/packages/playground/src/components/manage_caprover_worker_dialog.vue
+++ b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -72,7 +72,7 @@
 
       <v-card-actions>
         <v-spacer />
-        <v-btn color="anchor" variant="outlined" @click="deployedDialog = false">Close</v-btn>
+        <v-btn color="anchor" @click="deployedDialog = false">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 6678598755..25f7b1c17d 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -170,17 +170,16 @@
         </div>
 
         <template #footer-actions>
-          <v-btn color="anchor" variant="outlined" @click="$emit('close')">Close</v-btn>
+          <v-btn color="anchor" @click="$emit('close')">Close</v-btn>
           <v-btn
             color="error"
-            variant="outlined"
             :disabled="gatewaysToDelete.length === 0 || deleting || loadingGateways"
             v-if="gatewayTab === 0"
             @click="requestDelete = true"
           >
             Delete
           </v-btn>
-          <v-btn color="secondary" variant="outlined" @click="deployGateway" :disabled="!valid" v-else> Add </v-btn>
+          <v-btn color="secondary" @click="deployGateway" :disabled="!valid" v-else> Add </v-btn>
         </template>
       </weblet-layout>
     </v-dialog>
@@ -199,7 +198,6 @@
         <v-card-actions class="d-flex justify-end">
           <v-btn
             color="error"
-            variant="outlined"
             size="small"
             :disabled="loadingGateways || deleting"
             @click="
diff --git a/packages/playground/src/components/manage_worker_dialog.vue b/packages/playground/src/components/manage_worker_dialog.vue
index 973e8f7400..0b01d58abf 100644
--- a/packages/playground/src/components/manage_worker_dialog.vue
+++ b/packages/playground/src/components/manage_worker_dialog.vue
@@ -11,8 +11,8 @@
 
       <template #header-actions>
         <v-btn-toggle divided v-model="showType" mandatory :disabled="layout?.status || deleting" class="mt-2">
-          <v-btn variant="outlined" :disabled="workers.length === 0"> List </v-btn>
-          <v-btn variant="outlined"> Deploy </v-btn>
+          <v-btn :disabled="workers.length === 0"> List </v-btn>
+          <v-btn> Deploy </v-btn>
         </v-btn-toggle>
       </template>
 
@@ -25,10 +25,9 @@
       </form-validator>
 
       <template #footer-actions>
-        <v-btn color="anchor" variant="outlined" v-if="!deleting" @click="$emit('close')"> Close </v-btn>
+        <v-btn color="anchor" v-if="!deleting" @click="$emit('close')"> Close </v-btn>
         <v-btn
           color="error"
-          variant="outlined"
           prepend-icon="mdi-delete"
           :disabled="selectedWorkers.length === 0 || deleting"
           v-if="showType === 0"
@@ -36,13 +35,7 @@
         >
           Delete
         </v-btn>
-        <v-btn
-          color="secondary"
-          variant="outlined"
-          :disabled="!valid"
-          @click="$emit('deploy', layout)"
-          v-if="showType === 1"
-        >
+        <v-btn color="secondary" :disabled="!valid" @click="$emit('deploy', layout)" v-if="showType === 1">
           Deploy
         </v-btn>
       </template>
@@ -59,8 +52,8 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="anchor" variant="outlined" @click="deletingDialog = false"> Cancel </v-btn>
-        <v-btn color="error" variant="outlined" @click="onDelete"> Remove </v-btn>
+        <v-btn color="anchor" @click="deletingDialog = false"> Cancel </v-btn>
+        <v-btn color="error" @click="onDelete"> Remove </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -69,7 +62,11 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-const props = defineProps<{ workers: any[]; selectedWorkers: any[]; deleting: boolean }>();
+const props = defineProps<{
+  workers: any[];
+  selectedWorkers: any[];
+  deleting: boolean;
+}>();
 const emits = defineEmits<{
   (event: "close"): void;
   (event: "delete", cb: (workers: any[]) => void): void;
diff --git a/packages/playground/src/components/node_details.vue b/packages/playground/src/components/node_details.vue
index a8f3da021e..0a7430ee68 100644
--- a/packages/playground/src/components/node_details.vue
+++ b/packages/playground/src/components/node_details.vue
@@ -10,7 +10,7 @@
     <v-toolbar color="primary">
       <div class="d-flex justify-center">
         <v-btn icon dark @click="() => $emit('close-dialog', false)">
-          <v-icon>mdi-close</v-icon>
+          <v-icon color="anchor">mdi-close</v-icon>
         </v-btn>
       </div>
     </v-toolbar>
@@ -29,8 +29,8 @@
           <p class="mt-4 mb-4 font-weight-bold text-error">
             {{ errorMessage }}
           </p>
-          <v-btn class="mr-4" @click="requestNode" color="primary" text="Try Again" />
-          <v-btn @click="(val:boolean) => closeDialog(val)" color="error" variant="outlined" text="Cancel" />
+          <v-btn class="mr-4" @click="requestNode" text="Try Again" />
+          <v-btn @click="(val:boolean) => closeDialog(val)" color="error" text="Cancel" />
         </div>
       </v-card>
     </template>
diff --git a/packages/playground/src/components/node_details_cards/gpu_details_card.vue b/packages/playground/src/components/node_details_cards/gpu_details_card.vue
index c49a2373d6..e30a061768 100644
--- a/packages/playground/src/components/node_details_cards/gpu_details_card.vue
+++ b/packages/playground/src/components/node_details_cards/gpu_details_card.vue
@@ -39,7 +39,7 @@
             <p class="mt-4 mb-4 font-weight-bold text-error">
               {{ errorMessage }}
             </p>
-            <v-btn :loading="loading" class="mr-4" @click="RerequestNode" color="primary" text="Try Again" />
+            <v-btn :loading="loading" class="mr-4" @click="RerequestNode" text="Try Again" />
           </div>
         </v-card>
       </div>
diff --git a/packages/playground/src/components/node_resources_charts.vue b/packages/playground/src/components/node_resources_charts.vue
index da862e2a36..39dcad9d5e 100644
--- a/packages/playground/src/components/node_resources_charts.vue
+++ b/packages/playground/src/components/node_resources_charts.vue
@@ -21,9 +21,7 @@
       <div class="d-flex my-6 align-center justify-center">
         <v-progress-circular v-if="loading" indeterminate class="mt-10 mb-10" />
       </div>
-      <v-btn rounded="md" variant="flat" color="primary" class="mt-10" @click="getNodeHealthUrl">
-        Check Node Health
-      </v-btn>
+      <v-btn rounded="md" variant="flat" class="mt-10" @click="getNodeHealthUrl"> Check Node Health </v-btn>
     </v-row>
     <v-row justify="center" class="w-50 mt-10" style="margin: 0 auto">
       <v-alert variant="tonal" type="warning" v-if="hintMessage">{{ hintMessage }}</v-alert>
diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
index efd414b3c4..c705901f12 100644
--- a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
+++ b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -21,7 +21,6 @@
         <VSpacer />
         <v-btn
           color="secondary"
-          variant="outlined"
           @click="openManageDialog = true"
           class="mr-2 my-1"
           :disabled="sshKeysManagement.list() && sshKeysManagement.list().length === 0"
@@ -80,13 +79,7 @@
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn
-          class="mt-2 mb-2 mr-2"
-          variant="outlined"
-          color="anchor"
-          text="Close"
-          @click="openManageDialog = false"
-        />
+        <v-btn class="mt-2 mb-2 mr-2" color="anchor" text="Close" @click="openManageDialog = false" />
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
index 6e53b6f9f4..c432ca2351 100644
--- a/packages/playground/src/components/ssh_keys/SshDataDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -53,8 +53,8 @@
         <v-card-actions class="mb-3 custom-actions">
           <v-spacer></v-spacer>
           <div class="mt-2">
-            <v-btn color="white" variant="outlined" text="Close" @click="$emit('close')"></v-btn>
-            <v-btn color="primary" variant="outlined" text="Save" @click="updateKey" :loading="loading"></v-btn>
+            <v-btn color="white" text="Close" @click="$emit('close')"></v-btn>
+            <v-btn text="Save" @click="updateKey" :loading="loading"></v-btn>
           </div>
         </v-card-actions>
       </v-card>
diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
index d14be7a977..f957784870 100644
--- a/packages/playground/src/components/ssh_keys/SshFormDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -68,14 +68,13 @@
           <v-card-actions class="custom-actions">
             <v-spacer></v-spacer>
             <div class="mt-3">
-              <v-btn color="white" variant="outlined" text="Close" @click="$emit('close')"></v-btn>
+              <v-btn color="white" text="Close" @click="$emit('close')"></v-btn>
 
               <v-btn
                 v-if="$props.dialogType === SSHCreationMethod.Generate"
                 @click="generateSSHKey"
                 :loading="generating"
                 :disabled="!isValidForm || generating || !!generatedSshKey"
-                variant="outlined"
                 color="secondary"
               >
                 Generate and Save
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
index 7c17e61903..e845292300 100644
--- a/packages/playground/src/components/ssh_keys/SshTable.vue
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -106,7 +106,6 @@
             v-bind="props"
             prepend-icon="mdi-export"
             color="anchor"
-            variant="outlined"
             @click="() => $emit('export', selectedKeys)"
           >
             Export
@@ -120,7 +119,6 @@
             :disabled="loading || selectedKeys.length === 0 || deleting"
             :loading="deleting"
             v-bind="props"
-            variant="outlined"
             prepend-icon="mdi-trash-can-outline"
             color="error"
             @click="deleteSelected"
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 44b68d8ec1..976007fd90 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -43,7 +43,7 @@
             </v-list>
           </v-card-text>
           <v-card-actions class="justify-end">
-            <v-btn @click="showDialog = false" variant="outlined" color="anchor">Close</v-btn>
+            <v-btn @click="showDialog = false" color="anchor">Close</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 5f05c59514..4c8b86470e 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -7,7 +7,9 @@
             :src="baseUrl + titleImage"
             alt="title image"
             v-if="titleImage"
-            :style="{ filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})` }"
+            :style="{
+              filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
+            }"
           />
           <slot name="title" />
         </v-card-title>
@@ -71,10 +73,10 @@
         <div v-else>
           Based on the cloud resources you have selected (CPU: {{ cpu }} Cores, RAM: {{ memory }} MB, SSD:
           {{ disk }} GB{{ ipv4 ? ", Public IP: Enabled" : "" }}) your deployment costs
-          <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(tft) }}</span> TFTs or
-          approximately
-          <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(usd) }}</span> USD per
-          month.
+          <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(tft) }}</span>
+          TFTs or approximately
+          <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(usd) }}</span>
+          USD per month.
 
           <div v-if="SelectedNode?.certificationType === 'Certified'">
             You selected a certified node. Please note that this deployment costs more TFT.
@@ -89,7 +91,7 @@
       <v-card-actions>
         <v-spacer />
         <slot name="footer-actions" :validateBeforeDeploy="validateBeforeDeploy" v-if="!status" />
-        <v-btn v-else color="secondary" variant="outlined" :loading="status === 'deploy'" @click="reset"> Back </v-btn>
+        <v-btn v-else color="secondary" :loading="status === 'deploy'" @click="reset"> Back </v-btn>
       </v-card-actions>
     </template>
   </v-card>
diff --git a/packages/playground/src/components/withdraw_dialog.vue b/packages/playground/src/components/withdraw_dialog.vue
index 753fa48e2c..93f58d87e9 100644
--- a/packages/playground/src/components/withdraw_dialog.vue
+++ b/packages/playground/src/components/withdraw_dialog.vue
@@ -52,11 +52,10 @@
           </FormValidator>
         </v-card-text>
         <v-card-actions class="justify-end pb-4 px-6">
-          <v-btn variant="outlined" color="anchor" class="px-3" @click="closeDialog"> Close </v-btn>
+          <v-btn color="anchor" class="px-3" @click="closeDialog"> Close </v-btn>
           <v-btn
             class="px-3"
             color="secondary"
-            variant="outlined"
             @click="withdrawTFT(target, amount)"
             :disabled="!valid || validatingAddress"
             :loading="loadingWithdraw"
diff --git a/packages/playground/src/dashboard/bridge_view.vue b/packages/playground/src/dashboard/bridge_view.vue
index 292bab3ce8..04d2d83f67 100644
--- a/packages/playground/src/dashboard/bridge_view.vue
+++ b/packages/playground/src/dashboard/bridge_view.vue
@@ -11,10 +11,10 @@
         </v-col>
       </v-row>
       <v-row class="pa-4 px-8">
-        <v-btn variant="outlined" color="secondary" @click="navigation">Learn How?</v-btn>
+        <v-btn color="secondary" @click="navigation">Learn How?</v-btn>
         <div class="ml-auto">
-          <v-btn variant="outlined" color="secondary" class="mr-2" @click="openWithdrawDialog = true">Withdraw</v-btn>
-          <v-btn color="primary" class="mr-2" @click="openDepositDialog = true">Deposit</v-btn>
+          <v-btn color="secondary" class="mr-2" @click="openWithdrawDialog = true">Withdraw</v-btn>
+          <v-btn variant="elevated" class="mr-2" @click="openDepositDialog = true">Deposit</v-btn>
         </div>
       </v-row>
     </v-card>
diff --git a/packages/playground/src/dashboard/components/NodeMintingDetails.vue b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
index 7f8de442b2..7deaa29c6c 100644
--- a/packages/playground/src/dashboard/components/NodeMintingDetails.vue
+++ b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
@@ -126,9 +126,7 @@
       </div>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="secondary" variant="outlined" @click="downloadNodeReceipt" :disabled="!node.receipts"
-          >Download Node Receipt</v-btn
-        >
+        <v-btn color="secondary" @click="downloadNodeReceipt" :disabled="!node.receipts">Download Node Receipt</v-btn>
       </v-card-actions>
     </v-card>
   </v-container>
diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index 43b2ccb753..b3cacf7056 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn class="bg-primary text-subtitle-1 px-6 ml-2 mr-3" @click="showDialogue = true" :loading="loading"
+  <v-btn variant="elevated" class="text-subtitle-1 px-6 ml-2 mr-3" @click="showDialogue = true" :loading="loading"
     >Add IP</v-btn
   >
   <v-container>
@@ -82,13 +82,10 @@
           </v-dialog>
 
           <v-card-actions class="justify-end pa-5">
-            <v-btn @click="showDialogue = false" variant="outlined" color="anchor">Close</v-btn>
+            <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
 
-            <v-btn variant="outlined" @click="showRange" :disabled="!valid || type === IPType.single || !toPublicIP"
-              >Show IPs Range</v-btn
-            >
+            <v-btn @click="showRange" :disabled="!valid || type === IPType.single || !toPublicIP">Show IPs Range</v-btn>
             <v-btn
-              variant="outlined"
               color="secondary"
               @click="addFarmIp($props.farmId, gateway)"
               @update:modelValue="$emit('update:isAdded', $event)"
diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
index 55964ca77a..709a79053b 100644
--- a/packages/playground/src/dashboard/components/create_farm.vue
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -2,7 +2,6 @@
   <v-container>
     <v-row class="text-center flex justify-center">
       <v-btn
-        variant="outlined"
         color="secondary"
         class="text-subtitle-1 px-6 mr-2"
         v-bind:href="'https://bootstrap.grid.tf/'"
@@ -10,7 +9,7 @@
         >Bootstrap Node Image</v-btn
       >
 
-      <v-btn class="bg-primary text-subtitle-1 px-6" @click="showDialogue = true" :disabled="isCreating"
+      <v-btn variant="elevated" class="text-subtitle-1 px-6" @click="showDialogue = true" :disabled="isCreating"
         >Create Farm</v-btn
       >
     </v-row>
@@ -48,15 +47,8 @@
             </form-validator>
           </div>
           <v-card-actions class="justify-end px-5 pb-5 pt-0">
-            <v-btn variant="outlined" color="anchor" @click="showDialogue = false">Close</v-btn>
-            <v-btn
-              color="primary"
-              variant="outlined"
-              @click="createFarm"
-              :loading="isCreating"
-              :disabled="!valid || isCreating"
-              >Create</v-btn
-            >
+            <v-btn color="anchor" @click="showDialogue = false">Close</v-btn>
+            <v-btn @click="createFarm" :loading="isCreating" :disabled="!valid || isCreating">Create</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -106,7 +98,9 @@ export default {
     }
     async function validateFarmName(name: string) {
       if (!name.split("").every((c: string) => /[a-zA-Z0-9\-_]/.test(c))) {
-        return { message: "Farm name can only contain alphabetic letters, numbers, '-' or '_'" };
+        return {
+          message: "Farm name can only contain alphabetic letters, numbers, '-' or '_'",
+        };
       }
       const names = await props.userFarms.getFarmsNames();
       if (names.includes(props.name.toLocaleLowerCase())) {
diff --git a/packages/playground/src/dashboard/components/public_config.vue b/packages/playground/src/dashboard/components/public_config.vue
index 680fdaf5ce..9ed210232f 100644
--- a/packages/playground/src/dashboard/components/public_config.vue
+++ b/packages/playground/src/dashboard/components/public_config.vue
@@ -104,7 +104,6 @@
             <v-btn
               @click="isNodeHasConfig"
               color="error"
-              variant="outlined"
               :disabled="isRemoving || Object.values(config).every(value => value == '')"
             >
               Remove Config
@@ -117,13 +116,11 @@
                   showDialogue = false;
                   reset();
                 "
-                variant="outlined"
                 color="anchor"
                 >Close</v-btn
               >
               <v-btn
                 color="secondary"
-                variant="outlined"
                 @click="AddConfig"
                 :loading="isSaving"
                 :disabled="isSaving || !valid || (valid && !isConfigChanged)"
@@ -147,11 +144,10 @@
 
           <v-card-actions class="justify-end px-5 pb-5 pt-0">
             <!-- Cancel and Remove Buttons -->
-            <v-btn text="Cancel" color="anchor" variant="outlined" @click="showClearDialogue = false"></v-btn>
+            <v-btn text="Cancel" color="anchor" @click="showClearDialogue = false"></v-btn>
             <v-btn
               text="Remove"
               color="error"
-              variant="outlined"
               :loading="isRemoving"
               :disabled="isRemoving"
               @click="removeConfig()"
diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 8357b100f5..b6610713be 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -27,7 +27,6 @@
           <v-btn
             class="ma-3"
             color="error"
-            variant="outlined"
             prepend-icon="mdi-delete"
             :disabled="selectedItems.length === 0 || isRemoving"
             @click="showDialogue = true"
@@ -51,9 +50,8 @@
           </v-chip>
         </v-card-text>
         <v-card-actions class="justify-end px-5 pb-5 pt-0">
-          <v-btn @click="showDialogue = false" variant="outlined" color="anchor">Close</v-btn>
+          <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
           <v-btn
-            variant="outlined"
             text="Confirm"
             :loading="isRemoving"
             color="error"
diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
index e4a6e31574..54613d6279 100644
--- a/packages/playground/src/dashboard/components/reserve_action_btn.vue
+++ b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -11,8 +11,8 @@
         <v-divider />
         <v-card-text>This will free up the node for others on the chain</v-card-text>
         <v-card-actions class="justify-end">
-          <v-btn variant="outlined" color="anchor" @click="openUnreserveDialog = false">Close</v-btn>
-          <v-btn variant="outlined" color="error" @click="unReserveNode" :loading="loadingUnreserveNode">Confirm</v-btn>
+          <v-btn color="anchor" @click="openUnreserveDialog = false">Close</v-btn>
+          <v-btn color="error" @click="unReserveNode" :loading="loadingUnreserveNode">Confirm</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/packages/playground/src/dashboard/components/set_extra_fee.vue b/packages/playground/src/dashboard/components/set_extra_fee.vue
index 947f74689c..64d982c662 100644
--- a/packages/playground/src/dashboard/components/set_extra_fee.vue
+++ b/packages/playground/src/dashboard/components/set_extra_fee.vue
@@ -51,10 +51,9 @@
             </form-validator>
           </div>
           <v-card-actions class="justify-end px-5 pb-5 pt-0">
-            <v-btn @click="showDialogue = false" variant="outlined" color="anchor">Close</v-btn>
+            <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
             <v-btn
               color="secondary"
-              variant="outlined"
               @click="setExtraFee()"
               :loading="isSetting"
               :disabled="!valid || isSetting || isDisabled"
diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
index 1f404d4250..d1ee5bbaa8 100644
--- a/packages/playground/src/dashboard/components/user_farms.vue
+++ b/packages/playground/src/dashboard/components/user_farms.vue
@@ -63,19 +63,13 @@
                 <PublicIPsTable :farmId="item.farmId" :refreshPublicIPs="refreshPublicIPs" />
                 <v-card-actions>
                   <v-row class="justify-center mt-3">
-                    <v-btn
-                      class="text-subtitle-1 px-6"
-                      color="secondary"
-                      variant="outlined"
-                      @click="showDialogue = true"
-                    >
+                    <v-btn class="text-subtitle-1 px-6" color="secondary" @click="showDialogue = true">
                       Add/Edit Stellar Payout Address
                     </v-btn>
                     <v-btn
                       class="text-subtitle-1 px-6"
                       v-if="network == 'main'"
                       color="secondary"
-                      variant="outlined"
                       @click="downloadFarmReceipts(item.farmId)"
                     >
                       Download Minting Receipts
@@ -113,10 +107,9 @@
                 </form-validator>
               </div>
               <v-card-actions class="justify-end px-5 pb-5 pt-0">
-                <v-btn @click="showDialogue = false" variant="outlined" color="anchor">Close</v-btn>
+                <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
                 <v-btn
                   color="secondary"
-                  variant="outlined"
                   @click="setStellarAddress(item.farmId, address)"
                   :loading="isAdding"
                   :disabled="!valid || isAdding"
diff --git a/packages/playground/src/dashboard/dao_view.vue b/packages/playground/src/dashboard/dao_view.vue
index ee53ef4fc3..0afff049c6 100644
--- a/packages/playground/src/dashboard/dao_view.vue
+++ b/packages/playground/src/dashboard/dao_view.vue
@@ -46,9 +46,7 @@
               <v-card-title class="pa-0 mb-5 font-weight-bold" v-if="proposal.action">
                 {{ proposal.action }}
               </v-card-title>
-              <v-btn variant="outlined" color="secondary" v-bind:href="proposal.link" v-bind:target="'blank'">
-                Go to Proposal
-              </v-btn>
+              <v-btn color="secondary" v-bind:href="proposal.link" v-bind:target="'blank'"> Go to Proposal </v-btn>
             </div>
             <v-divider class="mt-1 mb-5 text-red-700" />
 
@@ -236,15 +234,8 @@
             </form-validator>
           </v-card-text>
           <v-card-actions class="justify-end">
-            <v-btn @click="openVDialog = false" variant="outlined" color="anchor">Close</v-btn>
-            <v-btn
-              @click="castVote"
-              :loading="loadingVote"
-              variant="outlined"
-              color="secondary"
-              :disabled="!isValidFarm"
-              >Vote</v-btn
-            >
+            <v-btn @click="openVDialog = false" color="anchor">Close</v-btn>
+            <v-btn @click="castVote" :loading="loadingVote" color="secondary" :disabled="!isValidFarm">Vote</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -292,7 +283,7 @@
 
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn @click="openInfoModal = false" class="my-1" color="anchor" variant="outlined"> Close </v-btn>
+            <v-btn @click="openInfoModal = false" class="my-1" color="anchor"> Close </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
diff --git a/packages/playground/src/dashboard/transfer_view.vue b/packages/playground/src/dashboard/transfer_view.vue
index 01924af435..24c24811a4 100644
--- a/packages/playground/src/dashboard/transfer_view.vue
+++ b/packages/playground/src/dashboard/transfer_view.vue
@@ -38,7 +38,9 @@
                   validators.required('Transfer amount is required '),
                   validators.isNumeric('Amount should be a number.'),
                   validators.min('Amount must be greater than 0.001', 0.001),
-                  validators.isDecimal('Amount can have 3 decimals only.', { decimal_digits: '0,3' }),
+                  validators.isDecimal('Amount can have 3 decimals only.', {
+                    decimal_digits: '0,3',
+                  }),
                   validators.max('Insufficient funds.', freeBalance - 0.01),
                 ]"
                 #="{ props }"
@@ -50,12 +52,9 @@
             </form-validator>
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn @click="clearInput" color="anchor" :disabled="loadingTwinIDTransfer" variant="outlined"
-                >Clear</v-btn
-              >
+              <v-btn @click="clearInput" color="anchor" :disabled="loadingTwinIDTransfer">Clear</v-btn>
               <v-btn
                 color="secondary"
-                variant="outlined"
                 :loading="loadingTwinIDTransfer"
                 :disabled="!isValidTwinIDTransfer"
                 @click="submitFormTwinID"
@@ -90,7 +89,9 @@
                   validators.required('Transfer amount is required '),
                   validators.isNumeric('Amount should be a number.'),
                   validators.min('Amount must be greater than 0.001', 0.001),
-                  validators.isDecimal('Amount can have 3 decimals only.', { decimal_digits: '0,3' }),
+                  validators.isDecimal('Amount can have 3 decimals only.', {
+                    decimal_digits: '0,3',
+                  }),
                   validators.max('Insufficient funds.', freeBalance - 0.01),
                 ]"
                 #="{ props }"
@@ -102,13 +103,10 @@
             </form-validator>
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn @click="clearInput" color="anchor" :disabled="loadingAddressTransfer" variant="outlined"
-                >Clear</v-btn
-              >
+              <v-btn @click="clearInput" color="anchor" :disabled="loadingAddressTransfer">Clear</v-btn>
 
               <v-btn
                 color="secondary"
-                variant="outlined"
                 :loading="loadingAddressTransfer"
                 :disabled="!isValidAddressTransfer"
                 @click="submitFormAddress"
@@ -165,7 +163,9 @@ function isSameTwinID(value: string) {
 async function isValidTwinID(value: string) {
   try {
     if (gridStore) {
-      receptTwinFromTwinID.value = await gridStore.client.twins.get({ id: parseInt(value.trim()) });
+      receptTwinFromTwinID.value = await gridStore.client.twins.get({
+        id: parseInt(value.trim()),
+      });
       if (receptTwinFromTwinID.value == null) {
         return { message: "This twin id doesn't exist" };
       }
@@ -192,7 +192,9 @@ async function isValidAddress() {
       const twinId = await gridStore.client.twins.get_twin_id_by_account_id({
         public_key: recipientAddress.value.trim(),
       });
-      recepTwinFromAddress.value = await gridStore.client.twins.get({ id: twinId });
+      recepTwinFromAddress.value = await gridStore.client.twins.get({
+        id: twinId,
+      });
       if (recepTwinFromAddress.value == null) {
         return { message: "Twin ID doesn't exist" };
       }
@@ -211,7 +213,10 @@ function clearInput() {
 async function transfer(recipientTwin: Twin) {
   try {
     if (gridStore) {
-      await gridStore.client.balance.transfer({ address: recipientTwin.accountId, amount: transferAmount.value });
+      await gridStore.client.balance.transfer({
+        address: recipientTwin.accountId,
+        amount: transferAmount.value,
+      });
       clearInput();
       createCustomToast("Transaction Complete!", ToastType.success);
       profileManagerController.reloadBalance();
@@ -230,7 +235,9 @@ function createInvalidTransferToast(message: string) {
 }
 async function submitFormTwinID() {
   if (gridStore) {
-    const twinDetails = await gridStore.client.twins.get({ id: parseInt(recipientTwinId.value.trim()) });
+    const twinDetails = await gridStore.client.twins.get({
+      id: parseInt(recipientTwinId.value.trim()),
+    });
     if (twinDetails != null) {
       loadingTwinIDTransfer.value = true;
       await transfer(twinDetails);
diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
index 3e7c905b2b..303001b6bd 100644
--- a/packages/playground/src/dashboard/twin_view.vue
+++ b/packages/playground/src/dashboard/twin_view.vue
@@ -8,8 +8,8 @@
             <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-btn @click="editingTwin = false" color="anchor">Close</v-btn>
+            <v-btn @click="UpdateRelay">Save</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -20,10 +20,8 @@
         <v-toolbar color="primary" dark class="custom-toolbar bold-text">Vote Reminder</v-toolbar>
         <v-card-text>There are {{ numberOfProposalsToVoteOn }} active proposals you can vote on now</v-card-text>
         <v-card-actions class="justify-end pa-5">
-          <v-btn @click="redirectToDao" variant="elevated" color="primary" class="mr-2 text-subtitle-2">Vote</v-btn>
-          <v-btn @click="openVotePopup = false" variant="outlined" color="anchor" class="mr-2 text-subtitle-2"
-            >Close</v-btn
-          >
+          <v-btn @click="redirectToDao" variant="elevated" class="mr-2 text-subtitle-2">Vote</v-btn>
+          <v-btn @click="openVotePopup = false" color="anchor" class="mr-2 text-subtitle-2">Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -94,11 +92,13 @@
                         type="submit"
                         icon="mdi-content-save-all"
                         class="mt-2"
+                        color="anchor"
                         variant="text"
                         :disabled="!isValid || savingEmail"
                       >
                       </v-btn>
-                      <v-btn icon="mdi-close" class="mt-2" variant="text" @click="editEmail = false"> </v-btn>
+                      <v-btn icon="mdi-close" class="mt-2" color="anchor" variant="text" @click="editEmail = false">
+                      </v-btn>
                     </v-form>
                   </v-list-item>
                 </v-col>
@@ -172,7 +172,7 @@
           </v-col>
         </v-row>
         <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-btn variant="elevated" class="custom-button" @click="editTwin">Edit</v-btn>
         </v-card-actions>
       </v-card>
     </div>
@@ -353,11 +353,6 @@ export default {
   margin-right: 10px;
 }
 
-.custom-button {
-  font-size: 16px;
-  font-weight: bold;
-}
-
 .custom-toolbar {
   font-size: 16px;
   font-weight: bold;
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 67ccd4369a..86f7488b1f 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -15,12 +15,20 @@ const defaults = {
     color: "primary",
   },
   VBtn: {
+    variant: "outlined",
+    color: "primary",
     VProgressCircular: {
       size: undefined,
       width: undefined,
       color: undefined,
     },
   },
+  VCardActions: {
+    VBtn: {
+      variant: "outlined",
+      color: "primary",
+    },
+  },
 };
 
 const vuetify = createVuetify({
diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index bdede63628..f0fc3d0c14 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -109,8 +109,8 @@
       <v-container>
         <v-toolbar :height="35">
           <div class="ml-auto">
-            <v-btn icon dark @click="() => (dialog = false)">
-              <v-icon>mdi-close</v-icon>
+            <v-btn icon @click="() => (dialog = false)">
+              <v-icon color="anchor">mdi-close</v-icon>
             </v-btn>
           </div>
         </v-toolbar>
diff --git a/packages/playground/src/views/page_not_found.vue b/packages/playground/src/views/page_not_found.vue
index f7c1e97f32..135ac8e34a 100644
--- a/packages/playground/src/views/page_not_found.vue
+++ b/packages/playground/src/views/page_not_found.vue
@@ -3,9 +3,7 @@
   <p class="text1">Oops! The page you were looking for doesn't exist.</p>
   <p class="text2">You may have mistyped address or the page may have been moved.</p>
   <div style="text-align: center">
-    <v-btn color="primary" variant="text" @click="$router.push({ name: 'landing' })">
-      Take me back to the Home page.</v-btn
-    >
+    <v-btn variant="text" @click="$router.push({ name: 'landing' })"> Take me back to the Home page.</v-btn>
   </div>
 </template>
 
diff --git a/packages/playground/src/views/sshkey_view.vue b/packages/playground/src/views/sshkey_view.vue
index d60663a625..e2b67a4f87 100644
--- a/packages/playground/src/views/sshkey_view.vue
+++ b/packages/playground/src/views/sshkey_view.vue
@@ -15,7 +15,6 @@
   <v-card class="mb-3 pa-3" color="transparent">
     <v-col class="d-flex justify-end">
       <v-btn
-        variant="outlined"
         class="mr-2"
         @click="() => openDialog(SSHCreationMethod.Import)"
         prepend-icon="mdi-key-plus"
@@ -27,7 +26,6 @@
 
       <v-btn
         @click="exportAllKeys"
-        variant="outlined"
         class="mr-2"
         prepend-icon="mdi-export"
         color="secondary"
@@ -51,7 +49,6 @@
         :disabled="loading || deleting || generatingSSH || savingKey || activating"
         @click="openDialog(SSHCreationMethod.Generate)"
         prepend-icon="mdi-key-plus"
-        color="primary"
       >
         Generate
       </v-btn>
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 09808f48fc..d6b0ff9172 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -75,7 +75,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 2766ccb54b..f726d1b523 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -133,7 +133,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 13d203d702..5aabcddcfb 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -174,7 +174,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index dbaccd2f15..7255bb5109 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -209,13 +209,11 @@
                       @click="openAcceptTerms = termsLoading = false"
                       v-show="!termsLoading"
                       :color="theme.name.value === AppThemeSelection.light ? 'black' : 'white'"
-                      variant="outlined"
                       :text="capitalize('go back')"
                     />
                     <v-btn
                       @click="shouldActivateAccount ? activateAccount() : createNewAccount()"
                       v-show="!termsLoading"
-                      color="primary"
                       :text="capitalize('accept terms and conditions')"
                     />
                   </div>
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 8031f1b81c..3c333dd09f 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -173,7 +173,7 @@
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 86761e76b6..1b78f14b89 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -87,7 +87,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 88dbfb659a..f0730ecc77 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -65,7 +65,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index a1e005d31c..056f700b53 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -12,7 +12,6 @@
       <v-btn
         v-if="lockedContracts?.totalAmountLocked && !isLoading"
         class="mr-2"
-        variant="outlined"
         color="warning"
         @click="openUnlockDialog"
         :loading="unlockContractLoading"
@@ -22,7 +21,6 @@
       <v-btn
         prepend-icon="mdi-refresh"
         color="info"
-        variant="outlined"
         @click="
           contractsTable.forEach(t => t.reset());
           onMount();
@@ -38,7 +36,9 @@
   <v-card variant="tonal" :loading="totalCost === undefined" class="mb-3 bg-blue-primary-lighten-3">
     <template #title>
       <v-row>
-        <v-col class="d-flex justify-start"> <p class="text-subtitle-1">Total cost of contracts</p> </v-col>
+        <v-col class="d-flex justify-start">
+          <p class="text-subtitle-1">Total cost of contracts</p>
+        </v-col>
       </v-row>
     </template>
     <template #text>
@@ -88,7 +88,8 @@
             <div v-else>
               You need to fund your account with
               <span class="font-weight-black">
-                {{ Math.ceil(lockedContracts?.totalAmountLocked - freeBalance) }} TFTs
+                {{ Math.ceil(lockedContracts?.totalAmountLocked - freeBalance) }}
+                TFTs
               </span>
               to resume your contracts
             </div>
@@ -97,7 +98,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn variant="outlined" color="anchor" class="mr-2 px-3" @click="unlockDialog = false"> Close </v-btn>
+          <v-btn color="anchor" class="mr-2 px-3" @click="unlockDialog = false"> Close </v-btn>
           <v-tooltip
             :text="
               freeBalance < lockedContracts?.totalAmountLocked
@@ -110,7 +111,6 @@
               <div v-bind="props">
                 <v-btn
                   :disabled="freeBalance < lockedContracts.totalAmountLocked || loadingLockDetails"
-                  variant="outlined"
                   color="warning"
                   @click="unlockAllContracts"
                   :loading="unlockContractLoading"
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index daa4f5592a..ccbd8cf562 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -326,7 +326,6 @@
     <template #footer-actions>
       <v-btn
         color="error"
-        variant="outlined"
         :disabled="selectedItems.length === 0 || deleting"
         prepend-icon="mdi-delete"
         @click="deletingDialog = true"
@@ -348,10 +347,8 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="anchar" variant="outlined" @click="deletingDialog = false">Cancel</v-btn>
-        <v-btn color="error" variant="outlined" @click="onDelete(tabs[activeTab].value.toLowerCase() === 'kubernetes')">
-          Delete
-        </v-btn>
+        <v-btn color="anchar" @click="deletingDialog = false">Cancel</v-btn>
+        <v-btn color="error" @click="onDelete(tabs[activeTab].value.toLowerCase() === 'kubernetes')"> Delete </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 6a3dff1c12..731433179f 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -93,7 +93,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
@@ -267,6 +267,11 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TfDiscourse",
-  components: { SmtpServer, SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: {
+    SmtpServer,
+    SelectSolutionFlavor,
+    Networks,
+    ManageSshDeployemnt,
+  },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 1d4ae6a8ce..17efb36cc4 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -117,7 +117,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index fe899ccfcc..7b338d5ed1 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -76,7 +76,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 024eb7af5d..0a8a805d7d 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -74,7 +74,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
@@ -250,6 +250,11 @@ import rootFs from "../utils/root_fs";
 
 export default {
   name: "TfMattermost",
-  components: { SmtpServer, SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: {
+    SmtpServer,
+    SelectSolutionFlavor,
+    Networks,
+    ManageSshDeployemnt,
+  },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 6c711a035f..13fdd48939 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -64,7 +64,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index cd344575cc..427c1a8dbe 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -61,7 +61,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index e7e22c2440..664094bbda 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -114,7 +114,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index ca75c06f3d..a9dbe8bb0b 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -91,7 +91,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 0bcd78da2f..7127a05817 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -99,7 +99,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 4e123ab7d2..b662ce2c82 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -93,7 +93,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 6a12be674b..79e6d2a708 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -34,7 +34,9 @@
         :value="endpoint"
         :rules="[
           validators.required('Endpoint is required.'),
-          validators.isURL('Please provide a valid endpoint.', { protocols: ['wss'] }),
+          validators.isURL('Please provide a valid endpoint.', {
+            protocols: ['wss'],
+          }),
         ]"
         #="{ props }"
       >
@@ -77,7 +79,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 254fcea4e7..e85d812a75 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -125,7 +125,7 @@
     </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
@@ -306,6 +306,11 @@ import rootFs from "../utils/root_fs";
 
 export default {
   name: "TfTaiga",
-  components: { SmtpServer, SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: {
+    SmtpServer,
+    SelectSolutionFlavor,
+    Networks,
+    ManageSshDeployemnt,
+  },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index af73144676..4c7ea189af 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -111,7 +111,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index e4f7ce353c..c0742e8ce7 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -118,7 +118,7 @@
     </form-validator>
 
     <template #footer-actions="{ validateBeforeDeploy }">
-      <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
   </weblet-layout>
 </template>

From ae08ecb0d7efb8501122ee15b9bb728b585d07d2 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 28 May 2024 15:50:12 +0300
Subject: [PATCH 2/5] Apply vuetify default conf for chips

---
 .../src/components/contracts_list/contracts_table.vue  |  8 ++++----
 .../playground/src/components/k8s_deployment_table.vue |  4 +---
 .../src/components/manage_gateway_dialog.vue           |  5 ++---
 .../playground/src/components/manage_worker_dialog.vue |  2 +-
 packages/playground/src/components/networks.vue        | 10 +++++-----
 .../src/components/ssh_keys/SshDataDialog.vue          |  6 +++---
 .../playground/src/components/ssh_keys/SshTable.vue    |  2 +-
 .../playground/src/components/vm_deployment_table.vue  |  4 +---
 .../src/dashboard/components/NodeMintingDetails.vue    |  2 +-
 .../src/dashboard/components/public_ips_table.vue      |  2 +-
 packages/playground/src/plugins/vuetify.ts             |  6 ++++++
 packages/playground/src/views/orchestrators_view.vue   |  4 +---
 packages/playground/src/views/solutions_view.vue       |  9 +--------
 packages/playground/src/views/vms_view.vue             |  4 +---
 packages/playground/src/weblets/tf_deployment_list.vue |  2 +-
 15 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 1f129df50b..92cba8e377 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -203,7 +203,7 @@
 
       <v-alert class="mx-4" type="warning" variant="tonal">Deleting contracts may take a while to complete.</v-alert>
       <v-card-text>
-        <v-chip class="ma-1" color="primary" label v-for="c in selectedContracts" :key="c.contract_id">
+        <v-chip class="ma-1" label v-for="c in selectedContracts" :key="c.contract_id">
           {{ c.contract_id }}
         </v-chip>
       </v-card-text>
@@ -236,11 +236,11 @@
           </div>
           <div v-else-if="selectedLockedAmount > 0">
             You need to fund your account with
-            <span class="font-weight-bold">{{ Math.ceil(selectedLockedAmount - freeBalance) }} TFTs</span> to resume
-            your contracts
+            <span class="font-weight-bold">{{ Math.ceil(selectedLockedAmount - freeBalance) }} TFTs</span>
+            to resume your contracts
           </div>
         </v-alert>
-        <v-chip class="ma-1" color="primary" label v-for="c in selectedContracts" :key="c.contract_id">
+        <v-chip class="ma-1" label v-for="c in selectedContracts" :key="c.contract_id">
           {{ c.contract_id }}
         </v-chip>
         <v-card-actions>
diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index e376042e7a..d56b0089a8 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -120,9 +120,7 @@
       </template>
 
       <template #[`item.actions`]="{ item }">
-        <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
-          Deleting...
-        </v-chip>
+        <v-chip color="error" v-if="deleting && ($props.modelValue || []).includes(item.value)"> Deleting... </v-chip>
         <v-btn-group variant="tonal" v-else>
           <slot name="actions" :item="item"></slot>
         </v-btn-group>
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 25f7b1c17d..e8608042f5 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -188,7 +188,7 @@
       <v-card>
         <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
         <v-card-text class="d-flex flex-wrap">
-          <v-chip color="primary" label variant="tonal" class="mr-1 mb-1" v-for="gw in gatewaysToDelete" :key="gw.name">
+          <v-chip label class="mr-1 mb-1" v-for="gw in gatewaysToDelete" :key="gw.name">
             {{ gw.name }}
           </v-chip>
         </v-card-text>
@@ -196,9 +196,9 @@
         <v-divider />
 
         <v-card-actions class="d-flex justify-end">
+          <v-btn color="anchor" @click="requestDelete = false">Cancel</v-btn>
           <v-btn
             color="error"
-            size="small"
             :disabled="loadingGateways || deleting"
             @click="
               () => {
@@ -208,7 +208,6 @@
             "
             >Delete</v-btn
           >
-          <v-btn color="secondary" variant="tonal" size="small" @click="requestDelete = false">Cancel</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/packages/playground/src/components/manage_worker_dialog.vue b/packages/playground/src/components/manage_worker_dialog.vue
index 0b01d58abf..b9df10ebab 100644
--- a/packages/playground/src/components/manage_worker_dialog.vue
+++ b/packages/playground/src/components/manage_worker_dialog.vue
@@ -46,7 +46,7 @@
     <v-card>
       <v-card-title class="text-h5"> Are you sure you want to delete the following workers? </v-card-title>
       <v-card-text>
-        <v-chip class="ma-1" color="primary" label v-for="w in selectedWorkers" :key="w.name">
+        <v-chip class="ma-1" label v-for="w in selectedWorkers" :key="w.name">
           {{ w.name }}
         </v-chip>
       </v-card-text>
diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 83ed52dc33..d7b651b7a3 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -7,11 +7,11 @@
           <v-chip v-if="error" variant="text">
             <v-icon color="warning" icon="mdi-alert-circle" />
           </v-chip>
-          <v-chip v-if="ipv4" variant="outlined" size="small" class="ml-2"> IPV4 </v-chip>
-          <v-chip v-if="ipv6" variant="outlined" size="small" class="ml-2"> IPV6 </v-chip>
-          <v-chip v-if="planetary" variant="outlined" size="small" class="ml-2"> Planetary </v-chip>
-          <v-chip v-if="mycelium" variant="outlined" size="small" class="ml-2"> Mycelium </v-chip>
-          <v-chip v-if="wireguard" variant="outlined" size="small" class="ml-2"> Wireguard </v-chip>
+          <v-chip v-if="ipv4" variant="outlined" class="ml-2"> IPV4 </v-chip>
+          <v-chip v-if="ipv6" variant="outlined" class="ml-2"> IPV6 </v-chip>
+          <v-chip v-if="planetary" variant="outlined" class="ml-2"> Planetary </v-chip>
+          <v-chip v-if="mycelium" variant="outlined" class="ml-2"> Mycelium </v-chip>
+          <v-chip v-if="wireguard" variant="outlined" class="ml-2"> Wireguard </v-chip>
         </template>
         <v-expansion-panel-text>
           <input-tooltip
diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
index c432ca2351..7cd1924323 100644
--- a/packages/playground/src/components/ssh_keys/SshDataDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -38,14 +38,14 @@
 
           <v-tooltip text="Key status">
             <template #activator="{ props }">
-              <v-chip v-bind="props" color="primary" v-if="selectedKey.isActive">Active</v-chip>
-              <v-chip v-bind="props" color="grey-lighten-1" v-else>Inactive</v-chip>
+              <v-chip v-bind="props" v-if="selectedKey.isActive">Active</v-chip>
+              <v-chip v-bind="props" color="anchor" v-else>Inactive</v-chip>
             </template>
           </v-tooltip>
 
           <v-tooltip text="Created at">
             <template #activator="{ props }">
-              <v-chip v-bind="props" class="ml-2" color="primary">{{ selectedKey.createdAt }}</v-chip>
+              <v-chip v-bind="props" class="ml-2">{{ selectedKey.createdAt }}</v-chip>
             </template>
           </v-tooltip>
         </v-card-text>
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
index e845292300..007f91262d 100644
--- a/packages/playground/src/components/ssh_keys/SshTable.vue
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -26,7 +26,7 @@
         <template #[`item.createdAt`]="{ item }">
           <v-tooltip location="bottom" :text="`The date when this SSH key was created.`">
             <template #activator="{ props }">
-              <v-chip color="primary" v-bind="props">
+              <v-chip v-bind="props">
                 {{ item.createdAt }}
               </v-chip>
             </template>
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 976007fd90..da668e65b8 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -116,9 +116,7 @@
         {{ toHumanDate(item.created) }}
       </template>
       <template #[`item.actions`]="{ item }">
-        <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item)">
-          Deleting...
-        </v-chip>
+        <v-chip color="error" v-if="deleting && ($props.modelValue || []).includes(item)"> Deleting... </v-chip>
         <v-btn-group variant="tonal" v-else>
           <slot :name="projectName + '-actions'" :item="item" :update="updateItem"></slot>
         </v-btn-group>
diff --git a/packages/playground/src/dashboard/components/NodeMintingDetails.vue b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
index 7deaa29c6c..1a287ed7a4 100644
--- a/packages/playground/src/dashboard/components/NodeMintingDetails.vue
+++ b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
@@ -28,7 +28,7 @@
                 <v-row>
                   <v-list class="custom-list" density="compact">
                     <h3 class="mb-1 font-weight-medium">
-                      Minting Details<v-chip class="ma-2 me-auto" small :color="getChipColor(receipt.type)"
+                      Minting Details<v-chip class="ma-2 me-auto" :color="getChipColor(receipt.type)"
                         >{{ receipt.type }}
                       </v-chip>
                     </h3>
diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index b6610713be..46e9bb98f5 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -45,7 +45,7 @@
           <strong>Delete the following IPs?</strong>
         </v-card-title>
         <v-card-text>
-          <v-chip class="ma-1" color="primary" v-for="item in selectedItems" :key="item">
+          <v-chip class="ma-1" v-for="item in selectedItems" :key="item">
             {{ item.ip }}
           </v-chip>
         </v-card-text>
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 86f7488b1f..241fd4748b 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -27,8 +27,14 @@ const defaults = {
     VBtn: {
       variant: "outlined",
       color: "primary",
+      size: "small",
     },
   },
+  VChip: {
+    variant: "tonal",
+    color: "primary",
+    size: "small",
+  },
 };
 
 const vuetify = createVuetify({
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index d73786026b..f62e96691a 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -18,9 +18,7 @@
                 />
                 <v-card-title class="d-inline-block">
                   {{ card.title }}
-                  <v-chip v-if="card.flare" class="ml-2 pulse-animation" color="#1AA18F" small text-color="white">
-                    Community
-                  </v-chip>
+                  <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
                 </v-card-title>
                 <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
               </v-card>
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index e03ffe4735..7faa6c5e37 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -19,14 +19,7 @@
                 />
                 <v-card-title class="d-inline-block">
                   {{ card.title }}
-                  <v-chip
-                    v-for="tag in card.tags"
-                    :key="tag"
-                    class="ml-2 pulse-animation"
-                    color="#1AA18F"
-                    small
-                    text-color="white"
-                  >
+                  <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
                     {{ tag }}
                   </v-chip>
                 </v-card-title>
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index f4bcdb8f85..a60cce9865 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -18,9 +18,7 @@
                 />
                 <v-card-title class="d-inline-block">
                   {{ card.title }}
-                  <v-chip v-if="card.flare" class="ml-2 pulse-animation" color="#1AA18F" small text-color="white">
-                    Community
-                  </v-chip>
+                  <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
                 </v-card-title>
                 <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
               </v-card>
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index ccbd8cf562..3007050a34 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -341,7 +341,7 @@
         <strong>Delete the following deployments?</strong>
       </v-card-title>
       <v-card-text>
-        <v-chip class="ma-1" color="primary" v-for="item in selectedItems" :key="item.deploymentName">
+        <v-chip class="ma-1" v-for="item in selectedItems" :key="item.deploymentName">
           {{ item.deploymentName }}
         </v-chip>
       </v-card-text>

From c30c991bca4f18b5eea14afd0d4962093850a527 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 28 May 2024 16:50:47 +0300
Subject: [PATCH 3/5] Apply vuetify default conf for dialog

---
 .../src/components/contracts_list/contracts_table.vue      | 2 +-
 .../playground/src/components/deployment_data_dialog.vue   | 2 +-
 packages/playground/src/components/deposit_dialog.vue      | 7 +------
 .../playground/src/components/k8s_deployment_table.vue     | 2 +-
 .../playground/src/components/manage_gateway_dialog.vue    | 1 -
 .../playground/src/components/manage_worker_dialog.vue     | 1 -
 packages/playground/src/components/node_details.vue        | 1 -
 .../src/components/ssh_keys/ManageSshDeployemnt.vue        | 2 +-
 .../playground/src/components/ssh_keys/SshDataDialog.vue   | 2 +-
 .../playground/src/components/ssh_keys/SshFormDialog.vue   | 2 +-
 packages/playground/src/components/withdraw_dialog.vue     | 2 +-
 packages/playground/src/plugins/vuetify.ts                 | 3 +++
 packages/playground/src/views/sshkey_view.vue              | 1 +
 packages/playground/src/weblets/profile_manager.vue        | 2 +-
 14 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 92cba8e377..f55eb67de1 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -215,7 +215,7 @@
     </v-card>
   </v-dialog>
 
-  <v-dialog width="500" v-model="unlockDialog">
+  <v-dialog width="800" v-model="unlockDialog">
     <v-card>
       <v-card-title class="bg-primary">
         Unlock the following Contract<span v-if="selectedContracts.length > 1">s</span>
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index aa01bc22d0..65eda9560f 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row justify="center">
-    <v-dialog model-value @update:model-value="$emit('close')" scrollable width="70%">
+    <v-dialog model-value @update:model-value="$emit('close')" scrollable>
       <v-card>
         <v-card-title class="d-flex flex-column" v-if="!onlyJson">
           <div class="d-flex justify-center">
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index feab00a518..71a915237e 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -1,11 +1,6 @@
 <template>
   <v-container>
-    <v-dialog
-      transition="dialog-bottom-transition"
-      max-width="1000"
-      v-model="depositDialog"
-      @update:model-value="closeDialog"
-    >
+    <v-dialog transition="dialog-bottom-transition" v-model="depositDialog" @update:model-value="closeDialog">
       <v-card>
         <VCardTitle class="bg-primary">Deposit TFT</VCardTitle>
         <v-card-text>
diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index d56b0089a8..58bd2870ab 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -17,7 +17,7 @@
         </template>
       </v-tooltip>
 
-      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" max-width="500px">
+      <v-dialog transition="dialog-bottom-transition" v-model="showDialog">
         <v-card>
           <v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
           <v-divider color="#FFCC00" />
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index e8608042f5..c9c1c03226 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -4,7 +4,6 @@
       model-value
       @update:model-value="$emit('close')"
       scrollable
-      width="70%"
       :persistent="deleting || layout?.status === 'deploy'"
     >
       <weblet-layout
diff --git a/packages/playground/src/components/manage_worker_dialog.vue b/packages/playground/src/components/manage_worker_dialog.vue
index b9df10ebab..11f52a9bff 100644
--- a/packages/playground/src/components/manage_worker_dialog.vue
+++ b/packages/playground/src/components/manage_worker_dialog.vue
@@ -2,7 +2,6 @@
   <v-dialog
     model-value
     scrollable
-    width="70%"
     :persistent="layout?.status === 'deploy' || deleting"
     @update:model-value="$emit('close')"
   >
diff --git a/packages/playground/src/components/node_details.vue b/packages/playground/src/components/node_details.vue
index 0a7430ee68..fea79b3238 100644
--- a/packages/playground/src/components/node_details.vue
+++ b/packages/playground/src/components/node_details.vue
@@ -5,7 +5,6 @@
     @click:outside="() => $emit('close-dialog', false)"
     transition="dialog-bottom-transition"
     hide-overlay
-    class="w-75 mx-auto"
   >
     <v-toolbar color="primary">
       <div class="d-flex justify-center">
diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
index c705901f12..726db18725 100644
--- a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
+++ b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -31,7 +31,7 @@
     </v-card>
   </div>
 
-  <v-dialog v-model="openManageDialog" max-width="850">
+  <v-dialog v-model="openManageDialog" max-width="800">
     <v-card>
       <v-toolbar color="primary" class="custom-toolbar">
         <p class="mb-5">
diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
index 7cd1924323..7049fd7214 100644
--- a/packages/playground/src/components/ssh_keys/SshDataDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -3,7 +3,7 @@
     @click:outside="() => $emit('close')"
     @keydown.esc="() => $emit('close')"
     v-model="$props.open"
-    max-width="750"
+    max-width="800"
   >
     <template v-slot:default>
       <v-card>
diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
index f957784870..4beba0f58d 100644
--- a/packages/playground/src/components/ssh_keys/SshFormDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -3,7 +3,7 @@
     @click:outside="() => $emit('close')"
     @keydown.esc="() => $emit('close')"
     v-model="$props.open"
-    max-width="750"
+    max-width="800"
   >
     <template v-slot:default>
       <v-form v-model="isValidForm">
diff --git a/packages/playground/src/components/withdraw_dialog.vue b/packages/playground/src/components/withdraw_dialog.vue
index 93f58d87e9..bdadd1aa54 100644
--- a/packages/playground/src/components/withdraw_dialog.vue
+++ b/packages/playground/src/components/withdraw_dialog.vue
@@ -2,7 +2,7 @@
   <v-container>
     <v-dialog
       transition="dialog-bottom-transition"
-      max-width="1000"
+      max-width="50%"
       v-model="withdrawDialog"
       @update:model-value="closeDialog"
     >
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 241fd4748b..62b939b47e 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -35,6 +35,9 @@ const defaults = {
     color: "primary",
     size: "small",
   },
+  VDialog: {
+    width: "70%",
+  },
 };
 
 const vuetify = createVuetify({
diff --git a/packages/playground/src/views/sshkey_view.vue b/packages/playground/src/views/sshkey_view.vue
index e2b67a4f87..1741b97b49 100644
--- a/packages/playground/src/views/sshkey_view.vue
+++ b/packages/playground/src/views/sshkey_view.vue
@@ -46,6 +46,7 @@
 
       <v-btn
         class="mr-2"
+        variant="elevated"
         :disabled="loading || deleting || generatingSSH || savingKey || activating"
         @click="openDialog(SSHCreationMethod.Generate)"
         prepend-icon="mdi-key-plus"
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 7255bb5109..9311944cd8 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -200,7 +200,7 @@
                 </template>
               </VTooltip>
 
-              <v-dialog v-model="openAcceptTerms" fullscreen>
+              <v-dialog v-model="openAcceptTerms" fullscreen width="100%">
                 <v-card v-if="!termsLoading">
                   <v-card-text class="pa-15" v-html="acceptTermsContent"></v-card-text>
                   <div class="terms-footer">

From 8fb55485018b0d0b8e504ca15fd9274152d2558c Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 4 Jun 2024 17:05:45 +0300
Subject: [PATCH 4/5] Add and apply default vuetify values to the components

---
 .../playground/src/components/app_info.vue    |  2 +-
 .../contracts_list/contracts_table.vue        |  8 +-
 .../src/components/deployment_data_dialog.vue |  3 +-
 .../src/components/deposit_dialog.vue         | 10 +-
 .../playground/src/components/funds_card.vue  | 15 +--
 .../src/components/k8s_deployment_table.vue   |  2 +-
 packages/playground/src/components/logger.vue |  3 +-
 .../manage_caprover_worker_dialog.vue         |  3 +-
 .../src/components/manage_gateway_dialog.vue  |  7 +-
 .../src/components/manage_worker_dialog.vue   |  1 -
 .../ssh_keys/ManageSshDeployemnt.vue          | 91 +++++++++----------
 .../src/components/ssh_keys/SshDataDialog.vue | 20 +---
 .../src/components/ssh_keys/SshFormDialog.vue | 50 +++++-----
 .../src/components/ssh_keys/SshTable.vue      |  6 +-
 .../src/components/vm_deployment_table.vue    |  2 +-
 .../src/components/weblet_layout.vue          |  5 +-
 .../src/components/withdraw_dialog.vue        |  8 +-
 .../src/dashboard/components/add_ip.vue       | 18 +---
 .../src/dashboard/components/create_farm.vue  | 10 +-
 .../dashboard/components/public_config.vue    | 64 +++++--------
 .../dashboard/components/public_ips_table.vue | 16 +---
 .../components/reserve_action_btn.vue         |  4 +-
 .../dashboard/components/set_extra_fee.vue    | 11 +--
 .../playground/src/dashboard/dao_view.vue     |  4 +-
 .../src/dashboard/transfer_view.vue           |  3 +-
 .../playground/src/dashboard/twin_view.vue    | 10 +-
 packages/playground/src/plugins/vuetify.ts    |  4 +-
 .../src/weblets/profile_manager.vue           | 10 +-
 .../src/weblets/tf_contracts_list.vue         | 88 +++++++++---------
 .../src/weblets/tf_deployment_list.vue        |  4 +-
 30 files changed, 204 insertions(+), 278 deletions(-)

diff --git a/packages/playground/src/components/app_info.vue b/packages/playground/src/components/app_info.vue
index 7563fa2799..1c26110421 100644
--- a/packages/playground/src/components/app_info.vue
+++ b/packages/playground/src/components/app_info.vue
@@ -24,7 +24,7 @@
 
       <v-divider class="mb-2" />
       <v-card-actions class="d-flex justify-end">
-        <v-btn color="anchor" @click="setOpenInfo(false)">Close</v-btn>
+        <v-btn color="anchor" class="mr-2 my-1" @click="setOpenInfo(false)">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index f55eb67de1..d615bc49e4 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -163,7 +163,6 @@
         >
 
         <v-card-actions>
-          <v-spacer></v-spacer>
           <v-btn color="anchor" class="mr-2 px-3" @click="contractStateDialog = false"> Close </v-btn>
           <v-tooltip
             :text="
@@ -195,7 +194,7 @@
 
   <v-dialog width="800" v-model="deletingDialog">
     <v-card>
-      <v-card-title class="text-h5 mt-2"> Delete the following contracts? </v-card-title>
+      <v-card-title class="bg-primary"> Delete the following contracts? </v-card-title>
       <v-alert class="ma-4" type="warning" variant="tonal"
         >It is advisable to remove the contract from its solution page, especially when multiple contracts may be linked
         to the same instance.</v-alert
@@ -206,9 +205,9 @@
         <v-chip class="ma-1" label v-for="c in selectedContracts" :key="c.contract_id">
           {{ c.contract_id }}
         </v-chip>
+        <v-divider class="mt-3" />
       </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
+      <v-card-actions class="justify-end mb-1 mr-2">
         <v-btn color="anchor" @click="deletingDialog = false"> Cancel </v-btn>
         <v-btn color="error" @click="onDelete"> Delete </v-btn>
       </v-card-actions>
@@ -244,7 +243,6 @@
           {{ c.contract_id }}
         </v-chip>
         <v-card-actions>
-          <v-spacer></v-spacer>
           <v-btn color="anchor" @click="unlockDialog = false"> Cancel </v-btn>
           <v-tooltip
             :text="
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index 65eda9560f..a985911185 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -111,8 +111,7 @@
           </pre>
           </template>
         </v-card-text>
-        <v-card-actions class="my-1">
-          <v-spacer />
+        <v-card-actions class="justify-end my-1 mr-2">
           <v-btn color="anchor" @click="$emit('close')">Close</v-btn>
           <v-btn color="secondary" @click="copy">Copy</v-btn>
         </v-card-actions>
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index 71a915237e..652f2c29bb 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -62,14 +62,14 @@
                   </div>
                 </div>
               </v-col>
-              <v-divider horizontal></v-divider>
             </v-row>
           </v-container>
-          <v-card-actions class="justify-end">
-            <v-btn color="anchor" class="mr-2 px-3" @click="closeDialog"> Close </v-btn>
-            <v-btn color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
-          </v-card-actions>
+          <v-divider />
         </v-card-text>
+        <v-card-actions class="justify-end my-1 mr-2">
+          <v-btn color="anchor" @click="closeDialog"> Close </v-btn>
+          <v-btn color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
+        </v-card-actions>
       </v-card>
     </v-dialog>
   </v-container>
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index 4586fc9129..01b774e96f 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -1,21 +1,12 @@
 <template>
   <v-tooltip location="bottom" close-delay="1000" color="primary">
     <template #activator="{ props }">
-      <v-btn
-        id="tftBtn"
-        variant="elevated"
-        @click="addTFT"
-        class="px-lg-6 px-md-2 px-sm-0 mx-sm-0"
-        :loading="loadingAddTFT"
-        v-bind="props"
-      >
-        GET TFT
-      </v-btn>
+      <v-btn id="tftBtn" variant="elevated" @click="addTFT" :loading="loadingAddTFT" v-bind="props"> GET TFT </v-btn>
     </template>
     <div>
       Get TFT on Stellar using BTC or Credit card, then you can bridge it to your tfchain account using the Bridge in
       the dashboard section.
-      <v-btn icon color="anchor" small @click.stop :href="manual.buy_sell_tft" target="_blank"
+      <v-btn icon small @click.stop :href="manual.buy_sell_tft" target="_blank"
         ><v-icon>mdi-information-outline</v-icon></v-btn
       >
     </div>
@@ -69,7 +60,7 @@ export default {
 <style>
 #tftBtn {
   display: inline-block;
-  min-width: 10px !important;
+  font-weight: bold;
 }
 
 :root {
diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 58bd2870ab..888d730108 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -49,7 +49,7 @@
               </template>
             </li>
           </v-card-text>
-          <v-card-actions class="justify-end">
+          <v-card-actions class="justify-end my-1 mr-2">
             <v-btn @click="showDialog = false" color="anchor">Close</v-btn>
           </v-card-actions>
         </v-card>
diff --git a/packages/playground/src/components/logger.vue b/packages/playground/src/components/logger.vue
index e2bc3249f2..f6747baecc 100644
--- a/packages/playground/src/components/logger.vue
+++ b/packages/playground/src/components/logger.vue
@@ -80,8 +80,7 @@
     <v-card>
       <VCardTitle v-text="'Clear Logs'" />
       <VCardText v-text="'This will delete all of your logs. Be careful this operation is irreversible!'" />
-      <v-card-actions>
-        <v-spacer />
+      <v-card-actions class="justify-end mb-1 mr-2">
         <v-btn color="anchor" @click="clearDialog = false" text="Cancel" />
         <v-btn color="error" @click="clearLogs.run()" text="clear" />
       </v-card-actions>
diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
index 1089897de7..80e0581631 100644
--- a/packages/playground/src/components/manage_caprover_worker_dialog.vue
+++ b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -66,10 +66,9 @@
           </li>
           <li>Click <strong>Join cluster</strong> button.</li>
         </ol>
+        <v-divider />
       </v-card-text>
 
-      <v-divider />
-
       <v-card-actions>
         <v-spacer />
         <v-btn color="anchor" @click="deployedDialog = false">Close</v-btn>
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index c9c1c03226..7acb8d2fbd 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -187,14 +187,13 @@
       <v-card>
         <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
         <v-card-text class="d-flex flex-wrap">
-          <v-chip label class="mr-1 mb-1" v-for="gw in gatewaysToDelete" :key="gw.name">
+          <v-chip label class="mr-1 mb-5" v-for="gw in gatewaysToDelete" :key="gw.name">
             {{ gw.name }}
           </v-chip>
+          <v-divider />
         </v-card-text>
 
-        <v-divider />
-
-        <v-card-actions class="d-flex justify-end">
+        <v-card-actions class="justify-end mb-1 mr-2">
           <v-btn color="anchor" @click="requestDelete = false">Cancel</v-btn>
           <v-btn
             color="error"
diff --git a/packages/playground/src/components/manage_worker_dialog.vue b/packages/playground/src/components/manage_worker_dialog.vue
index 11f52a9bff..8e8da0fc1a 100644
--- a/packages/playground/src/components/manage_worker_dialog.vue
+++ b/packages/playground/src/components/manage_worker_dialog.vue
@@ -50,7 +50,6 @@
         </v-chip>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
         <v-btn color="anchor" @click="deletingDialog = false"> Cancel </v-btn>
         <v-btn color="error" @click="onDelete"> Remove </v-btn>
       </v-card-actions>
diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
index 726db18725..7635cb5fa6 100644
--- a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
+++ b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -10,19 +10,16 @@
         <v-alert v-if="selectedKeys.length === 0" type="warning" class="mt-2">
           Attention: It appears that no SSH keys have been selected. In order to access your deployment, you must send
           at least one SSH key. You can manage your SSH keys from the
-          <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link> and add more as
-          needed.
+          <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link>
+          and add more as needed.
         </v-alert>
+        <VDivider class="mt-3" />
       </v-card-text>
 
-      <VDivider />
-
-      <v-card-actions>
-        <VSpacer />
+      <v-card-actions class="justify-end mb-1 mr-2">
         <v-btn
           color="secondary"
           @click="openManageDialog = true"
-          class="mr-2 my-1"
           :disabled="sshKeysManagement.list() && sshKeysManagement.list().length === 0"
         >
           Manage SSH keys
@@ -33,12 +30,10 @@
 
   <v-dialog v-model="openManageDialog" max-width="800">
     <v-card>
-      <v-toolbar color="primary" class="custom-toolbar">
-        <p class="mb-5">
-          <v-icon>mdi-cog-sync</v-icon>
-          Manage SSH keys
-        </p>
-      </v-toolbar>
+      <v-card-title class="bg-primary">
+        <v-icon>mdi-cog-sync</v-icon>
+        Manage SSH keys
+      </v-card-title>
 
       <v-card-text>
         <v-alert type="info" class="mb-5">
@@ -46,40 +41,38 @@
           to cancel or add.
         </v-alert>
 
-        <v-row>
-          <v-tooltip
-            v-for="_key of sshKeysManagement.list()"
-            :key="_key.id"
-            :text="isKeySelected(_key) ? 'Selected' : 'Not selected'"
-            location="bottom"
-          >
-            <template #activator="{ props }">
-              <v-chip
-                class="pa-5 ml-5 mt-5"
-                :variant="isKeySelected(_key) ? 'flat' : 'outlined'"
-                :color="
-                  isKeySelected(_key) ? 'primary' : theme.name.value === AppThemeSelection.light ? 'primary' : 'white'
-                "
-                v-bind="props"
-                @click="selectKey(_key)"
-              >
-                <div class="d-flex justify-center">
-                  <v-icon>mdi-key-variant</v-icon>
-                </div>
-                <div class="d-flex justify-center">
-                  <p class="ml-2">
-                    {{ capitalize(_key.name) }}
-                  </p>
-                </div>
-              </v-chip>
-            </template>
-          </v-tooltip>
-        </v-row>
+        <v-tooltip
+          v-for="_key of sshKeysManagement.list()"
+          :key="_key.id"
+          :text="isKeySelected(_key) ? 'Selected' : 'Not selected'"
+          location="bottom"
+        >
+          <template #activator="{ props }">
+            <v-chip
+              class="pa-5 ml-5 mt-5"
+              :variant="isKeySelected(_key) ? 'flat' : 'outlined'"
+              :color="
+                isKeySelected(_key) ? 'primary' : theme.name.value === AppThemeSelection.light ? 'primary' : 'white'
+              "
+              v-bind="props"
+              @click="selectKey(_key)"
+            >
+              <div class="d-flex justify-center">
+                <v-icon>mdi-key-variant</v-icon>
+              </div>
+              <div class="d-flex justify-center">
+                <p class="ml-2">
+                  {{ capitalize(_key.name) }}
+                </p>
+              </div>
+            </v-chip>
+          </template>
+        </v-tooltip>
+        <v-divider class="mt-3" />
       </v-card-text>
 
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn class="mt-2 mb-2 mr-2" color="anchor" text="Close" @click="openManageDialog = false" />
+      <v-card-actions class="justify-end mb-1 mr-2">
+        <v-btn color="anchor" text="Close" @click="openManageDialog = false" />
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -116,7 +109,13 @@ export default defineComponent({
 
   setup(_, { emit }) {
     const inputElement = ref<HTMLElement>();
-    const defaultKeyData = { createdAt: "", id: 0, publicKey: "", name: "", isActive: false };
+    const defaultKeyData = {
+      createdAt: "",
+      id: 0,
+      publicKey: "",
+      name: "",
+      isActive: false,
+    };
     const openManageDialog = ref<boolean>(false);
     const selectedKey = ref<SSHKeyData>(defaultKeyData);
     const selectedKeys = ref<SSHKeyData[]>([]);
diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
index 7049fd7214..d2eb747e29 100644
--- a/packages/playground/src/components/ssh_keys/SshDataDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -45,17 +45,15 @@
 
           <v-tooltip text="Created at">
             <template #activator="{ props }">
-              <v-chip v-bind="props" class="ml-2">{{ selectedKey.createdAt }}</v-chip>
+              <v-chip v-bind="props" class="ma-2">{{ selectedKey.createdAt }}</v-chip>
             </template>
           </v-tooltip>
+          <v-divider />
         </v-card-text>
 
-        <v-card-actions class="mb-3 custom-actions">
-          <v-spacer></v-spacer>
-          <div class="mt-2">
-            <v-btn color="white" text="Close" @click="$emit('close')"></v-btn>
-            <v-btn text="Save" @click="updateKey" :loading="loading"></v-btn>
-          </div>
+        <v-card-actions class="justify-end mb-1 mr-2">
+          <v-btn color="anchor" text="Close" @click="$emit('close')"></v-btn>
+          <v-btn text="Save" @click="updateKey" :loading="loading"></v-btn>
         </v-card-actions>
       </v-card>
     </template>
@@ -151,12 +149,4 @@ export default defineComponent({
 .ssh-key .v-field__input {
   height: 230px !important;
 }
-.custom-actions {
-  border-top: 1px solid rgb(101 99 99);
-  display: flex;
-  justify-content: center;
-  margin-right: 15px;
-  margin-left: 15px;
-  margin-top: 15px;
-}
 </style>
diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
index 4beba0f58d..1eddfb967e 100644
--- a/packages/playground/src/components/ssh_keys/SshFormDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -32,11 +32,12 @@
 
             <v-alert width="95%" class="mb-4" type="info">
               {{ $props.dialogType === SSHCreationMethod.Generate ? "Generating" : "Importing" }}
-              a new SSH key will cost you up to {{ sshKeysManagement.updateCost }} TFT
+              a new SSH key will cost you up to
+              {{ sshKeysManagement.updateCost }} TFT
             </v-alert>
 
             <div v-if="$props.dialogType === SSHCreationMethod.Generate" class="create">
-              <v-alert width="95%" type="info" class="mt-4">
+              <v-alert width="95%" type="info" class="my-4">
                 We will not keep your private key information. Be sure to save the private key downloaded after
                 creation.
               </v-alert>
@@ -63,32 +64,29 @@
                 </CopyInputWrapper>
               </input-tooltip>
             </div>
+            <v-divider />
           </v-card-text>
 
-          <v-card-actions class="custom-actions">
-            <v-spacer></v-spacer>
-            <div class="mt-3">
-              <v-btn color="white" text="Close" @click="$emit('close')"></v-btn>
-
-              <v-btn
-                v-if="$props.dialogType === SSHCreationMethod.Generate"
-                @click="generateSSHKey"
-                :loading="generating"
-                :disabled="!isValidForm || generating || !!generatedSshKey"
-                color="secondary"
-              >
-                Generate and Save
-              </v-btn>
-              <v-btn
-                v-if="$props.dialogType === SSHCreationMethod.Import"
-                :loading="$props.savingKey"
-                :disabled="!isValidForm"
-                color="secondary"
-                variant="outlined"
-                text="Save"
-                @click="createNewSSHKey"
-              ></v-btn>
-            </div>
+          <v-card-actions class="justify-end mb-1 mr-2">
+            <v-btn color="anchor" text="Close" @click="$emit('close')"></v-btn>
+
+            <v-btn
+              v-if="$props.dialogType === SSHCreationMethod.Generate"
+              @click="generateSSHKey"
+              :loading="generating"
+              :disabled="!isValidForm || generating || !!generatedSshKey"
+              color="secondary"
+            >
+              Generate and Save
+            </v-btn>
+            <v-btn
+              v-if="$props.dialogType === SSHCreationMethod.Import"
+              :loading="$props.savingKey"
+              :disabled="!isValidForm"
+              color="secondary"
+              text="Save"
+              @click="createNewSSHKey"
+            ></v-btn>
           </v-card-actions>
         </v-card>
       </v-form>
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
index 007f91262d..65312daea8 100644
--- a/packages/playground/src/components/ssh_keys/SshTable.vue
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -93,15 +93,13 @@
       </v-data-table>
     </v-card-text>
 
-    <v-divider />
+    <!-- <v-divider /> -->
 
-    <v-card-actions>
-      <v-spacer />
+    <v-card-actions class="justify-end my-1 mr-2">
       <v-tooltip location="bottom" text="Export all selected keys.">
         <template #activator="{ props }">
           <v-btn
             :disabled="loading || selectedKeys.length === 0 || $props.sshKeys.length === 0 || deleting"
-            class="mr-2"
             :loading="loading"
             v-bind="props"
             prepend-icon="mdi-export"
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index da668e65b8..1ab8330ad1 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -42,7 +42,7 @@
               </template>
             </v-list>
           </v-card-text>
-          <v-card-actions class="justify-end">
+          <v-card-actions class="justify-end my-1 mr-2">
             <v-btn @click="showDialog = false" color="anchor">Close</v-btn>
           </v-card-actions>
         </v-card>
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 4c8b86470e..6ff84402e9 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -87,9 +87,8 @@
           Learn more about the pricing and how to unlock discounts.
         </a>
       </v-alert>
-      <v-divider class="mt-5" />
-      <v-card-actions>
-        <v-spacer />
+      <v-divider class="mt-3" />
+      <v-card-actions class="justify-end my-1 mr-2">
         <slot name="footer-actions" :validateBeforeDeploy="validateBeforeDeploy" v-if="!status" />
         <v-btn v-else color="secondary" :loading="status === 'deploy'" @click="reset"> Back </v-btn>
       </v-card-actions>
diff --git a/packages/playground/src/components/withdraw_dialog.vue b/packages/playground/src/components/withdraw_dialog.vue
index bdadd1aa54..a8f3cc527f 100644
--- a/packages/playground/src/components/withdraw_dialog.vue
+++ b/packages/playground/src/components/withdraw_dialog.vue
@@ -7,7 +7,7 @@
       @update:model-value="closeDialog"
     >
       <v-card>
-        <v-toolbar color="primary" dark class="bold-text justify-center"> Withdraw TFT </v-toolbar>
+        <v-card-title class="bg-primary"> Withdraw TFT </v-card-title>
         <v-card-text>
           Interact with the bridge in order to withdraw your TFT to
           {{ selectedName?.charAt(0).toUpperCase() + selectedName!.slice(1) }} (withdraw fee is: {{ withdrawFee }} TFT)
@@ -50,11 +50,11 @@
               </v-text-field>
             </InputValidator>
           </FormValidator>
+          <v-divider />
         </v-card-text>
-        <v-card-actions class="justify-end pb-4 px-6">
-          <v-btn color="anchor" class="px-3" @click="closeDialog"> Close </v-btn>
+        <v-card-actions class="justify-end mb-1 mr-2">
+          <v-btn color="anchor" @click="closeDialog"> Close </v-btn>
           <v-btn
-            class="px-3"
             color="secondary"
             @click="withdrawTFT(target, amount)"
             :disabled="!valid || validatingAddress"
diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index b3cacf7056..193fb30558 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -6,10 +6,8 @@
     <v-container v-if="showDialogue">
       <v-dialog v-model="showDialogue" max-width="600">
         <v-card>
-          <v-toolbar color="primary" class="custom-toolbar">
-            <p class="mb-5">Add Public IP to Farm</p>
-          </v-toolbar>
-          <div class="pa-6">
+          <v-card-title class="bg-primary">Add Public IP to Farm</v-card-title>
+          <v-card-text>
             <form-validator ref="formValidator" v-model="valid">
               <v-select
                 :items="items"
@@ -72,7 +70,8 @@
                 </input-tooltip>
               </input-validator>
             </form-validator>
-          </div>
+            <v-divider />
+          </v-card-text>
           <v-dialog v-model="showIPs" max-width="500">
             <v-card>
               <v-card-title class="text-h5">IPs range</v-card-title>
@@ -81,7 +80,7 @@
             </v-card>
           </v-dialog>
 
-          <v-card-actions class="justify-end pa-5">
+          <v-card-actions class="justify-end mb-1 mr-2">
             <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
 
             <v-btn @click="showRange" :disabled="!valid || type === IPType.single || !toPublicIP">Show IPs Range</v-btn>
@@ -324,10 +323,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.custom-toolbar {
-  height: 2.5rem !important;
-  padding-left: 10px;
-}
-</style>
diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
index 709a79053b..369578c620 100644
--- a/packages/playground/src/dashboard/components/create_farm.vue
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -17,10 +17,8 @@
     <v-container v-if="showDialogue">
       <v-dialog v-model="showDialogue" max-width="600">
         <v-card>
-          <v-toolbar color="primary" dark class="custom-toolbar">
-            <p class="mb-5">Create Farm</p>
-          </v-toolbar>
-          <div class="pt-6 px-6">
+          <v-card-title class="bg-primary"> Create Farm </v-card-title>
+          <v-card-text>
             <form-validator v-model="valid">
               <input-validator
                 :value="$props.name"
@@ -45,8 +43,8 @@
                 ></v-text-field>
               </input-validator>
             </form-validator>
-          </div>
-          <v-card-actions class="justify-end px-5 pb-5 pt-0">
+          </v-card-text>
+          <v-card-actions class="justify-end my-1 mr-2">
             <v-btn color="anchor" @click="showDialogue = false">Close</v-btn>
             <v-btn @click="createFarm" :loading="isCreating" :disabled="!valid || isCreating">Create</v-btn>
           </v-card-actions>
diff --git a/packages/playground/src/dashboard/components/public_config.vue b/packages/playground/src/dashboard/components/public_config.vue
index 9ed210232f..65106564e5 100644
--- a/packages/playground/src/dashboard/components/public_config.vue
+++ b/packages/playground/src/dashboard/components/public_config.vue
@@ -18,10 +18,10 @@
     <template v-if="showDialogue">
       <v-dialog v-model="showDialogue" max-width="600" @click:outside="reset">
         <v-card>
-          <v-toolbar color="primary" dark class="custom-toolbar">
-            <p class="mb-5">Add a public config to your node with ID: {{ $props.nodeId }}</p>
-          </v-toolbar>
-          <div class="pt-6 px-6">
+          <v-card-title class="bg-primary">
+            Add a public config to your node with ID: {{ $props.nodeId }}
+          </v-card-title>
+          <v-card-text>
             <form-validator v-model="valid" ref="formRef">
               <!-- IPv4 -->
               <input-validator
@@ -98,9 +98,17 @@
                 </input-tooltip>
               </input-validator>
             </form-validator>
-          </div>
-          <v-card-actions class="justify-space-between px-5 pb-5 pt-0">
+          </v-card-text>
+          <v-card-actions class="justify-end my-1 mr-2">
             <!-- Remove and Generate Config Buttons -->
+            <v-btn
+              @click="
+                showDialogue = false;
+                reset();
+              "
+              color="anchor"
+              >Close</v-btn
+            >
             <v-btn
               @click="isNodeHasConfig"
               color="error"
@@ -108,26 +116,14 @@
             >
               Remove Config
             </v-btn>
-
-            <!-- Close and Save Buttons -->
-            <div>
-              <v-btn
-                @click="
-                  showDialogue = false;
-                  reset();
-                "
-                color="anchor"
-                >Close</v-btn
-              >
-              <v-btn
-                color="secondary"
-                @click="AddConfig"
-                :loading="isSaving"
-                :disabled="isSaving || !valid || (valid && !isConfigChanged)"
-              >
-                Save
-              </v-btn>
-            </div>
+            <v-btn
+              color="secondary"
+              @click="AddConfig"
+              :loading="isSaving"
+              :disabled="isSaving || !valid || (valid && !isConfigChanged)"
+            >
+              Save
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -137,12 +133,10 @@
     <template v-if="showClearDialogue">
       <v-dialog v-model="showClearDialogue" width="650">
         <v-card>
-          <v-toolbar color="primary" dark class="custom-toolbar">
-            <p class="mb-5">Remove Public Config</p>
-          </v-toolbar>
-          <v-card-text class="mb-3">Are you sure you want to remove this node's public config? </v-card-text>
+          <v-card-title class="bg-primary"> Remove Public Config </v-card-title>
+          <v-card-text>Are you sure you want to remove this node's public config? </v-card-text>
 
-          <v-card-actions class="justify-end px-5 pb-5 pt-0">
+          <v-card-actions class="justify-end my-1 mr-2">
             <!-- Cancel and Remove Buttons -->
             <v-btn text="Cancel" color="anchor" @click="showClearDialogue = false"></v-btn>
             <v-btn
@@ -164,7 +158,6 @@ import type { PublicConfig } from "@threefold/grid_client";
 import { isEqual } from "lodash";
 import { onMounted, ref, watch } from "vue";
 
-import type { RuleReturn } from "@/components/input_validator.vue";
 import { useFormRef } from "@/hooks/form_validator";
 import { useGrid } from "@/stores";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
@@ -317,10 +310,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.custom-toolbar {
-  height: 2.5rem !important;
-  padding-left: 10px;
-}
-</style>
diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 46e9bb98f5..2aeda1d9c5 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -8,7 +8,7 @@
       v-model="selectedItems"
     >
       <template v-slot:top>
-        <v-alert class="pa-5" style="height: 20px">
+        <v-alert>
           <h4 class="text-center font-weight-medium">Public IPs</h4>
         </v-alert>
       </template>
@@ -38,18 +38,16 @@
     </ListTable>
     <v-dialog v-model="showDialogue" max-width="600">
       <v-card>
-        <v-toolbar color="primary" class="custom-toolbar">
-          <p class="mb-5">Delete IPs</p>
-        </v-toolbar>
         <v-card-title class="text-subtitle-1">
           <strong>Delete the following IPs?</strong>
         </v-card-title>
         <v-card-text>
-          <v-chip class="ma-1" v-for="item in selectedItems" :key="item">
+          <v-chip class="mb-5" v-for="item in selectedItems" :key="item">
             {{ item.ip }}
           </v-chip>
+          <v-divider />
         </v-card-text>
-        <v-card-actions class="justify-end px-5 pb-5 pt-0">
+        <v-card-actions class="justify-end mb-1 mr-2">
           <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
           <v-btn
             text="Confirm"
@@ -200,9 +198,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.custom-toolbar {
-  height: 2.5rem !important;
-  padding-left: 10px;
-}
-</style>
diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
index 54613d6279..55a0acad15 100644
--- a/packages/playground/src/dashboard/components/reserve_action_btn.vue
+++ b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -10,18 +10,16 @@
         </v-card-title>
         <v-divider />
         <v-card-text>This will free up the node for others on the chain</v-card-text>
-        <v-card-actions class="justify-end">
+        <v-card-actions class="justify-end mb-1 mr-2">
           <v-btn color="anchor" @click="openUnreserveDialog = false">Close</v-btn>
           <v-btn color="error" @click="unReserveNode" :loading="loadingUnreserveNode">Confirm</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
     <v-btn
-      size="small"
       :loading="loadingReserveNode"
       v-if="node.rentedByTwinId === 0"
       :disabled="disableButton || hasInsufficientBalance"
-      color="primary"
       @click.stop="reserveNode"
     >
       Reserve
diff --git a/packages/playground/src/dashboard/components/set_extra_fee.vue b/packages/playground/src/dashboard/components/set_extra_fee.vue
index 64d982c662..ba852a3d77 100644
--- a/packages/playground/src/dashboard/components/set_extra_fee.vue
+++ b/packages/playground/src/dashboard/components/set_extra_fee.vue
@@ -18,14 +18,12 @@
     <span v-if="showDialogue">
       <v-dialog v-model="showDialogue" max-width="600">
         <v-card>
-          <v-toolbar color="primary" dark class="custom-toolbar">
-            <p class="mb-5">Set Additional Fees</p>
-          </v-toolbar>
+          <v-card-title class="bg-primary"> Set Additional Fees </v-card-title>
           <v-card-text>
             Additional fees will be added to your node {{ $props.nodeId }} (for the special hardware you’re providing
             e.g. GPUs) while renting.
           </v-card-text>
-          <div class="pt-6 px-6">
+          <v-card-text>
             <form-validator v-model="valid">
               <input-validator
                 :value="fee"
@@ -49,8 +47,9 @@
                 </input-tooltip>
               </input-validator>
             </form-validator>
-          </div>
-          <v-card-actions class="justify-end px-5 pb-5 pt-0">
+            <v-divider></v-divider>
+          </v-card-text>
+          <v-card-actions class="justify-end my-1 mr-2">
             <v-btn @click="showDialogue = false" color="anchor">Close</v-btn>
             <v-btn
               color="secondary"
diff --git a/packages/playground/src/dashboard/dao_view.vue b/packages/playground/src/dashboard/dao_view.vue
index 0afff049c6..1813d778b7 100644
--- a/packages/playground/src/dashboard/dao_view.vue
+++ b/packages/playground/src/dashboard/dao_view.vue
@@ -233,7 +233,7 @@
               </input-validator>
             </form-validator>
           </v-card-text>
-          <v-card-actions class="justify-end">
+          <v-card-actions class="justify-end mb-1 mr-2">
             <v-btn @click="openVDialog = false" color="anchor">Close</v-btn>
             <v-btn @click="castVote" :loading="loadingVote" color="secondary" :disabled="!isValidFarm">Vote</v-btn>
           </v-card-actions>
@@ -283,7 +283,7 @@
 
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn @click="openInfoModal = false" class="my-1" color="anchor"> Close </v-btn>
+            <v-btn @click="openInfoModal = false" color="anchor"> Close </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
diff --git a/packages/playground/src/dashboard/transfer_view.vue b/packages/playground/src/dashboard/transfer_view.vue
index 24c24811a4..b59c7e4db8 100644
--- a/packages/playground/src/dashboard/transfer_view.vue
+++ b/packages/playground/src/dashboard/transfer_view.vue
@@ -50,8 +50,7 @@
                 </input-tooltip>
               </input-validator>
             </form-validator>
-            <v-card-actions>
-              <v-spacer></v-spacer>
+            <v-card-actions class="justify-end mb-1 mr-2">
               <v-btn @click="clearInput" color="anchor" :disabled="loadingTwinIDTransfer">Clear</v-btn>
               <v-btn
                 color="secondary"
diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
index 303001b6bd..c8be5b4807 100644
--- a/packages/playground/src/dashboard/twin_view.vue
+++ b/packages/playground/src/dashboard/twin_view.vue
@@ -7,7 +7,7 @@
           <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-card-actions class="justify-end mb-1 mr-2">
             <v-btn @click="editingTwin = false" color="anchor">Close</v-btn>
             <v-btn @click="UpdateRelay">Save</v-btn>
           </v-card-actions>
@@ -19,9 +19,9 @@
       <v-card>
         <v-toolbar color="primary" dark class="custom-toolbar bold-text">Vote Reminder</v-toolbar>
         <v-card-text>There are {{ numberOfProposalsToVoteOn }} active proposals you can vote on now</v-card-text>
-        <v-card-actions class="justify-end pa-5">
-          <v-btn @click="redirectToDao" variant="elevated" class="mr-2 text-subtitle-2">Vote</v-btn>
-          <v-btn @click="openVotePopup = false" color="anchor" class="mr-2 text-subtitle-2">Close</v-btn>
+        <v-card-actions class="justify-end mb-1 mr-2">
+          <v-btn @click="redirectToDao" variant="elevated">Vote</v-btn>
+          <v-btn @click="openVotePopup = false" color="anchor">Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -171,7 +171,7 @@
             </div>
           </v-col>
         </v-row>
-        <v-card-actions v-if="updateRelay" class="justify-end mx-4 mb-4">
+        <v-card-actions v-if="updateRelay" class="justify-end mb-1 mr-2">
           <v-btn variant="elevated" class="custom-button" @click="editTwin">Edit</v-btn>
         </v-card-actions>
       </v-card>
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 62b939b47e..6d5fb29833 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -17,6 +17,9 @@ const defaults = {
   VBtn: {
     variant: "outlined",
     color: "primary",
+    VIcon: {
+      variant: "tonal",
+    },
     VProgressCircular: {
       size: undefined,
       width: undefined,
@@ -27,7 +30,6 @@ const defaults = {
     VBtn: {
       variant: "outlined",
       color: "primary",
-      size: "small",
     },
   },
   VChip: {
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 9311944cd8..5acece2b69 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -320,7 +320,6 @@
                 class="ml-2"
                 type="submit"
                 color="secondary"
-                variant="outlined"
                 :loading="activating"
                 :disabled="
                   !isValidForm ||
@@ -393,14 +392,7 @@
       </template>
       <!-- <v-divider horizontal></v-divider> -->
       <div class="d-flex justify-end mt-4 mb-2">
-        <VBtn
-          v-if="profileManager.profile"
-          color="anchor"
-          variant="outlined"
-          @click="$emit('update:modelValue', false)"
-        >
-          Close
-        </VBtn>
+        <VBtn v-if="profileManager.profile" color="anchor" @click="$emit('update:modelValue', false)"> Close </VBtn>
         <VBtn
           class="ml-2"
           color="error"
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 056f700b53..de862fb30f 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -76,52 +76,52 @@
         </v-tooltip>
       </v-card-title>
       <v-card-text>
-        <v-row v-if="loadingLockDetails" class="d-flex flex-column justify-center align-center py-4">
-          <v-progress-circular indeterminate />
-          <div class="text-subtitle-2 pt-2">Loading contracts lock details</div>
-        </v-row>
-        <v-row class="d-flex" v-else>
-          <v-alert class="ma-4" type="warning" variant="tonal">
-            <div v-if="lockedContracts?.totalAmountLocked < freeBalance" class="font-weigh-black">
-              You have enough balance to unlock your contracts!
-            </div>
-            <div v-else>
-              You need to fund your account with
-              <span class="font-weight-black">
-                {{ Math.ceil(lockedContracts?.totalAmountLocked - freeBalance) }}
-                TFTs
-              </span>
-              to resume your contracts
-            </div>
-          </v-alert>
-        </v-row>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="anchor" class="mr-2 px-3" @click="unlockDialog = false"> Close </v-btn>
-          <v-tooltip
-            :text="
-              freeBalance < lockedContracts?.totalAmountLocked
-                ? `You don't have enough balance to unlock your contracts`
-                : `Get your contracts ready again`
-            "
-            location="top center"
-          >
-            <template #activator="{ props }">
-              <div v-bind="props">
-                <v-btn
-                  :disabled="freeBalance < lockedContracts.totalAmountLocked || loadingLockDetails"
-                  color="warning"
-                  @click="unlockAllContracts"
-                  :loading="unlockContractLoading"
-                >
-                  Unlock contracts
-                </v-btn>
+        <v-container>
+          <v-row v-if="loadingLockDetails" class="d-flex flex-column justify-center align-center py-4">
+            <v-progress-circular indeterminate />
+            <div class="text-subtitle-2 pt-2">Loading contracts lock details</div>
+          </v-row>
+          <v-row class="d-flex" v-else>
+            <v-alert class="ma-4" type="warning" variant="tonal">
+              <div v-if="lockedContracts?.totalAmountLocked < freeBalance" class="font-weigh-black">
+                You have enough balance to unlock your contracts!
               </div>
-            </template>
-          </v-tooltip>
-        </v-card-actions>
+              <div v-else>
+                You need to fund your account with
+                <span class="font-weight-black">
+                  {{ Math.ceil(lockedContracts?.totalAmountLocked - freeBalance) }}
+                  TFTs
+                </span>
+                to resume your contracts
+              </div>
+            </v-alert>
+          </v-row>
+        </v-container>
       </v-card-text>
+      <v-card-actions class="justify-end my-1 mr-2">
+        <v-btn color="anchor" @click="unlockDialog = false"> Close </v-btn>
+        <v-tooltip
+          :text="
+            freeBalance < lockedContracts?.totalAmountLocked
+              ? `You don't have enough balance to unlock your contracts`
+              : `Get your contracts ready again`
+          "
+          location="top center"
+        >
+          <template #activator="{ props }">
+            <div v-bind="props">
+              <v-btn
+                :disabled="freeBalance < lockedContracts.totalAmountLocked || loadingLockDetails"
+                color="warning"
+                @click="unlockAllContracts"
+                :loading="unlockContractLoading"
+              >
+                Unlock contracts
+              </v-btn>
+            </div>
+          </template>
+        </v-tooltip>
+      </v-card-actions>
     </v-card>
   </v-dialog>
   <!-- Contracts Tables -->
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 3007050a34..80ea15737d 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -344,9 +344,9 @@
         <v-chip class="ma-1" v-for="item in selectedItems" :key="item.deploymentName">
           {{ item.deploymentName }}
         </v-chip>
+        <v-divider />
       </v-card-text>
-      <v-card-actions>
-        <v-spacer />
+      <v-card-actions class="justify-end my-1 mr-2">
         <v-btn color="anchar" @click="deletingDialog = false">Cancel</v-btn>
         <v-btn color="error" @click="onDelete(tabs[activeTab].value.toLowerCase() === 'kubernetes')"> Delete </v-btn>
       </v-card-actions>

From 02c193d3fe9a791aa3fc5ae77b18d36c902896c1 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 4 Jun 2024 17:15:12 +0300
Subject: [PATCH 5/5] fix build

---
 packages/playground/src/dashboard/components/public_config.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/playground/src/dashboard/components/public_config.vue b/packages/playground/src/dashboard/components/public_config.vue
index 65106564e5..a9ecd9368e 100644
--- a/packages/playground/src/dashboard/components/public_config.vue
+++ b/packages/playground/src/dashboard/components/public_config.vue
@@ -158,6 +158,7 @@ import type { PublicConfig } from "@threefold/grid_client";
 import { isEqual } from "lodash";
 import { onMounted, ref, watch } from "vue";
 
+import type { RuleReturn } from "@/components/input_validator.vue";
 import { useFormRef } from "@/hooks/form_validator";
 import { useGrid } from "@/stores";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";