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 0606a13782..7183f3e837 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
@@ -272,11 +272,11 @@ exports[`Stake > should render the Stake notice 1`] = `
       class="dusk-card dusk-card--gap-default dusk-card--on-surface"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal"
diff --git a/web-wallet/src/lib/containers/Cards/Card.css b/web-wallet/src/lib/containers/Cards/Card.css
index acdf3d0068..d96094a106 100644
--- a/web-wallet/src/lib/containers/Cards/Card.css
+++ b/web-wallet/src/lib/containers/Cards/Card.css
@@ -1,10 +1,10 @@
-.card__header {
+.dusk-card__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.card__header-title {
+.dusk-card__header-title {
   display: flex;
   gap: var(--small-gap);
   align-items: center;
diff --git a/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte b/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
index 6170ec3549..f29850b4b2 100644
--- a/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
+++ b/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
@@ -17,8 +17,8 @@
 </script>
 
 <Card {...$$restProps} {gap} {onSurface}>
-  <header slot="header" class="card__header">
-    <div class="card__header-title">
+  <header slot="header" class="dusk-card__header">
+    <div class="dusk-card__header-title">
       {#if iconPath}
         <Icon path={iconPath} />
       {/if}
diff --git a/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte b/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
index 1edc149b60..ae2a44f1c2 100644
--- a/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
+++ b/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
@@ -20,8 +20,8 @@
 </script>
 
 <Card {...$$restProps} {gap} {onSurface}>
-  <header slot="header" class="card__header">
-    <div class="card__header-title">
+  <header slot="header" class="dusk-card__header">
+    <div class="dusk-card__header-title">
       {#if iconPath}
         <Icon path={iconPath} />
       {/if}
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
deleted file mode 100644
index 542a8b890d..0000000000
--- a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
+++ /dev/null
@@ -1,124 +0,0 @@
-// 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/__tests__/__snapshots__/IconHeadingCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
index ed434192ea..131298337a 100644
--- a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
@@ -5,11 +5,11 @@ exports[`IconHeadingCard > renders the IconHeadingCard component with a heading
   class="dusk-card dusk-card--gap-default"
 >
   <header
-    class="card__header"
+    class="dusk-card__header"
     slot="header"
   >
     <div
-      class="card__header-title"
+      class="dusk-card__header-title"
     >
        
       <h3
@@ -29,11 +29,11 @@ exports[`IconHeadingCard > renders the IconHeadingCard component with a heading
   class="dusk-card dusk-card--gap-default"
 >
   <header
-    class="card__header"
+    class="dusk-card__header"
     slot="header"
   >
     <div
-      class="card__header-title"
+      class="dusk-card__header-title"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal"
diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap
index d8925a79a0..cabc9c744f 100644
--- a/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap
@@ -5,11 +5,11 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading 1
   class="dusk-card dusk-card--gap-default"
 >
   <header
-    class="card__header"
+    class="dusk-card__header"
     slot="header"
   >
     <div
-      class="card__header-title"
+      class="dusk-card__header-title"
     >
        
       <h3
@@ -38,11 +38,11 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading a
   class="dusk-card dusk-card--gap-default"
 >
   <header
-    class="card__header"
+    class="dusk-card__header"
     slot="header"
   >
     <div
-      class="card__header-title"
+      class="dusk-card__header-title"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal"
@@ -81,11 +81,11 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a toggle 1`
   class="dusk-card dusk-card--gap-default"
 >
   <header
-    class="card__header"
+    class="dusk-card__header"
     slot="header"
   >
     <div
-      class="card__header-title"
+      class="dusk-card__header-title"
     >
       <svg
         class="dusk-icon dusk-icon--size--normal"
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 92fedbf7fd..733b091b39 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
@@ -8,51 +8,3 @@ exports[`Card > renders the Card component 1`] = `
    
 </div>
 `;
-
-exports[`Card > renders the Card component with a heading 1`] = `
-<div
-  class="dusk-card"
->
-  <header
-    class="dusk-card__header"
-  >
-     
-    <h3
-      class="h4"
-    >
-      My Card
-    </h3>
-     
-  </header>
-   
-</div>
-`;
-
-exports[`Card > renders the Card component with an icon when iconPath is provided 1`] = `
-<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>
-    
-     
-    <h3
-      class="h4"
-    >
-      My Card
-    </h3>
-     
-  </header>
-   
-</div>
-`;
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 e848fc08f5..6fad814485 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
@@ -8,11 +8,11 @@ exports[`Forced logout page > should render the page alert the user about the fo
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal"
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 b577ec7f03..2cbc1feb61 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
@@ -26,11 +26,11 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
       class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal"
@@ -139,11 +139,11 @@ exports[`Login > Password workflow > should show the password field and the link
       class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal"
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 d5cfc3fd0b..72ed7da85a 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
@@ -71,11 +71,11 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal"
@@ -305,11 +305,11 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -713,11 +713,11 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -1150,11 +1150,11 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -1574,11 +1574,11 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
     class="dusk-card dusk-card--gap-medium"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -1706,11 +1706,11 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal"
@@ -1899,11 +1899,11 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
         <svg
           class="dusk-icon dusk-icon--size--normal"
@@ -2279,11 +2279,11 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
     class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -2693,11 +2693,11 @@ exports[`Create > should render the \`Securely store your seed phrase!\` agreeme
     class="dusk-card dusk-card--gap-medium"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -2846,11 +2846,11 @@ exports[`Create > should render the Existing Wallet notice step of the Create fl
       class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal"
@@ -2921,11 +2921,11 @@ exports[`Create > should render the Terms of Service step of the Create flow if
       class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
            
           <h3
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 2cf45c40a4..5aa29b3e67 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,11 +9,11 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
       class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
           <svg
             class="dusk-icon dusk-icon--size--normal"
@@ -129,11 +129,11 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
     class="dusk-card dusk-card--gap-medium"
   >
     <header
-      class="card__header"
+      class="dusk-card__header"
       slot="header"
     >
       <div
-        class="card__header-title"
+        class="dusk-card__header-title"
       >
          
         <h3
@@ -351,11 +351,11 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
       class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="card__header"
+        class="dusk-card__header"
         slot="header"
       >
         <div
-          class="card__header-title"
+          class="dusk-card__header-title"
         >
            
           <h3