diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c1cbc8816..fe5417389 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import type { Preview } from '@storybook/react-vite'
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
 import { ThemeProvider } from 'next-themes'
 import { I18nextProvider } from 'react-i18next'
+import { MemoryRouter } from 'react-router-dom'
 import { CoreTypes, GlobalTypes } from 'storybook/internal/csf'
 import i18n from '../src/i18n/config'
 import '../src/index.css'
@@ -63,6 +64,24 @@ const preview: Preview = {
     },
   },
 }
+
+const withTheme = (Story: React.ComponentType, context: GlobalContext) => {
+  const { backgrounds } = context.globals
+  return (
+    <ThemeProvider forcedTheme={backgrounds.value}>
+      <Story />
+    </ThemeProvider>
+  )
+}
+
+const withMemoryRouter = (Story: React.ComponentType, context: GlobalContext) => {
+  return (
+    <MemoryRouter>
+      <Story />
+    </MemoryRouter>
+  )
+}
+
 const withI18next = (Story: React.ComponentType, context: GlobalContext) => {
   const { locale } = context.globals
 
@@ -79,15 +98,6 @@ const withI18next = (Story: React.ComponentType, context: GlobalContext) => {
   )
 }
 
-const withTheme = (Story: React.ComponentType, context: GlobalContext) => {
-  const { backgrounds } = context.globals
-  return (
-    <ThemeProvider forcedTheme={backgrounds.value}>
-      <Story />
-    </ThemeProvider>
-  )
-}
-
 // Use only when necessary! Try to pass data from queries to
 // components so they can be tested independently from an API.
 export const withQueryClient = (Story: React.ComponentType) => {
@@ -100,6 +110,6 @@ export const withQueryClient = (Story: React.ComponentType) => {
 }
 
 // export decorators for storybook to wrap your stories in
-export const decorators = [withTheme, withI18next]
+export const decorators = [withTheme, withMemoryRouter, withI18next]
 
 export default preview
diff --git a/package-lock.json b/package-lock.json
index 3d1c3b6f0..4ae20e9a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,7 +52,7 @@
         "zustand": "5.0.10"
       },
       "devDependencies": {
-        "@chromatic-com/storybook": "4.1.3",
+        "@chromatic-com/storybook": "5.0.0",
         "@eslint/js": "9.39.2",
         "@playwright/test": "1.57.0",
         "@storybook/addon-a11y": "10.1.11",
@@ -399,14 +399,14 @@
       }
     },
     "node_modules/@chromatic-com/storybook": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-4.1.3.tgz",
-      "integrity": "sha512-hc0HO9GAV9pxqDE6fTVOV5KeLpTiCfV8Jrpk5ogKLiIgeq2C+NPjpt74YnrZTjiK8E19fYcMP+2WY9ZtX7zHmw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-5.0.0.tgz",
+      "integrity": "sha512-8wUsqL8kg6R5ue8XNE7Jv/iD1SuE4+6EXMIGIuE+T2loBITEACLfC3V8W44NJviCLusZRMWbzICddz0nU0bFaw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@neoconfetti/react": "^1.0.0",
-        "chromatic": "^13.3.3",
+        "chromatic": "^13.3.4",
         "filesize": "^10.0.12",
         "jsonfile": "^6.1.0",
         "strip-ansi": "^7.1.0"
