From 54d39d930de2ba3f5a2f921b87e0fc19fd6f3685 Mon Sep 17 00:00:00 2001
From: Svetoslav Borislavov <svetoslav.borislavov@limechain.tech>
Date: Wed, 4 Dec 2024 09:44:38 +0200
Subject: [PATCH] refactor: create composables for globally injected items
 (#1278)

Signed-off-by: Svetoslav Borislavov <svetoslav.borislavov@limechain.tech>
---
 .../GlobalAppProcesses/GlobalAppProcesses.vue | 19 ++--
 front-end/src/renderer/components/Header.vue  | 20 ++---
 .../ImportExternalPrivateKeyModal.vue         | 29 ++-----
 .../components/DecryptKeys.vue                | 28 ++----
 front-end/src/renderer/components/Menu.vue    | 18 ----
 .../Organization/AutoLoginInOrganization.vue  | 25 ++----
 .../Create/FileContents/FileContents.vue      | 34 +++-----
 .../Transaction/TransactionGroupProcessor.vue | 42 +++------
 .../BigFileOrganizationRequestHandler.vue     | 50 ++++-------
 .../components/ConfirmTransactionHandler.vue  | 43 +++------
 .../renderer/components/UserModeSelect.vue    | 30 ++-----
 .../src/renderer/composables/useLoader.ts     | 37 ++++++++
 .../composables/usePersonalPassword.ts        | 54 ++++++++++++
 .../composables/useSetDynamicLayout.ts        |  2 +
 .../pages/AccountSetup/AccountSetup.vue       | 10 +--
 .../AccountSetup/components/KeyPairs.vue      | 29 ++-----
 .../AccountSetup/components/NewPassword.vue   | 34 +++-----
 .../src/renderer/pages/Accounts/Accounts.vue  |  8 +-
 .../LinkExistingAccount.vue                   |  8 +-
 .../ConsensusService/ConsensusService.vue     |  5 --
 .../renderer/pages/ConsensusService/index.ts  |  3 -
 .../pages/ContactList/ContactList.vue         |  8 +-
 .../ContactList/SignUpUser/SignUpUser.vue     |  8 +-
 .../CreateTransaction/CreateTransaction.vue   |  8 +-
 .../CreateTransactionGroup.vue                |  8 +-
 front-end/src/renderer/pages/Files/Files.vue  |  8 +-
 .../pages/ForgotPassword/ForgotPassword.vue   | 48 ----------
 .../renderer/pages/ForgotPassword/index.ts    |  3 -
 front-end/src/renderer/pages/Help/Help.vue    |  5 --
 front-end/src/renderer/pages/Help/index.ts    |  3 -
 .../src/renderer/pages/Migrate/Migrate.vue    |  8 +-
 .../OrganizationLogin/OrganizationLogin.vue   | 66 ++++----------
 .../renderer/pages/RestoreKey/RestoreKey.vue  | 31 +++----
 .../RestoreMissingKeys/RestoreMissingKeys.vue | 31 +++----
 .../src/renderer/pages/Settings/Settings.vue  |  8 +-
 .../GeneralTab/components/NetworkSettings.vue | 21 ++---
 .../pages/Settings/components/KeysTab.vue     | 26 ++----
 .../pages/Settings/components/ProfileTab.vue  | 36 +++-----
 .../pages/SmartContracts/SmartContracts.vue   |  5 --
 .../renderer/pages/SmartContracts/index.ts    |  3 -
 .../src/renderer/pages/Tokens/Tokens.vue      | 87 -------------------
 front-end/src/renderer/pages/Tokens/index.ts  |  3 -
 .../TransactionDetails/TransactionDetails.vue | 48 +++-------
 .../TransactionGroupDetails.vue               | 42 +++------
 .../pages/Transactions/Transactions.vue       | 50 ++++-------
 .../renderer/pages/UserLogin/UserLogin.vue    |  8 +-
 .../src/renderer/providers/dynamicLayout.ts   | 16 ++++
 front-end/src/renderer/router/index.ts        | 10 ---
 front-end/src/renderer/router/meta.ts         |  2 -
 front-end/src/renderer/utils/index.ts         | 27 ------
 50 files changed, 358 insertions(+), 797 deletions(-)
 create mode 100644 front-end/src/renderer/composables/useLoader.ts
 create mode 100644 front-end/src/renderer/composables/usePersonalPassword.ts
 delete mode 100644 front-end/src/renderer/pages/ConsensusService/ConsensusService.vue
 delete mode 100644 front-end/src/renderer/pages/ConsensusService/index.ts
 delete mode 100644 front-end/src/renderer/pages/ForgotPassword/ForgotPassword.vue
 delete mode 100644 front-end/src/renderer/pages/ForgotPassword/index.ts
 delete mode 100644 front-end/src/renderer/pages/Help/Help.vue
 delete mode 100644 front-end/src/renderer/pages/Help/index.ts
 delete mode 100644 front-end/src/renderer/pages/SmartContracts/SmartContracts.vue
 delete mode 100644 front-end/src/renderer/pages/SmartContracts/index.ts
 delete mode 100644 front-end/src/renderer/pages/Tokens/Tokens.vue
 delete mode 100644 front-end/src/renderer/pages/Tokens/index.ts

diff --git a/front-end/src/renderer/components/GlobalAppProcesses/GlobalAppProcesses.vue b/front-end/src/renderer/components/GlobalAppProcesses/GlobalAppProcesses.vue
index 6b0de93c3..c40fbb484 100644
--- a/front-end/src/renderer/components/GlobalAppProcesses/GlobalAppProcesses.vue
+++ b/front-end/src/renderer/components/GlobalAppProcesses/GlobalAppProcesses.vue
@@ -1,23 +1,17 @@
 <script setup lang="ts">
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
-
-import { inject, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 import { MIGRATION_STARTED } from '@main/shared/constants';
 
 import useUserStore from '@renderer/stores/storeUser';
 
-import { useToast } from 'vue-toast-notification';
 import useAutoLogin from '@renderer/composables/useAutoLogin';
+import useLoader from '@renderer/composables/useLoader';
 
 import { getUseKeychain } from '@renderer/services/safeStorageService';
 import { getUsersCount, resetDataLocal } from '@renderer/services/userService';
 import { getStoredClaim } from '@renderer/services/claimService';
 
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
-
-import { withLoader } from '@renderer/utils';
-
 import AutoLoginInOrganization from '@renderer/components/Organization/AutoLoginInOrganization.vue';
 import AppUpdate from './components/AppUpdate.vue';
 import ImportantNote from './components/ImportantNote.vue';
@@ -27,12 +21,9 @@ import BeginDataMigration from './components/BeginDataMigration.vue';
 /* Stores */
 const user = useUserStore();
 
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
-
 /* Composables */
-const toast = useToast();
 const tryAutoLogin = useAutoLogin();
+const withLoader = useLoader();
 
 /* State */
 const importantNoteRef = ref<InstanceType<typeof ImportantNote> | null>(null);
@@ -58,9 +49,9 @@ const handleBeginMigrationReadyState = async (ready: boolean) => {
   }
 };
 
-const handleDetectKeychainReadyState = () => {
+const handleDetectKeychainReadyState = async () => {
   detectKeychainReady.value = true;
-  withLoader(tryAutoLogin, toast, globalModalLoaderRef?.value)();
+  await withLoader(tryAutoLogin);
 };
 
 /* Hooks */
diff --git a/front-end/src/renderer/components/Header.vue b/front-end/src/renderer/components/Header.vue
index 32dedf3e1..2c5484ade 100644
--- a/front-end/src/renderer/components/Header.vue
+++ b/front-end/src/renderer/components/Header.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { Network } from '@main/shared/interfaces';
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
 
-import { inject, onUpdated } from 'vue';
+import { onUpdated } from 'vue';
 
 import { CommonNetwork } from '@main/shared/enums';
 
@@ -10,15 +9,13 @@ import useUserStore from '@renderer/stores/storeUser';
 import useNetworkStore from '@renderer/stores/storeNetwork';
 
 import { useRouter } from 'vue-router';
-import { useToast } from 'vue-toast-notification';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
+import useLoader from '@renderer/composables/useLoader';
 
 import { logout } from '@renderer/services/organization';
 import { updateOrganizationCredentials } from '@renderer/services/organizationCredentials';
 
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
-
-import { isUserLoggedIn, toggleAuthTokenInSessionStorage, withLoader } from '@renderer/utils';
+import { isUserLoggedIn, toggleAuthTokenInSessionStorage } from '@renderer/utils';
 
 import Logo from '@renderer/components/Logo.vue';
 import LogoText from '@renderer/components/LogoText.vue';
@@ -53,10 +50,7 @@ const networkStore = useNetworkStore();
 /* Composables */
 const router = useRouter();
 const createTooltips = useCreateTooltips();
-const toast = useToast();
-
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
+const withLoader = useLoader();
 
 /* Handlers */
 const handleLogout = async () => {
@@ -77,9 +71,7 @@ const handleLogout = async () => {
 };
 
 /* Hooks */
-onUpdated(() => {
-  createTooltips();
-});
+onUpdated(createTooltips);
 </script>
 
 <template>
@@ -124,7 +116,7 @@ onUpdated(() => {
         "
         class="container-icon"
         data-testid="button-logout"
-        @click="withLoader(handleLogout, toast, globalModalLoaderRef)()"
+        @click="withLoader(handleLogout)"
         data-bs-toggle="tooltip"
         data-bs-trigger="hover"
         data-bs-placement="bottom"
diff --git a/front-end/src/renderer/components/ImportExternalPrivateKeyModal.vue b/front-end/src/renderer/components/ImportExternalPrivateKeyModal.vue
index d15b5f00c..e31568bb3 100644
--- a/front-end/src/renderer/components/ImportExternalPrivateKeyModal.vue
+++ b/front-end/src/renderer/components/ImportExternalPrivateKeyModal.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-import { inject, reactive, watch } from 'vue';
+import { reactive, watch } from 'vue';
 
 import { Prisma } from '@prisma/client';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { generateExternalKeyPairFromString } from '@renderer/services/keyPairService';
 
 import {
+  assertUserLoggedIn,
   getErrorMessage,
   isLoggedInOrganization,
-  isUserLoggedIn,
   safeDuplicateUploadKey,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppModal from '@renderer/components/ui/AppModal.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
@@ -37,9 +35,7 @@ const user = useUserStore();
 
 /* Composables */
 const toast = useToast();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const key = reactive<{ privateKey: string; nickname?: string }>({
@@ -47,18 +43,11 @@ const key = reactive<{ privateKey: string; nickname?: string }>({
 });
 
 const handleImportExternalKey = async () => {
-  /* Verify user is logged in with password */
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter personal password',
-      'Private key/s will be encrypted with this password',
-      handleImportExternalKey,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleImportExternalKey, {
+    subHeading: 'Private key/s will be encrypted with this password',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     const keyPair: Prisma.KeyPairUncheckedCreateInput = {
diff --git a/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeys.vue b/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeys.vue
index 7fd171eca..0edd7f737 100644
--- a/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeys.vue
+++ b/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeys.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { computed, inject, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { hashData } from '@renderer/services/electronUtilsService';
 
-import { getKeysFromSecretHash, isUserLoggedIn } from '@renderer/utils';
-
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import { getKeysFromSecretHash } from '@renderer/utils';
 
 import DecryptKeyModal from '@renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue';
 
@@ -30,9 +27,7 @@ const user = useUserStore();
 
 /* Composables */
 const toast = useToast();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const isDecryptKeyModalShown = ref(false);
@@ -74,17 +69,10 @@ async function process(keyPaths: string[], words: string[] | null) {
   }
 
   /* Verify user is logged in with password */
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter personal password',
-      'Private key/s will be encrypted with this password',
-      nextKey,
-    );
-    return;
-  }
+  const personalPassword = getPassword(nextKey, {
+    subHeading: 'Private key/s will be encrypted with this password',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   await nextKey();
 }
diff --git a/front-end/src/renderer/components/Menu.vue b/front-end/src/renderer/components/Menu.vue
index db41ae33e..e56583dd2 100644
--- a/front-end/src/renderer/components/Menu.vue
+++ b/front-end/src/renderer/components/Menu.vue
@@ -57,21 +57,6 @@ const getMenuItems = (): MenuItem[] => [
     title: 'Files',
     icon: 'bi bi-file-text',
   },
-  // {
-  //   link: '/tokens',
-  //   title: 'Tokens',
-  //   icon: 'bi bi-coin',
-  // },
-  // {
-  //   link: '/smart-contracts',
-  //   title: 'Smart Contracts',
-  //   icon: 'bi bi-arrows-angle-contract',
-  // },
-  // {
-  //   link: '/consensus-service',
-  //   title: 'Consensus Service',
-  //   icon: 'bi bi-shield-check',
-  // },
   {
     link: '/contact-list',
     testid: 'button-contact-list',
@@ -131,9 +116,6 @@ const organizationOnly = ['/contact-list'];
         :class="{ active: $route.path.startsWith('/settings') }"
         ><i class="bi bi-gear"></i><span>Settings</span></RouterLink
       >
-      <!-- <RouterLink class="link-menu mt-2" to="/help"
-        ><i class="bi bi-question-circle"></i><span>Help</span></RouterLink
-      > -->
     </div>
   </div>
 </template>
diff --git a/front-end/src/renderer/components/Organization/AutoLoginInOrganization.vue b/front-end/src/renderer/components/Organization/AutoLoginInOrganization.vue
index 9d8963813..3d638238b 100644
--- a/front-end/src/renderer/components/Organization/AutoLoginInOrganization.vue
+++ b/front-end/src/renderer/components/Organization/AutoLoginInOrganization.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { Organization } from '@prisma/client';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { inject, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
-import { tryAutoSignIn } from '@renderer/services/organizationCredentials';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import { tryAutoSignIn } from '@renderer/services/organizationCredentials';
 
 import { isUserLoggedIn } from '@renderer/utils';
 
@@ -18,8 +17,8 @@ import AppModal from '@renderer/components/ui/AppModal.vue';
 /* Stores */
 const user = useUserStore();
 
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+/* Composables */
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const checked = ref(false);
@@ -55,16 +54,10 @@ async function openPasswordModalIfRequired() {
 
     if (organizationToSignIn.length === 0) return;
 
-    const personalPassword = user.getPassword();
-    if (!personalPassword && !user.personal.useKeychain) {
-      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-      userPasswordModalRef.value?.open(
-        null,
-        'Sign in to your organizations with expired token',
-        handleAutoLogin,
-      );
-      return;
-    }
+    const personalPassword = getPassword(handleAutoLogin, {
+      subHeading: 'Sign in to your organizations with expired token',
+    });
+    if (passwordModalOpened(personalPassword)) return;
 
     await handleAutoLogin(personalPassword || null);
   }
diff --git a/front-end/src/renderer/components/Transaction/Create/FileContents/FileContents.vue b/front-end/src/renderer/components/Transaction/Create/FileContents/FileContents.vue
index 8a51140a1..d4e6c160c 100644
--- a/front-end/src/renderer/components/Transaction/Create/FileContents/FileContents.vue
+++ b/front-end/src/renderer/components/Transaction/Create/FileContents/FileContents.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { HederaFile } from '@prisma/client';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { inject, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { FileContentsQuery, FileId, FileInfoQuery, Hbar, HbarUnit } from '@hashgraph/sdk';
 
 import { DISPLAY_FILE_SIZE_LIMIT } from '@main/shared/constants';
@@ -13,13 +12,14 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 import { useToast } from 'vue-toast-notification';
 import { useRoute } from 'vue-router';
 import useAccountId from '@renderer/composables/useAccountId';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { decryptPrivateKey } from '@renderer/services/keyPairService';
 import { executeQuery } from '@renderer/services/transactionService';
 import { add, getAll, update } from '@renderer/services/filesService';
 
 import {
-  isUserLoggedIn,
+  assertUserLoggedIn,
   isFileId,
   isHederaSpecialFileId,
   formatAccountId,
@@ -27,8 +27,6 @@ import {
   getErrorMessage,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppInput from '@renderer/components/ui/AppInput.vue';
 import AppHbarInput from '@renderer/components/ui/AppHbarInput.vue';
 import AccountIdsSelect from '@renderer/components/AccountIdsSelect.vue';
@@ -42,9 +40,7 @@ const network = useNetworkStore();
 const toast = useToast();
 const payerData = useAccountId();
 const route = useRoute();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const maxQueryFee = ref<Hbar>(new Hbar(2));
@@ -55,17 +51,11 @@ const storedFiles = ref<HederaFile[]>([]);
 
 /* Functions */
 const readFile = async () => {
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to decrypt your keys and sign the transaction',
-      readFile,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(readFile, {
+    subHeading: 'Enter your application password to decrypt your keys and sign the transaction',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     isLoading.value = true;
@@ -126,7 +116,7 @@ const readContent = async (privateKey: string, privateKeyType: string) => {
 };
 
 const updateLocalFileInfo = async (content: string, privateKey: string, privateKeyType: string) => {
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
+  assertUserLoggedIn(user.personal);
 
   try {
     const fileInfoQuery = new FileInfoQuery()
@@ -175,9 +165,7 @@ onMounted(async () => {
     fileId.value = route.query.fileId.toString();
   }
 
-  if (!isUserLoggedIn(user.personal)) {
-    throw Error('User is not logged in');
-  }
+  assertUserLoggedIn(user.personal);
 
   storedFiles.value = await getAll({
     where: {
diff --git a/front-end/src/renderer/components/Transaction/TransactionGroupProcessor.vue b/front-end/src/renderer/components/Transaction/TransactionGroupProcessor.vue
index 46552510d..6ed0f36d0 100644
--- a/front-end/src/renderer/components/Transaction/TransactionGroupProcessor.vue
+++ b/front-end/src/renderer/components/Transaction/TransactionGroupProcessor.vue
@@ -2,9 +2,8 @@
 import type { TransactionApproverDto } from '@main/shared/interfaces/organization/approvers';
 import type { GroupItem } from '@renderer/stores/storeTransactionGroup';
 import type { ApiGroupItem, IGroup } from '@renderer/services/organization';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { computed, nextTick, onBeforeUnmount, ref, inject } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue';
 
 import { Key, KeyList, Transaction, TransactionReceipt, TransactionResponse } from '@hashgraph/sdk';
 import { Prisma } from '@prisma/client';
@@ -14,6 +13,7 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 import useTransactionGroupStore from '@renderer/stores/storeTransactionGroup';
 
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { execute, signTransaction, storeTransaction } from '@renderer/services/transactionService';
 import { decryptPrivateKey, flattenKeyList } from '@renderer/services/keyPairService';
@@ -31,7 +31,6 @@ import {
   getApiGroupById,
 } from '@renderer/services/organization';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
 import { createTransactionId } from '@renderer/utils/sdk';
 
 import {
@@ -67,9 +66,7 @@ const transactionGroup = useTransactionGroupStore();
 
 /* Composables */
 const toast = useToast();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const transactionResult = ref<{
@@ -122,9 +119,7 @@ async function signAfterConfirm() {
     throw new Error('Transaction not provided');
   }
 
-  if (!isUserLoggedIn(user.personal)) {
-    throw new Error('User is not logged in');
-  }
+  assertUserLoggedIn(user.personal);
 
   if (user.selectedOrganization) {
     throw new Error(
@@ -133,17 +128,10 @@ async function signAfterConfirm() {
   }
 
   /* Verifies the user has entered his password */
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    isConfirmShown.value = false;
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to sign the transaction',
-      signAfterConfirm,
-    );
-    return;
-  }
+  const personalPassword = getPassword(signAfterConfirm, {
+    subHeading: 'Enter your application password to sign the transaction',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     isConfirmShown.value = true;
@@ -300,16 +288,10 @@ async function sendSignedTransactionsToOrganization() {
 
   /* Verifies the user has entered his password */
   assertUserLoggedIn(user.personal);
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to sign as a creator',
-      sendSignedTransactionsToOrganization,
-    );
-    return;
-  }
+  const personalPassword = getPassword(signAfterConfirm, {
+    subHeading: 'Enter your application password to sign as a creator',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   /* Verifies there is actual transaction to process */
   if (!transactionGroup.groupItems[0].transactionBytes) throw new Error('No Transactions provided');
diff --git a/front-end/src/renderer/components/Transaction/TransactionProcessor/components/BigFileOrganizationRequestHandler.vue b/front-end/src/renderer/components/Transaction/TransactionProcessor/components/BigFileOrganizationRequestHandler.vue
index f803387a5..54ee0841d 100644
--- a/front-end/src/renderer/components/Transaction/TransactionProcessor/components/BigFileOrganizationRequestHandler.vue
+++ b/front-end/src/renderer/components/Transaction/TransactionProcessor/components/BigFileOrganizationRequestHandler.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { IGroup, TransactionApproverDto } from '@main/shared/interfaces';
 import type { GroupItem } from '@renderer/stores/storeTransactionGroup';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 import { addApprovers, addObservers, type ApiGroupItem } from '@renderer/services/organization';
 import type { Handler, TransactionRequest } from '..';
 
-import { inject, ref } from 'vue';
+import { ref } from 'vue';
 import { Transaction, FileUpdateTransaction, Hbar, Key } from '@hashgraph/sdk';
 
 import { TRANSACTION_MAX_SIZE } from '@main/shared/constants';
@@ -13,7 +12,7 @@ import { TRANSACTION_MAX_SIZE } from '@main/shared/constants';
 import useUserStore from '@renderer/stores/storeUser';
 import useNetworkStore from '@renderer/stores/storeNetwork';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { decryptPrivateKey, flattenKeyList } from '@renderer/services/keyPairService';
 import {
@@ -56,8 +55,8 @@ const emit = defineEmits<{
 const user = useUserStore();
 const network = useNetworkStore();
 
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+/* Composables */
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const nextHandler = ref<Handler | null>(null);
@@ -162,34 +161,21 @@ function createGroupItems(req: TransactionRequest) {
 }
 
 async function signGroupItems(groupItems: GroupItem[]) {
-  const callback = async () => {
-    assertUserLoggedIn(user.personal);
-    const personalPassword = user.getPassword();
-    if (!personalPassword && !user.personal.useKeychain) {
-      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-      userPasswordModalRef.value?.open(
-        'Enter your application password',
-        'Enter your application password to sign as a creator',
-        callback,
-      );
-      return;
-    }
-
-    const keyToSignWith = user.keyPairs[0].public_key;
-    const privateKeyRaw = await decryptPrivateKey(
-      user.personal.id,
-      personalPassword,
-      keyToSignWith,
-    );
-    const privateKey = getPrivateKey(keyToSignWith, privateKeyRaw);
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(signGroupItems.bind(null, groupItems), {
+    subHeading: 'Enter your application password to sign as a creator',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
-    await submitGroup(
-      groupItems,
-      groupItems.map(g => uint8ToHex(privateKey.sign(g.transactionBytes))),
-      keyToSignWith,
-    );
-  };
-  await callback();
+  const keyToSignWith = user.keyPairs[0].public_key;
+  const privateKeyRaw = await decryptPrivateKey(user.personal.id, personalPassword, keyToSignWith);
+  const privateKey = getPrivateKey(keyToSignWith, privateKeyRaw);
+
+  await submitGroup(
+    groupItems,
+    groupItems.map(g => uint8ToHex(privateKey.sign(g.transactionBytes))),
+    keyToSignWith,
+  );
 }
 
 async function submitGroup(groupItems: GroupItem[], signature: string[], keyToSignWith: string) {
diff --git a/front-end/src/renderer/components/Transaction/TransactionProcessor/components/ConfirmTransactionHandler.vue b/front-end/src/renderer/components/Transaction/TransactionProcessor/components/ConfirmTransactionHandler.vue
index f11606037..8cb35c1e4 100644
--- a/front-end/src/renderer/components/Transaction/TransactionProcessor/components/ConfirmTransactionHandler.vue
+++ b/front-end/src/renderer/components/Transaction/TransactionProcessor/components/ConfirmTransactionHandler.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 import type { Handler, TransactionRequest } from '..';
 
-import { computed, inject, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { Transaction } from '@hashgraph/sdk';
 
-import useUserStore from '@renderer/stores/storeUser';
 import useNetworkStore from '@renderer/stores/storeNetwork';
 
-import { getDollarAmount } from '@renderer/services/mirrorNodeDataService';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
-import { assertUserLoggedIn, getTransactionType, stringifyHbar } from '@renderer/utils';
+import { getDollarAmount } from '@renderer/services/mirrorNodeDataService';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import { getTransactionType, stringifyHbar } from '@renderer/utils';
 
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppModal from '@renderer/components/ui/AppModal.vue';
@@ -24,10 +22,9 @@ defineProps<{
 
 /* Stores */
 const network = useNetworkStore();
-const user = useUserStore();
 
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+/* Composables */
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const request = ref<TransactionRequest | null>(null);
@@ -61,32 +58,16 @@ function setShow(value: boolean) {
 }
 
 /* Handlers */
-const handleConfirmTransaction = async (e: Event) => {
-  e.preventDefault();
-
-  const hasPassword = assertPassword();
-  if (!hasPassword) return;
+const handleConfirmTransaction = async () => {
+  const personalPassword = getPassword(next, {
+    subHeading: 'Enter your application password to sign the transaction',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   await next();
 };
 
 /* Functions */
-function assertPassword() {
-  assertUserLoggedIn(user.personal);
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    show.value = false;
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to sign the transaction',
-      next,
-    );
-    return false;
-  }
-
-  return true;
-}
 
 function reset() {
   request.value = null;
@@ -110,7 +91,7 @@ defineExpose({
       <div class="text-center">
         <i class="bi bi-arrow-left-right large-icon"></i>
       </div>
-      <form v-if="transaction" @submit="handleConfirmTransaction">
+      <form v-if="transaction" @submit.prevent="handleConfirmTransaction">
         <h3 class="text-center text-title text-bold mt-5">Confirm Transaction</h3>
         <div class="container-main-bg text-small p-4 mt-5">
           <div class="d-flex justify-content-between p-3">
diff --git a/front-end/src/renderer/components/UserModeSelect.vue b/front-end/src/renderer/components/UserModeSelect.vue
index 3ee78c9d1..3dd681983 100644
--- a/front-end/src/renderer/components/UserModeSelect.vue
+++ b/front-end/src/renderer/components/UserModeSelect.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import type { Organization } from '@prisma/client';
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
 
-import { computed, inject, onMounted, onUpdated, ref, watch } from 'vue';
+import { computed, onMounted, onUpdated, ref, watch } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 import useNotificationsStore from '@renderer/stores/storeNotifications';
 
+import useLoader from '@renderer/composables/useLoader';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
-import { useToast } from 'vue-toast-notification';
-
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
-
-import { withLoader } from '@renderer/utils';
 
 import AddOrganizationModal from '@renderer/components/Organization/AddOrganizationModal.vue';
 import AppButton from '@renderer/components/ui/AppButton.vue';
@@ -25,11 +20,8 @@ const user = useUserStore();
 const notifications = useNotificationsStore();
 
 /* Composables */
+const withLoader = useLoader();
 const createTooltips = useCreateTooltips();
-const toast = useToast();
-
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
 
 /* State */
 const selectedMode = ref<string>('personal');
@@ -169,14 +161,7 @@ watch(() => user.selectedOrganization, initialize);
           data-testid="dropdown-item-0"
           data-value="personal"
           class="dropdown-item cursor-pointer"
-          @click="
-            withLoader(
-              handleUserModeChange.bind(null, $event),
-              toast,
-              globalModalLoaderRef,
-              'Failed to select user mode',
-            )()
-          "
+          @click="withLoader(handleUserModeChange.bind(null, $event), 'Failed to select user mode')"
         >
           <span class="text-small">{{ personalModeText }}</span>
         </li>
@@ -185,12 +170,7 @@ watch(() => user.selectedOrganization, initialize);
             :data-testid="'dropdown-item-' + (index + 1)"
             class="dropdown-item cursor-pointer mt-3"
             @click="
-              withLoader(
-                handleUserModeChange.bind(null, $event),
-                toast,
-                globalModalLoaderRef,
-                'Failed to select user mode',
-              )()
+              withLoader(handleUserModeChange.bind(null, $event), 'Failed to select user mode')
             "
             :data-value="organization.id"
           >
diff --git a/front-end/src/renderer/composables/useLoader.ts b/front-end/src/renderer/composables/useLoader.ts
new file mode 100644
index 000000000..39ee310de
--- /dev/null
+++ b/front-end/src/renderer/composables/useLoader.ts
@@ -0,0 +1,37 @@
+import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
+
+import { inject } from 'vue';
+
+import { useToast } from 'vue-toast-notification';
+
+import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
+
+export default function useLoader() {
+  /* Composables */
+  const toast = useToast();
+
+  /* Injected */
+  const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
+
+  /* Actions */
+  async function withLoader(
+    fn: () => any,
+    defaultErrorMessage = 'Failed to perform operation',
+    timeout = 10000, // default timeout of 10 seconds
+  ) {
+    const timeoutPromise = new Promise((_, reject) =>
+      setTimeout(() => reject(new Error('Operation timed out')), timeout),
+    );
+
+    try {
+      globalModalLoaderRef?.value?.open();
+      return await Promise.race([fn(), timeoutPromise]);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : defaultErrorMessage);
+    } finally {
+      globalModalLoaderRef?.value?.close();
+    }
+  }
+
+  return withLoader;
+}
diff --git a/front-end/src/renderer/composables/usePersonalPassword.ts b/front-end/src/renderer/composables/usePersonalPassword.ts
new file mode 100644
index 000000000..6f29adefe
--- /dev/null
+++ b/front-end/src/renderer/composables/usePersonalPassword.ts
@@ -0,0 +1,54 @@
+import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
+
+import { inject } from 'vue';
+
+import useUserStore from '@renderer/stores/storeUser';
+
+import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+
+import { assertUserLoggedIn } from '@renderer/utils';
+
+export default function usePersonalPassword() {
+  /* Types */
+  type PersonalPasswordResult = string | null | false;
+
+  /* Composables */
+  const user = useUserStore();
+
+  /* Injected */
+  const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+
+  /* Actions */
+  function getPassword(
+    callback: (password: string) => void,
+    modalOptions?: {
+      heading?: string | null;
+      subHeading?: string | null;
+    },
+  ): PersonalPasswordResult {
+    assertUserLoggedIn(user.personal);
+
+    const personalPassword = user.getPassword();
+
+    if (!personalPassword && !user.personal.useKeychain) {
+      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
+      userPasswordModalRef.value?.open(
+        modalOptions?.heading || 'Enter your application password',
+        modalOptions?.subHeading || null,
+        callback,
+      );
+      return false;
+    }
+
+    return personalPassword;
+  }
+
+  function passwordModalOpened(
+    personalPasswordResult: PersonalPasswordResult,
+  ): personalPasswordResult is false {
+    if (personalPasswordResult === false) return true;
+    return false;
+  }
+
+  return { getPassword, passwordModalOpened };
+}
diff --git a/front-end/src/renderer/composables/useSetDynamicLayout.ts b/front-end/src/renderer/composables/useSetDynamicLayout.ts
index e8886db1c..7a8c6983a 100644
--- a/front-end/src/renderer/composables/useSetDynamicLayout.ts
+++ b/front-end/src/renderer/composables/useSetDynamicLayout.ts
@@ -4,6 +4,8 @@ import { inject, onBeforeMount } from 'vue';
 
 import { DYNAMIC_LAYOUT_KEY, setSettings } from '@renderer/providers';
 
+export { DEFAULT_LAYOUT, LOGGED_IN_LAYOUT, ACCOUNT_SETUP_LAYOUT } from '@renderer/providers';
+
 export default function useSetDynamicLayout(settings: DYNAMIC_LAYOUT_TYPE) {
   /* Injected */
   const dynamicLayout = inject<DYNAMIC_LAYOUT_TYPE>(DYNAMIC_LAYOUT_KEY);
diff --git a/front-end/src/renderer/pages/AccountSetup/AccountSetup.vue b/front-end/src/renderer/pages/AccountSetup/AccountSetup.vue
index 16fd5f2b2..d0e2fc46f 100644
--- a/front-end/src/renderer/pages/AccountSetup/AccountSetup.vue
+++ b/front-end/src/renderer/pages/AccountSetup/AccountSetup.vue
@@ -7,7 +7,9 @@ import { onBeforeRouteLeave } from 'vue-router';
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useRouter } from 'vue-router';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, {
+  ACCOUNT_SETUP_LAYOUT,
+} from '@renderer/composables/useSetDynamicLayout';
 
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppStepper from '@renderer/components/ui/AppStepper.vue';
@@ -26,11 +28,7 @@ const user = useUserStore();
 
 /* Composables */
 const router = useRouter();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: true,
-  showMenu: false,
-});
+useSetDynamicLayout(ACCOUNT_SETUP_LAYOUT);
 
 /* State */
 const keyPairsComponent = ref<InstanceType<typeof KeyPairs> | null>(null);
diff --git a/front-end/src/renderer/pages/AccountSetup/components/KeyPairs.vue b/front-end/src/renderer/pages/AccountSetup/components/KeyPairs.vue
index e3c781d74..94bf855d1 100644
--- a/front-end/src/renderer/pages/AccountSetup/components/KeyPairs.vue
+++ b/front-end/src/renderer/pages/AccountSetup/components/KeyPairs.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { KeyPair } from '@prisma/client';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 import type { ConnectedOrganization } from '@renderer/types';
 
-import { inject, onBeforeMount, onUpdated, ref } from 'vue';
+import { onBeforeMount, onUpdated, ref } from 'vue';
 
 import { Prisma } from '@prisma/client';
 
@@ -12,16 +11,15 @@ import useUserStore from '@renderer/stores/storeUser';
 import { useToast } from 'vue-toast-notification';
 import { useRouter } from 'vue-router';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { restorePrivateKey } from '@renderer/services/keyPairService';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import {
+  assertUserLoggedIn,
   getErrorMessage,
   getWidthOfElementWithText,
   isLoggedInOrganization,
-  isUserLoggedIn,
   restoreOrganizationKeys,
   safeAwait,
   safeDuplicateUploadKey,
@@ -48,9 +46,7 @@ const user = useUserStore();
 const toast = useToast();
 const router = useRouter();
 const createTooltips = useCreateTooltips();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const nickname = ref(props.selectedPersonalKeyPair?.nickname || '');
@@ -168,17 +164,11 @@ const setPrivateKeyStarCount = () => {
 const handleSave = async () => {
   if (keys.value.length === 0) throw Error('No key pairs to save');
 
-  if (!isUserLoggedIn(user.personal)) throw Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter personal password',
-      'Private key/s will be encrypted with this password',
-      handleSave,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleSave, {
+    subHeading: 'Private key/s will be encrypted with this password',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   let storedCount = 0;
   for (let i = 0; i < keys.value.length; i++) {
@@ -226,7 +216,6 @@ const handleSave = async () => {
     toast.success(`Key Pair${storedCount > 1 ? 's' : ''} saved successfully`);
   }
   router.push({ name: 'settingsKeys' });
-
   await user.refetchUserState();
 };
 
diff --git a/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue b/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue
index e0fe6ad2c..ba14d1fff 100644
--- a/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue
+++ b/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { inject, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 import useContactsStore from '@renderer/stores/storeContacts';
 import useNotificationsStore from '@renderer/stores/storeNotifications';
 
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { changePassword } from '@renderer/services/organization/auth';
 import { updateOrganizationCredentials } from '@renderer/services/organizationCredentials';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
-import { getErrorMessage, isLoggedInOrganization, isUserLoggedIn } from '@renderer/utils';
+import { assertIsLoggedInOrganization, assertUserLoggedIn, getErrorMessage } from '@renderer/utils';
 
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
@@ -31,9 +28,7 @@ const notifications = useNotificationsStore();
 
 /* Composables */
 const toast = useToast();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const currentPassword = ref('');
@@ -54,21 +49,12 @@ const handleFormSubmit = async (event: Event) => {
 };
 
 const handleChangePassword = async () => {
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter personal password',
-      'New password will be encrypted with this password',
-      handleChangePassword,
-    );
-    return;
-  }
-
-  if (!isLoggedInOrganization(user.selectedOrganization)) {
-    throw new Error('User is not logged in an organization.');
-  }
+  assertIsLoggedInOrganization(user.selectedOrganization);
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleChangePassword, {
+    subHeading: 'New password will be encrypted with this password',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   currentPasswordInvalid.value = currentPassword.value.trim().length === 0;
   newPasswordInvalid.value = newPassword.value.trim().length < 8;
diff --git a/front-end/src/renderer/pages/Accounts/Accounts.vue b/front-end/src/renderer/pages/Accounts/Accounts.vue
index 4383e1058..2e8803d6c 100644
--- a/front-end/src/renderer/pages/Accounts/Accounts.vue
+++ b/front-end/src/renderer/pages/Accounts/Accounts.vue
@@ -10,7 +10,7 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 
 import { useToast } from 'vue-toast-notification';
 import useAccountId from '@renderer/composables/useAccountId';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { getAll, remove, changeNickname } from '@renderer/services/accountsService';
 import { getKeyListLevels } from '@renderer/services/keyPairService';
@@ -34,11 +34,7 @@ const network = useNetworkStore();
 /* Composables */
 const toast = useToast();
 const accountData = useAccountId();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const accounts = ref<HederaAccount[]>([]);
diff --git a/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue b/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue
index 296ebfbc7..d8085a52f 100644
--- a/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue
+++ b/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue
@@ -8,7 +8,7 @@ import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
 import useAccountId from '@renderer/composables/useAccountId';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { add } from '@renderer/services/accountsService';
 
@@ -25,11 +25,7 @@ const network = useNetworkStore();
 const router = useRouter();
 const toast = useToast();
 useCreateTooltips();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const accountData = useAccountId();
diff --git a/front-end/src/renderer/pages/ConsensusService/ConsensusService.vue b/front-end/src/renderer/pages/ConsensusService/ConsensusService.vue
deleted file mode 100644
index 80946abde..000000000
--- a/front-end/src/renderer/pages/ConsensusService/ConsensusService.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="p-5">
-    <h1 class="text-title text-bold">Consensus Service</h1>
-  </div>
-</template>
diff --git a/front-end/src/renderer/pages/ConsensusService/index.ts b/front-end/src/renderer/pages/ConsensusService/index.ts
deleted file mode 100644
index 0b9e3d5bb..000000000
--- a/front-end/src/renderer/pages/ConsensusService/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ConsensusService from './ConsensusService.vue';
-
-export default ConsensusService;
diff --git a/front-end/src/renderer/pages/ContactList/ContactList.vue b/front-end/src/renderer/pages/ContactList/ContactList.vue
index e582566de..711586933 100644
--- a/front-end/src/renderer/pages/ContactList/ContactList.vue
+++ b/front-end/src/renderer/pages/ContactList/ContactList.vue
@@ -10,7 +10,7 @@ import useContactsStore from '@renderer/stores/storeContacts';
 
 import { useToast } from 'vue-toast-notification';
 import useRedirectOnOnlyOrganization from '@renderer/composables/useRedirectOnOnlyOrganization';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { deleteUser } from '@renderer/services/organization';
 import { removeContact } from '@renderer/services/contactsService';
@@ -31,11 +31,7 @@ const contacts = useContactsStore();
 /* Composables */
 const toast = useToast();
 useRedirectOnOnlyOrganization();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const fetching = ref(false);
diff --git a/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue b/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue
index f218ab708..ca49199f1 100644
--- a/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue
+++ b/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue
@@ -5,7 +5,7 @@ import useUserStore from '@renderer/stores/storeUser';
 
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { signUp } from '@renderer/services/organization';
 import { addContact } from '@renderer/services/contactsService';
@@ -21,11 +21,7 @@ const user = useUserStore();
 /* Composables */
 const router = useRouter();
 const toast = useToast();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const email = ref('');
diff --git a/front-end/src/renderer/pages/CreateTransaction/CreateTransaction.vue b/front-end/src/renderer/pages/CreateTransaction/CreateTransaction.vue
index a23d207a9..7d8c2ab9a 100644
--- a/front-end/src/renderer/pages/CreateTransaction/CreateTransaction.vue
+++ b/front-end/src/renderer/pages/CreateTransaction/CreateTransaction.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import txTypeComponentMapping from '@renderer/components/Transaction/Create/txTypeComponentMapping';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 /* Composables */
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 </script>
 
 <template>
diff --git a/front-end/src/renderer/pages/CreateTransactionGroup/CreateTransactionGroup.vue b/front-end/src/renderer/pages/CreateTransactionGroup/CreateTransactionGroup.vue
index 03507adac..0cf144466 100644
--- a/front-end/src/renderer/pages/CreateTransactionGroup/CreateTransactionGroup.vue
+++ b/front-end/src/renderer/pages/CreateTransactionGroup/CreateTransactionGroup.vue
@@ -9,7 +9,7 @@ import useTransactionGroupStore from '@renderer/stores/storeTransactionGroup';
 import { useToast } from 'vue-toast-notification';
 import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
 import useAccountId from '@renderer/composables/useAccountId';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { deleteGroup } from '@renderer/services/transactionGroupsService';
 
@@ -40,11 +40,7 @@ const router = useRouter();
 const route = useRoute();
 const toast = useToast();
 const payerData = useAccountId();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const groupDescription = ref('');
diff --git a/front-end/src/renderer/pages/Files/Files.vue b/front-end/src/renderer/pages/Files/Files.vue
index b48a1900b..fe63c8433 100644
--- a/front-end/src/renderer/pages/Files/Files.vue
+++ b/front-end/src/renderer/pages/Files/Files.vue
@@ -14,7 +14,7 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 
 import { useToast } from 'vue-toast-notification';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { getAll, remove, showStoredFileInTemp, update } from '@renderer/services/filesService';
 import { flattenKeyList, getKeyListLevels } from '@renderer/services/keyPairService';
@@ -37,11 +37,7 @@ const network = useNetworkStore();
 
 /* Composables */
 const createTooltips = useCreateTooltips();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 // const specialFiles: HederaFile[] = [
 //   {
diff --git a/front-end/src/renderer/pages/ForgotPassword/ForgotPassword.vue b/front-end/src/renderer/pages/ForgotPassword/ForgotPassword.vue
deleted file mode 100644
index 279ca06b8..000000000
--- a/front-end/src/renderer/pages/ForgotPassword/ForgotPassword.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { useRouter } from 'vue-router';
-
-import AppButton from '@renderer/components/ui/AppButton.vue';
-import AppInput from '@renderer/components/ui/AppInput.vue';
-
-/* Composables */
-const router = useRouter();
-
-/* State */
-const inputEmail = ref('');
-
-/* Handlers */
-const handleFormSubmit = (event: Event) => {
-  event.preventDefault();
-
-  // SEND BACK END PASSWORD RESET REQUEST FOR ENTERED EMAIL
-
-  router.push({ name: 'login' });
-};
-</script>
-
-<template>
-  <div class="new-password-page p-10 d-flex flex-column justify-content-center align-items-center">
-    <h1 class="text-display text-bold text-center">Forgot Password</h1>
-    <p class="text-main mt-5 text-center">Please enter your email</p>
-    <form
-      @submit="handleFormSubmit"
-      class="mt-5 w-100 d-flex flex-column justify-content-center align-items-center gap-4"
-    >
-      <div class="col-12 col-md-8 col-lg-6 col-xxl-4">
-        <AppInput v-model="inputEmail" :filled="true" placeholder="Enter your email" />
-      </div>
-      <div class="col-12 col-md-8 col-lg-6 col-xxl-4">
-        <AppButton
-          color="primary"
-          size="large"
-          type="submit"
-          class="w-100"
-          :disabled="inputEmail.length === 0"
-          >Continue</AppButton
-        >
-      </div>
-    </form>
-  </div>
-</template>
diff --git a/front-end/src/renderer/pages/ForgotPassword/index.ts b/front-end/src/renderer/pages/ForgotPassword/index.ts
deleted file mode 100644
index 378e06090..000000000
--- a/front-end/src/renderer/pages/ForgotPassword/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ForgotPassword from './ForgotPassword.vue';
-
-export default ForgotPassword;
diff --git a/front-end/src/renderer/pages/Help/Help.vue b/front-end/src/renderer/pages/Help/Help.vue
deleted file mode 100644
index 4db317d84..000000000
--- a/front-end/src/renderer/pages/Help/Help.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="p-5">
-    <h1 class="text-title text-bold">Help</h1>
-  </div>
-</template>
diff --git a/front-end/src/renderer/pages/Help/index.ts b/front-end/src/renderer/pages/Help/index.ts
deleted file mode 100644
index e66b1b220..000000000
--- a/front-end/src/renderer/pages/Help/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Help from './Help.vue';
-
-export default Help;
diff --git a/front-end/src/renderer/pages/Migrate/Migrate.vue b/front-end/src/renderer/pages/Migrate/Migrate.vue
index 9bf62167a..cfaf5c334 100644
--- a/front-end/src/renderer/pages/Migrate/Migrate.vue
+++ b/front-end/src/renderer/pages/Migrate/Migrate.vue
@@ -9,7 +9,7 @@ import { MIGRATION_STARTED } from '@main/shared/constants';
 
 import useUserStore from '@renderer/stores/storeUser';
 
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { DEFAULT_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 import { useRouter } from 'vue-router';
 
 import { resetDataLocal } from '@renderer/services/userService';
@@ -32,12 +32,8 @@ type StepName = 'recoveryPhrase' | 'personal' | 'organization' | 'summary';
 const user = useUserStore();
 
 /* Composables */
-useSetDynamicLayout({
-  loggedInClass: false,
-  shouldSetupAccountClass: false,
-  showMenu: false,
-});
 const router = useRouter();
+useSetDynamicLayout(DEFAULT_LAYOUT);
 
 /* State */
 const step = ref<StepName>('recoveryPhrase');
diff --git a/front-end/src/renderer/pages/OrganizationLogin/OrganizationLogin.vue b/front-end/src/renderer/pages/OrganizationLogin/OrganizationLogin.vue
index 95c5cf783..d85260c48 100644
--- a/front-end/src/renderer/pages/OrganizationLogin/OrganizationLogin.vue
+++ b/front-end/src/renderer/pages/OrganizationLogin/OrganizationLogin.vue
@@ -1,24 +1,18 @@
 <script setup lang="ts">
-import type { GLOBAL_MODAL_LOADER_TYPE, USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-import { inject, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useLoader from '@renderer/composables/useLoader';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
+import useSetDynamicLayout, { DEFAULT_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { login } from '@renderer/services/organization';
 import { addOrganizationCredentials } from '@renderer/services/organizationCredentials';
 
-import {
-  getErrorMessage,
-  isLoggedOutOrganization,
-  isUserLoggedIn,
-  withLoader,
-} from '@renderer/utils';
-
-import { GLOBAL_MODAL_LOADER_KEY, USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import { assertUserLoggedIn, getErrorMessage, isLoggedOutOrganization } from '@renderer/utils';
 
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
@@ -30,15 +24,9 @@ const user = useUserStore();
 /* Composables */
 const router = useRouter();
 const toast = useToast();
-useSetDynamicLayout({
-  loggedInClass: false,
-  shouldSetupAccountClass: false,
-  showMenu: false,
-});
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
+const withLoader = useLoader();
+useSetDynamicLayout(DEFAULT_LAYOUT);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const loading = ref(false);
@@ -58,20 +46,15 @@ const handleOnFormSubmit = async (e: Event) => {
 };
 
 const handleLogin = async () => {
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to encrypt your organization credentials',
-      handleLogin,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleLogin, {
+    subHeading: 'Enter your application password to encrypt your organization credentials',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
-  if (!isLoggedOutOrganization(user.selectedOrganization))
+  if (!isLoggedOutOrganization(user.selectedOrganization)) {
     throw new Error('Please select active organization');
+  }
 
   try {
     loading.value = true;
@@ -95,15 +78,8 @@ const handleLogin = async () => {
 
     loading.value = false;
 
-    await withLoader(
-      async () => {
-        await user.refetchOrganizations();
-      },
-      toast,
-      globalModalLoaderRef?.value,
-      'Failed to change user mode',
-    )();
-  } catch (error: unknown) {
+    await withLoader(user.refetchOrganizations, 'Failed to change user mode');
+  } catch (error: any) {
     inputEmailInvalid.value = true;
     inputPasswordInvalid.value = true;
     toast.error(getErrorMessage(error, 'Failed to sign in'));
@@ -113,14 +89,6 @@ const handleLogin = async () => {
 };
 
 const handleForgotPassword = () => {
-  // const personalPassword = user.getPassword();
-  // if (!personalPassword) {
-  //   if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-  //   userPasswordModalRef.value?.open('Enter personal password', null, handleForgotPassword);
-  // } else {
-  //   forgotPasswordModalShown.value = true;
-  // }
-
   forgotPasswordModalShown.value = true;
 };
 
diff --git a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
index f03b53be0..c4ef62db1 100644
--- a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
+++ b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { inject, onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
 import { PrivateKey } from '@hashgraph/sdk';
 import { Prisma } from '@prisma/client';
 
@@ -9,20 +7,20 @@ import useUserStore from '@renderer/stores/storeUser';
 
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { restorePrivateKey } from '@renderer/services/keyPairService';
 
 import {
+  assertUserLoggedIn,
   getErrorMessage,
   getSecretHashFromLocalKeys,
   getSecretHashFromUploadedKeys,
   isLoggedInOrganization,
-  isUserLoggedIn,
   safeDuplicateUploadKey,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
 import Import from '@renderer/pages/AccountSetup/components/Import.vue';
@@ -33,9 +31,8 @@ const user = useUserStore();
 /* Composables */
 const toast = useToast();
 const router = useRouter();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const step = ref(0);
@@ -107,17 +104,11 @@ const handleRestoreKey = async () => {
 };
 
 const handleSaveKey = async () => {
-  if (!isUserLoggedIn(user.personal)) throw Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to decrypt your key',
-      handleSaveKey,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleSaveKey, {
+    subHeading: 'Enter your application password to decrypt your key',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   if (!restoredKey.value) {
     throw new Error('Restored key not found');
diff --git a/front-end/src/renderer/pages/RestoreMissingKeys/RestoreMissingKeys.vue b/front-end/src/renderer/pages/RestoreMissingKeys/RestoreMissingKeys.vue
index 713e6964e..8889969ef 100644
--- a/front-end/src/renderer/pages/RestoreMissingKeys/RestoreMissingKeys.vue
+++ b/front-end/src/renderer/pages/RestoreMissingKeys/RestoreMissingKeys.vue
@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { inject, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import {
   assertIsLoggedInOrganization,
+  assertUserLoggedIn,
   getErrorMessage,
-  isUserLoggedIn,
   restoreOrganizationKeys,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import Import from '@renderer/pages/AccountSetup/components/Import.vue';
 
@@ -26,9 +24,8 @@ const user = useUserStore();
 /* Composables */
 const toast = useToast();
 const router = useRouter();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const step = ref(0);
@@ -72,17 +69,11 @@ const storeKeys = async (
     mnemonicHash: string;
   }[],
 ) => {
-  if (!isUserLoggedIn(user.personal)) throw Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to decrypt your key',
-      storeKeys.bind(this, keys),
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(storeKeys.bind(this, keys), {
+    subHeading: 'Enter your application password to decrypt your key',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   let restoredKeys = 0;
   for (const key of keys) {
diff --git a/front-end/src/renderer/pages/Settings/Settings.vue b/front-end/src/renderer/pages/Settings/Settings.vue
index dbce2bdfd..c881188d7 100644
--- a/front-end/src/renderer/pages/Settings/Settings.vue
+++ b/front-end/src/renderer/pages/Settings/Settings.vue
@@ -8,7 +8,7 @@ import { RESTORE_KEY } from '@renderer/router';
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useRouter, RouterView } from 'vue-router';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { isLoggedInOrganization } from '@renderer/utils';
 
@@ -21,11 +21,7 @@ const user = useUserStore();
 
 /* Composables */
 const router = useRouter();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* Misc */
 const generalTitle = 'General';
diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
index edf26296f..f6c087beb 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { Network } from '@main/shared/interfaces';
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
 
-import { computed, inject, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
 
 import { SELECTED_NETWORK } from '@main/shared/constants';
 import { CommonNetwork, CommonNetworkNames } from '@main/shared/enums';
@@ -10,13 +9,11 @@ import { CommonNetwork, CommonNetworkNames } from '@main/shared/enums';
 import useUserStore from '@renderer/stores/storeUser';
 import useNetworkStore from '@renderer/stores/storeNetwork';
 
-import { useToast } from 'vue-toast-notification';
-
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
+import useLoader from '@renderer/composables/useLoader';
 
 import { add, getStoredClaim, update } from '@renderer/services/claimService';
 
-import { isUserLoggedIn, withLoader } from '@renderer/utils';
+import { isUserLoggedIn } from '@renderer/utils';
 
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
@@ -26,10 +23,7 @@ const user = useUserStore();
 const networkStore = useNetworkStore();
 
 /* Composables */
-const toast = useToast();
-
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
+const withLoader = useLoader();
 
 /* State */
 const mirrorNodeInputRef = ref<InstanceType<typeof AppInput> | null>(null);
@@ -106,12 +100,7 @@ const forceSetMirrorNodeBaseURL = async (value: string) => {
 };
 
 const applyCustomNetwork = async () => {
-  await withLoader(
-    () => handleMirrorNodeBaseURLChange(),
-    toast,
-    globalModalLoaderRef?.value,
-    'Failed to update network',
-  )();
+  await withLoader(handleMirrorNodeBaseURLChange, 'Failed to update network');
 };
 
 /* Hooks */
diff --git a/front-end/src/renderer/pages/Settings/components/KeysTab.vue b/front-end/src/renderer/pages/Settings/components/KeysTab.vue
index eed0d6903..8fee7f459 100644
--- a/front-end/src/renderer/pages/Settings/components/KeysTab.vue
+++ b/front-end/src/renderer/pages/Settings/components/KeysTab.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { computed, inject, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { PublicKey } from '@hashgraph/sdk';
 
 import { RESTORE_MISSING_KEYS } from '@renderer/router';
@@ -11,6 +9,7 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 
 import { useToast } from 'vue-toast-notification';
 import { useRouter } from 'vue-router';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { CommonNetwork } from '@main/shared/enums';
 
@@ -24,8 +23,6 @@ import {
   safeAwait,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppCustomIcon from '@renderer/components/ui/AppCustomIcon.vue';
 import AppDropDown from '@renderer/components/ui/AppDropDown.vue';
@@ -39,9 +36,7 @@ const network = useNetworkStore();
 /* Composables */
 const toast = useToast();
 const router = useRouter();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 enum Tabs {
   ALL = 'All',
@@ -117,16 +112,10 @@ const handleTabChange = (tab: Tabs) => {
 const decrypt = async () => {
   try {
     assertUserLoggedIn(user.personal);
-    const personalPassword = user.getPassword();
-    if (!personalPassword && !user.personal.useKeychain) {
-      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-      userPasswordModalRef.value?.open(
-        'Enter your application password',
-        'Enter your application password to decrypt your key',
-        decrypt,
-      );
-      return;
-    }
+    const personalPassword = getPassword(decrypt, {
+      subHeading: 'Enter your application password to decrypt your key',
+    });
+    if (passwordModalOpened(personalPassword)) return;
 
     const keyFromDecrypted = decryptedKeys.value.find(
       kp => kp.publicKey === publicKeysPrivateKeyToDecrypt.value,
@@ -303,7 +292,6 @@ watch(isDeletingKey, () => {
             toggler-icon
             color-on-active
           />
-
           <AppButton
             v-if="
               currentTab === Tabs.RECOVERY_PHRASE &&
diff --git a/front-end/src/renderer/pages/Settings/components/ProfileTab.vue b/front-end/src/renderer/pages/Settings/components/ProfileTab.vue
index d2cfb4e50..70f7f45fa 100644
--- a/front-end/src/renderer/pages/Settings/components/ProfileTab.vue
+++ b/front-end/src/renderer/pages/Settings/components/ProfileTab.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { inject, ref } from 'vue';
+import { ref } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useToast } from 'vue-toast-notification';
 import { useRouter } from 'vue-router';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { changePassword, resetDataLocal } from '@renderer/services/userService';
 import { changePassword as organizationChangePassword } from '@renderer/services/organization/auth';
 import { updateOrganizationCredentials } from '@renderer/services/organizationCredentials';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
-import { getErrorMessage, isLoggedInOrganization, isUserLoggedIn } from '@renderer/utils';
+import {
+  assertUserLoggedIn,
+  getErrorMessage,
+  isLoggedInOrganization,
+  isUserLoggedIn,
+} from '@renderer/utils';
 
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppModal from '@renderer/components/ui/AppModal.vue';
@@ -27,9 +29,7 @@ const user = useUserStore();
 /* Composables */
 const toast = useToast();
 const router = useRouter();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const currentPassword = ref('');
@@ -45,24 +45,16 @@ const handleChangePassword = async () => {
   try {
     isChangingPassword.value = true;
 
-    if (!isUserLoggedIn(user.personal)) {
-      throw new Error('User is not logged in');
-    }
+    assertUserLoggedIn(user.personal);
 
     if (currentPassword.value.length === 0 || newPassword.value.length === 0) {
       throw new Error('Password cannot be empty');
     }
     if (isLoggedInOrganization(user.selectedOrganization)) {
-      const personalPassword = user.getPassword();
-      if (!personalPassword && !user.personal.useKeychain) {
-        if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-        userPasswordModalRef.value?.open(
-          'Enter your application password',
-          'Enter your application password to encrpyt your organization credentials',
-          handleChangePassword,
-        );
-        return;
-      }
+      const personalPassword = getPassword(handleChangePassword, {
+        subHeading: 'Enter your application password to encrpyt your organization credentials',
+      });
+      if (passwordModalOpened(personalPassword)) return;
 
       await organizationChangePassword(
         user.selectedOrganization.serverUrl,
diff --git a/front-end/src/renderer/pages/SmartContracts/SmartContracts.vue b/front-end/src/renderer/pages/SmartContracts/SmartContracts.vue
deleted file mode 100644
index 511f7804d..000000000
--- a/front-end/src/renderer/pages/SmartContracts/SmartContracts.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="p-5">
-    <h1 class="text-title text-bold">Smart Contracts</h1>
-  </div>
-</template>
diff --git a/front-end/src/renderer/pages/SmartContracts/index.ts b/front-end/src/renderer/pages/SmartContracts/index.ts
deleted file mode 100644
index e9b8b1980..000000000
--- a/front-end/src/renderer/pages/SmartContracts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import SmartContracts from './SmartContracts.vue';
-
-export default SmartContracts;
diff --git a/front-end/src/renderer/pages/Tokens/Tokens.vue b/front-end/src/renderer/pages/Tokens/Tokens.vue
deleted file mode 100644
index 2cc1e59c7..000000000
--- a/front-end/src/renderer/pages/Tokens/Tokens.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import axios from 'axios';
-import { onBeforeMount, ref } from 'vue';
-
-import useNetworkStore from '@renderer/stores/storeNetwork';
-
-// import AppButton from '@renderer/components/ui/AppButton.vue';
-
-interface ITransaction {
-  transaction_id: string;
-  consensus_timestamp: string;
-  name: string;
-  result: string;
-  transaction_hash: string;
-  entity_id: string;
-}
-
-const networkStore = useNetworkStore();
-
-const transactionsFetched = ref<ITransaction[]>([]);
-const isLoading = ref(false);
-
-onBeforeMount(async () => {
-  isLoading.value = true;
-  try {
-    const {
-      data: { transactions },
-    } = await axios.get(`${networkStore.mirrorNodeBaseURL}/transactions`);
-    transactionsFetched.value = transactions;
-  } catch (error) {
-    console.log('error', error);
-  } finally {
-    isLoading.value = false;
-  }
-});
-</script>
-
-<template>
-  <div class="p-5">
-    <h1 class="text-title text-bold">Tokens</h1>
-    <!-- <p v-show="isLoading">Loading...</p>
-    <div v-if="transactionsFetched.length > 0">
-      <div
-        v-for="(item, index) in transactionsFetched"
-        :key="index"
-        class="rounded bg-dark-blue-800 p-4 overflow-hidden"
-        :class="{ 'mt-4': index !== 0 }"
-      >
-        <div class="d-flex justify-content-between align-items-start">
-          <div>
-            <p class="text-main d-flex align-items-center">
-              <i
-                v-if="item.type === 'send'"
-                class="bi bi-arrow-up-right me-3 text-info text-title fw-bolder"
-              ></i>
-              <i
-                v-else-if="item.type === 'receive'"
-                class="bi bi-arrow-down-left me-3 text-success text-title fw-bold"
-              ></i>
-              {{ item.transaction_hash }}
-            </p>
-            <p class="text-micro mt-3">{{ item.entity_id }}</p>
-          </div>
-          <div>
-            <div class="d-flex justify-content-end align-items-center">
-              <AppButton color="primary" outline class="me-3">Details</AppButton>
-              <AppButton color="primary">Sign</AppButton>
-            </div>
-          </div>
-        </div>
-
-        <div class="mt-4 d-inline-flex align-items-center">
-          <span class="text-micro me-4">Approvers</span>
-          <span
-            v-for="(approver, index) in item.approvers"
-            :key="index"
-            class="badge bg-dark-blue-700 d-inline-flex align-items-center fw-normal"
-            :class="{ 'me-2': index !== item.approvers.length }"
-            ><i class="bi bi-check-lg text-success text-subheader lh-1 me-1"></i
-            >{{ approver }}</span
-          >
-        </div>
-      </div>
-    </div>
-    <div v-else>No transactions found</div> -->
-  </div>
-</template>
diff --git a/front-end/src/renderer/pages/Tokens/index.ts b/front-end/src/renderer/pages/Tokens/index.ts
deleted file mode 100644
index d42332b7a..000000000
--- a/front-end/src/renderer/pages/Tokens/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Tokens from './Tokens.vue';
-
-export default Tokens;
diff --git a/front-end/src/renderer/pages/TransactionDetails/TransactionDetails.vue b/front-end/src/renderer/pages/TransactionDetails/TransactionDetails.vue
index 9178c1554..2d6397836 100644
--- a/front-end/src/renderer/pages/TransactionDetails/TransactionDetails.vue
+++ b/front-end/src/renderer/pages/TransactionDetails/TransactionDetails.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { Transaction } from '@prisma/client';
 import type { ITransactionFull } from '@main/shared/interfaces';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { computed, inject, onBeforeMount, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Transaction as SDKTransaction } from '@hashgraph/sdk';
@@ -20,7 +19,8 @@ import useNextTransactionStore from '@renderer/stores/storeNextTransaction';
 
 import { useToast } from 'vue-toast-notification';
 import useDisposableWs from '@renderer/composables/useDisposableWs';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import {
   cancelTransaction,
@@ -32,8 +32,6 @@ import {
 import { getTransaction } from '@renderer/services/transactionService';
 import { decryptPrivateKey } from '@renderer/services/keyPairService';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import {
   getTransactionDateExtended,
   getTransactionId,
@@ -78,14 +76,8 @@ const nextTransaction = useNextTransactionStore();
 const router = useRouter();
 const toast = useToast();
 const ws = useDisposableWs();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const orgTransaction = ref<ITransactionFull | null>(null);
@@ -244,16 +236,10 @@ const handleSign = async () => {
     throw new Error('User is not logged in organization');
   }
 
-  const password = user.getPassword();
-  if (!password && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to decrypt your private key',
-      handleSign,
-    );
-    return;
-  }
+  const personalPassword = getPassword(handleSign, {
+    subHeading: 'Enter your application password to decrypt your private key',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     isSigning.value = true;
@@ -286,7 +272,7 @@ const handleSign = async () => {
     if (restoredRequiredKeys.length > 0) {
       await uploadSignatureMap(
         user.personal.id,
-        password,
+        personalPassword,
         user.selectedOrganization,
         restoredRequiredKeys,
         SDKTransaction.fromBytes(sdkTransaction.value.toBytes()),
@@ -325,16 +311,10 @@ const handleApprove = async (approved: boolean, showModal?: boolean) => {
       throw new Error('User is not logged in organization');
     }
 
-    const personalPassword = user.getPassword();
-    if (!personalPassword && !user.personal.useKeychain) {
-      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-      userPasswordModalRef.value?.open(
-        'Enter your application password',
-        'Enter your application password to decrypt your private key',
-        callback,
-      );
-      return;
-    }
+    const personalPassword = getPassword(callback, {
+      subHeading: 'Enter your application password to decrypt your private key',
+    });
+    if (passwordModalOpened(personalPassword)) return;
 
     try {
       if (approved) {
diff --git a/front-end/src/renderer/pages/TransactionGroupDetails/TransactionGroupDetails.vue b/front-end/src/renderer/pages/TransactionGroupDetails/TransactionGroupDetails.vue
index ce9bafe3b..2f7d80767 100644
--- a/front-end/src/renderer/pages/TransactionGroupDetails/TransactionGroupDetails.vue
+++ b/front-end/src/renderer/pages/TransactionGroupDetails/TransactionGroupDetails.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { IGroup } from '@renderer/services/organization';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { computed, inject, onBeforeMount, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { Transaction } from '@hashgraph/sdk';
 
@@ -16,6 +15,8 @@ import useNextTransactionStore from '@renderer/stores/storeNextTransaction';
 
 import { useToast } from 'vue-toast-notification';
 import useDisposableWs from '@renderer/composables/useDisposableWs';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import {
   getApiGroupById,
@@ -32,13 +33,10 @@ import {
   redirectToDetails,
   hexToUint8Array,
   isLoggedInOrganization,
-  isLoggedInWithPassword,
   isUserLoggedIn,
   publicRequiredToSign,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppModal from '@renderer/components/ui/AppModal.vue';
 import AppCustomIcon from '@renderer/components/ui/AppCustomIcon.vue';
@@ -53,6 +51,8 @@ const nextTransaction = useNextTransactionStore();
 const router = useRouter();
 const toast = useToast();
 const ws = useDisposableWs();
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const group = ref<IGroup>();
@@ -64,9 +64,6 @@ const disableSignAll = ref(false);
 const isSigning = ref(false);
 const isApproving = ref(false);
 
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
-
 /* Handlers */
 async function handleFetchGroup(id: string | number) {
   if (isLoggedInOrganization(user.selectedOrganization) && !isNaN(Number(id))) {
@@ -123,16 +120,10 @@ const handleSignGroup = async () => {
     throw new Error('User is not logged in organization');
   }
 
-  const password = user.getPassword();
-  if (!password && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to decrypt your private key',
-      handleSignGroup,
-    );
-    return;
-  }
+  const personalPassword = getPassword(handleSignGroup, {
+    subHeading: 'Enter your application password to decrypt your private key',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     isSigning.value = true;
@@ -147,7 +138,7 @@ const handleSignGroup = async () => {
         );
         await uploadSignatureMap(
           user.personal.id,
-          password,
+          personalPassword,
           user.selectedOrganization,
           publicKeysRequired,
           Transaction.fromBytes(transaction.toBytes()),
@@ -175,15 +166,10 @@ const handleApproveAll = async (approved: boolean, showModal?: boolean) => {
       throw new Error('User is not logged in organization');
     }
 
-    if (!isLoggedInWithPassword(user.personal)) {
-      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-      userPasswordModalRef.value?.open(
-        'Enter your application password',
-        'Enter your application password to decrypt your private key',
-        callback,
-      );
-      return;
-    }
+    const personalPassword = getPassword(callback, {
+      subHeading: 'Enter your application password to decrypt your private key',
+    });
+    if (passwordModalOpened(personalPassword)) return;
 
     try {
       isApproving.value = true;
diff --git a/front-end/src/renderer/pages/Transactions/Transactions.vue b/front-end/src/renderer/pages/Transactions/Transactions.vue
index 4a35cb538..8db7d9315 100644
--- a/front-end/src/renderer/pages/Transactions/Transactions.vue
+++ b/front-end/src/renderer/pages/Transactions/Transactions.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
 import type { TabItem } from '@renderer/components/ui/AppTabs.vue';
 
-import { computed, inject, onBeforeMount, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 
 import { NotificationType } from '@main/shared/interfaces';
 import {
@@ -19,14 +18,11 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 import useNotificationsStore from '@renderer/stores/storeNotifications';
 
 import { useRouter } from 'vue-router';
-import { useToast } from 'vue-toast-notification';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
+import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import { getTransactionsToSign } from '@renderer/services/organization';
 
-import { isLoggedInOrganization, isOrganizationActive, withLoader } from '@renderer/utils';
-
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
+import { isLoggedInOrganization, isOrganizationActive } from '@renderer/utils';
 
 import AppTabs from '@renderer/components/ui/AppTabs.vue';
 import AppButton from '@renderer/components/ui/AppButton.vue';
@@ -38,6 +34,7 @@ import ReadyToSign from './components/ReadyToSign.vue';
 import InProgress from './components/InProgress.vue';
 import ReadyForExecution from './components/ReadyForExecution.vue';
 import ReadyForReview from './components/ReadyForReview.vue';
+import useLoader from '@renderer/composables/useLoader';
 
 /* Stores */
 const user = useUserStore();
@@ -46,15 +43,8 @@ const notifications = useNotificationsStore();
 
 /* Composables */
 const router = useRouter();
-const toast = useToast();
-useSetDynamicLayout({
-  loggedInClass: true,
-  shouldSetupAccountClass: false,
-  showMenu: true,
-});
-
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
+const withLoader = useLoader();
+useSetDynamicLayout(LOGGED_IN_LAYOUT);
 
 /* State */
 const organizationTabs: TabItem[] = [
@@ -143,22 +133,18 @@ function setQueryTab(title: string) {
 async function syncTab(forceCheckSign = false) {
   setTabItems();
 
-  await withLoader(
-    async () => {
-      const tab = router.currentRoute.value.query.tab?.toString();
-
-      if (tab) {
-        const newIndex = tabItems.value.findIndex(t => t.title === tab);
-        activeTabIndex.value = newIndex >= 0 ? newIndex : activeTabIndex.value;
-      } else {
-        await changeTabIfReadyToSign();
-      }
-
-      if (forceCheckSign) await changeTabIfReadyToSign();
-    },
-    toast,
-    globalModalLoaderRef?.value,
-  )();
+  await withLoader(async () => {
+    const tab = router.currentRoute.value.query.tab?.toString();
+
+    if (tab) {
+      const newIndex = tabItems.value.findIndex(t => t.title === tab);
+      activeTabIndex.value = newIndex >= 0 ? newIndex : activeTabIndex.value;
+    } else {
+      await changeTabIfReadyToSign();
+    }
+
+    if (forceCheckSign) await changeTabIfReadyToSign();
+  });
 }
 
 async function changeTabIfReadyToSign() {
diff --git a/front-end/src/renderer/pages/UserLogin/UserLogin.vue b/front-end/src/renderer/pages/UserLogin/UserLogin.vue
index eaa55f9e3..dbc7e871b 100644
--- a/front-end/src/renderer/pages/UserLogin/UserLogin.vue
+++ b/front-end/src/renderer/pages/UserLogin/UserLogin.vue
@@ -9,6 +9,7 @@ import useUserStore from '@renderer/stores/storeUser';
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
+import useSetDynamicLayout, { DEFAULT_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
 import {
   loginLocal,
@@ -26,7 +27,6 @@ import AppInput from '@renderer/components/ui/AppInput.vue';
 import AppModal from '@renderer/components/ui/AppModal.vue';
 import AppCustomIcon from '@renderer/components/ui/AppCustomIcon.vue';
 import AppCheckBox from '@renderer/components/ui/AppCheckBox.vue';
-import useSetDynamicLayout from '@renderer/composables/useSetDynamicLayout';
 
 /* Stores */
 const user = useUserStore();
@@ -35,11 +35,7 @@ const user = useUserStore();
 const toast = useToast();
 const router = useRouter();
 const createTooltips = useCreateTooltips();
-useSetDynamicLayout({
-  loggedInClass: false,
-  shouldSetupAccountClass: false,
-  showMenu: false,
-});
+useSetDynamicLayout(DEFAULT_LAYOUT);
 
 /* Injected */
 const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
diff --git a/front-end/src/renderer/providers/dynamicLayout.ts b/front-end/src/renderer/providers/dynamicLayout.ts
index e4107e8c9..a8192fb73 100644
--- a/front-end/src/renderer/providers/dynamicLayout.ts
+++ b/front-end/src/renderer/providers/dynamicLayout.ts
@@ -7,6 +7,22 @@ export type DYNAMIC_LAYOUT_TYPE = {
   showMenu: boolean;
 };
 
+export const DEFAULT_LAYOUT: DYNAMIC_LAYOUT_TYPE = {
+  loggedInClass: false,
+  shouldSetupAccountClass: false,
+  showMenu: false,
+};
+export const LOGGED_IN_LAYOUT: DYNAMIC_LAYOUT_TYPE = {
+  loggedInClass: true,
+  shouldSetupAccountClass: false,
+  showMenu: true,
+};
+export const ACCOUNT_SETUP_LAYOUT: DYNAMIC_LAYOUT_TYPE = {
+  loggedInClass: true,
+  shouldSetupAccountClass: true,
+  showMenu: false,
+};
+
 export const provideDynamicLayout = (value: DYNAMIC_LAYOUT_TYPE) => {
   provide(DYNAMIC_LAYOUT_KEY, value);
 };
diff --git a/front-end/src/renderer/router/index.ts b/front-end/src/renderer/router/index.ts
index 47eef4c90..38a07cdf9 100644
--- a/front-end/src/renderer/router/index.ts
+++ b/front-end/src/renderer/router/index.ts
@@ -13,11 +13,7 @@ export * from './constants';
 
 const StyleGuide = () => import('@renderer/pages/Styleguide');
 const Accounts = () => import('@renderer/pages/Accounts');
-const Tokens = () => import('@renderer/pages/Tokens');
-const Help = () => import('@renderer/pages/Help');
 const Settings = () => import('@renderer/pages/Settings');
-const SmartContracts = () => import('@renderer/pages/SmartContracts');
-const ConsensusService = () => import('@renderer/pages/ConsensusService');
 const Files = () => import('@renderer/pages/Files');
 const ContactList = () => import('@renderer/pages/ContactList');
 const SignUpUser = () => import('@renderer/pages/ContactList/SignUpUser');
@@ -29,7 +25,6 @@ const NotificationsTab = () => import('@renderer/pages/Settings/components/Notif
 const RestoreKey = () => import('@renderer/pages/RestoreKey');
 const CreateTransaction = () => import('@renderer/pages/CreateTransaction');
 const ProfileTab = () => import('@renderer/pages/Settings/components/ProfileTab.vue');
-const ForgotPassword = () => import('@renderer/pages/ForgotPassword');
 const LinkExistingAccount = () => import('@renderer/pages/Accounts/LinkExistingAccount');
 const LinkExistingFile = () => import('@renderer/pages/Files/LinkExistingFile');
 const OrganizationLogin = () => import('@renderer/pages/OrganizationLogin');
@@ -46,14 +41,10 @@ const routes: RouteRecordRaw[] = [
   { path: '/transactions', name: 'transactions', component: Transactions },
   { path: '/accounts/link-existing', name: 'linkExistingAccount', component: LinkExistingAccount },
   { path: '/accounts', name: 'accounts', component: Accounts },
-  { path: '/tokens', name: 'tokens', component: Tokens },
-  { path: '/smart-contracts', name: 'smartContracts', component: SmartContracts },
-  { path: '/consensus-service', name: 'consensusService', component: ConsensusService },
   { path: '/files', name: 'files', component: Files },
   { path: '/files/link-existing', name: 'linkExistingFile', component: LinkExistingFile },
   { path: '/contact-list/create', name: 'signUpUser', component: SignUpUser },
   { path: '/contact-list', name: 'contactList', component: ContactList },
-  { path: '/help', name: 'help', component: Help },
   { path: '/account-setup', name: 'accountSetup', component: AccountSetup },
   { path: '/restore-key', name: constants.RESTORE_KEY, component: RestoreKey },
   { path: '/migrate', name: 'migrate', component: Migrate },
@@ -72,7 +63,6 @@ const routes: RouteRecordRaw[] = [
     name: 'createTransactionGroup',
     component: CreateTransactionGroup,
   },
-  { path: '/forgot-password', name: 'forgotPassword', component: ForgotPassword },
   {
     path: '/transaction/:id',
     name: 'transactionDetails',
diff --git a/front-end/src/renderer/router/meta.ts b/front-end/src/renderer/router/meta.ts
index 663403a5e..5ba04b070 100644
--- a/front-end/src/renderer/router/meta.ts
+++ b/front-end/src/renderer/router/meta.ts
@@ -6,8 +6,6 @@ const withoutAuthRoutes = [
   'migrate',
   // 'settingsGeneral',
   // 'settingsWorkGroups',
-  'help',
-  'forgotPassword',
 ];
 
 const onlyAdminRoutes = ['signUpUser'];
diff --git a/front-end/src/renderer/utils/index.ts b/front-end/src/renderer/utils/index.ts
index d562e275f..bfe16dfcd 100644
--- a/front-end/src/renderer/utils/index.ts
+++ b/front-end/src/renderer/utils/index.ts
@@ -1,7 +1,3 @@
-import type { ToastPluginApi } from 'vue-toast-notification';
-
-import GlobalModalLoader from '@renderer/components/GlobalModalLoader.vue';
-
 export * from './dom';
 export * from './sdk';
 export * from './transactions';
@@ -103,29 +99,6 @@ export const getDateStringExtended = (date: Date) => {
   return `${date.toDateString()} ${date.toLocaleTimeString()}`;
 };
 
-export const withLoader = (
-  fn: (...args: any[]) => any,
-  toast: ToastPluginApi,
-  loaderRef: InstanceType<typeof GlobalModalLoader> | null | undefined,
-  defaultErrorMessage = 'Failed to perform operation',
-  timeout = 10000, // default timeout of 10 seconds
-) => {
-  return async (...args: any[]) => {
-    const timeoutPromise = new Promise((_, reject) =>
-      setTimeout(() => reject(new Error('Operation timed out')), timeout),
-    );
-
-    try {
-      loaderRef?.open();
-      return await Promise.race([fn(...args), timeoutPromise]);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : defaultErrorMessage);
-    } finally {
-      loaderRef?.close();
-    }
-  };
-};
-
 export const throwError = (errorMessage: string) => {
   throw new Error(errorMessage);
 };