diff --git a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
index 93fde8a51b..499380b0e0 100644
--- a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
+++ b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
@@ -8,7 +9,10 @@
 </script>
 
 <section>
-  <Card iconPath={mdiAlertOutline} heading="Existing Wallet Detected">
+  <IconHeaderToggleCard
+    heading="Existing Wallet Detected"
+    iconPath={mdiAlertOutline}
+  >
     <p>
       Initializing a new wallet will replace your existing local wallet cache,
       erasing any stored data. Ensure you have securely backed up your current
@@ -30,7 +34,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeaderToggleCard>
 </section>
 
 <style lang="postcss">
diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
index f296eeb7db..47f915d136 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,
@@ -33,6 +32,8 @@
     OperationResult,
   } from "$lib/components";
 
+  import { IconHeaderToggleCard } from "$lib/containers";
+
   import StakeOverview from "./StakeOverview.svelte";
 
   /** @type {(...args: any[]) => Promise<string>} */
@@ -171,10 +172,10 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card
+          <IconHeaderToggleCard
             onSurface
-            iconPath={mdiAlertOutline}
             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
@@ -192,7 +193,7 @@
               label="Don't show this step again."
               bind:checked={hideStakingNoticeNextTime}
             />
-          </Card>
+          </IconHeaderToggleCard>
         </WizardStep>
       {/if}
 
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 7775e8b0a5..cec409b299 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
@@ -302,28 +302,33 @@ exports[`Stake > should render the Stake notice 1`] = `
       <!--&lt;Badge&gt;-->
        
       <div
-        class="dusk-card dusk-card--on-surface"
+        class="dusk-card dusk-card--gap-default dusk-card--on-surface"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-            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"
+          <div
+            class="card__header-title"
           >
-            Only stake if you have a node set up!
-          </h3>
+            <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>
            
         </header>
          
@@ -364,9 +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.css b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.css
new file mode 100644
index 0000000000..acdf3d0068
--- /dev/null
+++ b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.css
@@ -0,0 +1,11 @@
+.card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card__header-title {
+  display: flex;
+  gap: var(--small-gap);
+  align-items: center;
+}
diff --git a/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
new file mode 100644
index 0000000000..67ae381502
--- /dev/null
+++ b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { Card, Icon, Switch } from "$lib/dusk/components";
+
+  import "./IconHeaderToggleCard.css";
+
+  /** @type {string | undefined} */
+  export let iconPath = undefined;
+
+  /** @type {string} */
+  export let heading;
+
+  /** @type {CardGap} */
+  export let gap = "default";
+
+  /** @type {boolean} */
+  export let onSurface = false;
+
+  /** @type {boolean | undefined} */
+  export let isToggled = undefined;
+</script>
+
+<Card {...$$restProps} {gap} {onSurface}>
+  <header slot="header" class="card__header">
+    <div class="card__header-title">
+      {#if iconPath}
+        <Icon path={iconPath} />
+      {/if}
+      <h3 class="h4">{heading}</h3>
+    </div>
+    {#if isToggled !== undefined}
+      <Switch onSurface bind:value={isToggled} />
+    {/if}
+  </header>
+  {#if isToggled || isToggled === undefined}
+    <slot />
+  {/if}
+</Card>
diff --git a/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
new file mode 100644
index 0000000000..421c494bba
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { IconHeaderToggleCard } from "..";
+
+describe("IconHeaderToggleCard", () => {
+  afterEach(cleanup);
+
+  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 with a heading and an icon", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeaderToggleCard component with a toggle", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      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
new file mode 100644
index 0000000000..542a8b890d
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
@@ -0,0 +1,124 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </header>
+     
+    
+     
+  </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"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+          />
+        </svg>
+        
+        <!--&lt;Icon&gt;-->
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </header>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a toggle 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+          />
+        </svg>
+        
+        <!--&lt;Icon&gt;-->
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+      <div
+        aria-checked="true"
+        aria-disabled="false"
+        class="dusk-switch dusk-switch--on-surface"
+        role="switch"
+        tabindex="0"
+      />
+      <!--&lt;Switch&gt;-->
+    </header>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
diff --git a/web-wallet/src/lib/containers/index.js b/web-wallet/src/lib/containers/index.js
index 725cb77dc4..26af6937ae 100644
--- a/web-wallet/src/lib/containers/index.js
+++ b/web-wallet/src/lib/containers/index.js
@@ -1,2 +1,3 @@
 export { default as StakeContract } from "./StakeContract/StakeContract.svelte";
 export { default as TransferContract } from "./TransferContract/TransferContract.svelte";
+export { default as IconHeaderToggleCard } from "./IconHeaderToggleCard/IconHeaderToggleCard.svelte";
diff --git a/web-wallet/src/lib/dusk/components/Card/Card.svelte b/web-wallet/src/lib/dusk/components/Card/Card.svelte
index db8dec0c20..c774ef677a 100644
--- a/web-wallet/src/lib/dusk/components/Card/Card.svelte
+++ b/web-wallet/src/lib/dusk/components/Card/Card.svelte
@@ -1,26 +1,19 @@
 <script>
-  import Icon from "../Icon/Icon.svelte";
-  import Switch from "../Switch/Switch.svelte";
   import { makeClassName } from "$lib/dusk/string";
 
   /** @type {string} */
   export let tag = "div";
 
-  /** @type {string | Undefined} */
-  export let className = undefined;
+  /** @type {CardGap} */
+  export let gap = "default";
 
   /** @type {string | Undefined} */
-  export let iconPath = undefined;
-
-  /** @type {string} */
-  export let heading;
-
-  export let hasToggle = false;
-  export let isToggled = false;
+  export let className = undefined;
 
+  /** @type {boolean} */
   export let onSurface = false;
 
-  $: classes = makeClassName(["dusk-card", className]);
+  $: classes = makeClassName(["dusk-card", `dusk-card--gap-${gap}`, className]);
 </script>
 
 <svelte:element
@@ -29,19 +22,11 @@
   class={classes}
   class:dusk-card--on-surface={onSurface}
 >
-  <header
-    class="dusk-card__header"
-    class:dusk-card__header--toggle-off={hasToggle && !isToggled}
-  >
-    {#if iconPath}
-      <Icon className="dusk-card__icon" path={iconPath} />
-    {/if}
-    <h3 class="h4">{heading}</h3>
-    {#if hasToggle}
-      <Switch onSurface bind:value={isToggled} />
-    {/if}
-  </header>
-  {#if !hasToggle || isToggled}
-    <slot />
+  {#if $$slots.header}
+    <slot name="header" />
+  {/if}
+  <slot />
+  {#if $$slots.footer}
+    <slot name="footer" />
   {/if}
 </svelte:element>
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
index 636791f8be..dbe2f3617f 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
@@ -5,16 +5,8 @@ import { Card } from "..";
 describe("Card", () => {
   afterEach(cleanup);
 
-  it("renders the Card component with a heading", () => {
-    const { container } = render(Card, { props: { heading: "My Card" } });
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("renders the Card component with an icon when iconPath is provided", () => {
-    const { container } = render(Card, {
-      props: { heading: "My Card", iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z" },
-    });
+  it("renders the Card component", () => {
+    const { container } = render(Card);
 
     expect(container.firstChild).toMatchSnapshot();
   });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap
index 2228086dc6..8a4b27b484 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap
@@ -1,55 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Card > renders the Card component with a heading 1`] = `
+exports[`Card > renders the Card component 1`] = `
 <div>
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
-    <header
-      class="dusk-card__header"
-    >
-       
-      <h3
-        class="h4"
-      >
-        My Card
-      </h3>
-       
-    </header>
      
-  </div>
-  
-  <!--&lt;Card&gt;-->
-</div>
-`;
-
-exports[`Card > renders the Card component with an icon when iconPath is provided 1`] = `
-<div>
-  <div
-    class="dusk-card"
-  >
-    <header
-      class="dusk-card__header"
-    >
-      <svg
-        class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
-        />
-      </svg>
-      
-      <!--&lt;Icon&gt;-->
-       
-      <h3
-        class="h4"
-      >
-        My Card
-      </h3>
-       
-    </header>
      
   </div>
   
diff --git a/web-wallet/src/lib/dusk/components/dusk.components.d.ts b/web-wallet/src/lib/dusk/components/dusk.components.d.ts
index ded2e2d1b9..d0c7654f7a 100644
--- a/web-wallet/src/lib/dusk/components/dusk.components.d.ts
+++ b/web-wallet/src/lib/dusk/components/dusk.components.d.ts
@@ -10,6 +10,8 @@ type BadgeVariant = "neutral" | "success" | "warning" | "error";
 
 type ButtonVariant = "primary" | "secondary" | "tertiary";
 
+type CardGap = "small" | "default" | "medium" | "large";
+
 type WizardButtonProps = {
   isAnchor?: boolean;
   href?: string;
diff --git a/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte b/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
index a95aaf7cfc..450ab7eaa1 100644
--- a/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
@@ -1,9 +1,8 @@
 <script>
   import { onMount } from "svelte";
   import { mdiAlertOutline } from "@mdi/js";
-
-  import { Card } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   onMount(() => {
     // eslint-disable-next-line no-alert
@@ -17,19 +16,21 @@
 </script>
 
 <section class="forced-logout">
-  <Card
+  <IconHeaderToggleCard
     heading="You have been automatically logged out"
     iconPath={mdiAlertOutline}
   >
-    <p>
-      Another tab or window unlocked a different wallet and replaced the local
-      cache.
-    </p>
-    <p>
-      When you log in again with the mnemonic you used in this session, you will
-      need to wait for a full sync.
-    </p>
-  </Card>
+    <div>
+      <p>
+        Another tab or window unlocked a different wallet and replaced the local
+        cache.
+      </p>
+      <p>
+        When you log in again with the mnemonic you used in this session, you
+        will need to wait for a full sync.
+      </p>
+    </div>
+  </IconHeaderToggleCard>
   <AppAnchorButton data-sveltekit-replacestate href="/" text="HOME" />
 </section>
 
diff --git a/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
index e3b50db0b0..f0fdaf3534 100644
--- a/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
@@ -6,47 +6,59 @@ exports[`Forced logout page > should render the page alert the user about the fo
     class="forced-logout s-1sbyBWavtBQ9"
   >
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          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;-->
-         
-        <h3
-          class="h4"
-        >
-          You have been automatically logged out
-        </h3>
+          <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"
+          >
+            You have been automatically logged out
+          </h3>
+        </div>
          
       </header>
        
-      <p
+      <div
         class="s-1sbyBWavtBQ9"
       >
-        Another tab or window unlocked a different wallet and replaced the local
-      cache.
-      </p>
+        <p
+          class="s-1sbyBWavtBQ9"
+        >
+          Another tab or window unlocked a different wallet and replaced the local
+        cache.
+        </p>
+         
+        <p
+          class="s-1sbyBWavtBQ9"
+        >
+          When you log in again with the mnemonic you used in this session, you
+        will need to wait for a full sync.
+        </p>
+      </div>
+      
        
-      <p
-        class="s-1sbyBWavtBQ9"
-      >
-        When you log in again with the mnemonic you used in this session, you will
-      need to wait for a full sync.
-      </p>
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
      
     <a
       aria-disabled="false"
diff --git a/web-wallet/src/routes/(welcome)/login/+page.svelte b/web-wallet/src/routes/(welcome)/login/+page.svelte
index 9e316a5efe..9e942014d9 100644
--- a/web-wallet/src/routes/(welcome)/login/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/login/+page.svelte
@@ -4,8 +4,9 @@
   import { mdiArrowLeft, mdiKeyOutline } from "@mdi/js";
   import { validateMnemonic } from "bip39";
 
-  import { Button, Card, Textbox } from "$lib/dusk/components";
+  import { Button, Textbox } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
   import { goto } from "$lib/navigation";
   import {
     mnemonicPhraseResetStore,
@@ -91,7 +92,12 @@
     <mark>Decentralized Finance</mark>
   </h2>
   <div class="login">
-    <Card tag="article" iconPath={mdiKeyOutline} heading={modeLabel}>
+    <IconHeaderToggleCard
+      tag="article"
+      gap="medium"
+      heading={modeLabel}
+      iconPath={mdiKeyOutline}
+    >
       <form
         class="login__form"
         on:submit|preventDefault={handleUnlockWalletSubmit}
@@ -117,7 +123,7 @@
           />
         {/if}
       </form>
-    </Card>
+    </IconHeaderToggleCard>
   </div>
   <footer class="login-footer">
     <AppAnchorButton
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
index c9ef709be9..bf4c4ec213 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
@@ -30,28 +30,33 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
       class="login s-diEOsynXV9Ac"
     >
       <article
-        class="dusk-card"
+        class="dusk-card dusk-card--gap-medium"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
+          <div
+            class="card__header-title"
           >
-            <path
-              d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-            />
-          </svg>
-          
-          <!--&lt;Icon&gt;-->
-           
-          <h3
-            class="h4"
-          >
-            Mnemonic phrase
-          </h3>
+            <svg
+              class="dusk-icon dusk-icon--size--normal"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+            <h3
+              class="h4"
+            >
+              Mnemonic phrase
+            </h3>
+          </div>
            
         </header>
          
@@ -83,9 +88,12 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
           <!--&lt;Button&gt;-->
            
         </form>
+        
+         
       </article>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
     </div>
      
     <footer
@@ -155,28 +163,33 @@ exports[`Login > Password workflow > should show the password field and the link
       class="login s-diEOsynXV9Ac"
     >
       <article
-        class="dusk-card"
+        class="dusk-card dusk-card--gap-medium"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
+          <div
+            class="card__header-title"
           >
-            <path
-              d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-            />
-          </svg>
-          
-          <!--&lt;Icon&gt;-->
-           
-          <h3
-            class="h4"
-          >
-            Password
-          </h3>
+            <svg
+              class="dusk-icon dusk-icon--size--normal"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+            <h3
+              class="h4"
+            >
+              Password
+            </h3>
+          </div>
            
         </header>
          
@@ -223,9 +236,12 @@ exports[`Login > Password workflow > should show the password field and the link
           <!--&lt;AnchorButton&gt;-->
           <!--&lt;AppAnchorButton&gt;-->
         </form>
+        
+         
       </article>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
     </div>
      
     <footer
diff --git a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
index 8551e172ef..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,7 +10,7 @@
     "/images/onboarding/all_set_illustration_light.svg";
 </script>
 
-<Card heading="You are all set!">
+<IconHeaderToggleCard gap="medium" heading="You are all set!">
   <AppImage
     alt="All Set"
     className="all-set__illustration"
@@ -18,12 +18,12 @@
     src={darkMode ? allSetIllustrationLight : allSetIllustration}
     width="205"
   />
-</Card>
+</IconHeaderToggleCard>
 
 <style lang="postcss">
   :global(.all-set__illustration) {
     display: block;
     width: 50%;
-    margin: 1em auto;
+    margin: 0 auto 1em auto;
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte b/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
index 1c9b3437e2..dceb996393 100644
--- a/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { Card, Icon, Textbox } from "$lib/dusk/components";
+  import { Icon, Textbox } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
   import { mdiAlertOutline, mdiKeyOutline } from "@mdi/js";
 
   /** @type {string} */
@@ -26,7 +27,11 @@
   }
 </script>
 
-<Card hasToggle bind:isToggled iconPath={mdiKeyOutline} heading="Password">
+<IconHeaderToggleCard
+  heading="Password"
+  iconPath={mdiKeyOutline}
+  bind:isToggled
+>
   <p>Please store your password safely.</p>
   <Textbox
     className="password-input"
@@ -54,7 +59,7 @@
       >
     {/if}
   </div>
-</Card>
+</IconHeaderToggleCard>
 
 <div class="notice">
   <Icon path={mdiAlertOutline} size="large" />
diff --git a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
index 34754dc770..ff48e933a3 100644
--- a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -1,13 +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 heading="Terms &amp; Privacy Policy">
+  <IconHeaderToggleCard heading="Terms &amp; Privacy Policy">
     <p>
       Our <AppAnchor
         href="https://dusk.network/privacy-policy/"
@@ -31,7 +32,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeaderToggleCard>
 </section>
 
 <style lang="postcss">
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte
index 5be0d785d9..6598474a58 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte
@@ -1,5 +1,7 @@
 <script>
-  import { Card, Words } from "$lib/dusk/components";
+  import { Words } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
+
   import { mdiAlertOutline } from "@mdi/js";
   import { generateMnemonic } from "bip39";
 
@@ -11,15 +13,15 @@
   }
 </script>
 
-<Card heading="Keep this SAFE" iconPath={mdiAlertOutline}>
-  <p class="mnemonic-notice">
+<IconHeaderToggleCard heading="Keep this SAFE" iconPath={mdiAlertOutline}>
+  <p class="mnemonic-card__notice">
     Please make sure to write your phrase down and save it in a secure location.
   </p>
   <Words words={mnemonicPhrase} />
-</Card>
+</IconHeaderToggleCard>
 
-<style>
-  .mnemonic-notice {
-    margin-bottom: var(--default-gap);
+<style lang="postcss">
+  .mnemonic-card__notice {
+    margin-bottom: var(--small-gap);
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
index 5dbf7b4a72..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,7 +15,7 @@
   $: isValid = agreementOneChecked && agreementTwoChecked;
 </script>
 
-<Card heading="Securely store your seed phrase!" className="mnemonic-presetup">
+<IconHeaderToggleCard gap="medium" heading="Securely store your seed phrase!">
   <Agreement
     name="mnemonic_agreement_one"
     bind:checked={agreementOneChecked}
@@ -24,9 +25,9 @@
     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"
+        Only I have access to my recovery phrase"
   />
-</Card>
+</IconHeaderToggleCard>
 
 <div class="notice">
   <Icon path={mdiAlertOutline} size="large" />
@@ -37,7 +38,7 @@
 </div>
 
 <style lang="postcss">
-  :global(.mnemonic-presetup .dusk-agreement:first-of-type) {
+  :global(.dusk-agreement:first-of-type) {
     margin-bottom: var(--default-gap);
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
index 9de34ccbfb..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,7 +19,7 @@
   $: isValid = arraysEqual(enteredMnemonicPhrase, mnemonicPhrase);
 </script>
 
-<Card heading="Verification">
+<IconHeaderToggleCard heading="Verification">
   <p class="mnemonic-notice">Ensure you have backed up the Mnemonic phrase.</p>
   <Mnemonic
     bind:enteredMnemonicPhrase
@@ -31,14 +32,10 @@
       <p>Mnemonic does not match.</p>
     </div>
   {/if}
-</Card>
+</IconHeaderToggleCard>
 
 <style>
   .mnemonic-notice {
-    margin-bottom: var(--default-gap);
-  }
-
-  .notice {
-    margin-top: var(--default-gap);
+    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 15e61db7de..5bfc27f511 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
@@ -75,33 +75,38 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          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"
+        <div
+          class="card__header-title"
         >
-          Keep this SAFE
-        </h3>
+          <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"
+          >
+            Keep this SAFE
+          </h3>
+        </div>
          
       </header>
        
       <p
-        class="mnemonic-notice s-2OyiC0P-rJBT"
+        class="mnemonic-card__notice s-2OyiC0P-rJBT"
       >
         Please make sure to write your phrase down and save it in a secure location.
       </p>
@@ -171,9 +176,12 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
         </li>
       </ol>
       <!--&lt;Words&gt;-->
+      
+       
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicPhrase&gt;-->
      
     <div
@@ -329,17 +337,22 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Verification
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
          
       </header>
        
@@ -614,9 +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
@@ -770,17 +786,22 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Verification
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
          
       </header>
        
@@ -1087,9 +1108,12 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
         </p>
       </div>
       
+      
+       
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
     <!--&lt;MnemonicValidate&gt;-->
      
     <div
@@ -1243,17 +1267,22 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Verification
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
          
       </header>
        
@@ -1538,9 +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
@@ -1703,17 +1735,22 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          You are all set!
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            You are all set!
+          </h3>
+        </div>
          
       </header>
        
@@ -1725,9 +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
@@ -1849,28 +1889,33 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header dusk-card__header--toggle-off"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-          />
-        </svg>
-        
-        <!--&lt;Icon&gt;-->
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Password
-        </h3>
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+            />
+          </svg>
+          
+          <!--&lt;Icon&gt;-->
+           
+          <h3
+            class="h4"
+          >
+            Password
+          </h3>
+        </div>
          
         <div
           aria-checked="false"
@@ -1882,9 +1927,12 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
         <!--&lt;Switch&gt;-->
       </header>
        
+      
+       
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
      
     <div
       class="notice s-3JrRpWchV-SQ"
@@ -2062,28 +2110,33 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-          />
-        </svg>
-        
-        <!--&lt;Icon&gt;-->
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Password
-        </h3>
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+            />
+          </svg>
+          
+          <!--&lt;Icon&gt;-->
+           
+          <h3
+            class="h4"
+          >
+            Password
+          </h3>
+        </div>
          
         <div
           aria-checked="true"
@@ -2128,9 +2181,12 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
           Password must be at least 8 characters
         </span>
       </div>
+      
+       
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
      
     <div
       class="notice s-3JrRpWchV-SQ"
@@ -2488,17 +2544,22 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Verification
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            Verification
+          </h3>
+        </div>
          
       </header>
        
@@ -2784,9 +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
@@ -2933,17 +2997,22 @@ exports[`Create > should render the \`Securely store your seed phrase!\` agreeme
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card mnemonic-presetup"
+      class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Securely store your seed phrase!
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            Securely store your seed phrase!
+          </h3>
+        </div>
          
       </header>
        
@@ -2985,13 +3054,16 @@ exports[`Create > should render the \`Securely store your seed phrase!\` agreeme
           for="dusk-checkbox-16"
         >
           I understand that securing my recovery phrase is my own responsibility.
-      Only I have access to my recovery phrase
+        Only I have access to my recovery phrase
         </label>
       </div>
       <!--&lt;Agreement&gt;-->
+      
+       
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
      
     <div
       class="notice s-mChuFgOMzAKC"
@@ -3109,28 +3181,33 @@ exports[`Create > should render the Existing Wallet notice step of the Create fl
       class="s-0jNtmKPqmF7T"
     >
       <div
-        class="dusk-card"
+        class="dusk-card dusk-card--gap-default"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-            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;-->
-           
-          <h3
-            class="h4"
-          >
-            Existing Wallet Detected
-          </h3>
+            <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"
+            >
+              Existing Wallet Detected
+            </h3>
+          </div>
            
         </header>
          
@@ -3174,9 +3251,12 @@ exports[`Create > should render the Existing Wallet notice step of the Create fl
           </button>
           <!--&lt;Button&gt;-->
         </div>
+        
+         
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
     </section>
     <!--&lt;ExistingWalletNotice&gt;-->
   </div>
@@ -3194,17 +3274,22 @@ exports[`Create > should render the Terms of Service step of the Create flow if
       class="s-c41QPMu_i3CH"
     >
       <div
-        class="dusk-card"
+        class="dusk-card dusk-card--gap-default"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-           
-          <h3
-            class="h4"
+          <div
+            class="card__header-title"
           >
-            Terms & Privacy Policy
-          </h3>
+             
+            <h3
+              class="h4"
+            >
+              Terms & Privacy Policy
+            </h3>
+          </div>
            
         </header>
          
@@ -3257,9 +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 ad14c4b4ce..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,6 +28,6 @@
   }
 </script>
 
-<Card heading="Enter your Mnemonic Phrase">
+<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 93f0a31d7c..f14c234fef 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
@@ -9,28 +9,33 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
       class="s-0jNtmKPqmF7T"
     >
       <div
-        class="dusk-card"
+        class="dusk-card dusk-card--gap-default"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-            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;-->
-           
-          <h3
-            class="h4"
-          >
-            Existing Wallet Detected
-          </h3>
+            <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"
+            >
+              Existing Wallet Detected
+            </h3>
+          </div>
            
         </header>
          
@@ -74,9 +79,12 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
           </button>
           <!--&lt;Button&gt;-->
         </div>
+        
+         
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
     </section>
     <!--&lt;ExistingWalletNotice&gt;-->
   </div>
@@ -142,17 +150,22 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Enter your Mnemonic Phrase
-        </h3>
+           
+          <h3
+            class="h4"
+          >
+            Enter your Mnemonic Phrase
+          </h3>
+        </div>
          
       </header>
        
@@ -296,9 +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
@@ -384,17 +400,22 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
       class="s-c41QPMu_i3CH"
     >
       <div
-        class="dusk-card"
+        class="dusk-card dusk-card--gap-default"
       >
         <header
-          class="dusk-card__header"
+          class="card__header"
+          slot="header"
         >
-           
-          <h3
-            class="h4"
+          <div
+            class="card__header-title"
           >
-            Terms & Privacy Policy
-          </h3>
+             
+            <h3
+              class="h4"
+            >
+              Terms & Privacy Policy
+            </h3>
+          </div>
            
         </header>
          
@@ -447,9 +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>
diff --git a/web-wallet/src/routes/components-showcase/Cards.svelte b/web-wallet/src/routes/components-showcase/Cards.svelte
index 615e078db1..3c6ca8b2fe 100644
--- a/web-wallet/src/routes/components-showcase/Cards.svelte
+++ b/web-wallet/src/routes/components-showcase/Cards.svelte
@@ -1,12 +1,14 @@
 <script>
-  import { Card } from "$lib/dusk/components";
+  import { Card, Icon } from "$lib/dusk/components";
   import { mdiHome } from "@mdi/js";
 </script>
 
 <section>
-  <Card heading="My Card" />
-  <Card iconPath={mdiHome} heading="My Card" />
-  <Card iconPath={mdiHome} heading="My Card">
+  <Card>
+    <header slot="header" class="card__header">
+      <Icon path={mdiHome} />
+      <h3>Card Title</h3>
+    </header>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra
       tincidunt dolor, nec imperdiet felis tristique non. Nunc quis tempus est,
@@ -17,11 +19,20 @@
       ullamcorper in velit. Aenean eros dolor, condimentum sed tempor et, ornare
       in erat.
     </p>
+    <footer slot="footer">
+      <small>This is an example footer.</small>
+    </footer>
   </Card>
 </section>
 
-<style>
+<style lang="postcss">
   p:first-of-type {
     margin-bottom: 1em;
   }
+
+  :global(.card__header) {
+    display: flex;
+    align-items: center;
+    gap: var(--small-gap);
+  }
 </style>
diff --git a/web-wallet/src/style/dusk-components/card.css b/web-wallet/src/style/dusk-components/card.css
index 2242b3fc97..7930c6affb 100644
--- a/web-wallet/src/style/dusk-components/card.css
+++ b/web-wallet/src/style/dusk-components/card.css
@@ -1,34 +1,27 @@
 .dusk-card {
   background-color: var(--surface-color);
   border-radius: var(--control-border-radius-size);
-  padding: 1.3em 2em;
+  padding: 1.3rem 2rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .dusk-card--on-surface {
-  background-color: var(--background-color);
-}
-
-.dusk-card__icon {
-  margin-right: 0.4em;
-  font-size: 1.1em;
+  background-color: var(--on-primary-color);
 }
 
-.dusk-card__header {
-  display: flex;
-  margin-bottom: 1.25em;
-  align-items: center;
+.dusk-card--gap-small {
+  gap: 0.5em;
 }
 
-.dusk-card__header--toggle-off {
-  margin-bottom: 0;
+.dusk-card--gap-default {
+  gap: 0.625em;
 }
 
-.dusk-card .dusk-switch {
-  margin-left: auto;
+.dusk-card--gap-medium {
+  gap: 1.25em;
 }
 
-.dusk-card pre {
-  overflow-x: auto;
-  tab-size: 4;
-  padding: 1em 0;
+.dusk-card--gap-large {
+  gap: 1.875em;
 }