diff --git a/resources/js/components/Btn.vue b/resources/js/components/Btn.vue
index ac1ea84..730d286 100644
--- a/resources/js/components/Btn.vue
+++ b/resources/js/components/Btn.vue
@@ -5,7 +5,7 @@
         class="inline-flex justify-center rounded-md py-2 px-3 text-sm font-semibold shadow-sm transition-all truncate"
         :class="{
             'text-white bg-primary hover:bg-primary-light': primary,
-            'text-white bg-red-600 hover:bg-red-500': error,
+            'text-white bg-red-500 hover:bg-red-600': error,
             'text-gray-900 bg-white hover:bg-gray-50 ring-1 ring-inset ring-gray-300': basic && !error && !primary,
             'px-5': loading,
             '!bg-gray-400': disabled,
diff --git a/resources/js/components/NotificationsList.vue b/resources/js/components/NotificationsList.vue
index 43b679b..a4630dd 100644
--- a/resources/js/components/NotificationsList.vue
+++ b/resources/js/components/NotificationsList.vue
@@ -12,8 +12,8 @@
             </div>
             <ScaleTransition>
                 <MenuItems
-                    class="absolute right-0 z-10 mt-2 w-72 sm:w-80 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none pt-1"
                     v-if="appStore.loggedIn"
+                    class="absolute right-0 z-10 mt-2 w-72 sm:w-80 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none pt-1"
                 >
                     <div class="max-h-80 overflow-y-auto divide-y divide-gray-100 scrollbar-hide">
                         <MenuItem
diff --git a/resources/js/components/Snackbar.vue b/resources/js/components/Snackbar.vue
index dde8014..2cf3d2d 100644
--- a/resources/js/components/Snackbar.vue
+++ b/resources/js/components/Snackbar.vue
@@ -1,12 +1,12 @@
 <template>
     <transition-group
         enter-active-class="transform ease-out duration-300 transition"
-        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
-        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-        leave-active-class="transition ease-in duration-500"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-        move-class="transition duration-500"
+        enter-from-class="-translate-y-2 opacity-0 "
+        enter-to-class="translate-y-0 opacity-100"
+        leave-active-class="transform transition ease-in duration-300"
+        leave-from-class="translate-y-0 opacity-100"
+        leave-to-class="-translate-y-2 opacity-0"
+        move-class="transition-all duration-300"
     >
         <slot :notifications="sortedNotifications" :close="close" />
     </transition-group>
diff --git a/resources/js/components/SnackbarGroup.vue b/resources/js/components/SnackbarGroup.vue
index 87467dc..824dc28 100644
--- a/resources/js/components/SnackbarGroup.vue
+++ b/resources/js/components/SnackbarGroup.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="absolute z-50 inset-x-0 bottom-0 flex items-center justify-center my-6">
-        <div class="w-full fixed max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl top-2 right-2">
+        <div class="w-full fixed max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl top-2">
             <Snackbar v-slot="{ notifications, close }">
                 <div
                     v-for="notification in notifications"
@@ -9,58 +9,49 @@
                     class="pointer-events-none inset-0 flex items-end px-4 py-1 sm:items-start sm:p-1"
                 >
                     <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
-                        <transition
-                            enter-active-class="transform ease-out duration-300 transition"
-                            enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-                            enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-                            leave-active-class="transition ease-in duration-100"
-                            leave-from-class="opacity-100"
-                            leave-to-class="opacity-0"
+                        <div
+                            @click="close(notification.id)"
+                            class="pointer-events-auto flex w-full max-w-md rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
                         >
-                            <div
-                                @click="close(notification.id)"
-                                class="pointer-events-auto flex w-full max-w-md rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
-                            >
-                                <div class="w-0 flex-1 p-4">
-                                    <div class="flex items-center">
-                                        <div class="flex-shrink-0 pt-0.5">
-                                            <CheckCircleIcon
-                                                v-if="notification.type === NotificationType.Success"
-                                                class="h-6 w-6 text-green-400"
-                                                aria-hidden="true"
-                                            />
-                                            <ExclamationCircleIcon
-                                                v-if="notification.type === NotificationType.Info"
-                                                class="h-6 w-6 text-blue-400"
-                                                aria-hidden="true"
-                                            />
-                                            <XCircleIcon
-                                                v-if="notification.type === NotificationType.Error"
-                                                class="h-6 w-6 text-red-400"
-                                                aria-hidden="true"
-                                            />
-                                        </div>
-                                        <div class="ml-3 w-0 flex-1">
-                                            <p class="text-sm font-medium text-gray-900">
-                                                {{ notification.title }}
-                                            </p>
-                                            <p class="mt-1 text-sm text-gray-500 break-words" v-if="notification.text">
-                                                {{ notification.text }}
-                                            </p>
-                                        </div>
+                            <div class="w-0 flex-1 p-4">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 pt-0.5">
+                                        <CheckCircleIcon
+                                            v-if="notification.type === NotificationType.Success"
+                                            class="h-6 w-6 text-green-400"
+                                            aria-hidden="true"
+                                        />
+                                        <ExclamationCircleIcon
+                                            v-if="notification.type === NotificationType.Info"
+                                            class="h-6 w-6 text-blue-400"
+                                            aria-hidden="true"
+                                        />
+                                        <XCircleIcon
+                                            v-if="notification.type === NotificationType.Error"
+                                            class="h-6 w-6 text-red-400"
+                                            aria-hidden="true"
+                                        />
+                                    </div>
+                                    <div class="ml-3 w-0 flex-1">
+                                        <p class="text-sm font-medium text-gray-900">
+                                            {{ notification.title }}
+                                        </p>
+                                        <p class="mt-1 text-sm text-gray-500 break-words" v-if="notification.text">
+                                            {{ notification.text }}
+                                        </p>
                                     </div>
                                 </div>
