From 35a041d1befd60bc8dfbf88b3dcf29e7166242aa Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 12:16:22 -0400
Subject: [PATCH] Refine profile and edit modals with design system tokens

---
 components/edit-video-modal.html | 118 ++++++++++-----------
 components/profile-modal.html    | 177 ++++++++++++++++---------------
 js/app.js                        |   4 +-
 js/historyView.js                |  45 ++++----
 js/ui/profileModalController.js  |  68 ++++++------
 views/history.html               |   7 +-
 6 files changed, 224 insertions(+), 195 deletions(-)

diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index 5f953951..c8c69afd 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -12,29 +12,29 @@
     class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-4xl my-0 overflow-y-auto relative max-h-[90vh]"
     tabindex="-1"
   >
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
-      >
-        <h2 class="text-xl font-bold text-white">Edit Video Note</h2>
-        <button
-          id="closeEditVideoModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
+      <div class="sticky top-0 p-4">
+        <div class="card flex items-center justify-between gap-4 p-4">
+          <h2 class="text-xl font-bold text-white">Edit Video Note</h2>
+          <button
+            id="closeEditVideoModal"
+            class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
 
       <div class="p-6 space-y-6">
@@ -56,7 +56,7 @@
               />
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoTitle"
               >
                 Edit field
@@ -210,7 +210,7 @@
                 <h3 id="editNip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
                 <button
                   type="button"
-                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  class="btn-ghost focus-ring text-xs font-semibold"
                   data-nip71-add="imeta"
                   aria-describedby="editNip71ImetaHelp"
                 >
@@ -223,7 +223,7 @@
               </p>
               <div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
               <template id="editNip71ImetaTemplate" data-nip71-template="imeta">
-                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="imeta">
+                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="imeta">
                   <div class="grid gap-3 md:grid-cols-2">
                     <div>
                       <label class="block text-xs font-medium text-gray-300">
@@ -280,7 +280,7 @@
                       <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
                       <button
                         type="button"
-                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="btn-ghost focus-ring text-[11px] font-medium"
                         data-nip71-nested-add="image"
                       >
                         Add image URL
@@ -297,7 +297,7 @@
                         />
                         <button
                           type="button"
-                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          class="btn-ghost focus-ring text-[11px] font-medium"
                           data-nip71-remove="nested"
                           aria-label="Remove image URL"
                         >
@@ -312,7 +312,7 @@
                       <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
                       <button
                         type="button"
-                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="btn-ghost focus-ring text-[11px] font-medium"
                         data-nip71-nested-add="fallback"
                       >
                         Add fallback
@@ -329,7 +329,7 @@
                         />
                         <button
                           type="button"
-                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          class="btn-ghost focus-ring text-[11px] font-medium"
                           data-nip71-remove="nested"
                           aria-label="Remove fallback URL"
                         >
@@ -344,7 +344,7 @@
                       <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
                       <button
                         type="button"
-                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="btn-ghost focus-ring text-[11px] font-medium"
                         data-nip71-nested-add="service"
                       >
                         Add service
@@ -361,7 +361,7 @@
                         />
                         <button
                           type="button"
-                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          class="btn-ghost focus-ring text-[11px] font-medium"
                           data-nip71-remove="nested"
                           aria-label="Remove service entry"
                         >
@@ -374,7 +374,7 @@
                   <div class="flex justify-end">
                     <button
                       type="button"
-                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      class="btn-ghost focus-ring text-[11px] font-medium"
                       data-nip71-remove="imeta"
                     >
                       Remove variant
@@ -391,7 +391,7 @@
                 </h3>
                 <button
                   type="button"
-                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  class="btn-ghost focus-ring text-xs font-semibold"
                   data-nip71-add="text-track"
                   aria-describedby="editNip71TextTracksHelp"
                 >
@@ -403,7 +403,7 @@
               </p>
               <div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
               <template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
-                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="text-track">
+                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="text-track">
                   <div class="grid gap-3 md:grid-cols-3">
                     <div>
                       <label class="block text-xs font-medium text-gray-300">Track URL</label>
@@ -436,7 +436,7 @@
                   <div class="flex justify-end">
                     <button
                       type="button"
-                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      class="btn-ghost focus-ring text-[11px] font-medium"
                       data-nip71-remove="text-track"
                     >
                       Remove track
@@ -451,7 +451,7 @@
                 <h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters &amp; segments (segment)</h3>
                 <button
                   type="button"
-                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  class="btn-ghost focus-ring text-xs font-semibold"
                   data-nip71-add="segment"
                   aria-describedby="editNip71SegmentsHelp"
                 >
@@ -463,7 +463,7 @@
               </p>
               <div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
               <template id="editNip71SegmentTemplate" data-nip71-template="segment">
-                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="segment">
+                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="segment">
                   <div class="grid gap-3 md:grid-cols-2">
                     <div>
                       <label class="block text-xs font-medium text-gray-300">Start (seconds)</label>
@@ -507,7 +507,7 @@
                   <div class="flex justify-end">
                     <button
                       type="button"
-                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      class="btn-ghost focus-ring text-[11px] font-medium"
                       data-nip71-remove="segment"
                     >
                       Remove segment
@@ -522,7 +522,7 @@
                 <h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
                 <button
                   type="button"
-                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  class="btn-ghost focus-ring text-xs font-semibold"
                   data-nip71-add="t"
                 >
                   Add hashtag
@@ -542,7 +542,7 @@
                   />
                   <button
                     type="button"
-                    class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                    class="btn-ghost focus-ring text-[11px] font-medium"
                     data-nip71-remove="t"
                   >
                     Remove
@@ -556,7 +556,7 @@
                 <h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
                 <button
                   type="button"
-                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  class="btn-ghost focus-ring text-xs font-semibold"
                   data-nip71-add="p"
                 >
                   Add participant
@@ -564,7 +564,7 @@
               </div>
               <div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
               <template id="editNip71ParticipantTemplate" data-nip71-template="p">
-                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="p">
+                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="p">
                   <div class="grid gap-3 md:grid-cols-2">
                     <div>
                       <label class="block text-xs font-medium text-gray-300">Participant pubkey</label>
@@ -588,7 +588,7 @@
                   <div class="flex justify-end">
                     <button
                       type="button"
-                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      class="btn-ghost focus-ring text-[11px] font-medium"
                       data-nip71-remove="p"
                     >
                       Remove participant
@@ -603,7 +603,7 @@
                 <h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
                 <button
                   type="button"
-                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  class="btn-ghost focus-ring text-xs font-semibold"
                   data-nip71-add="r"
                 >
                   Add reference
@@ -620,7 +620,7 @@
                   />
                   <button
                     type="button"
-                    class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                    class="btn-ghost focus-ring text-[11px] font-medium"
                     data-nip71-remove="r"
                   >
                     Remove
@@ -643,7 +643,7 @@
               />
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoUrl"
               >
                 Edit field
@@ -664,7 +664,7 @@
               />
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoWs"
               >
                 Edit field
@@ -685,7 +685,7 @@
               />
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoXs"
               >
                 Edit field
@@ -706,7 +706,7 @@
               />
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoMagnet"
               >
                 Edit field
@@ -727,7 +727,7 @@
               />
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoThumbnail"
               >
                 Edit field
@@ -748,7 +748,7 @@
               ></textarea>
               <button
                 type="button"
-                class="edit-field-button self-start hidden"
+                class="btn-ghost focus-ring hidden self-start text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoDescription"
               >
                 Edit field
@@ -773,7 +773,7 @@
                 >
                   <button
                     type="button"
-                    class="video-visibility-toggle__option"
+                    class="video-visibility-toggle__option focus-ring"
                     data-visibility-option="public"
                     aria-pressed="false"
                   >
@@ -781,7 +781,7 @@
                   </button>
                   <button
                     type="button"
-                    class="video-visibility-toggle__option"
+                    class="video-visibility-toggle__option focus-ring"
                     data-visibility-option="private"
                     aria-pressed="false"
                   >
@@ -801,7 +801,7 @@
               </p>
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoIsPrivate"
               >
                 Edit field
@@ -829,7 +829,7 @@
               </div>
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoIsNsfw"
               >
                 Edit field
@@ -857,7 +857,7 @@
               </div>
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editVideoIsForKids"
               >
                 Edit field
@@ -886,7 +886,7 @@
               </div>
               <button
                 type="button"
-                class="edit-field-button hidden"
+                class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
                 data-edit-target="editEnableComments"
               >
                 Edit field
@@ -898,14 +898,14 @@
             <button
               type="button"
               id="cancelEditVideo"
-              class="w-full sm:w-auto px-4 py-2 rounded-md bg-gray-800 text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500"
+              class="btn-ghost focus-ring w-full sm:w-auto"
             >
               Cancel
             </button>
             <button
               type="submit"
               id="submitEditVideo"
-              class="w-full sm:w-auto px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500"
+              class="btn focus-ring w-full sm:w-auto"
             >
               Save changes
             </button>
diff --git a/components/profile-modal.html b/components/profile-modal.html
index 5302de1a..54fec249 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -14,29 +14,29 @@
     tabindex="-1"
   >
       <!-- Modal Header -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
-      >
-        <h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
-        <button
-          id="closeProfileModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
+      <div class="sticky top-0 p-4">
+        <div class="card flex items-center justify-between gap-4 p-4">
+          <h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
+          <button
+            id="closeProfileModal"
+            class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
 
       <!-- Modal Body -->
@@ -44,22 +44,23 @@
         <div class="flex flex-col lg:flex-row gap-6 h-full">
           <!-- Left navigation column -->
           <nav
-            class="flex lg:flex-col gap-2 flex-shrink-0"
+            class="flex flex-wrap gap-2 flex-shrink-0 lg:flex-col"
             aria-label="Profile sections"
           >
             <button
               id="profileNavAccount"
               type="button"
-              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-white bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
               aria-controls="profilePaneAccount"
               aria-selected="true"
+              data-state="active"
             >
               Account
             </button>
             <button
               id="profileNavRelays"
               type="button"
-              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
               aria-controls="profilePaneRelays"
               aria-selected="false"
             >
@@ -68,7 +69,7 @@
             <button
               id="profileNavWallet"
               type="button"
-              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
               aria-controls="profilePaneWallet"
               aria-selected="false"
             >
@@ -77,7 +78,7 @@
             <button
               id="profileNavBlocked"
               type="button"
-              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
               aria-controls="profilePaneBlocked"
               aria-selected="false"
             >
@@ -86,7 +87,7 @@
             <button
               id="profileNavHistory"
               type="button"
-              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
               aria-controls="profilePaneHistory"
               aria-selected="false"
             >
@@ -95,7 +96,7 @@
             <button
               id="profileNavAdmin"
               type="button"
-              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 hidden"
+              class="btn-ghost focus-ring hidden w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
               aria-controls="profilePaneAdmin"
               aria-selected="false"
             >
@@ -116,61 +117,72 @@
                 "Profile modal account pane") so we are not dependent on utility
                 classes that may be purged or overridden by other builds.
               -->
-              <div class="profile-switcher" id="profileSwitcherTray">
-                <div class="profile-switcher__header">
-                  <div class="profile-switcher__intro">
-                    <h3 class="profile-switcher__title">Switch profiles</h3>
-                    <p class="profile-switcher__subtitle">
+              <div id="profileSwitcherTray" class="card space-y-6 p-6">
+                <div class="flex flex-wrap items-start justify-between gap-4">
+                  <div class="space-y-2">
+                    <h3 class="text-lg font-semibold text-white">Switch profiles</h3>
+                    <p class="text-sm text-gray-400">
                       Save multiple Nostr profiles so you can swap identities without leaving BitVid.
                     </p>
                   </div>
-                  <span class="profile-switcher__badge">Preview</span>
+                  <span class="badge" data-variant="info">Preview</span>
                 </div>
 
                 <div
-                  class="profile-card profile-card--active"
+                  class="card focus-ring flex items-center gap-4 p-4"
                   aria-label="Current Nostr profile"
                   aria-pressed="true"
                   role="button"
                   tabindex="0"
+                  data-state="active"
                 >
-                  <span class="profile-card__avatar">
+                  <span
+                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-blue-400/50 bg-slate-900"
+                  >
                     <img
                       id="profileModalAvatar"
                       src="assets/svg/default-profile.svg"
                       alt="Active profile avatar"
+                      class="h-full w-full object-cover"
                     />
                   </span>
-                  <span class="profile-card__meta">
-                    <span class="profile-card__topline">
-                      <span class="profile-card__label">Active profile</span>
+                  <div class="flex min-w-0 flex-1 flex-col gap-2">
+                    <div class="flex flex-wrap items-center gap-3">
+                      <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200">
+                        Active profile
+                      </span>
                       <a
                         id="profileChannelLink"
                         href="#"
-                        class="profile-card__action hidden"
+                        class="btn-ghost focus-ring hidden text-xs"
                       >
                         View channel
                       </a>
-                    </span>
-                    <span id="profileModalName" class="profile-card__name">Loading...</span>
-                    <span id="profileModalNpub" class="profile-card__npub">npub1...</span>
-                  </span>
+                    </div>
+                    <span id="profileModalName" class="truncate text-sm font-semibold text-white">Loading...</span>
+                    <span id="profileModalNpub" class="break-all font-mono text-xs text-gray-400">npub1...</span>
+                  </div>
                 </div>
 
                 <div
                   id="profileSwitcherList"
-                  class="profile-switcher__list"
+                  class="grid-stack"
                   aria-live="polite"
                   aria-label="Additional Nostr profiles"
