diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
index e91340fa45..e19671404b 100644
--- a/web-wallet/src/lib/components/Stake/Stake.svelte
+++ b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -17,7 +17,6 @@
     Agreement,
     Badge,
     Button,
-    Card,
     Icon,
     Textbox,
     Wizard,
@@ -34,6 +33,7 @@
   } from "$lib/components";
 
   import StakeOverview from "./StakeOverview.svelte";
+  import IconHeaderToggleCard from "$lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte";
 
   /** @type {(...args: any[]) => Promise<string>} */
   export let execute;
@@ -171,11 +171,11 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card onSurface>
-            <div slot="header" class="card__header">
-              <Icon path={mdiAlertOutline} />
-              <h3 class="h4">Only stake if you have a node set up!</h3>
-            </div>
+          <IconHeaderToggleCard
+            onSurface
+            heading="Only stake if you have a node set up!"
+            iconPath={mdiAlertOutline}
+          >
             <p class="staking-warning">
               I understand that I have set up a node properly, as described <AppAnchor
                 class="staking-warning__step-node-setup-link"
@@ -192,7 +192,7 @@
               label="Don't show this step again."
               bind:checked={hideStakingNoticeNextTime}
             />
-          </Card>
+          </IconHeaderToggleCard>
         </WizardStep>
       {/if}
 
@@ -359,12 +359,6 @@
     }
   }
 
-  .card__header {
-    display: flex;
-    gap: var(--small-gap);
-    align-items: center;
-  }
-
   .staking-warning {
     margin-bottom: 1em;
   }
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
index 7069797a82..74fe64239c 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -305,26 +305,31 @@ exports[`Stake > should render the Stake notice 1`] = `
         class="dusk-card dusk-card--gap-default dusk-card--on-surface"
       >
         <div
-          class="card__header s-DFOGCf36SJsY"
+          class="card__header"
           slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
+          <div
+            class="card__header-title"
           >
-            <path
-              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-            />
-          </svg>
-          
-          <!--&lt;Icon&gt;-->
+            <svg
+              class="dusk-icon dusk-icon--size--normal"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+            <h3
+              class="h4"
+            >
+              Only stake if you have a node set up!
+            </h3>
+          </div>
            
-          <h3
-            class="h4 s-DFOGCf36SJsY"
-          >
-            Only stake if you have a node set up!
-          </h3>
         </div>
          
         <p
@@ -364,10 +369,12 @@ exports[`Stake > should render the Stake notice 1`] = `
           </label>
         </div>
         <!--&lt;Agreement&gt;-->
+        
          
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
        
       <div
         class="dusk-wizard__step-navigation"
diff --git a/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
index 749ec4d7aa..210fa7bf9c 100644
--- a/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
+++ b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
@@ -3,8 +3,8 @@
 
   import "./IconHeaderToggleCard.css";
 
-  /** @type {string} */
-  export let iconPath;
+  /** @type {string | undefined} */
+  export let iconPath = undefined;
 
   /** @type {string} */
   export let heading;
@@ -22,7 +22,9 @@
 <Card {...$$restProps} {gap} {onSurface}>
   <div slot="header" class="card__header">
     <div class="card__header-title">