-                                <div class="flex border-l border-gray-200" v-if="notification.event">
-                                    <button
-                                        type="button"
-                                        @click="close(notification.id, true)"
-                                        class="flex w-full items-center justify-center rounded-none rounded-r-lg border border-transparent p-4 text-sm font-medium text-primary hover:text-primary-light focus:outline-none focus:ring-2 focus:ring-primary-light"
-                                    >
-                                        {{ 'View' }}
-                                    </button>
-                                </div>
                             </div>
-                        </transition>
+                            <div class="flex border-l border-gray-200" v-if="notification.event">
+                                <button
+                                    type="button"
+                                    @click="close(notification.id, true)"
+                                    class="flex w-full items-center justify-center rounded-none rounded-r-lg border border-transparent p-4 text-sm font-medium text-primary hover:text-primary-light focus:outline-none focus:ring-2 focus:ring-primary-light"
+                                >
+                                    {{ 'View' }}
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </Snackbar>
diff --git a/resources/js/components/WalletConnectButton.vue b/resources/js/components/WalletConnectButton.vue
index 52d7279..b700b93 100644
--- a/resources/js/components/WalletConnectButton.vue
+++ b/resources/js/components/WalletConnectButton.vue
@@ -6,7 +6,7 @@
             >
                 <WalletIcon class="h-6 w-6" />
                 <LoadingCircle v-if="loading" class="!text-white" />
-                <span v-else>{{ walletSession ? 'Wallet connected' : 'Connect wallet' }}</span>
+                <span v-else class="hidden sm:block">{{ walletSession ? 'Wallet connected' : 'Connect wallet' }}</span>
             </MenuButton>
         </div>
         <ScaleTransition>
@@ -79,7 +79,7 @@ const connectWallet = async (provider: string) => {
             showAccountsModal.value = true;
         }
     } catch {
-        snackbar.error({ title: 'Failed to connect wallet' });
+        snackbar.error({ title: 'Failed to connect the wallet' });
     } finally {
         loading.value = false;
     }
diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
index 06eee53..0fe91e4 100644
--- a/resources/js/components/pages/Settings.vue
+++ b/resources/js/components/pages/Settings.vue
@@ -3,6 +3,14 @@
         <div class="mt-4 flow-root">
             <LoadingCircle class="mt-40" :size="44" v-if="loading" />
             <template v-else>
+                <div
+                    v-if="!appStore.hasValidConfig && appStore.isMultiTenant"
+                    class="flex flex-col mb-6 space-y-2 w-full md:w-1/2 transition-all"
+                >
+                    <p class="col-span-2">Please complete these steps in order to use the platform:</p>
+                    <div v-if="walletAccount" class="bg-red-500 p-2 text-white rounded-md">Add a wallet account</div>
+                    <div v-if="tokens.length" class="bg-red-500 p-2 text-white rounded-md">Create an API token</div>
+                </div>
                 <div class="flex flex-col space-y-8">
                     <div class="">
                         <h1 class="text-xl md:text-2xl">
@@ -73,7 +81,7 @@
                             >
                                 <div v-if="!creating" class="flex items-center">
                                     <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
-                                    <span class="truncate"> Create New API Token </span>
+                                    <span class="truncate"> Create API Token </span>
                                 </div>
                                 <LoadingCircle v-else class="w-4 h-4 text-white" />
                             </Btn>
diff --git a/resources/js/store/connection.ts b/resources/js/store/connection.ts
index 05ad305..eb60cdd 100644
--- a/resources/js/store/connection.ts
+++ b/resources/js/store/connection.ts
@@ -9,6 +9,7 @@ import { HexString } from '@polkadot/util/types';
 import { wcNamespaces, wcProjectId } from '~/util/constants';
 import { useAppStore } from '.';
 import { WalletConnectModalSign } from '@walletconnect/modal-sign-html';
+import snackbar from '~/util/snackbar';
 
 export const useConnectionStore = defineStore('connection', {
     state: (): ConnectionState => ({
@@ -86,6 +87,9 @@ export const useConnectionStore = defineStore('connection', {
                 this.wallet = true;
                 this.provider = 'polkadot.js';
                 this.walletSession = pkjs;
+                snackbar.success({ title: 'Polkadot.js extension connected', save: false });
+            } else {
+                snackbar.error({ title: 'Polkadot.js extension is not installed' });
             }
         },