diff --git a/blog.html b/blog.html
index fa381a36..3da817e7 100644
--- a/blog.html
+++ b/blog.html
@@ -55,10 +55,11 @@
       }
     </script>
   </head>
-  <body class="blog-body">
+  <body class="blog-body" data-ds="new">
     <div
       id="app"
       class="blog-app-root mx-auto my-8 w-full max-w-none px-4 md:w-blog-fluid md:max-w-blog-shell md:px-0"
+      data-ds="new"
     ></div>
     <script>
       window.wnjParams = {
diff --git a/docs/kitchen-sink.html b/docs/kitchen-sink.html
index c05aad2a..1d82309c 100644
--- a/docs/kitchen-sink.html
+++ b/docs/kitchen-sink.html
@@ -6,8 +6,8 @@
     <title>bitvid Design System Kitchen Sink</title>
     <link rel="stylesheet" href="../css/tailwind.generated.css" />
   </head>
-  <body class="bg-page font-sans text-text-strong">
-    <div class="min-h-screen bg-page-alt">
+  <body class="bg-page font-sans text-text-strong" data-ds="new">
+    <div class="min-h-screen bg-page-alt" data-ds="new">
       <header class="ds-header bg-surface text-text shadow-modal">
         <div
           class="mx-auto flex max-w-6xl items-center justify-between gap-sm px-md py-sm"
diff --git a/tests/nostr-ephemeral-dm-tester.html b/tests/nostr-ephemeral-dm-tester.html
index 29fed468..c3f9b36a 100644
--- a/tests/nostr-ephemeral-dm-tester.html
+++ b/tests/nostr-ephemeral-dm-tester.html
@@ -36,8 +36,11 @@
     <!-- Load nostr‑tools v2.10.4 -->
     <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
   </head>
-  <body class="bg-surface font-sans text-text">
-    <main class="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-6">
+  <body class="bg-surface font-sans text-text" data-ds="new">
+    <main
+      class="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-6"
+      data-ds="new"
+    >
       <header class="space-y-2">
         <h1 class="text-3xl font-semibold text-text">
           Nostr Ephemeral DM Tester (Using finalizeEvent)
diff --git a/torrent/beacon.html b/torrent/beacon.html
index 1a2d0e80..b202e794 100644
--- a/torrent/beacon.html
+++ b/torrent/beacon.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="../css/tailwind.generated.css" />
   </head>
 
-  <body class="bg-surface font-sans text-text">
+  <body class="bg-surface font-sans text-text" data-ds="new">
     <header class="ds-header border-b border-border-translucent-medium bg-surface">
       <div class="mx-auto flex max-w-5xl items-center px-4 py-6 sm:px-6 lg:px-8">
         <a
@@ -67,7 +67,10 @@
       </div>
     </header>
 
-    <main class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8 bv-stack">
+    <main
+      class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8 bv-stack"
+      data-ds="new"
+    >
       <section class="card p-6">
         <form
           class="bv-stack bv-stack--tight md:flex md:flex-row md:items-end md:gap-md"