diff --git a/README.md b/README.md
index aa455f3..52e9089 100644
--- a/README.md
+++ b/README.md
@@ -24,9 +24,13 @@ demo, except the Capture section:
 - bloom enabled/intensity/threshold
 - sunrays enabled/weight
 
-The preset system currently ships with **Default**, which is the current
-reference configuration. Any manual change is shown as **Custom**; additional
-named presets can be added later without changing the control flow.
+The preset system ships with **Default**, which is the current reference
+configuration. Any manual change is shown as **Custom**.
+
+Named presets can be saved from the Visuals panel and loaded again from the
+preset selector. Saved presets use the app's existing local persistence object,
+so they stay in the current browser alongside the other Web Demo preferences.
+Saved presets can also be deleted locally.
 
 ### Augmenta splat input
 
@@ -45,7 +49,8 @@ as a fallback when point correspondence is not stable.
 ## Augmenta data
 
 The former Display section and Live debug data section are combined as
-**Augmenta data**.
+**Augmenta data**, placed before Visuals so tracking/debug controls remain the
+first data-oriented section after Connection.
 
 Scene selection and the Clusters, Point clouds, Scenes, Zones, and Velocity
 vectors toggles use the original Three.js example renderer. Enabled overlays are
@@ -71,3 +76,8 @@ an Augmenta server.
 
 GitHub Pages is deployed from `main` by
 `.github/workflows/pages.yml`.
+
+## Branding
+
+The app uses the same `augmenta-favicon.png` asset as the Augmenta Three.js
+example for browser icons and the sidebar footer.
diff --git a/index.html b/index.html
index 557b7d4..82eac67 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#0c0f14">
   <meta name="color-scheme" content="dark">
-  <link rel="icon" type="image/png" href="./augmenta-favicon.png?v=4">
-  <link rel="shortcut icon" type="image/png" href="./augmenta-favicon.png?v=4">
-  <link rel="apple-touch-icon" href="./augmenta-favicon.png?v=4">
+  <link rel="icon" type="image/png" href="./augmenta-favicon.png?v=5">
+  <link rel="shortcut icon" type="image/png" href="./augmenta-favicon.png?v=5">
+  <link rel="apple-touch-icon" href="./augmenta-favicon.png?v=5">
   <title>Augmenta Web Demo</title>
   <meta name="description" content="Interactive real-time spatial data demo powered by Augmenta.">
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
@@ -127,6 +127,48 @@ <h1>Augmenta Web Demo</h1>
         </div>
       </details>
 
+      <details id="data-section" class="panel-section debug-panel" open>
+        <summary class="section-summary">
+          <span class="section-chevron" aria-hidden="true"></span>
+          <span class="panel-heading-copy">
+            <span class="panel-title">Augmenta data</span>
+          </span>
+          <span id="summary" class="panel-summary-value">No data yet</span>
+        </summary>
+
+        <div class="panel-content">
+          <div class="display-scenes">
+            <div class="field-heading">
+              <label for="scenes">Scenes</label>
+              <button id="reset-camera" class="text-action" type="button">Reset camera</button>
+            </div>
+            <select id="scenes" disabled>
+              <option value="all">All scenes</option>
+            </select>
+          </div>
+
+          <div class="toggles data-overlay-controls">
+            <div class="toggle-column">
+              <label><input id="show-clusters" type="checkbox" checked> Clusters</label>
+              <label><input id="show-points" type="checkbox" checked> Point clouds</label>
+              <label><input id="show-vectors" type="checkbox" checked> Velocity vectors</label>
+            </div>
+            <div class="toggle-column">
+              <label><input id="show-scene" type="checkbox" checked> Scenes</label>
+              <label><input id="show-zones" type="checkbox" checked> Zones</label>
+            </div>
+          </div>
+
+          <div class="panel-actions data-panel-actions">
+            <button id="clear" class="text-action" type="button">Clear data</button>
+          </div>
+
+          <div id="debug-content" class="debug-content">
+            <div class="empty-state">Connect to Augmenta or run the demo to inspect the stream.</div>
+          </div>
+        </div>
+      </details>
+
       <details id="visuals-section" class="panel-section" open>
         <summary class="section-summary">
           <span class="section-chevron" aria-hidden="true"></span>
@@ -138,11 +180,18 @@ <h1>Augmenta Web Demo</h1>
 
         <div class="panel-content">
           <div class="visual-preset-field">
-            <label for="visual-preset">Preset</label>
+            <div class="field-heading">
+              <label for="visual-preset">Preset</label>
+              <div class="preset-actions">
+                <button id="visual-preset-save" class="text-action" type="button">Save as</button>
+                <button id="visual-preset-delete" class="text-action" type="button" hidden disabled>Delete</button>
+              </div>
+            </div>
             <select id="visual-preset">
               <option value="default" selected>Default</option>
               <option value="custom" hidden disabled>Custom</option>
             </select>
+            <p class="field-subtitle">Saved presets stay local to this browser.</p>
           </div>
 
           <label class="advanced-toggle visual-master-toggle">
@@ -285,48 +334,6 @@ <h1>Augmenta Web Demo</h1>
         </div>
       </details>
 
-      <details id="debug-section" class="panel-section debug-panel" open>
-        <summary class="section-summary">
-          <span class="section-chevron" aria-hidden="true"></span>
-          <span class="panel-heading-copy">
-            <span class="panel-title">Augmenta data</span>
-          </span>
-          <span id="summary" class="panel-summary-value">No data yet</span>
-        </summary>
-
-        <div class="panel-content">
-          <div class="display-scenes">
-            <div class="field-heading">
-              <label for="scenes">Scenes</label>
-              <button id="reset-camera" class="text-action" type="button">Reset camera</button>
-            </div>
-            <select id="scenes" disabled>
-              <option value="all">All scenes</option>
-            </select>
-          </div>
-
-          <div class="toggles data-overlay-controls">
-            <div class="toggle-column">
-              <label><input id="show-clusters" type="checkbox" checked> Clusters</label>
-              <label><input id="show-points" type="checkbox" checked> Point clouds</label>
-              <label><input id="show-vectors" type="checkbox" checked> Velocity vectors</label>
-            </div>
-            <div class="toggle-column">
-              <label><input id="show-scene" type="checkbox" checked> Scenes</label>
-              <label><input id="show-zones" type="checkbox" checked> Zones</label>
-            </div>
-          </div>
-
-          <div class="panel-actions data-panel-actions">
-            <button id="clear" class="text-action" type="button">Clear data</button>
-          </div>
-
-          <div id="debug-content" class="debug-content">
-            <div class="empty-state">Connect to Augmenta or run the demo to inspect the stream.</div>
-          </div>
-        </div>
-      </details>
-
       <footer class="sidebar-footer">
         <div class="sidebar-footer-app">
           <div class="sidebar-footer-title">Augmenta Web Demo</div>
@@ -340,7 +347,7 @@ <h1>Augmenta Web Demo</h1>
             rel="noopener noreferrer"
             aria-label="Visit the Augmenta website"
           >
-            <img src="./augmenta-favicon.png?v=4" alt="" width="16" height="16">
+            <img src="./augmenta-favicon.png?v=5" alt="" width="16" height="16">
             <span>augmenta.tech</span>
           </a>
           <span id="app-version">Version —</span>
diff --git a/src/app-info.js b/src/app-info.js
index 47eec42..8eb8578 100644
--- a/src/app-info.js
+++ b/src/app-info.js
@@ -1 +1 @@
-export const APP_VERSION = '0.4.0';
+export const APP_VERSION = '0.5.0';
diff --git a/src/main.js b/src/main.js
index d6d81e7..b9ac45f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,14 @@ import {
   resolveConnectionOptions
 } from './share-link.js';
 import { refreshConnectionQr } from './qr.js';
+import {
+  getUserPreset,
+  isUserPresetId,
+  normalizePresetName,
+  normalizeUserPresets,
+  removeUserPreset,
+  upsertUserPreset
+} from './visual-presets.js';
 
 const DISCONNECT_CLEANUP_DELAY_MS = 500;
 const CAMERA_PREFERENCE_SAVE_DELAY_MS = 250;
@@ -28,7 +36,7 @@ const SETTINGS_STORAGE_KEY = 'augmenta-webdemo-settings:v1';
 const $ = (selector) => document.querySelector(selector);
 
 function refreshFavicon() {
-  const faviconUrl = new URL('./augmenta-favicon.png?v=4', document.baseURI).href;
+  const faviconUrl = new URL('./augmenta-favicon.png?v=5', document.baseURI).href;
   document.querySelectorAll('link[rel~="icon"]').forEach((link) => {
     if (link.href !== faviconUrl) link.href = faviconUrl;
   });
@@ -42,9 +50,9 @@ const ui = {
   debug: $('#debug-content'), clear: $('#clear'), resetCamera: $('#reset-camera'), scenes: $('#scenes'),
   sidebarToggle: $('#sidebar-toggle'), viewerTitle: $('.viewer-title'), connectionQrVisibility: $('.connection-qr-visibility'),
   connectionSection: $('#connection-section'), connectionAdvanced: $('#connection-advanced'), connectionAdvancedSummary: $('#connection-advanced-summary'),
-  debugSection: $('#debug-section'), visualsSection: $('#visuals-section'), visualsSectionSummary: $('#visuals-section-summary'), appVersion: $('#app-version'),
+  dataSection: $('#data-section'), visualsSection: $('#visuals-section'), visualsSectionSummary: $('#visuals-section-summary'), appVersion: $('#app-version'),
   showClusters: $('#show-clusters'), showPoints: $('#show-points'), showScene: $('#show-scene'), showZones: $('#show-zones'), showVectors: $('#show-vectors'),
-  visualPreset: $('#visual-preset'), visualEnabled: $('#visual-enabled'),
+  visualPreset: $('#visual-preset'), visualPresetSave: $('#visual-preset-save'), visualPresetDelete: $('#visual-preset-delete'), visualEnabled: $('#visual-enabled'),
   visualDyeResolution: $('#visual-dye-resolution'), visualSimResolution: $('#visual-sim-resolution'),
   visualDensityDissipation: $('#visual-density-dissipation'), visualDensityDissipationValue: $('#visual-density-dissipation-value'),
   visualVelocityDissipation: $('#visual-velocity-dissipation'), visualVelocityDissipationValue: $('#visual-velocity-dissipation-value'),
@@ -63,11 +71,11 @@ ui.appVersion.textContent = `Version ${APP_VERSION}`;
 const viewer = createViewer($('#canvas-host'));
 const visuals = createVisuals($('#canvas-host'));
 const debug = createDebugPanel(ui.summary, ui.debug);
-const visualPresets = visuals.getPresets();
+const builtInVisualPresets = visuals.getPresets();
 const defaultVisualPreset = visuals.getPreset('default').options;
 
-populateVisualPresetOptions();
-
+let userVisualPresets = [];
+let activeVisualPresetId = 'default';
 let disconnectCleanupTimer;
 let cameraPreferenceSaveTimer;
 let sidebarHandleIdleTimer;
@@ -158,6 +166,8 @@ function savePreferences() {
       scene: preferredSceneAddress
     },
     visuals: visualSettingsFromUi(),
+    visualPreset: activeVisualPresetId,
+    visualPresets: userVisualPresets,
     ui: {
       sidebarHidden: ui.app.classList.contains('sidebar-hidden'),
       sidebarWidth: Number.isFinite(sidebarWidth) ? sidebarWidth : SIDEBAR_MAX_WIDTH,
@@ -166,7 +176,7 @@ function savePreferences() {
         connection: ui.connectionSection.open,
         connectionAdvanced: ui.connectionAdvanced.open,
         visuals: ui.visualsSection.open,
-        data: ui.debugSection.open
+        data: ui.dataSection.open
       }
     }
   };
@@ -226,10 +236,12 @@ function restorePreferences() {
     preferredSceneAddress = dataPreferences.scene;
   }
 
-  writeVisualSettings({
-    ...defaultVisualPreset,
-    ...visualPreferences
-  });
+  userVisualPresets = normalizeUserPresets(savedPreferences.visualPresets);
+  activeVisualPresetId = typeof savedPreferences.visualPreset === 'string'
+    ? savedPreferences.visualPreset
+    : 'default';
+  populateVisualPresetOptions();
+  writeVisualSettings(normalizeVisualSettings(visualPreferences));
 
   const sidebarWidth = Number(uiPreferences.sidebarWidth);
   if (Number.isFinite(sidebarWidth)) setSidebarWidth(sidebarWidth);
@@ -239,7 +251,7 @@ function restorePreferences() {
     ['connection', ui.connectionSection],
     ['connectionAdvanced', ui.connectionAdvanced],
     ['visuals', ui.visualsSection],
-    ['data', ui.debugSection, 'debug']
+    ['data', ui.dataSection, 'debug']
   ]) {
     const saved = sectionPreferences[key] ?? sectionPreferences[legacyKey];
     if (typeof saved === 'boolean') element.open = saved;
@@ -386,7 +398,7 @@ function renderDebug(force = false) {
     zoneNameForAddress,
     zoneShapeForAddress,
     force,
-    ui.debugSection.open
+    ui.dataSection.open
   );
 }
 
