diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 65ee2c3eb..1c3f85ca5 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -9,10 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add "VITE_REOWN_PROJECT_ID" ENV variable [#3267]
+
 ### Changed
 
 - Update Transactions list design [#1922]
 - Prioritize Public Account in the interface and transaction flows [#3259]
+- Enhance Migrate flow layout, aligning it to the rest of the transaction-based flows [#3267]
+- Display the Migration Requirements details using the `Banner` component [#3267]
+- Update the Approval Success copy for clarity (Migrate flow) [#3267]
 
 ### Removed
 
@@ -480,6 +485,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3245]: https://github.com/dusk-network/rusk/issues/3245
 [#3259]: https://github.com/dusk-network/rusk/issues/3259
 [#3265]: https://github.com/dusk-network/rusk/issues/3265
+[#3267]: https://github.com/dusk-network/rusk/issues/3267
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/README.md b/web-wallet/README.md
index 931181313..8619b0c40 100644
--- a/web-wallet/README.md
+++ b/web-wallet/README.md
@@ -44,6 +44,7 @@ VITE_GAS_LIMIT_UPPER=1000000000
 VITE_GAS_PRICE_DEFAULT=1
 VITE_GAS_PRICE_LOWER=1
 VITE_MODE_MAINTENANCE=false
+VITE_REOWN_PROJECT_ID="" # the ID of the Bridge project (as on Reown Cloud)
 VITE_NODE_URL="" # connect to a specific node
 ```
 
diff --git a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
index 6938e8533..837db5bde 100644
--- a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
+++ b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
@@ -6,6 +6,7 @@
   import { isHex } from "viem";
   import { createEventDispatcher } from "svelte";
   import { Button, Icon } from "$lib/dusk/components";
+  import { Banner } from "$lib/components";
   import { account, wagmiConfig } from "$lib/migration/walletConnection";
   import { allowance, approve } from "$lib/migration/migration";
   import { createDataStore } from "$lib/dusk/svelte-stores";
@@ -85,27 +86,34 @@
 
 <div class="migrate__approve">
   {#if !isLoading && !error && !data}
-    <div class="migrate__approve-notice">
-      <p>DUSK token migration requires two transactions:</p>
-      <ol class="migrate__approve-notice-list">
-        <li>
-          Approve: Authorize the migration contract to spend your DUSK tokens.
-        </li>
-        <li>Migrate: Transfer your DUSK tokens to the migration contract.</li>
-      </ol>
+    <Banner title="Migration Requirements" variant="info">
+      <div class="migrate__requirements-info">
+        <p>DUSK token migration requires two transactions:</p>
+        <ol class="migrate__requirements-info-list">
+          <li>
+            <b>Approve:</b> Authorize the migration contract to spend your DUSK tokens.
+          </li>
+          <li>
+            <b>Migrate:</b> Transfer your DUSK tokens to the migration contract.
+          </li>
+        </ol>
+        <p>Both steps must be completed for a successful migration.</p>
+      </div>
+    </Banner>
+    <Banner title="Gas Fee Reminder" variant="warning">
       <p>
-        Both steps must be completed for a successful migration.<br /><br
-        />Warning: Make sure your wallet has enough funds to pay for the gas.
+        Please ensure your wallet has sufficient funds to cover the gas fees for
+        the migration.
       </p>
-    </div>
+    </Banner>
   {:else if isLoading}
     <div class="migrate__approve-approval">
-      <Icon path={mdiTimerSand} />
+      <Icon path={mdiTimerSand} size="large" />
       <span>Approval in progress...</span>
     </div>
   {:else if error}
     <div class="migrate__approve-approval">
-      <Icon path={mdiAlertOutline} />
+      <Icon path={mdiAlertOutline} size="large" />
       <span>An error occurred during approval</span>
     </div>
   {/if}
@@ -118,31 +126,28 @@
 </div>
 
 <style lang="postcss">
+  .migrate {
+    &__requirements-info {
+      display: flex;
+      flex-direction: column;
+      gap: var(--small-gap);
+    }
+    &__requirements-info-list {
+      list-style-position: inside;
+    }
+  }
+
   .migrate__approve {
     display: flex;
     justify-content: center;
     flex-direction: column;
-
-    &-notice {
-      font-size: 0.875em;
-      line-height: 1.3125em;
-      padding: 1em 1.375em;
-      border-radius: 0.675em;
-      border: 1px solid var(--primary-color);
-      margin-top: 0.625em;
-      margin-bottom: 1em;
-
-      &-list {
-        padding-left: 1.375em;
-      }
-    }
+    gap: 1.2em;
 
     &-approval {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--default-gap);
-      padding: 2.25em 0;
     }
   }
 </style>
diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
index dbf5a1249..aac55d737 100644
--- a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
+++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
@@ -58,23 +58,23 @@
 <div class="migrate__execute">
   {#if !isLoading && !data && !error}
     <div class="migrate__execute-approval">
-      <Icon path={mdiCheckDecagramOutline} />
-      <span>Migration Approved</span>
+      <Icon path={mdiCheckDecagramOutline} size="large" />
+      <span>Approval successful! You may now proceed with the migration.</span>
     </div>
   {:else if error}
     <div class="migrate__execute-approval">
-      <Icon path={mdiAlertOutline} />
+      <Icon path={mdiAlertOutline} size="large" />
       <span>Action has been rejected on the connected wallet.</span>
     </div>
   {:else if isLoading && !migrationHash}
     <div class="migrate__execute-approval">
-      <Icon path={mdiTimerSand} />
+      <Icon path={mdiTimerSand} size="large" />
       <span>Migration in progress...</span>
     </div>
   {/if}
   {#if migrationHash && chain?.blockExplorers}
     <div class="migrate__execute-approval">
-      <Icon path={mdiTimerSand} />
+      <Icon path={mdiTimerSand} size="large" />
       <span>Migration has been submitted</span>
     </div>
     <Banner title="Migration in progress..." variant="info">
@@ -102,13 +102,13 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
+    gap: 1.875em;
 
     &-approval {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--default-gap);
-      padding: 2.25em 0;
     }
   }
 </style>
diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
index ae969c3f0..7a21503b6 100644
--- a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
+++ b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
@@ -18,7 +18,6 @@
     middleEllipsis,
   } from "$lib/dusk/string";
   import {
-    AppAnchor,
     AppAnchorButton,
     AppImage,
     ApproveMigration,
@@ -27,7 +26,6 @@
   } from "$lib/components";
   import {
     Button,
-    Card,
     ExclusiveChoice,
     Icon,
     Stepper,
@@ -71,9 +69,6 @@
   /** @type {TokenNames} */
   let selectedChain = erc20.name;
 
-  /** @type {boolean} */
-  const migrationInProgress = false;
-
   /** @type {undefined | bigint} */
   let connectedWalletBalance;
 
@@ -92,6 +87,8 @@
   /** @type {boolean} */
   let isInputDisabled = false;
 
+  const steps = [{ label: "Approve" }, { label: "Migrate" }, { label: "Done" }];
+
   $: ({ currentProfile } = $walletStore);
   $: moonlightAccount = currentProfile?.account.toString();
 
@@ -241,16 +238,6 @@
     </div>
   </header>
 
-  {#if migrationInProgress}
-    <div class="migrate__progress-notice">
-      <span
-        >Another migration is in progress. You can check the status <AppAnchor
-          href="#">here</AppAnchor
-        >.</span
-      >
-    </div>
-  {/if}
-
   <div class="migrate__token">
     <p class="migrate__token-header">From:</p>
     <ExclusiveChoice
@@ -329,8 +316,8 @@
   {/if}
 
   {#if walletState.isConnected && isAmountValid && isMigrationInitialized}
-    <Card gap="small">
-      <Stepper steps={3} activeStep={migrationStep} />
+    <div class="migrate__wizard">
+      <Stepper {steps} activeStep={migrationStep} />
       {#if migrationStep === 0}
         <ApproveMigration
           on:incrementStep={() => migrationStep++}
@@ -357,7 +344,7 @@
           <p>Migration completed successfully!</p>
         </div>
       {/if}
-    </Card>
+    </div>
   {/if}
 
   {#if !walletState.isConnected}
@@ -407,12 +394,19 @@
     gap: var(--default-gap);
     padding: 1.25em;
 
+    &__wizard {
+      margin-top: var(--default-gap);
+      gap: 1.25em;
+      display: flex;
+      flex-direction: column;
+    }
+
     &__execute {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--default-gap);
-      padding: 2.25em 0;
+      padding-bottom: 2.25em;
     }
 
     &__header {
@@ -442,12 +436,6 @@
       align-items: center;
     }
 
-    &__progress-notice {
-      padding: 1em 1.375em;
-      border-radius: 1.5em;
-      border: 1px solid var(--primary-color);
-    }
-
     &__token-header {
       font-weight: 500;
     }
diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
index fc1eca8a1..3cf391d91 100644
--- a/web-wallet/src/lib/contracts/contract-descriptors.js
+++ b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -57,7 +57,9 @@ export default [
     ],
   },
   {
-    enabled: import.meta.env.VITE_FEATURE_MIGRATE === "true",
+    enabled:
+      import.meta.env.VITE_FEATURE_MIGRATE === "true" &&
+      import.meta.env.VITE_REOWN_PROJECT_ID !== "",
     id: "migrate",
     label: "Migrate",
     operations: [
diff --git a/web-wallet/src/lib/migration/walletConnection.js b/web-wallet/src/lib/migration/walletConnection.js
index 8eeae9397..de61b7b27 100644
--- a/web-wallet/src/lib/migration/walletConnection.js
+++ b/web-wallet/src/lib/migration/walletConnection.js
@@ -5,14 +5,25 @@ import { bsc, mainnet, sepolia } from "@reown/appkit/networks";
 import { disconnect, getAccount, getBalance, watchAccount } from "@wagmi/core";
 import { readable } from "svelte/store";
 
-// Required project metadata
-const projectId = "b5303e1c8374b100fbb7f181884fef28";
-const metadata = {
-  description: "Dusk Web-Wallet",
-  icons: [],
-  name: "Dusk Migration",
-  url: "https://127.0.0.1:5173/dashboard/",
-};
+/**
+ * @constant {string} projectId - The ID of the project, sourced from an environment variable.
+ *
+ * @description
+ * This constant retrieves the project ID from the environment variable `VITE_REOWN_PROJECT_ID`.
+ * If the environment variable is not set, it defaults to an empty string. This behavior is not ideal
+ * because an empty `projectId` will cause the modal initialization to fail.
+ *
+ * While this issue typically arises due to a developer error (e.g., forgetting to set the environment variable),
+ * resolving it properly requires a broader refactor of the codebase to better handle missing or invalid `projectId` values.
+ *
+ * Additionally, when the `projectId` is missing, the "migrate" functionality will not be accessible in the UI,
+ * effectively hiding the "broken" flow. Therefore, while the error can occur, users are unlikely to encounter it.
+ *
+ * **To improve:**
+ * Consider implementing a mechanism to ensure `VITE_REOWN_PROJECT_ID` is always defined during the build or
+ * runtime processes, potentially throwing a clear error during startup if it is missing.
+ */
+const projectId = import.meta.env.VITE_REOWN_PROJECT_ID || "";
 
 /** @typedef {import("@reown/appkit/networks").AppKitNetwork} AppKitNetwork */
 /** @type {[AppKitNetwork, ...AppKitNetwork[]]} */
@@ -33,7 +44,6 @@ export const modal = createAppKit({
     onramp: false,
     swaps: false,
   },
-  metadata,
   networks,
   projectId,
   themeMode: "dark",
diff --git a/web-wallet/vite.config.js b/web-wallet/vite.config.js
index 6057f5941..f7e515fdf 100644
--- a/web-wallet/vite.config.js
+++ b/web-wallet/vite.config.js
@@ -50,6 +50,7 @@ export default defineConfig(({ mode }) => {
         VITE_GAS_PRICE_LOWER: env.VITE_GAS_PRICE_LOWER,
         VITE_GAS_PRICE_UPPER: env.VITE_GAS_PRICE_UPPER,
         VITE_NODE_URL: env.VITE_NODE_URL,
+        VITE_REOWN_PROJECT_ID: env.VITE_REOWN_PROJECT_ID,
       },
     },
     plugins: