From 5e787b2201ab2ddcdb9f433960870f0872d5ee47 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Wed, 17 Apr 2024 15:35:58 +0300
Subject: [PATCH] web-wallet: Replace Card component Resolves #1295, Resolves
 #1650

---
 .../ExistingWalletNotice.svelte               |  10 +-
 .../src/lib/components/Stake/Stake.svelte     |  16 +-
 .../__snapshots__/Stake.spec.js.snap          |  15 +-
 .../IconHeaderToggleCard.css                  |  11 +
 .../IconHeaderToggleCard.svelte               |  35 ++
 .../__tests__/IconHeaderToggleCard.spec.js    |  28 ++
 .../IconHeaderToggleCard.spec.js.snap         |  93 ++++
 web-wallet/src/lib/containers/index.js        |   1 +
 .../src/lib/dusk/components/Card/Card.svelte  |  37 +-
 .../dusk/components/__tests__/Card.spec.js    |  12 +-
 .../__tests__/__snapshots__/Card.spec.js.snap |  48 +-
 .../lib/dusk/components/dusk.components.d.ts  |   2 +
 .../(welcome)/forced-logout/+page.svelte      |  25 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  72 +--
 .../src/routes/(welcome)/login/+page.svelte   |  12 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  96 ++--
 .../src/routes/(welcome)/setup/AllSet.svelte  |   5 +-
 .../(welcome)/setup/PasswordSetup.svelte      |  11 +-
 .../(welcome)/setup/TermsOfService.svelte     |   3 +-
 .../setup/create/MnemonicPhrase.svelte        |  16 +-
 .../setup/create/MnemonicPreSetup.svelte      |  29 +-
 .../setup/create/MnemonicValidate.svelte      |  13 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 410 +++++++++---------
 .../setup/restore/MnemonicAuthenticate.svelte |   3 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  84 ++--
 .../routes/components-showcase/Cards.svelte   |  21 +-
 web-wallet/src/style/dusk-components/card.css |  31 +-
 27 files changed, 651 insertions(+), 488 deletions(-)
 create mode 100644 web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.css
 create mode 100644 web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
 create mode 100644 web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
 create mode 100644 web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap

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..e91340fa45 100644
--- a/web-wallet/src/lib/components/Stake/Stake.svelte
+++ b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -171,11 +171,11 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card
-            onSurface
-            iconPath={mdiAlertOutline}
-            heading="Only stake if you have a node set up!"
-          >
+          <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>
             <p class="staking-warning">
               I understand that I have set up a node properly, as described <AppAnchor
                 class="staking-warning__step-node-setup-link"
@@ -359,6 +359,12 @@
     }
   }
 
+  .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 7775e8b0a5..7069797a82 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,13 +302,14 @@ 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"
+        <div
+          class="card__header s-DFOGCf36SJsY"
+          slot="header"
         >
           <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
+            class="dusk-icon dusk-icon--size--normal"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -320,12 +321,11 @@ exports[`Stake > should render the Stake notice 1`] = `
           <!--&lt;Icon&gt;-->
            
           <h3
-            class="h4"
+            class="h4 s-DFOGCf36SJsY"
           >
             Only stake if you have a node set up!
           </h3>
-           
-        </header>
+        </div>
          
         <p
           class="staking-warning s-DFOGCf36SJsY"
@@ -364,6 +364,7 @@ exports[`Stake > should render the Stake notice 1`] = `
           </label>
         </div>
         <!--&lt;Agreement&gt;-->
