From 4ed2f9ba141591beef2ef773375167e5297f13b0 Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Fri, 5 Jun 2026 20:06:59 +0100
Subject: [PATCH] UI: Font Awesome icons, Material touches, 3-line collapse
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap all emoji icons for Font Awesome (sidebar, homepage tiles, profile/chat/
list/settings/relay actions); add Roboto font + card elevation hover for a
Material feel. Replace the bottom 'Collapse' pill with a 3-line (fa-bars) toggle
in the sidebar header; remove the old collapse pill CSS/JS. Copy buttons toggle
FA check/copy via innerHTML. Plain text status (✓/✗) and back arrows kept.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 manager/templates/base.html     | 88 +++++++++++++++++----------------
 manager/templates/chat.html     |  4 +-
 manager/templates/home.html     | 22 ++++-----
 manager/templates/list.html     |  6 +--
 manager/templates/profile.html  | 18 +++----
 manager/templates/relay.html    |  2 +-
 manager/templates/settings.html |  6 +--
 7 files changed, 74 insertions(+), 72 deletions(-)

diff --git a/manager/templates/base.html b/manager/templates/base.html
index 7f45577..42e3497 100644
--- a/manager/templates/base.html
+++ b/manager/templates/base.html
@@ -12,6 +12,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}SimpleX Manager{% endblock %}</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js"></script>
   <script>
     document.addEventListener('htmx:configRequest', function(evt) {
@@ -76,9 +79,16 @@
       --badge-red-text:   #ff6b6b;
     }
 
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+    body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            background: var(--bg); color: var(--text); min-height: 100vh; }
 
+    /* Material-ish elevation: cards lift slightly on hover */
+    .card { transition: box-shadow 0.18s ease, transform 0.05s ease; }
+    .card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.14); }
+    [data-theme="matrix"] .card:hover { box-shadow: 0 0 18px rgba(0,255,65,0.22); }
+    .btn { box-shadow: 0 1px 3px rgba(0,0,0,0.18); letter-spacing: 0.2px; }
+    .btn-ghost { box-shadow: none; }
+
     [data-theme="matrix"] body {
       font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
       text-shadow: 0 0 2px rgba(0,255,65,0.4);
@@ -98,13 +108,21 @@
     }
     html.collapsed .sidebar { width: 64px; }
 
+    .side-head { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
+    .collapse-toggle {
+      flex-shrink: 0; background: none; border: none; cursor: pointer;
+      color: var(--muted); font-size: 17px; padding: 18px;
+    }
+    .collapse-toggle:hover { color: var(--text); }
     .nav-brand {
       display: flex; align-items: center; gap: 10px;
-      padding: 18px; font-size: 16px; font-weight: 700;
+      padding: 18px 18px 18px 0; font-size: 16px; font-weight: 700;
       color: var(--accent); text-decoration: none;
-      border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden;
+      white-space: nowrap; overflow: hidden;
     }
     .nav-brand .brand-icon { font-size: 18px; flex-shrink: 0; }
+    html.collapsed .nav-brand { display: none; }
+    html.collapsed .side-head { justify-content: center; }
 
     .side-nav { display: flex; flex-direction: column; padding: 8px 0; }
     .side-nav a {
@@ -139,17 +157,6 @@
     .ss-dot.online  { background: var(--green); box-shadow: 0 0 5px var(--green); }
     .ss-dot.offline { background: var(--red); }
     html.collapsed .side-status { display: none; }
-    .collapse-btn {
-      display: flex; align-items: center; justify-content: space-between; gap: 10px;
-      margin: 8px 12px; padding: 8px 12px; border-radius: 8px;
-      background: var(--bg); border: 1px solid var(--border); cursor: pointer;
-      color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 600;
-      white-space: nowrap; overflow: hidden;
-      transition: border-color 0.15s, color 0.15s, background 0.15s;
-    }
-    .collapse-btn:hover { color: var(--text); border-color: var(--accent); }
-    .collapse-btn .ico { font-size: 16px; line-height: 1; flex-shrink: 0; }
-    html.collapsed .collapse-btn { justify-content: center; margin: 8px; padding: 8px; }
 
     html.collapsed .lbl, html.collapsed .brand-text { display: none; }
 
@@ -183,10 +190,12 @@
       }
       html.collapsed .sidebar { width: 240px; }       /* ignore collapse on mobile */
       html.collapsed .lbl, html.collapsed .brand-text { display: inline; }
+      html.collapsed .nav-brand { display: flex; }    /* keep brand visible on mobile */
+      html.collapsed .side-head { justify-content: flex-start; }
       body.sidebar-open .sidebar { transform: translateX(0); }
       body.sidebar-open .backdrop { display: block; }
       .mobile-menu-btn { display: flex; }
-      .collapse-btn { display: none; }
+      .collapse-toggle { display: none; }             /* mobile uses the drawer toggle instead */
       .container { padding-top: 64px; }
     }
 
