diff --git a/index.html b/index.html
index 5933cec2..71f12206 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
         <div class="loading-logo">
           <img src="/logo.svg" alt="Logo" />
         </div>
-        <div class="loading">
+        <div class="pre-loading">
           <div class="effect-1 effects"></div>
           <div class="effect-2 effects"></div>
           <div class="effect-3 effects"></div>
diff --git a/public/loader.css b/public/loader.css
index a855b231..c3a9a134 100644
--- a/public/loader.css
+++ b/public/loader.css
@@ -8,7 +8,7 @@
   inset-inline-start: calc(50% - 75px);
 }
 
-.loading {
+.pre-loading {
   position: absolute;
   box-sizing: border-box;
   border: 3px solid transparent;
@@ -19,9 +19,9 @@
   inset-inline-start: calc(50% - 27.5px);
 }
 
-.loading .effect-1,
-.loading .effect-2,
-.loading .effect-3 {
+.pre-loading .effect-1,
+.pre-loading .effect-2,
+.pre-loading .effect-3 {
   position: absolute;
   box-sizing: border-box;
   border: 3px solid transparent;
@@ -31,19 +31,19 @@
   inline-size: 100%;
 }
 
-.loading .effect-1 {
+.pre-loading .effect-1 {
   animation: rotate 1s ease infinite;
 }
 
-.loading .effect-2 {
+.pre-loading .effect-2 {
   animation: rotate-opacity 1s ease infinite 0.1s;
 }
 
-.loading .effect-3 {
+.pre-loading .effect-3 {
   animation: rotate-opacity 1s ease infinite 0.2s;
 }
 
-.loading .effects {
+.pre-loading .effects {
   transition: all 0.3s ease;
 }
 
diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue
index ba7dd8bb..1ebf2ce4 100644
--- a/src/modules/wallet/accounts.vue
+++ b/src/modules/wallet/accounts.vue
@@ -261,7 +261,7 @@ async function loadBalances(endpoint: string, address: string) {
     </div>
 
     <div class="overflow-x-auto">
-      <div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-xl my-5 p-5">
+      <div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-xl my-5 py-5 px-2">
         <div class="flex justify-self-center">
           <div class="mr-2 p-2">
             <svg :fill="chainStore.current?.themeColor || '#666CFF'" height="28px" width="28px" version="1.1" id="Capa_1"
@@ -287,7 +287,7 @@ async function loadBalances(endpoint: string, address: string) {
             </svg>
           </div>
           <div>
-            <div class=" font-bold overflow-hidden">{{ key }}</div>
+            <div class=" max-w-md overflow-hidden"><div class="font-bold">{{ key }}</div></div>
             <div class="dropdown">
               <label tabindex="0" class="">{{ subaccounts.length }} addresses</label>
               <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box z-50">
@@ -295,9 +295,9 @@ async function loadBalances(endpoint: string, address: string) {
                 <a>
                   <img :src="x.account.logo" class="w-8 h-8 mr-2" />
                   <span class="font-bold capitalize">{{ x.account.chainName }} <br>
-                    <span class="text-xs font-normal">{{ x.account.address }}</span>
+                    <span class="text-xs font-normal sm:w-16 sm:overflow-hidden">{{ x.account.address }}</span>
                   </span>
-                  <label class="btn btn-error btn-xs" @click="removeAddress(x.account.address)">Remove</label>
+                  <label class=" btn btn-xs !btn-error" @click="removeAddress(x.account.address)">Remove</label>
                 </a>
               </li>
               </ul>
@@ -344,7 +344,7 @@ async function loadBalances(endpoint: string, address: string) {
         </div>
       </div>
 
-      <div class=" text-center bg-base-100 rounded-xl p-4">
+      <div class=" text-center bg-base-100 rounded-xl my-4 p-4">
         <a href="#address-modal"
           class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
           <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">