diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 7520697..7f1e468 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -2539,7 +2539,7 @@ body.layout-legacy .comments-list {
 
 body.layout-legacy .scroll-nav-wrapper {
   position: absolute;
-  top: 0;
+  top: -30px;
   bottom: 0;
   right: -50px;
   width: 40px;
@@ -8017,12 +8017,6 @@ span.badge.badge-current {
   margin-bottom: 20px;
 }
 
-@media (max-width: 900px) {
-  .avatar-settings-wrapper {
-    grid-template-columns: 1fr;
-  }
-}
-
 .avatar-preview-container {
   display: flex;
   flex-direction: column;
diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js
index f2e7f69..79902d4 100644
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -3223,9 +3223,9 @@ window.cancelAnimFrame = (function () {
           const targetEl = document.querySelector(hash);
           if (targetEl) {
             targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            // Clear any previous highlight, then permanently mark this element
+            document.querySelectorAll('.comment-highlighted').forEach(el => el.classList.remove('comment-highlighted'));
             targetEl.classList.add('comment-highlighted');
-            // Remove highlight after some time to keep UI clean
-            setTimeout(() => targetEl.classList.remove('comment-highlighted'), 3000);
           }
         }
         
diff --git a/public/s/js/scroller.js b/public/s/js/scroller.js
index dd3cd91..ca37be5 100644
--- a/public/s/js/scroller.js
+++ b/public/s/js/scroller.js
@@ -711,9 +711,12 @@
       const id = contextLink.dataset.id;
       const target = commentsList.querySelector(`.comment-item[data-comment-id="${id}"]`);
       if (target) {
+        // Clear any previous persistent highlight
+        commentsList.querySelectorAll('.comment-linked').forEach(el => el.classList.remove('comment-linked'));
         target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        target.classList.add('highlight-comment');
-        setTimeout(() => target.classList.remove('highlight-comment'), 2000);
+        // Flash the animation for attention, then keep the persistent highlight
+        target.classList.add('highlight-comment', 'comment-linked');
+        setTimeout(() => target.classList.remove('highlight-comment'), 2500);
       }
     }
   });
diff --git a/src/inc/locales/de.json b/src/inc/locales/de.json
index e73eb3a..8906056 100644
--- a/src/inc/locales/de.json
+++ b/src/inc/locales/de.json
@@ -120,6 +120,7 @@
     "switching": "Wird umgeschaltet...",
     "generating": "Wird generiert...",
     "title": "Einstellungen",
+    "profile": "Profil",
     "avatar": "Avatar",
     "current_avatar": "Aktueller Avatar",
     "upload_custom_avatar": "Eigenen Avatar hochladen",
diff --git a/src/inc/locales/en.json b/src/inc/locales/en.json
index d7e9f39..3d7ec3b 100644
--- a/src/inc/locales/en.json
+++ b/src/inc/locales/en.json
@@ -120,6 +120,7 @@
     "switching": "Switching...",
     "generating": "Generating...",
     "title": "Settings",
+    "profile": "Profile",
     "avatar": "Avatar",
     "current_avatar": "Current Avatar",
     "upload_custom_avatar": "Upload Custom Avatar",
diff --git a/src/inc/locales/nl.json b/src/inc/locales/nl.json
index 464cc30..e40a86d 100644
--- a/src/inc/locales/nl.json
+++ b/src/inc/locales/nl.json
@@ -120,6 +120,7 @@
     "switching": "Omschakelen...",
     "generating": "Genereren...",
     "title": "Instellingen",
+    "profile": "Profiel",
     "avatar": "Avatar",
     "current_avatar": "Huidige Avatar",
     "upload_custom_avatar": "Aangepaste Avatar Uploaden",
diff --git a/src/inc/locales/zange.json b/src/inc/locales/zange.json
index aa8fc82..2150720 100644
--- a/src/inc/locales/zange.json
+++ b/src/inc/locales/zange.json
@@ -120,6 +120,7 @@
     "switching": "Umschaltung wird vorgenommen...",
     "generating": "Generierung wird angestoßen...",
     "title": "Einstellungen",
+    "profile": "Profil",
     "avatar": "Profilbild",
     "current_avatar": "Aktuelles Profilbild",
     "upload_custom_avatar": "Benutzerdefiniertes Profilbild aufladieren",
diff --git a/views/scroller.html b/views/scroller.html
index 4dc7e6e..9e733d3 100644
--- a/views/scroller.html
+++ b/views/scroller.html
@@ -630,6 +630,10 @@
       100% { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.05); }
     }
     .highlight-comment { animation: comment-highlight 2.5s cubic-bezier(0.2, 0, 0, 1); }