@@ -262,41 +271,41 @@
   {% block head %}{% endblock %}
 </head>
 <body>
-<button class="mobile-menu-btn" onclick="toggleSidebar()" aria-label="Menu">☰</button>
+<button class="mobile-menu-btn" onclick="toggleSidebar()" aria-label="Menu"><i class="fa-solid fa-bars"></i></button>
 <div class="app">
   <aside class="sidebar" id="sidebar">
-    <a class="nav-brand" href="/">
-      <span class="brand-icon">◆</span><span class="brand-text">SimpleX Manager</span>
-    </a>
+    <div class="side-head">
+      <button class="collapse-toggle" onclick="toggleCollapse()" title="Collapse sidebar" aria-label="Collapse sidebar"><i class="fa-solid fa-bars"></i></button>
+      <a class="nav-brand" href="/">
+        <span class="brand-icon"><i class="fa-solid fa-diamond"></i></span><span class="brand-text">SimpleX Manager</span>
+      </a>
+    </div>
     <nav class="side-nav">
       <!-- Group 1: accounts -->
-      <a href="/users"    {% if nav_active == 'users'    %}class="active"{% endif %}><span class="ico">👤</span><span class="lbl">Users</span></a>
-      <a href="/businesses" {% if nav_active == 'businesses' %}class="active"{% endif %}><span class="ico">💼</span><span class="lbl">Businesses</span></a>
-      <a href="/bots"     {% if nav_active == 'bots'     %}class="active"{% endif %}><span class="ico">🤖</span><span class="lbl">Bots</span></a>
-      <a href="https://simplex.chat/file/" target="_blank" rel="noopener"><span class="ico">📁</span><span class="lbl">File Upload</span></a>
+      <a href="/users"    {% if nav_active == 'users'    %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-user"></i></span><span class="lbl">Users</span></a>
+      <a href="/businesses" {% if nav_active == 'businesses' %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-briefcase"></i></span><span class="lbl">Businesses</span></a>
+      <a href="/bots"     {% if nav_active == 'bots'     %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-robot"></i></span><span class="lbl">Bots</span></a>
+      <a href="https://simplex.chat/file/" target="_blank" rel="noopener"><span class="ico"><i class="fa-solid fa-upload"></i></span><span class="lbl">File Upload</span></a>
       <!-- Group 2: relays -->
-      <a href="/relays/chat"    class="nav-sep {% if nav_active == 'relays' and kind == 'chat'    %}active{% endif %}"><span class="ico">💬</span><span class="lbl">Chat Relay</span></a>
-      <a href="/relays/file"    {% if nav_active == 'relays' and kind == 'file'    %}class="active"{% endif %}><span class="ico">📤</span><span class="lbl">File Relay</span></a>
-      <a href="/relays/message" {% if nav_active == 'relays' and kind == 'message' %}class="active"{% endif %}><span class="ico">✉️</span><span class="lbl">Message Relay</span></a>
+      <a href="/relays/chat"    class="nav-sep {% if nav_active == 'relays' and kind == 'chat'    %}active{% endif %}"><span class="ico"><i class="fa-solid fa-comments"></i></span><span class="lbl">Chat Relay</span></a>
+      <a href="/relays/file"    {% if nav_active == 'relays' and kind == 'file'    %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-file-export"></i></span><span class="lbl">File Relay</span></a>
+      <a href="/relays/message" {% if nav_active == 'relays' and kind == 'message' %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-envelope"></i></span><span class="lbl">Message Relay</span></a>
       <!-- Group 3: system -->
-      <a href="/network" class="nav-sep {% if nav_active == 'network' %}active{% endif %}"><span class="ico">📡</span><span class="lbl">Network</span></a>
-      <a href="/notifications" {% if nav_active == 'notifications' %}class="active"{% endif %}><span class="ico">🔔</span><span class="lbl">Notifications</span><span class="notif-badge" id="notif-badge" style="display:none;"></span></a>
-      <a href="/settings" {% if nav_active == 'settings' %}class="active"{% endif %}><span class="ico">⚙️</span><span class="lbl">Settings</span></a>
+      <a href="/network" class="nav-sep {% if nav_active == 'network' %}active{% endif %}"><span class="ico"><i class="fa-solid fa-tower-broadcast"></i></span><span class="lbl">Network</span></a>
+      <a href="/notifications" {% if nav_active == 'notifications' %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-bell"></i></span><span class="lbl">Notifications</span><span class="notif-badge" id="notif-badge" style="display:none;"></span></a>
+      <a href="/settings" {% if nav_active == 'settings' %}class="active"{% endif %}><span class="ico"><i class="fa-solid fa-gear"></i></span><span class="lbl">Settings</span></a>
       <!-- Group 4: external -->
-      <a href="https://simplex.chat/downloads/" target="_blank" rel="noopener" class="nav-sep"><span class="ico">📲</span><span class="lbl">Get App</span></a>
+      <a href="https://simplex.chat/downloads/" target="_blank" rel="noopener" class="nav-sep"><span class="ico"><i class="fa-solid fa-download"></i></span><span class="lbl">Get App</span></a>
     </nav>
     <div class="side-foot">
       <a href="/network" class="side-status" id="side-status" title="View SimpleX network &amp; servers"
          style="display:block;text-decoration:none;{% if nav_active == 'network' %}background:var(--bg);{% endif %}">
         <div class="ss-row"><span class="ss-dot" id="ss-dot"></span><span id="ss-running">–/–</span>&nbsp;running</div>
-        <div class="ss-row" id="ss-servers">📡 –</div>
+        <div class="ss-row"><i class="fa-solid fa-server" style="width:14px;text-align:center;"></i>&nbsp;<span id="ss-servers">–</span></div>
         <div class="ss-row" id="ss-ops" style="opacity:0.8;"></div>
       </a>
-      <button class="collapse-btn" onclick="toggleCollapse()" title="Collapse sidebar" aria-label="Collapse sidebar">
-        <span class="lbl">Collapse</span><span class="ico" id="collapse-ico">‹</span>
-      </button>
       <nav class="side-nav">
-        <a href="/logout"><span class="ico">⏻</span><span class="lbl">Logout</span></a>
+        <a href="/logout"><span class="ico"><i class="fa-solid fa-right-from-bracket"></i></span><span class="lbl">Logout</span></a>
       </nav>
     </div>
   </aside>
@@ -320,14 +329,7 @@
   function toggleCollapse() {
     const collapsed = document.documentElement.classList.toggle('collapsed');
     localStorage.setItem('sidebar-collapsed', collapsed ? '1' : '');
-    const ico = document.getElementById('collapse-ico');
-    if (ico) ico.textContent = collapsed ? '›' : '‹';
   }
-  // Sync collapse icon with restored state on load
-  (function(){
-    const ico = document.getElementById('collapse-ico');
-    if (ico && document.documentElement.classList.contains('collapsed')) ico.textContent = '›';
-  })();
 
   // Poll for unread notifications and update the sidebar badge
   async function pollNotifications() {
@@ -358,7 +360,7 @@
       const dot = document.getElementById('ss-dot');
       dot.className = 'ss-dot ' + (d.online ? 'online' : 'offline');
       document.getElementById('ss-servers').textContent =
-        d.online ? `📡 ${d.smp_servers} SMP · ${d.xftp_servers} XFTP` : 'no profile running';
+        d.online ? `${d.smp_servers} SMP · ${d.xftp_servers} XFTP` : 'no profile running';
       document.getElementById('ss-ops').textContent =
         (d.operators && d.operators.length) ? d.operators.join(', ') : '';
     } catch (e) {}
diff --git a/manager/templates/chat.html b/manager/templates/chat.html
index 0c652d5..febce04 100644
--- a/manager/templates/chat.html
+++ b/manager/templates/chat.html
@@ -51,11 +51,11 @@
   <div class="chat-head">
     <span class="title">{{ chat_name }}</span>
     <button class="btn btn-ghost" style="padding:4px 12px;font-size:12px;"
-            onclick="loadMessages(true)">↻ Refresh</button>
+            onclick="loadMessages(true)"><i class="fa-solid fa-rotate-right"></i> Refresh</button>
   </div>
 
   {% if is_channel %}
-  <div class="chat-banner">📢 Channel — messages you send here broadcast to all subscribers.</div>
+  <div class="chat-banner"><i class="fa-solid fa-bullhorn"></i> Channel — messages you send here broadcast to all subscribers.</div>
   {% endif %}
 
   <div class="chat-log" id="chat-log">
diff --git a/manager/templates/home.html b/manager/templates/home.html
index 4cb2320..1da6c74 100644
--- a/manager/templates/home.html
+++ b/manager/templates/home.html
@@ -33,19 +33,19 @@
 <!-- Area 1: your accounts -->
 <div class="tiles">
   <a class="tile" href="/users">
-    <span class="t-ico">👤</span>
+    <span class="t-ico"><i class="fa-solid fa-user"></i></span>
     <span class="t-title">Users</span>
   </a>
   <a class="tile" href="/businesses">
-    <span class="t-ico">💼</span>
+    <span class="t-ico"><i class="fa-solid fa-briefcase"></i></span>
     <span class="t-title">Businesses</span>
   </a>
   <a class="tile" href="/bots">
-    <span class="t-ico">🤖</span>
+    <span class="t-ico"><i class="fa-solid fa-robot"></i></span>
     <span class="t-title">Bots</span>
   </a>
   <a class="tile" href="https://simplex.chat/file/" target="_blank" rel="noopener">
-    <span class="t-ico">📁</span>
+    <span class="t-ico"><i class="fa-solid fa-upload"></i></span>
     <span class="t-title">File Upload</span>
   </a>
 </div>
@@ -53,15 +53,15 @@
 <!-- Area: relays -->
 <div class="tiles">
   <a class="tile" href="/relays/chat">
-    <span class="t-ico">💬</span>
+    <span class="t-ico"><i class="fa-solid fa-comments"></i></span>
     <span class="t-title">Chat Relay</span>
   </a>
   <a class="tile" href="/relays/file">
-    <span class="t-ico">📤</span>
+    <span class="t-ico"><i class="fa-solid fa-file-export"></i></span>
     <span class="t-title">File Relay</span>
   </a>
   <a class="tile" href="/relays/message">
-    <span class="t-ico">✉️</span>
+    <span class="t-ico"><i class="fa-solid fa-envelope"></i></span>
     <span class="t-title">Message Relay</span>
   </a>
 </div>
@@ -69,16 +69,16 @@
 <!-- Area 3: system -->
 <div class="tiles">
   <a class="tile" href="/network">
-    <span class="t-ico">📡</span>
+    <span class="t-ico"><i class="fa-solid fa-tower-broadcast"></i></span>
     <span class="t-title">Network</span>
   </a>
   <a class="tile" href="/notifications">
-    <span class="t-ico">🔔</span>
+    <span class="t-ico"><i class="fa-solid fa-bell"></i></span>
     <span class="t-title">Notifications</span>
     <span class="notif-badge" style="display:none;"></span>
   </a>
   <a class="tile" href="/settings">
-    <span class="t-ico">⚙️</span>
+    <span class="t-ico"><i class="fa-solid fa-gear"></i></span>
     <span class="t-title">Settings</span>
   </a>
 </div>
@@ -86,7 +86,7 @@
 <!-- Area 3: SimpleX (external) -->
 <div class="tiles">
   <a class="tile" href="https://simplex.chat/downloads/" target="_blank" rel="noopener">
-    <span class="t-ico">📲</span>
+    <span class="t-ico"><i class="fa-solid fa-download"></i></span>
     <span class="t-title">Get SimpleX App</span>
   </a>
 </div>
diff --git a/manager/templates/list.html b/manager/templates/list.html
index f35f077..e0cca28 100644
--- a/manager/templates/list.html
+++ b/manager/templates/list.html
@@ -89,7 +89,7 @@
     {% if p.address %}
     <div class="addr-row" onclick="event.stopPropagation()">
       <button class="btn btn-ghost copy-btn" title="Copy address"
-              onclick="copyAddr(event, this, '{{ p.address | e }}')">📋</button>
+              onclick="copyAddr(event, this, '{{ p.address | e }}')"><i class="fa-solid fa-copy"></i></button>
       <a class="addr-link" href="{{ p.address }}" target="_blank" rel="noopener">{{ p.address }}</a>
     </div>
     {% endif %}
@@ -283,8 +283,8 @@ function onAvatarChange(input) {
 function copyAddr(ev, btn, addr) {
   ev.stopPropagation();
   navigator.clipboard.writeText(addr).then(() => {
-    btn.textContent = '✓';
-    setTimeout(() => btn.textContent = '📋', 1500);
+    btn.innerHTML = '<i class="fa-solid fa-check"></i>';
+    setTimeout(() => btn.innerHTML = '<i class="fa-solid fa-copy"></i>', 1500);
   });
 }
 
diff --git a/manager/templates/profile.html b/manager/templates/profile.html
index 3f3c87a..8fac3e1 100644
--- a/manager/templates/profile.html
+++ b/manager/templates/profile.html
@@ -90,7 +90,7 @@
       {% if profile.address %}
       <div class="addr-row">
         <button class="btn btn-ghost copy-btn" title="Copy address"
-                onclick="copyAddr(this, '{{ profile.address | e }}')">📋</button>
+                onclick="copyAddr(this, '{{ profile.address | e }}')"><i class="fa-solid fa-copy"></i></button>
         <a class="addr-link" href="{{ profile.address }}" target="_blank" rel="noopener" id="address-text">{{ profile.address }}</a>
       </div>
       <div class="qr-wrap">
@@ -114,7 +114,7 @@
       <p class="muted" style="margin-bottom:12px;">Auto-generated listing page for this directory bot.</p>
       <div class="addr-row">
         <button class="btn btn-ghost copy-btn" title="Copy URL"
-                onclick="copyAddr(this, location.origin + '/directory/{{ safe }}/index.html')">📋</button>
+                onclick="copyAddr(this, location.origin + '/directory/{{ safe }}/index.html')"><i class="fa-solid fa-copy"></i></button>
         <a class="addr-link" href="/directory/{{ safe }}/index.html" target="_blank" rel="noopener">/directory/{{ safe }}/index.html</a>
       </div>
     </div>
@@ -148,11 +148,11 @@
           <td>
             <div class="flex gap-8" style="justify-content:flex-end;">
               <a class="msg-btn" style="text-decoration:none;"
-                 href="/profile/{{ profile.id }}/chat/direct/{{ c.contactId }}">💬 Chat</a>
+                 href="/profile/{{ profile.id }}/chat/direct/{{ c.contactId }}"><i class="fa-solid fa-comments"></i> Chat</a>
               <button class="msg-btn" title="Clear conversation"
-                      onclick="clearChat('direct', {{ c.contactId }}, '{{ c.localDisplayName | e }}')">🧹 Clear</button>
+                      onclick="clearChat('direct', {{ c.contactId }}, '{{ c.localDisplayName | e }}')"><i class="fa-solid fa-broom"></i> Clear</button>
               <button class="msg-btn msg-btn-danger" title="Delete contact"
-                      onclick="deleteContact({{ c.contactId }}, '{{ c.localDisplayName | e }}')">🗑 Delete</button>
+                      onclick="deleteContact({{ c.contactId }}, '{{ c.localDisplayName | e }}')"><i class="fa-solid fa-trash"></i> Delete</button>
             </div>
           </td>
         </tr>
@@ -188,7 +188,7 @@
           <button class="msg-btn" onclick="joinGroup({{ gid }}, this)">Join</button>
           {% else %}
           <a class="msg-btn" style="text-decoration:none;"
-             href="/profile/{{ profile.id }}/chat/group/{{ gid }}">💬 {{ 'Broadcast' if g.is_channel else 'Chat' }}</a>
+             href="/profile/{{ profile.id }}/chat/group/{{ gid }}"><i class="fa-solid fa-comments"></i> {{ 'Broadcast' if g.is_channel else 'Chat' }}</a>
           <button class="msg-btn" onclick="getGroupLink({{ gid }}, this)">Link</button>
           <button class="msg-btn msg-btn-danger" onclick="leaveGroup({{ gid }}, '{{ name | e }}', this)">Leave</button>
           {% if is_owner %}
@@ -282,7 +282,7 @@
   <div class="flex-between" style="margin-bottom:16px;">
     <h2 style="margin:0;">Members — <span id="members-channel-name" style="color:var(--accent);"></span></h2>
     <button class="btn btn-ghost" style="padding:4px 10px;font-size:13px;"
-            onclick="document.getElementById('members-dialog').close()">✕</button>
+            onclick="document.getElementById('members-dialog').close()"><i class="fa-solid fa-xmark"></i></button>
   </div>
   <div id="members-list" style="max-height:320px;overflow-y:auto;">
     <p class="muted">Loading…</p>
@@ -371,8 +371,8 @@ async function sendMsg() {
 
 function copyAddr(btn, addr) {
   navigator.clipboard.writeText(addr).then(() => {
-    btn.textContent = '✓';
-    setTimeout(() => btn.textContent = '📋', 1500);
+    btn.innerHTML = '<i class="fa-solid fa-check"></i>';
+    setTimeout(() => btn.innerHTML = '<i class="fa-solid fa-copy"></i>', 1500);
   });
 }
 
diff --git a/manager/templates/relay.html b/manager/templates/relay.html
index 5e4c57a..967c7a1 100644
--- a/manager/templates/relay.html
+++ b/manager/templates/relay.html
@@ -8,7 +8,7 @@
 </div>
 
 <div class="card" style="text-align:center;padding:48px 24px;">
-  <div style="font-size:40px;line-height:1;margin-bottom:12px;">🔀</div>
+  <div style="font-size:40px;line-height:1;margin-bottom:12px;"><i class="fa-solid fa-shuffle"></i></div>
   <strong>{{ title }} — coming soon</strong>
   <p class="muted" style="margin-top:8px;">This relay isn’t implemented yet.</p>
 </div>
diff --git a/manager/templates/settings.html b/manager/templates/settings.html
index 2f9070c..3bd6b73 100644
--- a/manager/templates/settings.html
+++ b/manager/templates/settings.html
@@ -100,7 +100,7 @@
       </div>
       <div class="theme-label">
         <span>Original Light</span>
-        <span class="checkmark">✓</span>
+        <span class="checkmark"><i class="fa-solid fa-check"></i></span>
       </div>
     </div>
 
@@ -113,7 +113,7 @@
       </div>
       <div class="theme-label">
         <span>Original Dark</span>
-        <span class="checkmark">✓</span>
+        <span class="checkmark"><i class="fa-solid fa-check"></i></span>
       </div>
     </div>
 
@@ -126,7 +126,7 @@
       </div>
       <div class="theme-label">
         <span>Matrix</span>
-        <span class="checkmark">✓</span>
+        <span class="checkmark"><i class="fa-solid fa-check"></i></span>
       </div>
     </div>