diff --git a/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts b/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts
index 58d1f5eb9..6cd24a872 100644
--- a/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts
+++ b/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts
@@ -115,6 +115,9 @@ popup.describe('Popup UI: buy cspr', () => {
 
       await popupPage.getByText('Ukraine').click();
 
+      // wait until a modal window closed
+      await new Promise(r => setTimeout(r, 2000));
+
       await popupPage.getByRole('button', { name: 'Next' }).click();
 
       await popupExpect(
@@ -126,6 +129,9 @@ popup.describe('Popup UI: buy cspr', () => {
 
       await popupPage.getByText('UAH').click();
 
+      // wait until a modal window closed
+      await new Promise(r => setTimeout(r, 2000));
+
       await popupPage.getByRole('button', { name: 'Next' }).click();
 
       await popupExpect(
diff --git a/src/apps/import-account-with-file/app-router.tsx b/src/apps/import-account-with-file/app-router.tsx
index 710f4c748..0d81c423f 100644
--- a/src/apps/import-account-with-file/app-router.tsx
+++ b/src/apps/import-account-with-file/app-router.tsx
@@ -4,11 +4,10 @@ import { HashRouter, Route, Routes } from 'react-router-dom';
 import { useUserActivityTracker } from '@hooks/use-user-activity-tracker';
 
 import '@libs/i18n/i18n';
-import { HeaderPopup, LayoutWindow } from '@libs/layout';
 
 import { ImportAccountWithFilePage } from './pages/import-account-with-file';
-import { ImportAccountWithFileFailureContentPage } from './pages/import-account-with-file-failure';
-import { ImportAccountWithFileSuccessContentPage } from './pages/import-account-with-file-success';
+import { ImportAccountWithFileFailurePage } from './pages/import-account-with-file-failure';
+import { ImportAccountWithFileSuccessPage } from './pages/import-account-with-file-success';
 import { ImportAccountWithFileUploadPage } from './pages/import-account-with-file-upload';
 import { RouterPath } from './router';
 
@@ -28,21 +27,11 @@ export function AppRouter() {
         />
         <Route
           path={RouterPath.ImportAccountWithFileSuccess}
-          element={
-            <LayoutWindow
-              renderHeader={() => <HeaderPopup />}
-              renderContent={() => <ImportAccountWithFileSuccessContentPage />}
-            />
-          }
+          element={<ImportAccountWithFileSuccessPage />}
         />
         <Route
           path={RouterPath.ImportAccountWithFileFailure}
-          element={
-            <LayoutWindow
-              renderHeader={() => <HeaderPopup />}
-              renderContent={() => <ImportAccountWithFileFailureContentPage />}
-            />
-          }
+          element={<ImportAccountWithFileFailurePage />}
         />
       </Routes>
     </HashRouter>
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx
new file mode 100644
index 000000000..e046ec40f
--- /dev/null
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { useTypedLocation } from '@import-account-with-file/router';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
+
+export function ImportAccountWithFileFailureContentPage() {
+  const { t } = useTranslation();
+  const location = useTypedLocation();
+  const state = location.state;
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/error.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Something went wrong</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body" color="contentSecondary">
+          {state?.importAccountStatusMessage
+            ? state.importAccountStatusMessage
+            : t(
+                ': We couldn’t import your account. Please confirm that you’re importing a file containing your secret key (not to be confused with your public key).'
+              )}
+        </Typography>
+      </ParagraphContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx
index e69b48ffa..79831c7a1 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx
@@ -1,60 +1,37 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import {
-  RouterPath,
-  useTypedLocation,
-  useTypedNavigate
-} from '@import-account-with-file/router';
+import { RouterPath, useTypedNavigate } from '@import-account-with-file/router';
 
 import { closeCurrentWindow } from '@background/close-current-window';
 
 import {
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  ParagraphContainer,
-  SpacingSize
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow
 } from '@libs/layout';
-import { Button, SvgIcon, Typography } from '@libs/ui/components';
+import { Button } from '@libs/ui/components';
+
+import { ImportAccountWithFileFailureContentPage } from './content';
 
-export function ImportAccountWithFileFailureContentPage() {
+export const ImportAccountWithFileFailurePage = () => {
   const { t } = useTranslation();
   const navigate = useTypedNavigate();
-  const location = useTypedLocation();
-  const state = location.state;
 
   return (
-    <ContentContainer>
-      <IllustrationContainer>
-        <SvgIcon
-          src="assets/illustrations/error.svg"
-          width={200}
-          height={120}
-        />
-      </IllustrationContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>Something went wrong</Trans>
-        </Typography>
-      </ParagraphContainer>
-      <ParagraphContainer top={SpacingSize.Medium}>
-        <Typography type="body" color="contentSecondary">
-          {state?.importAccountStatusMessage
-            ? state.importAccountStatusMessage
-            : t(
-                ': We couldn’t import your account. Please confirm that you’re importing a file containing your secret key (not to be confused with your public key).'
-              )}
-        </Typography>
-      </ParagraphContainer>
-      <FooterButtonsAbsoluteContainer>
-        <Button onClick={() => navigate(RouterPath.ImportAccountWithFile)}>
-          <Trans t={t}>Try to import again</Trans>
-        </Button>
-        <Button color="secondaryBlue" onClick={() => closeCurrentWindow()}>
-          <Trans t={t}>Maybe later</Trans>
-        </Button>
-      </FooterButtonsAbsoluteContainer>
-    </ContentContainer>
+    <LayoutWindow
+      renderHeader={() => <HeaderPopup />}
+      renderContent={() => <ImportAccountWithFileFailureContentPage />}
+      renderFooter={() => (
+        <FooterButtonsContainer>
+          <Button onClick={() => navigate(RouterPath.ImportAccountWithFile)}>
+            <Trans t={t}>Try to import again</Trans>
+          </Button>
+          <Button color="secondaryBlue" onClick={() => closeCurrentWindow()}>
+            <Trans t={t}>Maybe later</Trans>
+          </Button>
+        </FooterButtonsContainer>
+      )}
+    />
   );
-}
+};
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx
new file mode 100644
index 000000000..0801d7f1e
--- /dev/null
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
+
+export function ImportAccountWithFileSuccessContentPage() {
+  const { t } = useTranslation();
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/account-imported.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Your account was successfully imported</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body" color="contentSecondary">
+          <Trans t={t}>
+            Imported accounts are distinguished by an ‘IMPORTED’ icon in the
+            account lists.
+          </Trans>
+        </Typography>
+      </ParagraphContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx
index 74ecc1f9e..dd7ad7576 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx
@@ -4,44 +4,28 @@ import { Trans, useTranslation } from 'react-i18next';
 import { closeCurrentWindow } from '@background/close-current-window';
 
 import {
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  ParagraphContainer,
-  SpacingSize
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow
 } from '@libs/layout';
-import { Button, SvgIcon, Typography } from '@libs/ui/components';
+import { Button } from '@libs/ui/components';
 
-export function ImportAccountWithFileSuccessContentPage() {
+import { ImportAccountWithFileSuccessContentPage } from './content';
+
+export const ImportAccountWithFileSuccessPage = () => {
   const { t } = useTranslation();
 
   return (
-    <ContentContainer>
-      <IllustrationContainer>
-        <SvgIcon
-          src="assets/illustrations/account-imported.svg"
-          width={200}
-          height={120}
-        />
-      </IllustrationContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>Your account was successfully imported</Trans>
-        </Typography>
-      </ParagraphContainer>
-      <ParagraphContainer top={SpacingSize.Medium}>
-        <Typography type="body" color="contentSecondary">
-          <Trans t={t}>
-            Imported accounts are distinguished by an ‘IMPORTED’ icon in the
-            account lists.
-          </Trans>
-        </Typography>
-      </ParagraphContainer>
-      <FooterButtonsAbsoluteContainer>
-        <Button onClick={() => closeCurrentWindow()}>
-          <Trans t={t}>Done</Trans>
-        </Button>
-      </FooterButtonsAbsoluteContainer>
-    </ContentContainer>
+    <LayoutWindow
+      renderHeader={() => <HeaderPopup />}
+      renderContent={() => <ImportAccountWithFileSuccessContentPage />}
+      renderFooter={() => (
+        <FooterButtonsContainer>
+          <Button onClick={closeCurrentWindow}>
+            <Trans t={t}>Done</Trans>
+          </Button>
+        </FooterButtonsContainer>
+      )}
+    />
   );
-}
+};
diff --git a/src/apps/popup/app-router.tsx b/src/apps/popup/app-router.tsx
index 8cd0a67d0..7e67ea351 100644
--- a/src/apps/popup/app-router.tsx
+++ b/src/apps/popup/app-router.tsx
@@ -22,11 +22,11 @@ import { ImportAccountFromLedgerPage } from '@popup/pages/import-account-from-le
 import { ImportAccountFromTorusPage } from '@popup/pages/import-account-from-torus';
 import { NavigationMenuPageContent } from '@popup/pages/navigation-menu';
 import { NftDetailsPage } from '@popup/pages/nft-details';
-import { NoConnectedAccountPageContent } from '@popup/pages/no-connected-account';
+import { NoConnectedAccountPage } from '@popup/pages/no-connected-account';
 import { RateAppPage } from '@popup/pages/rate-app';
 import { ReceivePage } from '@popup/pages/receive';
-import { RemoveAccountPageContent } from '@popup/pages/remove-account';
-import { RenameAccountPageContent } from '@popup/pages/rename-account';
+import { RemoveAccountPage } from '@popup/pages/remove-account';
+import { RenameAccountPage } from '@popup/pages/rename-account';
 import { SignWithLedgerInNewWindowPage } from '@popup/pages/sign-with-ledger-in-new-window';
 import { StakesPage } from '@popup/pages/stakes';
 import { TimeoutPageContent } from '@popup/pages/timeout';
@@ -134,52 +134,11 @@ function AppRoutes() {
           />
         }
       />
-      <Route
-        path={RouterPath.RemoveAccount}
-        element={
-          <PopupLayout
-            renderHeader={() => (
-              <HeaderPopup
-                withNetworkSwitcher
-                withMenu
-                withConnectionStatus
-                renderSubmenuBarItems={() => (
-                  <HeaderSubmenuBarNavLink linkType="back" />
-                )}
-              />
-            )}
-            renderContent={() => <RemoveAccountPageContent />}
-          />
-        }
-      />
-      <Route
-        path={RouterPath.RenameAccount}
-        element={
-          <PopupLayout
-            renderHeader={() => (
-              <HeaderPopup
-                withNetworkSwitcher
-                withMenu
-                withConnectionStatus
-                renderSubmenuBarItems={() => (
-                  <HeaderSubmenuBarNavLink linkType="back" />
-                )}
-              />
-            )}
-            renderContent={() => <RenameAccountPageContent />}
-          />
-        }
-      />
+      <Route path={RouterPath.RemoveAccount} element={<RemoveAccountPage />} />
+      <Route path={RouterPath.RenameAccount} element={<RenameAccountPage />} />
       <Route
         path={RouterPath.NoConnectedAccount}
-        element={
-          <PopupLayout
-            renderHeader={() => (
-              <HeaderPopup withNetworkSwitcher withMenu withConnectionStatus />
-            )}
-            renderContent={() => <NoConnectedAccountPageContent />}
-          />
-        }
+        element={<NoConnectedAccountPage />}
       />
       <Route
         path={RouterPath.ConnectedSites}
diff --git a/src/apps/popup/pages/no-connected-account/content.tsx b/src/apps/popup/pages/no-connected-account/content.tsx
new file mode 100644
index 000000000..2306df6f6
--- /dev/null
+++ b/src/apps/popup/pages/no-connected-account/content.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
+
+export function NoConnectedAccountPageContent() {
+  const { t } = useTranslation();
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/no-connection.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Casper Wallet is not connected to this site yet</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body" color="contentSecondary">
+          <Trans t={t}>
+            To connect to this site, click on the Connect/Sign In button on the
+            site.
+          </Trans>
+        </Typography>
+      </ParagraphContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/apps/popup/pages/no-connected-account/index.tsx b/src/apps/popup/pages/no-connected-account/index.tsx
index bc2a0afe3..7dc711c74 100644
--- a/src/apps/popup/pages/no-connected-account/index.tsx
+++ b/src/apps/popup/pages/no-connected-account/index.tsx
@@ -3,47 +3,28 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import { RouterPath, useTypedNavigate } from '@popup/router';
 
-import {
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  ParagraphContainer,
-  SpacingSize
-} from '@libs/layout';
-import { Button, SvgIcon, Typography } from '@libs/ui/components';
+import { FooterButtonsContainer, HeaderPopup, PopupLayout } from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
-export function NoConnectedAccountPageContent() {
+import { NoConnectedAccountPageContent } from './content';
+
+export const NoConnectedAccountPage = () => {
   const navigate = useTypedNavigate();
   const { t } = useTranslation();
 
   return (
-    <ContentContainer>
-      <IllustrationContainer>
-        <SvgIcon
-          src="assets/illustrations/no-connection.svg"
-          width={200}
-          height={120}
-        />
-      </IllustrationContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>Casper Wallet is not connected to this site yet</Trans>
-        </Typography>
-      </ParagraphContainer>
-      <ParagraphContainer top={SpacingSize.Medium}>
-        <Typography type="body" color="contentSecondary">
-          <Trans t={t}>
-            To connect to this site, click on the Connect/Sign In button on the
-            site.
-          </Trans>
-        </Typography>
-      </ParagraphContainer>
-
-      <FooterButtonsAbsoluteContainer>
-        <Button onClick={() => navigate(RouterPath.Home)}>
-          <Trans t={t}>Got it</Trans>
-        </Button>
-      </FooterButtonsAbsoluteContainer>
-    </ContentContainer>
+    <PopupLayout
+      renderHeader={() => (
+        <HeaderPopup withNetworkSwitcher withMenu withConnectionStatus />
+      )}
+      renderContent={() => <NoConnectedAccountPageContent />}
+      renderFooter={() => (
+        <FooterButtonsContainer>
+          <Button onClick={() => navigate(RouterPath.Home)}>
+            <Trans t={t}>Got it</Trans>
+          </Button>
+        </FooterButtonsContainer>
+      )}
+    />
   );
-}
+};
diff --git a/src/apps/popup/pages/remove-account/content.tsx b/src/apps/popup/pages/remove-account/content.tsx
new file mode 100644
index 000000000..52ee0af2c
--- /dev/null
+++ b/src/apps/popup/pages/remove-account/content.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
+
+export function RemoveAccountPageContent() {
+  const { t } = useTranslation();
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/remove-account.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Remove account?</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body" color="contentSecondary">
+          <Trans t={t}>
+            Are you sure you want to remove this account? The action can’t be
+            undone.
+          </Trans>
+        </Typography>
+      </ParagraphContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/apps/popup/pages/remove-account/index.tsx b/src/apps/popup/pages/remove-account/index.tsx
index 7bff66478..6bdd9a902 100644
--- a/src/apps/popup/pages/remove-account/index.tsx
+++ b/src/apps/popup/pages/remove-account/index.tsx
@@ -8,18 +8,19 @@ import { dispatchToMainStore } from '@background/redux/utils';
 import { accountRemoved } from '@background/redux/vault/actions';
 
 import {
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  ParagraphContainer,
-  SpacingSize
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout
 } from '@libs/layout';
-import { Button, SvgIcon, Typography } from '@libs/ui/components';
+import { Button } from '@libs/ui/components';
 
-export function RemoveAccountPageContent() {
+import { RemoveAccountPageContent } from './content';
+
+export const RemoveAccountPage = () => {
+  const { t } = useTranslation();
   const navigate = useTypedNavigate();
   const { accountName } = useParams();
-  const { t } = useTranslation();
 
   const handleRemoveAccount = useCallback(() => {
     if (!accountName) {
@@ -37,35 +38,28 @@ export function RemoveAccountPageContent() {
   }
 
   return (
-    <ContentContainer>
-      <IllustrationContainer>
-        <SvgIcon
-          src="assets/illustrations/remove-account.svg"
-          width={200}
-          height={120}
+    <PopupLayout
+      renderHeader={() => (
+        <HeaderPopup
+          withNetworkSwitcher
+          withMenu
+          withConnectionStatus
+          renderSubmenuBarItems={() => (
+            <HeaderSubmenuBarNavLink linkType="back" />
+          )}
         />
-      </IllustrationContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>Remove account?</Trans>
-        </Typography>
-      </ParagraphContainer>
-      <ParagraphContainer top={SpacingSize.Medium}>
-        <Typography type="body" color="contentSecondary">
-          <Trans t={t}>
-            Are you sure you want to remove this account? The action can’t be
-            undone.
-          </Trans>
-        </Typography>
-      </ParagraphContainer>
-      <FooterButtonsAbsoluteContainer>
-        <Button color="primaryRed" onClick={handleRemoveAccount}>
-          <Trans t={t}>Remove</Trans>
-        </Button>
-        <Button onClick={() => navigate(-1)} color="secondaryBlue">
-          <Trans t={t}>Cancel</Trans>
-        </Button>
-      </FooterButtonsAbsoluteContainer>
-    </ContentContainer>
+      )}
+      renderContent={() => <RemoveAccountPageContent />}
+      renderFooter={() => (
+        <FooterButtonsContainer>
+          <Button color="primaryRed" onClick={handleRemoveAccount}>
+            <Trans t={t}>Remove</Trans>
+          </Button>
+          <Button onClick={() => navigate(-1)} color="secondaryBlue">
+            <Trans t={t}>Cancel</Trans>
+          </Button>
+        </FooterButtonsContainer>
+      )}
+    />
   );
-}
+};
diff --git a/src/apps/popup/pages/rename-account/content.tsx b/src/apps/popup/pages/rename-account/content.tsx
new file mode 100644
index 000000000..8dc119fcb
--- /dev/null
+++ b/src/apps/popup/pages/rename-account/content.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  InputsContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { Input, SvgIcon, Typography } from '@libs/ui/components';
+import { RenameAccountFormValues } from '@libs/ui/forms/rename-account';
+
+interface RenameAccountPageContentProps {
+  register: UseFormRegister<RenameAccountFormValues>;
+  errors: FieldErrors<RenameAccountFormValues>;
+}
+
+export function RenameAccountPageContent({
+  register,
+  errors
+}: RenameAccountPageContentProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/rename-account.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Rename account</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <InputsContainer>
+        <Input
+          type="text"
+          placeholder={t('New account name')}
+          {...register('name')}
+          error={!!errors.name}
+          validationText={errors.name?.message}
+        />
+      </InputsContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/apps/popup/pages/rename-account/index.tsx b/src/apps/popup/pages/rename-account/index.tsx
index d21d73351..00cbd8b2f 100644
--- a/src/apps/popup/pages/rename-account/index.tsx
+++ b/src/apps/popup/pages/rename-account/index.tsx
@@ -10,20 +10,20 @@ import { accountRenamed } from '@background/redux/vault/actions';
 import { selectVaultAccountsNames } from '@background/redux/vault/selectors';
 
 import {
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  InputsContainer,
-  ParagraphContainer,
-  SpacingSize
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout
 } from '@libs/layout';
-import { Button, Input, SvgIcon, Typography } from '@libs/ui/components';
+import { Button } from '@libs/ui/components';
 import {
   RenameAccountFormValues,
   useRenameAccount
 } from '@libs/ui/forms/rename-account';
 
-export function RenameAccountPageContent() {
+import { RenameAccountPageContent } from './content';
+
+export const RenameAccountPage = () => {
   const navigate = useTypedNavigate();
   const { accountName } = useParams();
   const { t } = useTranslation();
@@ -48,30 +48,24 @@ export function RenameAccountPageContent() {
   }
 
   return (
-    <ContentContainer>
-      <IllustrationContainer>
-        <SvgIcon
-          src="assets/illustrations/rename-account.svg"
-          width={200}
-          height={120}
+    <PopupLayout
+      variant="form"
+      onSubmit={handleSubmit(onSubmit)}
+      renderHeader={() => (
+        <HeaderPopup
+          withNetworkSwitcher
+          withMenu
+          withConnectionStatus
+          renderSubmenuBarItems={() => (
+            <HeaderSubmenuBarNavLink linkType="back" />
+          )}
         />
-      </IllustrationContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>Rename account</Trans>
-        </Typography>
-      </ParagraphContainer>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <InputsContainer>
-          <Input
-            type="text"
-            placeholder={t('New account name')}
-            {...register('name')}
-            error={!!errors.name}
-            validationText={errors.name?.message}
-          />
-        </InputsContainer>
-        <FooterButtonsAbsoluteContainer>
+      )}
+      renderContent={() => (
+        <RenameAccountPageContent register={register} errors={errors} />
+      )}
+      renderFooter={() => (
+        <FooterButtonsContainer>
           <Button disabled={!isDirty}>
             <Trans t={t}>Update</Trans>
           </Button>
@@ -82,8 +76,8 @@ export function RenameAccountPageContent() {
           >
             <Trans t={t}>Cancel</Trans>
           </Button>
-        </FooterButtonsAbsoluteContainer>
-      </form>
-    </ContentContainer>
+        </FooterButtonsContainer>
+      )}
+    />
   );
-}
+};
diff --git a/src/apps/popup/router/types.ts b/src/apps/popup/router/types.ts
index 795020a8e..1d624bf6a 100644
--- a/src/apps/popup/router/types.ts
+++ b/src/apps/popup/router/types.ts
@@ -2,7 +2,7 @@ import { ActivityType } from '@src/constants';
 
 import { TokenType } from '@hooks/use-casper-token';
 
-import { ErrorLocationState } from '@libs/layout';
+import { ErrorLocationState } from '@libs/layout/error/types';
 
 export interface LocationState extends ErrorLocationState {
   showNavigationMenu?: boolean;
diff --git a/src/libs/layout/containers.ts b/src/libs/layout/containers.ts
index 11a224820..a270185de 100644
--- a/src/libs/layout/containers.ts
+++ b/src/libs/layout/containers.ts
@@ -203,16 +203,6 @@ export const FooterButtonsContainer = styled(SpaceBetweenFlexRow)<Props>`
   background-color: ${({ theme }) => theme.color.backgroundPrimary};
 `;
 
-/**
- * @deprecated to be replaced by FooterButtonsContainer when Popup layout is refactored
- * to be the same as window layout
- */
-export const FooterButtonsAbsoluteContainer = styled(FooterButtonsContainer)`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`;
-
 export const ListItemClickableContainer = styled(SpaceBetweenFlexRow)`
   cursor: pointer;
 
@@ -291,11 +281,15 @@ export const BorderContainer = styled.div`
 export const Overlay = styled.div`
   position: fixed;
   z-index: ${({ theme }) => theme.zIndex.modal};
-  top: 0;
-  left: 0;
+  top: 50%;
+  left: 50%;
+  bottom: 0;
+  right: 0;
+
+  transform: translate(-50%, -50%);
 
   height: 100vh;
-  width: 100vw;
+  width: 360px;
 
   background: ${({ theme }) => hexToRGBA(theme.color.black, '0.32')};
 `;
diff --git a/src/libs/layout/locked-router/index.tsx b/src/libs/layout/locked-router/index.tsx
index 87b5df7cf..8d6ff2657 100644
--- a/src/libs/layout/locked-router/index.tsx
+++ b/src/libs/layout/locked-router/index.tsx
@@ -1,13 +1,8 @@
 import React from 'react';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
-import {
-  LayoutWindow,
-  PopupLayout,
-  ResetVaultPageContent,
-  UnlockVaultPageContent
-} from '@libs/layout';
-import { HeaderPopup } from '@libs/layout/header/header-popup';
+import { ResetVaultPage } from '@libs/layout/reset-vault';
+import { UnlockVaultPage } from '@libs/layout/unlock-vault';
 
 export const LockedRouterPath = {
   Any: '*',
@@ -18,43 +13,17 @@ interface LockedRouterProps {
   popupLayout?: boolean;
 }
 
-export function LockedRouter({ popupLayout }: LockedRouterProps) {
-  return (
-    <HashRouter>
-      <Routes>
-        <Route
-          path={LockedRouterPath.Any}
-          element={
-            popupLayout ? (
-              <PopupLayout
-                renderHeader={() => <HeaderPopup />}
-                renderContent={() => <UnlockVaultPageContent />}
-              />
-            ) : (
-              <LayoutWindow
-                renderHeader={() => <HeaderPopup />}
-                renderContent={() => <UnlockVaultPageContent />}
-              />
-            )
-          }
-        />
-        <Route
-          path={LockedRouterPath.ResetVault}
-          element={
-            popupLayout ? (
-              <PopupLayout
-                renderHeader={() => <HeaderPopup />}
-                renderContent={() => <ResetVaultPageContent />}
-              />
-            ) : (
-              <LayoutWindow
-                renderHeader={() => <HeaderPopup />}
-                renderContent={() => <ResetVaultPageContent />}
-              />
-            )
-          }
-        />
-      </Routes>
-    </HashRouter>
-  );
-}
+export const LockedRouter = ({ popupLayout }: LockedRouterProps) => (
+  <HashRouter>
+    <Routes>
+      <Route
+        path={LockedRouterPath.Any}
+        element={<UnlockVaultPage popupLayout={popupLayout} />}
+      />
+      <Route
+        path={LockedRouterPath.ResetVault}
+        element={<ResetVaultPage popupLayout={popupLayout} />}
+      />
+    </Routes>
+  </HashRouter>
+);
diff --git a/src/libs/layout/reset-vault/content.tsx b/src/libs/layout/reset-vault/content.tsx
new file mode 100644
index 000000000..9f6fa1477
--- /dev/null
+++ b/src/libs/layout/reset-vault/content.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
+
+export function ResetVaultPageContent() {
+  const { t } = useTranslation();
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/reset-wallet.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Are you sure you want to reset your wallet?</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body" color="contentSecondary">
+          <Trans t={t}>
+            All accounts will be removed. Make sure you have securely stored
+            your Casper Wallet’s secret recovery phrase and any legacy secret
+            key files. Without them you may be unable to access the accounts.
+          </Trans>
+        </Typography>
+      </ParagraphContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/libs/layout/reset-vault/index.tsx b/src/libs/layout/reset-vault/index.tsx
index a9a986d34..96bdc8b77 100644
--- a/src/libs/layout/reset-vault/index.tsx
+++ b/src/libs/layout/reset-vault/index.tsx
@@ -1,24 +1,29 @@
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-
-import { useTypedNavigate } from '@popup/router';
+import { useNavigate } from 'react-router-dom';
 
 import { closeWindowByReloadExtension } from '@background/close-window-by-reload-extension';
 import { resetVault } from '@background/redux/sagas/actions';
 import { dispatchToMainStore } from '@background/redux/utils';
 
 import {
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  ParagraphContainer,
-  SpacingSize
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow,
+  PopupLayout
 } from '@libs/layout';
-import { Button, Checkbox, SvgIcon, Typography } from '@libs/ui/components';
+import { Button, Checkbox } from '@libs/ui/components';
+
+import { ResetVaultPageContent } from './content';
+
+interface ResetVaultPageProps {
+  popupLayout?: boolean;
+}
 
-export function ResetVaultPageContent() {
+export const ResetVaultPage = ({ popupLayout }: ResetVaultPageProps) => {
   const [isChecked, setIsChecked] = useState(false);
-  const navigate = useTypedNavigate();
+
+  const navigate = useNavigate();
   const { t } = useTranslation();
 
   function handleResetVault() {
@@ -31,50 +36,39 @@ export function ResetVaultPageContent() {
     navigate(-1);
   }
 
-  return (
-    <>
-      <ContentContainer>
-        <IllustrationContainer>
-          <SvgIcon
-            src="assets/illustrations/reset-wallet.svg"
-            width={200}
-            height={120}
-          />
-        </IllustrationContainer>
-        <ParagraphContainer top={SpacingSize.XL}>
-          <Typography type="header">
-            <Trans t={t}>Are you sure you want to reset your wallet?</Trans>
-          </Typography>
-        </ParagraphContainer>
-        <ParagraphContainer top={SpacingSize.Medium}>
-          <Typography type="body" color="contentSecondary">
-            <Trans t={t}>
-              All accounts will be removed. Make sure you have securely stored
-              your Casper Wallet’s secret recovery phrase and any legacy secret
-              key files. Without them you may be unable to access the accounts.
-            </Trans>
-          </Typography>
-        </ParagraphContainer>
-      </ContentContainer>
-      <FooterButtonsAbsoluteContainer>
-        <Checkbox
-          label={t('I’ve read and understand the above')}
-          checked={isChecked}
-          onChange={(value: boolean) => {
-            setIsChecked(value);
-          }}
-        />
-        <Button
-          onClick={handleResetVault}
-          color="primaryRed"
-          disabled={!isChecked}
-        >
-          <Trans t={t}>Reset wallet</Trans>
-        </Button>
-        <Button onClick={handleCancel} color="secondaryBlue">
-          <Trans t={t}>Cancel</Trans>
-        </Button>
-      </FooterButtonsAbsoluteContainer>
-    </>
+  const footer = (
+    <FooterButtonsContainer>
+      <Checkbox
+        label={t('I’ve read and understand the above')}
+        checked={isChecked}
+        onChange={(value: boolean) => {
+          setIsChecked(value);
+        }}
+      />
+      <Button
+        onClick={handleResetVault}
+        color="primaryRed"
+        disabled={!isChecked}
+      >
+        <Trans t={t}>Reset wallet</Trans>
+      </Button>
+      <Button onClick={handleCancel} color="secondaryBlue">
+        <Trans t={t}>Cancel</Trans>
+      </Button>
+    </FooterButtonsContainer>
   );
-}
+
+  return popupLayout ? (
+    <PopupLayout
+      renderHeader={() => <HeaderPopup />}
+      renderContent={() => <ResetVaultPageContent />}
+      renderFooter={() => footer}
+    />
+  ) : (
+    <LayoutWindow
+      renderHeader={() => <HeaderPopup />}
+      renderContent={() => <ResetVaultPageContent />}
+      renderFooter={() => footer}
+    />
+  );
+};
diff --git a/src/libs/layout/unlock-vault/content.tsx b/src/libs/layout/unlock-vault/content.tsx
new file mode 100644
index 000000000..43fd05cd4
--- /dev/null
+++ b/src/libs/layout/unlock-vault/content.tsx
@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
+
+import {
+  ContentContainer,
+  IllustrationContainer,
+  InputsContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import {
+  Input,
+  PasswordInputType,
+  PasswordVisibilityIcon,
+  SvgIcon,
+  Typography
+} from '@libs/ui/components';
+import { UnlockWalletFormValues } from '@libs/ui/forms/unlock-wallet';
+
+interface UnlockVaultPageContentProps {
+  register: UseFormRegister<UnlockWalletFormValues>;
+  errors: FieldErrors<UnlockWalletFormValues>;
+}
+
+export function UnlockVaultPageContent({
+  register,
+  errors
+}: UnlockVaultPageContentProps) {
+  const [passwordInputType, setPasswordInputType] =
+    useState<PasswordInputType>('password');
+
+  const { t } = useTranslation();
+  const hasLoginRetryLockoutTime = useSelector(selectHasLoginRetryLockoutTime);
+
+  if (hasLoginRetryLockoutTime) {
+    return (
+      <>
+        <ContentContainer>
+          <IllustrationContainer>
+            <SvgIcon
+              src="assets/illustrations/password-lock.svg"
+              width={210}
+              height={120}
+            />
+          </IllustrationContainer>
+          <ParagraphContainer top={SpacingSize.XL}>
+            <Typography type="header">
+              <Trans t={t}>
+                Please wait before the next attempt to unlock your wallet
+              </Trans>
+            </Typography>
+          </ParagraphContainer>
+          <ParagraphContainer top={SpacingSize.Medium}>
+            <Typography type="body" color="contentSecondary">
+              <Trans t={t}>
+                You’ve reached the maximum number of unlock attempts. For
+                security reasons, you will need to wait a brief while before you
+                can attempt again.
+              </Trans>
+            </Typography>
+          </ParagraphContainer>
+          <ParagraphContainer top={SpacingSize.Medium}>
+            <Typography type="body" color="contentSecondary">
+              <Trans t={t}>
+                You can try again in <b>5 mins.</b>
+              </Trans>
+            </Typography>
+          </ParagraphContainer>
+        </ContentContainer>
+      </>
+    );
+  }
+
+  return (
+    <ContentContainer>
+      <IllustrationContainer>
+        <SvgIcon
+          src="assets/illustrations/locked-wallet.svg"
+          width={200}
+          height={120}
+        />
+      </IllustrationContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>Your wallet is locked</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body" color="contentSecondary">
+          <Trans t={t}>Please enter your password to unlock.</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <InputsContainer>
+        <Input
+          type={passwordInputType}
+          placeholder={t('Password')}
+          error={!!errors.password}
+          validationText={errors.password?.message}
+          suffixIcon={
+            <PasswordVisibilityIcon
+              passwordInputType={passwordInputType}
+              setPasswordInputType={setPasswordInputType}
+            />
+          }
+          {...register('password')}
+        />
+      </InputsContainer>
+    </ContentContainer>
+  );
+}
diff --git a/src/libs/layout/unlock-vault/index.tsx b/src/libs/layout/unlock-vault/index.tsx
index d9fc924e4..c2d288218 100644
--- a/src/libs/layout/unlock-vault/index.tsx
+++ b/src/libs/layout/unlock-vault/index.tsx
@@ -9,7 +9,6 @@ import {
   selectPasswordHash,
   selectPasswordSaltHash
 } from '@background/redux/keys/selectors';
-import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
 import { unlockVault } from '@background/redux/sagas/actions';
 import { UnlockVault } from '@background/redux/sagas/types';
 import { dispatchToMainStore } from '@background/redux/utils';
@@ -21,44 +20,39 @@ import { useLockWalletWhenNoMoreRetries } from '@hooks/use-lock-wallet-when-no-m
 import unlockAnimation from '@libs/animations/unlock_animation.json';
 import {
   AlignedFlexRow,
-  ContentContainer,
-  FooterButtonsAbsoluteContainer,
-  IllustrationContainer,
-  InputsContainer,
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow,
   LockedRouterPath,
-  ParagraphContainer,
+  PopupLayout,
   SpacingSize
 } from '@libs/layout';
-import {
-  Button,
-  Input,
-  PasswordInputType,
-  PasswordVisibilityIcon,
-  SvgIcon,
-  Typography
-} from '@libs/ui/components';
+import { Button, Typography } from '@libs/ui/components';
 import {
   UnlockWalletFormValues,
   useUnlockWalletForm
 } from '@libs/ui/forms/unlock-wallet';
 
+import { UnlockVaultPageContent } from './content';
+
 interface UnlockMessageEvent extends MessageEvent {
   data: UnlockVault;
 }
 
-export function UnlockVaultPageContent() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
+interface UnlockVaultPageProps {
+  popupLayout?: boolean;
+}
+
+export const UnlockVaultPage = ({ popupLayout }: UnlockVaultPageProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
-  const [passwordInputType, setPasswordInputType] =
-    useState<PasswordInputType>('password');
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const passwordHash = useSelector(selectPasswordHash);
   const passwordSaltHash = useSelector(selectPasswordSaltHash);
   const keyDerivationSaltHash = useSelector(selectKeyDerivationSaltHash);
   const vaultCipher = useSelector(selectVaultCipher);
-  const hasLoginRetryLockoutTime = useSelector(selectHasLoginRetryLockoutTime);
 
   if (passwordHash == null || passwordSaltHash == null) {
     throw Error("Password doesn't exist");
@@ -153,111 +147,58 @@ export function UnlockVaultPageContent() {
 
   useLockWalletWhenNoMoreRetries(resetField);
 
-  if (hasLoginRetryLockoutTime) {
-    return (
-      <>
-        <ContentContainer>
-          <IllustrationContainer>
-            <SvgIcon
-              src="assets/illustrations/password-lock.svg"
-              width={210}
-              height={120}
+  const footer = (
+    <FooterButtonsContainer>
+      <Button type="submit" disabled={isLoading}>
+        {isLoading ? (
+          <AlignedFlexRow gap={SpacingSize.Small}>
+            <Player
+              renderer={'svg'}
+              autoplay
+              loop
+              src={unlockAnimation}
+              style={{ width: '24px', height: '24px' }}
             />
-          </IllustrationContainer>
-          <ParagraphContainer top={SpacingSize.XL}>
-            <Typography type="header">
-              <Trans t={t}>
-                Please wait before the next attempt to unlock your wallet
-              </Trans>
-            </Typography>
-          </ParagraphContainer>
-          <ParagraphContainer top={SpacingSize.Medium}>
-            <Typography type="body" color="contentSecondary">
-              <Trans t={t}>
-                You’ve reached the maximum number of unlock attempts. For
-                security reasons, you will need to wait a brief while before you
-                can attempt again.
-              </Trans>
-            </Typography>
-          </ParagraphContainer>
-          <ParagraphContainer top={SpacingSize.Medium}>
-            <Typography type="body" color="contentSecondary">
-              <Trans t={t}>
-                You can try again in <b>5 mins.</b>
-              </Trans>
-            </Typography>
-          </ParagraphContainer>
-        </ContentContainer>
-      </>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit(handleUnlockVault)}>
-      <ContentContainer>
-        <IllustrationContainer>
-          <SvgIcon
-            src="assets/illustrations/locked-wallet.svg"
-            width={200}
-            height={120}
-          />
-        </IllustrationContainer>
-        <ParagraphContainer top={SpacingSize.XL}>
-          <Typography type="header">
-            <Trans t={t}>Your wallet is locked</Trans>
-          </Typography>
-        </ParagraphContainer>
-        <ParagraphContainer top={SpacingSize.Medium}>
-          <Typography type="body" color="contentSecondary">
-            <Trans t={t}>Please enter your password to unlock.</Trans>
-          </Typography>
-        </ParagraphContainer>
-        <InputsContainer>
-          <Input
-            type={passwordInputType}
-            placeholder={t('Password')}
-            error={!!errors.password}
-            validationText={errors.password?.message}
-            suffixIcon={
-              <PasswordVisibilityIcon
-                passwordInputType={passwordInputType}
-                setPasswordInputType={setPasswordInputType}
-              />
-            }
-            {...register('password')}
-          />
-        </InputsContainer>
-      </ContentContainer>
-      <FooterButtonsAbsoluteContainer>
-        <Button type="submit" disabled={isLoading}>
-          {isLoading ? (
-            <AlignedFlexRow gap={SpacingSize.Small}>
-              <Player
-                renderer="svg"
-                autoplay
-                loop
-                src={unlockAnimation}
-                style={{ width: '24px', height: '24px' }}
-              />
-              <Typography type="bodySemiBold">
-                <Trans t={t}>Unlocking...</Trans>
-              </Typography>
-            </AlignedFlexRow>
-          ) : (
             <Typography type="bodySemiBold">
-              <Trans t={t}>Unlock wallet</Trans>
+              <Trans t={t}>Unlocking...</Trans>
             </Typography>
-          )}
-        </Button>
-        <Button
-          disabled={isLoading}
-          type="button"
-          color="secondaryRed"
-          onClick={() => navigate(LockedRouterPath.ResetVault)}
-        >
-          {t('Reset wallet')}
-        </Button>
-      </FooterButtonsAbsoluteContainer>
-    </form>
+          </AlignedFlexRow>
+        ) : (
+          <Typography type="bodySemiBold">
+            <Trans t={t}>Unlock wallet</Trans>
+          </Typography>
+        )}
+      </Button>
+      <Button
+        disabled={isLoading}
+        type="button"
+        color="secondaryRed"
+        onClick={() => navigate(LockedRouterPath.ResetVault)}
+      >
+        {t('Reset wallet')}
+      </Button>
+    </FooterButtonsContainer>
   );
-}
+
+  return popupLayout ? (
+    <PopupLayout
+      variant="form"
+      onSubmit={handleSubmit(handleUnlockVault)}
+      renderHeader={() => <HeaderPopup />}
+      renderContent={() => (
+        <UnlockVaultPageContent register={register} errors={errors} />
+      )}
+      renderFooter={() => footer}
+    />
+  ) : (
+    <LayoutWindow
+      variant="form"
+      onSubmit={handleSubmit(handleUnlockVault)}
+      renderHeader={() => <HeaderPopup />}
+      renderContent={() => (
+        <UnlockVaultPageContent register={register} errors={errors} />
+      )}
+      renderFooter={() => footer}
+    />
+  );
+};
diff --git a/src/libs/ui/components/modal/modal.tsx b/src/libs/ui/components/modal/modal.tsx
index 73f08b69f..eb536cb92 100644
--- a/src/libs/ui/components/modal/modal.tsx
+++ b/src/libs/ui/components/modal/modal.tsx
@@ -33,7 +33,7 @@ const slideOutToBottom = keyframes`
 const ModalContainer = styled.div<{
   placement: 'top' | 'bottom' | 'fullBottom';
 }>(({ theme, placement }) => ({
-  position: 'fixed',
+  position: 'absolute',
 
   margin: '0 16px',