+    .comment-linked {
+      border-left: 2px solid var(--accent) !important;
+      background: rgba(var(--accent-rgb, 233, 30, 140), 0.07) !important;
+    }
     #reply-indicator {
       display: flex; align-items: center; gap: 8px;
       padding: 6px 12px; background: rgba(255,255,255,.05);
diff --git a/views/settings.html b/views/settings.html
index 60e743a..34581a9 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -6,20 +6,20 @@
 
       <!-- Quick navigation -->
       <nav id="settings-quicknav" aria-label="Settings sections">
-        <a href="/settings#sec-avatar">{{ t('settings.avatar') }}</a>
-        <a href="/settings#sec-preferences">{{ t('settings.preferences') }}</a>
+        <a href="#profile">{{ t('settings.profile') }}</a>
+        <a href="#preferences">{{ t('settings.preferences') }}</a>
         @if(enable_data_export)
-        <a href="/settings#sec-export">{{ t('settings.export_data_title') }}</a>
+        <a href="#export">{{ t('settings.export_data_title') }}</a>
         @endif
-        <a href="/settings#sec-account">{{ t('settings.account') }}</a>
+        <a href="#account">{{ t('settings.account') }}</a>
         @if(matrix_enabled)
-        <a href="/settings#sec-linked">{{ t('settings.linked_accounts') }}</a>
+        <a href="#linked">{{ t('settings.linked_accounts') }}</a>
         @endif
         @if(enable_user_api_keys)
-        <a href="/settings#sec-apikey">API Key</a>
+        <a href="#apikey">API Key</a>
         @endif
         @if(enable_user_invites)
-        <a href="/settings#sec-invites">{{ t('invites.section_title') }}</a>
+        <a href="#invites">{{ t('invites.section_title') }}</a>
         @endif
       </nav>
       <style>
@@ -27,16 +27,19 @@
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
-          margin-bottom: 28px;
-          padding: 10px 14px;
-          background: rgba(255,255,255,0.04);
-          border: 1px solid var(--nav-border-color);
-          border-radius: 8px;
-          position: sticky;
-          top: 0;
-          z-index: 50;
-          backdrop-filter: blur(8px);
+          padding: 8px 14px;
+          background: rgba(20,20,20,0.92);
+          border-bottom: 1px solid var(--nav-border-color);
+          position: fixed;
+          top: var(--navbar-h, 50px); /* sit just below the site navbar */
+          left: 0;
+          right: 0;
+          z-index: 200;
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
         }
+        /* Push content down so the fixed nav doesn't overlap headings */
+        .settings { padding-top: 56px; }
         #settings-quicknav a {
           font-size: 0.82em;
           font-weight: 600;
