From f3b606f7311a8759f77c0662d94fe090e07f6170 Mon Sep 17 00:00:00 2001
From: svarcoder <charvai1997@gmail.com>
Date: Fri, 27 Sep 2024 18:36:43 +0530
Subject: [PATCH 1/3] Fix: Convert Inline Styles to Tailwind CSS

---
 src/components/AppFooter.vue                  |   2 +-
 src/components/AppHeader.vue                  |  15 +--
 src/components/DeleteCardConfirmPopup.vue     |   4 +-
 src/components/LoginFooter.vue                |   2 +-
 src/components/MainnetAppCreatedPopup.vue     |   4 +-
 src/components/app-configure/AppKeyspace.vue  |   5 +-
 .../app-configure/SwitchKeyspacePopup.vue     |   9 +-
 .../app-configure/VerificationForm.vue        |  16 +--
 .../general/ConfirmDeletePopup.vue            |   3 +-
 .../general/DeleteTimerPopup.vue              |   3 +-
 .../app-configure/general/WalletTheme.vue     |   2 +-
 src/components/lib/VButton/VButton.vue        |   6 +-
 .../lib/VButtonSecondary/VButtonSecondary.vue |   6 +-
 src/components/lib/VToast/VToast.vue          |   3 +-
 src/components/lib/VTooltip/VTooltip.vue      |   3 +-
 src/pages/AppDashboard.vue                    |  16 +--
 src/pages/AppDownNotification.vue             |  28 +----
 src/pages/AppInvoices.vue                     |   4 +-
 src/pages/AppProfile.vue                      |   6 +-
 src/pages/AppUsers.vue                        | 117 +++++-------------
 src/pages/ManageApps.vue                      |  28 ++---
 21 files changed, 87 insertions(+), 195 deletions(-)

diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 68450bb9..991e7f4c 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -53,7 +53,7 @@ const socialLinks = [
           />
         </a>
       </VStack> -->
-      <VStack gap="2.5rem" class="flex-1" style="justify-content: end">
+      <VStack gap="2.5rem" class="flex-1 justify-end">
         <VStack gap="1rem" align="center" class="footer-links">
           <a
             class="text-xs font-semibold text-black no-underline"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 87ae96ca..12bfcd6b 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -110,7 +110,7 @@ function toggleNotifications() {
         <div id="help_menu" ref="help_menu" class="relative flex">
           <button class="help-button" @click.stop="toggleHelpMenu">Help</button>
           <VCard v-if="showHelpMenu" class="help-menu-items absolute">
-            <ul style="margin: 0">
+            <ul class="m-0">
               <li
                 v-for="helpItem in HelpItems"
                 :key="helpItem.label"
@@ -119,8 +119,7 @@ function toggleNotifications() {
               >
                 <a
                   :href="helpItem.link"
-                  class="flex text-black no-underline font-normal"
-                  style="gap: 0.75rem"
+                  class="flex text-black no-underline font-normal gap-3"
                   target="_blank"
                 >
                   <img :src="helpItem.icon" />
@@ -147,7 +146,7 @@ function toggleNotifications() {
             @click.stop="toggleProfileMenu"
           />
           <VCard v-if="showProfileMenu" class="help-menu-items absolute">
-            <ul style="margin: 0">
+            <ul class="m-0">
               <li
                 v-for="profileItem in ProfileItems"
                 :key="profileItem.label"
@@ -158,16 +157,12 @@ function toggleNotifications() {
                   :to="{
                     name: `App${profileItem.label}`,
                   }"
-                  class="flex text-black no-underline font-normal help-menu-router"
-                  style="gap: 0.75rem"
+                  class="flex text-black no-underline font-normal help-menu-router gap-3"
                   ><img :src="profileItem.icon" />
                   <span>{{ profileItem.label }} </span></RouterLink
                 >
               </li>
-              <li
-                class="cursor-pointer help-menu-item"
-                style="margin-top: 0.5rem"
-              >
+              <li class="cursor-pointer help-menu-item mt-2">
                 <VButton
                   label="LOGOUT"
                   variant="secondary"
diff --git a/src/components/DeleteCardConfirmPopup.vue b/src/components/DeleteCardConfirmPopup.vue
index a25af922..6ea6b44e 100644
--- a/src/components/DeleteCardConfirmPopup.vue
+++ b/src/components/DeleteCardConfirmPopup.vue
@@ -20,12 +20,12 @@ const emit = defineEmits(['cancel', 'proceed'])
           <VButton
             variant="secondary"
             label="CANCEL"
-            style="width: 120px"
+            class="w-[120px]"
             @click.stop="emit('cancel')"
           />
           <VButton
             label="DELETE"
-            style="width: 120px"
+            class="w-[120px]"
             @click.stop="emit('proceed')"
           />
         </VStack>
diff --git a/src/components/LoginFooter.vue b/src/components/LoginFooter.vue
index 2a780fde..2013db60 100644
--- a/src/components/LoginFooter.vue
+++ b/src/components/LoginFooter.vue
@@ -53,7 +53,7 @@ const socialLinks = [
           />
         </a>
       </VStack>
-      <VStack gap="2.5rem" class="flex-1" style="justify-content: end">
+      <VStack gap="2.5rem" class="flex-1 justify-end">
         <VStack gap="1rem" align="center" class="footer-links">
           <a
             class="text-xs font-normal text-black no-underline"
diff --git a/src/components/MainnetAppCreatedPopup.vue b/src/components/MainnetAppCreatedPopup.vue
index 4451af21..2355895f 100644
--- a/src/components/MainnetAppCreatedPopup.vue
+++ b/src/components/MainnetAppCreatedPopup.vue
@@ -25,7 +25,7 @@ function handleMainnetKeySpace() {
   <VOverlay>
     <div class="popup-container">
       <VCard class="popup-card">
-        <img src="@/assets/success-celebrate.svg" style="width: 8rem" />
+        <img src="@/assets/success-celebrate.svg" class="w-32" />
         <h3 class="popup-title">{{ NetworkName.mainnet }} App Created!</h3>
         <span class="popup-message">
           {{ NetworkName.mainnet }} app has been configured. <br />Please
@@ -33,7 +33,7 @@ function handleMainnetKeySpace() {
         </span>
         <VButton
           label="CONFIGURE KEYSPACE"
-          style="width: 200px"
+          class="w-[200px]"
           @click.stop="handleMainnetKeySpace()"
         />
       </VCard>
diff --git a/src/components/app-configure/AppKeyspace.vue b/src/components/app-configure/AppKeyspace.vue
index 1dd83411..283bf944 100644
--- a/src/components/app-configure/AppKeyspace.vue
+++ b/src/components/app-configure/AppKeyspace.vue
@@ -135,10 +135,7 @@ function handleCancel() {
                   with an app review and validation process before approving the
                   global keys feature for an app.</span
                 >
-                <VStack
-                  class="justify-end"
-                  style="margin-top: 2rem; visibility: hidden"
-                >
+                <VStack class="justify-end mt-8 invisible">
                   <VButton label="VERIFY" disabled></VButton>
                 </VStack>
               </VStack>
diff --git a/src/components/app-configure/SwitchKeyspacePopup.vue b/src/components/app-configure/SwitchKeyspacePopup.vue
index e74c5393..eea08a8c 100644
--- a/src/components/app-configure/SwitchKeyspacePopup.vue
+++ b/src/components/app-configure/SwitchKeyspacePopup.vue
@@ -11,10 +11,7 @@ const emit = defineEmits(['cancel', 'switch'])
   <VOverlay>
     <div class="popup-container">
       <VCard class="popup-card">
-        <img
-          src="@/assets/iconography/hazard-sign-icon.png"
-          style="width: 8rem"
-        />
+        <img src="@/assets/iconography/hazard-sign-icon.png" class="w-32" />
         <h3 class="popup-title">Warning!</h3>
         <span class="popup-message">
           Attempting to switch between App-Specific & Global Keys. Please be
@@ -24,12 +21,12 @@ const emit = defineEmits(['cancel', 'switch'])
           <VButton
             variant="secondary"
             label="CANCEL"
-            style="width: 120px"
+            class="w-[120px]"
             @click.stop="emit('cancel')"
           />
           <VButton
             label="SWITCH"
-            style="width: 120px"
+            class="w-[120px]"
             @click.stop="emit('switch')"
           />
         </VStack>
diff --git a/src/components/app-configure/VerificationForm.vue b/src/components/app-configure/VerificationForm.vue
index eefee3fb..f7047629 100644
--- a/src/components/app-configure/VerificationForm.vue
+++ b/src/components/app-configure/VerificationForm.vue
@@ -102,24 +102,19 @@ async function handleSubmit() {
       <VCard class="verification-form-card relative">
         <img
           src="@/assets/iconography/close.svg"
-          class="absolute cursor-pointer"
-          style="top: 1.25rem; right: 1.25rem; width: 1.25rem"
+          class="absolute cursor-pointer top-5 right-5 w-5"
           @click.stop="emit('close')"
         />
         <VStack direction="column" align="center">
           <h3 class="verification-title">Verification Form</h3>
-          <div class="verification-description" style="text-align: center">
+          <div class="verification-description text-center">
             Fill up this verification form to register your application on
             {{ NetworkName.mainnet }} and enable the Global keys feature. For
             assistance,&nbsp;
             <a href="mailto:support@arcana.network">contact support</a>.
           </div>
           <form @submit.prevent="handleSubmit">
-            <VStack
-              direction="column"
-              gap="1.25rem"
-              style="padding-inline: 3rem"
-            >
+            <VStack direction="column" gap="1.25rem" class="px-12">
               <VTextField
                 v-model="formData.companyName"
                 label="Company Name"
@@ -181,10 +176,7 @@ async function handleSubmit() {
               </div>
               <div v-show="error.trim()" class="error">{{ error }}</div>
             </VStack>
-            <VStack
-              gap="1.25rem"
-              style="justify-content: center; margin-block: 2rem"
-            >
+            <VStack gap="1.25rem" class="flex justify-center mb-8">
               <VButton
                 variant="secondary"
                 label="CANCEL"
diff --git a/src/components/app-configure/general/ConfirmDeletePopup.vue b/src/components/app-configure/general/ConfirmDeletePopup.vue
index 6fdc0809..94b7487e 100644
--- a/src/components/app-configure/general/ConfirmDeletePopup.vue
+++ b/src/components/app-configure/general/ConfirmDeletePopup.vue
@@ -18,8 +18,7 @@ const appsStore = useAppsStore()
     class="lg:text-[2rem] md:text-[1.25rem] max-[768px]:text-[1.125rem] font-bold flex-1 flex justify-center"
   >
     <div
-      class="text-ellipsis overflow-hidden"
-      style="max-width: 100%"
+      class="text-ellipsis overflow-hidden max-w-full"
       :title="`Delete app - ${appsStore.app(props.appId as number).name}`"
     >
       Delete app - {{ appsStore.app(props.appId as number).name }}
diff --git a/src/components/app-configure/general/DeleteTimerPopup.vue b/src/components/app-configure/general/DeleteTimerPopup.vue
index 631647d3..9998a30d 100644
--- a/src/components/app-configure/general/DeleteTimerPopup.vue
+++ b/src/components/app-configure/general/DeleteTimerPopup.vue
@@ -57,8 +57,7 @@ function handleProceedDeletion() {
       class="lg:text-[2rem] md:text-[1.25rem] max-[768px]:text-[1.125rem] font-bold flex-1 flex justify-center"
     >
       <div
-        class="text-ellipsis overflow-hidden"
-        style="max-width: 100%"
+        class="text-ellipsis overflow-hidden max-w-full"
         :title="`Delete app - ${appsStore.app(props.appId as number).name}`"
       >
         Deleting App - {{ appsStore.app(props.appId as number).name }}...
diff --git a/src/components/app-configure/general/WalletTheme.vue b/src/components/app-configure/general/WalletTheme.vue
index bc3d02fb..2810f7c9 100644
--- a/src/components/app-configure/general/WalletTheme.vue
+++ b/src/components/app-configure/general/WalletTheme.vue
@@ -78,7 +78,7 @@ async function handleSave() {
   <section name="web-wallet">
     <form @submit.prevent="handleSave">
       <VStack direction="column" gap="1rem">
-        <VStack direction="column" gap="1rem" style="margin-bottom: 1rem">
+        <VStack direction="column" gap="1rem" class="mb-4">
           <h3>Wallet Theme</h3>
           <VStack direction="column" gap="0.5rem" align="start">
             <h4 class="text-grey">Choose Theme</h4>
diff --git a/src/components/lib/VButton/VButton.vue b/src/components/lib/VButton/VButton.vue
index d63c617a..5ff0fada 100644
--- a/src/components/lib/VButton/VButton.vue
+++ b/src/components/lib/VButton/VButton.vue
@@ -76,7 +76,7 @@ const loadingColor = computed(() => {
     <v-circular-progress
       v-if="loading"
       :color="loadingColor"
-      style="top: 5%; left: calc(50% - 1.5em); transform: translate(-50%, -50%)"
+      class="absolute top-[5%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 custom-left-offset"
     />
   </button>
   <a
@@ -175,6 +175,10 @@ progress {
   margin: auto;
 }
 
+.custom-left-offset {
+  left: calc(50% - 1.5em);
+}
+
 @media only screen and (max-width: 1023px) {
   button,
   a {
diff --git a/src/components/lib/VButtonSecondary/VButtonSecondary.vue b/src/components/lib/VButtonSecondary/VButtonSecondary.vue
index 345f721a..1b4be905 100644
--- a/src/components/lib/VButtonSecondary/VButtonSecondary.vue
+++ b/src/components/lib/VButtonSecondary/VButtonSecondary.vue
@@ -76,7 +76,7 @@ const loadingColor = computed(() => {
     <v-circular-progress
       v-if="loading"
       :color="loadingColor"
-      style="top: 5%; left: calc(50% - 1.5em); transform: translate(-50%, -50%)"
+      class="absolute top-[5%] circular-progress transform -translate-x-1/2 -translate-y-1/2"
     />
   </button>
   <a
@@ -177,6 +177,10 @@ progress {
   margin: auto;
 }
 
+.circular-progres {
+  left: calc(50% - 1.5em);
+}
+
 @media only screen and (max-width: 1023px) {
   button,
   a {
diff --git a/src/components/lib/VToast/VToast.vue b/src/components/lib/VToast/VToast.vue
index 7755818a..8d1c4e1b 100644
--- a/src/components/lib/VToast/VToast.vue
+++ b/src/components/lib/VToast/VToast.vue
@@ -16,8 +16,7 @@ function handleCloseToast(toastMessage: ToastMessage) {
 
 <template>
   <VStack
-    class="v-toast-container"
-    :style="{ padding: toastMessages.length ? '2rem' : '0' }"
+    class="v-toast-container toastMessages.length ? 'p-8' : 'p-0'"
     direction="column"
     gap="1rem"
   >
diff --git a/src/components/lib/VTooltip/VTooltip.vue b/src/components/lib/VTooltip/VTooltip.vue
index 0f25e06d..56c73f01 100644
--- a/src/components/lib/VTooltip/VTooltip.vue
+++ b/src/components/lib/VTooltip/VTooltip.vue
@@ -28,11 +28,10 @@ const positionClass = {
   <div v-if="title" class="tooltip-wrapper" v-bind="attrs">
     <slot></slot>
     <div
-      class="tooltip text-[0.84em] leading-[1.6em]"
+      class="tooltip text-[0.84em] leading-[1.6em] delay-500"
       :class="positionClass"
       role="tooltip"
       aria-hidden="true"
-      style="transition-delay: 500ms"
       :style="tooltipStyle"
       v-html="title"
     />
diff --git a/src/pages/AppDashboard.vue b/src/pages/AppDashboard.vue
index be30588d..53a6a53d 100644
--- a/src/pages/AppDashboard.vue
+++ b/src/pages/AppDashboard.vue
@@ -256,7 +256,7 @@ async function fetchActiveUsers() {
 
 <template>
   <div :key="appId">
-    <main style="margin-bottom: 2rem">
+    <main class="mb-8">
       <section class="flex dashboard-heading flex-wrap">
         <VStack
           justify="space-between"
@@ -268,7 +268,7 @@ async function fetchActiveUsers() {
             gap="1rem"
             class="flex justify-content-center items-center flex-wrap"
           >
-            <span style="color: var(--text-grey)" class="text-lg font-normal">
+            <span class="text-lg font-normal text-[var(--text-grey)]">
               Client ID:
             </span>
             <VTextField
@@ -284,11 +284,7 @@ async function fetchActiveUsers() {
           </VStack>
         </VStack>
       </section>
-      <v-card
-        class="column usage-container"
-        variant="elevated"
-        style="align-items: stretch"
-      >
+      <v-card class="column usage-container items-stretch" variant="elevated">
         <div class="flex justify-between items-center">
           <h2 class="font-normal">Users</h2>
           <div class="flex flex-wrap duration">
@@ -318,11 +314,7 @@ async function fetchActiveUsers() {
           ></canvas>
         </section>
       </v-card>
-      <v-card
-        class="column usage-container"
-        variant="elevated"
-        style="align-items: stretch"
-      >
+      <v-card class="column usage-container items-stretch" variant="elevated">
         <VStack justify="space-between" align="center" class="flex-grow">
           <h2>Tutorials</h2>
         </VStack>
diff --git a/src/pages/AppDownNotification.vue b/src/pages/AppDownNotification.vue
index 02ab15d4..e17ced03 100644
--- a/src/pages/AppDownNotification.vue
+++ b/src/pages/AppDownNotification.vue
@@ -1,35 +1,15 @@
 <template>
-  <main style="height: calc(100% - 80px)">
+  <main class="h-[calc(100%-80px)]">
     <div
-      class="flex column"
-      style="
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        color: var(--text-black);
-      "
+      class="flex column items-center justify-center w-full h-full text-[var(--text-black)]"
     >
       <h1
-        style="
-          padding: 0 1em;
-          font-weight: 700;
-          color: var(--text-black);
-          text-align: center;
-          letter-spacing: unset;
-        "
+        class="px-4 font-bold text-[var(--text-black)] text-center tracking-normal"
       >
         Under Maintenance
       </h1>
       <h2
-        style="
-          max-width: 720px;
-          padding: 0 1em;
-          margin: 1.25em auto 0;
-          font-weight: 500;
-          line-height: 1.5em;
-          text-align: center;
-        "
+        class="max-w-[720px] px-4 mt-5 mx-auto mb-0 font-medium leading-6 text-center"
       >
         The dashboard is currently undergoing maintenance and will be back
         online soon. Please check back in a little while.
diff --git a/src/pages/AppInvoices.vue b/src/pages/AppInvoices.vue
index d2db8215..29e5106b 100644
--- a/src/pages/AppInvoices.vue
+++ b/src/pages/AppInvoices.vue
@@ -126,7 +126,7 @@ onBeforeMount(async () => {
           </VStack>
         </SettingCard>
       </section>
-      <section style="margin-top: 1.25rem; margin-bottom: 3rem">
+      <section class="mt-5 mb-12">
         <VStack direction="column" gap="1.25rem">
           <VCard
             v-for="invoice in invoices"
@@ -156,7 +156,7 @@ onBeforeMount(async () => {
                     :href="invoice.url"
                     download
                     target="_blank"
-                    style="display: flex"
+                    class="flex"
                     @click.stop="(e) => e.preventDefault()"
                   >
                     <img src="@/assets/iconography/download.svg" />
diff --git a/src/pages/AppProfile.vue b/src/pages/AppProfile.vue
index 6c681669..175a9119 100644
--- a/src/pages/AppProfile.vue
+++ b/src/pages/AppProfile.vue
@@ -268,7 +268,7 @@ function handleCancel() {
           </div>
         </SettingCard>
       </section>
-      <section style="margin-top: 3em">
+      <section class="mt-12">
         <SettingCard>
           <template #title>Organisation</template>
           <form @submit.prevent="onUpdateOrganization">
@@ -314,7 +314,7 @@ function handleCancel() {
           </form>
         </SettingCard>
       </section>
-      <!-- <section id="billing-details" style="margin-top: 3em">
+      <!-- <section id="billing-details" class="mt-12">
         <SettingCard>
           <template #title>Billing Address Details</template>
           <form @submit.prevent="updateBillingDetails">
@@ -343,7 +343,7 @@ function handleCancel() {
                   @icon-clicked="invoiceDetails.address = ''"
                 />
               </div>
-              <div class="flex column flex-1" style="visibility: hidden"></div>
+              <div class="flex column flex-1 invisible"></div>
             </VStack>
             <div class="flex column flex-1 space-y-4">
               <div
diff --git a/src/pages/AppUsers.vue b/src/pages/AppUsers.vue
index feca6289..80a18d0c 100644
--- a/src/pages/AppUsers.vue
+++ b/src/pages/AppUsers.vue
@@ -179,12 +179,9 @@ function convertToBytes(value: number) {
 
 <template>
   <div>
-    <main class="container" style="margin-top: 2rem">
+    <main class="container mt-8">
       <h1>USERS</h1>
-      <div
-        class="flex sm-column"
-        style="gap: 1em; justify-content: space-between; margin-top: 2rem"
-      >
+      <div class="flex sm-column gap-4 justify-between mt-8">
         <h4 class="user-details-title">USER DETAILS</h4>
         <v-text-field
           v-model="walletAddress"
@@ -192,16 +189,12 @@ function convertToBytes(value: number) {
           clickable-icon
           :no-message="true"
           placeholder="Enter Wallet Address"
-          :style="'width: 20em'"
+          class="w-80"
           @icon-clicked="searchUsersByWalletAddress"
           @keyup.enter="searchUsersByWalletAddress"
         />
       </div>
-      <v-card
-        variant="elevated"
-        class="flex column users-table-card"
-        style="margin-top: 1rem"
-      >
+      <v-card variant="elevated" class="flex column users-table-card mt-4">
         <div class="table-container">
           <table class="table-head">
             <thead>
@@ -213,7 +206,7 @@ function convertToBytes(value: number) {
               </tr>
             </thead>
           </table>
-          <table v-if="users.length" style="width: 100%">
+          <table v-if="users.length" class="w-full">
             <tbody>
               <tr
                 v-for="(user, index) in users"
@@ -230,111 +223,59 @@ function convertToBytes(value: number) {
           <h4 v-else>No records found</h4>
         </div>
       </v-card>
-      <div class="flex column" style="gap: 1rem; margin-top: 3rem">
+      <div class="flex column gap-4 mt-12">
         <h4>NUMBER OF USERS</h4>
-        <v-card variant="elevated" style="height: 240px; padding: 2em">
+        <v-card variant="elevated" class="h-[240px] p-8">
           <canvas id="numberOfUsersChart" height="100%"></canvas>
         </v-card>
       </div>
     </main>
-    <v-overlay
-      v-if="showDetails"
-      style="display: flex; align-items: center; justify-content: center"
-    >
+    <v-overlay v-if="showDetails" class="flex items-center justify-center">
       <v-card
         variant="popup"
-        class="flex column"
-        style="
-          gap: 1em;
-          width: 72%;
-          min-width: 300px;
-          max-width: 720px;
-          padding: 2em;
-        "
+        class="flex column gap-4 w-[72%] min-w-[300px] max-w-[720px] p-8"
       >
-        <div
-          class="flex"
-          style="justify-content: space-between; margin-bottom: 2em"
-        >
-          <h2 style="align-self: center; padding: 3px 2vh">USER LOG</h2>
+        <div class="flex justify-between mb-8">
+          <h2 class="self-center p-[3px] py-[2vh]">USER LOG</h2>
           <span
             v-wave
-            style="
-              padding: 3px;
-              font-size: 1.5em;
-              font-weight: 600;
-              color: var(--primary);
-              cursor: pointer;
-            "
-            class="body-1"
+            class="body-1 p-[3px] text-[1.5em] font-semibold text-[var(--primary)] cursor-pointer"
             @click.stop="showDetails = false"
             >X</span
           >
         </div>
-        <div
-          class="flex column"
-          style="gap: 2vh; padding: 0 2vh; margin-bottom: 2vh"
-        >
-          <span class="body-1" style="color: var(--text-grey)">
-            Wallet Address
-          </span>
+        <div class="flex column gap-[2vh] px-[2vh] mb-[2vh]">
+          <span class="body-1 text-[var(--text-grey)]"> Wallet Address </span>
           <span
-            class="text-xl font-semibold"
-            style="color: var(--text-white); word-wrap: break-word"
+            class="text-xl font-semibold text-[var(--text-white)] break-words"
           >
             {{ userLog.walletAddress }}
           </span>
         </div>
-        <div
-          class="flex flex-wrap"
-          style="
-            gap: 4vh;
-            justify-content: space-between;
-            padding: 0 2vh;
-            margin-bottom: 1rem;
-          "
-        >
-          <div class="flex column" style="gap: 1vh">
-            <span class="body-1" style="color: var(--text-grey)">
+        <div class="flex flex-wrap gap-[4vh] justify-between px-[2vh] mb-4">
+          <div class="flex column gap-[1vh]">
+            <span class="body-1 text-[var(--text-grey)]">
               Public Identifier
             </span>
-            <span
-              class="text-xl font-semibold"
-              style="color: var(--text-white)"
-            >
+            <span class="text-xl font-semibold text-[var(--text-white)]">
               {{ userLog.email }}
             </span>
           </div>
-          <div class="flex column" style="gap: 1vh">
-            <span class="body-1" style="color: var(--text-grey)">
-              Storage
-            </span>
-            <span
-              class="text-xl font-semibold"
-              style="color: var(--text-white)"
-            >
+          <div class="flex column gap-[1vh]">
+            <span class="body-1 text-[var(--text-grey)]"> Storage </span>
+            <span class="text-xl font-semibold text-[var(--text-white)]">
               {{ convertToBytes(userLog.storage as number) }}
             </span>
           </div>
-          <div class="flex column" style="gap: 1vh">
-            <span class="body-1" style="color: var(--text-grey)">
-              Bandwidth
-            </span>
-            <span
-              class="text-xl font-semibold"
-              style="color: var(--text-white)"
-            >
+          <div class="flex column gap-[1vh]">
+            <span class="body-1 text-[var(--text-grey)]"> Bandwidth </span>
+            <span class="text-xl font-semibold text-[var(--text-white)]">
               {{ convertToBytes(userLog.bandwidth as number) }}
             </span>
           </div>
-          <div class="flex column" style="gap: 1vh">
-            <span class="body-1" style="color: var(--text-grey)">
-              Action Count
-            </span>
-            <span
-              class="text-xl font-semibold"
-              style="color: var(--text-white)"
-            >
+          <div class="flex column gap-[1vh]">
+            <span class="body-1 text-[var(--text-grey)]"> Action Count </span>
+            <span class="text-xl font-semibold text-[var(--text-white)]">
               {{ userLog.actionCount }}
             </span>
           </div>
@@ -351,7 +292,7 @@ function convertToBytes(value: number) {
                   </tr>
                 </thead>
               </table>
-              <table v-if="userTransactions.length" style="width: 100%">
+              <table v-if="userTransactions.length" class="w-full">
                 <tbody>
                   <tr
                     v-for="transaction in userTransactions"
diff --git a/src/pages/ManageApps.vue b/src/pages/ManageApps.vue
index 83f7fdb8..7d6ade3a 100644
--- a/src/pages/ManageApps.vue
+++ b/src/pages/ManageApps.vue
@@ -179,7 +179,7 @@ function ellipsisAppName(appName: string) {
                 >
                   <img
                     src="@/assets/iconography/info-circle-outline.svg"
-                    style="margin-top: 2rem; cursor: pointer"
+                    class="mt-8 cursor-pointer"
                   />
                 </VTooltip>
               </VStack>
@@ -188,7 +188,8 @@ function ellipsisAppName(appName: string) {
                 <VStack
                   direction="column"
                   gap="0.75rem"
-                  :style="{ width: `${freeMausWidth}%`, overflow: 'visible' }"
+                  class="overflow-visible"
+                  :style="{ width: `${freeMausWidth}%` }"
                 >
                   <VStack
                     gap="0.25rem"
@@ -209,8 +210,8 @@ function ellipsisAppName(appName: string) {
                   direction="column"
                   gap="0.75rem"
                   align="start"
-                  :style="{ width: `${paidMausWidth}%`, overflow: 'visible' }"
-                  class="text-ellipsis"
+                  :style="{ width: `${paidMausWidth}%` }"
+                  class="text-ellipsis overflow-visible"
                 >
                   <VStack
                     gap="0.25rem"
@@ -221,8 +222,7 @@ function ellipsisAppName(appName: string) {
                     <span class="info-detail">{{ paidMausUsed }}</span>
                   </VStack>
                   <VProgressBar
-                    class="info-progress"
-                    style="min-width: 0"
+                    class="info-progress min-w-0"
                     :percentage="100"
                   />
                 </VStack>
@@ -230,17 +230,11 @@ function ellipsisAppName(appName: string) {
               <VStack class="flex-grow info-margin justify-end">
                 <VStack gap="1.25rem" sm-direction="column">
                   <VStack gap="0.5rem" align="center">
-                    <div
-                      class="legend-dot"
-                      style="background-color: var(--color-green)"
-                    ></div>
+                    <div class="legend-dot bg-[var(--color-green)]"></div>
                     <span class="info-detail-name">Free users</span>
                   </VStack>
                   <VStack gap="0.5rem" align="center">
-                    <div
-                      class="legend-dot"
-                      style="background-color: var(--primary)"
-                    ></div>
+                    <div class="legend-dot bg-[var(--primary)]"></div>
                     <span class="info-detail-name">Paid users</span>
                   </VStack>
                 </VStack>
@@ -303,7 +297,7 @@ function ellipsisAppName(appName: string) {
               <img :src="getImageUrl(app.id)" class="app-logo" />
               <VStack
                 gap="0.5rem"
-                style="max-width: 100%"
+                class="max-w-full"
                 @mouseenter="setHover(app.id, true)"
                 @mouseleave="setHover(app.id, false)"
               >
@@ -343,7 +337,7 @@ function ellipsisAppName(appName: string) {
                 <VSeperator
                   v-if="isMainnetAppAvailable(app.id)"
                   vertical
-                  style="height: 100%; margin-inline: 1rem"
+                  class="h-full mx-4"
                 />
                 <VStack
                   v-if="isMainnetAppAvailable(app.id)"
@@ -359,7 +353,7 @@ function ellipsisAppName(appName: string) {
                   }}</span>
                 </VStack>
               </VCard>
-              <VStack gap="1rem" style="width: 100%; margin-top: 0.5rem">
+              <VStack gap="1rem" class="w-full mt-2">
                 <VButton
                   variant="secondary"
                   :label="NetworkName.testnet"

From bb72bf711074bd3fc69000cab9f15d17c73a8cdd Mon Sep 17 00:00:00 2001
From: svarcoder <charvai1997@gmail.com>
Date: Mon, 30 Sep 2024 19:09:18 +0530
Subject: [PATCH 2/3] Fix: Convert Var Data to Tailwind Config

---
 src/components/AppBanner.vue                  |  2 +-
 .../general/DeleteTimerPopup.vue              |  4 +--
 src/pages/AppDashboard.vue                    |  4 +--
 src/pages/AppDownNotification.vue             |  4 +--
 src/pages/AppUsers.vue                        | 26 ++++++++-----------
 src/pages/ManageApps.vue                      |  4 +--
 tailwind.config.js                            |  8 ++++++
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/AppBanner.vue b/src/components/AppBanner.vue
index 87cee345..b272c149 100644
--- a/src/components/AppBanner.vue
+++ b/src/components/AppBanner.vue
@@ -18,7 +18,7 @@ function onCloseBanner() {
         be affected.
       </h5>
       <span class="banner-close" role="button" @click.stop="onCloseBanner">
-        <CloseIcon color="var(--primary-light)" />
+        <CloseIcon color="primary_light" />
       </span>
     </div>
   </div>
diff --git a/src/components/app-configure/general/DeleteTimerPopup.vue b/src/components/app-configure/general/DeleteTimerPopup.vue
index 9998a30d..8bd03cc8 100644
--- a/src/components/app-configure/general/DeleteTimerPopup.vue
+++ b/src/components/app-configure/general/DeleteTimerPopup.vue
@@ -68,8 +68,8 @@ function handleProceedDeletion() {
     >
       <Vue3CircleProgress
         :percent="timerProgressPercentage"
-        fill-color="var(--secondary)"
-        empty-color="var(--primary-liquid)"
+        fill-color="secondary"
+        empty-color="primary_liquid"
         :size="200"
       />
       <div
diff --git a/src/pages/AppDashboard.vue b/src/pages/AppDashboard.vue
index 53a6a53d..5bdc9056 100644
--- a/src/pages/AppDashboard.vue
+++ b/src/pages/AppDashboard.vue
@@ -268,9 +268,7 @@ async function fetchActiveUsers() {
             gap="1rem"
             class="flex justify-content-center items-center flex-wrap"
           >
-            <span class="text-lg font-normal text-[var(--text-grey)]">
-              Client ID:
-            </span>
+            <span class="text-lg font-normal text-text_grey"> Client ID: </span>
             <VTextField
               v-model="appAddress"
               class="text-ellipsis"
diff --git a/src/pages/AppDownNotification.vue b/src/pages/AppDownNotification.vue
index e17ced03..ddc1b232 100644
--- a/src/pages/AppDownNotification.vue
+++ b/src/pages/AppDownNotification.vue
@@ -3,9 +3,7 @@
     <div
       class="flex column items-center justify-center w-full h-full text-[var(--text-black)]"
     >
-      <h1
-        class="px-4 font-bold text-[var(--text-black)] text-center tracking-normal"
-      >
+      <h1 class="px-4 font-bold text-text_black text-center tracking-normal">
         Under Maintenance
       </h1>
       <h2
diff --git a/src/pages/AppUsers.vue b/src/pages/AppUsers.vue
index 80a18d0c..68d0e005 100644
--- a/src/pages/AppUsers.vue
+++ b/src/pages/AppUsers.vue
@@ -239,43 +239,39 @@ function convertToBytes(value: number) {
           <h2 class="self-center p-[3px] py-[2vh]">USER LOG</h2>
           <span
             v-wave
-            class="body-1 p-[3px] text-[1.5em] font-semibold text-[var(--primary)] cursor-pointer"
+            class="body-1 p-[3px] text-[1.5em] font-semibold text-primary cursor-pointer"
             @click.stop="showDetails = false"
             >X</span
           >
         </div>
         <div class="flex column gap-[2vh] px-[2vh] mb-[2vh]">
-          <span class="body-1 text-[var(--text-grey)]"> Wallet Address </span>
-          <span
-            class="text-xl font-semibold text-[var(--text-white)] break-words"
-          >
+          <span class="body-1 text-text_grey"> Wallet Address </span>
+          <span class="text-xl font-semibold text-text_white break-words">
             {{ userLog.walletAddress }}
           </span>
         </div>
         <div class="flex flex-wrap gap-[4vh] justify-between px-[2vh] mb-4">
           <div class="flex column gap-[1vh]">
-            <span class="body-1 text-[var(--text-grey)]">
-              Public Identifier
-            </span>
-            <span class="text-xl font-semibold text-[var(--text-white)]">
+            <span class="body-1 text-text_grey"> Public Identifier </span>
+            <span class="text-xl font-semibold text-text_white">
               {{ userLog.email }}
             </span>
           </div>
           <div class="flex column gap-[1vh]">
-            <span class="body-1 text-[var(--text-grey)]"> Storage </span>
-            <span class="text-xl font-semibold text-[var(--text-white)]">
+            <span class="body-1 text-text_grey"> Storage </span>
+            <span class="text-xl font-semibold text-text_white">
               {{ convertToBytes(userLog.storage as number) }}
             </span>
           </div>
           <div class="flex column gap-[1vh]">
-            <span class="body-1 text-[var(--text-grey)]"> Bandwidth </span>
-            <span class="text-xl font-semibold text-[var(--text-white)]">
+            <span class="body-1 text-text_grey"> Bandwidth </span>
+            <span class="text-xl font-semibold text-text_white">
               {{ convertToBytes(userLog.bandwidth as number) }}
             </span>
           </div>
           <div class="flex column gap-[1vh]">
-            <span class="body-1 text-[var(--text-grey)]"> Action Count </span>
-            <span class="text-xl font-semibold text-[var(--text-white)]">
+            <span class="body-1 text-text_grey"> Action Count </span>
+            <span class="text-xl font-semibold text-text_white">
               {{ userLog.actionCount }}
             </span>
           </div>
diff --git a/src/pages/ManageApps.vue b/src/pages/ManageApps.vue
index 7d6ade3a..c8aed8ee 100644
--- a/src/pages/ManageApps.vue
+++ b/src/pages/ManageApps.vue
@@ -230,11 +230,11 @@ function ellipsisAppName(appName: string) {
               <VStack class="flex-grow info-margin justify-end">
                 <VStack gap="1.25rem" sm-direction="column">
                   <VStack gap="0.5rem" align="center">
-                    <div class="legend-dot bg-[var(--color-green)]"></div>
+                    <div class="legend-dot bg-color_green"></div>
                     <span class="info-detail-name">Free users</span>
                   </VStack>
                   <VStack gap="0.5rem" align="center">
-                    <div class="legend-dot bg-[var(--primary)]"></div>
+                    <div class="legend-dot bg-primary"></div>
                     <span class="info-detail-name">Paid users</span>
                   </VStack>
                 </VStack>
diff --git a/tailwind.config.js b/tailwind.config.js
index 73b7e691..552ccd58 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,6 +26,14 @@ const config = {
           input: '#313030',
           textplaceholder: '#989898',
         },
+        primary_light: 'var(--primary-light)',
+        secondary: 'var(--secondary)',
+        primary_liquid: 'var(--primary-liquid)',
+        text_grey: 'var(--text-grey)',
+        text_black: 'var(--text-black)',
+        color_green: 'var(--color-green)',
+        primary: 'var(--primary)',
+        text_white: 'var(--text-white)',
       },
       backdropBlur: {
         'xar-sm': '20px',

From 73abe56288b07f2193ae2a9115b5ffe6b0e09ed4 Mon Sep 17 00:00:00 2001
From: svarcoder <charvai1997@gmail.com>
Date: Mon, 7 Oct 2024 14:20:35 +0530
Subject: [PATCH 3/3] Fix: Remove Hardcoded Style, Style Tag, Inline CSS,
 Unused Code, Optimize Tailwind Config

---
 package-lock.json                             |  25 +-
 package.json                                  |   1 +
 src/App.vue                                   |  47 +-
 src/components/AppBanner.vue                  |  51 +--
 src/components/AppFooter.vue                  |   6 +-
 src/components/AppHeader.vue                  | 163 ++-----
 src/components/AppNotifications.vue           |  42 +-
 src/components/AppNotificationsItem.vue       |   4 +-
 src/components/AppOverlay.vue                 |   2 +-
 src/components/AppStatusBanner.vue            |  51 +--
 src/components/DeleteCardConfirmPopup.vue     |  48 +-
 src/components/FullScreenLoader.vue           |   2 +-
 src/components/LoginFooter.vue                |   6 +-
 src/components/LoginHeader.vue                |  49 +--
 src/components/MainnetAppCreatedPopup.vue     |  48 +-
 src/components/OTPInput.vue                   |  15 +-
 src/components/SearchBar.vue                  |   4 +-
 .../SwitchToMainnetConfirmation.vue           | 111 +----
 src/components/app-configure/AppKeyspace.vue  |  97 +---
 .../app-configure/ConfigureActionButtons.vue  |  20 +-
 .../app-configure/ConfigureHeader.vue         |  14 +-
 .../app-configure/ConfigureMobileMenu.vue     |  42 +-
 .../app-configure/ConfigureSidebar.vue        | 372 ++++------------
 src/components/app-configure/CreateApp.vue    |  46 +-
 src/components/app-configure/SettingCard.vue  |  29 +-
 .../app-configure/SwitchKeyspacePopup.vue     |  48 +-
 .../app-configure/VerificationForm.vue        | 132 ++----
 .../app-configure/auth/AuthProviderInput.vue  |  14 +-
 .../app-configure/auth/AuthProviderList.vue   |   8 +-
 .../app-configure/auth/CustomVerifier.vue     |  44 +-
 .../app-configure/auth/IAMProviders.vue       |   8 +-
 .../app-configure/auth/RedirectURI.vue        |  36 +-
 .../app-configure/auth/SocialAuthProvider.vue |   8 +-
 .../app-configure/auth/WebWallet.vue          |   4 +-
 .../AppChainManagementForm.vue                |  36 +-
 .../AppChainManagementList.vue                | 112 +++--
 .../chain-management/ChainTypeSelection.vue   |   2 +-
 .../chain-management/DeleteChain.vue          |   8 +-
 .../gasless/AddressSwitchConfirmation.vue     |   4 +-
 .../gasless/AppGasTankDeposit.vue             |  26 +-
 .../app-configure/gasless/AppGasTankForm.vue  |  26 +-
 .../gasless/AppGaslessSmartContractForm.vue   |  32 +-
 .../gasless/AppGaslessTankList.vue            | 118 ++---
 .../gasless/AppGaslessWhitelist.vue           | 109 ++---
 .../app-configure/general/AppBranding.vue     |  99 ++---
 .../app-configure/general/AppControls.vue     |   8 +-
 .../app-configure/general/AppDelete.vue       |  19 +-
 .../app-configure/general/AppName.vue         |   9 +-
 .../general/ConfirmDeletePopup.vue            |  21 +-
 .../general/DeleteTimerPopup.vue              |  24 +-
 .../app-configure/general/WalletTheme.vue     |  47 +-
 .../app-configure/store/StorageRegion.vue     |  16 +-
 .../app-configure/store/UserLimits.vue        |  85 +---
 src/components/icons/NotificationIcon.vue     |  69 +--
 .../lib/VCardButton/VCardButton.vue           |   2 +-
 .../lib/VFileUpload/VFileUpload.vue           |   4 +-
 src/components/lib/VToast/VToast.vue          |   8 +-
 src/hooks/useIsMobile.ts                      |  20 +
 src/pages/AppChainManagement.vue              |  10 +-
 src/pages/AppConfigure.vue                    |  14 +-
 src/pages/AppDashboard.vue                    | 220 ++--------
 src/pages/AppDetails.vue                      | 107 +----
 src/pages/AppDownNotification.vue             |  32 +-
 src/pages/AppGasTanks.vue                     |   7 +-
 src/pages/AppGasless.vue                      |   4 +-
 src/pages/AppGaslessAddress.vue               |  12 +-
 src/pages/AppInvoices.vue                     | 126 ++----
 src/pages/AppLogin.vue                        |  42 +-
 src/pages/AppProfile.vue                      | 274 +-----------
 src/pages/AppSessionManagement.vue            |  60 +--
 src/pages/AppUsers.vue                        | 299 ++++++-------
 src/pages/ManageApps.vue                      | 271 ++++--------
 tailwind.config.js                            | 414 ++++++++++++++++--
 73 files changed, 1547 insertions(+), 2846 deletions(-)
 create mode 100644 src/hooks/useIsMobile.ts

diff --git a/package-lock.json b/package-lock.json
index a6b17717..af6b8bd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "postcss-custom-media": "^8.0.0",
         "postcss-media-variables": "^2.0.1",
         "punycode": "^2.1.1",
+        "tailwindcss-filters": "^3.0.0",
         "v-wave": "^1.3.1",
         "vue": "^3.0.5",
         "vue-gtag": "^2.0.1",
@@ -7200,8 +7201,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
@@ -10667,6 +10667,16 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-filters": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz",
+      "integrity": "sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==",
+      "deprecated": "Use Tailwind's filter utilities",
+      "license": "ISC",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/tailwindcss/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -16725,8 +16735,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -19160,6 +19169,14 @@
         }
       }
     },
+    "tailwindcss-filters": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz",
+      "integrity": "sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
diff --git a/package.json b/package.json
index ac2d9c45..28365a70 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "postcss-custom-media": "^8.0.0",
     "postcss-media-variables": "^2.0.1",
     "punycode": "^2.1.1",
+    "tailwindcss-filters": "^3.0.0",
     "v-wave": "^1.3.1",
     "vue": "^3.0.5",
     "vue-gtag": "^2.0.1",
diff --git a/src/App.vue b/src/App.vue
index 9d2ec250..1cae8575 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,7 +38,7 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <div class="root">
+  <div class="h-screen overflow-x-hidden">
     <RouterView v-if="isAuthLoaded" v-slot="{ Component }" class="min-h-screen">
       <Transition name="fade" mode="out-in">
         <Component :is="Component" />
@@ -51,48 +51,3 @@ onBeforeMount(async () => {
     <VToast />
   </div>
 </template>
-
-<style>
-#app {
-  height: 100vh;
-  overflow-x: hidden;
-}
-
-.root {
-  height: 100vh;
-}
-
-.banner {
-  position: relative;
-  padding: 0.25em 1.5em;
-  line-height: 1.5em;
-  color: white;
-  text-align: center;
-  background: linear-gradient(180deg, #0085ff -4.5%, #29c8fa 100.1%);
-}
-
-.banner h4 {
-  display: inline-block;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.banner h5 {
-  display: inline-block;
-  margin-right: 2em;
-  margin-left: 1em;
-  font-size: 1rem;
-  font-weight: 400;
-}
-
-.banner.hide {
-  display: none;
-}
-
-.banner-close {
-  position: absolute;
-  right: 2em;
-  margin-top: 2px;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/AppBanner.vue b/src/components/AppBanner.vue
index b272c149..5f804d38 100644
--- a/src/components/AppBanner.vue
+++ b/src/components/AppBanner.vue
@@ -12,50 +12,21 @@ function onCloseBanner() {
 
 <template>
   <div>
-    <div v-if="canShowBanner" class="banner">
-      <h5>
+    <div
+      v-if="canShowBanner"
+      class="relative py-1 px-6 leading-6 text-white text-center bg-white"
+    >
+      <h5 class="inline-block mr-8 ml-4 text-base font-normal">
         Arcana Testnet undergoing scheduled maintenance. Logins on Testnet may
         be affected.
       </h5>
-      <span class="banner-close" role="button" @click.stop="onCloseBanner">
-        <CloseIcon color="primary_light" />
+      <span
+        class="absolute right-8 mt-0.5 cursor-pointer"
+        role="button"
+        @click.stop="onCloseBanner"
+      >
+        <CloseIcon color="white_solid-default" />
       </span>
     </div>
   </div>
 </template>
-
-<style scoped>
-.banner {
-  position: relative;
-  padding: 0.25em 1.5em;
-  line-height: 1.5em;
-  color: white;
-  text-align: center;
-  background: #fff;
-}
-
-.banner h4 {
-  display: inline-block;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.banner h5 {
-  display: inline-block;
-  margin-right: 2em;
-  margin-left: 1em;
-  font-size: 1rem;
-  font-weight: 400;
-}
-
-.banner.hide {
-  display: none;
-}
-
-.banner-close {
-  position: absolute;
-  right: 2em;
-  margin-top: 2px;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 991e7f4c..4412b4df 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -56,14 +56,14 @@ const socialLinks = [
       <VStack gap="2.5rem" class="flex-1 justify-end">
         <VStack gap="1rem" align="center" class="footer-links">
           <a
-            class="text-xs font-semibold text-black no-underline"
+            class="text-xs font-semibold text-black_solid-default no-underline"
             href="https://github.com/arcana-network/license/blob/main/TERMS.md"
             target="_blank"
           >
             Terms of Use
           </a>
           <a
-            class="text-xs font-semibold text-black no-underline"
+            class="text-xs font-semibold text-black_solid-default no-underline"
             href="https://github.com/arcana-network/license/blob/main/PRIVACY.md"
             target="_blank"
           >
@@ -71,7 +71,7 @@ const socialLinks = [
           </a>
           <div class="flex flex-row ml-5">
             <a
-              class="text-sm font-normal mt-[2px] text-black no-underline"
+              class="text-sm font-normal mt-[2px] text-black_solid-default no-underline"
               href="https://github.com/arcana-network/license/blob/main/PRIVACY.md"
               target="_blank"
             >
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 12bfcd6b..8f2de51e 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -96,10 +96,19 @@ function toggleNotifications() {
 </script>
 
 <template>
-  <section class="header-section" :class="hideHeader ? 'hide-header' : ''">
+  <section
+    class="sticky top-0 z-mid-overlayTop w-full border-b border-system-light_gray transition-transform duration-400"
+    :class="hideHeader ? 'transform -translate-y-full' : ''"
+  >
     <AppBanner />
-    <header class="flex" :class="{ container: props.container }">
-      <div class="logo" @click.stop="onLogoClick">
+    <header
+      class="flex relative justify-between p-6 px-8 visible transition-transform duration-600 bg-white_solid-default"
+      :class="{ container: props.container }"
+    >
+      <div
+        class="cursor-pointer transition-opacity duration-300 hover:opacity-60"
+        @click.stop="onLogoClick"
+      >
         <img :src="ArcanaLogo" alt="Arcana Logo" />
       </div>
       <VStack
@@ -108,18 +117,26 @@ function toggleNotifications() {
         gap="1rem"
       >
         <div id="help_menu" ref="help_menu" class="relative flex">
-          <button class="help-button" @click.stop="toggleHelpMenu">Help</button>
-          <VCard v-if="showHelpMenu" class="help-menu-items absolute">
-            <ul class="m-0">
+          <button
+            class="cursor-pointer bg-transparent border-none outline-none text-black_solid-default hover:text-fairy_dust-default"
+            @click.stop="toggleHelpMenu"
+          >
+            Help
+          </button>
+          <VCard
+            v-if="showHelpMenu"
+            class="absolute top-calc-full-add-rem75 right-0 z-mid-overlay flex flex-col items-center w-px200 p-0 pt-rem1.25 border border-system-light_gray text-black_solid-default"
+          >
+            <ul class="m-0 p-0 text-black_solid-default">
               <li
                 v-for="helpItem in HelpItems"
                 :key="helpItem.label"
-                class="cursor-pointer help-menu-item"
+                class="cursor-pointer w-full px-4 pb-4 whitespace-nowrap list-none text-black_solid-default"
                 @click.stop="showHelpMenu = false"
               >
                 <a
                   :href="helpItem.link"
-                  class="flex text-black no-underline font-normal gap-3"
+                  class="flex text-black_solid-default no-underline font-normal gap-3 hover:custom-filter"
                   target="_blank"
                 >
                   <img :src="helpItem.icon" />
@@ -129,7 +146,7 @@ function toggleNotifications() {
             </ul>
           </VCard>
         </div>
-        <div ref="notification_menu" class="notification-container flex">
+        <div ref="notification_menu" class="relative flex max-md:relative">
           <NotificationIcon
             class="notification-icon"
             @click="toggleNotifications"
@@ -142,27 +159,32 @@ function toggleNotifications() {
         <div id="profile_menu" ref="profile_menu" class="relative flex">
           <img
             src="@/assets/iconography/profile.svg"
-            class="cursor-pointer profile-icon"
+            class="cursor-pointer hover:custom-filter"
             @click.stop="toggleProfileMenu"
           />
-          <VCard v-if="showProfileMenu" class="help-menu-items absolute">
-            <ul class="m-0">
+          <VCard
+            v-if="showProfileMenu"
+            class="absolute top-calc-full-add-rem75 right-0 z-mid-overlay flex flex-col items-center w-px200 p-0 pt-rem1.25 border border-system-light_gray text-black_solid-default"
+          >
+            <ul class="m-0 p-0 text-black_solid-default">
               <li
                 v-for="profileItem in ProfileItems"
                 :key="profileItem.label"
-                class="cursor-pointer help-menu-item"
+                class="cursor-pointer w-full px-4 pb-4 whitespace-nowrap list-none text-black_solid-default"
                 @click.stop="showProfileMenu = false"
               >
                 <RouterLink
                   :to="{
                     name: `App${profileItem.label}`,
                   }"
-                  class="flex text-black no-underline font-normal help-menu-router gap-3"
+                  class="flex text-black_solid-default no-underline font-normal gap-3 hover:custom-filter"
                   ><img :src="profileItem.icon" />
                   <span>{{ profileItem.label }} </span></RouterLink
                 >
               </li>
-              <li class="cursor-pointer help-menu-item mt-2">
+              <li
+                class="cursor-pointer w-full px-4 pb-4 whitespace-nowrap list-none text-black_solid-default mt-2"
+              >
                 <VButton
                   label="LOGOUT"
                   variant="secondary"
@@ -176,114 +198,3 @@ function toggleNotifications() {
     </header>
   </section>
 </template>
-
-<style scoped>
-.header-section {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  width: 100%;
-  border-bottom: #d9d9d9 1px solid;
-  transition: transform 0.4s;
-}
-
-header {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  padding: 1.5rem 2rem;
-  visibility: visible;
-  background: var(--primary-light);
-  transition: transform 0.6s;
-}
-
-.notification-container {
-  position: relative;
-}
-
-.mobile-menu-icon-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-right: 1rem;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.hide-header {
-  transform: translateY(-100%);
-}
-
-.logo {
-  cursor: pointer;
-  transition: opacity 0.3s;
-}
-
-.logo:hover {
-  opacity: 0.6;
-}
-
-.help-button {
-  color: var(--primary-black);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
-.help-button:hover {
-  color: var(--secondary);
-}
-
-.help-menu-items {
-  top: calc(100% + 0.75rem);
-  right: 0;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 200px;
-  padding: 0;
-  padding-top: 1.25rem;
-  color: var(--primary-black);
-  border: #d9d9d9 1px solid;
-}
-
-.help-menu-items ul {
-  padding: 0;
-  color: var(--primary-black);
-}
-
-.help-menu-item {
-  width: 100%;
-  padding-inline: 1rem;
-  padding-bottom: 1rem;
-  color: var(--primary-black);
-  white-space: nowrap;
-  list-style: none;
-}
-
-.help-menu-router:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-.help-menu-items a:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-.profile-icon:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-@media only screen and (max-width: 767px) {
-  .notification-container {
-    position: inherit;
-  }
-}
-</style>
diff --git a/src/components/AppNotifications.vue b/src/components/AppNotifications.vue
index 7dbc930d..124a9de3 100644
--- a/src/components/AppNotifications.vue
+++ b/src/components/AppNotifications.vue
@@ -36,21 +36,23 @@ function onClickofItem(notification) {
 </script>
 
 <template>
-  <VCard class="absolute z-[999] flex flex-col p-2 | notification__container">
+  <VCard
+    class="absolute z-overlay flex flex-col p-2 top-px25 right-px-10 w-px380 max-h-px380 border border-system-light_gray max-md:top-0 max-md:right-0 max-md:w-screen max-md:h-screen max-md:rounded-none max-md:rounded-lg"
+  >
     <div
-      class="flex items-center justify-between w-full h-[50px] border-b-[1px] border-b-[#8d8d8d33]"
+      class="flex items-center justify-between w-full h-px50 border-b-px1 border-b-system-smoke"
     >
       <p class="text-lg">Notifications</p>
       <div class="flex items-center">
         <button
           v-show="appsStore.unreadNotificationCount"
-          class="bg-transparent border-none outline-none cursor-pointer text-sm text-black | notification__mark-read-btn"
+          class="bg-transparent border-none outline-none cursor-pointer text-sm text-black_solid-default max-md:mr-px15"
           @click="markAllRead"
         >
           Mark all as read
         </button>
         <button
-          class="bg-transparent border-none outline-none cursor-pointer h-3 p-0 | notification__close-btn"
+          class="bg-transparent border-none outline-none cursor-pointer h-3 p-0 hidden max-md:block"
           @click="close"
         >
           <img src="@/assets/iconography/close.svg" alt="close" class="h-3" />
@@ -65,35 +67,3 @@ function onClickofItem(notification) {
     </div>
   </VCard>
 </template>
-
-<style scoped>
-.notification__close-btn {
-  display: none;
-}
-
-.notification__container {
-  top: 25px;
-  right: -10px;
-  width: 380px;
-  max-height: 380px;
-  border: #d9d9d9 1px solid;
-}
-
-@media only screen and (max-width: 767px) {
-  .notification__close-btn {
-    display: block;
-  }
-
-  .notification__container {
-    top: 0;
-    right: 0;
-    width: 100vw;
-    height: 100vh;
-    border-radius: 0;
-  }
-
-  .notification__mark-read-btn {
-    margin-right: 15px;
-  }
-}
-</style>
diff --git a/src/components/AppNotificationsItem.vue b/src/components/AppNotificationsItem.vue
index c8a80cae..da48f7ea 100644
--- a/src/components/AppNotificationsItem.vue
+++ b/src/components/AppNotificationsItem.vue
@@ -30,7 +30,7 @@ function getNotificationsTime(timeStamp) {
         >
           {{ notification.data }}
         </p>
-        <p class="text-xs font-normal text-liquiddark">
+        <p class="text-xs font-normal text-system-grey">
           {{ getNotificationsTime(notification.time) }}
         </p>
       </div>
@@ -43,6 +43,6 @@ function getNotificationsTime(timeStamp) {
     </li>
   </ul>
   <div v-else class="p-2.5">
-    <p class="w-full text-center text-black">No Notifications</p>
+    <p class="w-full text-center text-black_solid-default">No Notifications</p>
   </div>
 </template>
diff --git a/src/components/AppOverlay.vue b/src/components/AppOverlay.vue
index e9627302..d3f5ea12 100644
--- a/src/components/AppOverlay.vue
+++ b/src/components/AppOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed inset-0 before:content-{''} before:absolute before:inset-0 z-overlay before:z-overlay before:bg-black before:opacity-75 h-screen flex justify-center items-center backdrop-blur-xar-sm"
+    class="fixed inset-0 before:content-{''} before:absolute before:inset-0 z-system-light_black before:z-system-light_black before:bg-black before:opacity-75 h-screen flex justify-center items-center backdrop-blur-xar-sm"
   >
     <div class="relative z-overlayTop">
       <slot></slot>
diff --git a/src/components/AppStatusBanner.vue b/src/components/AppStatusBanner.vue
index 4d169dd2..e30583e2 100644
--- a/src/components/AppStatusBanner.vue
+++ b/src/components/AppStatusBanner.vue
@@ -25,48 +25,17 @@ function handleCta() {
 </script>
 
 <template>
-  <div class="status-banner">
-    <span class="account-state">{{ props.status }}</span>
-    <button class="account-state-cta" @click.stop="handleCta">
+  <div
+    class="flex gap-5 items-center justify-center w-full h-rem2.5 bg-system-red"
+  >
+    <span class="text-base leading-6 capitalize text-whitemist-default">{{
+      props.status
+    }}</span>
+    <button
+      class="px-4 py-2 text-xs font-semibold cursor-pointer border-none rounded-md shadow-none transition-transform duration-300 transform scale-100 hover:scale-110 text-system-deep_black bg-whitemist-default"
+      @click.stop="handleCta"
+    >
       {{ getAction() }}
     </button>
   </div>
 </template>
-
-<style scoped>
-.status-banner {
-  display: flex;
-  gap: 1.25rem;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 2.5rem;
-  background-color: var(--color-red);
-}
-
-.account-state {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--color-white);
-  text-transform: capitalize;
-}
-
-.account-state-cta {
-  padding: 0.5rem 1rem;
-  font-size: 0.625rem;
-  font-weight: 600;
-  color: var(--color-black);
-  cursor: pointer;
-  background-color: var(--color-white);
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: none;
-  transition: transform 0.3s;
-  transform: scale(1);
-  will-change: transform;
-}
-
-.account-state-cta:hover {
-  transform: scale(1.1);
-}
-</style>
diff --git a/src/components/DeleteCardConfirmPopup.vue b/src/components/DeleteCardConfirmPopup.vue
index 6ea6b44e..d0394b18 100644
--- a/src/components/DeleteCardConfirmPopup.vue
+++ b/src/components/DeleteCardConfirmPopup.vue
@@ -9,10 +9,12 @@ const emit = defineEmits(['cancel', 'proceed'])
 
 <template>
   <VOverlay>
-    <div class="popup-container">
-      <VCard class="popup-card">
-        <h3 class="popup-title">Are you sure?</h3>
-        <span class="popup-message">
+    <div class="flex items-center justify-center w-full h-full">
+      <VCard class="flex flex-col items-center w-full max-w-px480 p-8">
+        <h3 class="mb-2 text-px35 text-center">Are you sure?</h3>
+        <span
+          class="max-w-px500 mt-2 mb-10 text-base leading-6 text-center text-white_solid-default"
+        >
           This action will delete your saved card. You'll need to add a card
           again to continue your billing cycle.
         </span>
@@ -20,12 +22,12 @@ const emit = defineEmits(['cancel', 'proceed'])
           <VButton
             variant="secondary"
             label="CANCEL"
-            class="w-[120px]"
+            class="w-px120"
             @click.stop="emit('cancel')"
           />
           <VButton
             label="DELETE"
-            class="w-[120px]"
+            class="w-px120"
             @click.stop="emit('proceed')"
           />
         </VStack>
@@ -33,37 +35,3 @@ const emit = defineEmits(['cancel', 'proceed'])
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-.popup-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.popup-card {
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 480px;
-  padding: 2rem;
-}
-
-.popup-title {
-  margin-block: 10px;
-  font-size: 35px;
-  text-align: center;
-}
-
-.popup-message {
-  max-width: 500px;
-  margin-top: 10px;
-  margin-bottom: 40px;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--text-white);
-  text-align: center;
-}
-</style>
diff --git a/src/components/FullScreenLoader.vue b/src/components/FullScreenLoader.vue
index e542d7cb..95e9ea15 100644
--- a/src/components/FullScreenLoader.vue
+++ b/src/components/FullScreenLoader.vue
@@ -14,7 +14,7 @@ defineProps({
   <v-overlay>
     <div class="flex flex-col items-center justify-center w-full h-full">
       <v-circular-progress size="6" />
-      <h4 class="mt-4 text-white">
+      <h4 class="mt-4 text-white_solid-default">
         {{ message }}
       </h4>
     </div>
diff --git a/src/components/LoginFooter.vue b/src/components/LoginFooter.vue
index 2013db60..2c798133 100644
--- a/src/components/LoginFooter.vue
+++ b/src/components/LoginFooter.vue
@@ -56,14 +56,14 @@ const socialLinks = [
       <VStack gap="2.5rem" class="flex-1 justify-end">
         <VStack gap="1rem" align="center" class="footer-links">
           <a
-            class="text-xs font-normal text-black no-underline"
+            class="text-xs font-normal text-black_solid-default no-underline"
             href="https://github.com/arcana-network/license/blob/main/TERMS.md"
             target="_blank"
           >
             Terms of Use
           </a>
           <a
-            class="text-xs font-normal text-black no-underline"
+            class="text-xs font-normal text-black_solid-default no-underline"
             href="https://github.com/arcana-network/license/blob/main/PRIVACY.md"
             target="_blank"
           >
@@ -71,7 +71,7 @@ const socialLinks = [
           </a>
           <div class="flex flex-row ml-5">
             <a
-              class="text-sm font-normal mt-[2px] text-black no-underline"
+              class="text-sm font-normal mt-[2px] text-black_solid-default no-underline"
               href="https://github.com/arcana-network/license/blob/main/PRIVACY.md"
               target="_blank"
             >
diff --git a/src/components/LoginHeader.vue b/src/components/LoginHeader.vue
index 7abf0145..ccc8550e 100644
--- a/src/components/LoginHeader.vue
+++ b/src/components/LoginHeader.vue
@@ -19,46 +19,21 @@ function onLogoClick() {
 </script>
 
 <template>
-  <section class="header-section" :class="hideHeader ? 'hide-header' : ''">
+  <section
+    class="sticky top-0 z-overlay w-full border-b border-system-light_gray transition-transform duration-400"
+    :class="hideHeader ? 'transform translate-y--100%' : ''"
+  >
     <AppBanner />
-    <header class="flex" :class="{ container: props.container }">
-      <div class="logo" @click.stop="onLogoClick">
+    <header
+      class="relative flex justify-between p-6 transition-transform visibility-visible duration-600 bg-white_solid-default"
+      :class="{ container: props.container }"
+    >
+      <div
+        class="cursor-pointer transition-opacity duration-300 hover:opacity-60"
+        @click.stop="onLogoClick"
+      >
         <img src="@/assets/arcana-logo.svg" alt="Arcana Logo" />
       </div>
     </header>
   </section>
 </template>
-
-<style scoped>
-.header-section {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  width: 100%;
-  border-bottom: #d9d9d9 1px solid;
-  transition: transform 0.4s;
-}
-
-header {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  padding: 1.5rem 2rem;
-  visibility: visible;
-  background: var(--primary-light);
-  transition: transform 0.6s;
-}
-
-.hide-header {
-  transform: translateY(-100%);
-}
-
-.logo {
-  cursor: pointer;
-  transition: opacity 0.3s;
-}
-
-.logo:hover {
-  opacity: 0.6;
-}
-</style>
diff --git a/src/components/MainnetAppCreatedPopup.vue b/src/components/MainnetAppCreatedPopup.vue
index 2355895f..aab52d7e 100644
--- a/src/components/MainnetAppCreatedPopup.vue
+++ b/src/components/MainnetAppCreatedPopup.vue
@@ -23,54 +23,24 @@ function handleMainnetKeySpace() {
 
 <template>
   <VOverlay>
-    <div class="popup-container">
-      <VCard class="popup-card">
+    <div class="flex items-center justify-center w-full h-full">
+      <VCard class="flex flex-col items-center w-full max-w-px600 p-8">
         <img src="@/assets/success-celebrate.svg" class="w-32" />
-        <h3 class="popup-title">{{ NetworkName.mainnet }} App Created!</h3>
-        <span class="popup-message">
+        <h3 class="my-2.5 text-3xl text-center">
+          {{ NetworkName.mainnet }} App Created!
+        </h3>
+        <span
+          class="max-w-px500 mt-2.5 mb-16 text-base leading-6 text-center text-black_solid-default"
+        >
           {{ NetworkName.mainnet }} app has been configured. <br />Please
           proceed to configure your app's keyspace
         </span>
         <VButton
           label="CONFIGURE KEYSPACE"
-          class="w-[200px]"
+          class="w-px200"
           @click.stop="handleMainnetKeySpace()"
         />
       </VCard>
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-.popup-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.popup-card {
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 600px;
-  padding: 2rem;
-}
-
-.popup-title {
-  margin-block: 10px;
-  font-size: 35px;
-  text-align: center;
-}
-
-.popup-message {
-  max-width: 500px;
-  margin-top: 10px;
-  margin-bottom: 64px;
-  font-size: 20px;
-  line-height: 1.5;
-  color: var(--text-black);
-  text-align: center;
-}
-</style>
diff --git a/src/components/OTPInput.vue b/src/components/OTPInput.vue
index ad825b09..d3fdf48d 100644
--- a/src/components/OTPInput.vue
+++ b/src/components/OTPInput.vue
@@ -117,7 +117,7 @@ async function resendOTP() {
       </button>
       <div class="flex flex-col items-center justify-center gap-3 text-center">
         <h2 class="text-rem2 font-bold">Verification</h2>
-        <span class="text-sm text-secondary-400"
+        <span class="text-sm text-fairy_dust-400"
           >Please enter the OTP that was sent to your email address</span
         >
       </div>
@@ -126,7 +126,7 @@ async function resendOTP() {
         @submit.prevent="submitOTP"
       >
         <div
-          class="relative z-10 flex gap-2 w-full items-center justify-between"
+          class="relative z-overlayTop flex gap-2 w-full items-center justify-between"
         >
           <input
             v-for="i in otpLength"
@@ -140,7 +140,7 @@ async function resendOTP() {
             pattern="\d*"
             maxlength="1"
             autocomplete="off"
-            class="outline-none border-none rounded-md p-2 bg-liquid placeholder:text-overlay-textplaceholder flex flex-grow justify-center items-center text-center overflow-x-scroll"
+            class="outline-none border-none rounded-md p-2 bg-firefly-default placeholder:text-whitemist-400 flex flex-grow justify-center items-center text-center overflow-x-scroll m-0 appearance-none"
             @input="void 0"
             @keydown="handleKeyDown($event, i - 1)"
             @paste.prevent="handlePaste"
@@ -182,12 +182,3 @@ async function resendOTP() {
     </div>
   </AppOverlay>
 </template>
-
-<style scoped>
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-</style>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index daa75269..9c3cae87 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -6,12 +6,12 @@ const emits = defineEmits(['search'])
 
 <template>
   <div
-    class="flex space-x-3 bg-liquidlight items-center w-[200px] p-2 rounded-md border border-black"
+    class="flex space-x-3 bg-whitemist-default items-center w-[200px] p-2 rounded-md border border-black"
   >
     <img :src="SearchIcon" alt="search" class="h-[18px] w-[18px]" />
     <input
       type="text"
-      class="bg-transparent flex-1 w-full border-none outline-none text-black"
+      class="bg-transparent flex-1 w-full border-none outline-none text-black_solid-default"
       placeholder="Search a Chain"
       @input="(event) => emits('search', event.target.value)"
     />
diff --git a/src/components/SwitchToMainnetConfirmation.vue b/src/components/SwitchToMainnetConfirmation.vue
index dbdf3c4b..997db62c 100644
--- a/src/components/SwitchToMainnetConfirmation.vue
+++ b/src/components/SwitchToMainnetConfirmation.vue
@@ -29,22 +29,28 @@ function onProceed() {
 
 <template>
   <VOverlay>
-    <div class="switch-chain__outer-container">
-      <div class="switch-chain__container">
-        <h3 class="switch-chain__title">
+    <div class="flex items-center justify-center h-full p-2.5">
+      <div
+        class="flex flex-col items-center justify-center max-w-px600 p-8 bg-white_solid-default rounded-lg space-y-5"
+      >
+        <h3 class="text-px35 text-center max-md:text-px20">
           Switch to {{ NetworkName.mainnet }}?
         </h3>
-        <p class="switch-chain__message">
+        <p
+          class="text-px15 text-black_solid-default text-center max-md:text-px15"
+        >
           To create {{ NetworkName.mainnet }} configuration profile you can copy
           {{ NetworkName.testnet }} application settings profile or create a
           fresh {{ NetworkName.mainnet }} configuration. Each configuration
           profile is assigned a unique App Address.
         </p>
-        <div class="flex switch-chain__copy-optionss">
+        <div
+          class="flex flex-wrap gap-5 justify-center w-full mt-10 space-x-px5"
+        >
           <div
             v-for="option in mainnetCopyOptions"
             :key="option.label"
-            class="switch-chain__copy-options"
+            class="flex items-baseline justify-center space-x-px5"
           >
             <VRadio
               id="switch-option"
@@ -57,103 +63,16 @@ function onProceed() {
             />
           </div>
         </div>
-        <div class="switch-chain__button-container">
+        <div class="flex gap-4 mt-16">
           <VButton
             variant="secondary"
-            class="switch-chain__button"
+            class="h-10"
             label="Cancel"
             @click="emits('cancel')"
           />
-          <VButton
-            class="switch-chain__button"
-            label="Proceed"
-            @click.stop="onProceed"
-          />
+          <VButton class="h-10" label="Proceed" @click.stop="onProceed" />
         </div>
       </div>
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-.switch-chain__dropdown-container {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.switch-chain__outer-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 10px;
-}
-
-.switch-chain__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 600px;
-  padding: 2rem;
-  background-color: #fff;
-  border-radius: 10px;
-}
-
-.switch-chain__title {
-  font-size: 35px;
-  text-align: center;
-}
-
-.switch-chain__message {
-  font-size: 15px;
-  color: #000;
-  text-align: center;
-}
-
-.switch-chain__container > * + * {
-  margin-top: 20px;
-}
-
-.switch-chain__button-container {
-  display: flex;
-  gap: 1rem;
-  margin-top: 64px;
-}
-
-.switch-chain__button {
-  height: 40px;
-}
-
-.switch-chain__copy-optionss {
-  flex-wrap: wrap;
-  gap: 1.25rem;
-  justify-content: center;
-  width: 100%;
-  margin-top: 40px;
-}
-
-.switch-chain__copy-optionss > * + * {
-  margin-left: 5px;
-}
-
-.switch-chain__copy-options {
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-}
-
-.switch-chain__copy-options > * + * {
-  margin-left: 5px;
-}
-
-@media only screen and (max-width: 767px) {
-  .switch-chain__title {
-    font-size: 20px;
-  }
-
-  .switch-chain__message {
-    font-size: 15px;
-  }
-}
-</style>
diff --git a/src/components/app-configure/AppKeyspace.vue b/src/components/app-configure/AppKeyspace.vue
index 283bf944..4f2086b9 100644
--- a/src/components/app-configure/AppKeyspace.vue
+++ b/src/components/app-configure/AppKeyspace.vue
@@ -85,7 +85,7 @@ function handleCancel() {
       <VStack gap="1.25rem" wrap>
         <VCard
           variant="depressed"
-          class="keyspace-card keyspace-container"
+          class="w-full max-w-px360 cursor-pointer max-w-px296 p-8 bg-black_solid-default"
           @click.stop="selectedKeyspace = 'app-specific'"
         >
           <VStack direction="column" gap="1.25rem" align="start">
@@ -94,15 +94,16 @@ function handleCancel() {
               type="radio"
               :checked="selectedKeyspace === 'app-specific'"
               value="app-specific"
+              class="grid place-content-center w-px20 h-px20 bg-white_solid-default border-2 border-black_solid-default rounded-full appearance-none shadow-none before:content-[''] before:w-4 before:h-4 before:bg-black_solid-default before:border-2 before:border-white_solid-default before:rounded-full before:appearance-none before:transition-transform before:duration-120 before:transform before:scale-0 before:ease-in-out checked:before:scale-100"
               @change="selectedKeyspace = 'app-specific'"
             />
             <VStack direction="column" gap="10px">
-              <span class="card-title">App Specific</span>
-              <span class="card-description"
+              <span class="text-base font-semibold">App Specific</span>
+              <span class="w-full text-xs leading-6 text-black_solid-default"
                 >Users will be assigned
-                <span class="bolder">a Wallet Address</span> that is unique to
-                your app. Since the user's keys are specific to your app, they
-                are not exposed to any malicious apps or transaction
+                <span class="font-extrabold">a Wallet Address</span> that is
+                unique to your app. Since the user's keys are specific to your
+                app, they are not exposed to any malicious apps or transaction
                 requests.</span
               >
             </VStack>
@@ -111,7 +112,7 @@ function handleCancel() {
         <div v-if="chosenWalletUIMode !== CUSTOM_UI" class="relative">
           <VCard
             variant="depressed"
-            class="keyspace-card-global keyspace-container"
+            class="keyspace-card-global max-w-px296 p-8 bg-black_solid-default"
             @click.stop="selectedKeyspace = 'global'"
           >
             <VStack gap="1.25rem" align="start" direction="column">
@@ -120,15 +121,16 @@ function handleCancel() {
                 type="radio"
                 :checked="selectedKeyspace === 'global'"
                 value="global"
+                class="grid place-content-center w-px20 h-px20 bg-white_solid-default border-2 border-black_solid-default rounded-full appearance-none shadow-none before:content-[''] before:w-4 before:h-4 before:bg-black_solid-default before:border-2 before:border-white_solid-default before:rounded-full before:appearance-none before:transition-transform before:duration-120 before:transform before:scale-0 before:ease-in-out checked:before:scale-100"
                 @change="selectedKeyspace = 'global'"
               />
               <VStack direction="column" gap="10px">
                 <VStack justify="space-between">
-                  <span class="card-title">Global</span>
+                  <span class="text-base font-semibold">Global</span>
                 </VStack>
-                <span class="card-description"
+                <span class="w-full text-xs leading-6 text-black_solid-default"
                   >Users will be assigned
-                  <span class="bolder">the same wallet address</span>
+                  <span class="font-extrabold">the same wallet address</span>
                   across all apps with Arcana Auth. This improves user
                   experience but users have to ensure they do not sign malicious
                   transactions on a fraudulent app. Arcana mitigates this risk
@@ -164,78 +166,3 @@ function handleCancel() {
     />
   </section>
 </template>
-
-<style scoped>
-.keyspace-card {
-  width: 100%;
-  max-width: 360px;
-  cursor: pointer;
-}
-
-.circle-indicator {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.keyspace-container {
-  max-width: 296px;
-  padding: 2rem;
-  background-color: var(--primary-black);
-}
-
-.card-title {
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.card-description {
-  width: 100%;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  color: var(--text-black);
-}
-
-.gradient-border-card {
-  padding: 2px;
-  background: var(--primary-dark);
-  border-radius: 10px;
-  opacity: 100;
-}
-
-.disabled-card {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-input[type='radio'] {
-  display: grid;
-  place-content: center;
-  width: 20px;
-  background: #fff;
-  border: #000 solid 2px;
-  border-radius: 50%;
-  box-shadow: none;
-  transform: translateX(0);
-  appearance: none;
-}
-
-input[type='radio']::before {
-  width: 16px;
-  height: 16px;
-  content: '';
-  background: #000;
-  border: #fff solid 2px;
-  border-radius: 50%;
-  transition: 120ms transform ease-in-out;
-  transform: scale(0);
-}
-
-input[type='radio']:checked::before {
-  transform: scale(1);
-}
-
-.bolder {
-  font-weight: bolder;
-}
-</style>
diff --git a/src/components/app-configure/ConfigureActionButtons.vue b/src/components/app-configure/ConfigureActionButtons.vue
index 2d4e3c25..d9ca1f8f 100644
--- a/src/components/app-configure/ConfigureActionButtons.vue
+++ b/src/components/app-configure/ConfigureActionButtons.vue
@@ -28,7 +28,9 @@ const emit = defineEmits(['cancel', 'save'])
 </script>
 
 <template>
-  <div class="footer flex flex-wrap flex-1">
+  <div
+    class="flex gap-8 justify-end mt-4 flex-wrap flex-1 max-md:flex-wrap-reverse max-md:gap-2 max-md:justify-center"
+  >
     <VButton
       v-if="!hideCancel"
       v-wave
@@ -48,19 +50,3 @@ const emit = defineEmits(['cancel', 'save'])
     />
   </div>
 </template>
-
-<style scoped>
-.footer {
-  gap: 2rem;
-  justify-content: flex-end;
-  margin-top: 1rem;
-}
-
-@media only screen and (max-width: 767px) {
-  .footer {
-    flex-wrap: wrap-reverse;
-    gap: 0.5rem;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/src/components/app-configure/ConfigureHeader.vue b/src/components/app-configure/ConfigureHeader.vue
index 35968c0c..ec182988 100644
--- a/src/components/app-configure/ConfigureHeader.vue
+++ b/src/components/app-configure/ConfigureHeader.vue
@@ -11,12 +11,12 @@ const selectedNetwork = ref('Testnet')
 </script>
 
 <template>
-  <VStack direction="column" gap="2rem" class="container">
+  <VStack direction="column" gap="2rem" class="my-4 mx-auto">
     <VStack justify="space-between" class="flex-1">
       <VStack gap="2rem">
         <img
           src="@/assets/iconography/back.svg"
-          class="cursor-pointer back-icon"
+          class="cursor-pointer w-12"
           alt="Go Back"
           @click.stop="router.back()"
         />
@@ -26,13 +26,3 @@ const selectedNetwork = ref('Testnet')
     </VStack>
   </VStack>
 </template>
-
-<style scoped>
-.back-icon {
-  width: 3rem;
-}
-
-.container {
-  margin: 1rem auto;
-}
-</style>
diff --git a/src/components/app-configure/ConfigureMobileMenu.vue b/src/components/app-configure/ConfigureMobileMenu.vue
index 2174f050..4805833a 100644
--- a/src/components/app-configure/ConfigureMobileMenu.vue
+++ b/src/components/app-configure/ConfigureMobileMenu.vue
@@ -10,39 +10,21 @@ const props = defineProps<MobileMenuProps>()
 
 <template>
   <div
-    class="absolute configure-mobile--container"
-    :class="{ show: props.showMobileMenu }"
+    class="absolute z-mid-overlayTop w-80 h-full bg-system-light_shadow transform transition-transform duration-300"
+    :class="[
+      'transform',
+      {
+        'translate-x-0': props.showMobileMenu,
+        '-translate-x-80': !props.showMobileMenu,
+      },
+    ]"
   >
-    <button class="configure-mobile__close-btn" @click="emit('close')">
+    <button
+      class="absolute top-px34 right-px10 cursor-pointer bg-transparent border-none outline-none"
+      @click="emit('close')"
+    >
       <img src="@/assets/iconography/close.svg" alt="close icon" />
     </button>
     <slot />
   </div>
 </template>
-
-<style scoped>
-.configure-mobile--container {
-  z-index: 1000;
-  box-sizing: border-box;
-  width: 20rem;
-  height: 100%;
-  background-color: #262626;
-  transition: transform 0.3s;
-  transform: translateX(-20.5rem);
-}
-
-.configure-mobile__close-btn {
-  position: absolute;
-  top: 34px;
-  right: 10px;
-  box-sizing: border-box;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.show {
-  transform: translateX(0);
-}
-</style>
diff --git a/src/components/app-configure/ConfigureSidebar.vue b/src/components/app-configure/ConfigureSidebar.vue
index 3e2aaa55..6d736dbe 100644
--- a/src/components/app-configure/ConfigureSidebar.vue
+++ b/src/components/app-configure/ConfigureSidebar.vue
@@ -220,63 +220,87 @@ function ellipsisAppName(appName: string) {
 </script>
 
 <template>
-  <aside class="configure-sidebar">
-    <VCard class="configure-sidebar-card">
-      <VStack direction="column" gap="1rem" class="configure-tabs flex-1">
-        <VStack class="apps-name__container relative">
+  <aside class="configure-sidebar w-60 h-full">
+    <VCard
+      class="configure-sidebar-card box-border flex flex-1 flex-col h-full p-8 pb-3 overflow-y-auto rounded-none"
+    >
+      <VStack direction="column" gap="1rem" class="configure-tabs flex-1 mb-8">
+        <VStack
+          class="apps-name__container relative w-full text-left flex flex-col pb-5"
+        >
           <button
-            class="flex space-x-2 justify-between app-name__container cursor-pointer"
+            class="flex space-x-2 justify-between app-name__container cursor-pointer flex items-center p-0 cursor-pointer bg-transparent border-0 outline-none"
             :title="appsStore.app(useAppId()).name"
             @click="showAppsList = !showAppsList"
           >
-            <img :src="getlogo(useAppId())" alt="app logo" class="app-logo" />
+            <img
+              :src="getlogo(useAppId())"
+              alt="app logo"
+              class="app-logo w-8 h-8"
+            />
             <label
-              class="text-ellipsis text-black font-bold text-2xl overflow-hidden"
+              class="text-ellipsis text-black_solid-default font-bold text-2xl overflow-hidden"
               >{{ ellipsisAppName(appsStore.app(useAppId()).name) }}</label
             >
             <img
               :src="arrowIcon"
               alt="arrow-icon"
-              class="arrow-icon"
+              class="arrow-icon w-px18 h-px18 ml-1 opacity-50 transition ease-in-out duration-500"
               :class="{
-                'arrow-icon--active': showAppsList,
+                'arrow-icon--active opacity-100 transition ease-in-out duration-500 transform rotate-180':
+                  showAppsList,
               }"
             />
           </button>
-          <VCard v-if="showAppsList" class="apps-name__list-container absolute">
+          <VCard
+            v-if="showAppsList"
+            class="apps-name__list-container border absolute top-0 right-rem-1 left-0 z-full-overlay flex flex-col gap-5 p-5 border-system-light_gray"
+          >
             <button
-              class="apps-name__close-btn"
+              class="apps-name__close-btn absolute top-2.5 right-2.5 cursor-pointer bg-transparent border-0 outline-none"
               @click.stop="showAppsList = false"
             >
-              <img :src="CloseIcon" alt="close" />
+              <img :src="CloseIcon" alt="close" class="w-px15" />
             </button>
             <VCardButton
               v-for="app in apps"
               :key="app.name"
-              class="apps-name__list-item"
+              class="apps-name__list-item flex gap-2 items-center justify-start p-0 mt-2.5 bg-transparent border-0 outline-none"
               :class="{ 'active-app': useAppId() === app.id }"
               @click="onAppClick(app.id)"
             >
-              <img :src="getlogo(app.id)" alt="app logo" class="app-logo" />
-              <span class="app-name text-ellipsis overflow-hidden">{{
-                app.name
-              }}</span>
+              <img
+                :src="getlogo(app.id)"
+                alt="app logo"
+                class="app-logo w-8 h-8 space-x-px5"
+              />
+              <span
+                class="app-name text-base font-normal leading-6 text-left text-ellipsis overflow-hidden text-black_solid-default hover:text-fairy_dust-default space-x-px5"
+                >{{ app.name }}</span
+              >
             </VCardButton>
-            <VSeperator class="app-full-bleed" />
+            <VSeperator
+              class="app-full-bleed w-calc-full-add-rem2.5 mx--rem1.25"
+            />
             <VCardButton
-              class="apps-name__list-item"
+              class="apps-name__list-item flex gap-2 items-center justify-start p-0 mt-2.5 bg-transparent border-0 outline-none"
               @click="router.push({ name: 'ManageApps' })"
             >
               <img
                 src="@/assets/iconography/manage.svg"
                 alt="manage apps"
-                class="app-icon"
+                class="app-icon w-6 h-6 p-1 space-x-px5"
               />
-              <span class="app-name text-ellipsis">Manage Apps</span>
+              <span
+                class="app-name text-base font-normal leading-6 text-left text-ellipsis hover:text-fairy_dust-default space-x-px5"
+                >Manage Apps</span
+              >
             </VCardButton>
           </VCard>
         </VStack>
-        <VSeperator class="full-bleed" />
+        <VSeperator
+          class="full-bleed w-calc-full-add-rem4 mx--rem2 w-full text-left"
+        />
         <VCardButton
           v-for="tab in ConfigureTabs"
           :key="`configure-sidebar-tab-${tab.type}`"
@@ -284,42 +308,78 @@ function ellipsisAppName(appName: string) {
             'active-tab':
               props.currentTab === tab.label || hasSubMenuSelected(tab.label),
           }"
-          class="sidebar__option"
+          class="sidebar__option w-full text-left flex flex-col gap-4 items-start justify-start py-2"
           @click.stop="onClickOfMenu(tab)"
         >
-          <div class="sidebar__option-item">
-            <img :src="tab.icon" alt="icon" class="sidebar__option-icon" />
+          <div
+            class="sidebar__option-item flex flex-row gap-4 items-start justify-center hover:custom-filter"
+          >
+            <img
+              :src="tab.icon"
+              alt="icon"
+              class="sidebar__option-icon custom-sidebar-filter"
+              :class="{
+                'custom-submenu-filter':
+                  props.currentTab === tab.label ||
+                  hasSubMenuSelected(tab.label),
+              }"
+            />
             <VStack gap="0.5rem" align="center">
-              <span class="tab-label">{{ tab.label }}</span>
+              <span
+                :class="[
+                  'tab-label text-base font-normal leading-6 text-left',
+                  props.currentTab === tab.label ||
+                  hasSubMenuSelected(tab.label)
+                    ? 'text-black_solid-default'
+                    : 'text-whitemist-400',
+                ]"
+                >{{ tab.label }}</span
+              >
               <img
                 v-if="tab.subMenu"
                 :src="arrowIcon"
                 alt="arrow-icon"
-                class="arrow-icon"
+                class="arrow-icon w-px18 h-px18 ml-1 opacity-50 transition ease-in-out duration-500"
                 :class="{
-                  'arrow-icon--active': showConfigureSubmenu,
+                  'arrow-icon--active opacity-100 transition ease-in-out duration-500 transform rotate-180':
+                    showConfigureSubmenu,
                 }"
               />
             </VStack>
           </div>
           <div
             v-if="tab.subMenu && showConfigureSubmenu"
-            class="sidebar__submenu | space-y-3"
+            class="sidebar__submenu | space-y-3 flex flex-col items-baseline justify-center mt-2 ml-5"
           >
             <div v-for="subTab in tab.subMenu" :key="subTab.label">
               <VCardButton
-                class="sidebar__submenu-option"
+                class="sidebar__submenu-option relative p-0 hover:custom-filter"
                 :class="{ 'submenu-active': isSubmenuSelected(subTab.label) }"
                 @click.stop="onClickOfMenu(subTab)"
               >
                 <div class="gap-3 flex flex-col">
-                  <div class="sidebar__submenu-option-item">
+                  <div
+                    class="sidebar__submenu-option-item flex flex-row gap-3 items-start"
+                  >
                     <img
                       :src="subTab.icon"
                       alt="icon"
-                      class="sidebar__submenu-option-icon"
+                      class="sidebar__submenu-option-icon custom-sidebar-filter"
+                      :class="{
+                        'custom-submenu-filter': isSubmenuSelected(
+                          subTab.label
+                        ),
+                      }"
                     />
-                    <span class="submenu-tab-label">{{ subTab.label }}</span>
+                    <span
+                      :class="[
+                        'submenu-tab-label text-base font-normal leading-6 text-left',
+                        isSubmenuSelected(subTab.label)
+                          ? 'text-black_solid-default'
+                          : 'text-whitemist-400',
+                      ]"
+                      >{{ subTab.label }}</span
+                    >
                   </div>
                 </div>
               </VCardButton>
@@ -330,249 +390,3 @@ function ellipsisAppName(appName: string) {
     </VCard>
   </aside>
 </template>
-
-<style scoped>
-.logo {
-  display: flex;
-  justify-content: flex-start;
-  padding: 0;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  transition: opacity 0.3s;
-}
-
-.app-logo {
-  width: 2rem;
-  height: 2rem;
-}
-
-.app-full-bleed {
-  width: calc(100% + 2.5rem);
-  margin-inline: -1.25rem;
-}
-
-.app-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0.25rem;
-}
-
-.configure-sidebar {
-  width: 15rem;
-  height: 100%;
-}
-
-.full-bleed {
-  width: calc(100% + 4rem) !important;
-  margin-inline: -2rem;
-}
-
-.configure-sidebar-card {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  height: 100%;
-  padding: 2rem;
-  padding-bottom: 0.75rem;
-  overflow-y: auto;
-  border-radius: 0;
-}
-
-.configure-tabs > * {
-  width: 100%;
-  text-align: left;
-}
-
-.configure-tabs {
-  margin-bottom: 2rem;
-}
-
-.sidebar__option {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 0.5rem 0 !important;
-}
-
-.sidebar__option-item {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.sidebar__submenu {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  justify-content: center;
-  margin-top: 0.5rem;
-  margin-left: 1.25rem;
-}
-
-.sidebar__submenu-option {
-  position: relative;
-  padding: 0 !important;
-}
-
-.sidebar__submenu-option-item {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  align-items: start;
-}
-
-.arrow-icon {
-  width: 18px;
-  height: 18px;
-  margin-left: 4px;
-  opacity: 0.5;
-  transition: ease 0.5s;
-}
-
-.arrow-icon--active {
-  opacity: 1;
-  transition: ease 0.5s;
-  transform: rotate(-180deg);
-}
-
-.strong {
-  font-weight: 600 !important;
-}
-
-.apps-name__container {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 20px;
-}
-
-.apps-name__list-container {
-  top: 0;
-  right: -1rem;
-  left: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1.25rem;
-  border: 1px solid var(--primary-liquid-border);
-}
-
-.apps-name__close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.apps-name__close-btn > img {
-  width: 15px;
-}
-
-.apps-name__list-item {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0 !important;
-  margin-top: 10px;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.selected-app,
-.tab-label,
-.app-name,
-.submenu-tab-label {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #989898;
-  text-align: left;
-}
-
-.active-app .app-name {
-  color: var(--primary-black);
-}
-
-.apps-name__list-item .app-name:hover {
-  color: var(--secondary);
-}
-
-.app-name__container {
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
-.apps-name__list-item * + * {
-  margin-left: 5px;
-}
-
-.active-tab .tab-label {
-  color: var(--primary-black);
-}
-
-.submenu-active .submenu-tab-label {
-  color: var(--primary-black);
-}
-
-.sidebar__option-icon {
-  filter: brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(24%)
-    hue-rotate(340deg) brightness(85%) contrast(91%);
-}
-
-.sidebar__option-item:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-.sidebar__submenu-option:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-.sidebar__submenu-option-icon {
-  filter: brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(24%)
-    hue-rotate(340deg) brightness(85%) contrast(91%);
-}
-
-.active-tab .sidebar__option-icon {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7494%)
-    hue-rotate(212deg) brightness(89%) contrast(100%);
-}
-
-.submenu-active .sidebar__submenu-option-icon {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7494%)
-    hue-rotate(212deg) brightness(89%) contrast(100%);
-}
-
-.social-icon {
-  width: 1.25rem;
-  vertical-align: middle;
-}
-
-@media only screen and (max-width: 767px) {
-  .social-icon {
-    width: 1rem;
-  }
-
-  .configure-sidebar {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/components/app-configure/CreateApp.vue b/src/components/app-configure/CreateApp.vue
index 7ed556d2..6d696fe0 100644
--- a/src/components/app-configure/CreateApp.vue
+++ b/src/components/app-configure/CreateApp.vue
@@ -100,7 +100,7 @@ function onChainSelect(_, option) {
   <VOverlay>
     <div class="fixed inset-0 flex justify-center items-center">
       <div
-        class="rounded-[10px] flex-col p-8 max-[768px]:p-4 bg-white max-w-[560px] min-w-[200px] w-[70%] max-h-screen overflow-y-auto"
+        class="rounded-px10 flex-col p-8 max-md:p-4 bg-white_solid-default max-w-px560 min-w-px200 w-70% max-h-screen overflow-y-auto"
       >
         <div v-if="showLoader" class="h-full flex justify-center items-center">
           <p>Please wait...</p>
@@ -109,20 +109,20 @@ function onChainSelect(_, option) {
           <div class="flex items-center justify-center relative">
             <img
               src="@/assets/iconography/close.svg"
-              class="absolute right-0 w-4 max-[768px]:w-3 cursor-pointer"
+              class="absolute right-0 w-4 max-md:w-3 cursor-pointer"
               @click.stop="emit('close')"
             />
-            <h2 class="text-2xl max-[768px]:text-lg font-bold text-center">
+            <h2 class="text-2xl max-md:text-lg font-bold text-center">
               Create New App
             </h2>
           </div>
-          <VSeperator class="full-bleed" />
+          <VSeperator class="w-calc-full-add-rem4 -mx-8" />
           <form @submit.prevent="handleCreateApp">
             <VStack direction="column" class="space-y-4">
               <VStack direction="column" class="space-y-3">
                 <VStack direction="column">
                   <label
-                    class="text-lg font-normal text-liquiddark"
+                    class="text-lg font-normal text-system-grey"
                     for="app-name"
                     >Enter App Name</label
                   >
@@ -136,9 +136,11 @@ function onChainSelect(_, option) {
                 </VStack>
                 <VStack direction="column">
                   <label
-                    class="text-lg font-normal text-liquiddark"
+                    class="text-lg font-normal text-system-grey"
                     for="default-chain"
-                    >Chain Type<span class="text-liquidred">*</span></label
+                    >Chain Type<span class="text-system-deep_red"
+                      >*</span
+                    ></label
                   >
                   <VDropdown
                     v-model="selectedChainType"
@@ -151,9 +153,11 @@ function onChainSelect(_, option) {
                   direction="column"
                 >
                   <label
-                    class="text-lg font-normal text-liquiddark"
+                    class="text-lg font-normal text-system-grey"
                     for="default-chain"
-                    >Shard Value<span class="text-liquidred">*</span></label
+                    >Shard Value<span class="text-system-deep_red"
+                      >*</span
+                    ></label
                   >
                   <VDropdown
                     v-model="selectedShard"
@@ -163,7 +167,7 @@ function onChainSelect(_, option) {
                 </VStack>
                 <VStack direction="column">
                   <label
-                    class="text-lg font-normal text-liquiddark"
+                    class="text-lg font-normal text-system-grey"
                     for="default-chain"
                     >Default Chain</label
                   >
@@ -177,24 +181,23 @@ function onChainSelect(_, option) {
                     :disabled="!selectedChainType"
                     @change="onChainSelect"
                   />
-                  <!-- <p class="text-liquiddark">
-                  *You can change the default chain later
-                </p> -->
                 </VStack>
                 <VStack direction="column">
                   <label
-                    class="text-lg font-normal text-liquiddark"
+                    class="text-lg font-normal text-system-grey"
                     for="default-chain"
-                    >Wallet UI Mode<span class="text-liquidred">*</span></label
+                    >Wallet UI Mode<span class="text-system-deep_red"
+                      >*</span
+                    ></label
                   >
                   <VDropdown
                     v-model="selectedWalletUIMode"
                     :options="WalletUIModes"
                     display-field="label"
                   />
-                  <p class="text-liquiddark">
-                    <span class="text-liquidred">*</span>You cannot change these
-                    properties later.
+                  <p class="text-system-grey">
+                    <span class="text-system-deep_red">*</span>You cannot change
+                    these properties later.
                   </p>
                 </VStack>
               </VStack>
@@ -211,10 +214,3 @@ function onChainSelect(_, option) {
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-.full-bleed {
-  width: calc(100% + 4rem);
-  margin-inline: -2rem;
-}
-</style>
diff --git a/src/components/app-configure/SettingCard.vue b/src/components/app-configure/SettingCard.vue
index 0e326140..c661369a 100644
--- a/src/components/app-configure/SettingCard.vue
+++ b/src/components/app-configure/SettingCard.vue
@@ -9,18 +9,18 @@ const slot = useSlots()
 </script>
 
 <template>
-  <VCard variant="elevated" class="settings-card">
-    <VStack direction="column" gap="1rem" class="flex-1">
+  <VCard variant="elevated" class="box-border w-full pt-8 pb-8 px-6 py-6">
+    <VStack direction="column" gap="1rem" class="flex-1 z-10">
       <VStack align="center" justify="space-between">
         <h2>
           <slot name="title" />
         </h2>
         <slot name="controls" />
       </VStack>
-      <VSeperator class="settings-card-separator" />
+      <VSeperator class="w-calc-full-add-rem3 mx--rem1.5" />
       <div
         v-if="slot.description"
-        class="text-md font-normal settings-card-description"
+        class="text-md font-normal settings-card-description text-system-grey z-10"
       >
         <slot name="description" />
       </div>
@@ -28,24 +28,3 @@ const slot = useSlots()
     </VStack>
   </VCard>
 </template>
-
-<style scoped>
-.settings-card {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 2rem 1.5rem;
-}
-
-.settings-card > * {
-  z-index: 1;
-}
-
-.settings-card-separator {
-  width: calc(100% + 3rem);
-  margin: 0 -1.5rem;
-}
-
-.settings-card-description {
-  color: var(--text-grey);
-}
-</style>
diff --git a/src/components/app-configure/SwitchKeyspacePopup.vue b/src/components/app-configure/SwitchKeyspacePopup.vue
index eea08a8c..357a1c07 100644
--- a/src/components/app-configure/SwitchKeyspacePopup.vue
+++ b/src/components/app-configure/SwitchKeyspacePopup.vue
@@ -9,11 +9,13 @@ const emit = defineEmits(['cancel', 'switch'])
 
 <template>
   <VOverlay>
-    <div class="popup-container">
-      <VCard class="popup-card">
+    <div class="flex items-center justify-center w-full h-full">
+      <VCard class="flex flex-col items-center w-full max-w-px600 p-8">
         <img src="@/assets/iconography/hazard-sign-icon.png" class="w-32" />
-        <h3 class="popup-title">Warning!</h3>
-        <span class="popup-message">
+        <h3 class="my-px10 text-px35 text-center">Warning!</h3>
+        <span
+          class="max-w-px500 mt-px10 mb-16 text-px20 leading-1.5 text-center text-black_solid-default"
+        >
           Attempting to switch between App-Specific & Global Keys. Please be
           aware that doing so will change your user's wallet
         </span>
@@ -21,12 +23,12 @@ const emit = defineEmits(['cancel', 'switch'])
           <VButton
             variant="secondary"
             label="CANCEL"
-            class="w-[120px]"
+            class="w-px120"
             @click.stop="emit('cancel')"
           />
           <VButton
             label="SWITCH"
-            class="w-[120px]"
+            class="w-px120"
             @click.stop="emit('switch')"
           />
         </VStack>
@@ -34,37 +36,3 @@ const emit = defineEmits(['cancel', 'switch'])
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-.popup-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.popup-card {
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 600px;
-  padding: 2rem;
-}
-
-.popup-title {
-  margin-block: 10px;
-  font-size: 35px;
-  text-align: center;
-}
-
-.popup-message {
-  max-width: 500px;
-  margin-top: 10px;
-  margin-bottom: 64px;
-  font-size: 20px;
-  line-height: 1.5;
-  color: var(--text-black);
-  text-align: center;
-}
-</style>
diff --git a/src/components/app-configure/VerificationForm.vue b/src/components/app-configure/VerificationForm.vue
index f7047629..5790dcc3 100644
--- a/src/components/app-configure/VerificationForm.vue
+++ b/src/components/app-configure/VerificationForm.vue
@@ -98,22 +98,28 @@ async function handleSubmit() {
 
 <template>
   <VOverlay>
-    <div class="overlay-content">
-      <VCard class="verification-form-card relative">
+    <div class="py-8">
+      <VCard
+        class="relative w-full max-w-px600 h-calc-full-minus-rem4 mx-auto overflow-x-hidden overflow-y-scroll"
+      >
         <img
           src="@/assets/iconography/close.svg"
           class="absolute cursor-pointer top-5 right-5 w-5"
           @click.stop="emit('close')"
         />
         <VStack direction="column" align="center">
-          <h3 class="verification-title">Verification Form</h3>
-          <div class="verification-description text-center">
+          <h3 class="mt-8 mb-2 text-2xl font-bold">Verification Form</h3>
+          <div class="px-rem4.25 mb-8 text-base leading-6 text-center">
             Fill up this verification form to register your application on
             {{ NetworkName.mainnet }} and enable the Global keys feature. For
             assistance,&nbsp;
-            <a href="mailto:support@arcana.network">contact support</a>.
+            <a
+              href="mailto:support@arcana.network"
+              class="text-base font-normal leading-6 no-underline text-cornflower_blue-default"
+              >contact support</a
+            >.
           </div>
-          <form @submit.prevent="handleSubmit">
+          <form class="w-full" @submit.prevent="handleSubmit">
             <VStack direction="column" gap="1.25rem" class="px-12">
               <VTextField
                 v-model="formData.companyName"
@@ -164,17 +170,30 @@ async function handleSubmit() {
                 no-message
                 placeholder="Ex: aspire.com"
               />
-              <div class="form-group" aria-label="Form group">
-                <label for="description"> Project Description </label>
-                <div class="text-field">
+              <div class="inline-flex flex-col" aria-label="Form group">
+                <label
+                  for="description"
+                  class="mb-2 ml-1 text-base font-normal leading-6 text-black_solid-default"
+                >
+                  Project Description
+                </label>
+                <div
+                  class="flex rounded-px10 bg-firefly-default focus:outline focus:outline-cornflower_blue-default focus:outline-1"
+                >
                   <textarea
                     v-model="formData.projectDescription"
                     placeholder="Less than 160 words"
                     rows="4"
+                    class="w-full p-0 my-3.5 mx-4 text-base leading-6 resize-none bg-transparent border-0 outline-none shadow-none placeholder:text-system-grey text-black_solid-default placeholder:text-base placeholder:leading-6"
                   ></textarea>
                 </div>
               </div>
-              <div v-show="error.trim()" class="error">{{ error }}</div>
+              <div
+                v-show="error.trim()"
+                class="text-base leading-6 text-system-red"
+              >
+                {{ error }}
+              </div>
             </VStack>
             <VStack gap="1.25rem" class="flex justify-center mb-8">
               <VButton
@@ -190,96 +209,3 @@ async function handleSubmit() {
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-.overlay-content {
-  padding-block: 2rem;
-}
-
-.verification-form-card {
-  width: 100%;
-  max-width: 600px;
-  height: calc(100vh - 4rem);
-  margin: auto;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-form {
-  width: 100%;
-}
-
-div.form-group {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-label {
-  margin-bottom: 0.5rem;
-  margin-left: 0.25rem;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5em;
-  color: var(--text-black);
-}
-
-div.text-field {
-  display: flex;
-  background: var(--primary-liquid);
-  border-radius: 10px;
-}
-
-.text-field.focused {
-  outline: 1px solid var(--primary);
-}
-
-textarea {
-  width: 100%;
-  padding: 0;
-  margin: 0.875rem 1rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--text-black);
-  resize: none;
-  background: transparent;
-  border: none;
-  outline: none;
-  box-shadow: none;
-
-  --webkit-outline: none;
-}
-
-textarea::placeholder {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--text-grey);
-}
-
-.verification-title {
-  margin-top: 2rem;
-  margin-bottom: 0.5rem;
-  font-size: 2rem;
-  font-weight: 700;
-}
-
-.verification-description {
-  padding-inline: 4.25rem;
-  margin-bottom: 2rem;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.verification-description a {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--primary);
-  text-decoration: none;
-}
-
-.error {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--color-red);
-}
-</style>
diff --git a/src/components/app-configure/auth/AuthProviderInput.vue b/src/components/app-configure/auth/AuthProviderInput.vue
index 7e271064..59e9f226 100644
--- a/src/components/app-configure/auth/AuthProviderInput.vue
+++ b/src/components/app-configure/auth/AuthProviderInput.vue
@@ -64,12 +64,12 @@ function handleInput5(event: Event) {
           <a
             :href="authProvider.documentation1.link"
             target="_blank"
-            class="no-underline text-white text-sm font-medium"
+            class="no-underline text-white_solid-default text-sm font-medium"
             >{{ authProvider.documentation1.label }}</a
           >
         </div>
         <input
-          class="flex-1 text-black bg-liquidlight p-2 rounded-md outline-none"
+          class="flex-1 text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none"
           :placeholder="authProvider.inputLabels.label1"
           :value="
             socialAuthStore.authCredentialsInput[authType][
@@ -88,12 +88,12 @@ function handleInput5(event: Event) {
           <a
             :href="authProvider?.documentation2?.link"
             target="_blank"
-            class="no-underline text-white text-sm font-medium"
+            class="no-underline text-white_solid-default text-sm font-medium"
             >{{ authProvider?.documentation2?.label }}</a
           >
         </div>
         <input
-          class="flex-1 text-black bg-liquidlight p-2 rounded-md outline-none"
+          class="flex-1 text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none"
           :placeholder="authProvider.inputLabels.label2"
           :value="
             socialAuthStore.authCredentialsInput[authType][
@@ -113,7 +113,7 @@ function handleInput5(event: Event) {
       >
         <span class="text-xs">{{ authProvider.inputLabels.label3 }}</span>
         <input
-          class="flex-1 text-black bg-liquidlight p-2 rounded-md outline-none"
+          class="flex-1 text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none"
           :placeholder="authProvider.inputLabels.label3"
           :value="
             socialAuthStore.authCredentialsInput[authType][
@@ -133,7 +133,7 @@ function handleInput5(event: Event) {
       >
         <span class="text-xs">{{ authProvider.inputLabels.label4 }}</span>
         <input
-          class="flex-1 text-black bg-liquidlight p-2 rounded-md outline-none"
+          class="flex-1 text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none"
           :placeholder="authProvider.inputLabels.label4"
           :value="
             socialAuthStore.authCredentialsInput[authType][
@@ -154,7 +154,7 @@ function handleInput5(event: Event) {
         <span class="text-xs">{{ authProvider.inputLabels.label5 }}</span>
 
         <textarea
-          class="flex-1 text-black bg-liquidlight p-2 rounded-md outline-none"
+          class="flex-1 text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none"
           :placeholder="`-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----`"
           :value="
             socialAuthStore.authCredentialsInput[authType][
diff --git a/src/components/app-configure/auth/AuthProviderList.vue b/src/components/app-configure/auth/AuthProviderList.vue
index 5afea654..d7ec7c59 100644
--- a/src/components/app-configure/auth/AuthProviderList.vue
+++ b/src/components/app-configure/auth/AuthProviderList.vue
@@ -58,7 +58,7 @@ function areRequiredFieldsFilled(verifier: string) {
 
 <template>
   <div
-    class="w-32 h-full py-4 space-y-4 rounded-xl bg-liquidlight flex flex-col justify-around items-center"
+    class="w-32 h-full py-4 space-y-4 rounded-xl bg-whitemist-default flex flex-col justify-around items-center"
   >
     <div
       v-for="provider in providers"
@@ -68,7 +68,7 @@ function areRequiredFieldsFilled(verifier: string) {
       <button
         class="border-2 bg-white cursor-pointer w-14 h-14 rounded-full flex items-center justify-center"
         :class="{
-          'border-pink': isSelected(provider.verifier),
+          'border-fairy_dust-default': isSelected(provider.verifier),
           grayscale: !areRequiredFieldsFilled(provider.verifier),
         }"
         @click.prevent="selectProvider(provider.verifier)"
@@ -80,8 +80,8 @@ function areRequiredFieldsFilled(verifier: string) {
         />
       </button>
       <span
-        class="text-xs text-black"
-        :class="{ 'text-pink': isSelected(provider.verifier) }"
+        class="text-xs text-black_solid-default"
+        :class="{ 'text-fairy_dust-default': isSelected(provider.verifier) }"
         >{{ provider.name }}</span
       >
     </div>
diff --git a/src/components/app-configure/auth/CustomVerifier.vue b/src/components/app-configure/auth/CustomVerifier.vue
index b2f72f06..1c33073b 100644
--- a/src/components/app-configure/auth/CustomVerifier.vue
+++ b/src/components/app-configure/auth/CustomVerifier.vue
@@ -274,7 +274,7 @@ watch(
   <div class="bg-white rounded-xl space-y-5">
     <div>
       <div
-        class="flex items-center justify-between border-b border-liquidgrey p-7"
+        class="flex items-center justify-between border-b border-system-light_gray p-7"
       >
         <h3>Custom OAuth</h3>
         <div v-if="fetchedData.name" class="flex items-center space-x-2">
@@ -297,7 +297,7 @@ watch(
         <a
           :href="LEARN_MORE_LINK"
           target="_blank"
-          class="no-underline uppercase text-black text-sm font-bold"
+          class="no-underline uppercase text-black_solid-default text-sm font-bold"
           >Learn More</a
         >
       </p>
@@ -317,7 +317,9 @@ watch(
                 name="idParam"
                 value="sub"
               />
-              <label class="text-black font-normal text-left" for="sub"
+              <label
+                class="text-black_solid-default font-normal text-left"
+                for="sub"
                 >Sub</label
               >
             </div>
@@ -329,7 +331,9 @@ watch(
                 name="idParam"
                 value="email"
               />
-              <label class="text-black font-normal" for="email">Email</label>
+              <label class="text-black_solid-default font-normal" for="email"
+                >Email</label
+              >
             </div>
             <div class="flex flex-row -space-x-2">
               <VRadioSecondary
@@ -339,7 +343,9 @@ watch(
                 name="idParam"
                 value="custom"
               />
-              <label class="text-black font-normal" for="custom">Custom</label>
+              <label class="text-black_solid-default font-normal" for="custom"
+                >Custom</label
+              >
             </div>
           </div>
           <div>
@@ -348,7 +354,7 @@ watch(
               v-model="idParam"
               type="text"
               name="idParam"
-              class="text-black bg-liquidlight p-2 rounded-md outline-none w-full"
+              class="text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none w-full"
             />
           </div>
         </fieldset>
@@ -356,12 +362,12 @@ watch(
           <div class="flex w-full justify-between">
             <legend class="text-[#8D8D8D] text-xs font-normal">
               <span>JWKS URL</span>
-              <span class="text-liquidred text-lg">*</span>
+              <span class="text-system-deep_red text-lg">*</span>
             </legend>
             <a
               :href="WHATS_JWKS_URL_LINK"
               target="_blank"
-              class="text-xs no-underline text-black font-normal"
+              class="text-xs no-underline text-black_solid-default font-normal"
               >What is a JWKS Endpoint?</a
             >
           </div>
@@ -371,7 +377,7 @@ watch(
               v-model="jwkUrl"
               type="text"
               name="validation"
-              class="text-black bg-liquidlight p-2 rounded-md outline-none w-full"
+              class="text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none w-full"
             />
           </div>
         </div>
@@ -379,7 +385,7 @@ watch(
           <div class="flex w-full justify-between">
             <legend class="text-[#8D8D8D] text-xs font-normal">
               <span>Issuer</span>
-              <span class="text-liquidred text-lg">*</span>
+              <span class="text-system-deep_red text-lg">*</span>
             </legend>
           </div>
           <div class="w-full">
@@ -388,7 +394,7 @@ watch(
               v-model="issuer"
               type="text"
               name="Issuer"
-              class="text-black bg-liquidlight p-2 rounded-md outline-none w-full"
+              class="text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none w-full"
             />
           </div>
         </div>
@@ -396,7 +402,7 @@ watch(
           <div class="flex w-full justify-between">
             <legend class="text-[#8D8D8D] text-xs font-normal">
               <span>Audience</span>
-              <span class="text-liquidred text-lg">*</span>
+              <span class="text-system-deep_red text-lg">*</span>
             </legend>
           </div>
           <div class="w-full">
@@ -405,7 +411,7 @@ watch(
               v-model="audience"
               type="text"
               name="audience"
-              class="text-black bg-liquidlight p-2 rounded-md outline-none w-full"
+              class="text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none w-full"
             />
           </div>
         </div>
@@ -413,13 +419,13 @@ watch(
       <div class="flex flex-col flex-1 space-y-5 ml-10 align-bottom">
         <div class="flex flex-col space-y-2">
           <div class="flex w-full justify-between">
-            <legend class="text-liquiddark text-xs font-normal">
+            <legend class="text-system-grey text-xs font-normal">
               JWK Validation (Optional)
             </legend>
             <a
               :href="WHATS_JWK_VALIDATION_LINK"
               target="_blank"
-              class="text-xs no-underline text-black font-normal"
+              class="text-xs no-underline text-black_solid-default font-normal"
               >What are Validation fields?</a
             >
           </div>
@@ -435,7 +441,7 @@ watch(
                 name="validation"
                 :value="item.field"
                 :onInput="($event) => onFieldChange($event, idx)"
-                class="text-black bg-liquidlight p-2 rounded-md outline-none w-full"
+                class="text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none w-full"
               />
             </div>
             <div class="ml-2 flex-1">
@@ -445,20 +451,20 @@ watch(
                 name="validation"
                 :value="item.value"
                 :onInput="($event) => onValueChange($event, idx)"
-                class="text-black bg-liquidlight p-2 rounded-md outline-none w-full"
+                class="text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none w-full"
               />
             </div>
             <div class="ml-2 w-7 h-7">
               <button
                 v-if="showDeleteButton(idx)"
-                class="text-black flex items-center w-7 h-7"
+                class="text-black_solid-default flex items-center w-7 h-7"
                 @click="removeValidationField(idx)"
               >
                 <img :src="DeleteIcon" alt="Add Chain" class="w-7 h-7" />
               </button>
               <button
                 v-else-if="idx < 2"
-                class="text-black flex items-center w-7 h-7"
+                class="text-black_solid-default flex items-center w-7 h-7"
                 @click="addValidationField"
               >
                 <img :src="PlusIcon" alt="Add Chain" class="w-7 h-7" />
diff --git a/src/components/app-configure/auth/IAMProviders.vue b/src/components/app-configure/auth/IAMProviders.vue
index 3832d348..25c9cad6 100644
--- a/src/components/app-configure/auth/IAMProviders.vue
+++ b/src/components/app-configure/auth/IAMProviders.vue
@@ -146,21 +146,21 @@ const areRequiredFieldsFilled = computed(() => {
 <template>
   <div class="bg-white rounded-xl space-y-7">
     <div>
-      <h3 class="p-7 border-b-[1px] border-liquidgrey">
+      <h3 class="p-7 border-b-[1px] border-system-light_gray">
         Identity Access Managers
       </h3>
-      <p class="text-liquiddark text-sm font-normal p-3.5">
+      <p class="text-system-grey text-sm font-normal p-3.5">
         Increase adoption of your app by enabling this option. Arcana will take
         care of issuing public and prviate keys to each user through our
         Decentralised Key Generation (DKG) mechanism and keep them secure.
         <a
           :href="LEARN_MORE_LINK"
           target="_blank"
-          class="no-underline uppercase text-black text-sm font-bold"
+          class="no-underline uppercase text-black_solid-default text-sm font-bold"
           >Learn More</a
         >
       </p>
-      <p class="text-liquidaqua text-sm font-normal px-3.5 animate-pulse">
+      <p class="text-system-blue text-sm font-normal px-3.5 animate-pulse">
         {{ selectedAuthProvider.note }}
       </p>
     </div>
diff --git a/src/components/app-configure/auth/RedirectURI.vue b/src/components/app-configure/auth/RedirectURI.vue
index fa40a659..47fe45a5 100644
--- a/src/components/app-configure/auth/RedirectURI.vue
+++ b/src/components/app-configure/auth/RedirectURI.vue
@@ -55,14 +55,14 @@ const props = defineProps({
 
 <template>
   <div
-    class="flex pt-5 space-x-4 max-[1080px]:flex-col max-[1080px]:space-x-0 max-[1080px]:space-y-4"
+    class="flex pt-5 space-x-4 max-px1080:flex-col max-px1080:space-x-0 max-px1080:space-y-4"
   >
     <VStack class="flex flex-1 flex-col space-y-2">
       <div class="flex justify-between">
         <span class="text-xs">Redirect URL</span>
       </div>
       <div
-        class="flex items-center justify-between text-black bg-liquidlight p-2 rounded-md outline-none"
+        class="flex items-center justify-between text-black_solid-default bg-whitemist-default p-2 rounded-md outline-none"
       >
         <span
           class="text-md font-normal text-ellipsis redirect-uri overflow-hidden"
@@ -71,40 +71,10 @@ const props = defineProps({
         >
         <img
           src="@/assets/iconography/copy.svg"
-          class="cursor-pointer copy-icon"
+          class="cursor-pointer w-px24 h-px24"
           @click.stop="copyRedirectUri"
         />
       </div>
     </VStack>
   </div>
 </template>
-
-<style scoped>
-.redirect-uri-info__container {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-}
-
-.redirect-uri-input {
-  padding: 1rem;
-  font-size: 1rem;
-  color: var(--text-color);
-  cursor: not-allowed;
-  border: none;
-  border-radius: 10px;
-}
-
-.copy-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.redirect-uri-info__description {
-  margin-top: 1rem;
-  color: var(--text-grey);
-}
-</style>
diff --git a/src/components/app-configure/auth/SocialAuthProvider.vue b/src/components/app-configure/auth/SocialAuthProvider.vue
index f6ddc29c..27652295 100644
--- a/src/components/app-configure/auth/SocialAuthProvider.vue
+++ b/src/components/app-configure/auth/SocialAuthProvider.vue
@@ -198,19 +198,19 @@ socialAuthStore.$subscribe((mutation) => {
 <template>
   <div class="bg-white rounded-xl space-y-7">
     <div>
-      <h3 class="p-7 border-b-[1px] border-liquidgrey">Social Auth</h3>
-      <p class="text-liquiddark text-sm font-normal p-3.5">
+      <h3 class="p-7 border-b-[1px] border-system-light_gray">Social Auth</h3>
+      <p class="text-system-grey text-sm font-normal p-3.5">
         Increase adoption of your app by enabling this option. Arcana will take
         care of issuing public and prviate keys to each user through our
         Decentralised Key Generation (DKG) mechanism and keep them secure.
         <a
           :href="LEARN_MORE_LINK"
           target="_blank"
-          class="no-underline uppercase text-black text-sm font-bold"
+          class="no-underline uppercase text-black_solid-default text-sm font-bold"
           >Learn More</a
         >
       </p>
-      <p class="text-liquidaqua text-sm font-normal px-3.5 animate-pulse">
+      <p class="text-system-blue text-sm font-normal px-3.5 animate-pulse">
         {{ selectedAuthProvider.note }}
       </p>
     </div>
diff --git a/src/components/app-configure/auth/WebWallet.vue b/src/components/app-configure/auth/WebWallet.vue
index 722ee01a..e97e0fb3 100644
--- a/src/components/app-configure/auth/WebWallet.vue
+++ b/src/components/app-configure/auth/WebWallet.vue
@@ -99,7 +99,7 @@ async function handleSave() {
       <form @submit.prevent="handleSave">
         <VStack direction="column" gap="1rem">
           <VStack direction="column" gap="1rem" class="flex-grow">
-            <div class="text-sm font-normal text-liquiddark">
+            <div class="text-sm font-normal text-system-grey">
               Secure Arcana wallet by restricting to load only in the context of
               the specified app domain. Arcana uses frame-ancestors CSP to
               restrict domains.
@@ -110,7 +110,7 @@ async function handleSave() {
               >
                 READ MORE
               </a>
-              <p class="text-sm font-normal mt-2 text-liquidaqua">
+              <p class="text-sm font-normal mt-2 text-system-blue">
                 Note: It may take 10 minutes to an hour for the Domain URL
                 setting to take effect.
               </p>
diff --git a/src/components/app-configure/chain-management/AppChainManagementForm.vue b/src/components/app-configure/chain-management/AppChainManagementForm.vue
index a09b6bba..eb1ced1e 100644
--- a/src/components/app-configure/chain-management/AppChainManagementForm.vue
+++ b/src/components/app-configure/chain-management/AppChainManagementForm.vue
@@ -133,7 +133,7 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
   <VOverlay>
     <div class="h-full flex overflow-y-auto py-2">
       <div
-        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] text-black p-4 space-y-5 bg-white m-auto"
+        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] text-black_solid-default p-4 space-y-5 bg-white m-auto"
       >
         <div
           v-if="showLoader"
@@ -144,14 +144,14 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
         <div v-else class="space-y-5">
           <div class="space-y-[10px]">
             <p class="text-lg">{{ TitleAction }} a Custom Chain</p>
-            <p class="text-sm text-liquiddark leading-4">
+            <p class="text-sm text-system-grey leading-4">
               {{ `${TitleAction}ed` }} custom chains will be automatically added
               to your user’s wallets.
             </p>
           </div>
           <form class="space-y-5">
             <div class="flex flex-col space-y-2">
-              <label for="network-name" class="text-xs text-liquiddark"
+              <label for="network-name" class="text-xs text-system-grey"
                 >Network Name*</label
               >
               <p v-if="formData.built_in" class="text-sm">
@@ -161,18 +161,18 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
                 v-else
                 v-model.trim="formData.name"
                 type="text"
-                class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none"
+                class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none"
                 name="network-name"
               />
             </div>
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-5">
-                <label for="rpc-url" class="text-xs text-liquiddark"
+                <label for="rpc-url" class="text-xs text-system-grey"
                   >RPC URL*</label
                 >
                 <p
                   v-if="showLoaderRPCValidation"
-                  class="text-xs text-liquiddark"
+                  class="text-xs text-system-grey"
                 >
                   Validating RPC URL...
                 </p>
@@ -180,7 +180,7 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
               <input
                 v-model.trim="formData.rpcURL"
                 type="text"
-                class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none"
+                class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none"
                 name="rpc-url"
               />
               <p v-if="showRpcError" class="text-xs text-red-700">
@@ -189,13 +189,13 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
             </div>
             <div class="flex space-x-2">
               <div class="flex flex-col space-y-2 w-1/2">
-                <label for="chain-id" class="text-xs text-liquiddark"
+                <label for="chain-id" class="text-xs text-system-grey"
                   >Chain ID*</label
                 >
                 <p
                   class="text-sm w-full h-full border-none outline-none"
                   :class="[
-                    formData.built_in ? 'p-0' : 'p-[10px] bg-liquidlight',
+                    formData.built_in ? 'p-0' : 'p-[10px] bg-whitemist-default',
                   ]"
                 >
                   {{ formData.chainId }}
@@ -211,7 +211,7 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
                 </p>
               </div>
               <div class="flex flex-col space-y-2 w-1/2">
-                <label for="currency" class="text-xs text-liquiddark"
+                <label for="currency" class="text-xs text-system-grey"
                   >Currency*</label
                 >
                 <p v-if="formData.built_in" class="text-sm">
@@ -221,13 +221,13 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
                   v-else
                   v-model.trim="formData.currency"
                   type="text"
-                  class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none"
+                  class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none"
                   name="currency"
                 />
               </div>
             </div>
             <div class="flex flex-col space-y-2">
-              <label for="explorer" class="text-xs text-liquiddark"
+              <label for="explorer" class="text-xs text-system-grey"
                 >Explorer</label
               >
               <p v-if="formData.built_in" class="text-sm">
@@ -237,17 +237,17 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
                 v-else
                 v-model.trim="formData.explorerURL"
                 type="text"
-                class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none"
+                class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none"
                 name="explorer"
               />
             </div>
             <div class="space-y-2">
-              <legend class="text-xs text-liquiddark">Chain Type*</legend>
+              <legend class="text-xs text-system-grey">Chain Type*</legend>
               <p v-if="formData.built_in" class="text-sm">
                 {{ formData.chainType }}
               </p>
               <div v-else class="flex flex-col space-y-1">
-                <label class="text-sm text-black flex space-x-1"
+                <label class="text-sm text-black_solid-default flex space-x-1"
                   ><input
                     v-model="formData.chainType"
                     type="radio"
@@ -256,7 +256,7 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
                   />
                   <span>Testnet</span></label
                 >
-                <label class="text-sm text-black flex space-x-1"
+                <label class="text-sm text-black_solid-default flex space-x-1"
                   ><input
                     v-model="formData.chainType"
                     type="radio"
@@ -269,13 +269,13 @@ async function fetchChainIdUsingRPCUrl(rpcURL: string) {
             </div>
             <div class="space-x-4 flex justify-end">
               <button
-                class="bg-liquid border-[1.5px] border-[#F7F7F7] w-[100px] p-2 rounded-md hover:text-pink"
+                class="bg-firefly-default border-[1.5px] border-[#F7F7F7] w-[100px] p-2 rounded-md hover:text-fairy_dust-default"
                 @click="emits('close')"
               >
                 Cancel
               </button>
               <button
-                class="bg-liquid text-black w-[100px] hover:text-pink p-2 rounded-md transition-opacity duration-500 opacity-100 disabled:opacity-30 disabled:text-black"
+                class="bg-firefly-default text-black_solid-default w-[100px] hover:text-fairy_dust-default p-2 rounded-md transition-opacity duration-500 opacity-100 disabled:opacity-30 disabled:text-black_solid-default"
                 :disabled="
                   !enableSave ||
                   chainIDs.find((chain) => chain === formData.chainId)
diff --git a/src/components/app-configure/chain-management/AppChainManagementList.vue b/src/components/app-configure/chain-management/AppChainManagementList.vue
index 8ea3e5b7..98803f5c 100644
--- a/src/components/app-configure/chain-management/AppChainManagementList.vue
+++ b/src/components/app-configure/chain-management/AppChainManagementList.vue
@@ -156,49 +156,68 @@ function isGaslessSupport(chainId: number) {
 </script>
 
 <template>
-  <div v-if="areChainsEmpty" class="text-black">
+  <div v-if="areChainsEmpty" class="text-black_solid-default">
     <p class="text-center p-3">No Chains Available</p>
   </div>
-  <div v-else class="bg-white rounded-md border-[1px] border-liquidgrey">
+  <div v-else class="bg-white rounded-md border-px1 border-system-light_gray">
     <table
-      class="table-fixed text-black md:max-lg:block overflow-x-auto border-collapse w-full"
+      class="table-fixed text-black_solid-default md:max-lg:block overflow-x-auto border-collapse w-full"
     >
-      <thead class="border-b-[1px] border-b-liquidgrey">
-        <tr class="text-liquiddark">
-          <th class="w-[5%]"></th>
-          <th class="w-[15%] hover:text-pink" @click="sortBy('name')">
+      <thead class="border-b-px1 border-b-system-light_gray">
+        <tr class="text-system-grey">
+          <th class="w-5% p-px15 text-left text-px12 font-normal"></th>
+          <th
+            class="w-15% p-px15 text-left text-px12 font-normal hover:text-fairy_dust-default"
+            @click="sortBy('name')"
+          >
             <button>Name</button>
           </th>
           <th
             v-if="selectedChainType !== 'near'"
-            class="w-[10%] hover:text-pink"
+            class="w-10% p-px15 text-left text-px12 font-normal hover:text-fairy_dust-default"
             @click="sortBy('chain_id')"
           >
             <button>Chain ID</button>
           </th>
-          <th class="w-[10%] hover:text-pink" @click="sortBy('currency')">
+          <th
+            class="w-10% p-px15 text-left text-px12 font-normal hover:text-fairy_dust-default"
+            @click="sortBy('currency')"
+          >
             <button>Currency</button>
           </th>
-          <th v-if="selectedChainType === 'multiversx'" class="w-[10%]">
+          <th
+            v-if="selectedChainType === 'multiversx'"
+            class="w-10% p-px15 text-left text-px12 font-normal"
+          >
             Shards
           </th>
-          <th class="w-[10%] hover:text-pink" @click="sortBy('chain_type')">
+          <th
+            class="w-10% p-px15 text-left text-px12 font-normal hover:text-fairy_dust-default"
+            @click="sortBy('chain_type')"
+          >
             <button>Type</button>
           </th>
-          <th class="hover:text-pink">RPC URL</th>
-          <th class="w-[10%] hover:text-pink" @click="sortBy('status')">
+          <th
+            class="p-px15 text-left text-px12 font-normal hover:text-fairy_dust-default"
+          >
+            RPC URL
+          </th>
+          <th
+            class="w-10% p-px15 text-left text-px12 font-normal hover:text-fairy_dust-default"
+            @click="sortBy('status')"
+          >
             <button>Enabled</button>
           </th>
-          <th class="w-[5%]"></th>
+          <th class="w-5% p-px15 text-left text-px12 font-normal"></th>
         </tr>
       </thead>
       <tbody>
         <tr
           v-for="chain in sortedList"
           :key="chain.id"
-          class="hover:bg-liquid hover:text-pink"
+          class="hover:bg-firefly-default hover:text-fairy_dust-default"
         >
-          <td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
             <img
               :src="
                 getChainLogo(chain.chain_id, chain.compatibility, app.network)
@@ -208,39 +227,55 @@ function isGaslessSupport(chainId: number) {
               @error="onChainLogoError"
             />
           </td>
-          <td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
             <div class="space-x-1 flex items-center">
               <span>{{ chain.name }}</span>
               <span
                 v-if="chain.default_chain"
-                class="text-[#568DF0] text-[8px] bg-[#568DF0]/[0.1] rounded-[5px] p-[2px] px-[4px]"
+                class="text-system-deep_blue text-px8 bg-system-deep_blue/[0.1] rounded-px5 p-px2 px-px4"
                 >Default</span
               >
               <span
                 v-if="isGaslessSupport(chain.chain_id)"
-                class="text-[#51C75F] text-[8px] bg-[#568DF0]/[0.1] rounded-[5px] p-[2px] px-[4px]"
+                class="text-system-deep_green text-px8 bg-system-deep_blue/[0.1] rounded-px5 p-px2 px-px4"
                 >Gasless</span
               >
             </div>
           </td>
-          <td v-if="selectedChainType !== 'near'">{{ chain.chain_id }}</td>
-          <td>{{ chain.currency }}</td>
-          <td v-if="selectedChainType === 'multiversx'">
+          <td
+            v-if="selectedChainType !== 'near'"
+            class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+          >
+            {{ chain.chain_id }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ chain.currency }}
+          </td>
+          <td
+            v-if="selectedChainType === 'multiversx'"
+            class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+          >
             {{ shardValue }}
           </td>
-          <td>{{ chain.chain_type }}</td>
-          <td class="text-ellipsis">{{ chain.rpc_url }}</td>
-          <td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ chain.chain_type }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ chain.rpc_url }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
             <VSwitch
               :value="chain.status"
               :disabled="chain.default_chain"
               @update:model-value="() => onChainToggle(chain)"
             />
           </td>
-          <td class="last:text-right">
+          <td
+            class="p-px15 text-left text-px14 font-medium overflow-ellipsis last:text-right"
+          >
             <PopperJs placement="left-start" :arrow="true">
               <button
-                class="flex justify-center items-center w-7 h-7 bg-[#262626] rounded-[5px]"
+                class="flex justify-center items-center w-7 h-7 bg-system-light_shadow rounded-px5"
               >
                 <img :src="MoreIcon" alt="more" />
               </button>
@@ -248,7 +283,7 @@ function isGaslessSupport(chainId: number) {
                 <ul
                   ref="showRowOptions_menu"
                   open
-                  class="flex flex-col bg-liquidlight text-black rounded-md p-2 space-y-1 relative"
+                  class="flex flex-col bg-whitemist-default text-black_solid-default rounded-md p-2 space-y-1 relative"
                 >
                   <li
                     v-for="option in getRowOptions(
@@ -257,7 +292,7 @@ function isGaslessSupport(chainId: number) {
                       rowOptions
                     )"
                     :key="option.value"
-                    class="p-1 rounded-[5px] hover:text-pink text-left cursor-pointer"
+                    class="p-1 rounded-px5 hover:text-fairy_dust-default text-left cursor-pointer"
                     @click.stop="onClickOfOption(option.value, chain.id, chain)"
                   >
                     <button>
@@ -273,22 +308,3 @@ function isGaslessSupport(chainId: number) {
     </table>
   </div>
 </template>
-
-<style scoped>
-th,
-td {
-  padding: 15px;
-  text-align: left;
-}
-
-th {
-  font-size: 12px;
-  font-weight: 400;
-}
-
-td {
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/src/components/app-configure/chain-management/ChainTypeSelection.vue b/src/components/app-configure/chain-management/ChainTypeSelection.vue
index 11578eeb..9923ba79 100644
--- a/src/components/app-configure/chain-management/ChainTypeSelection.vue
+++ b/src/components/app-configure/chain-management/ChainTypeSelection.vue
@@ -38,7 +38,7 @@ function handleModelValueUpdate(event: string) {
     >
       <div class="relative">
         <ListboxButton
-          class="relative w-full cursor-default rounded-md bg-liquidlight border border-solid border-liquidgrey py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="relative w-full cursor-default rounded-md bg-whitemist-default border border-solid border-system-light_gray py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 disabled:opacity-50 disabled:cursor-not-allowed"
           :class="{
             'opacity-50 cursor-not-allowed': props.disabled,
           }"
diff --git a/src/components/app-configure/chain-management/DeleteChain.vue b/src/components/app-configure/chain-management/DeleteChain.vue
index 3c18c753..6914d291 100644
--- a/src/components/app-configure/chain-management/DeleteChain.vue
+++ b/src/components/app-configure/chain-management/DeleteChain.vue
@@ -25,15 +25,15 @@ onMounted(() => {
   <VOverlay>
     <div class="h-full flex justify-center items-center">
       <div
-        class="w-[330px] h-44 bg-[#1F1F1F] p-4 rounded-[10px] text-white space-y-10"
+        class="w-[330px] h-44 bg-[#1F1F1F] p-4 rounded-[10px] text-white_solid-default space-y-10"
       >
         <div class="space-y-2.5">
           <h3>Delete a Chain</h3>
-          <p v-if="isGasTankConfigured" class="text-liquiddark leading-4">
+          <p v-if="isGasTankConfigured" class="text-system-grey leading-4">
             Warning: A Gastank is configured for this chain. Deleting this chain
             may disable the Gastank.
           </p>
-          <p v-else class="text-liquiddark leading-4">
+          <p v-else class="text-system-grey leading-4">
             Please confirm the deletion of the chain by clicking ‘Delete’ below.
           </p>
         </div>
@@ -45,7 +45,7 @@ onMounted(() => {
             Cancel
           </button>
           <button
-            class="bg-white text-black w-[100px] p-2 rounded-md"
+            class="bg-white text-black_solid-default w-[100px] p-2 rounded-md"
             @click.stop="emits('delete')"
           >
             Delete
diff --git a/src/components/app-configure/gasless/AddressSwitchConfirmation.vue b/src/components/app-configure/gasless/AddressSwitchConfirmation.vue
index de664265..24ee1661 100644
--- a/src/components/app-configure/gasless/AddressSwitchConfirmation.vue
+++ b/src/components/app-configure/gasless/AddressSwitchConfirmation.vue
@@ -27,7 +27,7 @@ const showEOAswitchWarning = ref(props.info.enabled)
           class="w-10 h-10"
         />
         <p>Confirm Switch</p>
-        <div class="text-liquiddark text-sm text-center space-y-2">
+        <div class="text-system-grey text-sm text-center space-y-2">
           <p v-if="showEOAswitchWarning">
             Disabling Smart Accounts will lead to your users using Externally
             Owned Accounts as the default. Your users will continue to have
@@ -48,7 +48,7 @@ const showEOAswitchWarning = ref(props.info.enabled)
             Cancel
           </button>
           <button
-            class="uppercase rounded-md bg-white border-black border-2 text-black w-24 h-9"
+            class="uppercase rounded-md bg-white border-black border-2 text-black_solid-default w-24 h-9"
             @click.stop="emits('proceed', props.info)"
           >
             Proceed
diff --git a/src/components/app-configure/gasless/AppGasTankDeposit.vue b/src/components/app-configure/gasless/AppGasTankDeposit.vue
index aa7d8ab9..765287fe 100644
--- a/src/components/app-configure/gasless/AppGasTankDeposit.vue
+++ b/src/components/app-configure/gasless/AppGasTankDeposit.vue
@@ -194,7 +194,7 @@ const enableSave = computed(() => {
       </div>
       <div
         v-else
-        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] text-black p-4 bg-white m-auto"
+        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] text-black_solid-default p-4 bg-white m-auto"
       >
         <div class="space-y-7">
           <div class="space-y-2.5">
@@ -202,7 +202,7 @@ const enableSave = computed(() => {
               Deposit Crypto to Gas Tank
             </p>
             <p v-else class="text-sm">Withdraw Crypto from Gas Tank</p>
-            <p class="text-sm text-liquiddark leading-4">
+            <p class="text-sm text-system-grey leading-4">
               Declare the owner of the gas tank by signing a message with your
               wallet:
             </p>
@@ -210,15 +210,17 @@ const enableSave = computed(() => {
           <div v-if="isConnected">
             <div>
               <p class="text-[10px]">
-                <span class="text-liquiddark">Total balance:</span>
+                <span class="text-system-grey">Total balance:</span>
                 {{ walletBalance }}
               </p>
               <p class="text-[10px]">
-                <span class="text-liquiddark">Total deposit:</span>
+                <span class="text-system-grey">Total deposit:</span>
                 {{ walletDeposit }}
               </p>
             </div>
-            <label for="amount" class="text-xs text-black">Amount</label>
+            <label for="amount" class="text-xs text-black_solid-default"
+              >Amount</label
+            >
             <input
               v-model="depositAmount"
               :disabled="!isConnectedAddressSameAsOwner()"
@@ -227,7 +229,7 @@ const enableSave = computed(() => {
                 'bg-neutral-900 cursor-not-allowed':
                   !isConnectedAddressSameAsOwner(),
               }"
-              class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none rounded-md"
+              class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none rounded-md"
               name="amount"
             />
             <p
@@ -239,9 +241,9 @@ const enableSave = computed(() => {
             </p>
           </div>
           <div v-else>
-            <span class="text-sm text-liquiddark leading-4">Tank Owner</span>
+            <span class="text-sm text-system-grey leading-4">Tank Owner</span>
             <button
-              class="uppercase border-2 text-sm w-full p-1 rounded-md bg-liquid text-black"
+              class="uppercase border-2 text-sm w-full p-1 rounded-md bg-firefly-default text-black_solid-default"
               @click.stop="connectToWallet(selectedGasTank.chainId)"
             >
               Connect Wallet
@@ -249,16 +251,18 @@ const enableSave = computed(() => {
           </div>
           <div class="space-x-2.5 flex justify-end">
             <button
-              class="border-[1.5px] text-sm border-liquid w-[100px] p-2 rounded-3xl hover:text-pink"
+              class="border-[1.5px] text-sm border-firefly-default w-[100px] p-2 rounded-3xl hover:text-fairy_dust-default"
               @click="emits('close')"
             >
               Cancel
             </button>
             <button
-              class="bg-liquid text-sm text-black w-[100px] p-2 rounded-3xl transition-opacity duration-500"
+              class="bg-firefly-default text-sm text-black_solid-default w-[100px] p-2 rounded-3xl transition-opacity duration-500"
               :disabled="!enableSave"
               :class="[
-                !enableSave ? 'opacity-30' : 'opacity-100 hover:text-pink',
+                !enableSave
+                  ? 'opacity-30'
+                  : 'opacity-100 hover:text-fairy_dust-default',
               ]"
               @click.prevent="onProceed"
             >
diff --git a/src/components/app-configure/gasless/AppGasTankForm.vue b/src/components/app-configure/gasless/AppGasTankForm.vue
index 25d34a91..d3cbffb0 100644
--- a/src/components/app-configure/gasless/AppGasTankForm.vue
+++ b/src/components/app-configure/gasless/AppGasTankForm.vue
@@ -47,14 +47,14 @@ const enableSave = computed(() => {
     <div class="h-full flex overflow-y-auto py-2">
       <div
         v-if="!isMetaMaskInstalled"
-        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] h-[230px] text-white p-4 space-y-5 bg-[#1F1F1F] m-auto text-center flex flex-col justify-center items-center"
+        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] h-[230px] text-white_solid-default p-4 space-y-5 bg-[#1F1F1F] m-auto text-center flex flex-col justify-center items-center"
       >
         <p>
           Looks like Metamask extension is not installed, please install to add
           gas tank
         </p>
         <button
-          class="bg-white text-black w-[100px] p-2 rounded-md transition-opacity duration-500"
+          class="bg-white text-black_solid-default w-[100px] p-2 rounded-md transition-opacity duration-500"
           @click="emits('close')"
         >
           Close
@@ -62,26 +62,28 @@ const enableSave = computed(() => {
       </div>
       <div
         v-else
-        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] text-white p-4 space-y-5 bg-white m-auto"
+        class="border-[1px] border-[#363636] rounded-lg max-h-[600px] w-[330px] text-white_solid-default p-4 space-y-5 bg-white m-auto"
       >
         <div class="space-y-[10px]">
-          <p class="text-lg text-black">Add Gas Tank</p>
-          <p class="text-sm text-liquiddark leading-4">
+          <p class="text-lg text-black_solid-default">Add Gas Tank</p>
+          <p class="text-sm text-system-grey leading-4">
             Please provide the following details to setup a gas tank:
           </p>
         </div>
         <form class="space-y-5" @submit.prevent="onSave(formData)">
           <div class="flex flex-col space-y-2">
-            <label for="network-name" class="text-xs text-black">Name</label>
+            <label for="network-name" class="text-xs text-black_solid-default"
+              >Name</label
+            >
             <input
               v-model.trim="formData.name"
               type="text"
-              class="text-sm bg-liquidlight-100 text-black p-[10px] w-full border-none outline-none rounded-xl"
+              class="text-sm bg-whitemist-100 text-black_solid-default p-[10px] w-full border-none outline-none rounded-xl"
               name="network-name"
             />
           </div>
           <div class="flex flex-col space-y-2">
-            <label for="network-name" class="text-xs text-black"
+            <label for="network-name" class="text-xs text-black_solid-default"
               >Network (Gasless Supported)</label
             >
             <VDropdown
@@ -93,17 +95,19 @@ const enableSave = computed(() => {
           <div class="space-x-2.5 flex justify-end">
             <button
               type="button"
-              class="border-[1.5px] border-[#F7F7F7] w-[100px] p-2 rounded-3xl bg-black hover:bg-pink"
+              class="border-[1.5px] border-[#F7F7F7] w-[100px] p-2 rounded-3xl bg-black hover:bg-fairy_dust-default"
               @click.stop="emits('close')"
             >
               Cancel
             </button>
             <button
               type="submit"
-              class="bg-black text-white w-[100px] p-2 rounded-3xl transition-opacity duration-500"
+              class="bg-black text-white_solid-default w-[100px] p-2 rounded-3xl transition-opacity duration-500"
               :disabled="!enableSave"
               :class="[
-                !enableSave ? 'opacity-20' : 'opacity-100 hover:bg-pink ',
+                !enableSave
+                  ? 'opacity-20'
+                  : 'opacity-100 hover:bg-fairy_dust-default ',
               ]"
             >
               Save
diff --git a/src/components/app-configure/gasless/AppGaslessSmartContractForm.vue b/src/components/app-configure/gasless/AppGaslessSmartContractForm.vue
index 9c392609..b4bfdcb3 100644
--- a/src/components/app-configure/gasless/AppGaslessSmartContractForm.vue
+++ b/src/components/app-configure/gasless/AppGaslessSmartContractForm.vue
@@ -224,35 +224,35 @@ onMounted(() => {
       </div>
       <div
         v-else
-        class="flex flex-column border-[1px] border-[#363636] rounded-lg h-[430px] w-[630px] text-black p-4 space-y-5 bg-white m-auto"
+        class="flex flex-column border-[1px] border-[#363636] rounded-lg h-[430px] w-[630px] text-black_solid-default p-4 space-y-5 bg-white m-auto"
       >
         <div class="space-y-[10px]">
           <p class="text-sm">Add Smart Contracts</p>
-          <p class="text-sm text-liquiddark leading-4">
+          <p class="text-sm text-system-grey leading-4">
             Specify the details of a contract to add it to the whitelist
           </p>
         </div>
         <div class="flex space-x-3 flex-1 overflow-hidden">
           <form class="w-1/2 space-y-3 flex flex-col">
             <div class="flex flex-col space-y-2">
-              <label for="network-name" class="text-xs text-liquiddark"
+              <label for="network-name" class="text-xs text-system-grey"
                 >Contract Name</label
               >
               <input
                 v-model="contractName"
                 type="text"
-                class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none rounded-md"
+                class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none rounded-md"
                 name="network-name"
               />
             </div>
             <div class="flex flex-col space-y-2">
               <div class="flex justify-between items-baseline">
-                <label for="network-name" class="text-xs text-liquiddark"
+                <label for="network-name" class="text-xs text-system-grey"
                   >Smart Contract Address</label
                 >
                 <button
                   v-if="contractAddress.length && props.formType === 'add'"
-                  class="text-xs text-black underline"
+                  class="text-xs text-black_solid-default underline"
                   @click.prevent="fetchAbi"
                 >
                   Fetch ABI
@@ -261,7 +261,7 @@ onMounted(() => {
               <input
                 v-model="contractAddress"
                 type="text"
-                class="text-sm bg-liquidlight p-[10px] w-full border-none outline-none rounded-md"
+                class="text-sm bg-whitemist-default p-[10px] w-full border-none outline-none rounded-md"
                 :class="{
                   'text-gray-500': props.formType === 'edit',
                 }"
@@ -270,13 +270,13 @@ onMounted(() => {
               />
             </div>
             <div class="flex flex-col space-y-2 flex-1">
-              <label for="network-name" class="text-xs text-liquiddark"
+              <label for="network-name" class="text-xs text-system-grey"
                 >Application Binary Interface (ABI)</label
               >
               <textarea
                 v-model="enteredAbi"
                 type="text"
-                class="text-sm bg-liquidlight p-[10px] w-full flex-1 border-none outline-none rounded-md"
+                class="text-sm bg-whitemist-default p-[10px] w-full flex-1 border-none outline-none rounded-md"
                 name="network-name"
                 :class="{
                   'text-gray-500': props.formType === 'edit',
@@ -289,10 +289,12 @@ onMounted(() => {
             </div>
           </form>
           <div class="w-1/2 flex flex-column space-y-2 overflow-hidden">
-            <span class="text-xs text-liquiddark"
+            <span class="text-xs text-system-grey"
               >Functions to Sponsor Gas Fees</span
             >
-            <div class="flex-1 bg-liquidlight p-1 overflow-auto space-y-2">
+            <div
+              class="flex-1 bg-whitemist-default p-1 overflow-auto space-y-2"
+            >
               <div
                 v-for="(abiItem, itemIndex) in abi"
                 :key="abiItem.name"
@@ -309,15 +311,17 @@ onMounted(() => {
         </div>
         <div class="space-x-2.5 flex justify-end">
           <button
-            class="border-[1.5px] bg-liquid hover:text-pink border-[#F7F7F7] w-[100px] p-2 rounded-3xl"
+            class="border-[1.5px] bg-firefly-default hover:text-fairy_dust-default border-[#F7F7F7] w-[100px] p-2 rounded-3xl"
             @click.stop="emits('close')"
           >
             Cancel
           </button>
           <button
-            class="bg-liquid text-black w-[100px] p-2 rounded-3xl transition-opacity duration-500"
+            class="bg-firefly-default text-black_solid-default w-[100px] p-2 rounded-3xl transition-opacity duration-500"
             :class="[
-              !enableSave ? 'opacity-40' : 'opacity-100 hover:text-pink',
+              !enableSave
+                ? 'opacity-40'
+                : 'opacity-100 hover:text-fairy_dust-default',
             ]"
             :disabled="!enableSave"
             @click.stop="save"
diff --git a/src/components/app-configure/gasless/AppGaslessTankList.vue b/src/components/app-configure/gasless/AppGaslessTankList.vue
index 9ea1a32d..e988080c 100644
--- a/src/components/app-configure/gasless/AppGaslessTankList.vue
+++ b/src/components/app-configure/gasless/AppGaslessTankList.vue
@@ -58,30 +58,34 @@ function onClickOfOption(option: number, id: number) {
 </script>
 
 <template>
-  <div class="rounded-md border-[1px] bg-white border-liquidgrey">
+  <div class="rounded-md border-px1 bg-white border-system-light_gray">
     <table
       v-if="gastankList.length"
-      class="table-fixed text-black block overflow-x-auto border-collapse"
+      class="table-fixed text-black_solid-default block overflow-x-auto border-collapse"
     >
-      <thead class="border-b-[1px] border-b-liquidgrey">
-        <tr class="text-liquiddark">
-          <th class="w-[5%]"></th>
-          <th class="w-[20%]">Name</th>
-          <th class="w-[20%]">Network</th>
-          <th class="w-[15%]">Type</th>
-          <th class="w-[15%]">Owner</th>
-          <th class="w-[5%]">Whitelists</th>
-          <th class="w-[15%]">Enable Smart Account</th>
-          <th class="w-[10%]"></th>
+      <thead class="border-b-px1 border-b-system-light_gray">
+        <tr class="text-system-grey">
+          <th class="w-5% p-px15 text-left text-px12 font-normal"></th>
+          <th class="w-20% p-px15 text-left text-px12 font-normal">Name</th>
+          <th class="w-20% p-px15 text-left text-px12 font-normal">Network</th>
+          <th class="w-15% p-px15 text-left text-px12 font-normal">Type</th>
+          <th class="w-15% p-px15 text-left text-px12 font-normal">Owner</th>
+          <th class="w-5% p-px15 text-left text-px12 font-normal">
+            Whitelists
+          </th>
+          <th class="w-15% p-px15 text-left text-px12 font-normal">
+            Enable Smart Account
+          </th>
+          <th class="w-10% p-px15 text-left text-px12 font-normal"></th>
         </tr>
       </thead>
       <tbody>
         <tr
           v-for="tank in filteredGastankList"
           :key="tank.name"
-          class="hover:bg-liquid"
+          class="hover:bg-firefly-default"
         >
-          <td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
             <img
               :src="getChainLogo(tank.chainId, 'evm', app.network)"
               alt="chain logo"
@@ -89,33 +93,46 @@ function onClickOfOption(option: number, id: number) {
               @error="onChainLogoError"
             />
           </td>
-          <td>{{ tank.name }}</td>
-          <td>{{ tank.network }}</td>
-          <td>{{ tank.type }}</td>
-          <td :title="tank.owner">{{ shrinkWalletAddress(tank.owner) }}</td>
-          <td>{{ tank.whitelists || '-' }}</td>
-          <td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ tank.name }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ tank.network }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ tank.type }}
+          </td>
+          <td
+            class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+            :title="tank.owner"
+          >
+            {{ shrinkWalletAddress(tank.owner) }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
+            {{ tank.whitelists || '-' }}
+          </td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
             <VSwitch
               :value="tank.enabled"
               @update:model-value="() => emits('toggle-chain-status', tank)"
             />
           </td>
-          <td>
+          <td class="p-px15 text-left text-px14 font-medium overflow-ellipsis">
             <PopperJs placement="left-start" :arrow="true">
               <button
-                class="flex justify-center items-center cursor-pointer w-7 h-7 bg-black rounded-[5px]"
+                class="flex justify-center items-center cursor-pointer w-7 h-7 bg-black rounded-px5"
               >
                 <img :src="MoreIcon" alt="more" />
               </button>
               <template #content>
                 <ul
                   ref="showRowOptions_menu"
-                  class="flex flex-col bg-white text-black rounded-md border-[1px] border-liquidgrey p-2 space-y-1 absolute w-36 left-[-100px] top-[10px] z-[999]"
+                  class="flex flex-col bg-white text-black_solid-default rounded-md border-px1 border-system-light_gray p-2 space-y-1 absolute w-36 left-px-100 top-px10 z-mid-overlay"
                 >
                   <li
                     v-for="option in rowOptions"
                     :key="option.value"
-                    class="p-1 rounded-[5px] hover:bg-liquidlight text-left cursor-pointer"
+                    class="p-1 rounded-px5 hover:bg-whitemist-default text-left cursor-pointer"
                     @click.stop="() => onClickOfOption(option.value, tank.id)"
                   >
                     <button>
@@ -130,41 +147,34 @@ function onClickOfOption(option: number, id: number) {
       </tbody>
     </table>
     <div v-else class="h-40 flex flex-col">
-      <table class="table-fixed text-white overflow-x-auto border-collapse">
-        <thead class="border-b-[1px] border-b-liquidgrey">
-          <tr class="text-liquiddark">
-            <th class="w-[14%]">Name</th>
-            <th class="w-[14%]">Balance</th>
-            <th class="w-[14%]">Deposit Address</th>
-            <th class="w-[14%]">Network</th>
-            <th class="w-[14%]">Type</th>
-            <th class="w-[14%]">Last Transaction Date</th>
-            <th class="w-[14%]">Whitelists</th>
+      <table
+        class="table-fixed text-white_solid-default overflow-x-auto border-collapse"
+      >
+        <thead class="border-b-px1 border-b-system-light_gray">
+          <tr class="text-system-grey">
+            <th class="w-14% p-px15 text-left text-px12 font-normal">Name</th>
+            <th class="w-14% p-px15 text-left text-px12 font-normal">
+              Balance
+            </th>
+            <th class="w-14% p-px15 text-left text-px12 font-normal">
+              Deposit Address
+            </th>
+            <th class="w-14% p-px15 text-left text-px12 font-normal">
+              Network
+            </th>
+            <th class="w-14% p-px15 text-left text-px12 font-normal">Type</th>
+            <th class="w-14% p-px15 text-left text-px12 font-normal">
+              Last Transaction Date
+            </th>
+            <th class="w-14% p-px15 text-left text-px12 font-normal">
+              Whitelists
+            </th>
           </tr>
         </thead>
       </table>
       <div class="flex-1 flex justify-center items-center">
-        <p class="text-liquiddark">Begin by Adding a Gas Tank</p>
+        <p class="text-system-grey">Begin by Adding a Gas Tank</p>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-th,
-td {
-  padding: 15px;
-  text-align: left;
-}
-
-th {
-  font-size: 12px;
-  font-weight: 400;
-}
-
-td {
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/src/components/app-configure/gasless/AppGaslessWhitelist.vue b/src/components/app-configure/gasless/AppGaslessWhitelist.vue
index c28e5049..033123bb 100644
--- a/src/components/app-configure/gasless/AppGaslessWhitelist.vue
+++ b/src/components/app-configure/gasless/AppGaslessWhitelist.vue
@@ -110,13 +110,13 @@ function hideDeleteConfirm() {
     <div class="h-full flex overflow-y-auto py-2">
       <div
         v-if="loader.show"
-        class="flex justify-center items-center m-auto h-[330px] w-[630px] border-[1px] border-[#363636] bg-white rounded-lg"
+        class="flex justify-center items-center m-auto h-px350 w-px630 border-px1 border-system-black_shadow bg-white_solid-default rounded-lg"
       >
         {{ loader.message }}
       </div>
       <div
         v-else
-        class="flex flex-column justify-center border-[1px] border-[#363636] rounded-lg min-h-[330px] max-h-[430px] w-[630px] text-black p-4 bg-white m-auto overflow-hidden"
+        class="flex flex-column justify-center border-px1 border-system-black_shadow rounded-lg min-h-px350 max-h-px430 w-px630 text-black_solid-default p-4 bg-white_solid-default m-auto overflow-hidden"
       >
         <div
           v-if="showConfirmDelete.show"
@@ -127,13 +127,13 @@ function hideDeleteConfirm() {
           </p>
           <div class="space-x-2.5">
             <button
-              class="border-[1.5px] border-[#F7F7F7] w-[100px] p-2 rounded-md"
+              class="border-px1.5 border-whitemist-default w-px100 p-2 rounded-md"
               @click="hideDeleteConfirm"
             >
               Cancel
             </button>
             <button
-              class="border-[1.5px] border-[#F7F7F7] bg-white text-black w-[100px] p-2 rounded-md"
+              class="border-px1.5 border-whitemist-default bg-white_solid-default text-black_solid-default w-px100 p-2 rounded-md"
               @click.stop="deleteHandler(showConfirmDelete.index)"
             >
               Delete
@@ -141,9 +141,9 @@ function hideDeleteConfirm() {
           </div>
         </div>
         <div v-else class="space-y-5">
-          <div class="space-y-[10px]">
+          <div class="space-y-px10">
             <p class="text-sm">Whitelist Smart Contracts</p>
-            <p class="text-sm text-liquiddark leading-4">
+            <p class="text-sm text-system-grey leading-4">
               The following is a list of contracts that are whitelisted for the
               sponsorship of gas fees.
             </p>
@@ -155,49 +155,69 @@ function hideDeleteConfirm() {
               Add Contract
             </button>
             <div
-              class="rounded-md border-[1px] border-liquidgrey w-full overflow-auto"
+              class="rounded-md border-px1 border-system-light_gray w-full overflow-auto"
             >
               <table
                 v-if="whitelists.length"
-                class="table-fixed text-black block overflow-x-auto border-collapse w-full"
+                class="table-fixed text-black_solid-default block overflow-x-auto border-collapse w-full"
               >
-                <thead class="border-b-[1px] border-b-liquidgrey">
-                  <tr class="text-liquiddark text-xs">
-                    <th class="w-[25%]">Contract Name</th>
-                    <th class="w-[25%]">Functions Enabled</th>
-                    <th class="w-[40%]">Date Added</th>
-                    <th class="w-[5%]"></th>
+                <thead class="border-b-px1 border-b-system-light_gray">
+                  <tr class="text-system-grey text-xs">
+                    <th class="w-25% p-px15 text-left text-px12 font-normal">
+                      Contract Name
+                    </th>
+                    <th class="w-25% p-px15 text-left text-px12 font-normal">
+                      Functions Enabled
+                    </th>
+                    <th class="w-40% p-px15 text-left text-px12 font-normal">
+                      Date Added
+                    </th>
+                    <th
+                      class="w-5% p-px15 text-left text-px12 font-normal"
+                    ></th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr
                     v-for="(list, index) in whitelists"
                     :key="list.name"
-                    class="hover:bg-liquidlight"
+                    class="hover:bg-whitemist-default"
                   >
-                    <td>{{ list.name }}</td>
-                    <td>{{ list.whitelisted_methods }}</td>
-                    <td>
+                    <td
+                      class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+                    >
+                      {{ list.name }}
+                    </td>
+                    <td
+                      class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+                    >
+                      {{ list.whitelisted_methods }}
+                    </td>
+                    <td
+                      class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+                    >
                       {{
                         moment(list.created_at).format('MMM D YYYY, H:mm:ss')
                       }}
                     </td>
-                    <td>
+                    <td
+                      class="p-px15 text-left text-px14 font-medium overflow-ellipsis"
+                    >
                       <PopperJs placement="left-start" :arrow="true">
                         <button
-                          class="flex justify-center items-center cursor-pointer w-7 h-7 bg-[#262626] rounded-[5px]"
+                          class="flex justify-center items-center cursor-pointer w-7 h-7 bg-system-light_shadow rounded-px5"
                         >
                           <img :src="MoreIcon" alt="more" />
                         </button>
                         <template #content>
                           <ul
                             ref="showRowOptions_menu"
-                            class="flex flex-col bg-white text-black rounded-md border-[1px] p-2 space-y-1 absolute w-36 left-[-100px] top-[10px] z-[999]"
+                            class="flex flex-col bg-white_solid-default text-black_solid-default rounded-md border-px1 p-2 space-y-1 absolute w-36 left-px-100 top-px10 z-mid-overlay"
                           >
                             <li
                               v-for="option in rowOptions"
                               :key="option.value"
-                              class="p-1 rounded-[5px] hover:bg-liquidlight text-left"
+                              class="p-1 rounded-px5 hover:bg-whitemist-default text-left"
                               @click.stop="
                                 () => onClickOfOption(option.value, index)
                               "
@@ -215,19 +235,27 @@ function hideDeleteConfirm() {
               </table>
               <div v-else class="h-40 flex flex-col">
                 <table
-                  class="table-fixed text-white block overflow-x-auto border-collapse w-full"
+                  class="table-fixed text-white_solid-default block overflow-x-auto border-collapse w-full"
                 >
-                  <thead class="border-b-[1px] border-b-[#363636]">
-                    <tr class="text-liquiddark text-xs">
-                      <th class="w-[25%]">Contract Name</th>
-                      <th class="w-[25%]">Functions Enabled</th>
-                      <th class="w-[40%]">Date Added</th>
-                      <th class="w-[5%]"></th>
+                  <thead class="border-b-px1 border-b-system-black_shadow">
+                    <tr class="text-system-grey text-xs">
+                      <th class="w-25% p-px15 text-left text-px12 font-normal">
+                        Contract Name
+                      </th>
+                      <th class="w-25% p-px15 text-left text-px12 font-normal">
+                        Functions Enabled
+                      </th>
+                      <th class="w-40% p-px15 text-left text-px12 font-normal">
+                        Date Added
+                      </th>
+                      <th
+                        class="w-5% p-px15 text-left text-px12 font-normal"
+                      ></th>
                     </tr>
                   </thead>
                 </table>
                 <div class="flex-1 flex justify-center items-center">
-                  <p class="text-liquiddark">
+                  <p class="text-system-grey">
                     Begin by adding a Contract for which you'd like to Sponsor
                     the Gas Fees
                   </p>
@@ -237,7 +265,7 @@ function hideDeleteConfirm() {
           </div>
           <div class="space-x-2.5 flex justify-end">
             <button
-              class="border-[1.5px] w-[100px] p-2 rounded-3xl hover:text-pink bg-liquid"
+              class="border-px1.5 w-px100 p-2 rounded-3xl hover:text-fairy_dust-default bg-firefly-default"
               @click.stop="emits('cancel')"
             >
               Cancel
@@ -248,22 +276,3 @@ function hideDeleteConfirm() {
     </div>
   </VOverlay>
 </template>
-
-<style scoped>
-th,
-td {
-  padding: 15px;
-  text-align: left;
-}
-
-th {
-  font-size: 12px;
-  font-weight: 400;
-}
-
-td {
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/src/components/app-configure/general/AppBranding.vue b/src/components/app-configure/general/AppBranding.vue
index 327deef6..2a2e332d 100644
--- a/src/components/app-configure/general/AppBranding.vue
+++ b/src/components/app-configure/general/AppBranding.vue
@@ -115,29 +115,27 @@ async function handleFileRemove(
       <template #title>Branding</template>
       <VStack direction="column" gap="2rem" class="w-full">
         <VStack direction="column" gap="0.5rem">
-          <h3>Wallet Logo</h3>
+          <h3 class="text-rem1.125">Wallet Logo</h3>
           <VStack direction="column" gap="0.5rem" class="body-2">
-            <p class="body-2 description">
+            <p class="body-2 text-system-grey">
               Use a wide rectangular live area to best view the horizontal logo
               on the Arcana wallet screen. The shape of the logo can vary.
             </p>
             <VStack gap="1rem">
-              <p class="flex justify-center items-center example__logo-mark">
-                <span class="description">Logo Mark Example:</span>
+              <p class="flex justify-center items-center mr-px10">
+                <span class="text-system-grey">Logo Mark Example:</span>
                 <img
                   src="@/assets/google-logo-mark.png"
                   alt="google logo mark"
-                  class="example-logo"
+                  class="h-px16 ml-px5"
                 />
               </p>
-              <p
-                class="flex justify-center items-center example__logo-horizontal"
-              >
-                <span class="description">Horizontal Logo Example:</span>
+              <p class="flex justify-center items-center ml-px10">
+                <span class="text-system-grey">Horizontal Logo Example:</span>
                 <img
                   src="@/assets/google-horizontal-logo.png"
                   alt="google horizontal logo"
-                  class="example-logo"
+                  class="h-px16 ml-px5"
                 />
               </p>
             </VStack>
@@ -146,10 +144,10 @@ async function handleFileRemove(
         <VStack direction="column" gap="0.5rem">
           <h4 class="font-bold">Light Mode</h4>
           <div
-            class="flex space-x-4 max-[1200px]:flex-col max-[1200px]:space-x-0 max-[1200px]:space-y-4 w-full"
+            class="flex space-x-4 max-low-xl:flex-col max-low-xl:space-x-0 max-low-xl:space-y-4 w-full"
           >
             <VStack direction="column" gap="0.375rem" class="flex-1">
-              <label for="light-logo">Logo Mark</label>
+              <label for="light-logo" class="text-system-grey">Logo Mark</label>
               <VFileUpload
                 id="light-logo"
                 placeholder="Upload .png or .svg"
@@ -160,13 +158,19 @@ async function handleFileRemove(
                 @remove-file="handleFileRemove('light', 'vertical')"
               />
               <span
-                class="body-3 font-light file-upload-hint"
-                :class="{ error: themeLogos.light.vertical.hasError }"
+                class="body-3 font-light text-rem0.75"
+                :class="{
+                  error: themeLogos.light.vertical.hasError,
+                  'text-system-creamy_red': themeLogos.dark.horizontal.hasError,
+                  'text-system-grey': !themeLogos.dark.horizontal.hasError,
+                }"
                 >Maximum image size: 1MB</span
               >
             </VStack>
             <VStack direction="column" gap="0.375rem" class="flex-1">
-              <label for="light-horizontal-logo">Horizontal Logo</label>
+              <label for="light-horizontal-logo" class="text-system-grey"
+                >Horizontal Logo</label
+              >
               <VFileUpload
                 id="light-horizontal-logo"
                 :value="themeLogos.light.horizontal.logo"
@@ -177,8 +181,12 @@ async function handleFileRemove(
                 @remove-file="handleFileRemove('light', 'horizontal')"
               />
               <span
-                class="body-3 font-light file-upload-hint"
-                :class="{ error: themeLogos.light.horizontal.hasError }"
+                class="body-3 font-light text-rem0.75"
+                :class="{
+                  error: themeLogos.light.horizontal.hasError,
+                  'text-system-creamy_red': themeLogos.dark.horizontal.hasError,
+                  'text-system-grey': !themeLogos.dark.horizontal.hasError,
+                }"
                 >Maximum image size: 1MB</span
               >
             </VStack>
@@ -187,10 +195,10 @@ async function handleFileRemove(
         <VStack direction="column" gap="0.5rem" class="w-full">
           <h4>Dark Mode</h4>
           <div
-            class="flex space-x-4 max-[1200px]:flex-col max-[1200px]:space-x-0 max-[1200px]:space-y-4 w-full"
+            class="flex space-x-4 max-low-xl:flex-col max-low-xl:space-x-0 max-low-xl:space-y-4 w-full"
           >
             <VStack direction="column" gap="0.375rem" class="flex-1 w-full">
-              <label for="dark-logo">Logo Mark</label>
+              <label for="dark-logo" class="text-system-grey">Logo Mark</label>
               <VFileUpload
                 id="dark-logo"
                 :value="themeLogos.dark.vertical.logo"
@@ -201,13 +209,19 @@ async function handleFileRemove(
                 @remove-file="handleFileRemove('dark', 'vertical')"
               />
               <span
-                class="body-3 font-light file-upload-hint"
-                :class="{ error: themeLogos.dark.vertical.hasError }"
+                class="body-3 font-light text-rem0.75"
+                :class="{
+                  error: themeLogos.dark.vertical.hasError,
+                  'text-system-creamy_red': themeLogos.dark.horizontal.hasError,
+                  'text-system-grey': !themeLogos.dark.horizontal.hasError,
+                }"
                 >Maximum image size: 1MB</span
               >
             </VStack>
             <VStack direction="column" gap="0.375rem" class="flex-1">
-              <label for="dark-horizontal-logo">Horizontal Logo</label>
+              <label for="dark-horizontal-logo" class="text-system-grey"
+                >Horizontal Logo</label
+              >
               <VFileUpload
                 id="dark-horizontal-log"
                 :value="themeLogos.dark.horizontal.logo"
@@ -218,8 +232,12 @@ async function handleFileRemove(
                 @remove-file="handleFileRemove('dark', 'horizontal')"
               />
               <span
-                class="body-3 font-light file-upload-hint"
-                :class="{ error: themeLogos.dark.horizontal.hasError }"
+                class="body-3 font-light text-rem0.75"
+                :class="{
+                  error: themeLogos.dark.horizontal.hasError,
+                  'text-system-creamy_red': themeLogos.dark.horizontal.hasError,
+                  'text-system-grey': !themeLogos.dark.horizontal.hasError,
+                }"
                 >Maximum image size: 1MB</span
               >
             </VStack>
@@ -231,36 +249,3 @@ async function handleFileRemove(
     </SettingCard>
   </section>
 </template>
-
-<style scoped>
-label,
-.description {
-  color: var(--text-grey);
-}
-
-h3 {
-  font-size: 1.125rem;
-}
-
-.example__logo-mark {
-  margin-right: 10px;
-}
-
-.example__logo-horizontal {
-  margin-left: 10px;
-}
-
-.example-logo {
-  height: 16px;
-  margin-left: 5px;
-}
-
-.file-upload-hint {
-  font-size: 0.75rem;
-  color: var(--text-grey);
-}
-
-.file-upload-hint.error {
-  color: #ee193f;
-}
-</style>
diff --git a/src/components/app-configure/general/AppControls.vue b/src/components/app-configure/general/AppControls.vue
index 569a07ec..67e05138 100644
--- a/src/components/app-configure/general/AppControls.vue
+++ b/src/components/app-configure/general/AppControls.vue
@@ -17,7 +17,7 @@ const showDeletePopup = ref(false)
       <VButton
         label="DELETE"
         variant="secondary"
-        class="delete-button"
+        class="self-start"
         @click.stop="showDeletePopup = true"
       />
     </SettingCard>
@@ -28,9 +28,3 @@ const showDeletePopup = ref(false)
     />
   </section>
 </template>
-
-<style scoped>
-.delete-button {
-  align-self: flex-start;
-}
-</style>
diff --git a/src/components/app-configure/general/AppDelete.vue b/src/components/app-configure/general/AppDelete.vue
index 9d98b7df..64977520 100644
--- a/src/components/app-configure/general/AppDelete.vue
+++ b/src/components/app-configure/general/AppDelete.vue
@@ -65,7 +65,9 @@ function handleCancel() {
 
 <template>
   <VOverlay>
-    <VCard class="modal-card">
+    <VCard
+      class="fixed top-1/2 left-1/2 flex flex-col gap-1vh w-72% min-w-px200 max-w-px560 p-8 transform -translate-x-1/2 -translate-y-1/2"
+    >
       <ConfirmDeletePopup
         v-if="showDeletePopup"
         :app-id="props.appId"
@@ -81,18 +83,3 @@ function handleCancel() {
     </VCard>
   </VOverlay>
 </template>
-
-<style scoped>
-.modal-card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  flex-direction: column;
-  gap: 1vh;
-  width: 72%;
-  min-width: 200px;
-  max-width: 560px;
-  padding: 2em;
-  transform: translate(-50%, -50%);
-}
-</style>
diff --git a/src/components/app-configure/general/AppName.vue b/src/components/app-configure/general/AppName.vue
index eb62bb8f..bfda7f6d 100644
--- a/src/components/app-configure/general/AppName.vue
+++ b/src/components/app-configure/general/AppName.vue
@@ -52,7 +52,7 @@ function handleCancel() {
       <form @submit.prevent="handleSave">
         <VTextField
           v-model.trim="appName"
-          class="app-name-input"
+          class="w-full max-w-rem22"
           :message-type="!isValidAppName() ? 'error' : ''"
           message="App name cannot be empty"
         />
@@ -65,10 +65,3 @@ function handleCancel() {
     </SettingCard>
   </section>
 </template>
-
-<style scoped>
-.app-name-input {
-  width: 100%;
-  max-width: 22rem;
-}
-</style>
diff --git a/src/components/app-configure/general/ConfirmDeletePopup.vue b/src/components/app-configure/general/ConfirmDeletePopup.vue
index 94b7487e..4599e635 100644
--- a/src/components/app-configure/general/ConfirmDeletePopup.vue
+++ b/src/components/app-configure/general/ConfirmDeletePopup.vue
@@ -15,7 +15,7 @@ const appsStore = useAppsStore()
 
 <template>
   <header
-    class="lg:text-[2rem] md:text-[1.25rem] max-[768px]:text-[1.125rem] font-bold flex-1 flex justify-center"
+    class="lg:text-rem2 md:text-rem1.25 max-md:text-rem1.125 font-bold flex-1 flex justify-center"
   >
     <div
       class="text-ellipsis overflow-hidden max-w-full"
@@ -25,14 +25,14 @@ const appsStore = useAppsStore()
     </div>
   </header>
   <VSeperator />
-  <main class="body-3">
+  <main class="body-3 p-8 text-sm leading-6 text-center">
     Deleting the app will remove all the assets that have been uploaded by your
     application and it's users, remove public and private keys assigned to users
     and any access controls that may have been set.
     <br /><br />
     Please press 'Delete' to confirm this action.
   </main>
-  <footer class="flex sm-column flex-1">
+  <footer class="flex sm-column flex-1 gap-8 items-center justify-center">
     <VButton
       v-wave
       variant="secondary"
@@ -47,18 +47,3 @@ const appsStore = useAppsStore()
     />
   </footer>
 </template>
-
-<style scoped>
-main {
-  padding: 2vw;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  text-align: center;
-}
-
-footer {
-  gap: 2vh;
-  align-items: center;
-  justify-content: center;
-}
-</style>
diff --git a/src/components/app-configure/general/DeleteTimerPopup.vue b/src/components/app-configure/general/DeleteTimerPopup.vue
index 8bd03cc8..4916413b 100644
--- a/src/components/app-configure/general/DeleteTimerPopup.vue
+++ b/src/components/app-configure/general/DeleteTimerPopup.vue
@@ -54,7 +54,7 @@ function handleProceedDeletion() {
 <template>
   <div class="flex flex-col space-y-10">
     <header
-      class="lg:text-[2rem] md:text-[1.25rem] max-[768px]:text-[1.125rem] font-bold flex-1 flex justify-center"
+      class="lg:text-rem2 md:text-rem1.25 max-md:text-rem1.125 font-bold flex-1 flex justify-center"
     >
       <div
         class="text-ellipsis overflow-hidden max-w-full"
@@ -64,21 +64,21 @@ function handleProceedDeletion() {
       </div>
     </header>
     <div
-      class="outer-clock | flex relative items-center self-center justify-center w-[200px] h-[200px] mx-[3em] bg-black rounded-full"
+      class="flex relative items-center self-center justify-center w-px200 h-px200 mx-3em bg-black_solid-default rounded-full"
     >
       <Vue3CircleProgress
         :percent="timerProgressPercentage"
-        fill-color="secondary"
-        empty-color="primary_liquid"
+        fill-color="fairy_dust-default"
+        empty-color="firefly-100"
         :size="200"
       />
       <div
-        class="inner-clock | flex absolute z-[1] items-center justify-center w-[94%] h-[94%] rounded-full"
+        class="flex absolute z-top items-center justify-center w-94% h-94% rounded-full bg-white_solid-default"
       >
-        <span class="lg:text-2xl max-[768px]:text-xl">{{ timerDisplay }}</span>
+        <span class="lg:text-2xl max-md:text-xl">{{ timerDisplay }}</span>
       </div>
     </div>
-    <footer class="flex flex-row items-center justify-center gap-[2vh] flex-1">
+    <footer class="flex flex-row items-center justify-center gap-2vh flex-1">
       <VButton
         v-wave
         variant="secondary"
@@ -94,13 +94,3 @@ function handleProceedDeletion() {
     </footer>
   </div>
 </template>
-
-<style scoped>
-.outer-clock {
-  background: #000;
-}
-
-.inner-clock {
-  background: #fff;
-}
-</style>
diff --git a/src/components/app-configure/general/WalletTheme.vue b/src/components/app-configure/general/WalletTheme.vue
index 2810f7c9..98637f1c 100644
--- a/src/components/app-configure/general/WalletTheme.vue
+++ b/src/components/app-configure/general/WalletTheme.vue
@@ -81,12 +81,12 @@ async function handleSave() {
         <VStack direction="column" gap="1rem" class="mb-4">
           <h3>Wallet Theme</h3>
           <VStack direction="column" gap="0.5rem" align="start">
-            <h4 class="text-grey">Choose Theme</h4>
+            <h4 class="text-system-grey">Choose Theme</h4>
             <VDropdown
               v-model="selectedTheme"
               :options="availableThemes"
               display-field="label"
-              class="theme-dropdown"
+              class="min-w-rem16"
             />
           </VStack>
         </VStack>
@@ -94,34 +94,35 @@ async function handleSave() {
           <h3>Branding Preview</h3>
           <VStack gap="2.5rem" wrap>
             <VStack direction="column" gap="0.5rem">
-              <h4 class="text-grey">Desktop</h4>
+              <h4 class="text-system-grey">Desktop</h4>
               <img
                 v-if="selectedTheme.value === 'light'"
                 src="@/assets/web-wallet-preview-desktop-light.png"
                 alt="Web wallet desktop preview"
-                class="web-wallet-desktop-preview"
+                class="w-full max-w-rem38"
               />
+
               <img
                 v-else
                 src="@/assets/web-wallet-preview-desktop-dark.png"
                 alt="Web wallet desktop preview"
-                class="web-wallet-desktop-preview"
+                class="w-full max-w-rem38"
               />
             </VStack>
             <VSeperator vertical class="tablet-remove mobile-remove" />
             <VStack direction="column" gap="0.5rem">
-              <h4 class="text-grey">Mobile</h4>
+              <h4 class="text-system-grey">Mobile</h4>
               <img
                 v-if="selectedTheme.value === 'light'"
                 src="@/assets/web-wallet-preview-mobile-light.png"
                 alt="Web wallet mobile preview"
-                class="web-wallet-mobile-preview"
+                class="w-full max-w-rem12"
               />
               <img
                 v-else
                 src="@/assets/web-wallet-preview-mobile-dark.png"
                 alt="Web wallet mobile preview"
-                class="web-wallet-mobile-preview"
+                class="w-full max-w-rem12"
               />
             </VStack>
           </VStack>
@@ -135,33 +136,3 @@ async function handleSave() {
     </form>
   </section>
 </template>
-
-<style scoped>
-.theme-dropdown {
-  min-width: 16rem;
-}
-
-.text-grey {
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--text-grey);
-}
-
-.web-wallet-input {
-  max-width: 24rem;
-}
-
-.ui-mode-switch {
-  margin-top: 4px;
-}
-
-.web-wallet-desktop-preview {
-  width: 100%;
-  max-width: 38rem;
-}
-
-.web-wallet-mobile-preview {
-  width: 100%;
-  max-width: 12rem;
-}
-</style>
diff --git a/src/components/app-configure/store/StorageRegion.vue b/src/components/app-configure/store/StorageRegion.vue
index dde5b4e8..0871e3a1 100644
--- a/src/components/app-configure/store/StorageRegion.vue
+++ b/src/components/app-configure/store/StorageRegion.vue
@@ -15,7 +15,7 @@ const selectedRegion = regions.find((region) => region.value === storageRegion)
 
 <template>
   <section name="storage-region">
-    <SettingCard class="storage-region-card">
+    <SettingCard class="storage-region-card z-20">
       <template #title>Storage Region</template>
       <template #description
         >Arcana Store uses physical storage nodes that are logically grouped by
@@ -32,7 +32,7 @@ const selectedRegion = regions.find((region) => region.value === storageRegion)
         <VDropdown
           :options="regions"
           display-field="name"
-          class="region-dropdown"
+          class="w-rem16"
           :model-value="selectedRegion"
           disabled
         />
@@ -40,15 +40,3 @@ const selectedRegion = regions.find((region) => region.value === storageRegion)
     </SettingCard>
   </section>
 </template>
-
-<style scoped>
-.region-dropdown {
-  width: 16rem;
-}
-</style>
-
-<style>
-.storage-region-card > * {
-  z-index: 2 !important;
-}
-</style>
diff --git a/src/components/app-configure/store/UserLimits.vue b/src/components/app-configure/store/UserLimits.vue
index a5c671c1..0c68d150 100644
--- a/src/components/app-configure/store/UserLimits.vue
+++ b/src/components/app-configure/store/UserLimits.vue
@@ -185,20 +185,25 @@ function isButtonDisabled() {
             gap="2rem"
             wrap
           >
-            <VStack direction="column" gap="0.75rem" align="start">
+            <VStack
+              direction="column"
+              gap="0.75rem"
+              align="start"
+              class="lg:flex-0 lg:flex-none lg:w-calc-half-minus-rem1"
+            >
               <h4>Storage</h4>
               <VStack gap="1.25rem" wrap class="w-full">
                 <VDropdown
                   v-model="storageLimitKind"
                   :options="userLimitOptions"
-                  class="limits-type-dropdown"
+                  class="min-w-rem12"
                   trigger-class="limits-type-dropdown-trigger"
                   @update:model-value="
                     handleIsUnlimitedChange('storage', $event)
                   "
                 />
                 <VStack direction="column" class="flex-1">
-                  <div class="input-group">
+                  <div class="flex flex-nowrap justify-between w-full">
                     <VTextField
                       id="storage-user-limit"
                       v-model="storageLimit.value"
@@ -207,7 +212,7 @@ function isButtonDisabled() {
                       max="1024"
                       :disabled="storageLimitKind === 'Unlimited'"
                       no-message
-                      class="usage-value-textfield"
+                      class="w-rem8 rounded-tr-none rounded-br-none"
                       placeholder="value"
                       @blur="isEdited = true"
                     />
@@ -215,34 +220,39 @@ function isButtonDisabled() {
                       v-model="storageLimit.unit"
                       :options="storageValues"
                       placeholder="unit"
-                      class="usage-unit-dropdown"
-                      trigger-class="usage-unit-dropdown-trigger"
+                      class="min-w-rem10"
+                      trigger-class="rounded-tl-none rounded-bl-none"
                       :disabled="storageLimitKind === 'Unlimited'"
                     />
                   </div>
                   <div
                     v-show="isEdited && !isLimitValid('storage')"
-                    class="message"
+                    class="max-w-rem16 my-1.25 mx-5 text-rem0.9 font-normal leading-6 text-system-creamy_red"
                   >
                     Invalid value - Value must be in between 1 MB and 99 GB
                   </div>
                 </VStack>
               </VStack>
             </VStack>
-            <VStack direction="column" gap="0.75rem" align="start">
+            <VStack
+              direction="column"
+              gap="0.75rem"
+              align="start"
+              class="lg:flex-0 lg:flex-none lg:w-calc-half-minus-rem1"
+            >
               <h4>Bandwidth</h4>
               <VStack gap="1.25rem" wrap class="w-full">
                 <VDropdown
                   v-model="bandwidthLimitKind"
                   :options="userLimitOptions"
-                  class="limits-type-dropdown"
+                  class="min-w-rem12"
                   trigger-class="limits-type-dropdown-trigger"
                   @update:model-value="
                     handleIsUnlimitedChange('bandwidth', $event)
                   "
                 />
                 <VStack direction="column" class="flex-1">
-                  <div class="input-group">
+                  <div class="flex flex-nowrap justify-between w-full">
                     <VTextField
                       id="bandwidth-user-limit"
                       v-model="bandwidthLimit.value"
@@ -251,7 +261,7 @@ function isButtonDisabled() {
                       max="1024"
                       :disabled="bandwidthLimitKind === 'Unlimited'"
                       no-message
-                      class="usage-value-textfield"
+                      class="w-rem8 rounded-tr-none rounded-br-none"
                       placeholder="value"
                       @blur="isEdited = true"
                     />
@@ -260,15 +270,15 @@ function isButtonDisabled() {
                       :options="bandwidthUnits"
                       display-field="label"
                       placeholder="unit"
-                      class="usage-unit-dropdown"
-                      trigger-class="usage-unit-dropdown-trigger"
+                      class="min-w-rem10"
+                      trigger-class="rounded-tl-none rounded-bl-none"
                       :disabled="bandwidthLimitKind === 'Unlimited'"
                       @update:model-value="updateBandwidthUnit($event)"
                     />
                   </div>
                   <div
                     v-show="isEdited && !isLimitValid('bandwidth')"
-                    class="message"
+                    class="max-w-rem16 my-1.25 mx-5 text-rem0.9 font-normal leading-6 text-system-creamy_red"
                   >
                     Invalid value - Value must be in between 1 MB and 99 GB
                   </div>
@@ -286,50 +296,3 @@ function isButtonDisabled() {
     </SettingCard>
   </section>
 </template>
-
-<style scoped>
-.limits-type-dropdown {
-  min-width: 12rem;
-}
-
-.input-group {
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.usage-value-textfield {
-  width: 8rem;
-}
-
-.usage-unit-dropdown {
-  min-width: 10rem;
-}
-
-.message {
-  max-width: 16rem;
-  margin: 5px 20px;
-  font-size: 0.9rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #ee193f;
-}
-
-@media screen and (min-width: 1024px) {
-  .limits-input-container > * {
-    flex: 0 0 calc(50% - 1rem);
-  }
-}
-</style>
-
-<style>
-.usage-unit-dropdown-trigger {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.usage-value-textfield > * {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-</style>
diff --git a/src/components/icons/NotificationIcon.vue b/src/components/icons/NotificationIcon.vue
index 259d7737..a5e48f1f 100644
--- a/src/components/icons/NotificationIcon.vue
+++ b/src/components/icons/NotificationIcon.vue
@@ -19,9 +19,14 @@ const areUnreadNotificationAvaiable = computed(() => {
 
 <template>
   <div class="relative cursor-pointer notification" @click="emits('click')">
-    <div v-if="areUnreadNotificationAvaiable" class="notification-bubble">
-      <span class="notification-bubble__count">1</span>
-      <span class="notification-bubble__ripple"></span>
+    <div
+      v-if="areUnreadNotificationAvaiable"
+      class="absolute top-px-8 right-px-8 flex items-center justify-center min-w-px18 min-h-px18 p-px1 text-px10 rounded-full text-white_solid-default bg-cornflower_blue-default hover:bg-fairy_dust-default"
+    >
+      <span class="z-overlay">1</span>
+      <span
+        class="absolute w-px16 h-px16 bg-white_solid-default rounded-full animate-ripple bg-cornflower_blue-default"
+      ></span>
     </div>
     <svg
       width="24"
@@ -29,7 +34,7 @@ const areUnreadNotificationAvaiable = computed(() => {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      class="cursor-pointer notification-icon"
+      class="cursor-pointer w-px22 hover:text-fairy_dust-default"
       @click.stop="emits('click')"
     >
       <path
@@ -42,59 +47,3 @@ const areUnreadNotificationAvaiable = computed(() => {
     </svg>
   </div>
 </template>
-
-<style scoped>
-.notification-bubble {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  min-height: 18px;
-  padding: 1px;
-  font-size: 10px;
-  color: var(--primary-light);
-  background: var(--primary);
-  border-radius: 50%;
-}
-
-.notification-bubble__count {
-  z-index: 999;
-}
-
-.notification-bubble__ripple {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  background: white;
-  background: var(--primary);
-  border-radius: 50%;
-  animation: ripple 1s cubic-bezier(0.65, 0, 0.34, 1) 0s infinite;
-}
-
-.notification-icon {
-  width: 22px;
-}
-
-.notification:hover svg {
-  color: var(--secondary);
-}
-
-.notification:hover div {
-  background: var(--secondary);
-}
-
-@keyframes ripple {
-  from {
-    opacity: 1;
-    transform: scale3d(0.75, 0.75, 1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale3d(3, 3, 1);
-  }
-}
-</style>
diff --git a/src/components/lib/VCardButton/VCardButton.vue b/src/components/lib/VCardButton/VCardButton.vue
index cacc9946..01a32f49 100644
--- a/src/components/lib/VCardButton/VCardButton.vue
+++ b/src/components/lib/VCardButton/VCardButton.vue
@@ -24,7 +24,7 @@ defineProps({
 
 <style scoped>
 .card-button {
-  padding: 0.8em 1.6em;
+  /* padding: 0.8em 1.6em; */
   font-size: 1em;
   font-weight: 400;
   color: #8d8d8d;
diff --git a/src/components/lib/VFileUpload/VFileUpload.vue b/src/components/lib/VFileUpload/VFileUpload.vue
index 78f9e081..e7c69f22 100644
--- a/src/components/lib/VFileUpload/VFileUpload.vue
+++ b/src/components/lib/VFileUpload/VFileUpload.vue
@@ -74,9 +74,7 @@ onBeforeUnmount(() => {
     class="w-full cursor-pointer p-4 justify-between bg-black"
     @click.stop="handleUploadClick"
   >
-    <span
-      class="text-lg text-overlay-textplaceholder font-normal text-ellipsis h-7"
-    >
+    <span class="text-lg text-whitemist-400 font-normal text-ellipsis h-7">
       {{ props.placeholder }}
     </span>
     <img v-if="!props.isLoading" src="@/assets/iconography/upload.svg" />
diff --git a/src/components/lib/VToast/VToast.vue b/src/components/lib/VToast/VToast.vue
index 8d1c4e1b..c11efdf7 100644
--- a/src/components/lib/VToast/VToast.vue
+++ b/src/components/lib/VToast/VToast.vue
@@ -28,7 +28,9 @@ function handleCloseToast(toastMessage: ToastMessage) {
         :class="toastMessage.type"
       >
         <VStack justify="space-between" align="start" gap="0.5rem">
-          <span class="body-2 font-medium v-toast-message">
+          <span
+            class="body-2 font-medium v-toast-message text-system-deep_black"
+          >
             {{ toastMessage.message }}
           </span>
           <span
@@ -80,10 +82,6 @@ function handleCloseToast(toastMessage: ToastMessage) {
   opacity: 0.5;
 }
 
-.v-toast-message {
-  color: var(--dark-theme-bg);
-}
-
 .v-toast-slide-enter-active,
 .v-toast-slide-leave-active,
 .v-toast-slide-move {
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
new file mode 100644
index 00000000..f3652ef7
--- /dev/null
+++ b/src/hooks/useIsMobile.ts
@@ -0,0 +1,20 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+export function useIsMobile(threshold: number) {
+  const isMobile = ref(false)
+
+  const checkIsMobile = () => {
+    isMobile.value = window.innerWidth <= threshold
+  }
+
+  onMounted(() => {
+    checkIsMobile()
+    window.addEventListener('resize', checkIsMobile)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', checkIsMobile)
+  })
+
+  return { isMobile }
+}
diff --git a/src/pages/AppChainManagement.vue b/src/pages/AppChainManagement.vue
index 18c3d2c4..4e719292 100644
--- a/src/pages/AppChainManagement.vue
+++ b/src/pages/AppChainManagement.vue
@@ -166,7 +166,7 @@ async function setSelectedChainTypeCurve($event: string) {
   <div class="space-y-10 relative">
     <div class="space-y-[15px]">
       <h1>Chain Management</h1>
-      <p class="font-body text-[14px] text-liquiddark leading-[150%]">
+      <p class="font-body text-[14px] text-system-grey leading-[150%]">
         Allow your users to use any of the chains that your application will
         support. Choose from the available chains or add custom chains that will
         be automatically added to your user’s wallets.
@@ -175,15 +175,15 @@ async function setSelectedChainTypeCurve($event: string) {
     <div class="flex flex-col space-y-5">
       <div class="flex w-full justify-between gap-5 items-center">
         <div class="flex gap-2 items-center">
-          <span class="text-liquiddark text-xs">Chain Type</span>
+          <span class="text-system-grey text-xs">Chain Type</span>
           <span
             v-if="
               chainManagementStore.selectedChainType?.toLowerCase() === 'evm'
             "
-            class="text-liquiddark text-md"
+            class="text-system-grey text-md"
             >{{ chainManagementStore.selectedChainType?.toUpperCase() }}</span
           >
-          <span v-else class="text-liquiddark text-md">{{
+          <span v-else class="text-system-grey text-md">{{
             capitalizeFirstLetter(chainManagementStore.selectedChainType)
           }}</span>
         </div>
@@ -192,7 +192,7 @@ async function setSelectedChainTypeCurve($event: string) {
             v-if="
               chainManagementStore.selectedChainType?.toLowerCase() === 'evm'
             "
-            class="text-black flex items-center space-x-1.5 hover:text-pink"
+            class="text-black_solid-default flex items-center space-x-1.5 hover:text-fairy_dust-default"
             @click="openForm('add')"
           >
             <span>Add Chain</span>
diff --git a/src/pages/AppConfigure.vue b/src/pages/AppConfigure.vue
index 42f1b44d..290f5a60 100644
--- a/src/pages/AppConfigure.vue
+++ b/src/pages/AppConfigure.vue
@@ -28,20 +28,10 @@ function switchTab(tab: ConfigureTab) {
 </script>
 
 <template>
-  <VStack direction="column" gap="2rem" class="configure-container">
+  <VStack direction="column" gap="2rem" class="min-h-screen">
     <ConfigureHeader />
-    <VStack gap="2rem" class="container app-settings-container">
+    <VStack gap="2rem" class="container mb-8">
       <RouterView />
     </VStack>
   </VStack>
 </template>
-
-<style scoped>
-.configure-container {
-  min-height: 100vh;
-}
-
-.app-settings-container {
-  margin-bottom: 2rem;
-}
-</style>
diff --git a/src/pages/AppDashboard.vue b/src/pages/AppDashboard.vue
index 5bdc9056..abab7f0a 100644
--- a/src/pages/AppDashboard.vue
+++ b/src/pages/AppDashboard.vue
@@ -257,18 +257,24 @@ async function fetchActiveUsers() {
 <template>
   <div :key="appId">
     <main class="mb-8">
-      <section class="flex dashboard-heading flex-wrap">
+      <section class="flex flex-wrap">
         <VStack
           justify="space-between"
           sm-direction="column"
           class="flex-grow flex-wrap justify-between"
         >
-          <h1>Dashboard</h1>
+          <h1
+            class="max-px1080:w-full max-px1080:mb-4 max-md:w-auto max-md:mb-0"
+          >
+            Dashboard
+          </h1>
           <VStack
             gap="1rem"
             class="flex justify-content-center items-center flex-wrap"
           >
-            <span class="text-lg font-normal text-text_grey"> Client ID: </span>
+            <span class="text-lg font-normal text-system-grey">
+              Client ID:
+            </span>
             <VTextField
               v-model="appAddress"
               class="text-ellipsis"
@@ -282,56 +288,79 @@ async function fetchActiveUsers() {
           </VStack>
         </VStack>
       </section>
-      <v-card class="column usage-container items-stretch" variant="elevated">
+      <v-card
+        class="column p-8 mt-8 max-md:p-4 items-stretch"
+        variant="elevated"
+      >
         <div class="flex justify-between items-center">
           <h2 class="font-normal">Users</h2>
-          <div class="flex flex-wrap duration">
+          <div class="flex flex-wrap justify-end max-md:justify-center">
             <v-card-button
               label="Daily"
               :active="durationSelected === 'day'"
-              :class="{ strong: durationSelected === 'day' }"
+              :class="{
+                strong: durationSelected === 'day',
+                'font-semibold': durationSelected === 'day',
+              }"
               @click.stop="durationSelected = 'day'"
             />
             <v-card-button
               label="Monthly"
               :active="durationSelected === 'month'"
-              :class="{ strong: durationSelected === 'month' }"
+              :class="{
+                strong: durationSelected === 'month',
+                'font-semibold': durationSelected === 'month',
+              }"
               @click.stop="durationSelected = 'month'"
             />
           </div>
         </div>
-        <v-seperator class="full-bleed-separator" />
+        <v-seperator
+          class="w-calc-full-add-rem4 my-8 mx--rem2 max-md:w-calc-full-add-rem2 max-md:my-4 max-md:mx--rem1"
+        />
         <section class="flex column">
-          <div v-show="showNoDataChart" class="users-count-empty-state">
-            <p>No Data</p>
+          <div
+            v-show="showNoDataChart"
+            class="flex items-center justify-center my-4 font-semibold"
+          >
+            <p class="text-system-grey">No Data</p>
           </div>
           <canvas
             v-show="!showNoDataChart"
             id="users-count-chart"
-            class="users-count-chart"
+            class="max-h-px430"
           ></canvas>
         </section>
       </v-card>
-      <v-card class="column usage-container items-stretch" variant="elevated">
+      <v-card
+        class="column p-8 mt-8 max-md:p-4 items-stretch"
+        variant="elevated"
+      >
         <VStack justify="space-between" align="center" class="flex-grow">
           <h2>Tutorials</h2>
         </VStack>
-        <VSeperator class="full-bleed-separator" />
+        <VSeperator
+          class="w-calc-full-add-rem4 my-8 mx--rem2 max-md:w-calc-full-add-rem2 max-md:my-4 max-md:mx--rem1"
+        />
         <Carousel
-          class="tutorials__container"
+          class="max-lg:grid max-lg:grid-cols-2 max-md:grid-cols-1 mt-2.5"
           :breakpoints="carouselBreakpointSettings"
           :wrap-around="true"
         >
           <Slide v-for="tutorial in tutorials" :key="tutorial.id">
-            <div class="tutorial__card carousel__item">
+            <div
+              class="flex flex-col items-center justify-between w-full h-px350 p-5 mx-2.5 rounded-lg carousel__item bg-white_solid-default"
+            >
               <img
                 :src="tutorial.thumbnail_url"
                 alt="thumbnail image"
-                class="tutorial__thumbnail"
+                class="w-full h-px175 mb-2.5 rounded-lg object-contain mt-px7"
               />
-              <h3 class="tutorial__title">{{ tutorial.title }}</h3>
-              <p class="tutorial__description">{{ tutorial.description }}</p>
-              <a :href="tutorial.link" target="_blank" class="tutorial__link"
+              <h3 class="text-sm mt-px7">{{ tutorial.title }}</h3>
+              <p class="mb-2 text-xs text-system-grey mt-px7">
+                {{ tutorial.description }}
+              </p>
+              <a :href="tutorial.link" target="_blank" class="text-sm mt-px7"
                 >Read More</a
               >
             </div>
@@ -344,156 +373,3 @@ async function fetchActiveUsers() {
     </main>
   </div>
 </template>
-
-<style>
-.carousel__prev,
-.carousel__next {
-  background-color: var(--primary-liquid);
-  border-radius: 10px;
-}
-
-.carousel__prev {
-  left: 10px;
-}
-
-.carousel__next {
-  right: 10px;
-}
-</style>
-
-<style scoped>
-.users-count-chart {
-  max-height: 430px;
-}
-
-.users-count-empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-block: 1rem;
-  font-weight: 600;
-}
-
-.users-count-empty-state p {
-  color: var(--text-grey);
-}
-
-.tutorials__container {
-  margin-top: 10px;
-}
-
-.tutorial__card {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 350px;
-  padding: 20px;
-  margin: 0 10px;
-  background-color: var(--primary-white);
-  border-radius: 10px;
-  border-radius: 8px;
-}
-
-.tutorial__card * + * {
-  margin-top: 7px;
-}
-
-.tutorial__thumbnail {
-  width: 100%;
-  height: 175px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  object-fit: contain;
-}
-
-.tutorial__link {
-  font-size: 14px;
-}
-
-.tutorial__title {
-  font-size: 14px;
-}
-
-.tutorial__description {
-  margin-bottom: 10px;
-  font-size: 10px;
-  color: #8d8d8d;
-}
-
-.usage-container {
-  padding: 2rem;
-  margin-top: 2rem;
-}
-
-.full-bleed-separator {
-  width: calc(100% + 4rem);
-  margin-block: 2rem;
-  margin-inline: -2rem;
-}
-
-.duration {
-  justify-content: flex-end;
-}
-
-.strong {
-  font-weight: 600;
-}
-
-ol {
-  padding: 0;
-}
-
-@media only screen and (max-width: 1080px) {
-  .dashboard-heading h1 {
-    width: 100%;
-    margin-bottom: 1em;
-  }
-}
-
-@media only screen and (max-width: 1023px) {
-  .smart-contract-copy {
-    visibility: hidden;
-  }
-
-  .tutorials__container {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  .dashboard-heading h1 {
-    width: auto;
-    margin-bottom: 0;
-  }
-
-  .tutorials__container {
-    grid-template-columns: 1fr;
-  }
-
-  .smart-contract-copy {
-    margin-top: 1em;
-    visibility: visible;
-  }
-
-  .usage-container {
-    padding: 1em;
-  }
-
-  .full-bleed-separator {
-    width: calc(100% + 2rem);
-    margin-block: 1rem;
-    margin-inline: -1rem;
-  }
-
-  .duration {
-    justify-content: center;
-  }
-
-  h4 {
-    font-size: 0.85em;
-  }
-}
-</style>
diff --git a/src/pages/AppDetails.vue b/src/pages/AppDetails.vue
index 15076382..a5cebbb0 100644
--- a/src/pages/AppDetails.vue
+++ b/src/pages/AppDetails.vue
@@ -289,7 +289,7 @@ watch(
 <template>
   <div class="flex flex-col">
     <AppHeader />
-    <VStack direction="row" class="app-details__container">
+    <VStack direction="row" class="flex w-full h-screen m-0 overflow-hidden">
       <div class="app-details__sidebar mobile-remove">
         <ConfigureSidebar
           :current-tab="currentTab"
@@ -298,7 +298,11 @@ watch(
           @switch-app="switchApp"
         />
       </div>
-      <VStack direction="column" class="app-details__content" gap="2rem">
+      <VStack
+        direction="column"
+        class="box-border flex-1 h-full p-8 pb-0 overflow-x-hidden overflow-y-auto"
+        gap="2rem"
+      >
         <VDropdownSecondary
           v-model="currentNetwork"
           :options="NetworkOptions"
@@ -306,11 +310,11 @@ watch(
           :disabled="
             selectedApp.chain_type === 'random' && isProductionDashboard
           "
-          class="app-details__network-dropdown"
+          class="self-end w-rem16"
           @change="(_, option) => onNetworkSwitch(option)"
         />
         <RouterView />
-        <AppFooter class="footer-bleed" />
+        <AppFooter class="-mx-8" />
       </VStack>
       <SwitchToMainnetConfirmation
         v-if="showMainnetConfirmation"
@@ -337,98 +341,3 @@ watch(
     </VStack>
   </div>
 </template>
-
-<style scoped>
-.app-details__container {
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  overflow: hidden;
-}
-
-.app-details__content {
-  box-sizing: border-box;
-  flex: 1;
-  height: 100%;
-  padding: 2rem;
-  padding-bottom: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.footer-bleed {
-  margin-inline: -2rem;
-}
-
-.help-button__container {
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-@media only screen and (max-width: 1023px) {
-  .help-button__container {
-    gap: 0.3rem;
-  }
-}
-
-.help-button {
-  padding: 0;
-  color: var(--primary);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
-.notification-container {
-  position: relative;
-}
-
-.help-menu-items {
-  top: calc(100% + 0.75rem);
-  right: 0;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 200px;
-  padding: 0;
-  padding-top: 1.25rem;
-  box-shadow: -4px -5px 4px rgb(0 0 0 / 20%), 4px 5px 4px rgb(0 0 0 / 20%) !important;
-}
-
-.help-menu-items ul {
-  padding: 0;
-}
-
-.help-menu-item {
-  width: 100%;
-  padding-inline: 1.25rem;
-  padding-bottom: 1.25rem;
-  color: var(--text-white);
-  white-space: nowrap;
-  list-style: none;
-}
-
-.help-menu-items a {
-  color: white;
-  text-decoration: none;
-}
-
-.logo {
-  cursor: pointer;
-  transition: opacity 0.3s;
-}
-
-.app-details__network-dropdown {
-  align-self: flex-end;
-  width: 16rem;
-}
-
-@media only screen and (max-width: 767px) {
-  .notification-container {
-    position: inherit;
-  }
-}
-</style>
diff --git a/src/pages/AppDownNotification.vue b/src/pages/AppDownNotification.vue
index ddc1b232..d8d3ab2a 100644
--- a/src/pages/AppDownNotification.vue
+++ b/src/pages/AppDownNotification.vue
@@ -1,13 +1,15 @@
 <template>
-  <main class="h-[calc(100%-80px)]">
+  <main class="h-calc-full-minus-px80">
     <div
-      class="flex column items-center justify-center w-full h-full text-[var(--text-black)]"
+      class="flex column items-center justify-center w-full h-full text-black_solid-default"
     >
-      <h1 class="px-4 font-bold text-text_black text-center tracking-normal">
+      <h1
+        class="px-4 font-bold text-black_solid-default text-center tracking-normal"
+      >
         Under Maintenance
       </h1>
       <h2
-        class="max-w-[720px] px-4 mt-5 mx-auto mb-0 font-medium leading-6 text-center"
+        class="max-w-px720 px-4 mt-5 mx-auto mb-0 font-medium leading-6 text-center"
       >
         The dashboard is currently undergoing maintenance and will be back
         online soon. Please check back in a little while.
@@ -15,25 +17,3 @@
     </div>
   </main>
 </template>
-
-<style scoped>
-.down-description {
-  width: 90%;
-  min-width: 320px;
-  max-width: 720px;
-  margin-top: 1.1em;
-  font-weight: 400;
-  line-height: 1.5em;
-  text-align: center;
-}
-
-h4.down-description {
-  font-size: 1.125em;
-  font-weight: 600;
-}
-
-h5.down-description {
-  font-size: 0.85em;
-  font-weight: 400;
-}
-</style>
diff --git a/src/pages/AppGasTanks.vue b/src/pages/AppGasTanks.vue
index e9f88240..542ae9fe 100644
--- a/src/pages/AppGasTanks.vue
+++ b/src/pages/AppGasTanks.vue
@@ -177,7 +177,7 @@ async function toggleChainStatus(info: object) {
   <div class="space-y-10 relative">
     <div class="space-y-[15px]">
       <h1>Gas Tanks</h1>
-      <p class="font-body text-[14px] text-liquiddark leading-[150%]">
+      <p class="font-body text-[14px] text-system-grey leading-[150%]">
         Gas tanks can be set up for every network chain that your app supports.
         Deposit crypto into these tanks to enable gasless transactions for users
         of your dApp. Withdraw crypto if you ever need to.
@@ -185,7 +185,10 @@ async function toggleChainStatus(info: object) {
     </div>
     <div class="flex flex-col space-y-5">
       <div class="flex items-baseline w-full justify-end space-x-5">
-        <button class="text-black space-x-1.5" @click="showForm = true">
+        <button
+          class="text-black_solid-default space-x-1.5"
+          @click="showForm = true"
+        >
           <span>Add Gas Tank</span>
         </button>
         <SearchBar
diff --git a/src/pages/AppGasless.vue b/src/pages/AppGasless.vue
index 188718e6..213a9d18 100644
--- a/src/pages/AppGasless.vue
+++ b/src/pages/AppGasless.vue
@@ -32,7 +32,7 @@ const steps = [
   <div class="space-y-10">
     <div class="space-y-3.5">
       <h1>Gasless Transactions</h1>
-      <p class="text-liquiddark">
+      <p class="text-system-grey">
         Use this interface to setup gas tanks that will sponsor the gas fees for
         transactions performed by users of your dApp. You may also sponsor all
         transactions or only specific functions within your app's contracts by
@@ -57,7 +57,7 @@ const steps = [
               : '',
           ]"
         >
-          <span class="text-liquiddark text-sm ml-[10px]">
+          <span class="text-system-grey text-sm ml-[10px]">
             {{ step.indexLabel }}
           </span>
         </div>
diff --git a/src/pages/AppGaslessAddress.vue b/src/pages/AppGaslessAddress.vue
index d229e60c..8cf77079 100644
--- a/src/pages/AppGaslessAddress.vue
+++ b/src/pages/AppGaslessAddress.vue
@@ -6,7 +6,7 @@ import VSwitch from '@/components/lib/VSwitch/VSwitch.vue'
   <div class="space-y-10">
     <div class="space-y-3.5">
       <h1>Address</h1>
-      <p class="text-liquiddark text-sm">
+      <p class="text-system-grey text-sm">
         Lorem ipsum dolor sit amet consectetur. Donec quis tellus amet sit
         lacus. Congue egestas blandit massa arcu amet. Erat sit faucibus
         lobortis porttitor nec sed consectetur. A suspendisse donec faucibus
@@ -19,7 +19,7 @@ import VSwitch from '@/components/lib/VSwitch/VSwitch.vue'
     >
       <h2 class="text-sm p-3.5">Accounts Management</h2>
       <div class="p-3.5 space-y-7">
-        <p class="text-liquiddark text-sm">
+        <p class="text-system-grey text-sm">
           Arcana Wallets provide your users two kinds of addresses -- the
           regularly available Externally Owned Addresses addresses and the Smart
           Contract Wallet. If you choose to provide Gasless transaction features
@@ -28,7 +28,7 @@ import VSwitch from '@/components/lib/VSwitch/VSwitch.vue'
         </p>
         <div class="flex items-baseline space-x-5">
           <span>Address Type</span>
-          <div class="flex justify-center space-x-3 text-liquiddark">
+          <div class="flex justify-center space-x-3 text-system-grey">
             <span>EOA</span>
             <VSwitch :model-value="true" />
             <span>SCW</span>
@@ -38,12 +38,14 @@ import VSwitch from '@/components/lib/VSwitch/VSwitch.vue'
           class="p-2 inline-flex items-center space-x-1 bg-[#313131] rounded-md"
         >
           <img src="@/assets/iconography/info-circle-outline.svg" />
-          <span class="text-xs text-liquiddark"
+          <span class="text-xs text-system-grey"
             >Switching from SCWs to EOAs not possible on certain chains.</span
           >
         </div>
         <div class="flex justify-end">
-          <button class="bg-white text-black text-sm rounded-md w-28 h-9">
+          <button
+            class="bg-white text-black_solid-default text-sm rounded-md w-28 h-9"
+          >
             Save
           </button>
         </div>
diff --git a/src/pages/AppInvoices.vue b/src/pages/AppInvoices.vue
index 29e5106b..fe28549c 100644
--- a/src/pages/AppInvoices.vue
+++ b/src/pages/AppInvoices.vue
@@ -97,30 +97,37 @@ onBeforeMount(async () => {
   <div>
     <app-header />
     <main class="pb-10 container">
-      <VStack class="heading" gap="1rem">
+      <VStack class="mt-8 max-lg:mt-em0.9 max-lg:text-em1.8" gap="1rem">
         <img
           src="@/assets/iconography/back.svg"
-          class="cursor-pointer"
+          class="cursor-pointer w-8"
           @click.stop="router.back()"
         />
         <h1>Invoices</h1>
       </VStack>
-      <section class="personal-details">
+      <section class="mt-12">
         <SettingCard>
           <template #title>Estimated Charges</template>
           <VStack direction="column" gap="1.5rem">
             <VStack wrap justify="space-between" gap="1rem">
-              <span class="charge-details">Amount Due:</span>
-              <span class="charge-details amount">${{ totalBill }}</span>
+              <span class="text-lg font-bold leading-6">Amount Due:</span>
+              <span
+                class="text-lg font-bold leading-6 amount text-system-orange"
+                >${{ totalBill }}</span
+              >
             </VStack>
             <VStack wrap justify="space-between" gap="1rem">
-              <span class="charge-details">Due Date:</span>
-              <span class="charge-details">{{ getDueDate() }}</span>
+              <span class="text-lg font-bold leading-6">Due Date:</span>
+              <span class="text-lg font-bold leading-6">{{
+                getDueDate()
+              }}</span>
             </VStack>
             <VStack wrap justify="space-between" gap="1rem">
-              <span class="charge-details">Payment Method:</span>
+              <span class="text-lg font-bold leading-6">Payment Method:</span>
               <VStack gap="0.625rem" class="relative">
-                <span class="charge-details">{{ selectedCard }}</span>
+                <span class="text-lg font-bold leading-6">{{
+                  selectedCard
+                }}</span>
               </VStack>
             </VStack>
           </VStack>
@@ -131,9 +138,10 @@ onBeforeMount(async () => {
           <VCard
             v-for="invoice in invoices"
             :key="invoice.period"
-            class="invoice-card"
+            class="h-16 pb-8 overflow-hidden"
             :class="{
               expanded: expandInvoice === invoice.period,
+              'h-full': expandInvoice === invoice.period,
             }"
           >
             <VStack direction="column" class="flex-grow">
@@ -143,10 +151,12 @@ onBeforeMount(async () => {
                 :class="[expandInvoice ? 'py-8' : 'py-4']"
                 @click.stop="handleExpand(invoice)"
               >
-                <span class="invoice-title">{{ invoice.period }}</span>
+                <span class="text-xl font-bold leading-6">{{
+                  invoice.period
+                }}</span>
                 <VStack gap="1.5rem" align="center">
                   <span
-                    class="invoice-title"
+                    class="text-xl font-bold leading-6"
                     :class="{
                       amount: expandInvoice === invoice.period,
                     }"
@@ -163,26 +173,33 @@ onBeforeMount(async () => {
                   </a>
                 </VStack>
               </VStack>
-              <VSeperator v-if="expandInvoice" class="separator-bleed" />
-              <VCard variant="depressed" class="invoice-statement-card">
+              <VSeperator
+                v-if="expandInvoice"
+                class="w-calc-full-add-rem4 mx--rem2"
+              />
+              <VCard variant="depressed" class="p-8 m-8 mt-0">
                 <VStack direction="column" gap="1.5rem" class="flex-grow">
                   <VStack gap="2rem">
-                    <span class="invoice-statement charge-details"
+                    <span class="w-1/2 text-lg font-bold leading-6"
                       >App Name</span
                     >
-                    <span class="invoice-statement charge-details"
+                    <span class="w-1/2 text-lg font-bold leading-6"
                       >Billable MAU</span
                     >
                   </VStack>
-                  <VSeperator class="separator-bleed" />
+                  <VSeperator class="w-calc-full-add-rem4 mx--rem2" />
                   <VStack direction="column" gap="2rem" class="flex-grow">
                     <VStack
                       v-for="app in invoice.apps"
                       :key="app.appName + app.usage"
                       gap="2rem"
                     >
-                      <span class="invoice-value">{{ app.appName }}</span>
-                      <span class="invoice-value">{{ app.usage }}</span>
+                      <span class="w-1/2 text-base leading-6">{{
+                        app.appName
+                      }}</span>
+                      <span class="w-1/2 text-base leading-6">{{
+                        app.usage
+                      }}</span>
                     </VStack>
                   </VStack>
                 </VStack>
@@ -194,74 +211,3 @@ onBeforeMount(async () => {
     </main>
   </div>
 </template>
-
-<style scoped>
-.heading {
-  margin-top: 2rem;
-}
-
-.heading img {
-  width: 2rem;
-}
-
-.personal-details {
-  margin-top: 3rem;
-}
-
-.invoice-card {
-  height: 4rem;
-  padding-bottom: 2rem;
-  overflow: hidden;
-}
-
-.invoice-statement-card {
-  padding: 2rem;
-  margin: 2rem 2rem 0;
-}
-
-.invoice-card.expanded {
-  height: 100%;
-}
-
-.separator-bleed {
-  width: calc(100% + 4rem);
-  margin-inline: -2rem;
-}
-
-label {
-  color: var(--text-grey);
-}
-
-.invoice-statement,
-.invoice-value {
-  width: 50%;
-}
-
-.invoice-value {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.charge-details {
-  font-size: 1.125rem;
-  font-weight: 700;
-  line-height: 1.5;
-}
-
-.invoice-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.5;
-}
-
-.amount {
-  color: var(--color-orange);
-}
-
-@media only screen and (max-width: 1023px) {
-  .heading {
-    margin-top: 0.9em;
-    font-size: 1.8em;
-  }
-}
-</style>
diff --git a/src/pages/AppLogin.vue b/src/pages/AppLogin.vue
index 9842697f..7b49195e 100644
--- a/src/pages/AppLogin.vue
+++ b/src/pages/AppLogin.vue
@@ -157,7 +157,7 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <div class="flex flex-col bg-liquidlight">
+  <div class="flex flex-col bg-whitemist-default">
     <AppBanner />
     <LoginHeader />
     <main
@@ -167,63 +167,73 @@ onMounted(async () => {
         <div
           class="w-full md:w-3/5 gap-4 py-10 flex flex-col justify-center items-center rounded-xl bg-white"
         >
-          <h1 class="text-rem2 max-w-xs text-black tracking-tight text-center">
+          <h1
+            class="text-rem2 max-w-xs text-black_solid-default tracking-tight text-center"
+          >
             Welcome to the Developer Dashboard
           </h1>
-          <p class="text-[0.85rem] text-liquiddark font-light text-center">
+          <p class="text-[0.85rem] text-system-grey font-light text-center">
             Sign-in using any of these methods to get started
           </p>
           <div class="flex flex-col gap-3 flex-grow-0">
-            <p class="text-[0.75rem] text-liquiddark ml-3">Social Login</p>
+            <p class="text-[0.75rem] text-system-grey ml-3">Social Login</p>
             <div class="flex flex-col items-center gap-3">
               <button
-                class="bg-liquiddark-100 hover:bg-pink flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
+                class="bg-firefly-950 hover:bg-fairy_dust-default flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
                 @click.stop="launchLogin('google')"
               >
                 <img src="@/assets/google-sso.svg" class="w-5" />
-                <span class="text-sm font-normal text-white"> Google </span>
+                <span class="text-sm font-normal text-white_solid-default">
+                  Google
+                </span>
               </button>
               <button
-                class="bg-liquiddark-100 hover:bg-pink flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
+                class="bg-firefly-950 hover:bg-fairy_dust-default flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
                 @click.stop="launchLogin('github')"
               >
                 <img src="@/assets/github-sso.svg" class="w-5" />
-                <span class="text-sm font-normal text-white"> Github </span>
+                <span class="text-sm font-normal text-white_solid-default">
+                  Github
+                </span>
               </button>
               <button
-                class="bg-liquiddark-100 hover:bg-pink flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
+                class="bg-firefly-950 hover:bg-fairy_dust-default flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
                 @click.stop="launchLogin('twitch')"
               >
                 <img src="@/assets/twitch-sso.svg" class="w-5" />
-                <span class="text-sm font-normal text-white"> Twitch </span>
+                <span class="text-sm font-normal text-white_solid-default">
+                  Twitch
+                </span>
               </button>
               <button
-                class="bg-liquiddark-100 hover:bg-pink flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
+                class="bg-firefly-950 hover:bg-fairy_dust-default flex w-80 rounded-3xl h-10 justify-center items-center gap-2"
                 @click.stop="launchLogin('discord')"
               >
                 <img src="@/assets/discord-sso.svg" class="w-5" />
-                <span class="text-sm font-normal text-white"> Discord </span>
+                <span class="text-sm font-normal text-white_solid-default">
+                  Discord
+                </span>
               </button>
             </div>
           </div>
-          <p class="text-[0.9rem] text-liquiddark text-center">Or</p>
+          <p class="text-[0.9rem] text-system-grey text-center">Or</p>
           <form
             class="flex flex-col gap-2"
             @submit.prevent="launchLogin('passwordless')"
           >
             <label
               for="login-email"
-              class="text-[0.75rem] font-normal text-liquiddark ml-3"
+              class="text-[0.75rem] font-normal text-system-grey ml-3"
               >Email ID</label
             >
             <div
-              class="flex justify-center items-center w-80 h-10 bg-liquiddark-100 px-2.5 rounded-xl focus:border-0"
+              class="flex justify-center items-center w-80 h-10 bg-firefly-950 px-2.5 rounded-xl focus:border-0"
             >
               <input
                 id="login-email"
                 v-model.trim="email"
                 type="email"
-                class="flex-1 bg-transparent input text-white border-0 focus:outline-none focus:border-transparent"
+                class="flex-1 bg-transparent input text-white_solid-default border-0 focus:outline-none focus:border-transparent"
               />
               <button
                 class="flex items-center justify-center"
diff --git a/src/pages/AppProfile.vue b/src/pages/AppProfile.vue
index 175a9119..86d68d76 100644
--- a/src/pages/AppProfile.vue
+++ b/src/pages/AppProfile.vue
@@ -232,23 +232,25 @@ function handleCancel() {
 <template>
   <div>
     <AppHeader />
-    <main :class="{ container: route.name === 'AppProfile' }">
-      <VStack class="heading" gap="1rem">
+    <main class="pb-16" :class="{ container: route.name === 'AppProfile' }">
+      <VStack class="mt-8 max-lg:mt-em0.9 max-lg:text-em1.8" gap="1rem">
         <img
           src="@/assets/iconography/back.svg"
-          class="cursor-pointer"
+          class="cursor-pointer w-rem2"
           @click.stop="router.back()"
         />
         <h1>Profile</h1>
       </VStack>
-      <section class="personal-details">
+      <section class="mt-12 max-lg:mt-8">
         <SettingCard>
           <template #title>User Account</template>
           <div
-            class="flex flex-wrap justify-between space-x-5 max-[768px]:flex-col max-[768px]:space-x-0 max-[768px]:space-y-5"
+            class="flex flex-wrap justify-between space-x-5 max-md:flex-col max-md:space-x-0 max-md:space-y-5"
           >
             <div class="flex flex-col flex-1 space-y-2">
-              <label for="light-horizontal-logo">Name</label>
+              <label for="light-horizontal-logo" class="text-system-grey"
+                >Name</label
+              >
               <VTextFieldSecondary
                 v-model.trim="name"
                 class="app-name-input"
@@ -257,7 +259,9 @@ function handleCancel() {
               />
             </div>
             <div class="flex flex-col flex-1 space-y-2">
-              <label for="light-horizontal-logo">Account Identifier</label>
+              <label for="light-horizontal-logo" class="text-system-grey"
+                >Account Identifier</label
+              >
               <VTextFieldSecondary
                 v-model.trim="email"
                 class="app-name-input"
@@ -273,10 +277,12 @@ function handleCancel() {
           <template #title>Organisation</template>
           <form @submit.prevent="onUpdateOrganization">
             <div
-              class="flex flex-wrap justify-between space-x-5 max-[768px]:flex-col max-[768px]:space-x-0 max-[768px]:space-y-5"
+              class="flex flex-wrap justify-between space-x-5 max-md:flex-col max-md:space-x-0 max-md:space-y-5"
             >
               <div class="flex column flex-1 space-y-2">
-                <label for="light-horizontal-logo">Name</label>
+                <label for="light-horizontal-logo" class="text-system-grey"
+                  >Name</label
+                >
                 <VTextFieldSecondary
                   v-model.trim="organisationDetails.name"
                   class="app-name-input"
@@ -284,7 +290,9 @@ function handleCancel() {
                 />
               </div>
               <div class="flex column flex-1 space-y-2">
-                <label for="light-horizontal-logo">Country</label>
+                <label for="light-horizontal-logo" class="text-system-grey"
+                  >Country</label
+                >
                 <VTextFieldSecondary
                   v-model.trim="organisationDetails.country"
                   class="app-name-input"
@@ -292,7 +300,9 @@ function handleCancel() {
                 />
               </div>
               <div class="flex column flex-1 space-y-2">
-                <label for="light-horizontal-logo">Organization Size</label>
+                <label for="light-horizontal-logo" class="text-system-grey"
+                  >Organization Size</label
+                >
                 <VTextFieldSecondary
                   v-model.trim="organisationDetails.size"
                   class="app-name-input"
@@ -314,248 +324,6 @@ function handleCancel() {
           </form>
         </SettingCard>
       </section>
-      <!-- <section id="billing-details" class="mt-12">
-        <SettingCard>
-          <template #title>Billing Address Details</template>
-          <form @submit.prevent="updateBillingDetails">
-            <VStack
-              v-if="false"
-              class="flex flex-col flex-wrap justify-between"
-              gap="1.25rem"
-            >
-              <div class="flex column flex-1 space-y-2">
-                <label for="light-horizontal-logo">Billing Name</label>
-                <VTextFieldSecondary
-                  v-model.trim="invoiceDetails.name"
-                  class="app-name-input"
-                  :icon="CloseIcon"
-                  clickable-icon
-                  @icon-clicked="invoiceDetails.name = ''"
-                />
-              </div>
-              <div class="flex column flex-1 space-y-2">
-                <label for="light-horizontal-logo">Billing Address</label>
-                <VTextFieldSecondary
-                  v-model.trim="invoiceDetails.address"
-                  class="app-name-input"
-                  :icon="CloseIcon"
-                  clickable-icon
-                  @icon-clicked="invoiceDetails.address = ''"
-                />
-              </div>
-              <div class="flex column flex-1 invisible"></div>
-            </VStack>
-            <div class="flex column flex-1 space-y-4">
-              <div
-                class="flex flex-wrap justify-between space-x-5 max-[768px]:flex-col max-[768px]:space-x-0 max-[768px]:space-y-5"
-              >
-                <div class="flex flex-col flex-1 space-y-2">
-                  <label for="billing-address-line-1">Address Line 1</label>
-                  <VTextFieldSecondary
-                    id="billing-address-line-1"
-                    v-model.trim="billingDetails.addressLine1"
-                    class="app-name-input"
-                    no-message
-                  />
-                </div>
-                <div class="flex flex-col flex-1 space-y-2">
-                  <label for="billing-address-line-2"
-                    >Address Line 2 (Optional)</label
-                  >
-                  <VTextFieldSecondary
-                    id="billing-address-line-2"
-                    v-model.trim="billingDetails.addressLine2"
-                    class="app-name-input"
-                    no-message
-                  />
-                </div>
-              </div>
-              <div
-                class="flex flex-wrap justify-between space-x-5 max-[768px]:flex-col max-[768px]:space-x-0 max-[768px]:space-y-5"
-              >
-                <div class="flex column flex-1 space-y-2">
-                  <label for="billing-city">City</label>
-                  <VTextFieldSecondary
-                    id="billing-city"
-                    v-model.trim="billingDetails.city"
-                    no-message
-                  />
-                </div>
-                <div class="flex column flex-1 space-y-2">
-                  <label for="billing-state">State</label>
-                  <VTextFieldSecondary
-                    id="billing-state"
-                    v-model.trim="billingDetails.state"
-                    no-message
-                  />
-                </div>
-                <div class="flex column flex-1 space-y-2">
-                  <label for="billing-zipcode">Zip Code</label>
-                  <VTextFieldSecondary
-                    id="billing-zipcode"
-                    v-model.trim="billingDetails.zipCode"
-                    type="number"
-                    no-message
-                  />
-                </div>
-                <div class="flex column flex-1 space-y-2">
-                  <label for="billing-country">Country</label>
-                  <VTextFieldSecondary
-                    id="billing-country"
-                    v-model.trim="billingDetails.country"
-                  />
-                </div>
-              </div>
-            </div>
-            <ConfigureActionButtons
-              :save-disabled="isBillingCopySame() || !hasBillingAddress()"
-              :cancel-disabled="isBillingCopySame()"
-              @cancel="handleCancel"
-            />
-          </form>
-        </SettingCard>
-      </section> -->
     </main>
   </div>
 </template>
-
-<style scoped>
-main {
-  padding-bottom: 4rem;
-}
-
-.card-element {
-  padding: 1rem;
-  background: linear-gradient(141.48deg, #161616 -4.56%, #151515 135.63%);
-  border-radius: 10px;
-  box-shadow: inset 5px 5px 10px rgb(11 11 11 / 50%),
-    inset -50px 49px 29px 22px rgb(28 28 28 / 84%);
-}
-
-.card-name {
-  width: 30%;
-  font-family: Sora, sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: #f7f7f7;
-  background: transparent;
-  border: none;
-  outline: none;
-  box-shadow: none;
-  -webkit-font-smoothing: antialiased;
-}
-
-.card-name::placeholder {
-  color: #8d8d8d;
-}
-
-.payment-details-input {
-  gap: 0.5rem;
-  width: 100%;
-  margin-top: 1em;
-}
-
-.heading {
-  margin-top: 2rem;
-}
-
-.heading img {
-  width: 2rem;
-}
-
-.personal-details {
-  margin-top: 3rem;
-}
-
-label {
-  color: var(--text-grey);
-}
-
-.payment-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  line-height: 1.5;
-}
-
-.switch-icon {
-  transition: transform 0.3s;
-}
-
-.payment-input {
-  display: grid;
-  grid-template-columns: 24vw 20vw 10rem 10rem;
-  gap: 1.5rem;
-}
-
-.cvv {
-  -webkit-text-security: disc;
-}
-
-.swapped {
-  transform: rotate(-180deg);
-}
-
-.stripe-focused {
-  outline: 1px solid var(--primary);
-}
-
-.billing-details {
-  display: flex;
-}
-
-.payment-form {
-  position: relative;
-}
-
-.hide-payment-form::before {
-  position: absolute;
-  inset: -2rem -1.5rem;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
-  content: 'Enter the billing address details to access payment methods.';
-  background: rgb(10 10 10 / 70%);
-  backdrop-filter: blur(16px);
-}
-
-@media only screen and (max-width: 1023px) {
-  .heading {
-    margin-top: 0.9em;
-    font-size: 1.8em;
-  }
-
-  .personal-details {
-    margin-top: 2em;
-  }
-
-  .switch-icon-container {
-    text-align: center;
-  }
-
-  .payment-container {
-    gap: 2rem;
-    align-items: stretch;
-  }
-
-  .switch-icon {
-    transform: rotate(-90deg);
-  }
-
-  .swapped {
-    transform: rotate(-270deg);
-  }
-
-  .payment-input {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 0.5rem;
-  }
-
-  .details {
-    width: unset;
-  }
-}
-</style>
diff --git a/src/pages/AppSessionManagement.vue b/src/pages/AppSessionManagement.vue
index 93de7658..ef48719d 100644
--- a/src/pages/AppSessionManagement.vue
+++ b/src/pages/AppSessionManagement.vue
@@ -78,9 +78,9 @@ function clearSessionAge() {
 
 <template>
   <div class="space-y-10 relative">
-    <div class="space-y-[15px]">
+    <div class="space-y-px15">
       <h1>Login Session Management</h1>
-      <p class="font-body text-[16px] text-liquiddark leading-[150%]">
+      <p class="font-body text-px16 text-system-grey leading-150%">
         Manage user authentication and session security.
         <a
           href="https://docs.arcana.network/concepts/session_type/"
@@ -94,18 +94,19 @@ function clearSessionAge() {
   <SettingCard>
     <template #title
       ><h2>
-        Session Cookie Mode <span class="text-liquidred">*</span>
+        Session Cookie Mode <span class="text-system-deep_red">*</span>
       </h2></template
     >
     <div class="flex flex-row gap-10">
       <div
         :class="{
-          'disabled-card gradient-border-card': app.keyspace === 'global',
+          'cursor-not-allowed opacity-40 p-0.5 rounded-lg opacity-100 bg-black_solid-950':
+            app.keyspace === 'global',
         }"
       >
         <VCard
           variant="depressed"
-          class="rounded-md p-8 h-[30vh] max-w-sd bg-liquidlight cursor-pointer"
+          class="rounded-md p-8 h-vh30 max-w-sd bg-whitemist-default cursor-pointer"
           @click.stop="selectedSession = true"
         >
           <VStack direction="row" gap="1.25rem" align="start">
@@ -115,11 +116,12 @@ function clearSessionAge() {
               value="true"
               :checked="selectedSession === true"
               :disabled="app.keyspace === 'global'"
+              class="grid place-content-center w-px20 bg-white_solid-default border-2 border-black_solid-default rounded-full appearance-none shadow-none before:content-[''] before:w-4 before:h-4 before:bg-black_solid-default before:border-2 before:border-white_solid-default before:rounded-full before:appearance-none before:transition-transform before:duration-120 before:transform before:scale-0 before:ease-in-out checked:before:scale-100"
               @change="selectedSession = true"
             />
             <VStack direction="column" gap="10px">
               <span class="text-base font-medium">Persistent Session</span>
-              <span class="w-full text-sm text-liquiddark"
+              <span class="w-full text-sm text-system-grey"
                 >The authenticated session remains valid within a specified time
                 period, so users don't need to log in again after closing and
                 reopening the browser.</span
@@ -131,7 +133,7 @@ function clearSessionAge() {
 
       <VCard
         variant="depressed"
-        class="rounded-md p-8 h-[30vh] max-w-sd bg-liquidlight cursor-pointer"
+        class="rounded-md p-8 h-vh30 max-w-sd bg-whitemist-default cursor-pointer"
         @click.stop="selectedSession = false"
       >
         <VStack direction="row" gap="1.25rem" align="start">
@@ -140,11 +142,12 @@ function clearSessionAge() {
             type="radio"
             value="false"
             :checked="selectedSession == false"
+            class="grid place-content-center w-px20 bg-white_solid-default border-2 border-black_solid-default rounded-full appearance-none shadow-none before:content-[''] before:w-4 before:h-4 before:bg-black_solid-default before:border-2 before:border-white_solid-default before:rounded-full before:appearance-none before:transition-transform before:duration-120 before:transform before:scale-0 before:ease-in-out checked:before:scale-100"
             @change="selectedSession = false"
           />
           <VStack direction="column" gap="10px">
             <span class="text-base font-medium">Non-Persistent Session</span>
-            <span class="w-full text-sm text-liquiddark">
+            <span class="w-full text-sm text-system-grey">
               If the browser is closed, the authenticated session is
               invalidated. Users must log in again to continue using the
               app.</span
@@ -192,44 +195,3 @@ function clearSessionAge() {
     />
   </SettingCard>
 </template>
-
-<style scoped>
-.gradient-border-card {
-  padding: 2px;
-  background: var(--primary-dark);
-  border-radius: 10px;
-  opacity: 100;
-}
-
-.disabled-card {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-input[type='radio'] {
-  display: grid;
-  place-content: center;
-  width: 20px;
-  background: #fff;
-  border: #000 solid 2px;
-  border-radius: 50%;
-  box-shadow: none;
-  transform: translateX(0);
-  appearance: none;
-}
-
-input[type='radio']::before {
-  width: 16px;
-  height: 16px;
-  content: '';
-  background: #000;
-  border: #fff solid 2px;
-  border-radius: 50%;
-  transition: 120ms transform ease-in-out;
-  transform: scale(0);
-}
-
-input[type='radio']:checked::before {
-  transform: scale(1);
-}
-</style>
diff --git a/src/pages/AppUsers.vue b/src/pages/AppUsers.vue
index 68d0e005..b4e89e0d 100644
--- a/src/pages/AppUsers.vue
+++ b/src/pages/AppUsers.vue
@@ -182,7 +182,7 @@ function convertToBytes(value: number) {
     <main class="container mt-8">
       <h1>USERS</h1>
       <div class="flex sm-column gap-4 justify-between mt-8">
-        <h4 class="user-details-title">USER DETAILS</h4>
+        <h4 class="user-details-title flex items-center">USER DETAILS</h4>
         <v-text-field
           v-model="walletAddress"
           :icon="SearchIcon"
@@ -194,29 +194,69 @@ function convertToBytes(value: number) {
           @keyup.enter="searchUsersByWalletAddress"
         />
       </div>
-      <v-card variant="elevated" class="flex column users-table-card mt-4">
-        <div class="table-container">
-          <table class="table-head">
-            <thead>
-              <tr>
-                <th>WALLET ADDRESS</th>
-                <th>STORAGE</th>
-                <th>BANDWIDTH</th>
-                <th>ACTION COUNT</th>
+      <v-card
+        variant="elevated"
+        class="flex column users-table-card p-em2 mt-4 max-md:p-em0.8"
+      >
+        <div class="table-container max-h-vh30 overflow-x-auto max-md:h-vh40">
+          <table
+            class="table-head my-em1 mb-em2 max-md:my-4 max-md:mt-2 max-md:mb-4"
+          >
+            <thead class="text-white_solid-default">
+              <tr
+                class="cursor-pointer rounded-px5 hover:bg-black_solid-default hover:shadow-custom active:bg-system-low_black_shadow active:shadow-none hover:text-cornflower_blue-default"
+              >
+                <th
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  WALLET ADDRESS
+                </th>
+                <th
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  STORAGE
+                </th>
+                <th
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  BANDWIDTH
+                </th>
+                <th
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  ACTION COUNT
+                </th>
               </tr>
             </thead>
           </table>
           <table v-if="users.length" class="w-full">
-            <tbody>
+            <tbody class="text-system-grey">
               <tr
                 v-for="(user, index) in users"
                 :key="user.walletAddress"
+                class="cursor-pointer rounded-px5 hover:bg-black_solid-default hover:shadow-custom active:bg-system-low_black_shadow active:shadow-none hover:text-cornflower_blue-default active:text-white_solid-default"
                 @click.stop="fetchUserLogsApi(user.walletAddress, index)"
               >
-                <td>{{ truncate(user.walletAddress) }}</td>
-                <td>{{ convertToBytes(user.storage) }}</td>
-                <td>{{ convertToBytes(user.bandwidth) }}</td>
-                <td>{{ user.actionCount }}</td>
+                <td
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  {{ truncate(user.walletAddress) }}
+                </td>
+                <td
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  {{ convertToBytes(user.storage) }}
+                </td>
+                <td
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  {{ convertToBytes(user.bandwidth) }}
+                </td>
+                <td
+                  class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                >
+                  {{ user.actionCount }}
+                </td>
               </tr>
             </tbody>
           </table>
@@ -225,7 +265,7 @@ function convertToBytes(value: number) {
       </v-card>
       <div class="flex column gap-4 mt-12">
         <h4>NUMBER OF USERS</h4>
-        <v-card variant="elevated" class="h-[240px] p-8">
+        <v-card variant="elevated" class="h-px240 p-8">
           <canvas id="numberOfUsersChart" height="100%"></canvas>
         </v-card>
       </div>
@@ -233,70 +273,116 @@ function convertToBytes(value: number) {
     <v-overlay v-if="showDetails" class="flex items-center justify-center">
       <v-card
         variant="popup"
-        class="flex column gap-4 w-[72%] min-w-[300px] max-w-[720px] p-8"
+        class="flex column gap-4 w-72% min-w-px300 max-w-px720 p-8"
       >
         <div class="flex justify-between mb-8">
-          <h2 class="self-center p-[3px] py-[2vh]">USER LOG</h2>
+          <h2 class="self-center p-px3 py-vh2">USER LOG</h2>
           <span
             v-wave
-            class="body-1 p-[3px] text-[1.5em] font-semibold text-primary cursor-pointer"
+            class="body-1 p-px3 text-em1.5 font-semibold text-cornflower_blue-default cursor-pointer text-em0.9"
             @click.stop="showDetails = false"
             >X</span
           >
         </div>
-        <div class="flex column gap-[2vh] px-[2vh] mb-[2vh]">
-          <span class="body-1 text-text_grey"> Wallet Address </span>
-          <span class="text-xl font-semibold text-text_white break-words">
+        <div class="flex column gap-2vh px-vh2 mb-vh2">
+          <span class="body-1 text-em0.9 text-system-grey">
+            Wallet Address
+          </span>
+          <span
+            class="text-xl m-px2 text-em1.2 font-semibold text-white_solid-default break-words max-md:m-0.5 max-md:text-em0.9"
+          >
             {{ userLog.walletAddress }}
           </span>
         </div>
-        <div class="flex flex-wrap gap-[4vh] justify-between px-[2vh] mb-4">
-          <div class="flex column gap-[1vh]">
-            <span class="body-1 text-text_grey"> Public Identifier </span>
-            <span class="text-xl font-semibold text-text_white">
+        <div class="flex flex-wrap gap-4vh justify-between px-vh2 mb-4">
+          <div class="flex column gap-1vh">
+            <span class="body-1 text-em0.9 text-system-grey">
+              Public Identifier
+            </span>
+            <span
+              class="text-xl m-px2 text-em1.2 font-semibold text-white_solid-default max-md:m-0.5 max-md:text-em0.9"
+            >
               {{ userLog.email }}
             </span>
           </div>
-          <div class="flex column gap-[1vh]">
-            <span class="body-1 text-text_grey"> Storage </span>
-            <span class="text-xl font-semibold text-text_white">
+          <div class="flex column gap-1vh">
+            <span class="body-1 text-em0.9 text-system-grey"> Storage </span>
+            <span
+              class="text-xl m-px2 text-em1.2 font-semibold text-white_solid-default max-md:m-0.5 max-md:text-em0.9"
+            >
               {{ convertToBytes(userLog.storage as number) }}
             </span>
           </div>
-          <div class="flex column gap-[1vh]">
-            <span class="body-1 text-text_grey"> Bandwidth </span>
-            <span class="text-xl font-semibold text-text_white">
+          <div class="flex column gap-1vh">
+            <span class="body-1 text-em0.9 text-system-grey"> Bandwidth </span>
+            <span
+              class="text-xl m-px2 text-em1.2 font-semibold text-white_solid-default max-md:m-0.5 max-md:text-em0.9"
+            >
               {{ convertToBytes(userLog.bandwidth as number) }}
             </span>
           </div>
-          <div class="flex column gap-[1vh]">
-            <span class="body-1 text-text_grey"> Action Count </span>
-            <span class="text-xl font-semibold text-text_white">
+          <div class="flex column gap-1vh">
+            <span class="body-1 text-em0.9 text-system-grey">
+              Action Count
+            </span>
+            <span
+              class="text-xl m-px2 text-em1.2 font-semibold text-white_solid-default max-md:m-0.5 max-md:text-em0.9"
+            >
               {{ userLog.actionCount }}
             </span>
           </div>
         </div>
         <div>
-          <v-card variant="depressed" class="flex column log-table-card">
-            <div class="log-container">
-              <table class="log-table">
-                <thead>
-                  <tr>
-                    <th>ACTION TYPE</th>
-                    <th>DATE</th>
-                    <th>TIME</th>
+          <v-card
+            variant="depressed"
+            class="flex column log-table-card py-em1 pl-em2.5 px-em1 max-md:py-1 max-md:px-1 max-md:pl-3"
+          >
+            <div class="log-container max-h-vh30 overflow-auto max-md:h-vh30">
+              <table class="log-table my-em1 mb-em2 max-md:my-em0.6">
+                <thead class="text-white_solid-default">
+                  <tr
+                    class="cursor-pointer rounded-px5 hover:bg-black_solid-default hover:shadow-custom active:bg-system-low_black_shadow active:shadow-none hover:text-cornflower_blue-default"
+                  >
+                    <th
+                      class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                    >
+                      ACTION TYPE
+                    </th>
+                    <th
+                      class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                    >
+                      DATE
+                    </th>
+                    <th
+                      class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                    >
+                      TIME
+                    </th>
                   </tr>
                 </thead>
               </table>
               <table v-if="userTransactions.length" class="w-full">
-                <tbody>
+                <tbody class="text-system-grey">
                   <tr
                     v-for="transaction in userTransactions"
                     :key="`${transaction.date}-${transaction.type}`"
+                    class="cursor-pointer rounded-px5 hover:bg-black_solid-default active:bg-system-low_black_shadow active:shadow-none hover:shadow-custom hover:text-cornflower_blue-default active:text-white_solid-default"
                   >
-                    <td>{{ transaction.type }}</td>
-                    <td>{{ getDate(transaction.date) }}</td>
-                    <td>{{ getTime(transaction.date) }}</td>
+                    <td
+                      class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                    >
+                      {{ transaction.type }}
+                    </td>
+                    <td
+                      class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                    >
+                      {{ getDate(transaction.date) }}
+                    </td>
+                    <td
+                      class="w-vw20 min-w-em6.4 p-em0.8 mx-em0.5 text-left max-md:w-vw20 max-md:min-w-em6.4 max-md:p-em0.6 max-md:mx-em0.4 max-md:text-left max-md:text-em0.9"
+                    >
+                      {{ getTime(transaction.date) }}
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -310,122 +396,3 @@ function convertToBytes(value: number) {
     </v-overlay>
   </div>
 </template>
-
-<style scoped>
-.table-container {
-  max-height: 30vh;
-  overflow-x: auto;
-}
-
-.log-container {
-  max-height: 30vh;
-  overflow-x: auto;
-  overflow-y: auto;
-}
-
-.body-1 {
-  font-size: 0.9em;
-}
-
-.text-xl font-semibold {
-  margin: 2px;
-  font-size: 1.2em;
-}
-
-thead {
-  color: var(--text-white);
-}
-
-tbody {
-  color: var(--text-grey);
-}
-
-.table-head {
-  margin: 1em 0 2em;
-}
-
-.log-table-card {
-  padding: 1em 1em 1em 2.5em;
-}
-
-.log-table {
-  margin: 1em 0 2em;
-}
-
-.users-table-card {
-  padding: 2em;
-}
-
-th,
-td {
-  width: 20vw;
-  min-width: 6.4em;
-  padding: 0.8em;
-  margin: 0 0.5em;
-  text-align: left;
-}
-
-tbody tr {
-  cursor: pointer;
-  border-radius: 5px;
-}
-
-tbody tr:hover {
-  color: var(--primary);
-  background: #171717;
-  box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 4px 15px rgb(1 1 1 / 30%),
-    inset 8px 6px 12px -2px #212121;
-}
-
-tbody tr:active {
-  color: var(--text-white);
-  background: rgb(255 255 255 / 10%);
-  box-shadow: unset;
-}
-
-.user-details-title {
-  display: flex;
-  align-items: center;
-}
-
-@media only screen and (max-width: 767px) {
-  .table-head {
-    margin: 0.5em 0 1em;
-  }
-
-  .text-xl font-semibold {
-    margin: 2px;
-    font-size: 0.9em;
-  }
-
-  .log-table-card {
-    padding: 0.4em 0.4em 0.4em 1.2em;
-  }
-
-  .log-table {
-    margin: 0.6em 0;
-  }
-
-  .users-table-card {
-    padding: 0.8em;
-  }
-
-  .table-container {
-    height: 40vh;
-  }
-
-  .log-container {
-    height: 30vh;
-  }
-
-  th,
-  td {
-    width: 20vw;
-    min-width: 6.4em;
-    padding: 0.6em;
-    margin: 0 0.4em;
-    font-size: 0.9em;
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/pages/ManageApps.vue b/src/pages/ManageApps.vue
index c8aed8ee..9444543a 100644
--- a/src/pages/ManageApps.vue
+++ b/src/pages/ManageApps.vue
@@ -163,16 +163,26 @@ function ellipsisAppName(appName: string) {
       v-if="accountStatus !== 'active'"
       :status="accountStatus"
     />
-    <main>
-      <VStack direction="column" gap="2rem" class="container">
+    <main class="pt-4 pb-16">
+      <VStack
+        direction="column"
+        gap="2rem"
+        class="container w-auto max-w-full mx-8"
+      >
         <VStack gap="2rem">
           <h1 class="tracking-h1">Manage Apps</h1>
         </VStack>
         <VStack gap="1.25rem" md-direction="column" sm-direction="column">
-          <VCard class="info-card">
+          <VCard
+            class="info-card flex flex-wrap justify-evenly w-full pb-8 bg-white_solid-default"
+          >
             <VStack direction="column" gap="1.5rem" class="flex-grow">
               <VStack gap="1rem" align="center">
-                <h2 class="info-title">Monthly Active Users</h2>
+                <h2
+                  class="info-title mt-8 ml-8 leading-6 text-black_solid-default"
+                >
+                  Monthly Active Users
+                </h2>
                 <VTooltip
                   v-if="hasDeleteApps"
                   title="If there is a discrepancy in aggregate billing please check billing section for further details as you may have deleted apps."
@@ -183,11 +193,11 @@ function ellipsisAppName(appName: string) {
                   />
                 </VTooltip>
               </VStack>
-              <VSeperator class="info-separator" />
-              <VStack gap="0.25rem" class="info-margin">
+              <VSeperator class="info-separator m-0 border-t border-gray-300" />
+              <VStack gap="0.25rem" class="info-margin mx-8">
                 <VStack
                   direction="column"
-                  gap="0.75rem"
+                  gap="1.75rem"
                   class="overflow-visible"
                   :style="{ width: `${freeMausWidth}%` }"
                 >
@@ -197,10 +207,13 @@ function ellipsisAppName(appName: string) {
                     align="end"
                     sm-align="start"
                   >
-                    <span class="info-detail">{{ freeMausUsed }}</span>
+                    <span
+                      class="info-detail -mb-3 text-rem2.5 font-normal leading-6 text-black_solid-default"
+                      >{{ freeMausUsed }}</span
+                    >
                   </VStack>
                   <VProgressBar
-                    class="info-progress"
+                    class="info-progress w-full !h-px10"
                     :percentage="percentageFreeMaus"
                     state="success"
                   />
@@ -208,7 +221,7 @@ function ellipsisAppName(appName: string) {
                 <VStack
                   v-if="paidMausUsed > 0"
                   direction="column"
-                  gap="0.75rem"
+                  gap="1.75rem"
                   align="start"
                   :style="{ width: `${paidMausWidth}%` }"
                   class="text-ellipsis overflow-visible"
@@ -219,35 +232,56 @@ function ellipsisAppName(appName: string) {
                     align="end"
                     sm-align="start"
                   >
-                    <span class="info-detail">{{ paidMausUsed }}</span>
+                    <span
+                      class="info-detail -mb-3 text-rem2.5 font-normal leading-6 text-black_solid-default"
+                      >{{ paidMausUsed }}</span
+                    >
                   </VStack>
                   <VProgressBar
-                    class="info-progress min-w-0"
+                    class="info-progress w-full !h-px10 min-w-0"
                     :percentage="100"
                   />
                 </VStack>
               </VStack>
-              <VStack class="flex-grow info-margin justify-end">
+              <VStack class="flex-grow info-margin mx-8 justify-end">
                 <VStack gap="1.25rem" sm-direction="column">
                   <VStack gap="0.5rem" align="center">
-                    <div class="legend-dot bg-color_green"></div>
-                    <span class="info-detail-name">Free users</span>
+                    <div
+                      class="legend-dot w-px10 h-px10 rounded-full bg-system-green"
+                    ></div>
+                    <span
+                      class="info-detail-name text-rem1 leading-1.5 text-black_solid-default"
+                      >Free users</span
+                    >
                   </VStack>
                   <VStack gap="0.5rem" align="center">
-                    <div class="legend-dot bg-primary"></div>
-                    <span class="info-detail-name">Paid users</span>
+                    <div
+                      class="legend-dot w-px10 h-px10 rounded-full bg-cornflower_blue-default"
+                    ></div>
+                    <span
+                      class="info-detail-name text-rem1 leading-1.5 text-black_solid-default"
+                      >Paid users</span
+                    >
                   </VStack>
                 </VStack>
               </VStack>
             </VStack>
           </VCard>
-          <VCard class="info-card">
+          <VCard
+            class="info-card flex flex-wrap justify-evenly w-full pb-8 bg-white_solid-default"
+          >
             <VStack direction="column" gap="1.5rem" class="flex-grow">
-              <h2 class="info-title">Estimated Cost</h2>
-              <VSeperator class="info-separator" />
-              <VStack gap="1rem" class="info-margin">
-                <span class="info-detail">Due:</span>
-                <span class="info-detail info-amount"
+              <h2 class="info-title mt-8 ml-8 leading-6 text-black">
+                Estimated Cost
+              </h2>
+              <VSeperator class="info-separator m-0 border-t border-gray-300" />
+              <VStack gap="1rem" class="info-margin mx-8">
+                <span
+                  class="info-detail -mb-3 text-rem2.5 font-normal leading-6 text-black_solid-default"
+                  >Due:</span
+                >
+                <span
+                  class="info-detail -mb-3 text-rem2.5 font-normal leading-6 text-black_solid-default info-amount text-system-deep_red"
                   >${{ estimatedCost }}</span
                 >
               </VStack>
@@ -257,12 +291,12 @@ function ellipsisAppName(appName: string) {
         <VStack gap="1.25rem" sm-justify="center" wrap>
           <VCard
             variant="depressed"
-            class="w-[19rem] min-h-[350px] relative flex items-center justify-center cursor-pointer border border-[#868c90] border-dashed"
+            class="w-rem19 min-h-px350 relative flex items-center justify-center cursor-pointer border border-system-ash border-dashed"
             @click.stop="canCreateApp = true"
             @cancel="canCreateApp = false"
           >
             <VStack
-              class="add-app"
+              class="add-app hover:custom-filter"
               direction="column"
               gap="1.25rem"
               align="center"
@@ -274,7 +308,7 @@ function ellipsisAppName(appName: string) {
           <VCard
             v-for="app in apps"
             :key="`app-${app.id}`"
-            class="w-[19rem] min-h-[350px] relative flex items-center justify-center cursor-pointer"
+            class="w-rem19 min-h-px350 relative flex items-center justify-center cursor-pointer"
             :class="{
               'cursor-not-allowed opacity-30': accountStatus !== 'active',
             }"
@@ -282,19 +316,22 @@ function ellipsisAppName(appName: string) {
             <VStack
               direction="column"
               align="center"
-              class="app-container justify-between relative"
+              class="group justify-between absolute inset-2rem-1.25rem"
             >
               <button
-                class="delete-icon-btn"
+                class="absolute top-px-12 right-px-12 bg-transparent border-0 outline-none hover:custom-filter"
                 @click.stop="handleDelete(app.id)"
               >
                 <img
                   src="@/assets/iconography/delete.svg"
                   alt="close icon"
-                  class="delete-icon-img"
+                  class="w-px22 h-px22 opacity-0 group-hover:opacity-100"
                 />
               </button>
-              <img :src="getImageUrl(app.id)" class="app-logo" />
+              <img
+                :src="getImageUrl(app.id)"
+                class="app-logo w-22 h-22 rounded-full bg-black_solid-default"
+              />
               <VStack
                 gap="0.5rem"
                 class="max-w-full"
@@ -314,7 +351,7 @@ function ellipsisAppName(appName: string) {
                 />
                 <span
                   v-else
-                  class="font-nohemi text-base font-thin app-name text-center text-ellipsis overflow-hidden"
+                  class="font-nohemi text-base font-thin app-name max-w-full mt-2.5 text-xl text-center text-ellipsis overflow-hidden"
                   :title="app.name"
                 >
                   {{ ellipsisAppName(app.name) }}
@@ -322,17 +359,24 @@ function ellipsisAppName(appName: string) {
                 <img
                   v-if="!app.editState && isHovered(app.id)"
                   src="@/assets/iconography/pencil.svg"
-                  class="edit-icon"
+                  class="edit-icon mt-2 cursor-pointer"
                   title="Edit app name"
                   @click.stop="app.editState = true"
                 />
               </VStack>
-              <VCard variant="popup" gap="6px" class="stats-card">
+              <VCard
+                variant="popup"
+                gap="6px"
+                class="stats-card box-border flex items-center justify-center w-full p-2 m-0"
+              >
                 <VStack direction="column" align="center" gap="0.25rem">
-                  <span class="stats-title"
+                  <span
+                    class="stats-title text-rem0.9 font-200 leading-1.5 text-system-grey"
                     >{{ NetworkName.testnet }} Users</span
                   >
-                  <span class="stats-number">{{ app.totalUsers || 0 }}</span>
+                  <span class="stats-number text-rem1.5 font-400 leading-1.5">{{
+                    app.totalUsers || 0
+                  }}</span>
                 </VStack>
                 <VSeperator
                   v-if="isMainnetAppAvailable(app.id)"
@@ -345,10 +389,11 @@ function ellipsisAppName(appName: string) {
                   align="center"
                   gap="0.25rem"
                 >
-                  <span class="stats-title"
+                  <span
+                    class="stats-title text-rem0.9 font-200 leading-1.5 text-system-grey"
                     >{{ NetworkName.mainnet }} Users</span
                   >
-                  <span class="stats-number">{{
+                  <span class="stats-number text-rem1.5 font-400 leading-1.5">{{
                     getMainnetTotalUsers(app.id)
                   }}</span>
                 </VStack>
@@ -357,14 +402,14 @@ function ellipsisAppName(appName: string) {
                 <VButton
                   variant="secondary"
                   :label="NetworkName.testnet"
-                  class="app-action-button delete-button"
+                  class="app-action-button w-full text-base min-w-unset delete-button"
                   :disabled="app.network !== 'testnet'"
                   @click.stop="() => goToDashboard(app.id, 'testnet')"
                 />
                 <VButton
                   variant="primary"
                   :label="NetworkName.mainnet"
-                  class="app-action-button pause-button"
+                  class="app-action-button w-full text-base min-w-unset pause-button"
                   :disabled="!isMainnetAppAvailable(app.id)"
                   @click.stop="() => goToDashboard(app.id, 'mainnet')"
                 />
@@ -385,151 +430,3 @@ function ellipsisAppName(appName: string) {
     </Transition>
   </div>
 </template>
-
-<style scoped>
-main {
-  padding-block: 1rem 4rem;
-}
-
-.container {
-  width: auto;
-  max-width: 100%;
-  margin: 0 2rem;
-}
-
-.app-container {
-  position: absolute;
-  inset: 2rem 1.25rem;
-}
-
-.app-logo {
-  width: 5.5rem;
-  height: 5.5rem;
-  background: var(--primary-dark);
-  border-radius: 50%;
-}
-
-.app-name {
-  max-width: 100%;
-  margin-top: 0.625rem;
-  font-size: 1.5rem;
-}
-
-.app-action-button {
-  width: 100%;
-  min-width: unset !important;
-  font-size: 16px;
-}
-
-.stats-card {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 10px;
-  margin: 0;
-}
-
-.stats-title {
-  font-size: 0.9rem;
-  font-weight: 200;
-  line-height: 1.5;
-  color: var(--text-grey);
-}
-
-.stats-number {
-  font-size: 1.5rem;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.info-card {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  width: 100%;
-  padding-bottom: 2rem;
-  background-color: white;
-}
-
-.info-title {
-  margin-top: 2rem;
-  margin-left: 2rem;
-  line-height: 1.5;
-  color: black;
-}
-
-.info-separator {
-  margin: 0;
-  border-top: 1px solid rgb(220 220 220);
-}
-
-.info-detail {
-  margin-bottom: -0.75rem;
-  font-size: 2.5rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: black;
-}
-
-.info-detail-name {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--text-grey);
-  color: black;
-}
-
-.info-margin {
-  margin-inline: 2rem;
-}
-
-.legend-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.info-amount {
-  color: #f55;
-}
-
-.info-progress {
-  width: 100%;
-  height: 10px;
-}
-
-.add-app:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-.edit-icon {
-  margin-top: 0.5rem;
-  cursor: pointer;
-}
-
-.delete-icon-btn {
-  position: absolute;
-  top: -12px;
-  right: -12px;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.delete-icon-img {
-  width: 22px;
-  height: 22px;
-  opacity: 0;
-}
-
-.delete-icon-btn:hover {
-  filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%)
-    hue-rotate(304deg) brightness(100%) contrast(103%);
-}
-
-.app-container:hover .delete-icon-img {
-  opacity: 1;
-}
-</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 552ccd58..4e38a15e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+import filters from 'tailwindcss-filters'
+
 const config = {
   content: ['./src/**/*.{vue,js,ts,jsx,tsx,css}'],
   theme: {
@@ -8,53 +10,413 @@ const config = {
         nohemi: ['Nohemi', 'sans-serif'],
       },
       colors: {
-        pink: '#ff4e9f',
-        liquid: '#dfecee',
-        liquidlight: {
-          DEFAULT: '#f7f7f7',
-          100: '#efefef',
-        },
-        liquidgrey: '#d9d9d9',
-        liquiddark: {
-          DEFAULT: '#8d8d8d',
-          100: '#1d2a31',
-        },
-        liquidaqua: '#5b93ff',
-        liquidred: '#FF5555',
-        overlay: {
-          background: '#1e1f1e',
-          input: '#313030',
-          textplaceholder: '#989898',
-        },
-        primary_light: 'var(--primary-light)',
-        secondary: 'var(--secondary)',
-        primary_liquid: 'var(--primary-liquid)',
-        text_grey: 'var(--text-grey)',
-        text_black: 'var(--text-black)',
-        color_green: 'var(--color-green)',
-        primary: 'var(--primary)',
-        text_white: 'var(--text-white)',
+        cornflower_blue: {
+          default: '#5b93ff',
+          50: '#F1F6FF',
+          100: '#E5EEFF',
+          200: '#CADEFF',
+          300: '#9FC6FF',
+          400: '#63A4FF',
+          500: '#5b93ff',
+          600: '#1270F0',
+          700: '#0C5CD1',
+          800: '#0748AD',
+          900: '#0C3C8F',
+          950: '#001F58',
+        },
+        fairy_dust: {
+          default: '#ff4e9f',
+          50: '#FEF1F8',
+          100: '##FEE5F2',
+          200: '#FFCAE7',
+          300: '#FF9FD2',
+          400: '#FF63B1',
+          500: '#FF4E9F',
+          600: '#F0126D',
+          700: '#D10553',
+          800: '#AD0744',
+          900: '#8F0C3C',
+          950: '#58001F',
+        },
+        black_solid: {
+          default: '#000000',
+          50: '#F2F2F2',
+          100: '#E6E6E6',
+          200: '#BFBFBF',
+          300: '#999999',
+          400: '#666666',
+          500: '#4D4D4D',
+          600: '#333333',
+          700: '#1A1A1A',
+          800: '#0D0D0D',
+          900: '#000000',
+          950: '#161616',
+        },
+        white_solid: {
+          default: '#FFFFFF',
+          50: '#FFFFFF',
+          100: '#FDFDFD',
+          200: '#FBFBFB',
+          300: '#F5F5F5',
+          400: '#EDEDED',
+          500: '#E0E0E0',
+          600: '#C2C2C2',
+          700: '#A3A3A3',
+          800: '#858585',
+          900: '#666666',
+          950: '#333333',
+        },
+        firefly: {
+          default: '#DFECEE',
+          50: '#F2F8F9',
+          100: '#DFECEE',
+          200: '#C2DADF',
+          300: '#98BFC8',
+          400: '#679CA9',
+          500: '#4C818E',
+          600: '#416A79',
+          700: '#3A5864',
+          800: '#354B55',
+          900: '#354B55',
+          950: '#1D2A31',
+        },
+        blackhaze: {
+          default: '#F4F7F7',
+          50: '#F4F7F7',
+          100: '#E2E9EB',
+          200: '#C8D5D9',
+          300: '#A2B7BE',
+          400: '#74919C',
+          500: '#597581',
+          600: '#4C626E',
+          700: '#42525C',
+          800: '#3C474E',
+          900: '#353E44',
+          950: '#13171A',
+        },
+        whitemist: {
+          default: '#F7F7F7',
+          50: '#F7F7F7',
+          100: '#EFEFEF',
+          200: '#DCDCDC',
+          300: '#BDBDBD',
+          400: '#989898',
+          500: '#7C7C7C',
+          600: '#656565',
+          700: '#525252',
+          800: '#464646',
+          900: '#3D3D3D',
+          950: '#292929',
+        },
+        system: {
+          yellow: '#ffc226',
+          green: '#51cc56',
+          deep_red: '#ff5555',
+          red: '#b43030',
+          blue: '#5b93ff',
+          orange: '#ff6826',
+          grey: '#8d8d8d',
+          light_gray: '#d9d9d9',
+          light_black: '#1e1f1e',
+          deep_black: '#101010',
+          smoke: '#8d8d8d33',
+          light_shadow: '#262626',
+          creamy_red: '#ee193f',
+          deep_blue: '#568DF0',
+          deep_green: '#51C75F',
+          ash: '#868c90',
+          black_shadow: '#363636',
+          low_black_shadow: 'rgba(255,255,255,0.1)',
+        },
+      },
+      boxShadow: {
+        custom:
+          '0 4px 4px rgba(0, 0, 0, 0.25), 0 4px 15px rgba(1, 1, 1, 0.30), inset 8px 6px 12px -2px #212121',
+      },
+      filter: {
+        'custom-filter':
+          'brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%) hue-rotate(304deg) brightness(100%) contrast(103%)',
+        'custom-sidebar-filter':
+          'brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(24%) hue-rotate(340deg) brightness(85%) contrast(91%)',
+        'custom-submenu-filter':
+          'brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7494%) hue-rotate(212deg) brightness(89%) contrast(100%)',
+      },
+      width: {
+        rem8: '8rem',
+        rem2: '2rem',
+        rem12: '12rem',
+        rem16: '16rem',
+        rem19: '19rem',
+        px16: '16px',
+        px15: '15px',
+        px20: '20px',
+        px10: '10px',
+        px18: '18px',
+        px24: '24px',
+        px22: '22px',
+        px380: '380px',
+        px100: '100px',
+        px120: '120px',
+        px200: '200px',
+        px630: '630px',
+        '5%': '5%',
+        '10%': '10%',
+        '14%': '14%',
+        '15%': '15%',
+        '20%': '20%',
+        '25%': '25%',
+        '40%': '40%',
+        '70%': '70%',
+        '72%': '72%',
+        '94%': '94%',
+        vw20: '20vw',
+        'calc-half-minus-rem1': 'calc(50% - 1rem)',
+        'calc-full-add-rem4': 'calc(100%+4rem)',
+        'calc-full-add-rem2': 'calc(100%+2rem)',
+        'calc-full-add-rem3': 'calc(100%+3rem)',
+        'calc-full-add-rem2.5': 'calc(100%+2.5rem)',
+      },
+
+      height: {
+        px50: '50px',
+        px16: '16px',
+        px20: '20px',
+        px10: '10px',
+        px18: '18px',
+        px22: '22px',
+        px24: '24px',
+        px200: '200px',
+        px240: '240px',
+        px175: '175px',
+        px350: '350px',
+        vh30: '30vh',
+        vh40: '40vh',
+        '94%': '94%',
+        'rem2.5': '2.5rem',
+        'calc-full-minus-rem4': 'calc(100vh-4rem)',
+        'calc-full-minus-px80': 'calc(100%-80px)',
+      },
+      borderWidth: {
+        px1: '1px',
+        'px1.5': '1.5px',
+      },
+      gap: {
+        '1vh': '1vh',
+        '2vh': '2vh',
+        '4vh': '4vh',
+      },
+      borderRadius: {
+        px5: '5px',
+        px10: '10px',
+      },
+      margin: {
+        px15: '15px',
+        px10: '10px',
+        'em0.9': '0.9em',
+        '-rem1.5': '-1.5rem',
+        '-rem1.25': '-1.25rem',
+        '-rem2': '-2rem',
+        '-rem1': '-1rem',
+        '3em': '3em',
+        em1: '1em',
+        px7: '7px',
+        px5: '5px',
+        em2: '2em',
+        'em0.8': '0.8em',
+        'em0.4': '0.4em',
+        'em0.5': '0.5em',
+        vh2: '2vh',
+        px2: '2px',
+      },
+      lineHeight: {
+        1.5: '1.5',
+        '150%': '150%',
+      },
+      padding: {
+        'rem4.25': '4.25rem',
+        'rem1.25': '1.25rem',
+        px1: '1px',
+        px2: '2px',
+        px3: '3px',
+        px4: '4px',
+        px5: '5px',
+        px15: '15px',
+        em2: '2em',
+        'em0.6': '0.6em',
+        'em0.8': '0.8em',
+        em1: '1em',
+        'em2.5': '2.5em',
+        vh2: '2vh',
+      },
+      inset: {
+        '2rem-1.25rem': '2rem 1.25rem',
+        px10: '10px',
+        px25: '25px',
+        px34: '34px',
+        'px-8': '-8px',
+        'px-12': '-12px',
+        'calc-full-add-rem75': 'calc(100%+0.75rem)',
+        'px-10': '-10px',
+        'px-100': '-100px',
+        'rem-1': '-1rem',
+      },
+      minWidth: {
+        rem10: '10rem',
+        rem12: '12rem',
+        rem16: '16rem',
+        px500: '500px',
+        px18: '18px',
+        px600: '600px',
+        px300: '300px',
+        px200: '200px',
+        'em6.4': '6.4em',
+      },
+      minHeight: {
+        rem12: '12rem',
+        px500: '500px',
+        px600: '600px',
+        px18: '18px',
+        px430: '430px',
+        px350: '350px',
+      },
+      translate: {
+        '-100%': '-100%',
+        '-rem20.5': '-20.5rem',
+      },
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        px1080: '1080px',
+        'low-xl': '1200px',
+        xl: '1280px',
       },
       backdropBlur: {
         'xar-sm': '20px',
       },
       fontSize: {
+        rem1: '1rem',
         rem2: '2rem',
+        'rem1.5': '1.5rem',
+        'rem2.5': '2.5rem',
+        'rem1.25': '1.25rem',
+        'rem1.125': '1.125rem',
+        'rem0.75': '0.75rem',
+        px8: '8px',
+        px10: '10px',
+        px12: '12px',
+        px14: '14px',
+        px15: '15px',
+        px16: '16px',
+        px20: '20px',
+        px35: '35px',
+        'em1.8': '1.8em',
+        'rem0.9': '0.9rem',
+        'em0.9': '0.9em',
+        'em1.5': '1.5em',
+        'em1.2': '1.2em',
+      },
+      spacing: {
+        px5: '5px',
+        px10: '10px',
+        px15: '15px',
       },
       zIndex: {
         surface: 0,
+        top: 1,
+        'mid-overlay': 999,
+        'full-overlay': 9999,
         overlay: 99999,
+        'mid-overlayTop': 1000,
         overlayTop: 100000,
       },
+      font: {
+        200: '200',
+        400: '400',
+      },
       maxWidth: {
         sd: '360px',
         hd: '720px',
+        rem16: '16rem',
+        rem12: '12rem',
+        rem22: '22rem',
+        rem38: '38rem',
+        px296: '296px',
+        px360: '360px',
+        px480: '480px',
+        px500: '500px',
+        px560: '560px',
+        px600: '600px',
+        px720: '720px',
+      },
+      maxHeight: {
+        px380: '380px',
+        px430: '430px',
+        vh30: '30vh',
       },
       letterSpacing: {
         h1: '-2%',
       },
+      animation: {
+        ripple: 'ripple 1s cubic-bezier(0.65, 0, 0.34, 1) infinite',
+      },
+      keyframes: {
+        ripple: {
+          '0%': {
+            opacity: '1',
+            transform: 'scale3d(0.75, 0.75, 1)',
+          },
+          '100%': {
+            opacity: '0',
+            transform: 'scale3d(3, 3, 1)',
+          },
+        },
+      },
     },
   },
+  variants: {
+    filter: ['hover'],
+    extend: {
+      height: ['important'],
+    },
+  },
+  plugins: [
+    filters,
+    function ({ addUtilities }) {
+      addUtilities(
+        {
+          '.custom-filter': {
+            filter:
+              'brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%) hue-rotate(304deg) brightness(100%) contrast(103%)',
+          },
+          '.hover\\:custom-filter': {
+            '@apply hover:filter': {},
+            filter:
+              'brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(4510%) hue-rotate(304deg) brightness(100%) contrast(103%)',
+          },
+          '.custom-sidebar-filter': {
+            filter:
+              'brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(24%) hue-rotate(340deg) brightness(85%) contrast(91%)',
+          },
+          '.hover\\:custom-sidebar-filter': {
+            '@apply hover:filter': {},
+            filter:
+              'brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(24%) hue-rotate(340deg) brightness(85%) contrast(91%)',
+          },
+          '.custom-submenu-filter': {
+            filter:
+              'brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7494%) hue-rotate(212deg) brightness(89%) contrast(100%)',
+          },
+          '.hover\\:custom-submenu-filter': {
+            '@apply hover:filter': {},
+            filter:
+              'brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7494%) hue-rotate(212deg) brightness(89%) contrast(100%)',
+          },
+        },
+        ['hover']
+      )
+    },
+  ],
 }
 
 export default config