+                  role="list"
+                  data-orientation="vertical"
                 ></div>
 
                 <button
                   type="button"
                   id="profileAddAccountBtn"
-                  class="profile-switcher__add"
+                  class="btn focus-ring w-full justify-start gap-4 p-4"
                   aria-label="Add a new Nostr profile"
                 >
-                  <span class="profile-switcher__addAvatar">
+                  <span
+                    class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20 text-blue-400"
+                    aria-hidden="true"
+                  >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
@@ -179,19 +191,18 @@
                       stroke-width="2"
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                      aria-hidden="true"
                     >
                       <line x1="12" y1="5" x2="12" y2="19" />
                       <line x1="5" y1="12" x2="19" y2="12" />
                     </svg>
                   </span>
-                  <span class="profile-switcher__addCopy">
-                    <span class="profile-switcher__addTitle">Add profile</span>
-                    <span class="profile-switcher__addHint">Link another npub</span>
+                  <span class="flex flex-col text-left">
+                    <span data-profile-add-title class="text-sm font-semibold text-white">Add profile</span>
+                    <span data-profile-add-hint class="text-xs text-gray-300">Link another npub</span>
                   </span>
                 </button>
 
-                <p class="profile-switcher__helper">
+                <p class="text-sm text-gray-400">
                   Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
                 </p>
               </div>
@@ -221,21 +232,21 @@
                     <button
                       id="addRelayBtn"
                       type="button"
-                      class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      class="btn focus-ring"
                     >
                       Add relay
                     </button>
                     <button
                       id="restoreRelaysBtn"
                       type="button"
-                      class="px-4 py-2 rounded-md bg-gray-800 text-sm font-medium text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      class="btn-ghost focus-ring"
                     >
                       Restore defaults
                     </button>
                   </div>
                 </div>
               </div>
-              <ul id="relayList" class="space-y-3"></ul>
+              <ul id="relayList" class="grid-stack" data-orientation="vertical"></ul>
             </section>
 
             <section
@@ -275,21 +286,22 @@
                   <button
                     id="profileWalletSave"
                     type="button"
-                    class="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="btn focus-ring"
                   >
                     Save wallet
                   </button>
                   <button
                     id="profileWalletTest"
                     type="button"
-                    class="inline-flex items-center justify-center rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200 transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="btn-ghost focus-ring"
                   >
                     Test connection
                   </button>
                   <button
                     id="profileWalletDisconnect"
                     type="button"
-                    class="inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="btn focus-ring"
+                    data-variant="danger"
                   >
                     Disconnect wallet
                   </button>
@@ -328,18 +340,18 @@
                 <button
                   id="addBlockedBtn"
                   type="button"
-                  class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  class="btn focus-ring"
                 >
                   Block creator
                 </button>
               </div>
               <div
                 id="blockedEmpty"
-                class="rounded-lg border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
+                class="card border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
               >
                 You haven’t blocked any creators yet.
               </div>
-              <ul id="blockedList" class="space-y-3"></ul>
+              <ul id="blockedList" class="grid-stack" data-orientation="vertical"></ul>
             </section>
             <section
               id="profilePaneHistory"
@@ -352,7 +364,7 @@
               </p>
               <div
                 id="profileHistoryFeatureBanner"
-                class="hidden rounded-md border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-100"
+                class="card hidden border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-100"
                 role="status"
                 aria-live="polite"
               ></div>
@@ -366,14 +378,14 @@
                     <button
                       id="profileHistoryClear"
                       type="button"
-                      class="inline-flex items-center gap-2 rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200 transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      class="btn-ghost focus-ring inline-flex items-center gap-2"
                     >
                       Clear local cache
                     </button>
                     <button
                       id="profileHistoryRepublish"
                       type="button"
-                      class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      class="btn focus-ring inline-flex items-center gap-2"
                     >
                       Republish now
                     </button>
@@ -396,7 +408,7 @@
                     <button
                       id="profileHistoryMetadataToggle"
                       type="button"
-                      class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition"
                       role="switch"
                       aria-checked="true"
                       aria-labelledby="profileHistoryMetadataLabel"
@@ -446,20 +458,22 @@
                 </div>
                 <div
                   id="profileHistoryError"
-                  class="hidden rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
+                  class="card hidden border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
                   role="alert"
                   aria-live="assertive"
                 ></div>
                 <div
                   id="profileHistoryEmpty"
-                  class="hidden rounded-lg border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
+                  class="card hidden border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
                 >
                   You haven’t watched any videos yet.
                 </div>
                 <div id="profileHistoryScroll" class="relative max-h-[420px] overflow-y-auto pr-1">
                   <div
                     id="profileHistoryGrid"