@@ -57,68 +60,85 @@
       </style>
       <script>
       (function(){
-        const nav = document.getElementById('settings-quicknav');
+        var nav = document.getElementById('settings-quicknav');
         if (!nav) return;
-        const links = Array.from(nav.querySelectorAll('a[href^="#"]'));
-        const targets = links.map(l => document.getElementById(l.getAttribute('href').slice(1))).filter(Boolean);
-        if (!targets.length) return;
-        const obs = new IntersectionObserver(entries => {
-          entries.forEach(e => {
-            const link = nav.querySelector('a[href="#' + e.target.id + '"]');
-            if (link) link.classList.toggle('active', e.isIntersecting);
+
+        function setActive(href) {
+          nav.querySelectorAll('a').forEach(function(a) {
+            a.classList.toggle('active', a.getAttribute('href') === href);
           });
-        }, { rootMargin: '-10% 0px -80% 0px', threshold: 0 });
-        targets.forEach(t => obs.observe(t));
+        }
+
+        // Set initial active from hash or default to first
+        var initHash = location.hash;
+        var links = nav.querySelectorAll('a[href^="#"]');
+        var firstLink = links[0];
+        if (initHash && nav.querySelector('a[href="' + initHash + '"]')) {
+          setActive(initHash);
+        } else if (firstLink) {
+          setActive(firstLink.getAttribute('href'));
+        }
+
+        // Delegated click on the nav container — fires before document-level handlers
+        nav.addEventListener('click', function(e) {
+          var link = e.target.closest('a[href^="#"]');
+          if (!link) return;
+          setActive(link.getAttribute('href'));
+        });
       })();
       </script>
 
-      <h2 id="sec-avatar">{{ t('settings.avatar') }}</h2>
-      <div class="avatar-settings-wrapper">
-        <div class="avatar-preview-container">
-          <div class="avatar-preview-label">{{ t('settings.current_avatar') }}</div>
-          @if(avatar_file)
-          <a href="/user/{!! session.user !!}" target="_blank">
-            <img id="avatar-preview" class="avatar-preview-img" src="/a/{{ avatar_file }}">
-          </a>
-          @elseif(session.avatar && session.avatar > 0)
-          <a href="/user/{!! session.user !!}" target="_blank">
-            <img id="avatar-preview" class="avatar-preview-img" src="/t/{{ session.avatar }}.webp">
-          </a>
-          @else
-          <div id="avatar-preview" class="avatar-preview-img avatar-placeholder">?</div>
-          @endif
-        </div>
-
-        <div class="avatar-upload-section">
-          <h4>{{ t('settings.upload_custom_avatar') }}</h4>
-          <p class="avatar-hint">{{ t('settings.avatar_hint') }}</p>
-
-          <div class="avatar-upload-wrapper">
-            <input type="file" id="avatar-file-input" accept="image/gif,image/jpeg,image/png,image/webp" hidden>
-            <button type="button" id="avatar-choose-btn" class="button">{{ t('settings.choose_file') }}</button>
-            <span id="avatar-filename" class="avatar-filename">{{ t('settings.no_file_selected') }}</span>
-          </div>
-
-          <div class="avatar-progress-wrapper" id="avatar-progress-wrapper" style="display: none;">
-            <div class="avatar-progress-bar">
-              <div class="avatar-progress-fill" id="avatar-progress-fill"></div>
-            </div>
-            <span class="avatar-progress-text" id="avatar-progress-text">0%</span>
-          </div>
-
-          <div class="avatar-upload-actions">
-            <button type="button" id="avatar-upload-btn" class="button" disabled>{{ t('settings.upload_btn') }}</button>
+      <!-- ═══════════════════════════════ PROFILE ═══════════════════════════════ -->
+      <h2 id="profile">{{ t('settings.profile') }}</h2>
+      <fieldset style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
+        <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.avatar') }}</legend>
+        <div class="avatar-settings-wrapper">
+          <div class="avatar-preview-container">
+            <div class="avatar-preview-label">{{ t('settings.current_avatar') }}</div>
             @if(avatar_file)
-            <button type="button" id="avatar-remove-btn" class="button button-danger">{{ t('settings.remove_custom') }}</button>
+            <a href="/user/{!! session.user !!}" target="_blank">
+              <img id="avatar-preview" class="avatar-preview-img" src="/a/{{ avatar_file }}">
+            </a>
+            @elseif(session.avatar && session.avatar > 0)
+            <a href="/user/{!! session.user !!}" target="_blank">
+              <img id="avatar-preview" class="avatar-preview-img" src="/t/{{ session.avatar }}.webp">
+            </a>
+            @else
+            <div id="avatar-preview" class="avatar-preview-img avatar-placeholder">?</div>
             @endif
           </div>
-          <div id="avatar-upload-status" class="avatar-status"></div>
+
+          <div class="avatar-upload-section">
+            <p class="avatar-hint">{{ t('settings.avatar_hint') }}</p>
+
+            <div class="avatar-upload-wrapper">
+              <input type="file" id="avatar-file-input" accept="image/gif,image/jpeg,image/png,image/webp" hidden>
+              <button type="button" id="avatar-choose-btn" class="button">{{ t('settings.choose_file') }}</button>
+              <span id="avatar-filename" class="avatar-filename">{{ t('settings.no_file_selected') }}</span>
+            </div>
+
+            <div class="avatar-progress-wrapper" id="avatar-progress-wrapper" style="display: none;">
+              <div class="avatar-progress-bar">
+                <div class="avatar-progress-fill" id="avatar-progress-fill"></div>
+              </div>
+              <span class="avatar-progress-text" id="avatar-progress-text">0%</span>
+            </div>
+
+            <div class="avatar-upload-actions">
+              <button type="button" id="avatar-upload-btn" class="button" disabled>{{ t('settings.upload_btn') }}</button>
+              @if(avatar_file)
+              <button type="button" id="avatar-remove-btn" class="button button-danger">{{ t('settings.remove_custom') }}</button>
+              @endif
+            </div>
+            <div id="avatar-upload-status" class="avatar-status"></div>
+          </div>
         </div>
-      </div>
+      </fieldset>
+
       @if(enable_profile_description)
-      <div class="profile-settings-wrapper">
+      <fieldset style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
+        <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.custom_description') }}</legend>
         <div class="setting-item">
-          <label for="profile_description">{{ t('settings.custom_description') }}</label>
           <textarea id="profile_description" class="input" placeholder="{{ t('settings.description_placeholder') }}"
             maxlength="255">{!! session.description || '' !!}</textarea>
           <div class="profile-settings-actions">
@@ -127,24 +147,43 @@
           </div>
           <div id="description-status" class="avatar-status"></div>
         </div>
-      </div>
+      </fieldset>
       @endif
-      <div class="setting-item" style="margin-top: 20px;">
-        <label for="username_color_picker" style="display: block; margin-bottom: 5px;">{{ t('settings.username_color') }}</label>
-        <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
-          <input type="color" id="username_color_picker" value="{{ session.username_color || '#ffffff' }}"
-            style="width: 50px; height: 30px; padding: 0; border: 1px solid var(--nav-border-color); cursor: pointer; background: none;">
-          <input type="text" id="username_color_hex" value="{{ session.username_color || '#ffffff' }}" maxlength="7"
-            placeholder="#ffffff" class="input"
-            style="width: 90px; font-family: monospace; font-size: 0.9em; padding: 4px 8px; height: 30px;">
-          <button type="button" id="btn-save-username-color" class="button"
-            style="padding: 5px 10px; font-size: 0.85em;">{{ t('settings.save_color') }}</button>
-          <button type="button" id="btn-reset-username-color" class="button button-secondary"
-            style="padding: 5px 10px; font-size: 0.85em;">{{ t('settings.reset') }}</button>
+
+      <fieldset style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
+        <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.username_color') }}</legend>
+        <div class="setting-item">
+          <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+            <input type="color" id="username_color_picker" value="{{ session.username_color || '#ffffff' }}"
+              style="width: 50px; height: 30px; padding: 0; border: 1px solid var(--nav-border-color); cursor: pointer; background: none;">
+            <input type="text" id="username_color_hex" value="{{ session.username_color || '#ffffff' }}" maxlength="7"
+              placeholder="#ffffff" class="input"
+              style="width: 90px; font-family: monospace; font-size: 0.9em; padding: 4px 8px; height: 30px;">
+            <button type="button" id="btn-save-username-color" class="button"
+              style="padding: 5px 10px; font-size: 0.85em;">{{ t('settings.save_color') }}</button>
+            <button type="button" id="btn-reset-username-color" class="button button-secondary"
+              style="padding: 5px 10px; font-size: 0.85em;">{{ t('settings.reset') }}</button>
+          </div>
+          <small class="text-muted">{{ t('settings.username_color_hint') }}</small>
         </div>
-        <small class="text-muted">{{ t('settings.username_color_hint') }}</small>
-      </div>
-      <h2 id="sec-preferences">{{ t('settings.preferences') }}</h2>
+      </fieldset>
+
+      <fieldset style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
+        <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.display_name') }}</legend>
+        <div class="setting-item">
+          <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+            <input type="text" id="display_name_input" class="input"
+              placeholder="{{ t('settings.display_name_placeholder') }}" value="{!! session.display_name || '' !!}"
+              maxlength="32" style="max-width: 200px; height: 30px; font-size: 0.9em;">
+            <button type="button" id="btn-update-display-name" class="button"
+              style="padding: 5px 10px; font-size: 0.85em;">{{ t('settings.save') }}</button>
+          </div>
+          <div id="display-name-status" class="avatar-status"></div>
+        </div>
+      </fieldset>
+
+      <!-- ═══════════════════════════════ PREFERENCES ═══════════════════════════════ -->
+      <h2 id="preferences">{{ t('settings.preferences') }}</h2>
       <div class="preferences-settings-wrapper">
         <fieldset
           style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
@@ -367,7 +406,8 @@
 
       </div>
       @if(enable_data_export)
-      <h2 id="sec-export">{{ t('settings.export_data_title') || 'Export Data' }}</h2>
+      <!-- ═══════════════════════════════ EXPORT ═══════════════════════════════ -->
+      <h2 id="export">{{ t('settings.export_data_title') || 'Export Data' }}</h2>
       <div class="export-settings-wrapper" style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
         <p>{{ t('settings.export_data_desc') || 'Download a copy of your data. This process happens entirely in your browser to protect your privacy and save server resources.' }}</p>
         
@@ -407,8 +447,8 @@
         </button>
       </div>
       @endif
-
-      <h2 id="sec-account">{{ t('settings.account') }}</h2>
+      <!-- ═══════════════════════════════ ACCOUNT ═══════════════════════════════ -->
+      <h2 id="account">{{ t('settings.account') }}</h2>
       <div class="account-settings-wrapper"
         style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
         <table class="table account-info-table"
@@ -422,17 +462,6 @@
               <td style="font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.username') }}</td>
               <td style="border: none;">{!! session.user !!}</td>
             </tr>
-            <tr>
-              <td style="font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.display_name') }}
-              </td>
-              <td style="border: none; display: flex; align-items: center; gap: 10px;">
-                <input type="text" id="display_name_input" class="input"
-                  placeholder="{{ t('settings.display_name_placeholder') }}" value="{!! session.display_name || '' !!}"
-                  maxlength="32" style="max-width: 200px; height: 30px; font-size: 0.9em;">
-                <button type="button" id="btn-update-display-name" class="button"
-                  style="padding: 2px 10px; font-size: 0.8em; height: 30px;">{{ t('settings.save') }}</button>
-              </td>
-            </tr>
             <tr>
               <td style="font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.email') }}</td>
               <td id="display-email" style="border: none;">{{ email || t('settings.email_not_set') }}</td>
@@ -443,7 +472,6 @@
             </tr>
           </tbody>
         </table>
-        <div id="display-name-status" class="avatar-status" style="margin-bottom: 20px;"></div>
 
         <div class="account-actions-grid"
           style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
@@ -479,7 +507,8 @@
         </div>
       </div>
       @if(matrix_enabled)
-      <h2 id="sec-linked">{{ t('settings.linked_accounts') }}</h2>
+      <!-- ═══════════════════════════════ LINKED ACCOUNTS ═══════════════════════════════ -->
+      <h2 id="linked">{{ t('settings.linked_accounts') }}</h2>
       <div class="linked-accounts-wrapper">
         <p>{{ t('settings.matrix_link_desc') }}</p>
 
@@ -510,7 +539,8 @@
       @endif
 
       @if(enable_user_api_keys)
-      <h2 id="sec-apikey">Upload API Key</h2>
+      <!-- ═══════════════════════════════ API KEY ═══════════════════════════════ -->
+      <h2 id="apikey">Upload API Key</h2>
       <div id="api-key-section" class="account-settings-wrapper"
         style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
         <p style="color: var(--text-muted); margin-bottom: 15px;">
@@ -544,7 +574,8 @@
       @endif
 
       @if(enable_user_invites)
-      <h2 id="sec-invites">{{ t('invites.section_title') }}</h2>
+      <!-- ═══════════════════════════════ INVITES ═══════════════════════════════ -->
+      <h2 id="invites">{{ t('invites.section_title') }}</h2>
       <div id="invite-section" class="account-settings-wrapper"
         style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">