diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
index edc1c686f..eb5eb8250 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -43,7 +43,7 @@ $effect(() => {
         usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                 : 'bg-white/10'} h-[300%] rotate-40"
         ></div>
     </div>
-    <div class="p-5 flex flex-col gap-2">
+    <div class="p-3 flex flex-col gap-2">
         <div class="flex justify-between">
             {#if variant === "eName"}
                 <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                     />
                 {/if}
             {:else if variant === "eVault"}
-                <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+                <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
                     {state.progressWidth} Used
                 </h3>
             {/if}
diff --git a/infrastructure/eid-wallet/src/lib/ui/Toast/Toast.svelte b/infrastructure/eid-wallet/src/lib/ui/Toast/Toast.svelte
index d4eee8b0a..a6658d438 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Toast/Toast.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Toast/Toast.svelte
@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
     <div
         {...restProps}
-        class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+        class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
             ? 'opacity-100'
             : 'opacity-0'}"
         role="alert"
diff --git a/infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte b/infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte
index b07a2fc17..cac96b26a 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte
@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
             </div>
 
             <div class="flex flex-col gap-3 pb-2 w-full pt-8">
-                <div class="flex justify-center gap-3 items-center w-full">
+                <div
+                    class="flex flex-col justify-center gap-3 items-center w-full"
+                >
                     {#if authError}
                         <Button.Action
                             variant="solid"
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
index 97ac4749d..fc8b30b93 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
     <!-- header part -->
-    <SettingsNavigationBtn
-        icon={LanguageSquareIcon}
-        label="Language"
-        href="/settings/language"
-    />
-    <SettingsNavigationBtn
-        icon={PinCodeIcon}
-        label="Pin"
-        href="/settings/pin"
-    />
-    <SettingsNavigationBtn
-        icon={Shield01Icon}
-        label="Privacy"
-        href="/settings/privacy"
-    />
-
-    <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
-        >Delete Account</ButtonAction
-    >
-
-    <!-- Hidden eVault profile retry - tap version 10 times -->
-    <div class="w-full py-10 text-center">
-        <button
-            class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
-            onclick={handleVersionTap}
-            disabled={isRetrying}
+    <div>
+        <SettingsNavigationBtn
+            icon={LanguageSquareIcon}
+            label="Language"
+            href="/settings/language"
+        />
+        <SettingsNavigationBtn
+            icon={PinCodeIcon}
+            label="Pin"
+            href="/settings/pin"
+        />
+        <SettingsNavigationBtn
+            icon={Shield01Icon}
+            label="Privacy"
+            href="https://metastate.foundation/"
+        />
+    </div>
+    <div>
+        <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+            >Delete Account</ButtonAction
         >
-            Version v0.5.0.0
-        </button>
-
-        {#if retryMessage}
-            <div
-                class="mt-2 text-sm {isRetrying
-                    ? 'text-blue-600'
-                    : retryMessage.includes('✅')
-                      ? 'text-green-600'
-                      : 'text-red-600'}"
+
+        <!-- Hidden eVault profile retry - tap version 10 times -->
+        <div class="w-full py-2 text-center">
+            <button
+                class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+                onclick={handleVersionTap}
+                disabled={isRetrying}
             >
-                {retryMessage}
-            </div>
-        {/if}
+                Version v0.5.0.0
+            </button>
+
+            {#if retryMessage}
+                <div
+                    class="mt-2 text-sm {isRetrying
+                        ? 'text-blue-600'
+                        : retryMessage.includes('✅')
+                          ? 'text-green-600'
+                          : 'text-red-600'}"
+                >
+                    {retryMessage}
+                </div>
+            {/if}
+        </div>
     </div>
 </main>
 
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
index 833621f6a..1e9544830 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
-    class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
     <section>
-        <Hero title="Here’s your ePassport" class="mb-2">
+        <Hero
+            title="Here’s your ePassport"
+            class="mb-2"
+            titleClasses="text-2xl"
+        >
             {#snippet subtitle()}
                 <p>
                     You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
         <IdentityCard variant="ePassport" {userData} />
     </section>
     <section class="mt-[2svh] mb-[3svh]">
-        <Hero title="Here’s your eVault" class="mb-2">
+        <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
             {#snippet subtitle()}
                 The eVault is your secure cloud storage for your personal data.
                 W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
             class="flex-1"
             callback={() => goto("/register")}>Back</ButtonAction
         >
-        <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+        <ButtonAction class="flex-1" callback={handleFinish}
+            >Finish</ButtonAction
+        >
     </div>
 </main>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
index 132ab465b..f605a7cce 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
@@ -253,8 +253,12 @@ onMount(async () => {
         </Hero>
 
         {#if isPostAuthLoading}
-            <div class="flex flex-col items-center gap-3 py-8">
-                <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+            <div
+                class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+            >
+                <div
+                    class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+                ></div>
                 <p class="text-primary text-sm">Logging you in...</p>
             </div>
         {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
                         </div>
                         <div class="ml-3">
                             <p class="text-sm text-primary">
-                                <strong>Authentication Request Pending</strong><br
-                                />
+                                <strong>Authentication Request Pending</strong
+                                ><br />
                                 Complete login to process the authentication request
                             </p>
                         </div>
@@ -288,7 +292,9 @@ onMount(async () => {
             {/if}
 
             <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
-            <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+            <p
+                class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+            >
                 Your PIN does not match, try again.
             </p>
         {/if}
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index 31c04ef96..a949e3b93 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -310,11 +310,19 @@ onMount(async () => {
     <section>
         <p class="text-center small text-black-500">
             By continuing you agree to our <br />
-            <a href="/" class="text-primary underline underline-offset-4"
+            <a
+                href="https://metastate.foundation/"
+                rel="noopener noreferrer"
+                class="text-primary underline underline-offset-4"
+                target="_blank"
                 >Terms & Conditions
             </a>
             and
-            <a href="/" class="text-primary underline underline-offset-4"
+            <a
+                href="https://metastate.foundation/"
+                rel="noopener noreferrer"
+                target="_blank"
+                class="text-primary underline underline-offset-4"
                 >Privacy Policy.</a
             >
         </p>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
index 5c173ffed..beec2660b 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
@@ -372,47 +372,52 @@ onDestroy(() => {
 </script>
 
 <main
-    class="pt-[3svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between items-center"
+    class="pt-[3svh] px-[5vw] pb-[4.5svh] flex flex-col items-center h-[100svh]"
 >
-    <section>
+    <section class="flex flex-col items-center">
         <Hero title="Verify your account">
             {#snippet subtitle()}
                 Get any ID ready. You’ll be directed to present your ID and take
                 a quick selfie.
             {/snippet}
         </Hero>
-        <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport" />
+        <img
+            class="mx-auto mt-10 w-[70vw]"
+            src="images/Passport.svg"
+            alt="passport"
+        />
     </section>
-    {#if !hardwareKeyCheckComplete}
-        <div class="w-full mt-10 flex justify-center">
-            <div
-                class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"
-            ></div>
-        </div>
-    {:else if !hardwareKeySupported}
-        <div
-            class="w-full mt-10 p-4 bg-red-50 border border-red-200 rounded-lg"
-        >
-            <h3 class="text-red-800 font-semibold mb-2">
-                Hardware Security Not Available
-            </h3>
-            <p class="text-red-700 text-sm">
-                Your device doesn't support hardware-backed security keys
-                required for identity verification. Please use a device with
-                hardware security support or try the pre-verification option.
-            </p>
-        </div>
-    {:else}
-        <ButtonAction class="w-full mt-10" callback={handleVerification}
-            >I'm ready</ButtonAction
-        >
-    {/if}
+
+    <div class="grow"></div>
+
+    <div class="w-full">
+        {#if !hardwareKeyCheckComplete}
+            <div class="w-full flex justify-center py-4">
+                <div
+                    class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"
+                ></div>
+            </div>
+        {:else if !hardwareKeySupported}
+            <div class="w-full p-4 bg-red-50 border border-red-200 rounded-lg">
+                <h3 class="text-red-800 font-semibold mb-2">
+                    Hardware Security Not Available
+                </h3>
+                <p class="text-red-700 text-sm">
+                    Your device doesn't support hardware-backed security keys
+                    required for verification.
+                </p>
+            </div>
+        {:else}
+            <ButtonAction class="w-full" callback={handleVerification}>
+                I'm ready
+            </ButtonAction>
+        {/if}
+    </div>
 
     {#if showVeriffModal}
         <div
             role="dialog"
             aria-modal="true"
-            aria-label="Identity Verification"
             class="fixed inset-0 z-50 bg-white flex flex-col h-full"
         >
             <div class="grow overflow-y-auto px-[5vw] pt-[8svh]">
@@ -432,25 +437,14 @@ onDestroy(() => {
                 {:else}
                     <div class="flex flex-col gap-6">
                         {#if $status === "approved"}
-                            <div>
-                                <h3 id="verification-title">
-                                    Verification Success
-                                </h3>
-                                <p>You can now continue to create your eName</p>
-                            </div>
+                            <h3>Verification Success</h3>
+                            <p>You can now continue to create your eName</p>
                         {:else if $status === "duplicate"}
-                            <div>
-                                <h3 id="verification-title">
-                                    Old eVault Found
-                                </h3>
-                                <p>
-                                    We found an existing eVault associated with
-                                    your identity.
-                                </p>
-                            </div>
-                        {:else if $status === "resubmission_requested"}
-                            <h3>Resubmission Required</h3>
-                            <p>{$reason}</p>
+                            <h3>Old eVault Found</h3>
+                            <p>
+                                We found an existing eVault associated with your
+                                identity.
+                            </p>
                         {:else}
                             <h3>Verification Failed</h3>
                             <p>{$reason}</p>
@@ -462,41 +456,36 @@ onDestroy(() => {
             <div class="flex-none px-[5vw] pb-[4.5svh] pt-4">
                 {#if !loading}
                     <div class="flex w-full items-stretch gap-3">
-                        <div class="flex-1">
+                        <ButtonAction
+                            variant="soft"
+                            class="flex-1"
+                            callback={() => {
+                                if ($verifStep > 0 && $verifStep <= 2) {
+                                    verifStep.set($verifStep - 1);
+                                } else if ($verifStep > 2) {
+                                    goto("/onboarding");
+                                } else {
+                                    closeEventStream();
+                                    showVeriffModal = false;
+                                }
+                            }}
+                        >
+                            Back
+                        </ButtonAction>
+
+                        {#if $verifStep > 2 && $status !== "declined"}
                             <ButtonAction
-                                variant="soft"
-                                class="w-full"
-                                callback={() => {
-                                    // If in early steps, close modal; if finished, go to onboarding
-                                    if ($verifStep > 2) {
-                                        goto("/onboarding");
-                                    } else {
-                                        closeEventStream();
-                                        showVeriffModal = false;
-                                    }
-                                }}
+                                class="flex-1"
+                                callback={handleContinue}
+                                color="primary"
                             >
-                                Back
+                                {$status === "approved"
+                                    ? "Continue"
+                                    : $status === "duplicate"
+                                      ? "Claim Vault"
+                                      : "Retry"}
                             </ButtonAction>
-                        </div>
-
-                        <div class="flex-1">
-                            {#if $verifStep > 2 && $status !== "declined"}
-                                <ButtonAction
-                                    class="w-full"
-                                    callback={handleContinue}
-                                    color="primary"
-                                >
-                                    {$status === "approved"
-                                        ? "Continue"
-                                        : $status === "duplicate"
-                                          ? "Claim Vault"
-                                          : "Retry"}
-                                </ButtonAction>
-                            {:else if $verifStep <= 2}
-                                <div class="w-full h-full"></div>
-                            {/if}
-                        </div>
+                        {/if}
                     </div>
                 {/if}
             </div>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte
index 30294edd3..dd549a210 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte
@@ -219,7 +219,9 @@ onMount(() => {
 
 <div>
     {#if error}
-        <div class="bg-red-500/20 border border-red-500 rounded-lg p-3 mb-4 text-red-200 text-sm">
+        <div
+            class="bg-red-500/20 border border-red-500 rounded-lg p-3 mb-4 text-red-200 text-sm"
+        >
             {error}
         </div>
     {/if}
@@ -238,8 +240,8 @@ onMount(() => {
                     {/if}
                 </h3>
                 <p>
-                    Please place your document's {$DocFront ? "back" : "photo"} page within the rectangle
-                    and press the take photo button
+                    Please place your document's {$DocFront ? "back" : "photo"} page
+                    within the rectangle and press the take photo button
                 </p>
             </div>
             <div class="relative flex flex-col items-center justify-center">
@@ -263,29 +265,29 @@ onMount(() => {
             <div class="text-center text-xs text-gray-400 mb-4 px-4">
                 <!-- Accepted documents: Driver's License, Residence Permit, Passport, ID Card. -->
                 {#if $documentType === "passport"}
-                        Present your Passport's photo page
-                    {:else if $documentType === "id"}
-                        Present your ID Card's
-                        {#if !$DocFront}
-                            front page
-                        {:else}
-                            back page
-                        {/if}
-                    {:else if $documentType === "dl"}
-                        Present your Driving License's
-                        {#if !$DocFront}
-                            front page
-                        {:else}
-                            back page
-                        {/if}
-                    {:else if $documentType === "permit"}
-                        Present your Residence Permit's
-                        {#if !$DocFront}
-                            front page
-                        {:else}
-                            back page
-                        {/if}
+                    Present your Passport's photo page
+                {:else if $documentType === "id"}
+                    Present your ID Card's
+                    {#if !$DocFront}
+                        front page
+                    {:else}
+                        back page
                     {/if}
+                {:else if $documentType === "dl"}
+                    Present your Driving License's
+                    {#if !$DocFront}
+                        front page
+                    {:else}
+                        back page
+                    {/if}
+                {:else if $documentType === "permit"}
+                    Present your Residence Permit's
+                    {#if !$DocFront}
+                        front page
+                    {:else}
+                        back page
+                    {/if}
+                {/if}
             </div>
 
             {#if ($documentType !== "passport" && $image1Captured && $image2Captured) || ($documentType === "passport" && $image1Captured)}
@@ -294,10 +296,20 @@ onMount(() => {
                     <ButtonAction
                         color="alternative"
                         callback={retakeImages}
-                        class="w-1/3 flex items-center justify-center"
+                        class="w-1/3 flex-1 flex items-center justify-center"
                     >
-                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        <svg
+                            class="w-4 h-4 mr-1.5"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                            />
                         </svg>
                         Retake
                     </ButtonAction>
@@ -305,8 +317,7 @@ onMount(() => {
                         disabled={loading}
                         callback={continueToSelfie}
                         class="flex-1"
-                        color="primary"
-                    >Continue to Selfie</ButtonAction
+                        color="primary">Continue</ButtonAction
                     >
                 </div>
             {:else}
@@ -315,7 +326,11 @@ onMount(() => {
                     disabled={loading}
                     callback={captureImage}
                     class="w-full"
-                    >{loading ? "Processing..." : image === 1 ? "Take Photo" : "Take Back Photo"}</ButtonAction
+                    >{loading
+                        ? "Processing..."
+                        : image === 1
+                          ? "Take Photo"
+                          : "Take Back Photo"}</ButtonAction
                 >
             {/if}
             <div class="mt-4 w-full">
@@ -326,48 +341,94 @@ onMount(() => {
                     <!-- Other documents need front and back -->
                     <div class="flex w-full justify-center gap-3 mb-6">
                         {#if $DocFront}
-                            <div class="relative h-[120px] w-full max-w-[177px] rounded-lg overflow-hidden border-2 border-purple-500 shadow-lg">
+                            <div
+                                class="relative h-[120px] w-full max-w-[177px] rounded-lg overflow-hidden border-2 border-purple-500 shadow-lg"
+                            >
                                 <img
                                     class="h-full w-full object-cover"
                                     src={$DocFront}
                                     alt="Document Front"
                                 />
-                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1">
-                                    <p class="text-xs text-white font-medium">Front</p>
+                                <div
+                                    class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1"
+                                >
+                                    <p class="text-xs text-white font-medium">
+                                        Front
+                                    </p>
                                 </div>
                             </div>
                         {:else}
                             <div
                                 class="flex h-[120px] w-full max-w-[177px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-purple-500 transition-colors hover:border-purple-400"
                             >
-                                <svg class="w-8 h-8 text-purple-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                                <svg
+                                    class="w-8 h-8 text-purple-500 mb-2"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                                    />
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                                    />
                                 </svg>
-                                <p class="text-sm text-gray-400 font-medium">Front</p>
+                                <p class="text-sm text-gray-400 font-medium">
+                                    Front
+                                </p>
                             </div>
                         {/if}
 
                         {#if $DocBack}
-                            <div class="relative h-[120px] w-full max-w-[177px] rounded-lg overflow-hidden border-2 border-purple-500 shadow-lg">
+                            <div
+                                class="relative h-[120px] w-full max-w-[177px] rounded-lg overflow-hidden border-2 border-purple-500 shadow-lg"
+                            >
                                 <img
                                     class="h-full w-full object-cover"
                                     src={$DocBack}
                                     alt="Document Back"
                                 />
-                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1">
-                                    <p class="text-xs text-white font-medium">Back</p>
+                                <div
+                                    class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1"
+                                >
+                                    <p class="text-xs text-white font-medium">
+                                        Back
+                                    </p>
                                 </div>
                             </div>
                         {:else}
                             <div
                                 class="flex h-[120px] w-full max-w-[177px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-purple-500 transition-colors hover:border-purple-400"
                             >
-                                <svg class="w-8 h-8 text-purple-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                                <svg
+                                    class="w-8 h-8 text-purple-500 mb-2"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                                    />
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                                    />
                                 </svg>
-                                <p class="text-sm text-gray-400 font-medium">Back</p>
+                                <p class="text-sm text-gray-400 font-medium">
+                                    Back
+                                </p>
                             </div>
                         {/if}
                     </div>
@@ -376,4 +437,3 @@ onMount(() => {
         </div>
     </div>
 </div>
-