-                    class="watch-history-grid watch-history-grid--modal hidden"
+                    class="grid-stack hidden"
+                    data-variant="cards"
+                    data-orientation="vertical"
                     role="list"
                   ></div>
                   <div id="profileHistorySentinel" class="h-1 w-full"></div>
@@ -504,18 +518,18 @@
                   <button
                     id="adminAddModeratorBtn"
                     type="button"
-                    class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="btn focus-ring"
                   >
                     Add moderator
                   </button>
                 </div>
                 <div
                   id="adminModeratorsEmpty"
-                  class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                  class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
                 >
                   No moderators configured yet.
                 </div>
-                <ul id="adminModeratorList" class="space-y-3"></ul>
+                <ul id="adminModeratorList" class="grid-stack" data-orientation="vertical"></ul>
               </div>
 
               <div id="adminWhitelistSection" class="space-y-4">
@@ -540,18 +554,18 @@
                   <button
                     id="adminAddWhitelistBtn"
                     type="button"
-                    class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="btn focus-ring"
                   >
                     Add to whitelist
                   </button>
                 </div>
                 <div
                   id="adminWhitelistEmpty"
-                  class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                  class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
                 >
                   No whitelisted creators yet.
                 </div>
-                <ul id="adminWhitelistList" class="space-y-3"></ul>
+                <ul id="adminWhitelistList" class="grid-stack" data-orientation="vertical"></ul>
               </div>
 
               <div id="adminBlacklistSection" class="space-y-4">
@@ -576,18 +590,18 @@
                   <button
                     id="adminAddBlacklistBtn"
                     type="button"
-                    class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="btn focus-ring"
                   >
                     Add to blacklist
                   </button>
                 </div>
                 <div
                   id="adminBlacklistEmpty"
-                  class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                  class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
                 >
                   No blacklisted creators yet.
                 </div>
-                <ul id="adminBlacklistList" class="space-y-3"></ul>
+                <ul id="adminBlacklistList" class="grid-stack" data-orientation="vertical"></ul>
               </div>
             </section>
           </div>
@@ -595,11 +609,8 @@
       </div>
 
       <!-- Modal Footer -->
-      <div class="p-4 border-t border-gray-700 flex items-center justify-end">
-        <button
-          id="profileLogoutBtn"
-          class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900"
-        >
+      <div class="flex items-center justify-end gap-3 border-t border-gray-700 p-4">
+        <button id="profileLogoutBtn" class="btn focus-ring" data-variant="danger">
           Logout
         </button>
       </div>
diff --git a/js/app.js b/js/app.js
index 2e631ab3..7696be25 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1655,8 +1655,8 @@ class Application {
       return;
     }
 
-    const titleEl = button.querySelector(".profile-switcher__addTitle");
-    const hintEl = button.querySelector(".profile-switcher__addHint");
+    const titleEl = button.querySelector('[data-profile-add-title]');
+    const hintEl = button.querySelector('[data-profile-add-hint]');
     const originalTitle = titleEl ? titleEl.textContent : "";
     const originalHint = hintEl ? hintEl.textContent : "";
     const originalAriaLabel = button.getAttribute("aria-label");