-      <Icon path={iconPath} />
+      {#if iconPath}
+        <Icon path={iconPath} />
+      {/if}
       <h3 class="h4">{heading}</h3>
     </div>
     {#if isToggled !== undefined}
diff --git a/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
index 133ea300e9..421c494bba 100644
--- a/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
+++ b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
@@ -5,14 +5,22 @@ import { IconHeaderToggleCard } from "..";
 describe("IconHeaderToggleCard", () => {
   afterEach(cleanup);
 
-  const props = {
-    heading: "My Card",
-    iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
-  };
+  it("renders the IconHeaderToggleCard component with a heading", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  it("renders the IconHeaderToggleCard component", () => {
+  it("renders the IconHeaderToggleCard component with a heading and an icon", () => {
     const { container } = render(IconHeaderToggleCard, {
-      props,
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
     });
 
     expect(container.firstChild).toMatchSnapshot();
@@ -20,7 +28,11 @@ describe("IconHeaderToggleCard", () => {
 
   it("renders the IconHeaderToggleCard component with a toggle", () => {
     const { container } = render(IconHeaderToggleCard, {
-      props: { ...props, isToggled: true },
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+        isToggled: true,
+      },
     });
 
     expect(container.firstChild).toMatchSnapshot();
diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
index 77c9fbd238..c68b38fac1 100644
--- a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
@@ -1,6 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component 1`] = `
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <div
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </div>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading and an icon 1`] = `
 <div>
   <div
     class="dusk-card dusk-card--gap-default"
diff --git a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
index bc51906723..9fa6bb4e39 100644
--- a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
@@ -1,7 +1,7 @@
 <script>
   import { settingsStore } from "$lib/stores";
   import { AppImage } from "$lib/components";
-  import { Card } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   const { darkMode } = $settingsStore;
 
@@ -10,8 +10,7 @@
     "/images/onboarding/all_set_illustration_light.svg";
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">You are all set!</h3>
+<IconHeaderToggleCard gap="medium" heading="You are all set!">
   <AppImage
     alt="All Set"
     className="all-set__illustration"
@@ -19,7 +18,7 @@
     src={darkMode ? allSetIllustrationLight : allSetIllustration}
     width="205"
   />
-</Card>
+</IconHeaderToggleCard>
 
 <style lang="postcss">
   :global(.all-set__illustration) {
diff --git a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
index e98ce4cebe..ff48e933a3 100644
--- a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -1,14 +1,14 @@
 <script>
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button } from "$lib/dusk/components";
   import { AppAnchor, AppAnchorButton } from "$lib/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   /** @type {boolean} */
   export let tosAccepted = false;
 </script>
 
 <section>
-  <Card>
-    <h3 slot="header" class="h4">Terms &amp; Privacy Policy</h3>
+  <IconHeaderToggleCard heading="Terms &amp; Privacy Policy">
     <p>
       Our <AppAnchor
         href="https://dusk.network/privacy-policy/"
@@ -32,7 +32,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeaderToggleCard>
 </section>
 
 <style lang="postcss">
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
index 836366b56e..a7f52dff87 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { Agreement, Card, Icon } from "$lib/dusk/components";
+  import { Agreement, Icon } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
@@ -14,22 +15,19 @@
   $: isValid = agreementOneChecked && agreementTwoChecked;
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">Securely store your seed phrase!</h3>
-  <div>
-    <Agreement
-      name="mnemonic_agreement_one"
-      bind:checked={agreementOneChecked}
-      label="I understand that without my seed phrase I cannot access my wallet and its assets."
-    />
-    <Agreement
-      name="mnemonic_agreement_two"
-      bind:checked={agreementTwoChecked}
-      label="I understand that securing my recovery phrase is my own responsibility.
+<IconHeaderToggleCard gap="medium" heading="Securely store your seed phrase!">
+  <Agreement
+    name="mnemonic_agreement_one"
+    bind:checked={agreementOneChecked}
+    label="I understand that without my seed phrase I cannot access my wallet and its assets."
+  />
+  <Agreement
+    name="mnemonic_agreement_two"
+    bind:checked={agreementTwoChecked}
+    label="I understand that securing my recovery phrase is my own responsibility.
         Only I have access to my recovery phrase"
-    />
-  </div>
-</Card>
+  />
+</IconHeaderToggleCard>
 
 <div class="notice">
   <Icon path={mdiAlertOutline} size="large" />
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
index 67173092a2..977b57df91 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
@@ -1,7 +1,8 @@
 <script>
-  import { Card, Icon, Mnemonic } from "$lib/dusk/components";
+  import { Icon, Mnemonic } from "$lib/dusk/components";
   import { arraysEqual, shuffleArray } from "$lib/dusk/array";
   import { mdiAlertOutline } from "@mdi/js";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   /** @type {boolean} */
   export let isValid = false;
@@ -18,8 +19,7 @@
   $: isValid = arraysEqual(enteredMnemonicPhrase, mnemonicPhrase);
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">Verification</h3>
+<IconHeaderToggleCard heading="Verification">
   <p class="mnemonic-notice">Ensure you have backed up the Mnemonic phrase.</p>
   <Mnemonic
     bind:enteredMnemonicPhrase
@@ -32,4 +32,10 @@
       <p>Mnemonic does not match.</p>
     </div>
   {/if}
-</Card>
+</IconHeaderToggleCard>
+
+<style>
+  .mnemonic-notice {
+    margin-bottom: var(--small-gap);
+  }
+</style>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index cd18be39dd..bc7540d952 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -337,17 +337,27 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card dusk-card--gap-medium"
+      class="dusk-card dusk-card--gap-default"
     >
-      <h3
-        class="h4"
+      <div
+        class="card__header"
         slot="header"
       >
-        Verification
-      </h3>
+        <div
+          class="card__header-title"
+        >
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
+         
+      </div>
        
       <p
-        class="mnemonic-notice"
+        class="mnemonic-notice s-8Fq6NWTLQZs0"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -617,10 +627,12 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
       <!--&lt;Mnemonic&gt;-->
        
       
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicValidate&gt;-->
      
     <div
@@ -774,17 +786,27 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card dusk-card--gap-medium"
+      class="dusk-card dusk-card--gap-default"
     >
-      <h3
-        class="h4"
+      <div
+        class="card__header"
         slot="header"
       >
-        Verification
-      </h3>
+        <div
+          class="card__header-title"
+        >
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
+         
+      </div>
        
       <p
-        class="mnemonic-notice"
+        class="mnemonic-notice s-8Fq6NWTLQZs0"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -1065,7 +1087,7 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
       <!--&lt;Mnemonic&gt;-->
        
       <div
-        class="notice notice--error"
+        class="notice notice--error s-8Fq6NWTLQZs0"
       >
         <svg
           class="dusk-icon dusk-icon--size--large"
@@ -1079,15 +1101,19 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
         
         <!--&lt;Icon&gt;-->
          
-        <p>
+        <p
+          class="s-8Fq6NWTLQZs0"
+        >
           Mnemonic does not match.
         </p>
       </div>
       
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicValidate&gt;-->
      
     <div
@@ -1241,17 +1267,27 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card dusk-card--gap-medium"
+      class="dusk-card dusk-card--gap-default"
     >
-      <h3
-        class="h4"
+      <div
+        class="card__header"
         slot="header"
       >
-        Verification
-      </h3>
+        <div
+          class="card__header-title"
+        >
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
+         
+      </div>
        
       <p
-        class="mnemonic-notice"
+        class="mnemonic-notice s-8Fq6NWTLQZs0"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -1531,10 +1567,12 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
       <!--&lt;Mnemonic&gt;-->
        
       
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicValidate&gt;-->
      
     <div
@@ -1699,12 +1737,22 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
     <div
       class="dusk-card dusk-card--gap-medium"
     >
-      <h3
-        class="h4 s--G1EbtQcnqSG"
+      <div
+        class="card__header"
         slot="header"
       >
-        You are all set!
-      </h3>
+        <div
+          class="card__header-title"
+        >
+           
+          <h3
+            class="h4"
+          >
+            You are all set!
+          </h3>
+        </div>
+         
+      </div>
        
       <img
         alt="All Set"
@@ -1714,10 +1762,12 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
         width="205"
       />
       <!--&lt;AppImage&gt;-->
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;AllSet&gt;-->
      
     <div
@@ -2494,17 +2544,27 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card dusk-card--gap-medium"
+      class="dusk-card dusk-card--gap-default"
     >
-      <h3
-        class="h4"
+      <div
+        class="card__header"
         slot="header"
       >
-        Verification
-      </h3>
+        <div
+          class="card__header-title"
+        >
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
+         
+      </div>
        
       <p
-        class="mnemonic-notice"
+        class="mnemonic-notice s-8Fq6NWTLQZs0"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -2785,10 +2845,12 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
       <!--&lt;Mnemonic&gt;-->
        
       
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicValidate&gt;-->
      
     <div
@@ -2937,63 +2999,71 @@ exports[`Create > should render the \`Securely store your seed phrase!\` agreeme
     <div
       class="dusk-card dusk-card--gap-medium"
     >
-      <h3
-        class="h4 s-mChuFgOMzAKC"
-        slot="header"
-      >
-        Securely store your seed phrase!
-      </h3>
-       
       <div
-        class="s-mChuFgOMzAKC"
+        class="card__header"
+        slot="header"
       >
         <div
-          class="dusk-agreement"
+          class="card__header-title"
         >
-          <input
-            class="dusk-checkbox"
-            id="dusk-checkbox-16"
-            name="mnemonic_agreement_one"
-            tabindex="0"
-            type="checkbox"
-          />
-          <!--&lt;Checkbox&gt;-->
            
-          <label
-            class="dusk-agreement__label"
-            for="dusk-checkbox-16"
+          <h3
+            class="h4"
           >
-            I understand that without my seed phrase I cannot access my wallet and its assets.
-          </label>
+            Securely store your seed phrase!
+          </h3>
         </div>
-        <!--&lt;Agreement&gt;-->
          
-        <div
-          class="dusk-agreement"
+      </div>
+       
+      <div
+        class="dusk-agreement"
+      >
+        <input
+          class="dusk-checkbox"
+          id="dusk-checkbox-16"
+          name="mnemonic_agreement_one"
+          tabindex="0"
+          type="checkbox"
+        />
+        <!--&lt;Checkbox&gt;-->
+         
+        <label
+          class="dusk-agreement__label"
+          for="dusk-checkbox-16"
         >
-          <input
-            class="dusk-checkbox"
-            id="dusk-checkbox-16"
-            name="mnemonic_agreement_two"
-            tabindex="0"
-            type="checkbox"
-          />
-          <!--&lt;Checkbox&gt;-->
-           
-          <label
-            class="dusk-agreement__label"
-            for="dusk-checkbox-16"
-          >
-            I understand that securing my recovery phrase is my own responsibility.
+          I understand that without my seed phrase I cannot access my wallet and its assets.
+        </label>
+      </div>
+      <!--&lt;Agreement&gt;-->
+       
+      <div
+        class="dusk-agreement"
+      >
+        <input
+          class="dusk-checkbox"
+          id="dusk-checkbox-16"
+          name="mnemonic_agreement_two"
+          tabindex="0"
+          type="checkbox"
+        />
+        <!--&lt;Checkbox&gt;-->
+         
+        <label
+          class="dusk-agreement__label"
+          for="dusk-checkbox-16"
+        >
+          I understand that securing my recovery phrase is my own responsibility.
         Only I have access to my recovery phrase
-          </label>
-        </div>
-        <!--&lt;Agreement&gt;-->
+        </label>
       </div>
+      <!--&lt;Agreement&gt;-->
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
      
     <div
       class="notice s-mChuFgOMzAKC"
@@ -3206,12 +3276,22 @@ exports[`Create > should render the Terms of Service step of the Create flow if
       <div
         class="dusk-card dusk-card--gap-default"
       >
-        <h3
-          class="h4 s-c41QPMu_i3CH"
+        <div
+          class="card__header"
           slot="header"
         >
-          Terms & Privacy Policy
-        </h3>
+          <div
+            class="card__header-title"
+          >
+             
+            <h3
+              class="h4"
+            >
+              Terms & Privacy Policy
+            </h3>
+          </div>
+           
+        </div>
          
         <p
           class="s-c41QPMu_i3CH"
@@ -3262,10 +3342,12 @@ exports[`Create > should render the Terms of Service step of the Create flow if
           </button>
           <!--&lt;Button&gt;-->
         </div>
+        
          
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
     </section>
     <!--&lt;TermsOfService&gt;-->
   </div>
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte b/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
index c598dd671e..7ec47dda19 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
@@ -1,9 +1,12 @@
 <script>
-  import { Card, Mnemonic } from "$lib/dusk/components";
-  import { toast } from "$lib/dusk/components/Toast/store";
   import { validateMnemonic, wordlists } from "bip39";
   import { mdiAlertOutline } from "@mdi/js";
 
+  import { Mnemonic } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
+
+  import { toast } from "$lib/dusk/components/Toast/store";
+
   /** @type {boolean} */
   export let isValid = false;
 
@@ -25,7 +28,6 @@
   }
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">Enter your Mnemonic Phrase</h3>
+<IconHeaderToggleCard gap="medium" heading="Enter your Mnemonic Phrase">
   <Mnemonic bind:enteredMnemonicPhrase {wordLimit} type="authenticate" />
-</Card>
+</IconHeaderToggleCard>
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
index 5ac1adbc96..5a6f6ec4e8 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
@@ -152,12 +152,22 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
     <div
       class="dusk-card dusk-card--gap-medium"
     >
-      <h3
-        class="h4"
+      <div
+        class="card__header"
         slot="header"
       >
-        Enter your Mnemonic Phrase
-      </h3>
+        <div
+          class="card__header-title"
+        >
+           
+          <h3
+            class="h4"
+          >
+            Enter your Mnemonic Phrase
+          </h3>
+        </div>
+         
+      </div>
        
       <div
         class="dusk-mnemonic"
@@ -299,10 +309,12 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
         </div>
       </div>
       <!--&lt;Mnemonic&gt;-->
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicAuthenticate&gt;-->
      
     <div
@@ -390,12 +402,22 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
       <div
         class="dusk-card dusk-card--gap-default"
       >
-        <h3
-          class="h4 s-c41QPMu_i3CH"
+        <div
+          class="card__header"
           slot="header"
         >
-          Terms & Privacy Policy
-        </h3>
+          <div
+            class="card__header-title"
+          >
+             
+            <h3
+              class="h4"
+            >
+              Terms & Privacy Policy
+            </h3>
+          </div>
+           
+        </div>
          
         <p
           class="s-c41QPMu_i3CH"
@@ -446,10 +468,12 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
           </button>
           <!--&lt;Button&gt;-->
         </div>
+        
          
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
     </section>
     <!--&lt;TermsOfService&gt;-->
   </div>