@@ -546,15 +558,120 @@ function applyVisibility() {
   });
 }
 
+function visualPresetDescriptors() {
+  return [
+    ...builtInVisualPresets,
+    ...userVisualPresets.map(({ id, label }) => ({ name: id, label }))
+  ];
+}
+
+function getVisualPreset(name) {
+  const builtIn = visuals.getPreset(name);
+  if (builtIn) return builtIn;
+
+  const userPreset = getUserPreset(userVisualPresets, name);
+  if (!userPreset) return undefined;
+
+  return {
+    label: userPreset.label,
+    options: normalizeVisualSettings(userPreset.options)
+  };
+}
+
 function populateVisualPresetOptions() {
+  const builtInOptions = builtInVisualPresets.map(({ name, label }) => (
+    `<option value="${escapeOption(name)}">${escapeOption(label)}</option>`
+  ));
+  const savedOptions = userVisualPresets.map(({ id, label }) => (
+    `<option value="${escapeOption(id)}">${escapeOption(label)}</option>`
+  ));
+
   ui.visualPreset.innerHTML = [
-    ...visualPresets.map(({ name, label }) => (
-      `<option value="${escapeOption(name)}">${escapeOption(label)}</option>`
-    )),
+    ...builtInOptions,
+    ...(savedOptions.length
+      ? [`<optgroup label="Saved">${savedOptions.join('')}</optgroup>`]
+      : []),
     '<option value="custom" hidden disabled>Custom</option>'
   ].join('');
 }
 