diff --git a/js/historyView.js b/js/historyView.js
index 56d5416c..05e6a65c 100644
--- a/js/historyView.js
+++ b/js/historyView.js
@@ -345,14 +345,16 @@ export function buildHistoryCard({
   metadataPreference,
 }) {
   const article = document.createElement("article");
-  article.className = "watch-history-card";
+  article.className = "card flex flex-wrap items-stretch gap-6 p-5";
   article.dataset.pointerKey = item.pointerKey;
   if (video?.isPrivate) {
-    article.classList.add("watch-history-card--private");
+    article.dataset.state = "private";
+  } else {
+    delete article.dataset.state;
   }
 
   const primary = document.createElement("div");
-  primary.className = "watch-history-card__primary";
+  primary.className = "flex min-w-0 flex-1 gap-4";
 
   const playbackData = (() => {
     if (!video) {
@@ -371,7 +373,8 @@ export function buildHistoryCard({
   const pointerVideoId = getPointerVideoId(video, item.pointer);
 
   const thumbnailLink = document.createElement("a");
-  thumbnailLink.className = "watch-history-card__thumbnail";
+  thumbnailLink.className =
+    "focus-ring block max-w-[14rem] flex-shrink-0 overflow-hidden rounded-lg bg-slate-900 transition hover:opacity-90";
   thumbnailLink.href = "#";
   thumbnailLink.dataset.historyAction = "play";
   thumbnailLink.dataset.pointerKey = item.pointerKey;
@@ -386,8 +389,9 @@ export function buildHistoryCard({
   }
 
   const thumbnailInner = document.createElement("div");
-  thumbnailInner.className = "watch-history-card__thumbnailInner";
+  thumbnailInner.className = "aspect-video w-full overflow-hidden rounded-lg bg-slate-900";
   const thumbnailImg = document.createElement("img");
+  thumbnailImg.className = "h-full w-full object-cover";
   thumbnailImg.alt = video?.title || "Video thumbnail";
   const thumbnailSrc =
     (video && typeof video.thumbnail === "string" && video.thumbnail.trim())
@@ -400,10 +404,11 @@ export function buildHistoryCard({
   thumbnailLink.appendChild(thumbnailInner);
 
   const details = document.createElement("div");
-  details.className = "watch-history-card__details";
+  details.className = "flex min-w-0 flex-col justify-center gap-2";
 
   const titleLink = document.createElement("a");
-  titleLink.className = "watch-history-card__title";
+  titleLink.className =
+    "focus-ring text-left text-lg font-semibold text-white transition hover:text-blue-400";
   titleLink.href = "#";
   titleLink.dataset.historyAction = "play";
   titleLink.dataset.pointerKey = item.pointerKey;
@@ -419,7 +424,7 @@ export function buildHistoryCard({
   titleLink.textContent = video?.title || "Untitled video";
 
   const created = document.createElement("p");
-  created.className = "watch-history-card__created";
+  created.className = "text-sm text-gray-400";
   const createdAt = Number.isFinite(video?.created_at) ? video.created_at : null;
   created.textContent = createdAt
     ? `Published ${formatRelativeTime(createdAt)}`
@@ -432,27 +437,29 @@ export function buildHistoryCard({
   primary.appendChild(details);
 
   const meta = document.createElement("div");
-  meta.className = "watch-history-card__meta";
+  meta.className = "flex min-w-[14rem] flex-col justify-between gap-4";
 
   const watched = document.createElement("p");
-  watched.className = "watch-history-card__watched";
+  watched.className = "text-sm text-gray-500";
   watched.textContent = item.watchedAt
     ? `Watched ${formatRelativeTime(item.watchedAt)}`
     : "Watched time unavailable";
   meta.appendChild(watched);
 
   const creator = document.createElement("div");
-  creator.className = "watch-history-card__creator";
+  creator.className = "flex items-center gap-3";
 
   const creatorAvatarButton = document.createElement("button");
   creatorAvatarButton.type = "button";
-  creatorAvatarButton.className = "watch-history-card__creatorAvatar";
+  creatorAvatarButton.className =
+    "focus-ring flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-800";
   creatorAvatarButton.dataset.historyAction = "channel";
   creatorAvatarButton.dataset.pointerKey = item.pointerKey;
   if (video?.pubkey) {
     creatorAvatarButton.dataset.author = video.pubkey;
   }
   const avatarImg = document.createElement("img");
+  avatarImg.className = "h-full w-full object-cover";
   const avatarSrc =
     (profile && typeof profile.picture === "string" && profile.picture.trim())
       ? profile.picture.trim()
@@ -463,7 +470,8 @@ export function buildHistoryCard({
 
   const creatorNameButton = document.createElement("button");
   creatorNameButton.type = "button";
-  creatorNameButton.className = "watch-history-card__creatorName";
+  creatorNameButton.className =
+    "focus-ring text-left text-sm font-medium text-gray-200 transition hover:text-blue-400";
   creatorNameButton.dataset.historyAction = "channel";
   creatorNameButton.dataset.pointerKey = item.pointerKey;
   if (video?.pubkey) {
@@ -483,12 +491,11 @@ export function buildHistoryCard({
   meta.appendChild(creator);
 
   const actions = document.createElement("div");
-  actions.className = "watch-history-card__actions";
+  actions.className = "flex flex-wrap items-center gap-3";
 
   const playButton = document.createElement("button");
   playButton.type = "button";
-  playButton.className =
-    "watch-history-card__action watch-history-card__action--primary";
+  playButton.className = "btn focus-ring";
   playButton.dataset.historyAction = "play";
   playButton.dataset.pointerKey = item.pointerKey;
   if (pointerVideoId) {
@@ -504,7 +511,7 @@ export function buildHistoryCard({
 
   const channelButton = document.createElement("button");
   channelButton.type = "button";
-  channelButton.className = "watch-history-card__action";
+  channelButton.className = "btn-ghost focus-ring";
   channelButton.dataset.historyAction = "channel";
   channelButton.dataset.pointerKey = item.pointerKey;
   if (video?.pubkey) {
@@ -514,8 +521,8 @@ export function buildHistoryCard({
 
   const removeButton = document.createElement("button");
   removeButton.type = "button";
-  removeButton.className =
-    "watch-history-card__action watch-history-card__action--danger";
+  removeButton.className = "btn-ghost focus-ring";
+  removeButton.dataset.variant = "danger";
   removeButton.dataset.historyAction = "remove";
   removeButton.dataset.pointerKey = item.pointerKey;
   removeButton.textContent = "Remove from history";
diff --git a/js/ui/profileModalController.js b/js/ui/profileModalController.js
index 0566d61d..caa30829 100644
--- a/js/ui/profileModalController.js
+++ b/js/ui/profileModalController.js
@@ -1258,7 +1258,7 @@ export class ProfileModalController {
       if (!entriesToRender.length) {
         listEl.setAttribute("data-profile-switcher-empty", "true");
         const helper = document.createElement("p");
-        helper.className = "profile-switcher__empty text-sm text-gray-400";
+        helper.className = "text-sm text-gray-400";
         helper.textContent = "No other profiles saved yet.";
         helper.setAttribute("role", "note");
         listEl.appendChild(helper);
@@ -1269,7 +1269,8 @@ export class ProfileModalController {
           const meta = resolveMeta(entry);
           const button = document.createElement("button");
           button.type = "button";
-          button.classList.add("profile-card");
+          button.className =
+            "card focus-ring flex w-full items-center gap-4 p-4 text-left transition";
           button.dataset.pubkey = entry.pubkey;
           if (meta.npub) {
             button.dataset.npub = meta.npub;
@@ -1282,15 +1283,19 @@ export class ProfileModalController {
           const isSelected =
             normalizedSelection && normalizedPubkey === normalizedSelection;
           if (isSelected) {
-            button.classList.add("profile-card--active");
+            button.dataset.state = "active";
+            button.classList.add("ring-1", "ring-blue-400/60", "bg-blue-500/10");
             button.setAttribute("aria-pressed", "true");
           } else {
+            delete button.dataset.state;
             button.setAttribute("aria-pressed", "false");
           }
 
           const avatarSpan = document.createElement("span");
-          avatarSpan.className = "profile-card__avatar";
+          avatarSpan.className =
+            "flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-slate-500/50 bg-slate-900";
           const avatarImg = document.createElement("img");
+          avatarImg.className = "h-full w-full object-cover";
           avatarImg.src = meta.picture || FALLBACK_PROFILE_AVATAR;
           const cardDisplayName =
             meta.name?.trim() ||
@@ -1298,30 +1303,31 @@ export class ProfileModalController {
           avatarImg.alt = `${cardDisplayName} avatar`;
           avatarSpan.appendChild(avatarImg);
 
-          const metaSpan = document.createElement("span");
-          metaSpan.className = "profile-card__meta";
+          const metaSpan = document.createElement("div");
+          metaSpan.className = "flex min-w-0 flex-1 flex-col gap-2";
 
-          const topLine = document.createElement("span");
-          topLine.className = "profile-card__topline";
+          const topLine = document.createElement("div");
+          topLine.className = "flex flex-wrap items-center gap-3";
 
           const label = document.createElement("span");
-          label.className = "profile-card__label";
+          label.className =
+            "text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200";
           label.textContent =
             entry.authType === "nsec" ? "Direct key" : "Saved profile";
 
           const action = document.createElement("span");
-          action.className = "profile-card__action";
+          action.className = "text-xs font-medium text-gray-400";
           action.setAttribute("aria-hidden", "true");
           action.textContent = isSelected ? "Selected" : "Switch";
 
           topLine.append(label, action);
 
           const nameSpan = document.createElement("span");
-          nameSpan.className = "profile-card__name";
+          nameSpan.className = "truncate text-sm font-semibold text-white";
           nameSpan.textContent = cardDisplayName;
 
           const npubSpan = document.createElement("span");
-          npubSpan.className = "profile-card__npub";
+          npubSpan.className = "break-all font-mono text-xs text-gray-400";
           npubSpan.textContent = meta.npub
             ? truncate(meta.npub, 48)
             : "npub unavailable";
@@ -1424,9 +1430,11 @@ export class ProfileModalController {
       }
       const isActive = key === target;
       button.setAttribute("aria-selected", isActive ? "true" : "false");
-      button.classList.toggle("bg-gray-800", isActive);
-      button.classList.toggle("text-white", isActive);
-      button.classList.toggle("text-gray-400", !isActive);
+      if (isActive) {
+        button.dataset.state = "active";
+      } else {
+        delete button.dataset.state;
+      }
     });
 
     this.setActivePane(target);
@@ -1483,7 +1491,7 @@ export class ProfileModalController {
     if (!relays.length) {
       const emptyState = document.createElement("li");
       emptyState.className =
-        "rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400";
+        "card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400";
       emptyState.textContent = "No relays configured.";
       this.relayList.appendChild(emptyState);
       return;
@@ -1492,7 +1500,7 @@ export class ProfileModalController {
     relays.forEach((entry) => {
       const item = document.createElement("li");
       item.className =
-        "flex items-start justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
+        "card flex items-start justify-between gap-4 p-4";
 
       const info = document.createElement("div");
       info.className = "flex-1 min-w-0";
@@ -1519,8 +1527,7 @@ export class ProfileModalController {
 
       const editBtn = document.createElement("button");
       editBtn.type = "button";
-      editBtn.className =
-        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+      editBtn.className = "btn-ghost focus-ring text-xs";
       editBtn.textContent = "Change mode";
       editBtn.title = "Cycle between read-only, write-only, or read/write modes.";
       editBtn.addEventListener("click", () => {
@@ -1529,8 +1536,8 @@ export class ProfileModalController {
 
       const removeBtn = document.createElement("button");
       removeBtn.type = "button";
-      removeBtn.className =
-        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+      removeBtn.className = "btn-ghost focus-ring text-xs";
+      removeBtn.dataset.variant = "danger";
       removeBtn.textContent = "Remove";
       removeBtn.addEventListener("click", () => {
         void this.handleRemoveRelay(entry.url);
@@ -1838,21 +1845,21 @@ export class ProfileModalController {
     deduped.forEach(({ hex, label }) => {
       const item = document.createElement("li");
       item.className =
-        "flex items-center justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
+        "card flex items-center justify-between gap-4 p-4";
 
       const info = document.createElement("div");
-      info.className = "min-w-0";
+      info.className = "min-w-0 flex-1";
 
       const title = document.createElement("p");
-      title.className = "text-sm font-medium text-gray-100 break-all";
+      title.className = "break-all text-sm font-medium text-gray-100";
       title.textContent = label;
 
       info.appendChild(title);
 
       const actionBtn = document.createElement("button");
       actionBtn.type = "button";
-      actionBtn.className =
-        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+      actionBtn.className = "btn-ghost focus-ring text-xs";
+      actionBtn.dataset.variant = "danger";
       actionBtn.textContent = "Remove";
       actionBtn.dataset.blockedHex = hex;
       actionBtn.addEventListener("click", () => {
@@ -2618,18 +2625,17 @@ export class ProfileModalController {
     values.forEach((npub) => {
       const item = document.createElement("li");
       item.className =
-        "flex flex-col gap-2 rounded-lg bg-gray-800 px-4 py-3 sm:flex-row sm:items-center sm:justify-between";
+        "card flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between";
 
       const label = document.createElement("p");
-      label.className = "text-sm font-medium text-gray-100 break-all";
+      label.className = "break-all text-sm font-medium text-gray-100";
       label.textContent = npub;
       item.appendChild(label);
 
       if (removable && typeof onRemove === "function") {
         const removeBtn = document.createElement("button");
         removeBtn.type = "button";
-        removeBtn.className =
-          "self-start rounded-md bg-gray-700 px-3 py-1 text-xs font-medium text-gray-100 transition hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+        removeBtn.className = "btn-ghost focus-ring text-xs";
         removeBtn.textContent = removeLabel;
         removeBtn.addEventListener("click", () => {
           if (confirmMessage) {
@@ -2759,7 +2765,7 @@ export class ProfileModalController {
       this.setAdminLoading(false);
       if (
         adminNav instanceof HTMLElement &&
-        adminNav.classList.contains("bg-gray-800")
+        adminNav.dataset.state === "active"
       ) {
         this.selectPane("account");
       }
diff --git a/views/history.html b/views/history.html
index 0b1fb7c8..f1a596ea 100644
--- a/views/history.html
+++ b/views/history.html
@@ -88,7 +88,12 @@
     </div>
   </div>
 
-  <div id="watchHistoryGrid" class="watch-history-grid hidden"></div>
+        <div
+          id="watchHistoryGrid"
+          class="grid-stack hidden"
+          data-variant="cards"
+          data-orientation="vertical"
+        ></div>
   <p id="watchHistoryEmpty" class="hidden text-gray-400 text-center py-12">
     Your watch history is empty. Watch some videos to populate this list.
   </p>