+         
       </div>
       
       <!--&lt;Card&gt;-->
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..749ec4d7aa
--- /dev/null
+++ b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Card, Icon, Switch } from "$lib/dusk/components";
+
+  import "./IconHeaderToggleCard.css";
+
+  /** @type {string} */
+  export let iconPath;
+
+  /** @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}>
+  <div slot="header" class="card__header">
+    <div class="card__header-title">
+      <Icon path={iconPath} />
+      <h3 class="h4">{heading}</h3>
+    </div>
+    {#if isToggled !== undefined}
+      <Switch onSurface bind:value={isToggled} />
+    {/if}
+  </div>
+  {#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..133ea300e9
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
@@ -0,0 +1,28 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { IconHeaderToggleCard } from "..";
+
+describe("IconHeaderToggleCard", () => {
+  afterEach(cleanup);
+
+  const props = {
+    heading: "My Card",
+    iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+  };
+
+  it("renders the IconHeaderToggleCard component", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props,
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeaderToggleCard component with a toggle", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: { ...props, 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..77c9fbd238
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
@@ -0,0 +1,93 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <div
+      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>
+     
+    
+     
+  </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"
+  >
+    <div
+      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;-->
+    </div>
+     
+    
+     
+  </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..d499f6642d 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"
+      <div
+        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;-->
+          <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>
          
-        <h3
-          class="h4"
-        >
-          You have been automatically logged out
-        </h3>
-         
-      </header>
+      </div>
        
-      <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..75cc71e48b 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,30 +30,35 @@ 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"
+        <div
+          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>
+        </div>
          
         <form
           class="login__form s-diEOsynXV9Ac"
@@ -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,30 +163,35 @@ 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"
+        <div
+          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>
+        </div>
          
         <form
           class="login__form s-diEOsynXV9Ac"
@@ -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..bc51906723 100644
--- a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
@@ -10,7 +10,8 @@
     "/images/onboarding/all_set_illustration_light.svg";
 </script>
 
-<Card heading="You are all set!">
+<Card gap="medium">
+  <h3 slot="header" class="h4">You are all set!</h3>
   <AppImage
     alt="All Set"
     className="all-set__illustration"
@@ -24,6 +25,6 @@
   :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..e98ce4cebe 100644
--- a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -7,7 +7,8 @@
 </script>
 
 <section>
-  <Card heading="Terms &amp; Privacy Policy">
+  <Card>
+    <h3 slot="header" class="h4">Terms &amp; Privacy Policy</h3>
     <p>
       Our <AppAnchor
         href="https://dusk.network/privacy-policy/"
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..836366b56e 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
@@ -14,18 +14,21 @@
   $: isValid = agreementOneChecked && agreementTwoChecked;
 </script>
 
-<Card heading="Securely store your seed phrase!" className="mnemonic-presetup">
-  <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"
-  />
+<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.
+        Only I have access to my recovery phrase"
+    />
+  </div>
 </Card>
 
 <div class="notice">
@@ -37,7 +40,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..67173092a2 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
@@ -18,7 +18,8 @@
   $: isValid = arraysEqual(enteredMnemonicPhrase, mnemonicPhrase);
 </script>
 
-<Card heading="Verification">
+<Card gap="medium">
+  <h3 slot="header" class="h4">Verification</h3>
   <p class="mnemonic-notice">Ensure you have backed up the Mnemonic phrase.</p>
   <Mnemonic
     bind:enteredMnemonicPhrase
@@ -32,13 +33,3 @@
     </div>
   {/if}
 </Card>
-
-<style>
-  .mnemonic-notice {
-    margin-bottom: var(--default-gap);
-  }
-
-  .notice {
-    margin-top: var(--default-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..cd18be39dd 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"
+      <div
+        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>
+      </div>
        
       <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,22 +337,17 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
     <!--&lt;Stepper&gt;-->
      
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-medium"
     >
-      <header
-        class="dusk-card__header"
+      <h3
+        class="h4"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          Verification
-        </h3>
-         
-      </header>
+        Verification
+      </h3>
        
       <p
-        class="mnemonic-notice s-8Fq6NWTLQZs0"
+        class="mnemonic-notice"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -614,6 +617,7 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
       <!--&lt;Mnemonic&gt;-->
        
       
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -770,22 +774,17 @@ 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-medium"
     >
-      <header
-        class="dusk-card__header"
+      <h3
+        class="h4"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          Verification
-        </h3>
-         
-      </header>
+        Verification
+      </h3>
        
       <p
-        class="mnemonic-notice s-8Fq6NWTLQZs0"
+        class="mnemonic-notice"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -1066,7 +1065,7 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
       <!--&lt;Mnemonic&gt;-->
        
       <div
-        class="notice notice--error s-8Fq6NWTLQZs0"
+        class="notice notice--error"
       >
         <svg
           class="dusk-icon dusk-icon--size--large"
@@ -1080,13 +1079,12 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
         
         <!--&lt;Icon&gt;-->
          
-        <p
-          class="s-8Fq6NWTLQZs0"
-        >
+        <p>
           Mnemonic does not match.
         </p>
       </div>
       
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -1243,22 +1241,17 @@ 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-medium"
     >
-      <header
-        class="dusk-card__header"
+      <h3
+        class="h4"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          Verification
-        </h3>
-         
-      </header>
+        Verification
+      </h3>
        
       <p
-        class="mnemonic-notice s-8Fq6NWTLQZs0"
+        class="mnemonic-notice"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -1538,6 +1531,7 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
       <!--&lt;Mnemonic&gt;-->
        
       
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -1703,19 +1697,14 @@ 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"
+      <h3
+        class="h4 s--G1EbtQcnqSG"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          You are all set!
-        </h3>
-         
-      </header>
+        You are all set!
+      </h3>
        
       <img
         alt="All Set"
@@ -1725,6 +1714,7 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
         width="205"
       />
       <!--&lt;AppImage&gt;-->
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -1849,28 +1839,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"
+      <div
+        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"
@@ -1880,11 +1875,14 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
           tabindex="0"
         />
         <!--&lt;Switch&gt;-->
-      </header>
+      </div>
+       
+      
        
     </div>
     
     <!--&lt;Card&gt;-->
+    <!--&lt;IconHeaderToggleCard&gt;-->
      
     <div
       class="notice s-3JrRpWchV-SQ"
@@ -2062,28 +2060,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"
+      <div
+        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"
@@ -2093,7 +2096,7 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
           tabindex="0"
         />
         <!--&lt;Switch&gt;-->
-      </header>
+      </div>
        
       <p
         class="s-3JrRpWchV-SQ"
@@ -2128,9 +2131,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,22 +2494,17 @@ 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-medium"
     >
-      <header
-        class="dusk-card__header"
+      <h3
+        class="h4"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          Verification
-        </h3>
-         
-      </header>
+        Verification
+      </h3>
        
       <p
-        class="mnemonic-notice s-8Fq6NWTLQZs0"
+        class="mnemonic-notice"
       >
         Ensure you have backed up the Mnemonic phrase.
       </p>
@@ -2784,6 +2785,7 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
       <!--&lt;Mnemonic&gt;-->
        
       
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -2933,62 +2935,62 @@ 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"
+      <h3
+        class="h4 s-mChuFgOMzAKC"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          Securely store your seed phrase!
-        </h3>
-         
-      </header>
+        Securely store your seed phrase!
+      </h3>
        
       <div
-        class="dusk-agreement"
+        class="s-mChuFgOMzAKC"
       >
-        <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"
+        <div
+          class="dusk-agreement"
         >
-          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;-->
+          <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"
+          >
+            I understand that without my seed phrase I cannot access my wallet and its assets.
+          </label>
+        </div>
+        <!--&lt;Agreement&gt;-->
          
-        <label
-          class="dusk-agreement__label"
-          for="dusk-checkbox-16"
+        <div
+          class="dusk-agreement"
         >
-          I understand that securing my recovery phrase is my own responsibility.
-      Only I have access to my recovery phrase
-        </label>
+          <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;-->
       </div>
-      <!--&lt;Agreement&gt;-->
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -3109,30 +3111,35 @@ 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"
+        <div
+          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"
           >
-            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>
+        </div>
          
         <p
           class="s-0jNtmKPqmF7T"
@@ -3174,9 +3181,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,19 +3204,14 @@ 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"
+        <h3
+          class="h4 s-c41QPMu_i3CH"
+          slot="header"
         >
-           
-          <h3
-            class="h4"
-          >
-            Terms & Privacy Policy
-          </h3>
-           
-        </header>
+          Terms & Privacy Policy
+        </h3>
          
         <p
           class="s-c41QPMu_i3CH"
@@ -3257,6 +3262,7 @@ exports[`Create > should render the Terms of Service step of the Create flow if
           </button>
           <!--&lt;Button&gt;-->
         </div>
+         
       </div>
       
       <!--&lt;Card&gt;-->
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte b/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
index ad14c4b4ce..c598dd671e 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
@@ -25,6 +25,7 @@
   }
 </script>
 
-<Card heading="Enter your Mnemonic Phrase">
+<Card gap="medium">
+  <h3 slot="header" class="h4">Enter your Mnemonic Phrase</h3>
   <Mnemonic bind:enteredMnemonicPhrase {wordLimit} type="authenticate" />
 </Card>
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..5ac1adbc96 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,30 +9,35 @@ 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"
+        <div
+          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"
           >
-            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>
+        </div>
          
         <p
           class="s-0jNtmKPqmF7T"
@@ -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,19 +150,14 @@ 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"
+      <h3
+        class="h4"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
-        >
-          Enter your Mnemonic Phrase
-        </h3>
-         
-      </header>
+        Enter your Mnemonic Phrase
+      </h3>
        
       <div
         class="dusk-mnemonic"
@@ -296,6 +299,7 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
         </div>
       </div>
       <!--&lt;Mnemonic&gt;-->
+       
     </div>
     
     <!--&lt;Card&gt;-->
@@ -384,19 +388,14 @@ 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"
+        <h3
+          class="h4 s-c41QPMu_i3CH"
+          slot="header"
         >
-           
-          <h3
-            class="h4"
-          >
-            Terms & Privacy Policy
-          </h3>
-           
-        </header>
+          Terms & Privacy Policy
+        </h3>
          
         <p
           class="s-c41QPMu_i3CH"
@@ -447,6 +446,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
           </button>
           <!--&lt;Button&gt;-->
         </div>
+         
       </div>
       
       <!--&lt;Card&gt;-->
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;
 }