@@ -416,7 +416,7 @@
         "yarn": ">=1.22.18"
       },
       "peerDependencies": {
-        "storybook": "^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
+        "storybook": "^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
       }
     },
     "node_modules/@conventional-changelog/git-client": {
diff --git a/package.json b/package.json
index 5a37d5500..85bbdacbf 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "zustand": "5.0.10"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.3",
+    "@chromatic-com/storybook": "5.0.0",
     "@eslint/js": "9.39.2",
     "@playwright/test": "1.57.0",
     "@storybook/addon-a11y": "10.1.11",
diff --git a/src/App.tsx b/src/App.tsx
index 3415c2cf6..a73a1083c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,6 @@ import { lockwalletOptions } from '@joinmarket-webui/joinmarket-api-ts/@tanstack
 import { token } from '@joinmarket-webui/joinmarket-api-ts/jm'
 import { QueryClientProvider, useQuery } from '@tanstack/react-query'
 import type { TFunction } from 'i18next'
-import { Loader2Icon } from 'lucide-react'
 import { ThemeProvider } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import {
@@ -18,11 +17,11 @@ import {
 } from 'react-router-dom'
 import { toast } from 'sonner'
 import { useStore } from 'zustand'
-import CreateWalletPage from '@/components/CreateWalletPage'
 import LoginPage from '@/components/LoginPage'
 import { LogsPage } from '@/components/LogsPage'
 import MainWalletPage from '@/components/MainWalletPage'
 import SwitchWalletPage from '@/components/SwitchWalletPage'
+import CreateWalletPage from '@/components/create/CreateWalletPage'
 import { EarnPage } from '@/components/earn/EarnPage'
 import ErrorPage from '@/components/error/ErrorPage'
 import { Layout } from '@/components/layout/Layout'
@@ -45,6 +44,7 @@ import { queryClient } from '@/lib/queryClient'
 import { setIntervalDebounced, walletDisplayName, type WalletFileName } from '@/lib/utils'
 import { authStore } from '@/store/authStore'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
+import { Spinner } from './components/ui/spinner'
 import { WalletJarsDetailsPage } from './components/wallet/WalletJarsDetailsPage'
 import { JamSessionInfoContextProvider } from './context/JamSessionInfoContextProvider'
 
@@ -202,7 +202,7 @@ const Loading = () => {
   const { t } = useTranslation()
   return (
     <div className="m-2 flex items-center justify-center gap-2">
-      <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+      <Spinner className="motion-reduce:hidden" />
       {t('global.loading')}
     </div>
   )
diff --git a/src/components/CreateWalletPage.tsx b/src/components/CreateWalletPage.tsx
deleted file mode 100644
index 489e70ff2..000000000
--- a/src/components/CreateWalletPage.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-import React, { useState } from 'react'
-import { type CreateWalletResponse, createwallet, session } from '@joinmarket-webui/joinmarket-api-ts/jm'
-import { AlertCircleIcon, EyeIcon, EyeOffIcon, Loader2Icon, LockIcon, WalletIcon } from 'lucide-react'
-import { Trans, useTranslation } from 'react-i18next'
-import { Link, useNavigate } from 'react-router-dom'
-import { toast } from 'sonner'
-import { useStore } from 'zustand'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { routes } from '@/constants/routes'
-import { useApiClient } from '@/hooks/useApiClient'
-import { hashPassword } from '@/lib/hash'
-import { walletDisplayName, JM_WALLET_FILE_EXTENSION, walletDisplayNameToFileName } from '@/lib/utils'
-import type { WalletFileName } from '@/lib/utils'
-import { authStore } from '@/store/authStore'
-import { jmSessionStore } from '@/store/jmSessionStore'
-import { SeedPhraseGrid } from './ui/jam/SeedPhraseGrid'
-import PreventLeavingPageByMistake from './utils/PreventLeavingPageByMistake'
-
-const MAX_WALLET_NAME_LENGTH = 240 - JM_WALLET_FILE_EXTENSION.length
-const validateWalletName = (input: string) =>
-  input.length > 0 && input.length <= MAX_WALLET_NAME_LENGTH && /^[\w-]+$/.test(input)
-
-interface SeedPhraseContentProps {
-  seedphrase: string[]
-  onConfirm: () => Promise<void>
-}
-const SeedPhraseContent = ({ seedphrase, onConfirm }: SeedPhraseContentProps) => {
-  return (
-    <div className="space-y-6">
-      <div className="bg-muted rounded-lg p-4">
-        <SeedPhraseGrid value={seedphrase} blurred={false} />
-      </div>
-
-      <Alert>
-        <AlertCircleIcon className="h-4 w-4" />
-        <AlertDescription>
-          {/* TODO: i18n */}
-          <strong>Important:</strong> Write down this seed phrase and store it safely. It's the only way to recover your
-          wallet if you lose access.
-        </AlertDescription>
-      </Alert>
-
-      <Button onClick={async () => await onConfirm()} className="w-full" size="lg">
-        {/* TODO: i18n */}I have saved my seed phrase
-      </Button>
-    </div>
-  )
-}
-
-type CreateWalletResponseWithHashedPassword = {
-  response: CreateWalletResponse
-  hashedPassword?: string
-}
-
-const CreateWalletPage = () => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const client = useApiClient()
-  const jmSessionInfo = useStore(jmSessionStore, (state) => state.state)
-  const { clear: clearAuthState, update: updateAuthState } = useStore(authStore, (state) => state)
-  const [walletName, setWalletName] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [createWalletResponse, setCreateWalletResponse] = useState<CreateWalletResponseWithHashedPassword>()
-  const [step, setStep] = useState<'create' | 'seed' | 'confirm'>('create')
-
-  // TODO: use react-hook-form and yup schema
-  const handleCreateWallet = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    const sanitizedWalletName = walletName.trim()
-    if (!validateWalletName(sanitizedWalletName)) {
-      toast.error(t('create_wallet.feedback_invalid_wallet_name'))
-      return
-    }
-
-    if (password.length < 1) {
-      toast.error(t('create_wallet.feedback_invalid_password'))
-      return
-    }
-
-    if (password !== confirmPassword) {
-      toast.error(t('create_wallet.feedback_invalid_password_confirm'))
-      return
-    }
-
-    try {
-      setIsLoading(true)
-
-      // Clear any existing local session
-      clearAuthState()
-
-      // Check if there's an active session on the server
-      try {
-        const { data: sessionInfo } = await session({ client })
-        if (sessionInfo?.session === true) {
-          console.warn('Active session detected:', sessionInfo)
-          toast.error(
-            `Cannot create wallet as "${walletDisplayName(
-              (sessionInfo?.wallet_name || 'Unknown') as WalletFileName,
-            )}" wallet is currently active.`,
-            {
-              description: (
-                <>
-                  Alternatively, you can{' '}
-                  <a href={routes.login} className="font-medium underline hover:no-underline">
-                    log in with the existing wallet
-                  </a>{' '}
-                  instead.
-                </>
-              ),
-              duration: 10_000,
-            },
-          )
-          return
-        }
-      } catch (sessionError) {
-        console.warn('Could not check session status:', sessionError)
-        // Continue anyway, wallet creation might still work
-      }
-
-      const walletFileName = walletDisplayNameToFileName(walletName)
-      const { data: createData, error: createError } = await createwallet({
-        client,
-        body: {
-          walletname: walletFileName,
-          password,
-          wallettype: 'sw-fb',
-        },
-      })
-
-      if (createError) {
-        throw createError
-      }
-
-      let hashedPassword: string | undefined = undefined
-      try {
-        hashedPassword = await hashPassword(password, createData?.walletname)
-      } catch (hashError) {
-        console.warn('Failed to hash password, continuing without hash verification:', hashError)
-      }
-
-      if (createData?.seedphrase) {
-        setCreateWalletResponse({
-          response: createData,
-          hashedPassword,
-        })
-        setStep('seed')
-      } else {
-        throw new Error(/*TODO: i18n*/ 'No seedphrase returned')
-      }
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to create wallet'
-      toast.error(errorMessage)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleConfirmSeed = async ({ response, hashedPassword }: CreateWalletResponseWithHashedPassword) => {
-    updateAuthState({
-      walletFileName: response.walletname as WalletFileName,
-      auth: { token: response.token, refresh_token: response.refresh_token }, // We'll need to unlock it properly later
-      hashed_password: hashedPassword,
-    })
-
-    await navigate(routes.home)
-  }
-
-  // TODO: use react-hook-form and yup schema
-  const renderCreateForm = () => (
-    <form onSubmit={handleCreateWallet} className="space-y-4" noValidate>
-      <div className="space-y-2">
-        <Label htmlFor="wallet-name">{t('create_wallet.label_wallet_name')}</Label>
-        <Input
-          id="wallet-name"
-          type="text"
-          value={walletName}
-          onChange={(e) => setWalletName(e.target.value)}
-          disabled={isLoading}
-          placeholder={t('create_wallet.placeholder_wallet_name')}
-          required
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="password">{t('create_wallet.label_password')}</Label>
-        <div className="relative">
-          <LockIcon className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
-          <Input
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={isLoading}
-            placeholder={t('create_wallet.placeholder_password')}
-            maxLength={MAX_WALLET_NAME_LENGTH}
-            className="pr-10 pl-10"
-            required
-          />
-          <Button
-            tabIndex={-1}
-            type="button"
-            variant="link"
-            size="icon"
-            className="absolute top-1/2 right-0 -translate-y-1/2 transform"
-            onClick={() => {
-              setShowConfirmPassword(false)
-              setShowPassword((val) => !val)
-            }}
-          >
-            {showPassword ? <EyeIcon /> : <EyeOffIcon />}
-          </Button>
-        </div>
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="confirm-password">{t('create_wallet.label_password_confirm')}</Label>
-        <div className="relative">
-          <LockIcon className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
-          <Input
-            id="confirm-password"
-            type={showConfirmPassword ? 'text' : 'password'}
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            disabled={isLoading}
-            placeholder={t('create_wallet.placeholder_password_confirm')}
-            className="pr-10 pl-10"
-            required
-          />
-          <Button
-            tabIndex={-1}
-            type="button"
-            variant="link"
-            size="icon"
-            className="absolute top-1/2 right-0 -translate-y-1/2 transform"
-            onClick={() => {
-              setShowPassword(false)
-              setShowConfirmPassword((val) => !val)
-            }}
-          >
-            {showConfirmPassword ? <EyeIcon /> : <EyeOffIcon />}
-          </Button>
-        </div>
-      </div>
-
-      <Button type="submit" className="w-full" disabled={isLoading} size="lg">
-        {isLoading ? (
-          <>
-            <Loader2Icon className="animate-spin motion-reduce:hidden" />
-            {t('create_wallet.button_creating')}
-          </>
-        ) : (
-          <>{t('create_wallet.button_create')}</>
-        )}
-      </Button>
-    </form>
-  )
-
-  return (
-    <div className="from-background to-muted flex min-h-screen items-center justify-center bg-gradient-to-br p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="flex flex-col items-center space-y-2">
-          <div className="bg-primary/10 mb-4 flex h-12 w-12 items-center justify-center rounded-full">
-            <WalletIcon className="text-primary" />
-          </div>
-          <CardTitle className="text-2xl font-bold">
-            {step === 'create' && <>{t('create_wallet.title')}</>}
-            {/* TODO: i18n */ step === 'seed' && 'Save Your Seed Phrase'}
-          </CardTitle>
-          <CardDescription>
-            {/* TODO: i18n */ step === 'seed' && "This is your wallet's recovery phrase"}
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          {step === 'seed' && (
-            <>
-              <PreventLeavingPageByMistake />
-              <SeedPhraseContent
-                seedphrase={createWalletResponse?.response.seedphrase?.split(/\s+/) || []}
-                onConfirm={async () => await handleConfirmSeed(createWalletResponse!)}
-              />
-            </>
-          )}
-          {step === 'create' && (
-            <>
-              {jmSessionInfo?.session === true ? (
-                <Alert variant="warning">
-                  <AlertCircleIcon />
-                  <AlertDescription>
-                    <p>
-                      <Trans
-                        i18nKey="create_wallet.alert_other_wallet_unlocked"
-                        values={{
-                          walletName: walletDisplayName((jmSessionInfo?.wallet_name || 'Unknown') as WalletFileName),
-                        }}
-                      >
-                        Currently <strong>walletName</strong> is active. You need to lock it first.
-                        <Link to={routes.login} className="font-semibold underline">
-                          Go back
-                        </Link>
-                      </Trans>
-                    </p>
-                  </AlertDescription>
-                </Alert>
-              ) : (
-                <>{renderCreateForm()}</>
-              )}
-              <div className="text-center">
-                <p className="text-muted-foreground text-sm">
-                  {/* TODO: i18n */}
-                  Already have a wallet?{' '}
-                  <Button variant="link" asChild>
-                    <Link to={routes.login} className="font-semibold">
-                      Sign in here
-                    </Link>
-                  </Button>
-                </p>
-              </div>
-            </>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-export default CreateWalletPage
diff --git a/src/components/LoginPage.tsx b/src/components/LoginPage.tsx
index a4233afb2..754327aa3 100644
--- a/src/components/LoginPage.tsx
+++ b/src/components/LoginPage.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { listwalletsOptions, unlockwalletMutation } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { AlertCircleIcon, EyeIcon, EyeOffIcon, Loader2Icon, LockIcon, RefreshCwIcon, WalletIcon } from 'lucide-react'
+import { AlertCircleIcon, EyeIcon, EyeOffIcon, LockIcon, RefreshCwIcon, WalletIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
@@ -21,6 +21,7 @@ import { cn, shortenStringMiddle, walletDisplayName } from '@/lib/utils'
 import type { WalletFileName } from '@/lib/utils'
 import { authStore, type AuthState } from '@/store/authStore'
 import { Badge } from './ui/badge'
+import { Spinner } from './ui/spinner'
 
 const LoginFormSkeleton = () => {
   return (
@@ -132,7 +133,7 @@ const LoginForm = ({ wallets, isSubmitting, onSubmit, disabled }: LoginFormProps
         <Button type="submit" className="w-full" disabled={disabled || isSubmitting || !selectedWallet} size="lg">
           {isSubmitting ? (
             <>
-              <Loader2Icon className="animate-spin motion-reduce:hidden" />
+              <Spinner className="motion-reduce:hidden" />
               {t('wallets.wallet_preview.button_unlocking')}
             </>
           ) : (
@@ -221,7 +222,7 @@ const LoginPage = () => {
         <CardHeader className="flex flex-col items-center space-y-2">
           <div className="bg-primary/10 mb-4 flex h-12 w-12 items-center justify-center rounded-full">
             {listWalletsFetching ? (
-              <Loader2Icon className="animate-spin" />
+              <Spinner className="size-6" />
             ) : (
               <WalletIcon className="text-primary" onClick={async () => await listWalletsRefetch()} />
             )}
diff --git a/src/components/LogsPage.tsx b/src/components/LogsPage.tsx
index 2077c7249..ebb1d39e9 100644
--- a/src/components/LogsPage.tsx
+++ b/src/components/LogsPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
-import { AlertTriangleIcon, Loader2Icon, RefreshCwIcon, DownloadIcon, ArrowDownIcon } from 'lucide-react'
+import { AlertTriangleIcon, RefreshCwIcon, DownloadIcon, ArrowDownIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from 'zustand'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -10,6 +10,7 @@ import { fetchLog } from '@/lib/api/logs'
 import { cn, delayedPromise } from '@/lib/utils'
 import { authStore } from '@/store/authStore'
 import PageTitle from './ui/jam/PageTitle'
+import { Spinner } from './ui/spinner'
 
 const JMWALLETD_LOG_FILE_NAME = 'jmwalletd_stdout.log'
 
@@ -95,11 +96,7 @@ function LogContent({ value, refresh }: LogContentProps) {
             {t('global.download')}
           </Button>
           <Button variant="outline" onClick={handleRefresh} disabled={isLoadingRefresh} title={t('global.refresh')}>
-            <RefreshCwIcon
-              className={cn({
-                'animate-spin': isLoadingRefresh,
-              })}
-            />
+            <RefreshCwIcon className={cn({ 'animate-spin': isLoadingRefresh })} />
             {t('global.refresh')}
           </Button>
         </div>
@@ -194,7 +191,7 @@ export const LogsPage = () => {
     return (
       <div className="mx-auto max-w-4xl space-y-3 p-4">
         <div className="m-2 flex items-center justify-center gap-2">
-          <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+          <Spinner className="motion-reduce:hidden" />
           {t('global.loading')}
         </div>
       </div>
diff --git a/src/components/MainWalletPage.tsx b/src/components/MainWalletPage.tsx
index 8c7e8cfa8..9003d0f07 100644
--- a/src/components/MainWalletPage.tsx
+++ b/src/components/MainWalletPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { DownloadIcon, InfoIcon, Loader2Icon, RefreshCwIcon, UploadIcon } from 'lucide-react'
+import { DownloadIcon, InfoIcon, RefreshCwIcon, UploadIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -16,6 +16,7 @@ import {
 } from '@/context/JamWalletInfoContext'
 import type { WalletFileName } from '@/lib/utils'
 import { cn, shortenStringMiddle, walletDisplayName } from '@/lib/utils'
+import { Spinner } from './ui/spinner'
 import { WalletJarsDetailsOverlay } from './wallet/WalletJarsDetailsOverlay'
 
 interface MainWalletPageProps {
@@ -50,14 +51,14 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
       />
       <div className="flex flex-col items-center justify-center gap-8 px-4 py-12">
         <div className="flex w-full max-w-xl flex-col items-center justify-center gap-2">
-          <p className="text-muted-foreground hover:text-foreground text-xl" title={walletName}>
+          <p className="text-muted-foreground hover:text-foreground text-xl select-all" title={walletName}>
             {walletNameTitle}
           </p>
 
           <div className="flex min-h-[56px] items-center justify-center">
             {isLoading ? (
               <div className="flex items-center justify-center gap-2">
-                <Loader2Icon className="size-4 animate-spin motion-reduce:hidden" />
+                <Spinner className="motion-reduce:hidden" />
                 {t('global.loading')}
               </div>
             ) : (
@@ -111,7 +112,7 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
           <div className="flex min-h-[128px] items-center justify-center gap-4">
             {isFetching ? (
               <div className="flex flex-1 items-center justify-center gap-2 py-8">
-                <Loader2Icon className="size-4 animate-spin motion-reduce:hidden" />
+                <Spinner className="motion-reduce:hidden" />
                 {t('global.loading')}
               </div>
             ) : (
diff --git a/src/components/SwitchWalletPage.tsx b/src/components/SwitchWalletPage.tsx
index 4334c665d..319efd492 100644
--- a/src/components/SwitchWalletPage.tsx
+++ b/src/components/SwitchWalletPage.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'
 import { listwalletsOptions, lockwalletOptions } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/react-query'
 import type { ErrorMessage } from '@joinmarket-webui/joinmarket-api-ts/jm'
 import { useQuery } from '@tanstack/react-query'
-import { AlertCircleIcon, Loader2Icon, LockIcon, RefreshCwIcon, UnlockIcon, WalletIcon } from 'lucide-react'
+import { AlertCircleIcon, LockIcon, RefreshCwIcon, UnlockIcon, WalletIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
@@ -12,9 +12,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Skeleton } from '@/components/ui/skeleton'
 import { routes } from '@/constants/routes'
 import { useApiClient } from '@/hooks/useApiClient'
-import { sortWallets, walletDisplayName } from '@/lib/utils'
+import { shortenStringMiddle, sortWallets, walletDisplayName } from '@/lib/utils'
 import type { WalletFileName } from '@/lib/utils'
 import { authStore } from '@/store/authStore'
+import { Spinner } from './ui/spinner'
 
 const SwitchWalletFormSkeleton = () => {
   return (
@@ -102,7 +103,7 @@ const SwitchWalletPage = ({ walletFileName }: SwitchWalletPageProps) => {
         <CardHeader className="space-y-2 text-center">
           <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
             {listWalletsFetching ? (
-              <Loader2Icon className="h-6 w-6 animate-spin" />
+              <Spinner className="size-6" />
             ) : (
               <WalletIcon className="text-primary h-6 w-6" onClick={async () => await listWalletsRefetch()} />
             )}
@@ -155,10 +156,12 @@ const SwitchWalletPage = ({ walletFileName }: SwitchWalletPageProps) => {
                             wallet === walletFileName ? 'bg-primary/5 border-primary/20' : 'bg-muted/30'
                           }`}
                         >
-                          <div className="flex items-center justify-between">
+                          <div className="flex items-center justify-between truncate">
                             <div className="flex items-center gap-2">
                               <WalletIcon className="h-4 w-4" />
-                              <span className="text-sm font-medium">{walletDisplayName(wallet)}</span>
+                              <span className="text-sm font-medium">
+                                {shortenStringMiddle(walletDisplayName(wallet) ?? '...', 63)}
+                              </span>
                             </div>
                             {wallet === walletFileName && (
                               <span className="text-muted-foreground text-xs">
@@ -189,7 +192,7 @@ const SwitchWalletPage = ({ walletFileName }: SwitchWalletPageProps) => {
                               >
                                 {lockCurrentWallet.isFetching ? (
                                   <>
-                                    <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+                                    <Spinner className="motion-reduce:hidden" />
                                     {t('settings.button_locking_wallet')}
                                   </>
                                 ) : currentWalletLocked ? (
diff --git a/src/components/create/CreateStepConfirm.tsx b/src/components/create/CreateStepConfirm.tsx
new file mode 100644
index 000000000..5bbecea47
--- /dev/null
+++ b/src/components/create/CreateStepConfirm.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react'
+import { AlertCircleIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import type { WalletFileName } from '@/lib/utils'
+import { MaskedText } from '../ui/jam/MaskedText'
+import { SeedPhraseGrid } from '../ui/jam/SeedPhraseGrid'
+import { Switch } from '../ui/switch'
+
+interface CreateStepConfirmProps {
+  walletFileName: WalletFileName
+  password: string
+  seedphrase: string[]
+  onConfirm: () => Promise<void>
+}
+
+export const CreateStepConfirm = ({ walletFileName, password, seedphrase, onConfirm }: CreateStepConfirmProps) => {
+  const [revealSensitiveInfo, setRevealSensitiveInfo] = useState({ checked: false, dirty: false })
+  const [backupConfirmed, setBackupConfirmed] = useState(false)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (backupConfirmed) return
+
+    const toastId = toast.message(
+      <Alert>
+        <AlertCircleIcon />
+        <AlertTitle>
+          {/* TODO: i18n */}
+          Save Your Seed Phrase
+        </AlertTitle>
+        <AlertDescription>
+          {/* TODO: change i18n key ("alert_description") */}
+          {t('create_wallet.subtitle_wallet_created')}
+        </AlertDescription>
+      </Alert>,
+      {
+        duration: Infinity,
+        unstyled: true,
+      },
+    )
+
+    return () => {
+      toast.dismiss(toastId)
+    }
+  }, [backupConfirmed, t])
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <div>
+          <Label className="text-muted-foreground text-xs">{t('create_wallet.confirmation_label_wallet_name')}</Label>
+          <span className="text-sm font-semibold break-all select-all">{walletFileName}</span>
+        </div>
+        <div>
+          <Label className="text-muted-foreground text-xs">{t('create_wallet.confirmation_label_password')}</Label>
+          <MaskedText
+            className="font-mono text-sm font-semibold break-all slashed-zero select-none"
+            masked={!revealSensitiveInfo.checked}
+            maskedText="maskedmaskedmaskedmasked"
+          >
+            {password}
+          </MaskedText>
+        </div>
+        <div>
+          <Label className="text-muted-foreground text-xs">{/* i18n confirmation_label_seedphrase */}Seed Phrase</Label>
+          <div className="bg-muted rounded-lg p-2">
+            <SeedPhraseGrid value={seedphrase} masked={!revealSensitiveInfo.checked} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex justify-start gap-2">
+          <Switch
+            id="switch-reveal-seed"
+            checked={revealSensitiveInfo.checked}
+            onCheckedChange={(checked) => setRevealSensitiveInfo((it) => ({ ...it, checked, dirty: true }))}
+          />
+          <Label htmlFor="switch-reveal-seed">{t('create_wallet.confirmation_toggle_reveal_info')}</Label>
+        </div>
+
+        <div className="flex justify-start gap-2">
+          <Switch
+            id="switch-confirm-backup"
+            checked={backupConfirmed}
+            onCheckedChange={(checked) => setBackupConfirmed(checked)}
+            disabled={!revealSensitiveInfo.dirty}
+          />
+          <Label htmlFor="switch-confirm-backup">{t('create_wallet.confirmation_toggle_info_written_down')}</Label>
+        </div>
+      </div>
+
+      <Button
+        onClick={async () => await onConfirm()}
+        className="w-full"
+        size="lg"
+        disabled={!backupConfirmed || !revealSensitiveInfo.dirty}
+      >
+        {t('create_wallet.next_button')}
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/create/CreateStepDetailsInput.tsx b/src/components/create/CreateStepDetailsInput.tsx
new file mode 100644
index 000000000..08bd1c379
--- /dev/null
+++ b/src/components/create/CreateStepDetailsInput.tsx
@@ -0,0 +1,55 @@
+import type { ComponentProps } from 'react'
+import type { SessionResponse } from '@joinmarket-webui/joinmarket-api-ts/jm'
+import { AlertCircleIcon } from 'lucide-react'
+import { Trans } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { routes } from '@/constants/routes'
+import { walletDisplayName } from '@/lib/utils'
+import type { WalletFileName } from '@/lib/utils'
+import { CreateWalletForm } from './CreateWalletForm'
+
+type CreateStepDetailsInputProps = ComponentProps<typeof CreateWalletForm> & {
+  sessionInfo: SessionResponse | undefined
+}
+
+export const CreateStepDetailsInput = ({ onSubmit, isSubmitting, sessionInfo }: CreateStepDetailsInputProps) => {
+  return (
+    <>
+      {sessionInfo?.session === true ? (
+        <Alert variant="warning">
+          <AlertCircleIcon />
+          <AlertDescription>
+            <p>
+              <Trans
+                i18nKey="create_wallet.alert_other_wallet_unlocked"
+                values={{
+                  walletName: walletDisplayName((sessionInfo?.wallet_name || 'Unknown') as WalletFileName),
+                }}
+              >
+                Currently <strong>walletName</strong> is active. You need to lock it first.
+                <Link to={routes.login} className="font-semibold underline">
+                  Go back
+                </Link>
+              </Trans>
+            </p>
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <CreateWalletForm onSubmit={onSubmit} isSubmitting={isSubmitting} />
+      )}
+      <div className="text-center">
+        <p className="text-muted-foreground text-sm">
+          {/* TODO: i18n */}
+          Already have a wallet?{' '}
+          <Button variant="link" asChild>
+            <Link to={routes.login} className="font-semibold">
+              Sign in here
+            </Link>
+          </Button>
+        </p>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/create/CreateWalletForm.tsx b/src/components/create/CreateWalletForm.tsx
new file mode 100644
index 000000000..b67200bde
--- /dev/null
+++ b/src/components/create/CreateWalletForm.tsx
@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import { EyeIcon, EyeOffIcon, LockIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { MAX_WALLET_NAME_LENGTH } from '@/constants/jam'
+import { Spinner } from '../ui/spinner'
+
+type CreateWalletFormProps = {
+  onSubmit: (args: { walletName: string; password: string; confirmPassword: string }) => Promise<void>
+  isSubmitting: boolean
+}
+
+// TODO: use react-hook-form and yup schema
+export const CreateWalletForm = ({ onSubmit, isSubmitting }: CreateWalletFormProps) => {
+  const { t } = useTranslation()
+  const [walletName, setWalletName] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        onSubmit({
+          walletName,
+          password,
+          confirmPassword,
+        })
+      }}
+      className="space-y-4"
+      noValidate
+    >
+      <div className="space-y-2">
+        <Label htmlFor="wallet-name">{t('create_wallet.label_wallet_name')}</Label>
+        <Input
+          id="wallet-name"
+          type="text"
+          value={walletName}
+          onChange={(e) => setWalletName(e.target.value)}
+          disabled={isSubmitting}
+          placeholder={t('create_wallet.placeholder_wallet_name')}
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="password">{t('create_wallet.label_password')}</Label>
+        <div className="relative">
+          <LockIcon className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={isSubmitting}
+            placeholder={t('create_wallet.placeholder_password')}
+            maxLength={MAX_WALLET_NAME_LENGTH}
+            className="pr-10 pl-10"
+            required
+          />
+          <Button
+            tabIndex={-1}
+            type="button"
+            variant="link"
+            size="icon"
+            className="absolute top-1/2 right-0 -translate-y-1/2 transform"
+            onClick={() => {
+              setShowConfirmPassword(false)
+              setShowPassword((val) => !val)
+            }}
+          >
+            {showPassword ? <EyeIcon /> : <EyeOffIcon />}
+          </Button>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirm-password">{t('create_wallet.label_password_confirm')}</Label>
+        <div className="relative">
+          <LockIcon className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+          <Input
+            id="confirm-password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            disabled={isSubmitting}
+            placeholder={t('create_wallet.placeholder_password_confirm')}
+            className="pr-10 pl-10"
+            required
+          />
+          <Button
+            tabIndex={-1}
+            type="button"
+            variant="link"
+            size="icon"
+            className="absolute top-1/2 right-0 -translate-y-1/2 transform"
+            onClick={() => {
+              setShowPassword(false)
+              setShowConfirmPassword((val) => !val)
+            }}
+          >
+            {showConfirmPassword ? <EyeIcon /> : <EyeOffIcon />}
+          </Button>
+        </div>
+      </div>
+
+      <Button type="submit" className="w-full" disabled={isSubmitting} size="lg">
+        {isSubmitting ? (
+          <>
+            <Spinner className="motion-reduce:hidden" />
+            {t('create_wallet.button_creating')}
+          </>
+        ) : (
+          <>{t('create_wallet.button_create')}</>
+        )}
+      </Button>
+    </form>
+  )
+}
diff --git a/src/components/create/CreateWalletPage.tsx b/src/components/create/CreateWalletPage.tsx
new file mode 100644
index 000000000..b90423526
--- /dev/null
+++ b/src/components/create/CreateWalletPage.tsx
@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { type CreateWalletResponse, createwallet, session } from '@joinmarket-webui/joinmarket-api-ts/jm'
+import { CircleCheckBigIcon, WalletIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+import { useStore } from 'zustand'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { MAX_WALLET_NAME_LENGTH } from '@/constants/jam'
+import { routes } from '@/constants/routes'
+import { useApiClient } from '@/hooks/useApiClient'
+import { hashPassword } from '@/lib/hash'
+import { walletDisplayName, walletDisplayNameToFileName } from '@/lib/utils'
+import type { WalletFileName } from '@/lib/utils'
+import { authStore } from '@/store/authStore'
+import { jmSessionStore } from '@/store/jmSessionStore'
+import PreventLeavingPageByMistake from '../utils/PreventLeavingPageByMistake'
+import { CreateStepConfirm } from './CreateStepConfirm'
+import { CreateStepDetailsInput } from './CreateStepDetailsInput'
+
+const validateWalletName = (input: string) =>
+  input.length > 0 && input.length <= MAX_WALLET_NAME_LENGTH && /^[\w-]+$/.test(input)
+
+type WalletFormValues = { walletName: string; password: string; confirmPassword: string }
+
+type CreateWalletSuccessInfo = {
+  values: WalletFormValues
+  response: CreateWalletResponse
+  hashedPassword?: string
+}
+
+const CreateWalletPage = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const client = useApiClient()
+  const jmSessionInfo = useStore(jmSessionStore, (state) => state.state)
+  const { clear: clearAuthState, update: updateAuthState } = useStore(authStore, (state) => state)
+  const [isCreating, setIsCreating] = useState(false)
+  const [createWalletSuccessInfo, setCreateWalletSuccessInfo] = useState<CreateWalletSuccessInfo>()
+  const [step, setStep] = useState<'create' | 'seed' | 'confirm'>('create')
+
+  // TODO: use react-hook-form and yup schema
+  const handleCreateWallet = async ({ walletName, password, confirmPassword }: WalletFormValues) => {
+    const sanitizedWalletName = walletName.trim()
+    if (!validateWalletName(sanitizedWalletName)) {
+      toast.error(t('create_wallet.feedback_invalid_wallet_name'))
+      return
+    }
+
+    if (password.length < 1) {
+      toast.error(t('create_wallet.feedback_invalid_password'))
+      return
+    }
+
+    if (password !== confirmPassword) {
+      toast.error(t('create_wallet.feedback_invalid_password_confirm'))
+      return
+    }
+
+    const durationHintToastId = toast.loading(t('create_wallet.hint_duration_text'), {
+      id: 'alert-wallet-create-creating-duration-hint',
+      duration: Infinity,
+      position: 'top-center',
+    })
+    try {
+      setIsCreating(true)
+
+      // Clear any existing local session
+      clearAuthState()
+
+      // Check if there's an active session on the server
+      try {
+        const { data: sessionInfo } = await session({ client })
+        if (sessionInfo?.session === true) {
+          console.warn('Active session detected:', sessionInfo)
+          toast.error(
+            `Cannot create wallet as "${walletDisplayName(
+              (sessionInfo?.wallet_name || 'Unknown') as WalletFileName,
+            )}" wallet is currently active.`,
+            {
+              description: (
+                <>
+                  Alternatively, you can{' '}
+                  <a href={routes.login} className="font-medium underline hover:no-underline">
+                    log in with the existing wallet
+                  </a>{' '}
+                  instead.
+                </>
+              ),
+              duration: 10_000,
+            },
+          )
+          return
+        }
+      } catch (sessionError) {
+        console.warn('Could not check session status:', sessionError)
+        // Continue anyway, wallet creation might still work
+      }
+
+      const walletFileName = walletDisplayNameToFileName(walletName)
+      const { data: createData, error: createError } = await createwallet({
+        client,
+        body: {
+          walletname: walletFileName,
+          password,
+          wallettype: 'sw-fb',
+        },
+      })
+
+      if (createError) {
+        throw createError
+      }
+
+      let hashedPassword: string | undefined = undefined
+      try {
+        hashedPassword = await hashPassword(password, createData.walletname)
+      } catch (hashError) {
+        console.warn('Failed to hash password, continuing without hash verification:', hashError)
+      }
+
+      setCreateWalletSuccessInfo({
+        values: { walletName, password, confirmPassword },
+        response: createData,
+        hashedPassword,
+      })
+      setStep('seed')
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create wallet'
+      toast.error(errorMessage)
+    } finally {
+      setIsCreating(false)
+      toast.dismiss(durationHintToastId)
+    }
+  }
+
+  const handleConfirmSeed = async ({ response, hashedPassword }: CreateWalletSuccessInfo) => {
+    updateAuthState({
+      walletFileName: response.walletname as WalletFileName,
+      auth: { token: response.token, refresh_token: response.refresh_token }, // We'll need to unlock it properly later
+      hashed_password: hashedPassword,
+    })
+
+    await navigate(routes.home)
+  }
+
+  return (
+    <div className="from-background to-muted flex min-h-screen items-center justify-center bg-gradient-to-br p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="flex flex-col items-center space-y-2">
+          <div className="bg-primary/10 mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            {step === 'create' && <WalletIcon className="text-primary" />}
+            {step === 'seed' && <CircleCheckBigIcon className="text-primary" />}
+          </div>
+          <CardTitle className="text-2xl font-bold">
+            {step === 'create' && t('create_wallet.title')}
+            {step === 'seed' && t('create_wallet.title_wallet_created')}
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          {step === 'seed' && (
+            <>
+              <PreventLeavingPageByMistake />
+              <CreateStepConfirm
+                walletFileName={createWalletSuccessInfo!.response.walletname as WalletFileName}
+                password={createWalletSuccessInfo!.values.password}
+                seedphrase={createWalletSuccessInfo!.response.seedphrase?.split(/\s+/)}
+                onConfirm={async () => await handleConfirmSeed(createWalletSuccessInfo!)}
+              />
+            </>
+          )}
+          {step === 'create' && (
+            <CreateStepDetailsInput
+              onSubmit={handleCreateWallet}
+              isSubmitting={isCreating}
+              sessionInfo={jmSessionInfo}
+            />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default CreateWalletPage
diff --git a/src/components/earn/EarnForm.tsx b/src/components/earn/EarnForm.tsx
index a79340c24..6763965f2 100644
--- a/src/components/earn/EarnForm.tsx
+++ b/src/components/earn/EarnForm.tsx
@@ -1,6 +1,6 @@
 import { useId } from 'react'
 import { yupResolver } from '@hookform/resolvers/yup'
-import { HandshakeIcon, Loader2Icon, PercentIcon } from 'lucide-react'
+import { HandshakeIcon, PercentIcon } from 'lucide-react'
 import { useForm, useWatch } from 'react-hook-form'
 import type { Resolver, SubmitHandler } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -15,6 +15,7 @@ import * as JAM from '@/constants/jam'
 import type { OfferType } from '@/constants/jm'
 import { cn, factorToPercentage } from '@/lib/utils'
 import type { AmountSats } from '@/types/global'
+import { Spinner } from '../ui/spinner'
 
 const FieldPrefixSatSymbol = (
   <SatSymbol
@@ -249,7 +250,7 @@ export function EarnForm({
       >
         {isSubmitting || isWaitingMakerStart ? (
           <>
-            <Loader2Icon className="h-8 w-8 animate-spin text-gray-400 motion-reduce:hidden" />
+            <Spinner className="motion-reduce:hidden" />
             {t('earn.text_starting')}
           </>
         ) : (
diff --git a/src/components/earn/EarnPage.tsx b/src/components/earn/EarnPage.tsx
index 0b376bcc5..28be0e0c3 100644
--- a/src/components/earn/EarnPage.tsx
+++ b/src/components/earn/EarnPage.tsx
@@ -26,6 +26,7 @@ import type { WalletFileName } from '@/lib/utils'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
 import type { Milliseconds } from '@/types/global'
+import { Spinner } from '../ui/spinner'
 import { EarnForm, type EarnFormValues } from './EarnForm'
 import { FidelityBondCard } from './FidelityBondCard'
 import { OfferCard } from './OfferCard'
@@ -152,7 +153,7 @@ export const EarnPage = ({ walletFileName }: EarnPageProps) => {
     return (
       <div className="mx-auto max-w-4xl space-y-3 p-4">
         <div className="m-2 flex items-center justify-center gap-2">
-          <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+          <Spinner className="motion-reduce:hidden" />
           {t('global.loading')}
         </div>
       </div>
@@ -211,7 +212,7 @@ export const EarnPage = ({ walletFileName }: EarnPageProps) => {
           <Button type="button" onClick={() => onStop()} className="w-full" size="lg">
             {isWaitingMakerStop ? (
               <>
-                <Loader2Icon className="animate-spin motion-reduce:hidden" />
+                <Spinner className="motion-reduce:hidden" />
                 {t('earn.text_stopping')}
               </>
             ) : (
diff --git a/src/components/earn/OfferCard.tsx b/src/components/earn/OfferCard.tsx
index c1eeafe39..46f55fdc1 100644
--- a/src/components/earn/OfferCard.tsx
+++ b/src/components/earn/OfferCard.tsx
@@ -61,7 +61,7 @@ export function OfferCard({ className, value, nickname, children }: PropsWithChi
                 t('Offer Id')
               }
             </span>
-            <span className="text-md font-mono">
+            <span className="text-md font-mono select-all">
               {nickname}:{value?.oid}
             </span>
           </div>
@@ -73,10 +73,12 @@ export function OfferCard({ className, value, nickname, children }: PropsWithChi
             <span className="text-muted-foreground text-sm font-semibold">{t('earn.current.text_cjfee')}</span>
             <span className="text-sm">
               {isRelativeOffer(value?.ordertype || '') ? (
-                <>{factorToPercentage(parseFloat(value?.cjfee || '') || 0)}%</>
+                <span className="select-all">{factorToPercentage(parseFloat(value?.cjfee || '') || 0)}%</span>
               ) : (
                 <>
-                  <span className="tabular-nums">{formatAmount(parseInt(String(value?.cjfee || '0'), 10))}</span>
+                  <span className="tabular-nums select-all">
+                    {formatAmount(parseInt(String(value?.cjfee || '0'), 10))}
+                  </span>
                   {currencySymbol('sm')}
                 </>
               )}
@@ -88,7 +90,9 @@ export function OfferCard({ className, value, nickname, children }: PropsWithChi
           <div className="flex flex-col">
             <span className="text-muted-foreground text-sm font-semibold">{t('earn.current.text_minsize')}</span>
             <span className="text-sm">
-              <span className="tabular-nums">{formatAmount(parseInt(String(value?.minsize || '0'), 10))}</span>
+              <span className="tabular-nums select-all">
+                {formatAmount(parseInt(String(value?.minsize || '0'), 10))}
+              </span>
               {currencySymbol('sm')}
             </span>
           </div>
@@ -98,7 +102,9 @@ export function OfferCard({ className, value, nickname, children }: PropsWithChi
           <div className="flex flex-col">
             <span className="text-muted-foreground text-sm font-semibold">{t('earn.current.text_maxsize')}</span>
             <span className="text-sm">
-              <span className="tabular-nums">{formatAmount(parseInt(String(value?.maxsize || '0'), 10))}</span>
+              <span className="tabular-nums select-all">
+                {formatAmount(parseInt(String(value?.maxsize || '0'), 10))}
+              </span>
               {currencySymbol('sm')}
             </span>
           </div>
@@ -108,7 +114,9 @@ export function OfferCard({ className, value, nickname, children }: PropsWithChi
             <div className="flex flex-col">
               <span className="text-muted-foreground text-sm font-semibold">{t('earn.current.text_txfee')}</span>
               <span className="text-muted-foreground text-sm">
-                <span className="tabular-nums">{formatAmount(parseInt(String(value?.txfee || '0'), 10))}</span>
+                <span className="tabular-nums select-all">
+                  {formatAmount(parseInt(String(value?.txfee || '0'), 10))}
+                </span>
                 {currencySymbol('sm')}
               </span>
             </div>
diff --git a/src/components/layout/AppNavbar.tsx b/src/components/layout/AppNavbar.tsx
index 05ed23ead..f34c04b15 100644
--- a/src/components/layout/AppNavbar.tsx
+++ b/src/components/layout/AppNavbar.tsx
@@ -1,15 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import type { SessionResponse } from '@joinmarket-webui/joinmarket-api-ts/jm'
 import type { TFunction } from 'i18next'
-import {
-  Loader2Icon,
-  LockKeyholeIcon,
-  LogOutIcon,
-  PackageSearchIcon,
-  SettingsIcon,
-  ShuffleIcon,
-  WalletIcon,
-} from 'lucide-react'
+import { LockKeyholeIcon, LogOutIcon, PackageSearchIcon, SettingsIcon, ShuffleIcon, WalletIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Link, useNavigate, type NavigateFunction } from 'react-router-dom'
 import { DevBadge } from '@/components/dev/DevBadge'
@@ -22,6 +14,7 @@ import { routes } from '@/constants/routes'
 import type { RescanInfo } from '@/context/JamSessionInfoContext'
 import { cn, shortenStringMiddle } from '@/lib/utils'
 import type { AmountSats } from '@/types/global'
+import { Spinner } from '../ui/spinner'
 
 const WithActivityIndicator = ({ active, children }: PropsWithChildren<{ active: boolean }>) => {
   return (
@@ -63,7 +56,7 @@ const WalletPreview = ({
       <Link to={routes.home} className="flex items-center gap-2">
         <div className="flex h-8 w-8 items-center">
           {isLoading ? (
-            <Loader2Icon className="animate-spin text-gray-400" strokeWidth={3} />
+            <Spinner className="text-muted-foreground size-6 motion-reduce:hidden" strokeWidth={3} />
           ) : (
             <WalletIcon strokeWidth={1} />
           )}
diff --git a/src/components/orderbook/OrderbookContent.tsx b/src/components/orderbook/OrderbookContent.tsx
index d24b66d3c..1bab73622 100644
--- a/src/components/orderbook/OrderbookContent.tsx
+++ b/src/components/orderbook/OrderbookContent.tsx
@@ -2,7 +2,7 @@ import { useState, useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import type { RowModel } from '@tanstack/react-table'
 import type { i18n } from 'i18next'
-import { ChevronDownIcon, RefreshCwIcon, PlusIcon, AlertCircleIcon, Loader2Icon } from 'lucide-react'
+import { ChevronDownIcon, RefreshCwIcon, PlusIcon, AlertCircleIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from 'zustand'
 import { DevBadge } from '@/components/dev/DevBadge'
@@ -26,6 +26,7 @@ import { withQueryDelay } from '@/lib/queryClient'
 import { cn, factorToPercentage, isAbsoluteOffer, isRelativeOffer, pseudoRandomInteger, time } from '@/lib/utils'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
+import { Spinner } from '../ui/spinner'
 import { OrderbookTable, type OrderTableEntry } from './OrderbookTable'
 
 const offerToTableEntry = (
@@ -318,7 +319,7 @@ export const OrderbookContent = ({ enabled, className }: OrderbookContentProps)
       {isLoadingInitially ? (
         <div className="py-12">
           <div className="text-muted-foreground m-2 flex items-center justify-center gap-2">
-            <Loader2Icon className="h-5 w-5 animate-spin motion-reduce:hidden" />
+            <Spinner className="motion-reduce:hidden" />
             {t('global.loading')}
           </div>
         </div>
diff --git a/src/components/orderbook/OrderbookOverlay.tsx b/src/components/orderbook/OrderbookOverlay.tsx
index 095fa1eea..b33011255 100644
--- a/src/components/orderbook/OrderbookOverlay.tsx
+++ b/src/components/orderbook/OrderbookOverlay.tsx
@@ -15,14 +15,14 @@ export function OrderbookOverlay({ open, onOpenChange }: OrderbookOverlayProps)
   return (
     <Dialog open={open} onOpenChange={() => onOpenChange(false)}>
       <DialogContent className="data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom flex h-screen max-w-screen! flex-col rounded-none border-none">
-        <DialogHeader>
+        <DialogHeader className="px-2">
           <DialogTitle className="flex items-center gap-2">
             <PageTitle title={t('orderbook.title')} />
           </DialogTitle>
         </DialogHeader>
 
         <div className="overflow-hidden">
-          <OrderbookContent enabled={open} className="flex h-full flex-col" />
+          <OrderbookContent enabled={open} className="flex h-full flex-col p-2 pt-0" />
         </div>
       </DialogContent>
     </Dialog>
diff --git a/src/components/orderbook/OrderbookTable.tsx b/src/components/orderbook/OrderbookTable.tsx
index 8463c7ecc..96c6a837a 100644
--- a/src/components/orderbook/OrderbookTable.tsx
+++ b/src/components/orderbook/OrderbookTable.tsx
@@ -137,14 +137,14 @@ export const OrderbookTable = ({
           const bid = Number(b.original.orderId)
           return aid - bid
         },
-        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
+        cell: (info) => <span className="font-mono text-sm select-all">{info.getValue()}</span>,
         meta: {
           alphabetic: true,
         } as OrderTableColumnMeta,
       }),
       columnHelper.accessor('orderId', {
         header: () => t('orderbook.table.heading_order_id'),
-        cell: (info) => info.getValue(),
+        cell: (info) => <span>{info.getValue()}</span>,
         meta: {
           numeric: true,
         } as OrderTableColumnMeta,
diff --git a/src/components/send/SendPage.tsx b/src/components/send/SendPage.tsx
index db0692d4c..169f14061 100644
--- a/src/components/send/SendPage.tsx
+++ b/src/components/send/SendPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { AlertTriangleIcon, Loader2Icon } from 'lucide-react'
+import { AlertTriangleIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { FeeLimitDialog } from '@/components/settings/FeeLimitDialog'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
@@ -7,6 +7,7 @@ import { FeeConfigErrorAlert } from '@/components/ui/jam/FeeConfigErrorAlert'
 import PageTitle from '@/components/ui/jam/PageTitle'
 import { useFeeConfigValidation } from '@/hooks/useFeeConfigValidation'
 import type { WalletFileName } from '@/lib/utils'
+import { Spinner } from '../ui/spinner'
 
 interface SendPageProps {
   walletFileName: WalletFileName
@@ -22,7 +23,7 @@ export const SendPage = ({ walletFileName }: SendPageProps) => {
     return (
       <div className="mx-auto max-w-4xl space-y-3 p-4">
         <div className="m-2 flex items-center justify-center gap-2">
-          <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+          <Spinner className="motion-reduce:hidden" />
           {t('global.loading')}
         </div>
       </div>
diff --git a/src/components/settings/AccountXpubsDialog.tsx b/src/components/settings/AccountXpubsDialog.tsx
index 0bac33ba2..57cd66d5a 100644
--- a/src/components/settings/AccountXpubsDialog.tsx
+++ b/src/components/settings/AccountXpubsDialog.tsx
@@ -3,16 +3,7 @@ import { getseedOptions } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/re
 import { mnemonicToSeed } from '@scure/bip39'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { Network } from 'bitcoin-address-validation'
-import {
-  EyeIcon,
-  EyeOffIcon,
-  AlertTriangleIcon,
-  ClockIcon,
-  Loader2Icon,
-  CopyIcon,
-  CheckIcon,
-  AlertCircleIcon,
-} from 'lucide-react'
+import { EyeIcon, EyeOffIcon, AlertTriangleIcon, ClockIcon, CopyIcon, CheckIcon, AlertCircleIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
@@ -40,6 +31,7 @@ import { Alert, AlertDescription, AlertTitle } from '../ui/alert'
 import { Badge } from '../ui/badge'
 import { buttonVariants } from '../ui/button-variants'
 import { CopyButton } from '../ui/jam/CopyButton'
+import { Spinner } from '../ui/spinner'
 
 const HD_PATH_PURPOSE: number = 84
 
@@ -120,75 +112,64 @@ const AccountXpubsAccordion = ({ values }: AccountXpubsAccordionProps) => {
     <Accordion type="single" collapsible className="w-full">
       {values.map((account, index) => {
         const accountLabel = t('settings.xpubs_modal.label_account', {
-          accountIndex: account.accountIndex,
+          accountIndex: `#${account.accountIndex}`,
         })
         return (
           <AccordionItem key={index} value={String(account.accountIndex)}>
-            <AccordionTrigger className="group/xpub-accordion-trigger no-underline!">
-              <span className="flex items-center gap-2">
-                <span className="text-base font-medium group-hover/xpub-accordion-trigger:underline">
-                  {account.accountName}
-                </span>
-                <span className="text-muted-foreground text-xs">({accountLabel})</span>
+            <AccordionTrigger className="group/xpub-accordion-trigger px-4 no-underline!">
+              <span className="flex-1 flex-col group-hover/xpub-accordion-trigger:underline">
+                {account.accountName}
               </span>
+              <span className="text-muted-foreground font-mono">{accountLabel}</span>
             </AccordionTrigger>
-            <AccordionContent>
-              <div className="space-y-3">
-                <div className="space-y-1">
-                  <Label className="text-muted-foreground text-sm">
-                    <div className="flex flex-1 items-end gap-2">
-                      {/* TODO: i18n */}Extended Public Key
-                      <span className="text-muted-foreground/70 font-mono text-xs">{account.path}</span>
-                    </div>
-                    <div>
-                      {account.xpubs.length === 0 ? undefined : (
-                        <Badge variant="default">{account.xpubs[0].network}</Badge>
-                      )}
-                    </div>
-                  </Label>
-                  {account.xpubs.map((xpub, index) => {
-                    const accountNameAndLabel = `${account.accountName} (${accountLabel})`
-                    return (
-                      <div key={index} className="bg-muted flex items-center gap-2 rounded-md p-2">
-                        <code className="flex-1 overflow-hidden font-mono text-xs break-all text-ellipsis">
-                          {xpub.xpub}
-                        </code>
-                        <CopyButton
-                          className={buttonVariants({
-                            size: 'icon',
-                            variant: 'ghost',
-                            className: 'shrink-0',
-                          })}
-                          value={xpub.xpub}
-                          text={<CopyIcon className="h-3 w-3" />}
-                          successText={<CheckIcon className="h-3 w-3 text-green-500" />}
-                          title={t('settings.xpubs_modal.button_copy_title', {
-                            account: accountNameAndLabel,
-                          })}
-                          aria-label={t('settings.xpubs_modal.button_copy_title', {
-                            account: accountNameAndLabel,
-                          })}
-                          onSuccess={() =>
-                            toast.success(
-                              t('settings.xpubs_modal.alert_success_account_xpub_copied_message', {
-                                account: accountNameAndLabel,
-                              }),
-                            )
-                          }
-                          onError={(e) =>
-                            toast.error(
-                              t('global.errors.error_copy_to_clipboard_failed', {
-                                reason:
-                                  (e instanceof Error ? e.message : undefined) || t('global.errors.reason_unknown'),
-                              }),
-                            )
-                          }
-                        />
-                      </div>
-                    )
-                  })}
+            <AccordionContent className="flex flex-col gap-1 p-4 pt-2">
+              <Label className="text-muted-foreground text-sm">
+                <div className="flex flex-1 items-end gap-2">
+                  {/* TODO: i18n */}Extended Public Key
+                  <span className="text-muted-foreground/70 font-mono text-xs">{account.path}</span>
                 </div>
-              </div>
+                <div>
+                  {account.xpubs.length === 0 ? undefined : <Badge variant="default">{account.xpubs[0].network}</Badge>}
+                </div>
+              </Label>
+              {account.xpubs.map((xpub, index) => {
+                const accountNameAndLabel = `${account.accountName} (${accountLabel})`
+                return (
+                  <div key={index} className="bg-muted flex items-center gap-2 rounded-md p-2">
+                    <div className="flex-1 font-mono text-xs break-all select-all">{xpub.xpub}</div>
+                    <CopyButton
+                      className={buttonVariants({
+                        size: 'icon',
+                        variant: 'ghost',
+                        className: 'shrink-0',
+                      })}
+                      value={xpub.xpub}
+                      text={<CopyIcon className="h-3 w-3" />}
+                      successText={<CheckIcon className="h-3 w-3 text-green-500" />}
+                      title={t('settings.xpubs_modal.button_copy_title', {
+                        account: accountNameAndLabel,
+                      })}
+                      aria-label={t('settings.xpubs_modal.button_copy_title', {
+                        account: accountNameAndLabel,
+                      })}
+                      onSuccess={() =>
+                        toast.success(
+                          t('settings.xpubs_modal.alert_success_account_xpub_copied_message', {
+                            account: accountNameAndLabel,
+                          }),
+                        )
+                      }
+                      onError={(e) =>
+                        toast.error(
+                          t('global.errors.error_copy_to_clipboard_failed', {
+                            reason: (e instanceof Error ? e.message : undefined) || t('global.errors.reason_unknown'),
+                          }),
+                        )
+                      }
+                    />
+                  </div>
+                )
+              })}
             </AccordionContent>
           </AccordionItem>
         )
@@ -378,9 +359,14 @@ export const AccountXpubsDialog = ({ open, onOpenChange, walletFileName, hashedP
                 {t('global.cancel')}
               </Button>
               <Button onClick={handlePasswordSubmit} disabled={!password || isSubmitting}>
-                {isSubmitting
-                  ? t('settings.xpubs_modal.verification.text_button_submitting')
-                  : t('settings.xpubs_modal.verification.text_button_submit')}
+                {isSubmitting ? (
+                  <>
+                    <Spinner className="motion-reduce:hidden" />
+                    {t('settings.xpubs_modal.verification.text_button_submitting')}
+                  </>
+                ) : (
+                  t('settings.xpubs_modal.verification.text_button_submit')
+                )}
               </Button>
             </DialogFooter>
           </>
@@ -395,10 +381,10 @@ export const AccountXpubsDialog = ({ open, onOpenChange, walletFileName, hashedP
 
             <div className="space-y-4">
               {!accountXpubs.error && (
-                <div className="">
+                <div>
                   {isFetching ? (
                     <div className="text-muted-foreground flex items-center justify-center gap-1">
-                      <Loader2Icon className="size-4 animate-spin motion-reduce:hidden" />
+                      <Spinner className="motion-reduce:hidden" />
                       {t('global.loading')}
                     </div>
                   ) : accountXpubs.data && accountXpubs.data.length > 0 ? (
@@ -408,7 +394,7 @@ export const AccountXpubsDialog = ({ open, onOpenChange, walletFileName, hashedP
                         <AlertTitle>{t('settings.xpubs_modal.text_info_title')}</AlertTitle>
                         <AlertDescription>{t('settings.xpubs_modal.text_info_message')}</AlertDescription>
                       </Alert>
-                      <div className="bg-card my-2 rounded-lg px-4">
+                      <div className="bg-card my-2 rounded-lg">
                         <AccountXpubsAccordion values={accountXpubs.data} />
                       </div>
                     </>
diff --git a/src/components/settings/FeeLimitDialog.tsx b/src/components/settings/FeeLimitDialog.tsx
index d664977cd..533c0294c 100644
--- a/src/components/settings/FeeLimitDialog.tsx
+++ b/src/components/settings/FeeLimitDialog.tsx
@@ -2,7 +2,6 @@ import { useState, useRef, useEffect, type ComponentProps } from 'react'
 import { configsettingMutation } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
 import { cx } from 'class-variance-authority'
-import { Loader2Icon } from 'lucide-react'
 import { useTranslation, Trans } from 'react-i18next'
 import { toast } from 'sonner'
 import { useStore } from 'zustand'
@@ -26,6 +25,7 @@ import { factorToPercentage } from '@/lib/utils'
 import type { WalletFileName } from '@/lib/utils'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
 import type { WithRequiredProperty } from '@/types/global'
+import { Spinner } from '../ui/spinner'
 import { CollaboratorFeesForm, type CollaboratorFeesFormRef } from './CollaboratorFeesForm'
 import { MiningFeesForm, type MiningFeesFormRef } from './MiningFeesForm'
 
@@ -214,8 +214,8 @@ export const FeeLimitDialog = ({ open, onOpenChange, walletFileName }: FeeLimitD
                 </AccordionTrigger>
                 <AccordionContent>
                   {isLoadingConfig ? (
-                    <div className="text-muted-foreground flex items-center justify-center py-8">
-                      <Loader2Icon className="mr-2 h-4 w-4 animate-spin motion-reduce:hidden" />
+                    <div className="m-2 flex items-center justify-center gap-2">
+                      <Spinner className="motion-reduce:hidden" />
                       {t('global.loading')}
                     </div>
                   ) : (
@@ -255,8 +255,8 @@ export const FeeLimitDialog = ({ open, onOpenChange, walletFileName }: FeeLimitD
                 </AccordionTrigger>
                 <AccordionContent>
                   {isLoadingConfig ? (
-                    <div className="text-muted-foreground flex items-center justify-center py-8">
-                      <Loader2Icon className="mr-2 h-4 w-4 animate-spin motion-reduce:hidden" />
+                    <div className="m-2 flex items-center justify-center gap-2">
+                      <Spinner className="motion-reduce:hidden" />
                       {t('global.loading')}
                     </div>
                   ) : (
diff --git a/src/components/settings/SeedPhraseDialog.tsx b/src/components/settings/SeedPhraseDialog.tsx
index 14db97159..d9d2c569a 100644
--- a/src/components/settings/SeedPhraseDialog.tsx
+++ b/src/components/settings/SeedPhraseDialog.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useMemo, type ComponentProps } from 'react'
 import { getseedOptions } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/react-query'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { cx } from 'class-variance-authority'
-import { EyeIcon, EyeOffIcon, AlertTriangleIcon, ClockIcon, Loader2Icon } from 'lucide-react'
+import { EyeIcon, EyeOffIcon, AlertTriangleIcon, ClockIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
@@ -22,6 +22,7 @@ import { hashPassword } from '@/lib/hash'
 import type { WalletFileName } from '@/lib/utils'
 import type { SeedPhrase, WithRequiredProperty } from '@/types/global'
 import { SeedPhraseGrid } from '../ui/jam/SeedPhraseGrid'
+import { Spinner } from '../ui/spinner'
 import { Switch } from '../ui/switch'
 
 type SeedPhraseDialogProps = WithRequiredProperty<
@@ -184,7 +185,7 @@ export const SeedPhraseDialog = ({ open, onOpenChange, walletFileName, hashedPas
               <Button type="submit" onClick={handlePasswordSubmit} disabled={!password || isSubmitting}>
                 {isSubmitting ? (
                   <>
-                    <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+                    <Spinner className="motion-reduce:hidden" />
                     {t('settings.seed_modal.verification.text_button_submitting')}
                   </>
                 ) : (
@@ -206,12 +207,12 @@ export const SeedPhraseDialog = ({ open, onOpenChange, walletFileName, hashedPas
               {!seedQuery.error && (
                 <div className="bg-muted rounded-lg p-4">
                   {seedQuery.isFetching ? (
-                    <div className="text-muted-foreground flex items-center justify-center gap-1">
-                      <Loader2Icon className="size-4 animate-spin motion-reduce:hidden" />
+                    <div className="text-muted-foreground flex items-center justify-center gap-2">
+                      <Spinner className="motion-reduce:hidden" />
                       {t('global.loading')}
                     </div>
                   ) : seedQuery.data ? (
-                    <SeedPhraseGrid className="md:grid-cols-3" value={seedQuery.data} blurred={!revealSeed} />
+                    <SeedPhraseGrid className="md:grid-cols-3" value={seedQuery.data} masked={!revealSeed} />
                   ) : (
                     <div className="text-muted-foreground text-center">
                       {t('settings.seed_modal.text_error_no_data')}
@@ -241,7 +242,7 @@ export const SeedPhraseDialog = ({ open, onOpenChange, walletFileName, hashedPas
                     id="switch-reveal-seed"
                     checked={revealSeed}
                     onCheckedChange={(checked) => setRevealSeed(checked)}
-                    disabled={seedQuery.isFetching}
+                    disabled={!seedQuery.data || !seedQuery.isFetching}
                   />
                   <Label htmlFor="switch-reveal-seed">{t('settings.reveal_seed')}</Label>
                 </div>
diff --git a/src/components/sweep/SweepPage.tsx b/src/components/sweep/SweepPage.tsx
index abcf1ff89..1eeaa2b50 100644
--- a/src/components/sweep/SweepPage.tsx
+++ b/src/components/sweep/SweepPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { AlertTriangleIcon, Loader2Icon } from 'lucide-react'
+import { AlertTriangleIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { FeeLimitDialog } from '@/components/settings/FeeLimitDialog'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
@@ -7,6 +7,7 @@ import { FeeConfigErrorAlert } from '@/components/ui/jam/FeeConfigErrorAlert'
 import PageTitle from '@/components/ui/jam/PageTitle'
 import { useFeeConfigValidation } from '@/hooks/useFeeConfigValidation'
 import type { WalletFileName } from '@/lib/utils'
+import { Spinner } from '../ui/spinner'
 
 interface SweepPageProps {
   walletFileName: WalletFileName
@@ -22,7 +23,7 @@ export const SweepPage = ({ walletFileName }: SweepPageProps) => {
     return (
       <div className="mx-auto max-w-4xl space-y-3 p-4">
         <div className="m-2 flex items-center justify-center gap-2">
-          <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+          <Spinner className="motion-reduce:hidden" />
           {t('global.loading')}
         </div>
       </div>
diff --git a/src/components/ui/jam/Balance.tsx b/src/components/ui/jam/Balance.tsx
index b271f1443..7381221e3 100644
--- a/src/components/ui/jam/Balance.tsx
+++ b/src/components/ui/jam/Balance.tsx
@@ -88,7 +88,7 @@ const BitcoinBalance = ({ value, colored = true, ...props }: BitcoinBalanceProps
   return (
     <BalanceComponent symbol={BTC_SYMBOL} colored={colored} {...props}>
       <span
-        className={cn('slashed-zeroes', colored && 'text-green-600')}
+        className={cn('slashed-zeroes select-all', colored && 'text-green-600')}
         data-testid="bitcoin-amount"
         data-integer-part-is-zero={integerPartIsZero}
         data-fractional-part-starts-with-zero={fractionalPartStartsWithZero}
@@ -117,7 +117,7 @@ const SatsBalance = ({ value, colored = true, ...props }: SatsBalanceProps) => {
   return (
     <BalanceComponent symbol={SAT_SYMBOL} colored={colored} {...props}>
       <span
-        className={cn('slashed-zeroes', colored && 'text-green-600')}
+        className={cn('slashed-zeroes select-all', colored && 'text-green-600')}
         data-testid="sats-amount"
         data-raw-value={value}
       >
diff --git a/src/components/ui/jam/CopyButton.tsx b/src/components/ui/jam/CopyButton.tsx
index 01eec8ed8..2c4665aed 100644
--- a/src/components/ui/jam/CopyButton.tsx
+++ b/src/components/ui/jam/CopyButton.tsx
@@ -67,15 +67,16 @@ function Copyable({
         {children}
       </button>
       <input
-        readOnly
-        aria-hidden
         ref={valueFallbackInputRef}
+        tabIndex={-1}
         value={value}
         style={{
           position: 'absolute',
           left: '-9999px',
           top: '-9999px',
         }}
+        aria-hidden
+        readOnly
       />
     </>
   )
diff --git a/src/components/ui/jam/MaskedText.tsx b/src/components/ui/jam/MaskedText.tsx
new file mode 100644
index 000000000..d1b84f355
--- /dev/null
+++ b/src/components/ui/jam/MaskedText.tsx
@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+import { cn } from '@/lib/utils'
+
+interface MaskedTextProps {
+  className?: string
+  masked: boolean
+  maskedText?: React.ReactNode | string
+}
+
+export const MaskedText = ({
+  children,
+  className,
+  masked,
+  maskedText = 'masked',
+}: PropsWithChildren<MaskedTextProps>) => {
+  return (
+    <span
+      className={cn(className, {
+        'blur-[4px]': masked,
+      })}
+    >
+      {masked ? maskedText : children}
+    </span>
+  )
+}
diff --git a/src/components/ui/jam/SeedPhraseGrid.tsx b/src/components/ui/jam/SeedPhraseGrid.tsx
index e7fb97902..5e1bd2c45 100644
--- a/src/components/ui/jam/SeedPhraseGrid.tsx
+++ b/src/components/ui/jam/SeedPhraseGrid.tsx
@@ -1,24 +1,26 @@
+import type { ComponentProps } from 'react'
 import { cn } from '@/lib/utils'
 import type { SeedPhrase } from '@/types/global'
+import { MaskedText } from './MaskedText'
 
-interface SeedPhraseGridProps {
+type SeedPhraseGridProps = ComponentProps<typeof MaskedText> & {
   value: SeedPhrase
   className?: string
-  blurred: boolean
-  blurredText?: string
 }
 
-export const SeedPhraseGrid = ({ value, className, blurred, blurredText = 'random' }: SeedPhraseGridProps) => {
+export const SeedPhraseGrid = ({ value, className, masked, maskedText }: SeedPhraseGridProps) => {
   return (
-    <div className={cn('grid grid-cols-2 gap-2 font-mono', className)}>
-      {value
-        .map((it) => (!blurred ? it : blurredText))
-        .map((word, index) => (
-          <div key={index} className="bg-background flex min-w-32 items-center gap-2 rounded-lg border p-2">
-            <span className="text-muted-foreground inline-block min-w-7 text-right">{index + 1}.</span>
-            <span className={!blurred ? undefined : 'blur-[4px]'}>{word}</span>
-          </div>
-        ))}
+    <div className={cn('grid grid-cols-2 gap-2 font-mono', className, 'select-none')}>
+      {value.map((word, index) => (
+        <div key={index} className="bg-background flex min-w-32 items-center gap-2 rounded-lg border p-2">
+          <span className="text-muted-foreground/60 inline-block min-w-8 ps-1 text-right tabular-nums">
+            {index + 1}.
+          </span>
+          <MaskedText masked={masked} maskedText={maskedText}>
+            {word}
+          </MaskedText>
+        </div>
+      ))}
     </div>
   )
 }
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..b36a07ed4
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,17 @@
+import { Loader2Icon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  const { t } = useTranslation()
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label={t('global.loading')}
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/src/components/wallet/AccountDetailsTabContent.tsx b/src/components/wallet/AccountDetailsTabContent.tsx
index be6a119e4..a0f707b89 100644
--- a/src/components/wallet/AccountDetailsTabContent.tsx
+++ b/src/components/wallet/AccountDetailsTabContent.tsx
@@ -88,27 +88,23 @@ export const AccountDetailsTabContent = ({ value }: AccountDetailsTabContentProp
   const defaultValue = displayBranches.length > 0 ? [String(displayBranches[0].index)] : undefined
 
   return (
-    <div>
-      <Accordion type="multiple" className="bg-card w-full rounded-lg" defaultValue={defaultValue}>
-        {displayBranches.map(({ branch, index }) => {
-          const typeTitle = toTypeHeading(branch.type, t)
-          return (
-            <AccordionItem key={index} value={String(index)} className="px-6">
-              <AccordionTrigger className="group/account-branch-accordion-trigger items-center no-underline!">
-                <div className="flex flex-col gap-0.25">
-                  <span className="text-base font-medium group-hover/account-branch-accordion-trigger:underline">
-                    {typeTitle}
-                  </span>
-                  <code className="text-muted-foreground text-xs">{branch.derivation}</code>
-                </div>
-              </AccordionTrigger>
-              <AccordionContent>
-                <BranchAccordionContent value={branch} />
-              </AccordionContent>
-            </AccordionItem>
-          )
-        })}
-      </Accordion>
-    </div>
+    <Accordion type="multiple" className="bg-card w-full rounded-lg" defaultValue={defaultValue}>
+      {displayBranches.map(({ branch, index }) => {
+        const typeTitle = toTypeHeading(branch.type, t)
+        return (
+          <AccordionItem key={index} value={String(index)}>
+            <AccordionTrigger className="group/account-branch-accordion-trigger items-center px-4 no-underline!">
+              <div className="flex flex-col gap-0.25">
+                <span className="group-hover/account-branch-accordion-trigger:underline">{typeTitle}</span>
+                <span className="text-muted-foreground font-mono select-all">{branch.derivation}</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="p-4 pt-2">
+              <BranchAccordionContent value={branch} />
+            </AccordionContent>
+          </AccordionItem>
+        )
+      })}
+    </Accordion>
   )
 }
diff --git a/src/components/wallet/BranchEntryTable.tsx b/src/components/wallet/BranchEntryTable.tsx
index 04d3c19c3..4e9d4a095 100644
--- a/src/components/wallet/BranchEntryTable.tsx
+++ b/src/components/wallet/BranchEntryTable.tsx
@@ -137,7 +137,7 @@ export const BranchEntryTable = ({
           // tie-break using derivationIndex
           return a.original.derivationIndex - b.original.derivationIndex
         },
-        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
+        cell: (info) => <span className="font-mono text-sm select-all">{info.getValue()}</span>,
         meta: {
           alphabetic: true,
         },
diff --git a/src/components/wallet/JarUtxosTable.tsx b/src/components/wallet/JarUtxosTable.tsx
index cbde764d6..3cc3604ae 100644
--- a/src/components/wallet/JarUtxosTable.tsx
+++ b/src/components/wallet/JarUtxosTable.tsx
@@ -128,7 +128,7 @@ export const JarUtxosTable = ({
           const bid = Number(b.original.confirmations)
           return aid - bid
         },
-        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
+        cell: (info) => <span className="font-mono text-sm select-all">{info.getValue()}</span>,
         meta: {
           alphabetic: true,
         } as UtxoTableColumnMeta,
diff --git a/src/components/wallet/WalletJarsDetailsContent.tsx b/src/components/wallet/WalletJarsDetailsContent.tsx
index 53f01244d..082f9c41b 100644
--- a/src/components/wallet/WalletJarsDetailsContent.tsx
+++ b/src/components/wallet/WalletJarsDetailsContent.tsx
@@ -92,11 +92,7 @@ interface DetailsContentProps {
 }
 
 export const DetailsContent = ({ enabled: _enabled, account }: DetailsContentProps) => {
-  return (
-    <>
-      <AccountDetailsTabContent value={account} />
-    </>
-  )
+  return <AccountDetailsTabContent value={account} />
 }
 
 interface WalletJarsDetailsContentProps {
diff --git a/src/components/wallet/WalletJarsDetailsOverlay.tsx b/src/components/wallet/WalletJarsDetailsOverlay.tsx
index bdcb4875c..992f9b10a 100644
--- a/src/components/wallet/WalletJarsDetailsOverlay.tsx
+++ b/src/components/wallet/WalletJarsDetailsOverlay.tsx
@@ -16,7 +16,7 @@ export function WalletJarsDetailsOverlay({ open, onOpenChange, selectJarIndex }:
   return (
     <Dialog open={open} onOpenChange={() => onOpenChange(false)}>
       <DialogContent className="data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom flex h-screen max-w-screen! flex-col rounded-none border-none">
-        <DialogHeader>
+        <DialogHeader className="px-2">
           <DialogTitle className="sr-only flex items-center gap-2">
             <PageTitle title={/* todo: i18n */ t('Wallet Jars Details')} />
           </DialogTitle>
@@ -25,7 +25,7 @@ export function WalletJarsDetailsOverlay({ open, onOpenChange, selectJarIndex }:
         <div className="overflow-hidden">
           <WalletJarsDetailsContent
             enabled={open}
-            className="flex h-full flex-col overflow-auto"
+            className="flex h-full flex-col overflow-auto p-2 pt-0"
             selectJarIndex={selectJarIndex}
           />
         </div>
diff --git a/src/constants/jam.ts b/src/constants/jam.ts
index a35a4951f..73d629f62 100644
--- a/src/constants/jam.ts
+++ b/src/constants/jam.ts
@@ -1,12 +1,14 @@
 import { percentageToFactor, toSemVer } from '@/lib/utils'
 import type { AmountSats, Milliseconds } from '@/types/global'
 import { version as packageInfoVersion } from '../../package.json'
-import { JM_API_AUTH_TOKEN_EXPIRY, JM_DUST_THRESHOLD } from './jm'
+import { JM_API_AUTH_TOKEN_EXPIRY, JM_DUST_THRESHOLD, JM_WALLET_FILE_EXTENSION } from './jm'
 
 export const APP_DISPLAY_VERSION = (() => {
   return toSemVer(packageInfoVersion)
 })()
 
+export const MAX_WALLET_NAME_LENGTH = 240 - JM_WALLET_FILE_EXTENSION.length
+
 export const TX_FEES_FACTOR_MIN = 0 // 0%
 
 /**
diff --git a/src/constants/jm.ts b/src/constants/jm.ts
index f7ea7e25c..6f33cef96 100644
--- a/src/constants/jm.ts
+++ b/src/constants/jm.ts
@@ -1,3 +1,5 @@
+export const JM_WALLET_FILE_EXTENSION = '.jmdat'
+
 export const JM_API_AUTH_TOKEN_EXPIRY = parseInt(import.meta.env.VITE_JM_API_AUTH_TOKEN_EXPIRY_SECONDS, 10) * 1_000
 
 export const JM_MAX_SWEEP_FEE_CHANGE_DEFAULT = 0.8
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 4562f0ca9..37e7d80ca 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -151,7 +151,7 @@
     "error_creating_failed": "Error while creating the wallet. Reason: {{ reason }}",
     "alert_confirmation_failed": "Wallet confirmation failed.",
     "confirmation_label_wallet_name": "Wallet Name",
-    "confirmation_label_password": "Password",
+    "confirmation_label_password": "Wallet Password",
     "confirmation_toggle_reveal_info": "Reveal sensitive information",
     "confirmation_toggle_info_written_down": "I've written down the information above.",
     "confirmation_button_fund_wallet": "Fund Wallet",
diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts
index 60ea2acf4..7c21d7663 100644
--- a/src/lib/utils.test.ts
+++ b/src/lib/utils.test.ts
@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { JM_WALLET_FILE_EXTENSION } from '@/constants/jm'
 import {
   cn,
   walletDisplayName,
-  JM_WALLET_FILE_EXTENSION,
   setIntervalDebounced,
   satsToBtc,
   btcToSats,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 5e29bbf72..97e76e2d8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import type { OfferType } from '@/constants/jm'
+import { JM_WALLET_FILE_EXTENSION, type OfferType } from '@/constants/jm'
 import type { Milliseconds, SeedPhrase } from '@/types/global'
 
 const HORIZONTAL_ELLIPSIS = '\u2026' // Horizontal Ellipsis `…`
@@ -9,8 +9,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export const JM_WALLET_FILE_EXTENSION = '.jmdat'
-
 export type Unit = 'BTC' | 'sats'
 
 export const BTC: Unit = 'BTC'
diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx
index a7153c250..6c6fd7aca 100644
--- a/src/stories/Accordion.stories.tsx
+++ b/src/stories/Accordion.stories.tsx
@@ -70,21 +70,29 @@ export const DefaultOpen: Story = {
   ),
 }
 
-export const CustomStyling: Story = {
+export const CustomStyling1: Story = {
   render: () => (
-    <Accordion type="single" collapsible className="my-12 w-full">
-      <AccordionItem value="item-1" className="mb-2 rounded-md border border-gray-200 px-4 last:border-b!">
-        <AccordionTrigger className="font-semibold text-blue-500">Custom styled accordion</AccordionTrigger>
-        <AccordionContent className="text-foreground">
+    <Accordion type="single" collapsible className="my-12 w-full space-y-2">
+      <AccordionItem value="item-1" className="rounded-md border border-gray-200 last:border-b!">
+        <AccordionTrigger className="group/CustomStyling-accordion-trigger px-4 no-underline!">
+          <div className="flex flex-col gap-0.25">
+            <span className="text-base group-hover/CustomStyling-accordion-trigger:underline">Apricot</span>
+            <code className="text-muted-foreground text-sm">Account #0</code>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="text-foreground p-4 pt-2">
           This accordion has custom styling applied to demonstrate the flexibility of the component.
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem value="item-2" className="rounded-md border border-gray-200 px-4 last:border-b!">
-        <AccordionTrigger className="inactive:text-muted-foreground font-semibold text-blue-500">
-          Another custom section
+      <AccordionItem value="item-2" className="rounded-md border border-gray-200 last:border-b!">
+        <AccordionTrigger className="group/CustomStyling-accordion-trigger px-4 no-underline!">
+          <div className="flex flex-col gap-0.25">
+            <span className="text-base group-hover/CustomStyling-accordion-trigger:underline">Blueberry</span>
+            <code className="text-muted-foreground text-sm">Account #1</code>
+          </div>
         </AccordionTrigger>
-        <AccordionContent className="text-foreground">
-          You can customize each accordion item independently.
+        <AccordionContent className="text-foreground p-4 pt-2">
+          This accordion has custom styling applied to demonstrate the flexibility of the component.
         </AccordionContent>
       </AccordionItem>
     </Accordion>
diff --git a/src/stories/Spinner.stories.tsx b/src/stories/Spinner.stories.tsx
new file mode 100644
index 000000000..54390fe41
--- /dev/null
+++ b/src/stories/Spinner.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Label } from '@/components/ui/label'
+import { Spinner } from '@/components/ui/spinner'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Core/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'An indicator that can be used to show a loading state.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {
+  args: {
+    children: 'Label text',
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Spinner className="size-3" />
+      <Spinner className="size-4" />
+      <Spinner className="size-5" />
+      <Spinner className="size-6" />
+      <Spinner className="size-7" />
+      <Spinner className="size-8" />
+    </div>
+  ),
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Spinner id="spinner" />
+      <Label htmlFor="spinner">Spinner Label</Label>
+    </div>
+  ),
+}
+
+export const WithStrokeWith: Story = {
+  render: () => <Spinner strokeWidth={3} />,
+}
diff --git a/src/stories/jam/AppFooter.stories.tsx b/src/stories/jam/AppFooter.stories.tsx
index 173e6ac67..7c914dd2b 100644
--- a/src/stories/jam/AppFooter.stories.tsx
+++ b/src/stories/jam/AppFooter.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { MemoryRouter } from 'react-router-dom'
 import { AppFooter } from '@/components/layout/AppFooter'
 import { APP_DISPLAY_VERSION } from '@/constants/jam'
 import { toSemVer } from '@/lib/utils'
@@ -8,13 +7,6 @@ const meta: Meta<typeof AppFooter> = {
   title: 'Layout/AppFooter',
   component: AppFooter,
   tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
 }
 export default meta
 
diff --git a/src/stories/jam/AppNavbar.stories.tsx b/src/stories/jam/AppNavbar.stories.tsx
index f97061755..ab9205de7 100644
--- a/src/stories/jam/AppNavbar.stories.tsx
+++ b/src/stories/jam/AppNavbar.stories.tsx
@@ -1,6 +1,5 @@
 import type { ComponentProps } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { MemoryRouter } from 'react-router-dom'
 import { AppNavbar } from '@/components/layout/AppNavbar'
 import { CurrencySymbol } from '@/components/ui/jam/CurrencySymbol'
 
@@ -8,13 +7,6 @@ const meta: Meta<typeof AppNavbar> = {
   title: 'Layout/AppNavbar',
   component: AppNavbar,
   tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
 }
 export default meta
 
diff --git a/src/stories/jam/SeedPhraseGrid.stories.tsx b/src/stories/jam/SeedPhraseGrid.stories.tsx
index d2f9fcdf8..ed1b23273 100644
--- a/src/stories/jam/SeedPhraseGrid.stories.tsx
+++ b/src/stories/jam/SeedPhraseGrid.stories.tsx
@@ -14,9 +14,15 @@ const DUMMY_SEED_PHRASE: string[] =
   'abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about'.split(/\s+/)
 
 export const Default: Story = {
-  render: () => <SeedPhraseGrid value={DUMMY_SEED_PHRASE} blurred={true} />,
+  render: () => <SeedPhraseGrid value={DUMMY_SEED_PHRASE} masked={true} />,
 }
 
 export const Revealed: Story = {
-  render: () => <SeedPhraseGrid value={DUMMY_SEED_PHRASE} blurred={false} />,
+  render: () => <SeedPhraseGrid value={DUMMY_SEED_PHRASE} masked={false} />,
+}
+
+export const Responsive: Story = {
+  render: () => (
+    <SeedPhraseGrid className="grid-cols-1 sm:grid-cols-2 md:grid-cols-3" value={DUMMY_SEED_PHRASE} masked={false} />
+  ),
 }
diff --git a/src/stories/jam/pages/create/CreateStepConfirm.stories.tsx b/src/stories/jam/pages/create/CreateStepConfirm.stories.tsx
new file mode 100644
index 000000000..73eb2895f
--- /dev/null
+++ b/src/stories/jam/pages/create/CreateStepConfirm.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { CreateStepConfirm } from '@/components/create/CreateStepConfirm'
+import { DUMMY_SEED_PHRASE } from '@/lib/utils'
+
+const meta: Meta<typeof CreateStepConfirm> = {
+  title: 'Page/Create/CreateStepConfirm',
+  component: CreateStepConfirm,
+  tags: ['autodocs'],
+}
+export default meta
+
+type Story = StoryObj<typeof CreateStepConfirm>
+
+export const Default: Story = {
+  args: {
+    walletFileName: 'Satoshi.jmdat',
+    password: 'correct horse battery staple',
+    seedphrase: DUMMY_SEED_PHRASE,
+    onConfirm: async () => alert('Confirm clicked!'),
+  },
+}
diff --git a/src/stories/jam/pages/create/CreateStepDetailsInput.stories.tsx b/src/stories/jam/pages/create/CreateStepDetailsInput.stories.tsx
new file mode 100644
index 000000000..d23629f3e
--- /dev/null
+++ b/src/stories/jam/pages/create/CreateStepDetailsInput.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { CreateStepDetailsInput } from '@/components/create/CreateStepDetailsInput'
+
+const meta: Meta<typeof CreateStepDetailsInput> = {
+  title: 'Page/Create/CreateStepDetailsInput',
+  component: CreateStepDetailsInput,
+  tags: ['autodocs'],
+}
+export default meta
+
+type Story = StoryObj<typeof CreateStepDetailsInput>
+
+export const Default: Story = {
+  args: {
+    onSubmit: async () => alert('Submit clicked!'),
+    isSubmitting: false,
+    sessionInfo: undefined,
+  },
+}
+
+export const WithActiveSession: Story = {
+  args: {
+    onSubmit: async () => alert('Submit clicked!'),
+    isSubmitting: false,
+    sessionInfo: {
+      session: true,
+      wallet_name: 'Satoshi.jmdat',
+      maker_running: false,
+      coinjoin_in_process: false,
+      rescanning: false,
+    },
+  },
+}
diff --git a/vite.config.ts b/vite.config.ts
index 182cb723f..86bda4707 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -68,6 +68,11 @@ export default defineConfig((): UserConfig => {
             include: ['**/*.test.{ts,tsx}'],
             exclude: ['node_modules', '.storybook'],
           },
+          resolve: {
+            alias: {
+              '@': path.resolve(__dirname, './src'),
+            },
+          },
         },
       ],
     },