+function normalizeVisualSettings(value) {
+  const source = isObject(value) ? value : {};
+  const result = { ...defaultVisualPreset };
+
+  for (const [key, fallback] of Object.entries(defaultVisualPreset)) {
+    const candidate = source[key];
+
+    if (typeof fallback === 'boolean') {
+      if (typeof candidate === 'boolean') result[key] = candidate;
+      continue;
+    }
+
+    if (typeof fallback === 'number') {
+      const number = Number(candidate);
+      if (Number.isFinite(number)) result[key] = number;
+      continue;
+    }
+
+    if (typeof fallback === 'string' && typeof candidate === 'string') {
+      result[key] = candidate;
+    }
+  }
+
+  if (!['centroid', 'point-clouds', 'bounding-box'].includes(result.splatInput)) {
+    result.splatInput = defaultVisualPreset.splatInput;
+  }
+  if (![128, 256, 512, 1024].includes(result.dyeResolution)) {
+    result.dyeResolution = defaultVisualPreset.dyeResolution;
+  }
+  if (![32, 64, 128, 256].includes(result.simResolution)) {
+    result.simResolution = defaultVisualPreset.simResolution;
+  }
+
+  return result;
+}
+
+function saveVisualPresetAs() {
+  const currentPreset = getVisualPreset(activeVisualPresetId);
+  const suggestion = isUserPresetId(activeVisualPresetId)
+    ? currentPreset?.label ?? ''
+    : '';
+  const enteredName = window.prompt('Save visual preset as', suggestion);
+  if (enteredName === null) return;
+
+  const label = normalizePresetName(enteredName);
+  if (!label) {
+    window.alert('Preset name cannot be empty.');
+    return;
+  }
+
+  const existing = userVisualPresets.find(
+    (preset) => preset.label.toLocaleLowerCase() === label.toLocaleLowerCase()
+  );
+  if (existing && !window.confirm(`Replace saved preset "${existing.label}"?`)) return;
+
+  const result = upsertUserPreset(userVisualPresets, label, visualSettingsFromUi());
+  if (!result) return;
+
+  userVisualPresets = result.presets;
+  activeVisualPresetId = result.preset.id;
+  populateVisualPresetOptions();
+  updateVisualPresetState();
+  savePreferences();
+}
+
+function deleteVisualPreset() {
+  const preset = getUserPreset(userVisualPresets, activeVisualPresetId);
+  if (!preset) return;
+  if (!window.confirm(`Delete saved preset "${preset.label}"?`)) return;
+
+  userVisualPresets = removeUserPreset(userVisualPresets, preset.id);
+  activeVisualPresetId = 'custom';
+  populateVisualPresetOptions();
+  updateVisualPresetState();
+  savePreferences();
+}
+
 function visualSettingsFromUi() {
   return {
     enabled: ui.visualEnabled.checked,
@@ -626,16 +743,26 @@ function visualSettingsEqual(left, right) {
 
 function updateVisualPresetState() {
   const settings = visualSettingsFromUi();
-  const matchedPreset = visualPresets.find(({ name }) => {
-    const preset = visuals.getPreset(name);
-    return preset && visualSettingsEqual(settings, preset.options);
-  });
+  const preferredPreset = getVisualPreset(activeVisualPresetId);
+  const descriptors = visualPresetDescriptors();
+  const matchedPreset = preferredPreset && visualSettingsEqual(settings, preferredPreset.options)
+    ? descriptors.find(({ name }) => name === activeVisualPresetId)
+    : descriptors.find(({ name }) => {
+        const preset = getVisualPreset(name);
+        return preset && visualSettingsEqual(settings, preset.options);
+      });
   const customOption = ui.visualPreset.querySelector('option[value="custom"]');
   const isCustom = !matchedPreset;
 
+  activeVisualPresetId = matchedPreset?.name ?? 'custom';
   customOption.hidden = !isCustom;
   customOption.disabled = !isCustom;
-  ui.visualPreset.value = matchedPreset?.name ?? 'custom';
+  ui.visualPreset.value = activeVisualPresetId;
+
+  const canDelete = isUserPresetId(activeVisualPresetId);
+  ui.visualPresetDelete.hidden = !canDelete;
+  ui.visualPresetDelete.disabled = !canDelete;
+
   ui.visualsSectionSummary.textContent = settings.enabled
     ? (matchedPreset?.label ?? 'Custom')
     : 'Off';
@@ -672,9 +799,9 @@ for (const section of [
   section.addEventListener('toggle', savePreferences);
 }
 
-ui.debugSection.addEventListener('toggle', () => {
+ui.dataSection.addEventListener('toggle', () => {
   savePreferences();
-  if (ui.debugSection.open) renderDebug(true);
+  if (ui.dataSection.open) renderDebug(true);
 });
 
 // The panel overlays the renderer. Shift the camera projection by the visible
@@ -683,7 +810,6 @@ function syncPanelCamera(animate = false) {
   const hidden = ui.app.classList.contains('sidebar-hidden');
   const inset = isMobileLayout() || hidden ? 0 : ui.sidebar.getBoundingClientRect().width;
   viewer.setRightInset(inset, animate);
-  visuals.setRightInset(inset);
 }
 
 function isMobileLayout() {
@@ -894,14 +1020,18 @@ for (const input of visualChangeInputs) {
 }
 
 ui.visualPreset.addEventListener('change', () => {
-  const preset = visuals.getPreset(ui.visualPreset.value);
+  const preset = getVisualPreset(ui.visualPreset.value);
   if (!preset) return;
 
+  activeVisualPresetId = ui.visualPreset.value;
   writeVisualSettings(preset.options);
   applyVisualOptions();
   savePreferences();
 });
 
+ui.visualPresetSave.addEventListener('click', saveVisualPresetAs);
+ui.visualPresetDelete.addEventListener('click', deleteVisualPreset);
+
 ui.visualRandomSplats.addEventListener('click', () => {
   visuals.randomSplats();
 });
diff --git a/src/styles.css b/src/styles.css
index 0e2bd10..d686f32 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -442,6 +442,17 @@ button.subtle-button.active {
   margin-bottom: var(--section-space-relaxed);
 }
 
+.preset-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.preset-actions .text-action[disabled] {
+  color: #626b7a;
+  cursor: default;
+}
+
 .visual-master-toggle {
   margin-bottom: var(--section-space);
 }
diff --git a/src/visual-presets.js b/src/visual-presets.js
new file mode 100644
index 0000000..cfab6de
--- /dev/null
+++ b/src/visual-presets.js
@@ -0,0 +1,103 @@
+const USER_PRESET_PREFIX = 'user:';
+const MAX_PRESET_NAME_LENGTH = 48;
+
+export function normalizeUserPresets(value) {
+  if (!Array.isArray(value)) return [];
+
+  const result = [];
+  const seenIds = new Set();
+  const seenLabels = new Set();
+
+  for (const item of value) {
+    if (!item || typeof item !== 'object') continue;
+
+    const label = normalizePresetName(item.label);
+    const options = isPlainObject(item.options) ? { ...item.options } : undefined;
+    if (!label || !options) continue;
+
+    const labelKey = label.toLowerCase();
+    if (seenLabels.has(labelKey)) continue;
+    seenLabels.add(labelKey);
+
+    let id = typeof item.id === 'string' && item.id.startsWith(USER_PRESET_PREFIX)
+      ? item.id
+      : createPresetId(label, result);
+
+    if (seenIds.has(id)) id = createPresetId(label, result);
+    seenIds.add(id);
+
+    result.push({ id, label, options });
+  }
+
+  return result;
+}
+
+export function upsertUserPreset(presets, label, options) {
+  const cleanLabel = normalizePresetName(label);
+  if (!cleanLabel || !isPlainObject(options)) return undefined;
+
+  const current = normalizeUserPresets(presets);
+  const existingIndex = current.findIndex(
+    (preset) => preset.label.toLowerCase() === cleanLabel.toLowerCase()
+  );
+
+  const preset = existingIndex >= 0
+    ? { ...current[existingIndex], label: cleanLabel, options: { ...options } }
+    : {
+        id: createPresetId(cleanLabel, current),
+        label: cleanLabel,
+        options: { ...options }
+      };
+
+  if (existingIndex >= 0) current.splice(existingIndex, 1, preset);
+  else current.push(preset);
+
+  current.sort((left, right) => left.label.localeCompare(right.label));
+  return { presets: current, preset };
+}
+
+export function removeUserPreset(presets, id) {
+  if (!isUserPresetId(id)) return normalizeUserPresets(presets);
+  return normalizeUserPresets(presets).filter((preset) => preset.id !== id);
+}
+
+export function getUserPreset(presets, id) {
+  if (!isUserPresetId(id)) return undefined;
+  return normalizeUserPresets(presets).find((preset) => preset.id === id);
+}
+
+export function isUserPresetId(id) {
+  return typeof id === 'string' && id.startsWith(USER_PRESET_PREFIX);
+}
+
+export function normalizePresetName(value) {
+  return String(value ?? '')
+    .trim()
+    .replace(/\s+/g, ' ')
+    .slice(0, MAX_PRESET_NAME_LENGTH);
+}
+
+function createPresetId(label, presets) {
+  const slug = label
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 32) || 'preset';
+
+  const used = new Set(presets.map((preset) => preset.id));
+  let index = 1;
+  let id = `${USER_PRESET_PREFIX}${slug}`;
+
+  while (used.has(id)) {
+    index += 1;
+    id = `${USER_PRESET_PREFIX}${slug}-${index}`;
+  }
+
+  return id;
+}
+
+function isPlainObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
diff --git a/src/visuals.js b/src/visuals.js
index 25bfe74..b206354 100644
--- a/src/visuals.js
+++ b/src/visuals.js
@@ -191,10 +191,6 @@ export function createVisuals(host) {
     if (previousEnabled !== options.enabled) reset();
   }
 
-  function getOptions() {
-    return { ...options };
-  }
-
   function getPreset(name) {
     const preset = presets[name];
     return preset ? { label: preset.label, options: { ...preset.options } } : undefined;
@@ -236,26 +232,18 @@ export function createVisuals(host) {
     fluid.clear();
   }
 
-  // Kept for compatibility with the Three.js-based application shell.
-  // Debug display visibility is handled exclusively by viewer.js.
-  function setVisibility() {}
-  function setRightInset() {}
-
   requestAnimationFrame(animate);
 
   return {
     clearSetup,
     clearTracking,
-    getOptions,
     getPreset,
     getPresets,
     randomSplats,
     renderFrame,
     renderSetup,
     reset,
-    setOptions,
-    setRightInset,
-    setVisibility
+    setOptions
   };
 }
 
diff --git a/tests/fluid-visuals.test.mjs b/tests/fluid-visuals.test.mjs
index 29f963d..cdfa2ac 100644
--- a/tests/fluid-visuals.test.mjs
+++ b/tests/fluid-visuals.test.mjs
@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import test from 'node:test';
 
 import {
@@ -86,6 +86,8 @@ test('Visuals exposes Pavel controls, presets, and Augmenta splat inputs', () =>
 
   for (const id of [
     'visual-preset',
+    'visual-preset-save',
+    'visual-preset-delete',
     'visual-dye-resolution',
     'visual-sim-resolution',
     'visual-density-dissipation',
@@ -112,6 +114,12 @@ test('Visuals exposes Pavel controls, presets, and Augmenta splat inputs', () =>
   assert.ok(html.includes('<option value="bounding-box">Bounding box</option>'));
   assert.ok(!html.includes('id="display-section"'));
   assert.ok(html.includes('<span class="panel-title">Augmenta data</span>'));
+  assert.ok(
+    html.indexOf('id="data-section"') < html.indexOf('id="visuals-section"'),
+    'Augmenta data should appear before Visuals'
+  );
+  assert.ok(html.includes('./augmenta-favicon.png?v=5'));
+  assert.ok(existsSync(new URL('../augmenta-favicon.png', import.meta.url)));
 });
 
 test('Three.js debug renderer is transparent so selected data draws above fluid', () => {
diff --git a/tests/visual-presets.test.mjs b/tests/visual-presets.test.mjs
new file mode 100644
index 0000000..bcc363f
--- /dev/null
+++ b/tests/visual-presets.test.mjs
@@ -0,0 +1,68 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+
+import {
+  getUserPreset,
+  isUserPresetId,
+  normalizePresetName,
+  normalizeUserPresets,
+  removeUserPreset,
+  upsertUserPreset
+} from '../src/visual-presets.js';
+
+test('preset names are compact and bounded', () => {
+  assert.equal(normalizePresetName('  My   fluid   preset  '), 'My fluid preset');
+  assert.equal(normalizePresetName(''), '');
+  assert.equal(normalizePresetName('x'.repeat(80)).length, 48);
+});
+
+test('saved presets get stable local IDs and replace same-name presets', () => {
+  const first = upsertUserPreset([], 'Flow', { curl: 20 });
+  assert.ok(first);
+  assert.equal(first.preset.id, 'user:flow');
+  assert.equal(first.preset.label, 'Flow');
+  assert.deepEqual(first.preset.options, { curl: 20 });
+
+  const replaced = upsertUserPreset(first.presets, ' flow ', { curl: 42 });
+  assert.ok(replaced);
+  assert.equal(replaced.presets.length, 1);
+  assert.equal(replaced.preset.id, 'user:flow');
+  assert.deepEqual(replaced.preset.options, { curl: 42 });
+});
+
+test('saved presets normalize malformed persisted data', () => {
+  const normalized = normalizeUserPresets([
+    { id: 'bad-id', label: '  Saved  ', options: { pressure: 0.5 } },
+    { id: 'user:saved-copy', label: 'saved', options: { pressure: 1 } },
+    { id: 'user:saved', label: '', options: { pressure: 1 } },
+    null,
+    { id: 'user:other', label: 'Other', options: null }
+  ]);
+
+  assert.equal(normalized.length, 1);
+  assert.equal(normalized[0].id, 'user:saved');
+  assert.equal(normalized[0].label, 'Saved');
+  assert.deepEqual(normalized[0].options, { pressure: 0.5 });
+});
+
+test('saved presets can be loaded and deleted by ID', () => {
+  const saved = upsertUserPreset([], 'Stage', { bloom: false });
+  assert.ok(saved);
+
+  assert.equal(isUserPresetId(saved.preset.id), true);
+  assert.deepEqual(getUserPreset(saved.presets, saved.preset.id), saved.preset);
+  assert.deepEqual(removeUserPreset(saved.presets, saved.preset.id), []);
+  assert.equal(getUserPreset(saved.presets, 'default'), undefined);
+});
+
+
+test('visual presets share the existing application persistence object', () => {
+  const source = readFileSync(new URL('../src/main.js', import.meta.url), 'utf8');
+
+  assert.equal((source.match(/localStorage\.setItem/g) || []).length, 1);
+  assert.ok(source.includes("const SETTINGS_STORAGE_KEY = 'augmenta-webdemo-settings:v1'"));
+  assert.ok(source.includes('visualPreset: activeVisualPresetId'));
+  assert.ok(source.includes('visualPresets: userVisualPresets'));
+  assert.ok(source.includes('normalizeUserPresets(savedPreferences.visualPresets)'));
+});