diff --git a/public/config.sample.json b/public/config.sample.json
index a3f3b2a8..843b973e 100644
--- a/public/config.sample.json
+++ b/public/config.sample.json
@@ -73,7 +73,8 @@
     "modal-btn-text-color": "#ffffff",
     "modal-btn-border-color": "$color-2",
     "tx-topup-bg-color": "$inner-card-background-color",
-    "tx-reconversion-bg-color": "$inner-card-background-color"
+    "tx-reconversion-bg-color": "$inner-card-background-color",
+    "switch-bg-color": "$color-2"
   },
   "css": ".nav-item {color: red !important} .refresh {background-color: #009688;}",
   "accountsRefreshInterval": 90,
diff --git a/src/components/AuthPref.vue b/src/components/AuthPref.vue
index ac871def..7c051041 100644
--- a/src/components/AuthPref.vue
+++ b/src/components/AuthPref.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main" id="simplified-auth">
-    <div class="mb-5">
-      <div class="mb-5 is-flex">
+    <div class="mb-1">
+      <div class="mb-1 is-flex">
         <div class="is-flex">
           <div class="switch-centered">
             <label class="switch">
diff --git a/src/components/BiometryPrefs.vue b/src/components/BiometryPrefs.vue
index 730ae438..2365c7a1 100644
--- a/src/components/BiometryPrefs.vue
+++ b/src/components/BiometryPrefs.vue
@@ -27,8 +27,8 @@
       </div>
     </div>
     <div
-      v-if="!hasCredentialsAvailable && useBiometry"
-      class="mb-3 mt-1 info-bubble ml-4 pb-1"
+      v-if="hasCredentialsAvailable && useBiometry"
+      class="mb-3 mt-1 info-bubble notification is-warning is-light ml-4 pb-1"
     >
       <span class="warning">
         <i class="ml-2 fas icon fa-key">
@@ -104,7 +104,6 @@
     padding-right: 0.5em;
   }
   .info-bubble {
-    background-color: var(--color-1, #e4f2f1);
     border-radius: 1em;
     padding: 0.2em;
     margin-top: 0.2em;
diff --git a/src/components/LangPrefs.vue b/src/components/LangPrefs.vue
index 40dbcd65..aae7caee 100644
--- a/src/components/LangPrefs.vue
+++ b/src/components/LangPrefs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main">
-    <div class="mb-5 is-flex">
-      <div class="is-flex mb-5">
+    <div class="is-flex">
+      <div class="is-flex mb-1">
         <div class="switch-centered">
           <label class="switch">
             <input
@@ -17,7 +17,7 @@
           {{ $gettext("Use custom language") }}
         </div>
       </div>
-      <div v-if="useCustomLanguage" class="is-flax ml-5">
+      <div v-if="useCustomLanguage" class="is-flax ml-1">
         <span class="select center">
           <select v-model="userLanguage">
             <option
diff --git a/src/components/PendingTopUp.vue b/src/components/PendingTopUp.vue
index b81258b4..d3889774 100644
--- a/src/components/PendingTopUp.vue
+++ b/src/components/PendingTopUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="pending-topup-list">
+  <div class="mb-2" id="pending-topup-list">
     <div
       class="section-card"
       id="pending-top-up-list"
diff --git a/src/components/TheBankAccountList.vue b/src/components/TheBankAccountList.vue
index c399f229..d313ba2d 100644
--- a/src/components/TheBankAccountList.vue
+++ b/src/components/TheBankAccountList.vue
@@ -94,12 +94,12 @@
           {{ $gettext("your accounts") }}
         </h2>
         <BankAccountItem
-          v-for="a in activeVirtualAccountsMiddleware"
-          class="mb-5"
+          v-for="(a, idx) in activeVirtualAccountsMiddleware"
           :class="{
             selected:
               a?.active && a?._obj?.internalId === account?._obj?.internalId,
-          }"
+            'mb-5': idx !== activeVirtualAccountsMiddleware.length - 1
+            }"
           @accountSelected="$emit('accountSelected', a)"
           :isAccountSelected="
             a?.active && a._obj.internalId === account?._obj?.internalId
@@ -107,7 +107,7 @@
           :account="a"
           showSubAccounts="true"
           @refreshTransaction="refreshTransactions()"
-          @refreshAccounts="refreshBalance"
+          @refreshAccounts="refreshBalance(true)"
         >
           <template v-slot:name>{{
             a.name ? a.name() : $gettext("Unavailable")
@@ -301,4 +301,8 @@
     justify-content: center;
     display: flex;
   }
+  .section-card {
+      margin-bottom: 0px !important;
+  }
+
 </style>
diff --git a/src/components/TransactionListRecent.vue b/src/components/TransactionListRecent.vue
index c99eb2c7..c32f4c29 100644
--- a/src/components/TransactionListRecent.vue
+++ b/src/components/TransactionListRecent.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="transaction-list-recent">
     <div
-      class="section-card"
+      class="section-card mb-1"
       id="the-transaction-list"
       v-if="hasFinishedFirstLoading"
     >
@@ -47,7 +47,7 @@
             })
           "
         />
-        <div v-if="transactions.length" class="has-text-centered mt-5">
+        <div v-if="transactions.length" class="has-text-centered mt-4">
           <button
             @click="
               () => {
diff --git a/src/views/Prefs.vue b/src/views/Prefs.vue
index e76defba..9a7adfed 100644
--- a/src/views/Prefs.vue
+++ b/src/views/Prefs.vue
@@ -45,6 +45,6 @@
     margin: auto;
   }
   .prefs-group + .prefs-group {
-    margin-top: 3em;
+    margin-top: 2em;
   }
 </style>