diff --git a/OpenBitFun-Installer/index.html b/OpenBitFun-Installer/index.html
index 411f5e7cb2..600ee6d262 100644
--- a/OpenBitFun-Installer/index.html
+++ b/OpenBitFun-Installer/index.html
@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="" />
   <link rel="icon" type="image/png" href="/src/assets/openbitfun-app-icon.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/openbitfun-app-icon-16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/openbitfun-app-icon-32.png" />
     <title>Install OpenBitFun</title>
   <script type="module" src="/src/theme/installerThemeBootstrap.ts"></script>
   <style>
diff --git a/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.icns b/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.icns
index 6e8e2fb110..b5f7bd5f79 100644
Binary files a/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.icns and b/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.icns differ
diff --git a/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.ico b/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.ico
index 4155b53be9..44fb61f917 100644
Binary files a/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.ico and b/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.ico differ
diff --git a/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.png b/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.png
index 2cfdd17e94..46a4b94360 100644
Binary files a/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.png and b/OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.png differ
diff --git a/OpenBitFun-Installer/src/assets/openbitfun-app-icon-16.png b/OpenBitFun-Installer/src/assets/openbitfun-app-icon-16.png
new file mode 100644
index 0000000000..5400d83aaf
Binary files /dev/null and b/OpenBitFun-Installer/src/assets/openbitfun-app-icon-16.png differ
diff --git a/OpenBitFun-Installer/src/assets/openbitfun-app-icon-32.png b/OpenBitFun-Installer/src/assets/openbitfun-app-icon-32.png
new file mode 100644
index 0000000000..a68f6408b4
Binary files /dev/null and b/OpenBitFun-Installer/src/assets/openbitfun-app-icon-32.png differ
diff --git a/OpenBitFun-Installer/src/assets/openbitfun-app-icon.png b/OpenBitFun-Installer/src/assets/openbitfun-app-icon.png
index 32aee8246c..0624d6952d 100644
Binary files a/OpenBitFun-Installer/src/assets/openbitfun-app-icon.png and b/OpenBitFun-Installer/src/assets/openbitfun-app-icon.png differ
diff --git a/OpenBitFun-Installer/src/assets/openbitfun-mark-dark.png b/OpenBitFun-Installer/src/assets/openbitfun-mark-dark.png
index 5e5da25f6f..bac28ae23d 100644
Binary files a/OpenBitFun-Installer/src/assets/openbitfun-mark-dark.png and b/OpenBitFun-Installer/src/assets/openbitfun-mark-dark.png differ
diff --git a/OpenBitFun-Installer/src/assets/openbitfun-mark-light.png b/OpenBitFun-Installer/src/assets/openbitfun-mark-light.png
index 1fd8ced437..424fb3da81 100644
Binary files a/OpenBitFun-Installer/src/assets/openbitfun-mark-light.png and b/OpenBitFun-Installer/src/assets/openbitfun-mark-light.png differ
diff --git a/assets/brand/README.md b/assets/brand/README.md
index 7c96a03223..80e506f46e 100644
--- a/assets/brand/README.md
+++ b/assets/brand/README.md
@@ -1,15 +1,40 @@
 # OpenBitFun application brand assets
 
-`source/` contains the two transparent Logo masters supplied for the product:
+`source/openbitfun-mark.svg` is the transparent vector master for the fine-line
+Logo. Its fifteen rounded hexagonal contours match the About dialog's static
+geometry. Motion and moving highlights are intentionally absent from icon files.
+The SVG uses `currentColor`, with a light default for dark backgrounds.
+The outer contour is opaque and heavier than the interior filaments so the
+white rim remains legible when the master is reduced by an application host.
+
+The generator also maintains the existing transparent PNG paths:
 
 - `openbitfun-mark-dark.png` is the dark mark for light surfaces.
 - `openbitfun-mark-light.png` is the light mark for dark surfaces.
 
-The application icon is generated from the light mark. It uses the supplied
-black-and-white application treatment, removes the construction grid from the
-reference, and applies a transparent rounded-corner mask. The construction
-grid is not a shippable asset.
+The application icon uses the light mark on the existing black rounded-square
+background, with transparent corners. The 1024 px master is rendered directly
+from the vector before generating Windows ICO and macOS ICNS containers.
+
+`exports/` contains the SVG, ICO, ICNS, and PNGs at 16, 24, 32, 48, 64, 96,
+128, 192, 256, 512, 1024, and 2048 px. Each PNG size includes a dark transparent
+mark, a light transparent mark, and the application icon. PNG exports are
+rendered directly from the SVG rather than enlarged from a small bitmap.
+At 16–24 px, 32–48 px, and 64–96 px, PNGs use 3, 5, and 7 contours respectively
+with a minimum 1.35 px opaque outer rim, a 0.85 px inner contour, and 0.65 px
+interior filaments. Larger PNGs and the SVG retain all 15 contours.
+Windows ICO frames and Linux icons use the same size-specific renders; macOS
+PNG representations do too. Tauri encodes the legacy 16/32 px ICNS representations
+from their corresponding optical renders.
 
-Run `pnpm run generate-brand-assets` after changing a source master. The
+Browser entry points select explicit 16/32 px favicons. The macOS menu bar uses
+`src/apps/desktop/icons/openbitfun-tray-template.png`, a transparent 32 px template
+drawn for a 16 pt display, so the system can tint it for light and dark menus.
+Windows and Linux trays use the 32 px application icon.
+
+Run `pnpm run generate-brand-assets` after changing the SVG master. The
 generator is the single owner of the derived desktop, web, installer, Android,
 iOS, and HarmonyOS files.
+
+Verify generated dimensions, small-size rim contrast, favicon references, and
+icon containers with `node --test scripts/generate-brand-assets.test.mjs`.
diff --git a/assets/brand/exports/openbitfun-app-icon-1024.png b/assets/brand/exports/openbitfun-app-icon-1024.png
new file mode 100644
index 0000000000..46a4b94360
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-1024.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-128.png b/assets/brand/exports/openbitfun-app-icon-128.png
new file mode 100644
index 0000000000..9b2ad6f648
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-128.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-16.png b/assets/brand/exports/openbitfun-app-icon-16.png
new file mode 100644
index 0000000000..5400d83aaf
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-16.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-192.png b/assets/brand/exports/openbitfun-app-icon-192.png
new file mode 100644
index 0000000000..75134b4ec1
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-192.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-2048.png b/assets/brand/exports/openbitfun-app-icon-2048.png
new file mode 100644
index 0000000000..91206582d1
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-2048.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-24.png b/assets/brand/exports/openbitfun-app-icon-24.png
new file mode 100644
index 0000000000..cb52acdf95
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-24.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-256.png b/assets/brand/exports/openbitfun-app-icon-256.png
new file mode 100644
index 0000000000..b367f1f64a
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-256.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-32.png b/assets/brand/exports/openbitfun-app-icon-32.png
new file mode 100644
index 0000000000..a68f6408b4
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-32.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-48.png b/assets/brand/exports/openbitfun-app-icon-48.png
new file mode 100644
index 0000000000..a9eb253ab2
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-48.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-512.png b/assets/brand/exports/openbitfun-app-icon-512.png
new file mode 100644
index 0000000000..0624d6952d
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-512.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-64.png b/assets/brand/exports/openbitfun-app-icon-64.png
new file mode 100644
index 0000000000..d11fb5d1dc
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-64.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon-96.png b/assets/brand/exports/openbitfun-app-icon-96.png
new file mode 100644
index 0000000000..0386aad4e6
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon-96.png differ
diff --git a/assets/brand/exports/openbitfun-app-icon.icns b/assets/brand/exports/openbitfun-app-icon.icns
new file mode 100644
index 0000000000..b5f7bd5f79
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon.icns differ
diff --git a/assets/brand/exports/openbitfun-app-icon.ico b/assets/brand/exports/openbitfun-app-icon.ico
new file mode 100644
index 0000000000..44fb61f917
Binary files /dev/null and b/assets/brand/exports/openbitfun-app-icon.ico differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-1024.png b/assets/brand/exports/openbitfun-mark-dark-1024.png
new file mode 100644
index 0000000000..2f05bb8ad6
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-1024.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-128.png b/assets/brand/exports/openbitfun-mark-dark-128.png
new file mode 100644
index 0000000000..2b1748c5d6
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-128.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-16.png b/assets/brand/exports/openbitfun-mark-dark-16.png
new file mode 100644
index 0000000000..5174241dbc
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-16.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-192.png b/assets/brand/exports/openbitfun-mark-dark-192.png
new file mode 100644
index 0000000000..7536aa81e4
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-192.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-2048.png b/assets/brand/exports/openbitfun-mark-dark-2048.png
new file mode 100644
index 0000000000..6baf9db7ad
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-2048.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-24.png b/assets/brand/exports/openbitfun-mark-dark-24.png
new file mode 100644
index 0000000000..ecac76b4c4
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-24.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-256.png b/assets/brand/exports/openbitfun-mark-dark-256.png
new file mode 100644
index 0000000000..997989485b
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-256.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-32.png b/assets/brand/exports/openbitfun-mark-dark-32.png
new file mode 100644
index 0000000000..07a239bd85
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-32.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-48.png b/assets/brand/exports/openbitfun-mark-dark-48.png
new file mode 100644
index 0000000000..16e1e03bab
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-48.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-512.png b/assets/brand/exports/openbitfun-mark-dark-512.png
new file mode 100644
index 0000000000..bac28ae23d
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-512.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-64.png b/assets/brand/exports/openbitfun-mark-dark-64.png
new file mode 100644
index 0000000000..9ebc6ac820
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-64.png differ
diff --git a/assets/brand/exports/openbitfun-mark-dark-96.png b/assets/brand/exports/openbitfun-mark-dark-96.png
new file mode 100644
index 0000000000..5939dd2554
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-dark-96.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-1024.png b/assets/brand/exports/openbitfun-mark-light-1024.png
new file mode 100644
index 0000000000..e220e333c1
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-1024.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-128.png b/assets/brand/exports/openbitfun-mark-light-128.png
new file mode 100644
index 0000000000..cf2a3f8872
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-128.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-16.png b/assets/brand/exports/openbitfun-mark-light-16.png
new file mode 100644
index 0000000000..6fb9dc2dfc
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-16.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-192.png b/assets/brand/exports/openbitfun-mark-light-192.png
new file mode 100644
index 0000000000..e182fea980
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-192.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-2048.png b/assets/brand/exports/openbitfun-mark-light-2048.png
new file mode 100644
index 0000000000..d791098d08
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-2048.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-24.png b/assets/brand/exports/openbitfun-mark-light-24.png
new file mode 100644
index 0000000000..9b1ff0ee2a
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-24.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-256.png b/assets/brand/exports/openbitfun-mark-light-256.png
new file mode 100644
index 0000000000..cf855d1d65
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-256.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-32.png b/assets/brand/exports/openbitfun-mark-light-32.png
new file mode 100644
index 0000000000..bf01046043
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-32.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-48.png b/assets/brand/exports/openbitfun-mark-light-48.png
new file mode 100644
index 0000000000..a8a103f989
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-48.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-512.png b/assets/brand/exports/openbitfun-mark-light-512.png
new file mode 100644
index 0000000000..424fb3da81
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-512.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-64.png b/assets/brand/exports/openbitfun-mark-light-64.png
new file mode 100644
index 0000000000..3682661d24
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-64.png differ
diff --git a/assets/brand/exports/openbitfun-mark-light-96.png b/assets/brand/exports/openbitfun-mark-light-96.png
new file mode 100644
index 0000000000..0412017e8b
Binary files /dev/null and b/assets/brand/exports/openbitfun-mark-light-96.png differ
diff --git a/assets/brand/exports/openbitfun-mark.svg b/assets/brand/exports/openbitfun-mark.svg
new file mode 100644
index 0000000000..a62f9a7115
--- /dev/null
+++ b/assets/brand/exports/openbitfun-mark.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 256 256" fill="none" color="#e8e8e8" stroke="currentColor" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
+  <title>OpenBitFun</title>
+  <desc>Static fine-line mark. Fifteen rounded hexagonal contours, with a transparent background.</desc>
+  <path d="M 154.860 59.584 Q 167.500 59.584 173.820 70.531 L 200.680 117.053 Q 207.000 128.000 200.680 138.947 L 173.820 185.469 Q 167.500 196.416 154.860 196.416 L 101.140 196.416 Q 88.500 196.416 82.180 185.469 L 55.320 138.947 Q 49.000 128.000 55.320 117.053 L 82.180 70.531 Q 88.500 59.584 101.140 59.584 Z" stroke-width="1.2" opacity="0.9"/>
+  <path d="M 152.788 57.185 Q 165.682 56.702 172.547 67.628 L 201.722 114.060 Q 208.586 124.985 202.557 136.392 L 176.934 184.875 Q 170.905 196.282 158.011 196.765 L 103.212 198.815 Q 90.318 199.298 83.453 188.372 L 54.278 141.940 Q 47.414 131.015 53.443 119.608 L 79.066 71.125 Q 85.095 59.718 97.989 59.235 Z" opacity="0.75"/>
+  <path d="M 150.574 54.847 Q 163.702 53.863 171.119 64.741 L 202.639 110.973 Q 210.056 121.851 204.343 133.713 L 180.066 184.126 Q 174.353 195.988 161.224 196.972 L 105.426 201.153 Q 92.298 202.137 84.881 191.259 L 53.361 145.027 Q 45.944 134.149 51.657 122.287 L 75.934 71.874 Q 81.647 60.012 94.776 59.028 Z" opacity="0.75"/>
+  <path d="M 148.218 52.578 Q 161.562 51.074 169.537 61.879 L 203.427 107.798 Q 211.401 118.603 206.031 130.911 L 183.208 183.221 Q 177.838 195.529 164.494 197.032 L 107.782 203.422 Q 94.438 204.926 86.463 194.121 L 52.573 148.202 Q 44.599 137.397 49.969 125.089 L 72.792 72.779 Q 78.162 60.471 91.506 58.968 Z" opacity="0.75"/>
+  <path d="M 145.724 50.384 Q 159.263 48.344 167.799 59.048 L 204.079 104.542 Q 212.616 115.246 207.614 127.991 L 186.355 182.157 Q 181.353 194.902 167.814 196.943 L 110.276 205.616 Q 96.737 207.656 88.201 196.952 L 51.921 151.458 Q 43.384 140.754 48.386 128.009 L 69.645 73.843 Q 74.647 61.098 88.186 59.057 Z" opacity="0.75"/>
+  <path d="M 143.094 48.274 Q 156.805 45.680 165.907 56.257 L 204.592 101.209 Q 213.694 111.786 209.085 124.957 L 189.498 180.935 Q 184.889 194.106 171.178 196.700 L 112.906 207.726 Q 99.195 210.320 90.093 199.743 L 51.408 154.791 Q 42.306 144.214 46.915 131.043 L 66.502 75.065 Q 71.111 61.894 84.822 59.300 Z" opacity="0.75"/>
+  <path d="M 140.330 46.254 Q 154.191 43.091 163.861 53.512 L 204.959 97.806 Q 214.629 108.227 210.439 121.813 L 192.629 179.551 Q 188.438 193.137 174.578 196.301 L 115.670 209.746 Q 101.809 212.909 92.139 202.488 L 51.041 158.194 Q 41.371 147.773 45.561 134.187 L 63.371 76.449 Q 67.562 62.863 81.422 59.699 Z" opacity="0.75"/>
+  <path d="M 137.437 44.331 Q 151.423 40.584 161.662 50.823 L 205.177 94.338 Q 215.416 104.577 211.669 118.563 L 195.741 178.007 Q 191.993 191.993 178.007 195.741 L 118.563 211.669 Q 104.577 215.416 94.338 205.177 L 50.823 161.662 Q 40.584 151.423 44.331 137.437 L 60.259 77.993 Q 64.007 64.007 77.993 60.259 Z" opacity="0.75"/>
+  <path d="M 134.416 42.513 Q 148.504 38.167 159.311 48.195 L 205.242 90.813 Q 216.049 100.840 212.769 115.214 L 198.826 176.300 Q 195.545 190.673 181.458 195.019 L 121.584 213.487 Q 107.496 217.833 96.689 207.805 L 50.758 165.187 Q 39.951 155.160 43.231 140.786 L 57.174 79.700 Q 60.455 65.327 74.542 60.981 Z" opacity="0.75"/>
+  <path d="M 131.272 40.805 Q 145.436 35.849 156.810 45.637 L 205.149 87.237 Q 216.523 97.025 213.733 111.769 L 201.877 174.431 Q 199.087 189.175 184.923 194.131 L 124.728 215.195 Q 110.564 220.151 99.190 210.363 L 50.851 168.763 Q 39.477 158.975 42.267 144.231 L 54.123 81.569 Q 56.913 66.825 71.077 61.869 Z" opacity="0.75"/>
+  <path d="M 128.010 39.216 Q 142.223 33.637 154.160 43.157 L 204.895 83.616 Q 216.832 93.136 214.556 108.234 L 204.885 172.401 Q 202.609 187.499 188.396 193.077 L 127.990 216.784 Q 113.777 222.363 101.840 212.843 L 51.105 172.384 Q 39.168 162.864 41.444 147.766 L 51.115 83.599 Q 53.391 68.501 67.604 62.923 Z" opacity="0.75"/>
+  <path d="M 124.633 37.750 Q 138.869 31.539 151.365 40.762 L 204.475 79.959 Q 216.972 89.182 215.233 104.616 L 207.842 170.209 Q 206.103 185.643 191.868 191.854 L 131.367 218.250 Q 117.131 224.461 104.635 215.238 L 51.525 176.041 Q 39.028 166.818 40.767 151.384 L 48.158 85.791 Q 49.897 70.357 64.132 64.146 Z" opacity="0.75"/>
+  <path d="M 121.147 36.415 Q 135.377 29.562 148.427 38.459 L 203.889 76.272 Q 216.938 85.169 215.758 100.920 L 210.742 167.858 Q 209.562 183.608 195.331 190.461 L 134.853 219.585 Q 120.623 226.438 107.573 217.541 L 52.111 179.728 Q 39.062 170.831 40.242 155.080 L 45.258 88.142 Q 46.438 72.392 60.669 65.539 Z" opacity="0.75"/>
+  <path d="M 117.556 35.216 Q 131.752 27.713 145.348 36.256 L 203.131 72.563 Q 216.727 81.106 216.127 97.152 L 213.575 165.347 Q 212.975 181.393 198.778 188.896 L 138.444 220.784 Q 124.248 228.287 110.652 219.744 L 52.869 183.437 Q 39.273 174.894 39.873 158.848 L 42.425 90.653 Q 43.025 74.607 57.222 67.104 Z" opacity="0.75"/>
+  <path d="M 113.866 34.160 Q 128.000 26.000 142.134 34.160 L 202.201 68.840 Q 216.335 77.000 216.335 93.320 L 216.335 162.680 Q 216.335 179.000 202.201 187.160 L 142.134 221.840 Q 128.000 230.000 113.866 221.840 L 53.799 187.160 Q 39.665 179.000 39.665 162.680 L 39.665 93.320 Q 39.665 77.000 53.799 68.840 Z" stroke-width="3.2" opacity="1"/>
+</svg>
diff --git a/assets/brand/source/openbitfun-mark-dark.png b/assets/brand/source/openbitfun-mark-dark.png
index 07e2dd4b4d..bac28ae23d 100644
Binary files a/assets/brand/source/openbitfun-mark-dark.png and b/assets/brand/source/openbitfun-mark-dark.png differ
diff --git a/assets/brand/source/openbitfun-mark-light.png b/assets/brand/source/openbitfun-mark-light.png
index 7112330149..424fb3da81 100644
Binary files a/assets/brand/source/openbitfun-mark-light.png and b/assets/brand/source/openbitfun-mark-light.png differ
diff --git a/assets/brand/source/openbitfun-mark.svg b/assets/brand/source/openbitfun-mark.svg
new file mode 100644
index 0000000000..a62f9a7115
--- /dev/null
+++ b/assets/brand/source/openbitfun-mark.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 256 256" fill="none" color="#e8e8e8" stroke="currentColor" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
+  <title>OpenBitFun</title>
+  <desc>Static fine-line mark. Fifteen rounded hexagonal contours, with a transparent background.</desc>
+  <path d="M 154.860 59.584 Q 167.500 59.584 173.820 70.531 L 200.680 117.053 Q 207.000 128.000 200.680 138.947 L 173.820 185.469 Q 167.500 196.416 154.860 196.416 L 101.140 196.416 Q 88.500 196.416 82.180 185.469 L 55.320 138.947 Q 49.000 128.000 55.320 117.053 L 82.180 70.531 Q 88.500 59.584 101.140 59.584 Z" stroke-width="1.2" opacity="0.9"/>
+  <path d="M 152.788 57.185 Q 165.682 56.702 172.547 67.628 L 201.722 114.060 Q 208.586 124.985 202.557 136.392 L 176.934 184.875 Q 170.905 196.282 158.011 196.765 L 103.212 198.815 Q 90.318 199.298 83.453 188.372 L 54.278 141.940 Q 47.414 131.015 53.443 119.608 L 79.066 71.125 Q 85.095 59.718 97.989 59.235 Z" opacity="0.75"/>
+  <path d="M 150.574 54.847 Q 163.702 53.863 171.119 64.741 L 202.639 110.973 Q 210.056 121.851 204.343 133.713 L 180.066 184.126 Q 174.353 195.988 161.224 196.972 L 105.426 201.153 Q 92.298 202.137 84.881 191.259 L 53.361 145.027 Q 45.944 134.149 51.657 122.287 L 75.934 71.874 Q 81.647 60.012 94.776 59.028 Z" opacity="0.75"/>
+  <path d="M 148.218 52.578 Q 161.562 51.074 169.537 61.879 L 203.427 107.798 Q 211.401 118.603 206.031 130.911 L 183.208 183.221 Q 177.838 195.529 164.494 197.032 L 107.782 203.422 Q 94.438 204.926 86.463 194.121 L 52.573 148.202 Q 44.599 137.397 49.969 125.089 L 72.792 72.779 Q 78.162 60.471 91.506 58.968 Z" opacity="0.75"/>
+  <path d="M 145.724 50.384 Q 159.263 48.344 167.799 59.048 L 204.079 104.542 Q 212.616 115.246 207.614 127.991 L 186.355 182.157 Q 181.353 194.902 167.814 196.943 L 110.276 205.616 Q 96.737 207.656 88.201 196.952 L 51.921 151.458 Q 43.384 140.754 48.386 128.009 L 69.645 73.843 Q 74.647 61.098 88.186 59.057 Z" opacity="0.75"/>
+  <path d="M 143.094 48.274 Q 156.805 45.680 165.907 56.257 L 204.592 101.209 Q 213.694 111.786 209.085 124.957 L 189.498 180.935 Q 184.889 194.106 171.178 196.700 L 112.906 207.726 Q 99.195 210.320 90.093 199.743 L 51.408 154.791 Q 42.306 144.214 46.915 131.043 L 66.502 75.065 Q 71.111 61.894 84.822 59.300 Z" opacity="0.75"/>
+  <path d="M 140.330 46.254 Q 154.191 43.091 163.861 53.512 L 204.959 97.806 Q 214.629 108.227 210.439 121.813 L 192.629 179.551 Q 188.438 193.137 174.578 196.301 L 115.670 209.746 Q 101.809 212.909 92.139 202.488 L 51.041 158.194 Q 41.371 147.773 45.561 134.187 L 63.371 76.449 Q 67.562 62.863 81.422 59.699 Z" opacity="0.75"/>
+  <path d="M 137.437 44.331 Q 151.423 40.584 161.662 50.823 L 205.177 94.338 Q 215.416 104.577 211.669 118.563 L 195.741 178.007 Q 191.993 191.993 178.007 195.741 L 118.563 211.669 Q 104.577 215.416 94.338 205.177 L 50.823 161.662 Q 40.584 151.423 44.331 137.437 L 60.259 77.993 Q 64.007 64.007 77.993 60.259 Z" opacity="0.75"/>
+  <path d="M 134.416 42.513 Q 148.504 38.167 159.311 48.195 L 205.242 90.813 Q 216.049 100.840 212.769 115.214 L 198.826 176.300 Q 195.545 190.673 181.458 195.019 L 121.584 213.487 Q 107.496 217.833 96.689 207.805 L 50.758 165.187 Q 39.951 155.160 43.231 140.786 L 57.174 79.700 Q 60.455 65.327 74.542 60.981 Z" opacity="0.75"/>
+  <path d="M 131.272 40.805 Q 145.436 35.849 156.810 45.637 L 205.149 87.237 Q 216.523 97.025 213.733 111.769 L 201.877 174.431 Q 199.087 189.175 184.923 194.131 L 124.728 215.195 Q 110.564 220.151 99.190 210.363 L 50.851 168.763 Q 39.477 158.975 42.267 144.231 L 54.123 81.569 Q 56.913 66.825 71.077 61.869 Z" opacity="0.75"/>
+  <path d="M 128.010 39.216 Q 142.223 33.637 154.160 43.157 L 204.895 83.616 Q 216.832 93.136 214.556 108.234 L 204.885 172.401 Q 202.609 187.499 188.396 193.077 L 127.990 216.784 Q 113.777 222.363 101.840 212.843 L 51.105 172.384 Q 39.168 162.864 41.444 147.766 L 51.115 83.599 Q 53.391 68.501 67.604 62.923 Z" opacity="0.75"/>
+  <path d="M 124.633 37.750 Q 138.869 31.539 151.365 40.762 L 204.475 79.959 Q 216.972 89.182 215.233 104.616 L 207.842 170.209 Q 206.103 185.643 191.868 191.854 L 131.367 218.250 Q 117.131 224.461 104.635 215.238 L 51.525 176.041 Q 39.028 166.818 40.767 151.384 L 48.158 85.791 Q 49.897 70.357 64.132 64.146 Z" opacity="0.75"/>
+  <path d="M 121.147 36.415 Q 135.377 29.562 148.427 38.459 L 203.889 76.272 Q 216.938 85.169 215.758 100.920 L 210.742 167.858 Q 209.562 183.608 195.331 190.461 L 134.853 219.585 Q 120.623 226.438 107.573 217.541 L 52.111 179.728 Q 39.062 170.831 40.242 155.080 L 45.258 88.142 Q 46.438 72.392 60.669 65.539 Z" opacity="0.75"/>
+  <path d="M 117.556 35.216 Q 131.752 27.713 145.348 36.256 L 203.131 72.563 Q 216.727 81.106 216.127 97.152 L 213.575 165.347 Q 212.975 181.393 198.778 188.896 L 138.444 220.784 Q 124.248 228.287 110.652 219.744 L 52.869 183.437 Q 39.273 174.894 39.873 158.848 L 42.425 90.653 Q 43.025 74.607 57.222 67.104 Z" opacity="0.75"/>
+  <path d="M 113.866 34.160 Q 128.000 26.000 142.134 34.160 L 202.201 68.840 Q 216.335 77.000 216.335 93.320 L 216.335 162.680 Q 216.335 179.000 202.201 187.160 L 142.134 221.840 Q 128.000 230.000 113.866 221.840 L 53.799 187.160 Q 39.665 179.000 39.665 162.680 L 39.665 93.320 Q 39.665 77.000 53.799 68.840 Z" stroke-width="3.2" opacity="1"/>
+</svg>
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.module.css b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
index 819cf30342..eb3956443c 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.module.css
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
@@ -174,6 +174,11 @@
 
   .tags {
     gap: var(--openbitfun-space-1);
+    font-family: var(--openbitfun-type-label-md-font-family);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-md-font-weight);
+    line-height: var(--openbitfun-type-label-md-line-height);
+    letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
   }
 
   .control[data-tags="true"] .tags {
@@ -207,16 +212,22 @@
     overflow: hidden;
     align-items: center;
     max-inline-size: 10rem;
+    min-block-size: var(--openbitfun-control-icon-button-xs-size);
     gap: var(--openbitfun-space-1);
-    padding-inline-start: var(--openbitfun-space-2);
-    border-radius: var(--openbitfun-radius-xs);
-    color: var(--openbitfun-color-action-neutral-content);
-    background: var(--openbitfun-color-action-neutral-surface);
+    padding-inline: var(--openbitfun-space-2);
+    border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    border-radius: var(--openbitfun-radius-pill);
+    color: var(--openbitfun-color-content-primary);
+    background: var(--openbitfun-color-surface-tertiary);
     pointer-events: auto;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  .tag:has(button) {
+    padding-inline-end: 0;
+  }
+
   .tag > span {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.tsx b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
index a2c876b52f..a1d0dc7388 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.tsx
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
@@ -621,6 +621,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
                     commitValues(selectedValues.filter((value) => value !== option.value));
                   }}
                   onMouseDown={(event) => event.preventDefault()}
+                  shape="circle"
                   size="xs"
                   variant="quiet"
                 />
diff --git a/design-system/packages/ui/tests/combobox.test.mjs b/design-system/packages/ui/tests/combobox.test.mjs
index ec0e092cd9..50c323a52b 100644
--- a/design-system/packages/ui/tests/combobox.test.mjs
+++ b/design-system/packages/ui/tests/combobox.test.mjs
@@ -74,7 +74,7 @@ test("Combobox styling uses public field, overlay, action, and motion tokens", a
 
   assert.match(styles, /--openbitfun-color-field-background/);
   assert.match(styles, /--openbitfun-overlay-menu-surface-radius/);
-  assert.match(styles, /--openbitfun-color-action-neutral-surface/);
+  assert.match(styles, /--openbitfun-color-surface-tertiary/);
   assert.match(styles, /--openbitfun-shadow-menu/);
   assert.match(styles, /position:\s*fixed/);
   assert.match(styles, /z-index:\s*var\(--openbitfun-layer-popover\)/);
diff --git a/scripts/generate-brand-assets.mjs b/scripts/generate-brand-assets.mjs
index 1e9cea18a0..9f2cb50ace 100644
--- a/scripts/generate-brand-assets.mjs
+++ b/scripts/generate-brand-assets.mjs
@@ -9,6 +9,7 @@ import { canonicalizeIcns } from './icns-container.mjs';
 const SCRIPT_DIR = path.dirname(fileURLToPath(import.meta.url));
 const ROOT_DIR = path.resolve(SCRIPT_DIR, '..');
 const SOURCE_DIR = path.join(ROOT_DIR, 'assets', 'brand', 'source');
+const SOURCE_SVG = path.join(SOURCE_DIR, 'openbitfun-mark.svg');
 const SOURCE_MARKS = {
   dark: path.join(SOURCE_DIR, 'openbitfun-mark-dark.png'),
   light: path.join(SOURCE_DIR, 'openbitfun-mark-light.png'),
@@ -29,6 +30,7 @@ const ANDROID_DENSITIES = {
 };
 
 const DESKTOP_HICOLOR_SIZES = [16, 32, 48, 64, 96, 128, 256, 512];
+const EXPORT_SIZES = [16, 24, 32, 48, 64, 96, 128, 192, 256, 512, 1024, 2048];
 
 const LEGACY_APPLICATION_ASSETS = [
   'src/apps/desktop/icons/Logo-ICON.png',
@@ -77,10 +79,26 @@ async function writePng(filePath, buffer) {
   await writeFile(filePath, buffer);
 }
 
-async function normalizePng(input) {
-  return sharp(input)
-    .ensureAlpha()
-    .resize({ width: BRAND_SIZE, height: BRAND_SIZE, fit: 'contain', kernel: 'lanczos3' })
+async function renderMark(svg, size, tone, opticalSize = size) {
+  // At favicon sizes, fifteen subpixel strokes disappear. Keep the same
+  // silhouette with fewer filaments. The opaque outer rim must survive
+  // antialiasing independently of the decorative interior strokes.
+  const indices = opticalSize <= 24 ? [0, 7, 14]
+    : opticalSize <= 48 ? [0, 3, 7, 11, 14]
+      : opticalSize <= 96 ? [0, 2, 4, 7, 10, 12, 14] : null;
+  let index = 0;
+  const artwork = indices ? svg.replace(/<path\b[^>]*\/>/g, element => {
+    const contour = index++;
+    if (!indices.includes(contour)) return '';
+    const outer = contour === 14;
+    const inner = contour === 0;
+    const width = Math.max(outer ? 3.2 : inner ? 1.2 : 0.7,
+      (outer ? 1.35 : inner ? 0.85 : 0.65) * 256 / opticalSize);
+    return element.replace(/ (?:stroke-width|opacity)="[^"]*"/g, '')
+      .replace('/>', ` stroke-width="${width}" opacity="${outer ? 1 : inner ? 0.9 : 0.75}"/>`);
+  }) : svg;
+  return sharp(Buffer.from(artwork.replaceAll('currentColor', tone)), { density: 144 })
+    .resize(size, size)
     .png({ compressionLevel: 9, adaptiveFiltering: true })
     .toBuffer();
 }
@@ -117,16 +135,18 @@ async function createApplicationMark(lightMark) {
 }
 
 async function createApplicationIcon(applicationMark) {
+  const { width: size } = await sharp(applicationMark).metadata();
+  const cornerRadius = APP_ICON_CORNER_RADIUS * size / BRAND_SIZE;
   const background = Buffer.from(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${BRAND_SIZE}" height="${BRAND_SIZE}" viewBox="0 0 ${BRAND_SIZE} ${BRAND_SIZE}">` +
-      `<rect width="${BRAND_SIZE}" height="${BRAND_SIZE}" rx="${APP_ICON_CORNER_RADIUS}" fill="#000000"/>` +
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">` +
+      `<rect width="${size}" height="${size}" rx="${cornerRadius}" fill="#000000"/>` +
     '</svg>',
   );
 
   return sharp({
     create: {
-      width: BRAND_SIZE,
-      height: BRAND_SIZE,
+      width: size,
+      height: size,
       channels: 4,
       background: { r: 0, g: 0, b: 0, alpha: 0 },
     },
@@ -160,7 +180,7 @@ async function createAdaptiveForeground(applicationMark, size) {
     .toBuffer();
 }
 
-async function generateTauriContainers(applicationIcon) {
+async function generateTauriContainers(applicationIcon, renderIcon) {
   const tempDir = await mkdtemp(path.join(os.tmpdir(), 'openbitfun-tauri-icons-'));
   const inputPath = path.join(tempDir, 'openbitfun-app-icon.png');
   const tauriCliPath = path.join(ROOT_DIR, 'node_modules', '@tauri-apps', 'cli', 'tauri.js');
@@ -170,12 +190,65 @@ async function generateTauriContainers(applicationIcon) {
     execFileSync(
       process.execPath,
       [tauriCliPath, 'icon', inputPath, '--output', tempDir],
-      { cwd: ROOT_DIR, stdio: 'ignore' },
+      { cwd: ROOT_DIR, stdio: 'ignore', windowsHide: true },
     );
 
+    // Keep Tauri's directory metadata, but rasterize each Windows size from
+    // the vector with its optical treatment instead of shrinking one bitmap.
+    const icoTemplate = await readFile(path.join(tempDir, 'icon.ico'));
+    const frameCount = icoTemplate.readUInt16LE(4);
+    const icoDirectory = Buffer.from(icoTemplate.subarray(0, 6 + frameCount * 16));
+    const icoFrames = [];
+    let icoOffset = icoDirectory.length;
+    for (let index = 0; index < frameCount; index++) {
+      const entry = 6 + index * 16;
+      const size = icoDirectory[entry] || 256;
+      const png = await renderIcon(size);
+      icoDirectory.writeUInt32LE(png.length, entry + 8);
+      icoDirectory.writeUInt32LE(icoOffset, entry + 12);
+      icoFrames.push(png);
+      icoOffset += png.length;
+    }
+
+    // Let Tauri encode legacy RGB/mask chunks from each optical render;
+    // modern PNG representations also use direct vector renders.
+    const icnsTemplate = await readFile(path.join(tempDir, 'icon.icns'));
+    const legacyChunks = new Map();
+    for (const [size, types] of [[16, ['is32', 's8mk']], [32, ['il32', 'l8mk']]]) {
+      const smallInput = path.join(tempDir, `input-${size}.png`);
+      const smallOutput = path.join(tempDir, `legacy-${size}`);
+      await writeFile(smallInput, await renderIcon(size));
+      execFileSync(process.execPath,
+        [tauriCliPath, 'icon', smallInput, '--output', smallOutput],
+        { cwd: ROOT_DIR, stdio: 'ignore', windowsHide: true });
+      const smallIcns = await readFile(path.join(smallOutput, 'icon.icns'));
+      for (let offset = 8; offset < smallIcns.length;) {
+        const length = smallIcns.readUInt32BE(offset + 4);
+        const type = smallIcns.toString('ascii', offset, offset + 4);
+        if (types.includes(type)) legacyChunks.set(type, smallIcns.subarray(offset, offset + length));
+        offset += length;
+      }
+    }
+    const icnsChunks = [];
+    for (let offset = 8; offset < icnsTemplate.length;) {
+      const length = icnsTemplate.readUInt32BE(offset + 4);
+      const chunk = icnsTemplate.subarray(offset, offset + length);
+      if (chunk.subarray(8, 16).equals(Buffer.from('89504e470d0a1a0a', 'hex'))) {
+        const { width } = await sharp(chunk.subarray(8)).metadata();
+        const png = await renderIcon(width);
+        const header = Buffer.from(chunk.subarray(0, 8));
+        header.writeUInt32BE(png.length + 8, 4);
+        icnsChunks.push(Buffer.concat([header, png]));
+      } else {
+        icnsChunks.push(legacyChunks.get(chunk.toString('ascii', 0, 4)) ?? chunk);
+      }
+      offset += length;
+    }
+    const icnsHeader = Buffer.from(icnsTemplate.subarray(0, 8));
+    icnsHeader.writeUInt32BE(8 + icnsChunks.reduce((sum, chunk) => sum + chunk.length, 0), 4);
     return {
-      ico: await readFile(path.join(tempDir, 'icon.ico')),
-      icns: canonicalizeIcns(await readFile(path.join(tempDir, 'icon.icns'))),
+      ico: Buffer.concat([icoDirectory, ...icoFrames]),
+      icns: canonicalizeIcns(Buffer.concat([icnsHeader, ...icnsChunks])),
     };
   } finally {
     await rm(tempDir, { recursive: true, force: true });
@@ -190,16 +263,48 @@ async function removeLegacyApplicationAssets() {
 }
 
 async function generateBrandAssets() {
+  const svg = await readFile(SOURCE_SVG, 'utf8');
   const [darkMark, lightMark] = await Promise.all([
-    normalizePng(SOURCE_MARKS.dark),
-    normalizePng(SOURCE_MARKS.light),
+    renderMark(svg, BRAND_SIZE, '#202020'),
+    renderMark(svg, BRAND_SIZE, '#e8e8e8'),
   ]);
+  await writePng(SOURCE_MARKS.dark, darkMark);
+  await writePng(SOURCE_MARKS.light, lightMark);
   const applicationMark = await createApplicationMark(lightMark);
   const applicationIcon = await createApplicationIcon(applicationMark);
-  const applicationIconLarge = await resizePng(applicationIcon, APP_ICON_SIZE);
-  const darkMarkSmall = await resizePng(darkMark, 128);
-  const lightMarkSmall = await resizePng(lightMark, 128);
-  const tauriContainers = await generateTauriContainers(applicationIconLarge);
+  const applicationIconLarge = await createApplicationIcon(
+    await createApplicationMark(await renderMark(svg, APP_ICON_SIZE, '#e8e8e8')),
+  );
+  const darkMarkSmall = await renderMark(svg, 128, '#202020');
+  const lightMarkSmall = await renderMark(svg, 128, '#e8e8e8');
+  const iconCache = new Map([
+    [BRAND_SIZE, Promise.resolve(applicationIcon)],
+    [APP_ICON_SIZE, Promise.resolve(applicationIconLarge)],
+  ]);
+  const renderIcon = size => {
+    if (!iconCache.has(size)) {
+      iconCache.set(size, renderMark(svg, size, '#e8e8e8')
+        .then(createApplicationMark).then(createApplicationIcon));
+    }
+    return iconCache.get(size);
+  };
+  const tauriContainers = await generateTauriContainers(applicationIconLarge, renderIcon);
+
+  const exportDir = outputPath('assets', 'brand', 'exports');
+  await mkdir(exportDir, { recursive: true });
+  await copyFile(SOURCE_SVG, path.join(exportDir, 'openbitfun-mark.svg'));
+  for (const size of EXPORT_SIZES) {
+    const dark = await renderMark(svg, size, '#202020');
+    const light = await renderMark(svg, size, '#e8e8e8');
+    await writePng(path.join(exportDir, `openbitfun-mark-dark-${size}.png`), dark);
+    await writePng(path.join(exportDir, `openbitfun-mark-light-${size}.png`), light);
+    await writePng(
+      path.join(exportDir, `openbitfun-app-icon-${size}.png`),
+      await renderIcon(size),
+    );
+  }
+  await writeFile(path.join(exportDir, 'openbitfun-app-icon.ico'), tauriContainers.ico);
+  await writeFile(path.join(exportDir, 'openbitfun-app-icon.icns'), tauriContainers.icns);
 
   const webBrandDir = outputPath('src', 'web-ui', 'public', 'brand');
   await writePng(path.join(webBrandDir, 'openbitfun-mark-dark.png'), darkMark);
@@ -210,10 +315,14 @@ async function generateBrandAssets() {
 
   const desktopIconDir = outputPath('src', 'apps', 'desktop', 'icons');
   await writePng(path.join(desktopIconDir, 'openbitfun-app-icon.png'), applicationIconLarge);
+  // A 32 px Retina template represents a 16 pt menu-bar mark. Its alpha
+  // silhouette is tinted by macOS, including light menus and selected states.
+  await writePng(path.join(desktopIconDir, 'openbitfun-tray-template.png'),
+    await renderMark(svg, 32, '#000000', 16));
   await writePng(path.join(desktopIconDir, 'openbitfun-app-icon.ico'), tauriContainers.ico);
   await writePng(path.join(desktopIconDir, 'openbitfun-app-icon.icns'), tauriContainers.icns);
   for (const size of DESKTOP_HICOLOR_SIZES) {
-    const icon = await resizePng(applicationIcon, size);
+    const icon = await renderIcon(size);
     await writePng(
       outputPath('src', 'apps', 'desktop', 'icons', 'hicolor', `${size}x${size}`, 'apps', 'openbitfun-desktop.png'),
       icon,
@@ -241,8 +350,16 @@ async function generateBrandAssets() {
   await writePng(path.join(installerIconDir, 'openbitfun-app-icon.ico'), tauriContainers.ico);
   await writePng(path.join(installerIconDir, 'openbitfun-app-icon.icns'), tauriContainers.icns);
 
+  for (const directory of [webBrandDir, installerBrandDir,
+    outputPath('src', 'mobile-web', 'public', 'brand'),
+    outputPath('src', 'apps', 'relay-server', 'static', 'brand')]) {
+    for (const size of [16, 32]) {
+      await writePng(path.join(directory, `openbitfun-app-icon-${size}.png`), await renderIcon(size));
+    }
+  }
+
   for (const [density, sizes] of Object.entries(ANDROID_DENSITIES)) {
-    const legacyIcon = await resizePng(applicationIcon, sizes.icon);
+    const legacyIcon = await renderIcon(sizes.icon);
     const adaptiveForeground = await createAdaptiveForeground(applicationMark, sizes.adaptive);
     const androidDir = outputPath('src', 'apps', 'mobile', 'android', 'app', 'src', 'main', 'res', `mipmap-${density}`);
     await writePng(path.join(androidDir, 'ic_launcher.png'), legacyIcon);
diff --git a/scripts/generate-brand-assets.test.mjs b/scripts/generate-brand-assets.test.mjs
index 733fa7aa7d..57dd87368e 100644
--- a/scripts/generate-brand-assets.test.mjs
+++ b/scripts/generate-brand-assets.test.mjs
@@ -1,6 +1,7 @@
 import assert from 'node:assert/strict';
 import { readFileSync, readdirSync } from 'node:fs';
 import test from 'node:test';
+import sharp from 'sharp';
 import { canonicalizeIcns } from './icns-container.mjs';
 
 const GENERATED_ICNS_FILES = [
@@ -50,6 +51,97 @@ test('generated macOS icons use the canonical ICNS layout', () => {
   assert.ok(desktop.equals(installer), 'desktop and installer ICNS files differ');
 });
 
+test('brand exports provide decodable transparent PNGs at every advertised size', async () => {
+  const sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256, 512, 1024, 2048];
+  for (const size of sizes) {
+    for (const treatment of ['mark-dark', 'mark-light', 'app-icon']) {
+      const image = sharp(`assets/brand/exports/openbitfun-${treatment}-${size}.png`);
+      const metadata = await image.metadata();
+      assert.equal(metadata.width, size);
+      assert.equal(metadata.height, size);
+      assert.equal(metadata.hasAlpha, true);
+      const { data, info } = await image.raw().toBuffer({ resolveWithObject: true });
+      // Tiny rounded-square icons can have partial edge coverage in the corner.
+      assert.ok(data[info.channels - 1] <= 16, 'corner must remain transparent apart from antialiasing');
+    }
+  }
+  assert.deepEqual(
+    readFileSync('assets/brand/exports/openbitfun-mark.svg'),
+    readFileSync('assets/brand/source/openbitfun-mark.svg'),
+  );
+});
+
+test('Windows ICO frames contain the size-specific app PNGs', async () => {
+  const ico = readFileSync('src/apps/desktop/icons/openbitfun-app-icon.ico');
+  assert.equal(ico.readUInt16LE(0), 0);
+  assert.equal(ico.readUInt16LE(2), 1);
+  const sizes = [];
+  for (let index = 0; index < ico.readUInt16LE(4); index++) {
+    const entry = 6 + index * 16;
+    const size = ico[entry] || 256;
+    const length = ico.readUInt32LE(entry + 8);
+    const offset = ico.readUInt32LE(entry + 12);
+    assert.ok(offset + length <= ico.length);
+    const frame = ico.subarray(offset, offset + length);
+    assert.deepEqual(frame, readFileSync(`assets/brand/exports/openbitfun-app-icon-${size}.png`));
+    const metadata = await sharp(frame).metadata();
+    assert.equal(metadata.width, size);
+    assert.equal(metadata.height, size);
+    sizes.push(size);
+  }
+  assert.deepEqual(sizes.sort((a, b) => a - b), [16, 24, 32, 48, 64, 256]);
+  assert.deepEqual(ico, readFileSync('OpenBitFun-Installer/src-tauri/icons/openbitfun-app-icon.ico'));
+});
+
+test('small icons retain a bright rim around the entire silhouette', async () => {
+  for (const size of [16, 24, 32, 48, 64]) {
+    const { data, info } = await sharp(`assets/brand/exports/openbitfun-app-icon-${size}.png`)
+      .raw().toBuffer({ resolveWithObject: true });
+    const sectors = Array(12).fill(0);
+    for (let y = 0; y < size; y++) {
+      for (let x = 0; x < size; x++) {
+        const dx = (x + 0.5) / size - 0.5;
+        const dy = (y + 0.5) / size - 0.5;
+        const radius = Math.hypot(dx, dy);
+        if (radius < 0.32 || radius > 0.44) continue;
+        const sector = Math.floor((Math.atan2(dy, dx) + Math.PI) * 12 / (2 * Math.PI)) % 12;
+        sectors[sector] = Math.max(sectors[sector], data[(y * size + x) * info.channels]);
+      }
+    }
+    assert.ok(sectors.every(value => value >= 200), `${size}px rim has a dim sector: ${sectors}`);
+  }
+});
+
+test('menu-bar template remains transparent and visible at its logical size', async () => {
+  const { data, info } = await sharp('src/apps/desktop/icons/openbitfun-tray-template.png')
+    .resize(16, 16).raw().toBuffer({ resolveWithObject: true });
+  assert.equal(info.channels, 4);
+  assert.equal(data[3], 0, 'template must not include the app background');
+  assert.equal(data[(8 * 16 + 8) * 4 + 3], 0, 'center must remain open');
+  let opaquePixels = 0;
+  for (let offset = 3; offset < data.length; offset += 4) {
+    if (data[offset] >= 200) opaquePixels++;
+  }
+  assert.ok(opaquePixels >= 24, 'template loses its silhouette at menu-bar size');
+});
+
+test('browser entry points reference generated optical favicons', () => {
+  for (const [htmlPath, assetDir] of [
+    ['src/web-ui/index.html', 'src/web-ui/public/brand'],
+    ['src/mobile-web/index.html', 'src/mobile-web/public/brand'],
+    ['src/apps/relay-server/static/index.html', 'src/apps/relay-server/static/brand'],
+    ['OpenBitFun-Installer/index.html', 'OpenBitFun-Installer/src/assets'],
+  ]) {
+    const html = readFileSync(htmlPath, 'utf8');
+    for (const size of [16, 32]) {
+      assert.ok(html.includes(`sizes="${size}x${size}"`));
+      const name = `openbitfun-app-icon-${size}.png`;
+      assert.ok(html.includes(name));
+      assert.deepEqual(readFileSync(`${assetDir}/${name}`), readFileSync(`assets/brand/exports/${name}`));
+    }
+  }
+});
+
 test('HarmonyOS generated media use valid resource identifiers', () => {
   for (const directory of HARMONY_MEDIA_DIRS) {
     for (const fileName of readdirSync(directory)) {
diff --git a/src/apps/desktop/icons/hicolor/128x128/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/128x128/apps/openbitfun-desktop.png
index 321e7125ee..9b2ad6f648 100644
Binary files a/src/apps/desktop/icons/hicolor/128x128/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/128x128/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/16x16/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/16x16/apps/openbitfun-desktop.png
index c75e68b637..5400d83aaf 100644
Binary files a/src/apps/desktop/icons/hicolor/16x16/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/16x16/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/256x256/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/256x256/apps/openbitfun-desktop.png
index 063828eb90..b367f1f64a 100644
Binary files a/src/apps/desktop/icons/hicolor/256x256/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/256x256/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/32x32/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/32x32/apps/openbitfun-desktop.png
index b59b02acea..a68f6408b4 100644
Binary files a/src/apps/desktop/icons/hicolor/32x32/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/32x32/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/48x48/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/48x48/apps/openbitfun-desktop.png
index 9d4b03b3cf..a9eb253ab2 100644
Binary files a/src/apps/desktop/icons/hicolor/48x48/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/48x48/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/512x512/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/512x512/apps/openbitfun-desktop.png
index 32aee8246c..0624d6952d 100644
Binary files a/src/apps/desktop/icons/hicolor/512x512/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/512x512/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/64x64/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/64x64/apps/openbitfun-desktop.png
index 9394449f5e..d11fb5d1dc 100644
Binary files a/src/apps/desktop/icons/hicolor/64x64/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/64x64/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/hicolor/96x96/apps/openbitfun-desktop.png b/src/apps/desktop/icons/hicolor/96x96/apps/openbitfun-desktop.png
index 6153a46664..0386aad4e6 100644
Binary files a/src/apps/desktop/icons/hicolor/96x96/apps/openbitfun-desktop.png and b/src/apps/desktop/icons/hicolor/96x96/apps/openbitfun-desktop.png differ
diff --git a/src/apps/desktop/icons/openbitfun-app-icon.icns b/src/apps/desktop/icons/openbitfun-app-icon.icns
index 6e8e2fb110..b5f7bd5f79 100644
Binary files a/src/apps/desktop/icons/openbitfun-app-icon.icns and b/src/apps/desktop/icons/openbitfun-app-icon.icns differ
diff --git a/src/apps/desktop/icons/openbitfun-app-icon.ico b/src/apps/desktop/icons/openbitfun-app-icon.ico
index 4155b53be9..44fb61f917 100644
Binary files a/src/apps/desktop/icons/openbitfun-app-icon.ico and b/src/apps/desktop/icons/openbitfun-app-icon.ico differ
diff --git a/src/apps/desktop/icons/openbitfun-app-icon.png b/src/apps/desktop/icons/openbitfun-app-icon.png
index 2cfdd17e94..46a4b94360 100644
Binary files a/src/apps/desktop/icons/openbitfun-app-icon.png and b/src/apps/desktop/icons/openbitfun-app-icon.png differ
diff --git a/src/apps/desktop/icons/openbitfun-tray-template.png b/src/apps/desktop/icons/openbitfun-tray-template.png
new file mode 100644
index 0000000000..26f94af540
Binary files /dev/null and b/src/apps/desktop/icons/openbitfun-tray-template.png differ
diff --git a/src/apps/desktop/src/tray.rs b/src/apps/desktop/src/tray.rs
index 646a6fba73..f709849c53 100644
--- a/src/apps/desktop/src/tray.rs
+++ b/src/apps/desktop/src/tray.rs
@@ -195,15 +195,16 @@ pub fn setup_tray(
     startup_trace.record_elapsed_step(TRAY_TRACE_CATEGORY, "setup_tray.menu", step_started);
 
     let step_started = Instant::now();
-    let icon = app
-        .default_window_icon()
-        .ok_or("No default window icon")?
-        .clone();
+    #[cfg(target_os = "macos")]
+    let icon = tauri::include_image!("icons/openbitfun-tray-template.png");
+    #[cfg(not(target_os = "macos"))]
+    let icon = tauri::include_image!("icons/hicolor/32x32/apps/openbitfun-desktop.png");
     startup_trace.record_elapsed_step(TRAY_TRACE_CATEGORY, "setup_tray.icon", step_started);
 
     let step_started = Instant::now();
     let tray = TrayIconBuilder::new()
         .icon(icon)
+        .icon_as_template(cfg!(target_os = "macos"))
         .menu(&initial_menu)
         .tooltip("OpenBitFun")
         .on_menu_event(|app, event| {
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index 145142be4c..8e2e52d7f9 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
index abfafa2c1f..cdfb7d6aff 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png and b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png
index abfafa2c1f..cdfb7d6aff 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png and b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
index 145142be4c..8e2e52d7f9 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png and b/src/apps/mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index 9d4b03b3cf..a9eb253ab2 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
index f0802cfa93..3422494aa7 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png and b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png
index f0802cfa93..3422494aa7 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png and b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
index 9d4b03b3cf..a9eb253ab2 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png and b/src/apps/mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index 6153a46664..0386aad4e6 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
index 290e99adc0..b92a18f2fd 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png
index 290e99adc0..b92a18f2fd 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
index 6153a46664..0386aad4e6 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index 6abb5d49bf..b04b5e8872 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
index 3646b32240..3254dc77cf 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png
index 3646b32240..3254dc77cf 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
index 6abb5d49bf..b04b5e8872 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index 1c5501a520..75134b4ec1 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
index 046de822a9..3426fb418a 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png
index 046de822a9..3426fb418a 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png differ
diff --git a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
index 1c5501a520..75134b4ec1 100644
Binary files a/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png and b/src/apps/mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png differ
diff --git a/src/apps/mobile/harmonyos/AppScope/resources/base/media/openbitfun_app_icon.png b/src/apps/mobile/harmonyos/AppScope/resources/base/media/openbitfun_app_icon.png
index 2cfdd17e94..46a4b94360 100644
Binary files a/src/apps/mobile/harmonyos/AppScope/resources/base/media/openbitfun_app_icon.png and b/src/apps/mobile/harmonyos/AppScope/resources/base/media/openbitfun_app_icon.png differ
diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_app_icon.png b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_app_icon.png
index 2cfdd17e94..46a4b94360 100644
Binary files a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_app_icon.png and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_app_icon.png differ
diff --git a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png
index 8734bbf9b0..761bf25195 100644
Binary files a/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png and b/src/apps/mobile/harmonyos/entry/src/main/resources/base/media/openbitfun_start_window.png differ
diff --git a/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/AppIcon.appiconset/openbitfun-app-icon.png b/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/AppIcon.appiconset/openbitfun-app-icon.png
index 2cfdd17e94..46a4b94360 100644
Binary files a/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/AppIcon.appiconset/openbitfun-app-icon.png and b/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/AppIcon.appiconset/openbitfun-app-icon.png differ
diff --git a/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/OpenBitFunMark.imageset/openbitfun-mark-light.png b/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/OpenBitFunMark.imageset/openbitfun-mark-light.png
index 1fd8ced437..424fb3da81 100644
Binary files a/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/OpenBitFunMark.imageset/openbitfun-mark-light.png and b/src/apps/mobile/ios/OpenBitFun/Resources.xcassets/OpenBitFunMark.imageset/openbitfun-mark-light.png differ
diff --git a/src/apps/relay-server/static/brand/openbitfun-app-icon-16.png b/src/apps/relay-server/static/brand/openbitfun-app-icon-16.png
new file mode 100644
index 0000000000..5400d83aaf
Binary files /dev/null and b/src/apps/relay-server/static/brand/openbitfun-app-icon-16.png differ
diff --git a/src/apps/relay-server/static/brand/openbitfun-app-icon-32.png b/src/apps/relay-server/static/brand/openbitfun-app-icon-32.png
new file mode 100644
index 0000000000..a68f6408b4
Binary files /dev/null and b/src/apps/relay-server/static/brand/openbitfun-app-icon-32.png differ
diff --git a/src/apps/relay-server/static/brand/openbitfun-app-icon.png b/src/apps/relay-server/static/brand/openbitfun-app-icon.png
index 32aee8246c..0624d6952d 100644
Binary files a/src/apps/relay-server/static/brand/openbitfun-app-icon.png and b/src/apps/relay-server/static/brand/openbitfun-app-icon.png differ
diff --git a/src/apps/relay-server/static/index.html b/src/apps/relay-server/static/index.html
index b6cd3b354b..c17ba03789 100644
--- a/src/apps/relay-server/static/index.html
+++ b/src/apps/relay-server/static/index.html
@@ -7,6 +7,8 @@
   <meta name="color-scheme" content="dark light" />
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' http: https:; img-src 'self' data: blob:; font-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'self'; worker-src 'self' blob:" />
   <link rel="icon" type="image/png" href="./brand/openbitfun-app-icon.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="./brand/openbitfun-app-icon-16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="./brand/openbitfun-app-icon-32.png" />
   <link rel="apple-touch-icon" href="./brand/openbitfun-app-icon.png" />
   <title>OpenBitFun Remote</title>
   <style>
diff --git a/src/crates/assembly/core/src/service/config/types.rs b/src/crates/assembly/core/src/service/config/types.rs
index 501de7eb65..ad77b9068b 100644
--- a/src/crates/assembly/core/src/service/config/types.rs
+++ b/src/crates/assembly/core/src/service/config/types.rs
@@ -381,6 +381,7 @@ impl Default for VoiceInputConfig {
 
 /// Controller-local full-duplex voice-call preferences.
 ///
+/// The assistant stays off until the current controller explicitly enables it.
 /// The API key crosses only the controller-local settings IPC; starting a
 /// session resolves it in the Desktop adapter, so it is never forwarded to a
 /// remote workspace or peer HostInvoke request. Session execution selected by
@@ -401,7 +402,7 @@ pub struct VoiceCallConfig {
 impl Default for VoiceCallConfig {
     fn default() -> Self {
         Self {
-            enabled: true,
+            enabled: false,
             provider: "volcengine".to_string(),
             api_key: String::new(),
             voice: "zh_female_vv_jupiter_bigtts".to_string(),
@@ -1618,7 +1619,6 @@ pub trait ConfigProvider: Send + Sync {
         old_config: &serde_json::Value,
         new_config: &serde_json::Value,
     ) -> OpenBitFunResult<()>;
-
 }
 
 /// Configuration change event.
@@ -2086,12 +2086,28 @@ mod tests {
         let config: AppConfig = serde_json::from_value(serde_json::json!({}))
             .expect("legacy app config should deserialize");
 
-        assert!(config.voice_call.enabled);
+        assert!(!config.voice_call.enabled);
         assert_eq!(config.voice_call.provider, "volcengine");
         assert!(config.voice_call.api_key.is_empty());
         assert_eq!(config.voice_call.voice, "zh_female_vv_jupiter_bigtts");
     }
 
+    #[test]
+    fn persisted_realtime_voice_call_enabled_survives_default_change() {
+        let config: AppConfig = serde_json::from_value(serde_json::json!({
+            "voice_call": {
+                "enabled": true,
+                "api_key": "legacy-controller-key"
+            }
+        }))
+        .expect("saved realtime voice config should deserialize");
+
+        assert!(config.voice_call.enabled);
+        assert_eq!(config.voice_call.api_key, "legacy-controller-key");
+        assert_eq!(config.voice_call.provider, "volcengine");
+        assert_eq!(config.voice_call.voice, "zh_female_vv_jupiter_bigtts");
+    }
+
     #[test]
     fn prevent_sleep_defaults_to_disabled() {
         assert!(!AppConfig::default().prevent_sleep);
@@ -2199,10 +2215,9 @@ mod tests {
 
     #[test]
     fn plugin_config_defaults_to_empty_when_missing() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({}),
-        ))
-        .expect("current global config should apply optional plugin defaults");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({})))
+                .expect("current global config should apply optional plugin defaults");
 
         assert!(config.plugin.is_empty());
         assert!(!config.has_configured_plugins());
@@ -2210,19 +2225,18 @@ mod tests {
 
     #[test]
     fn non_empty_plugin_config_requests_runtime_startup() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "plugin": [
-                "file:///C:/plugins/demo.mjs",
-                {
-                    "spec": "@my-org/custom-plugin",
-                    "options": { "mode": "strict" },
-                    "baseDirectory": "C:/workspace"
-                }
-            ]
-        }),
-        ))
-        .expect("plugin config should deserialize");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "plugin": [
+                    "file:///C:/plugins/demo.mjs",
+                    {
+                        "spec": "@my-org/custom-plugin",
+                        "options": { "mode": "strict" },
+                        "baseDirectory": "C:/workspace"
+                    }
+                ]
+            })))
+            .expect("plugin config should deserialize");
 
         assert_eq!(config.plugin.len(), 2);
         assert!(config.has_configured_plugins());
@@ -2230,12 +2244,11 @@ mod tests {
 
     #[test]
     fn empty_plugin_specs_do_not_request_runtime_startup() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "plugin": ["", "   ", { "spec": "" }]
-        }),
-        ))
-        .expect("empty plugin declarations should deserialize");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "plugin": ["", "   ", { "spec": "" }]
+            })))
+            .expect("empty plugin declarations should deserialize");
 
         assert!(!config.has_configured_plugins());
     }
@@ -2305,12 +2318,11 @@ mod tests {
             .expect("current AI config should default an omitted optional limit");
         assert_eq!(defaulted.ai.max_rounds, 0);
 
-        let limited: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "ai": { "max_rounds": 37 }
-        }),
-        ))
-        .expect("explicit max rounds should deserialize");
+        let limited: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "ai": { "max_rounds": 37 }
+            })))
+            .expect("explicit max rounds should deserialize");
         assert_eq!(limited.ai.max_rounds, 37);
     }
 
@@ -2331,21 +2343,20 @@ mod tests {
 
     #[test]
     fn user_tool_groups_preserve_the_versioned_ui_shape() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "app": {
-                "user_tool_groups": {
-                    "version": 1,
-                    "groups": [{
-                        "id": "daily-code",
-                        "name": "Daily code changes",
-                        "toolNames": ["Read", "Edit"]
-                    }]
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "app": {
+                    "user_tool_groups": {
+                        "version": 1,
+                        "groups": [{
+                            "id": "daily-code",
+                            "name": "Daily code changes",
+                            "toolNames": ["Read", "Edit"]
+                        }]
+                    }
                 }
-            }
-        }),
-        ))
-        .expect("user tool groups should deserialize");
+            })))
+            .expect("user tool groups should deserialize");
 
         assert_eq!(
             config.app.user_tool_groups.groups[0].tool_names,
@@ -2379,21 +2390,20 @@ mod tests {
 
     #[test]
     fn user_skill_groups_preserve_the_versioned_ui_shape() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "app": {
-                "user_skill_groups": {
-                    "version": 1,
-                    "groups": [{
-                        "id": "daily-coding",
-                        "name": "Daily coding",
-                        "skillKeys": ["builtin::find-skills", "user::review"]
-                    }]
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "app": {
+                    "user_skill_groups": {
+                        "version": 1,
+                        "groups": [{
+                            "id": "daily-coding",
+                            "name": "Daily coding",
+                            "skillKeys": ["builtin::find-skills", "user::review"]
+                        }]
+                    }
                 }
-            }
-        }),
-        ))
-        .expect("user skill groups should deserialize");
+            })))
+            .expect("user skill groups should deserialize");
 
         assert_eq!(
             config.app.user_skill_groups.groups[0].skill_keys,
@@ -2412,22 +2422,21 @@ mod tests {
 
     #[test]
     fn global_config_preserves_project_mcp_servers() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "project": {
-                "mcp_servers": [
-                    {
-                        "id": "project-docs",
-                        "name": "Project Docs",
-                        "server_type": "local",
-                        "command": "docs-mcp",
-                        "args": []
-                    }
-                ]
-            }
-        }),
-        ))
-        .expect("project scoped MCP config should deserialize");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "project": {
+                    "mcp_servers": [
+                        {
+                            "id": "project-docs",
+                            "name": "Project Docs",
+                            "server_type": "local",
+                            "command": "docs-mcp",
+                            "args": []
+                        }
+                    ]
+                }
+            })))
+            .expect("project scoped MCP config should deserialize");
 
         assert_eq!(
             config
@@ -2448,14 +2457,13 @@ mod tests {
 
     #[test]
     fn global_config_preserves_terminal_panel_position() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "terminal": {
-                "terminal_panel_position": "bottom"
-            }
-        }),
-        ))
-        .expect("terminal panel position config should deserialize");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "terminal": {
+                    "terminal_panel_position": "bottom"
+                }
+            })))
+            .expect("terminal panel position config should deserialize");
 
         assert_eq!(config.terminal.terminal_panel_position, "bottom");
 
@@ -2546,45 +2554,44 @@ mod tests {
 
     #[test]
     fn ai_experience_quick_actions_round_trip_through_global_config() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "app": {
-                "language": "en-US",
-                "auto_update": true,
-                "telemetry": true,
-                "startup_behavior": "default",
-                "confirm_on_exit": true,
-                "restore_windows": false,
-                "zoom_level": 100,
-                "sidebar": { "width": 260, "collapsed": false },
-                "right_panel": { "width": 400, "collapsed": true },
-                "notifications": {
-                    "enabled": true,
-                    "position": "top-right",
-                    "duration": 4000,
-                    "dialog_completion_notify": true,
-                    "permission_request_notify": false,
-                    "enable_startup_tips": true
-                },
-                "ai_experience": {
-                    "enable_session_title_generation": true,
-                    "enable_welcome_panel_ai_analysis": false,
-                    "enable_visual_mode": false,
-                    "enable_agent_companion": true,
-                    "enable_workspace_search": false,
-                    "quick_actions": [
-                        {
-                            "id": "custom_1",
-                            "label": "Run tests",
-                            "prompt": "Run the test suite",
-                            "enabled": true
-                        }
-                    ]
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "app": {
+                    "language": "en-US",
+                    "auto_update": true,
+                    "telemetry": true,
+                    "startup_behavior": "default",
+                    "confirm_on_exit": true,
+                    "restore_windows": false,
+                    "zoom_level": 100,
+                    "sidebar": { "width": 260, "collapsed": false },
+                    "right_panel": { "width": 400, "collapsed": true },
+                    "notifications": {
+                        "enabled": true,
+                        "position": "top-right",
+                        "duration": 4000,
+                        "dialog_completion_notify": true,
+                        "permission_request_notify": false,
+                        "enable_startup_tips": true
+                    },
+                    "ai_experience": {
+                        "enable_session_title_generation": true,
+                        "enable_welcome_panel_ai_analysis": false,
+                        "enable_visual_mode": false,
+                        "enable_agent_companion": true,
+                        "enable_workspace_search": false,
+                        "quick_actions": [
+                            {
+                                "id": "custom_1",
+                                "label": "Run tests",
+                                "prompt": "Run the test suite",
+                                "enabled": true
+                            }
+                        ]
+                    }
                 }
-            }
-        }),
-        ))
-        .expect("minimal app config with quick_actions should deserialize");
+            })))
+            .expect("minimal app config with quick_actions should deserialize");
 
         let actions = &config.app.ai_experience.quick_actions;
         assert!(!config.app.notifications.permission_request_notify);
@@ -2622,16 +2629,15 @@ mod tests {
 
     #[test]
     fn app_flow_chat_default_mode_id_round_trips() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "app": {
-                "flow_chat": {
-                    "default_mode_id": "PlannerPlus"
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "app": {
+                    "flow_chat": {
+                        "default_mode_id": "PlannerPlus"
+                    }
                 }
-            }
-        }),
-        ))
-        .expect("flow chat config should deserialize");
+            })))
+            .expect("flow chat config should deserialize");
 
         assert_eq!(
             config.app.flow_chat.default_mode_id.as_deref(),
@@ -2647,14 +2653,13 @@ mod tests {
 
     #[test]
     fn app_flow_chat_permission_mode_control_defaults_to_visible_without_persisting_default() {
-        let default_config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "app": {
-                "flow_chat": {}
-            }
-        }),
-        ))
-        .expect("flow chat config without visibility preference should deserialize");
+        let default_config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "app": {
+                    "flow_chat": {}
+                }
+            })))
+            .expect("flow chat config without visibility preference should deserialize");
 
         assert!(default_config.app.flow_chat.show_permission_mode_control);
         let default_serialized =
@@ -2663,16 +2668,15 @@ mod tests {
             .get("show_permission_mode_control")
             .is_none());
 
-        let hidden_config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "app": {
-                "flow_chat": {
-                    "show_permission_mode_control": false
+        let hidden_config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "app": {
+                    "flow_chat": {
+                        "show_permission_mode_control": false
+                    }
                 }
-            }
-        }),
-        ))
-        .expect("flow chat config with hidden permission control should deserialize");
+            })))
+            .expect("flow chat config with hidden permission control should deserialize");
 
         assert!(!hidden_config.app.flow_chat.show_permission_mode_control);
         let hidden_serialized =
@@ -2858,16 +2862,15 @@ mod tests {
 
     #[test]
     fn current_editor_config_defaults_new_optional_visual_fields() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "editor": {
-                "font_size": 16,
-                "font_family": "Fixture Mono",
-                "line_height": 1.4
-            }
-        }),
-        ))
-        .expect("current editor config should default optional visual fields");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "editor": {
+                    "font_size": 16,
+                    "font_family": "Fixture Mono",
+                    "line_height": 1.4
+                }
+            })))
+            .expect("current editor config should default optional visual fields");
 
         assert_eq!(config.editor.font_size, 16);
         assert_eq!(config.editor.font_family, "Fixture Mono");
@@ -2940,31 +2943,30 @@ mod tests {
 
     #[test]
     fn deserializes_explicit_memories_config() {
-        let config: GlobalConfig = serde_json::from_value(current_global_config_with(
-            serde_json::json!({
-            "memories": {
-                "generate_memories": false,
-                "generate_for_btw_sessions": true,
-                "use_memories": false,
-                "external_context_policy": "skip_session",
-                "max_raw_memories_for_consolidation": 12,
-                "max_unused_days": 7,
-                "max_rollout_age_days": 14,
-                "max_rollouts_per_startup": 8,
-                "max_rollouts_scan_limit": 200,
-                "min_rollout_idle_hours": 12,
-                "phase1_max_concurrency": 3,
-                "phase1_retry_backoff_minutes": 45,
-                "phase1_lease_seconds": 600,
-                "phase2_lease_seconds": 1200,
-                "phase2_success_cooldown_seconds": 7200,
-                "phase2_retry_delay_seconds": 300,
-                "extract_model": "extractor",
-                "consolidation_model": "consolidator"
-            }
-        }),
-        ))
-        .expect("global config with memories section should deserialize");
+        let config: GlobalConfig =
+            serde_json::from_value(current_global_config_with(serde_json::json!({
+                "memories": {
+                    "generate_memories": false,
+                    "generate_for_btw_sessions": true,
+                    "use_memories": false,
+                    "external_context_policy": "skip_session",
+                    "max_raw_memories_for_consolidation": 12,
+                    "max_unused_days": 7,
+                    "max_rollout_age_days": 14,
+                    "max_rollouts_per_startup": 8,
+                    "max_rollouts_scan_limit": 200,
+                    "min_rollout_idle_hours": 12,
+                    "phase1_max_concurrency": 3,
+                    "phase1_retry_backoff_minutes": 45,
+                    "phase1_lease_seconds": 600,
+                    "phase2_lease_seconds": 1200,
+                    "phase2_success_cooldown_seconds": 7200,
+                    "phase2_retry_delay_seconds": 300,
+                    "extract_model": "extractor",
+                    "consolidation_model": "consolidator"
+                }
+            })))
+            .expect("global config with memories section should deserialize");
 
         assert!(!config.memories.generate_memories);
         assert!(config.memories.generate_for_btw_sessions);
diff --git a/src/mobile-web/index.html b/src/mobile-web/index.html
index 78258a604c..1caede7d8f 100644
--- a/src/mobile-web/index.html
+++ b/src/mobile-web/index.html
@@ -7,6 +7,8 @@
   <meta name="color-scheme" content="dark light" />
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' http: https:; img-src 'self' data: blob:; font-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'self'; worker-src 'self' blob:" />
   <link rel="icon" type="image/png" href="./brand/openbitfun-app-icon.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="./brand/openbitfun-app-icon-16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="./brand/openbitfun-app-icon-32.png" />
   <link rel="apple-touch-icon" href="./brand/openbitfun-app-icon.png" />
   <title>OpenBitFun Remote</title>
   <script type="module" src="./src/theme-bootstrap.ts"></script>
diff --git a/src/mobile-web/public/brand/openbitfun-app-icon-16.png b/src/mobile-web/public/brand/openbitfun-app-icon-16.png
new file mode 100644
index 0000000000..5400d83aaf
Binary files /dev/null and b/src/mobile-web/public/brand/openbitfun-app-icon-16.png differ
diff --git a/src/mobile-web/public/brand/openbitfun-app-icon-32.png b/src/mobile-web/public/brand/openbitfun-app-icon-32.png
new file mode 100644
index 0000000000..a68f6408b4
Binary files /dev/null and b/src/mobile-web/public/brand/openbitfun-app-icon-32.png differ
diff --git a/src/mobile-web/public/brand/openbitfun-app-icon.png b/src/mobile-web/public/brand/openbitfun-app-icon.png
index 32aee8246c..0624d6952d 100644
Binary files a/src/mobile-web/public/brand/openbitfun-app-icon.png and b/src/mobile-web/public/brand/openbitfun-app-icon.png differ
diff --git a/src/mobile-web/src/assets/openbitfun-mark-dark.png b/src/mobile-web/src/assets/openbitfun-mark-dark.png
index 5e5da25f6f..bac28ae23d 100644
Binary files a/src/mobile-web/src/assets/openbitfun-mark-dark.png and b/src/mobile-web/src/assets/openbitfun-mark-dark.png differ
diff --git a/src/mobile-web/src/assets/openbitfun-mark-light.png b/src/mobile-web/src/assets/openbitfun-mark-light.png
index 1fd8ced437..424fb3da81 100644
Binary files a/src/mobile-web/src/assets/openbitfun-mark-light.png and b/src/mobile-web/src/assets/openbitfun-mark-light.png differ
diff --git a/src/mobile-web/src/styles/components/chat-input.scss b/src/mobile-web/src/styles/components/chat-input.scss
index beeefc9a41..464d88f570 100644
--- a/src/mobile-web/src/styles/components/chat-input.scss
+++ b/src/mobile-web/src/styles/components/chat-input.scss
@@ -144,7 +144,7 @@
   white-space: nowrap;
   font-size: var(--openbitfun-type-body-sm-font-size);
   font-weight: var(--openbitfun-type-label-md-font-weight);
-  letter-spacing: normal;
+  letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
 }
 
 .chat-model-selector__dropdown {
diff --git a/src/mobile-web/src/styles/reset.scss b/src/mobile-web/src/styles/reset.scss
index 80dbfa741b..5057b2ef1a 100644
--- a/src/mobile-web/src/styles/reset.scss
+++ b/src/mobile-web/src/styles/reset.scss
@@ -13,7 +13,7 @@
   button,
   input,
   textarea {
-    font-family: inherit;
+    font-family: var(--openbitfun-type-body-md-font-family);
   }
 
   button:focus-visible,
diff --git a/src/web-ui/index.html b/src/web-ui/index.html
index 3dbe7e4a13..fa0e43728d 100644
--- a/src/web-ui/index.html
+++ b/src/web-ui/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/brand/openbitfun-app-icon.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/brand/openbitfun-app-icon-16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/brand/openbitfun-app-icon-32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenBitFun - AI Code Assistant</title>
     <script>
diff --git a/src/web-ui/public/brand/openbitfun-app-icon-16.png b/src/web-ui/public/brand/openbitfun-app-icon-16.png
new file mode 100644
index 0000000000..5400d83aaf
Binary files /dev/null and b/src/web-ui/public/brand/openbitfun-app-icon-16.png differ
diff --git a/src/web-ui/public/brand/openbitfun-app-icon-32.png b/src/web-ui/public/brand/openbitfun-app-icon-32.png
new file mode 100644
index 0000000000..a68f6408b4
Binary files /dev/null and b/src/web-ui/public/brand/openbitfun-app-icon-32.png differ
diff --git a/src/web-ui/public/brand/openbitfun-app-icon.png b/src/web-ui/public/brand/openbitfun-app-icon.png
index 32aee8246c..0624d6952d 100644
Binary files a/src/web-ui/public/brand/openbitfun-app-icon.png and b/src/web-ui/public/brand/openbitfun-app-icon.png differ
diff --git a/src/web-ui/public/brand/openbitfun-mark-dark-128.png b/src/web-ui/public/brand/openbitfun-mark-dark-128.png
index bfc4f7475b..2b1748c5d6 100644
Binary files a/src/web-ui/public/brand/openbitfun-mark-dark-128.png and b/src/web-ui/public/brand/openbitfun-mark-dark-128.png differ
diff --git a/src/web-ui/public/brand/openbitfun-mark-dark.png b/src/web-ui/public/brand/openbitfun-mark-dark.png
index 5e5da25f6f..bac28ae23d 100644
Binary files a/src/web-ui/public/brand/openbitfun-mark-dark.png and b/src/web-ui/public/brand/openbitfun-mark-dark.png differ
diff --git a/src/web-ui/public/brand/openbitfun-mark-light-128.png b/src/web-ui/public/brand/openbitfun-mark-light-128.png
index 9c6f46c6bd..cf2a3f8872 100644
Binary files a/src/web-ui/public/brand/openbitfun-mark-light-128.png and b/src/web-ui/public/brand/openbitfun-mark-light-128.png differ
diff --git a/src/web-ui/public/brand/openbitfun-mark-light.png b/src/web-ui/public/brand/openbitfun-mark-light.png
index 1fd8ced437..424fb3da81 100644
Binary files a/src/web-ui/public/brand/openbitfun-mark-light.png and b/src/web-ui/public/brand/openbitfun-mark-light.png differ
diff --git a/src/web-ui/src/app/components/AboutDialog/AboutBrandMark.tsx b/src/web-ui/src/app/components/AboutDialog/AboutBrandMark.tsx
new file mode 100644
index 0000000000..075d293127
--- /dev/null
+++ b/src/web-ui/src/app/components/AboutDialog/AboutBrandMark.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'react';
+
+const CONTOUR_COUNT = 15;
+const FLOW_CYCLE_MS = 18000;
+const FLOW_LAYERS = [
+  { length: 34, opacity: 0.12 },
+  { length: 26, opacity: 0.14 },
+  { length: 18, opacity: 0.36 },
+];
+
+function createContour(index: number): string {
+  const progress = index / (CONTOUR_COUNT - 1);
+  const radius = 79 + 23 * progress;
+  // Preserve the original ribbon: flat inner edge, pointed outer crown.
+  const angle = (-60 - 30 * progress) * Math.PI / 180;
+  const vertices = Array.from({ length: 6 }, (_, vertex) => {
+    const theta = angle + vertex * Math.PI / 3;
+    return [128 + radius * Math.cos(theta), 128 + radius * Math.sin(theta)];
+  });
+  const corners = vertices.map((vertex, i) => {
+    const previous = vertices[(i + 5) % 6];
+    const next = vertices[(i + 1) % 6];
+    return {
+      entry: vertex.map((value, axis) => value + (previous[axis] - value) * 0.16),
+      exit: vertex.map((value, axis) => value + (next[axis] - value) * 0.16),
+      vertex,
+    };
+  });
+  const point = (values: number[]) => values.map(value => value.toFixed(3)).join(' ');
+  return corners.map((corner, i) =>
+    `${i === 0 ? 'M' : 'L'} ${point(corner.entry)} Q ${point(corner.vertex)} ${point(corner.exit)}`,
+  ).join(' ') + ' Z';
+}
+
+const contours = Array.from({ length: CONTOUR_COUNT }, (_, index) => createContour(index));
+
+export function AboutBrandMark({ active = true }: { active?: boolean }) {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || !active) return;
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    let animations: Animation[] = [];
+
+    const synchronizePlayback = () => {
+      if (reducedMotion.matches) {
+        animations.forEach(animation => animation.cancel());
+        animations = [];
+        return;
+      }
+      if (document.hidden) {
+        animations.forEach(animation => animation.pause());
+        return;
+      }
+      if (animations.length === 0) {
+        // Equal lap times preserve the spacing between highlights indefinitely.
+        // Only the highlights circulate; the contours remain fixed.
+        animations = Array.from(svg.querySelectorAll('.openbitfun-about-dialog__brand-flow'))
+          .map((strand, index) => {
+            const start = -index * 3;
+            return strand.animate([
+              { strokeDashoffset: String(start) },
+              { strokeDashoffset: String(start - 100) },
+            ], { duration: FLOW_CYCLE_MS, iterations: Infinity, easing: 'linear' });
+          });
+      } else {
+        animations.forEach(animation => animation.play());
+      }
+    };
+
+    synchronizePlayback();
+    reducedMotion.addEventListener('change', synchronizePlayback);
+    document.addEventListener('visibilitychange', synchronizePlayback);
+    return () => {
+      animations.forEach(animation => animation.cancel());
+      reducedMotion.removeEventListener('change', synchronizePlayback);
+      document.removeEventListener('visibilitychange', synchronizePlayback);
+    };
+  }, [active]);
+
+  return (
+    <svg
+      ref={svgRef}
+      className="openbitfun-about-dialog__brand-mark"
+      viewBox="0 0 256 256"
+      width={256}
+      height={256}
+      fill="none"
+      stroke="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {contours.map((path, index) => (
+        <g key={index}>
+          <path d={path} opacity={index === 0 || index === CONTOUR_COUNT - 1 ? 0.58 : 0.34} />
+          <g className="openbitfun-about-dialog__brand-flow" strokeDashoffset={-index * 3}>
+            {FLOW_LAYERS.map(layer => (
+              <path
+                key={layer.length}
+                d={path}
+                pathLength={100}
+                strokeDasharray={`${layer.length / 2} ${100 - layer.length} ${layer.length / 2} 0`}
+                opacity={layer.opacity}
+              />
+            ))}
+          </g>
+        </g>
+      ))}
+    </svg>
+  );
+}
diff --git a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
index ccaaa8a721..4b2343e38c 100644
--- a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
+++ b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
@@ -58,23 +58,14 @@
   display: block;
   width: 100%;
   height: auto;
-  object-fit: contain;
+  color: var(--openbitfun-color-content-primary);
+  stroke-width: 0.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
   user-select: none;
   pointer-events: none;
 }
 
-.openbitfun-about-dialog__brand-mark--light {
-  display: none;
-}
-
-[data-color-scheme='dark'] .openbitfun-about-dialog__brand-mark--dark {
-  display: none;
-}
-
-[data-color-scheme='dark'] .openbitfun-about-dialog__brand-mark--light {
-  display: block;
-}
-
 .openbitfun-about-dialog__metadata {
   display: flex;
   flex-direction: column;
@@ -351,6 +342,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .openbitfun-about-dialog__brand-flow {
+    display: none;
+  }
+
   .openbitfun-about-dialog__download-fill--indeterminate {
     animation: none;
     transform: none;
diff --git a/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx b/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx
index effb18b53c..39e75d4dc8 100644
--- a/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx
+++ b/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx
@@ -32,6 +32,7 @@ import { canCheckForAppUpdates, isTauriRuntime } from '@/infrastructure/update/t
 import { UpdateAvailableDialog } from '@/infrastructure/update/UpdateAvailableDialog';
 import { useUpdateInstallStore } from '@/infrastructure/update/updateInstallStore';
 import { formatUpdateInstallError } from '@/infrastructure/update/updateErrorMessage';
+import { AboutBrandMark } from './AboutBrandMark';
 import './AboutDialog.scss';
 
 const log = createLogger('AboutDialog');
@@ -202,22 +203,7 @@ export const AboutDialog: React.FC<AboutDialogProps> = ({
                 aria-hidden="true"
               >
                 <div className="openbitfun-about-dialog__artwork">
-                  <img
-                    className="openbitfun-about-dialog__brand-mark openbitfun-about-dialog__brand-mark--dark"
-                    src="/brand/openbitfun-mark-dark.png"
-                    alt=""
-                    width={512}
-                    height={512}
-                    draggable={false}
-                  />
-                  <img
-                    className="openbitfun-about-dialog__brand-mark openbitfun-about-dialog__brand-mark--light"
-                    src="/brand/openbitfun-mark-light.png"
-                    alt=""
-                    width={512}
-                    height={512}
-                    draggable={false}
-                  />
+                  <AboutBrandMark active={isOpen} />
                 </div>
                 <p className="openbitfun-about-dialog__brand-statement">
                   {t('about.brandStatement')}
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index 65ba93d8d0..cface10339 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -28,7 +28,7 @@ import {
 } from '@openbitfun/ui';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { FolderOpen, FolderPlus, History, Users, Network } from 'lucide-react';
+import { FolderOpen, FolderPlus, Users, Network } from 'lucide-react';
 // import { PanelsTopLeft } from 'lucide-react'; // temporarily hidden: Pages nav entry
 import { useSceneManager } from '../../hooks/useSceneManager';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
@@ -305,12 +305,7 @@ const MainNav: React.FC<MainNavProps> = ({
       </MenuItem>
       <MenuSeparator />
       <MenuSection
-        title={(
-          <>
-            <History size={12} aria-hidden="true" />
-            <span>{t('header.recentWorkspaces')}</span>
-          </>
-        )}
+        title={t('header.recentWorkspaces')}
       >
         <ScrollArea className="openbitfun-nav-panel__workspace-menu-workspaces">
         {recentWorkspaces.length === 0 ? (
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
index 743a16392d..4f4c2ebc6e 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
@@ -67,7 +67,7 @@ $miniapp-gallery-content-inline-size: min(calc(100% - var(--openbitfun-space-6))
   .gallery-zones {
     width: $miniapp-gallery-content-inline-size;
     gap: var(--openbitfun-space-6);
-    padding: var(--openbitfun-space-6) 0 var(--openbitfun-space-8);
+    padding: var(--openbitfun-space-4) 0 var(--openbitfun-space-8);
   }
 
   .gallery-zone {
@@ -77,7 +77,7 @@ $miniapp-gallery-content-inline-size: min(calc(100% - var(--openbitfun-space-6))
 
 .miniapp-gallery-tabs {
   width: $miniapp-gallery-content-inline-size;
-  margin: var(--openbitfun-space-6) auto 0;
+  margin: var(--openbitfun-space-4) auto 0;
   box-sizing: border-box;
 }
 
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
index 524bf8c14d..571a93e801 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
@@ -4,7 +4,7 @@
  */
 import React, { Suspense, lazy, useState } from 'react';
 
-import { SegmentedControl } from '@openbitfun/ui';
+import { TabGroup } from '@openbitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
 import './MiniAppGalleryScene.scss';
 
@@ -17,11 +17,10 @@ const MiniAppGalleryScene: React.FC = () => {
   const { t } = useI18n('scenes/miniapp');
   const [activeTab, setActiveTab] = useState<MiniAppGalleryTab>('apps');
   const tabs = (
-    <SegmentedControl
+    <div className="miniapp-gallery-tabs">
+    <TabGroup
       aria-label={t('title')}
-      className="miniapp-gallery-tabs"
-      distribution="fill"
-      options={[
+      items={[
         {
           value: 'apps',
           label: t('market.tabs.apps'),
@@ -31,10 +30,11 @@ const MiniAppGalleryScene: React.FC = () => {
           label: t('market.tabs.submissions'),
         },
       ]}
-      size="md"
+      size="sm"
       value={activeTab}
       onValueChange={(value) => setActiveTab(value as MiniAppGalleryTab)}
     />
+    </div>
   );
 
   return (
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
index 9b82f197fe..ebd7c1cc1d 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
@@ -27,15 +27,17 @@ describe('Mini App card presentation', () => {
     const submissions = readRelative('../views/MiniAppSubmissionsView.tsx');
     const tabs = readRelative('../MiniAppGalleryScene.tsx');
 
-    expect(library).toContain('<SegmentedControl');
-    expect(library).toContain('variant="pills"');
+    expect(library).toContain('className="miniapp-gallery__filters"');
+    expect(library).toContain('className="miniapp-gallery__categories"');
+    expect(library).not.toContain('<SegmentedControl');
     expect(library).toContain(
       'buildMiniAppLibraryItems(marketItems, apps, marketOrigins, sort)',
     );
     expect(library).toContain('<MiniAppLibraryRow');
     expect(library).not.toContain('<MiniAppCard');
-    expect(tabs).toContain('distribution="fill"');
-    expect(tabs).toContain('size="md"');
+    expect(tabs).toContain('<TabGroup');
+    expect(tabs).not.toContain('distribution="fill"');
+    expect(tabs).toContain('size="sm"');
     expect(tabs).toContain("type MiniAppGalleryTab = 'apps' | 'submissions';");
     expect(tabs).not.toContain('MiniAppMarketView');
     expect(submissions).toContain('<Disclosure');
@@ -100,19 +102,19 @@ describe('Mini App card presentation', () => {
     expect(stylesheet).toContain('grid-template-columns: minmax(0, 224px) minmax(0, 1fr);');
   });
 
-  it('keeps catalog search beside the All Apps heading instead of in the page header', () => {
+  it('groups catalog controls below the tabs without repeating the page heading', () => {
     const source = readRelative('../views/MiniAppLibraryView.tsx');
     const headerStart = source.indexOf('<GalleryPageHeader');
     const tabsStart = source.indexOf('{tabs}', headerStart);
-    const allAppsStart = source.indexOf('<GalleryZone', tabsStart);
-    const allAppsEnd = source.indexOf('</GalleryZone>', allAppsStart);
+    const allAppsStart = source.indexOf('<section className="gallery-zone"', tabsStart);
+    const allAppsEnd = source.indexOf('</section>', allAppsStart);
     const pageHeader = source.slice(headerStart, tabsStart);
     const allAppsZone = source.slice(allAppsStart, allAppsEnd);
 
     expect(pageHeader).not.toContain('<SearchField');
-    expect(allAppsZone).toContain("title={t('allApps')}");
+    expect(allAppsZone).toContain("aria-label={t('allApps')}");
     expect(allAppsZone).toMatch(
-      /titleAdornment=\{\([\s\S]*?miniapp-gallery__heading-actions[\s\S]*?<NumberBadge[\s\S]*?<SearchField[\s\S]*?tools=\{\([\s\S]*?<Select/,
+      /miniapp-gallery__filters[\s\S]*?<SearchField[\s\S]*?miniapp-gallery__categories[\s\S]*?miniapp-gallery__sort[\s\S]*?<NumberBadge/,
     );
   });
 
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss
index e9b75a05d5..5958910ffd 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss
@@ -10,31 +10,24 @@
     display: inline-flex;
   }
 
-  &__heading-actions {
-    display: inline-flex;
+  &__filters {
+    display: grid;
+    grid-template-columns: minmax(160px, 1fr) 132px 132px auto;
     align-items: center;
-    gap: var(--openbitfun-space-2);
+    gap: var(--openbitfun-space-3);
     min-width: 0;
   }
 
-  &__search {
-    width: min(240px, 28vw);
-  }
-
-  &__sort {
-    min-width: 132px;
-  }
-
+  &__search,
+  &__sort,
   &__categories {
     width: 100%;
-    max-width: 100%;
-    overflow-x: auto;
-    scrollbar-width: thin;
+    min-width: 0;
+  }
 
-    > [data-openbitfun-part='segment'] {
-      flex: 0 0 auto;
-      white-space: nowrap;
-    }
+  &__result-count {
+    display: inline-flex;
+    align-items: center;
   }
 
   &__list {
@@ -302,15 +295,13 @@
       flex-wrap: wrap;
     }
 
-    &__search {
-      width: auto;
-      min-width: 0;
-      flex: 1 1 180px;
+    &__filters {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+      gap: var(--openbitfun-space-2);
     }
 
-    &__sort {
-      flex: 0 0 auto;
-      min-width: min(100%, 160px);
+    &__search {
+      grid-column: 1 / -1;
     }
   }
 }
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
index 0f85d50e10..993879be8b 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
@@ -7,7 +7,6 @@ import {
   MenuItem,
   NumberBadge,
   SearchField,
-  SegmentedControl,
   Select,
   StatusPill,
   type SelectOption,
@@ -31,7 +30,6 @@ import {
   GalleryLayout,
   GalleryPageHeader,
   GallerySkeleton,
-  GalleryZone,
 } from '@/app/components';
 import { useApp } from '@/app/hooks/useApp';
 import { useGallerySceneAutoRefresh } from '@/app/hooks/useGallerySceneAutoRefresh';
@@ -840,26 +838,27 @@ const MiniAppLibraryView: React.FC<MiniAppLibraryViewProps> = ({ tabs }) => {
         data-openbitfun-part="content"
         className="gallery-zones"
       >
-        <GalleryZone
-          title={t('allApps')}
-          titleAdornment={(
-            <span
-              className="miniapp-gallery__heading-actions"
-              data-openbitfun-component="miniapp-gallery-view"
-              data-openbitfun-part="tools"
-            >
-              <NumberBadge value={libraryItems.length} />
-              <SearchField
-                className="miniapp-gallery__search"
-                leadingIcon={<Icon name="search" size="lg" aria-hidden />}
-                onValueChange={setQuery}
-                placeholder={t('searchPlaceholder')}
+        <section className="gallery-zone" aria-label={t('allApps')}>
+          <div className="miniapp-gallery__filters" data-openbitfun-component="miniapp-gallery-view" data-openbitfun-part="tools">
+            <SearchField
+              className="miniapp-gallery__search"
+              leadingIcon={<Icon name="search" size="sm" aria-hidden />}
+              onValueChange={setQuery}
+              placeholder={t('searchPlaceholder')}
+              aria-label={t('searchPlaceholder')}
+              size="sm"
+              value={query}
+            />
+            <div data-openbitfun-component="miniapp-gallery-view" data-openbitfun-part="categoryFilters">
+              <Select
+                className="miniapp-gallery__categories"
+                options={CATEGORIES.map((value) => ({ label: categoryLabel(value, t), value }))}
+                value={category}
+                onValueChange={(value) => setCategory(value as MiniAppCategory)}
+                aria-label={t('market.catalog')}
                 size="sm"
-                value={query}
               />
-            </span>
-          )}
-          tools={(
+            </div>
             <Select
               className="miniapp-gallery__sort"
               size="sm"
@@ -868,24 +867,9 @@ const MiniAppLibraryView: React.FC<MiniAppLibraryViewProps> = ({ tabs }) => {
               onValueChange={(value) => setSort(value as MarketSort)}
               aria-label={t('market.sortLabel')}
             />
-          )}
-        >
-          <div data-openbitfun-component="miniapp-gallery-view" data-openbitfun-part="categoryFilters">
-            <SegmentedControl
-              className="miniapp-gallery__categories"
-              options={CATEGORIES.map((value) => ({
-                label: (
-                  <span data-openbitfun-component="miniapp-gallery-view" data-openbitfun-part="categoryFilter">
-                    {categoryLabel(value, t)}
-                  </span>
-                ),
-                value,
-              }))}
-              value={category}
-              onValueChange={(value) => setCategory(value as MiniAppCategory)}
-              aria-label={t('market.catalog')}
-              variant="pills"
-            />
+            <span className="miniapp-gallery__result-count" aria-label={t('allApps')}>
+              <NumberBadge value={libraryItems.length} />
+            </span>
           </div>
 
           {catalogError ? (
@@ -908,7 +892,7 @@ const MiniAppLibraryView: React.FC<MiniAppLibraryViewProps> = ({ tabs }) => {
           ) : null}
 
           {renderLibrary()}
-        </GalleryZone>
+        </section>
       </div>
 
       <MiniAppDetailModal
diff --git a/src/web-ui/src/app/startup/startupPerformanceContract.test.ts b/src/web-ui/src/app/startup/startupPerformanceContract.test.ts
index ee57c3abff..ee105ca49e 100644
--- a/src/web-ui/src/app/startup/startupPerformanceContract.test.ts
+++ b/src/web-ui/src/app/startup/startupPerformanceContract.test.ts
@@ -53,7 +53,12 @@ describe('startup performance contract', () => {
     expect(alphaAt(8, 8)).toBe(0);
     expect(alphaAt(12, 12)).toBe(0);
     expect(alphaAt(20, 20)).toBe(0);
-    expect(alphaAt(64, 16)).toBeGreaterThan(240);
+    // The fine-line rim crosses this band; a single pixel from the former
+    // filled mark can land between antialiased strokes in the new artwork.
+    const topRimAlpha = Array.from({ length: 15 }, (_, x) =>
+      Array.from({ length: 9 }, (_, y) => alphaAt(57 + x, 12 + y)),
+    ).flat();
+    expect(Math.max(...topRimAlpha)).toBeGreaterThan(240);
     expect(alphaAt(64, 64)).toBe(0);
   });
 
diff --git a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
index d35799df13..9bf15ea384 100644
--- a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
+++ b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
@@ -1,3 +1,11 @@
+.relay-deploy-dialog {
+  height: min(760px, calc(100dvh - 2 * var(--openbitfun-overlay-dialog-viewport-gutter)));
+
+  &__body {
+    overflow: hidden;
+  }
+}
+
 /**
  * Relay Deploy Wizard Styles
  * Mirrors the account-login / SSH connection dialog visual language.
@@ -9,9 +17,7 @@
   flex: 1;
   // Fixed shell height so step / error / terminal changes do not resize the modal.
   width: 100%;
-  height: min(640px, calc(100vh - 96px));
-  min-height: min(640px, calc(100vh - 96px));
-  max-height: min(640px, calc(100vh - 96px));
+  min-height: 0;
   overflow: hidden;
   container: relay-deploy / inline-size;
   font-family:var(--openbitfun-type-body-sm-font-family);
@@ -21,7 +27,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 4px 16px 10px;
+    padding: var(--openbitfun-space-4) var(--openbitfun-space-5);
     border-bottom: 1px solid var(--openbitfun-color-border-subtle);
     flex-shrink: 0;
   }
@@ -89,22 +95,27 @@
   &__scroll {
     flex: 1;
     min-height: 0;
-    padding: 10px 0 6px;
+    padding: var(--openbitfun-space-5) 0;
     display: flex;
     flex-direction: column;
+    gap: var(--openbitfun-space-4);
+
+    > * {
+      flex-shrink: 0;
+    }
   }
 
   &__desc {
     margin: 0;
-    padding: 0 16px 10px;
+    padding: 0 var(--openbitfun-space-5);
     font-size: var(--openbitfun-type-label-sm-font-size);
     color: var(--openbitfun-color-content-secondary);
     line-height: var(--openbitfun-type-body-sm-line-height);
   }
 
   &__section {
-    padding: 0 16px;
-    margin-bottom: 4px;
+    padding: 0 var(--openbitfun-space-5);
+    margin-bottom: 0;
   }
 
   &__section-header {
@@ -112,14 +123,14 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    margin-bottom: 6px;
+    margin-bottom: var(--openbitfun-space-3);
   }
 
   &__section-title {
     margin: 0;
-    font-size: var(--openbitfun-type-meta-font-size);
+    font-size: var(--openbitfun-type-label-md-font-size);
     font-weight: var(--openbitfun-type-label-selected-font-weight);
-    color: var(--openbitfun-color-content-muted);
+    color: var(--openbitfun-color-content-primary);
     line-height: var(--openbitfun-type-body-sm-line-height);
   }
 
@@ -130,7 +141,9 @@
   &__server-list {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    overflow: hidden;
+    border-radius: var(--openbitfun-layout-field-group-radius);
+    background: var(--openbitfun-color-surface-tertiary);
   }
 
   &__search-empty {
@@ -148,11 +161,11 @@
     align-items: center;
     gap: 8px;
     padding: var(--openbitfun-space-3) var(--openbitfun-space-4);
-    border-radius: var(--openbitfun-radius-base);
+    border-radius: 0;
     background: var(--openbitfun-color-surface-tertiary);
-    border: 1px solid transparent;
+    border: 0;
     cursor: pointer;
-    transition: border-color 0.15s;
+    transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
     &:hover { background: var(--openbitfun-color-action-neutral-surface-hover); }
 
@@ -161,7 +174,9 @@
       outline-offset: var(--openbitfun-focus-offset);
     }
 
-    &--config:hover { border-color: var(--openbitfun-color-border-default); }
+    & + & {
+      border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    }
   }
 
   &__server-icon {
@@ -199,20 +214,10 @@
   }
 
   &__divider {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 16px;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-meta-font-size);
-
-    &::before,
-    &::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: var(--openbitfun-color-border-subtle);
-    }
+    padding: 0 var(--openbitfun-space-5);
+    color: var(--openbitfun-color-content-primary);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
   }
 
   &__form {
@@ -220,7 +225,7 @@
     flex-direction: column;
     gap: 12px;
     padding: var(--openbitfun-space-4);
-    margin-inline: var(--openbitfun-space-4);
+    margin-inline: var(--openbitfun-space-5);
     background: var(--openbitfun-color-surface-tertiary);
     border-radius: var(--openbitfun-layout-field-group-radius);
     scroll-margin-top: 8px;
@@ -280,7 +285,7 @@
     display: flex;
     flex-direction: column;
 
-    &--flex { flex: 1; }
+    &--flex { flex: 1; min-width: 0; }
     &--port { width: 76px; flex-shrink: 0; }
   }
 
diff --git a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
index c18489b8ea..3e06f78426 100644
--- a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
+++ b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
@@ -740,6 +740,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
 
   // ── step renderers ───────────────────────────────────────────────────────
   const renderConnect = () => (
+    <>
     <ScrollArea className="relay-deploy-wizard__scroll">
       <p className="relay-deploy-wizard__desc">{t('relayDeploy.selectServerDesc')}</p>
 
@@ -868,10 +869,11 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           </Field>
         </div>
         <div className="relay-deploy-wizard__field">
-          <label className="relay-deploy-wizard__label">{t('ssh.remote.authMethod')}</label>
+          <Field label={t('ssh.remote.authMethod')} controlWidth="fill">
           <Select options={authOptions} value={formData.authType}
             onValueChange={(v) => setFormData((p) => ({ ...p, authType: String(v) as 'password' | 'privateKey' }))}
-            size="md" disabled={connecting} />
+            size="sm" disabled={connecting} />
+          </Field>
         </div>
         {formData.authType === 'password' && (
           <div className="relay-deploy-wizard__field">
@@ -939,6 +941,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
         )}
       </div>
 
+    </ScrollArea>
       <div className="relay-deploy-wizard__actions">
         <Button variant="outline" size="sm" onClick={onClose} disabled={connecting}>
           {t('actions.cancel')}
@@ -952,7 +955,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           )}
         </Button>
       </div>
-    </ScrollArea>
+    </>
   );
 
   const renderCheckRow = (
@@ -977,6 +980,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
     const dockerWarn = !!pf?.dockerInstalled && !dockerOk && pf.dockerAccessMode !== 'missing';
     const dockerWillInstall = !!pf && !pf.dockerInstalled && canInstallDocker;
     return (
+      <>
       <ScrollArea className="relay-deploy-wizard__scroll">
         <div className="relay-deploy-wizard__server-banner">
           <Server size={14} />
@@ -1119,6 +1123,11 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
               </div>
             )}
 
+
+          </>
+        )}
+      </ScrollArea>
+      {!preflightLoading && pf && (
             <div className="relay-deploy-wizard__actions">
               {alreadyDeployed ? (
                 <>
@@ -1162,13 +1171,13 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
                 </>
               )}
             </div>
-          </>
-        )}
-      </ScrollArea>
+      )}
+      </>
     );
   };
 
   const renderDeploy = () => (
+    <>
     <ScrollArea className="relay-deploy-wizard__scroll">
       <div className="relay-deploy-wizard__server-banner">
         <Server size={14} />
@@ -1217,6 +1226,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           <span>{t('relayDeploy.openingTerminal')}</span>
         </div>
       )}
+    </ScrollArea>
       <div className="relay-deploy-wizard__actions">
         <Button variant="outline" size="sm" onClick={handleBackToPreflight}
           disabled={taskStatus === 'running'}
@@ -1231,10 +1241,11 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           </Button>
         )}
       </div>
-    </ScrollArea>
+    </>
   );
 
   const renderRegister = () => (
+    <>
     <ScrollArea className="relay-deploy-wizard__scroll">
       <div className="relay-deploy-wizard__server-banner">
         <Server size={14} />
@@ -1305,6 +1316,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           </div>
         )}
       </div>
+    </ScrollArea>
       <div className="relay-deploy-wizard__actions">
         <Button variant="outline" size="sm" onClick={handleBackToPreflight} disabled={regLoading} leadingIcon={<Icon name="chevron-left" size="sm" />}>
 
@@ -1328,10 +1340,11 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           </Button>
         )}
       </div>
-    </ScrollArea>
+    </>
   );
 
   const renderDone = () => (
+    <>
     <ScrollArea className="relay-deploy-wizard__scroll">
       <div className="relay-deploy-wizard__done">
         <PartyPopper size={32} className="relay-deploy-wizard__done-icon" />
@@ -1344,13 +1357,14 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           </div>
         )}
       </div>
+    </ScrollArea>
       <div className="relay-deploy-wizard__actions">
         <Button variant="fill" size="sm" onClick={handleFinish} leadingIcon={<Icon name="check-circle" size="sm" />}>
 
           {t('relayDeploy.finishAndLogin')}
         </Button>
       </div>
-    </ScrollArea>
+    </>
   );
 
   return (
@@ -1359,6 +1373,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
         open={isOpen}
         onOpenChange={(nextOpen) => { if (!nextOpen) onClose(); }}
         size="lg"
+        className="relay-deploy-dialog"
         closeOnPointerOutside={false}
       >
         <DialogHeader>
@@ -1367,7 +1382,7 @@ export const RelayDeployWizard: React.FC<RelayDeployWizardProps> = ({
           </DialogHeading>
           <DialogClose />
         </DialogHeader>
-        <DialogBody inset="none">
+        <DialogBody inset="none" className="relay-deploy-dialog__body">
         <div className="relay-deploy-wizard" data-openbitfun-component="relay-deploy" data-openbitfun-part="root">
           <div className="relay-deploy-wizard__steps" data-openbitfun-component="relay-deploy" data-openbitfun-part="steps">
             {steps.map((s, i) => (
diff --git a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx
index ec95659480..eb738105b4 100644
--- a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx
+++ b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx
@@ -14,6 +14,7 @@ globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 const mocks = vi.hoisted(() => ({
   controller: {
+    enabled: true,
     phase: 'idle',
     start: vi.fn(),
     end: vi.fn(),
@@ -45,6 +46,7 @@ describe('ConversationModeSurface', () => {
   let root: Root;
 
   beforeEach(() => {
+    mocks.controller.enabled = true;
     mocks.controller.phase = 'idle';
     mocks.controller.start.mockReset();
     mocks.controller.end.mockReset();
@@ -109,4 +111,37 @@ describe('ConversationModeSurface', () => {
     button?.click();
     expect(mocks.controller.start).not.toHaveBeenCalled();
   });
+
+  it('hides the realtime voice switch until the client voice assistant is enabled', async () => {
+    mocks.controller.enabled = false;
+    await act(async () => {
+      root.render(
+        <ConversationModeSurface>
+          <div data-testid="chat-surface" />
+        </ConversationModeSurface>,
+      );
+    });
+
+    expect(container.querySelector('[data-testid="chat-surface"]')).not.toBeNull();
+    expect(container.querySelector('[data-openbitfun-part="modeSwitch"]')).toBeNull();
+    expect(container.querySelector('button')).toBeNull();
+  });
+
+  it('keeps the hang-up switch while a call is already live after the assistant is disabled', async () => {
+    mocks.controller.enabled = false;
+    mocks.controller.phase = 'live';
+    await act(async () => {
+      root.render(
+        <ConversationModeSurface>
+          <div data-testid="chat-surface" />
+        </ConversationModeSurface>,
+      );
+    });
+
+    expect(container.querySelector('[data-openbitfun-part="modeSwitch"]')).not.toBeNull();
+    await act(async () => {
+      container.querySelector('button')?.click();
+    });
+    expect(mocks.controller.end).toHaveBeenCalledOnce();
+  });
 });
diff --git a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx
index 913026f63e..46f765695a 100644
--- a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx
+++ b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx
@@ -32,21 +32,23 @@ export function ConversationModeSurface({
 }: ConversationModeSurfaceProps) {
   const { t } = useTranslation('settings/voice-input');
   const {
+    enabled,
     phase,
     start: startVoiceCall,
     end: endVoiceCall,
   } = useRealtimeVoiceCall();
   const isVoiceMode = phase !== 'idle';
   const isTransitioning = phase === 'connecting' || phase === 'ending';
+  const showModeSwitch = enabled || isVoiceMode;
 
   const handleModeSwitch = useCallback(() => {
     if (isVoiceMode) {
       endVoiceCall();
       return;
     }
-    if (voiceStartDisabled) return;
+    if (!enabled || voiceStartDisabled) return;
     startVoiceCall(voiceTarget);
-  }, [endVoiceCall, isVoiceMode, startVoiceCall, voiceStartDisabled, voiceTarget]);
+  }, [enabled, endVoiceCall, isVoiceMode, startVoiceCall, voiceStartDisabled, voiceTarget]);
 
   return (
     <div
@@ -66,39 +68,41 @@ export function ConversationModeSurface({
         {isVoiceMode ? <RealtimeVoiceCallPanel /> : children}
       </div>
 
-      <footer
-        className="openbitfun-conversation-mode-surface__switch"
-        data-openbitfun-component="conversation-mode-surface"
-        data-openbitfun-part="modeSwitch"
-      >
-        <button
-          type="button"
-          className={`openbitfun-conversation-mode-surface__switch-button${isVoiceMode ? ' is-voice' : ''}`}
-          data-testid={switchTestId}
+      {showModeSwitch ? (
+        <footer
+          className="openbitfun-conversation-mode-surface__switch"
           data-openbitfun-component="conversation-mode-surface"
-          data-openbitfun-part="modeSwitchButton"
-          aria-pressed={isVoiceMode}
-          disabled={phase === 'ending' || (!isVoiceMode && voiceStartDisabled)}
-          onClick={handleModeSwitch}
+          data-openbitfun-part="modeSwitch"
         >
-          {isTransitioning ? (
-            <Loader2
-              className="openbitfun-conversation-mode-surface__switch-spinner"
-              size={15}
-              aria-hidden="true"
-            />
-          ) : isVoiceMode ? (
-            <Icon name="side-chat" size="sm" aria-hidden="true" />
-          ) : (
-            <Phone size={15} aria-hidden="true" />
-          )}
-          <span>
-            {t(isVoiceMode
-              ? 'voiceCall.call.switchToChat'
-              : 'voiceCall.call.switchToVoice')}
-          </span>
-        </button>
-      </footer>
+          <button
+            type="button"
+            className={`openbitfun-conversation-mode-surface__switch-button${isVoiceMode ? ' is-voice' : ''}`}
+            data-testid={switchTestId}
+            data-openbitfun-component="conversation-mode-surface"
+            data-openbitfun-part="modeSwitchButton"
+            aria-pressed={isVoiceMode}
+            disabled={phase === 'ending' || (!isVoiceMode && voiceStartDisabled)}
+            onClick={handleModeSwitch}
+          >
+            {isTransitioning ? (
+              <Loader2
+                className="openbitfun-conversation-mode-surface__switch-spinner"
+                size={15}
+                aria-hidden="true"
+              />
+            ) : isVoiceMode ? (
+              <Icon name="side-chat" size="sm" aria-hidden="true" />
+            ) : (
+              <Phone size={15} aria-hidden="true" />
+            )}
+            <span>
+              {t(isVoiceMode
+                ? 'voiceCall.call.switchToChat'
+                : 'voiceCall.call.switchToVoice')}
+            </span>
+          </button>
+        </footer>
+      ) : null}
     </div>
   );
 }
diff --git a/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts b/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts
index fab60c8f0d..13fcf9b80c 100644
--- a/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts
+++ b/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts
@@ -863,6 +863,11 @@ export function useRealtimeVoiceCallController(disabled = false): RealtimeVoiceC
 
   const start = useCallback((target?: VoiceMiniAppCallTarget) => {
     if (phase !== 'idle' || disabled) return;
+    if (voiceCallConfig && !voiceCallConfig.enabled) {
+      notificationService.info(t('voiceCall.call.configureFirst'));
+      openSettings();
+      return;
+    }
     if (!isTauriRuntime()) {
       notificationService.error(t('messages.unsupported'));
       return;
@@ -1024,6 +1029,7 @@ export function useRealtimeVoiceCallController(disabled = false): RealtimeVoiceC
     openSettings,
     phase,
     t,
+    voiceCallConfig,
   ]);
 
   useEffect(() => () => {
@@ -1039,7 +1045,7 @@ export function useRealtimeVoiceCallController(disabled = false): RealtimeVoiceC
   }, [cleanupMedia]);
 
   return {
-    enabled: voiceCallConfig?.enabled !== false,
+    enabled: voiceCallConfig?.enabled === true,
     disabled,
     phase,
     muted,
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts b/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts
index 75118aecba..f09df1e6dc 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts
@@ -27,10 +27,11 @@ describe('ModelSettingsPage dialog presentation', () => {
     expect(editorDialog).toContain('size="xl"');
     expect(editorDialog).not.toContain('size="2xl"');
     expect(editorDialog).toMatch(
-      /\{!reasoningPanelDraft && \(\s*<DialogFooter appearance="floating">/,
+      /\{!reasoningPanelDraft && \(\s*<DialogFooter>/,
     );
+    expect(editorDialog).not.toContain('appearance="floating"');
     expect(editorDialog).toContain(
-      '<Button variant="secondary" onClick={requestCloseEditingModal} disabled={isEditorSaving}>',
+      '<Button variant="outline" size="sm" onClick={requestCloseEditingModal} disabled={isEditorSaving}>',
     );
     expect(editorDialog).toContain('<DialogClose disabled={isEditorSaving} />');
     expect(editorDialog).toContain('loading={isEditorSaving}');
@@ -42,8 +43,8 @@ describe('ModelSettingsPage dialog presentation', () => {
     );
     expect(styles).not.toContain('&__editor-dialog-footer');
     expect(styles).not.toContain('&__editor-dialog-cancel');
-    expect(styles).toMatch(/&__selected-model-row\s*{[\s\S]*?background:\s*var\(--openbitfun-color-surface-raised\);/);
-    expect(styles).toMatch(/&__reasoning-summary\s*{[\s\S]*?background:\s*var\(--openbitfun-color-surface-tertiary\);/);
+    expect(styles).toMatch(/&__selected-model-row\s*{[\s\S]*?background:\s*var\(--openbitfun-color-surface-tertiary\);/);
+    expect(styles).toMatch(/&__reasoning-summary\s*{[\s\S]*?background:\s*transparent;/);
   });
 
   it('keeps unsaved editor state behind an explicit draft decision', () => {
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
index a7e9d87925..b700e03c7c 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
@@ -997,23 +997,10 @@
       flex-direction: column;
       gap: 0;
 
-      /* Modal: same fr ratio on every two-column row (uniform). Controls a bit wider than native wide 2/8. */
       .openbitfun-model-settings__edit-section {
-        .openbitfun-config-page-row--multiline:not(.openbitfun-config-page-row--wide) {
-          grid-template-columns: 1fr !important;
-        }
-
-        .openbitfun-config-page-row.openbitfun-model-settings__toggle-row {
-          grid-template-columns: minmax(0, 1fr) auto !important;
-          gap: var(--openbitfun-space-3);
-        }
-
         .openbitfun-config-page-row:not(.openbitfun-config-page-row--multiline):not(.openbitfun-model-settings__toggle-row),
         .openbitfun-config-page-row--multiline.openbitfun-config-page-row--wide {
-          grid-template-columns: minmax(0, 2fr) minmax(0, 11fr) !important;
-        }
-
-        .openbitfun-config-page-row--multiline.openbitfun-config-page-row--wide {
+          grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) !important;
           gap: var(--openbitfun-space-4);
         }
       }
@@ -1145,6 +1132,17 @@
     }
   }
 
+  &__resolved-url {
+    color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-label-sm-font-size);
+    line-height: var(--openbitfun-type-body-sm-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  &__resolved-url-value {
+    user-select: text;
+  }
+
   &__model-picker-row {
     display: flex;
     flex-direction: column;
@@ -1213,110 +1211,74 @@
   &__selected-model-row {
     display: flex;
     flex-direction: column;
-    gap: var(--openbitfun-space-2);
-    padding: var(--openbitfun-space-3);
-    border: 1px solid var(--openbitfun-color-border-subtle);
+    overflow: hidden;
+    border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
     border-radius: var(--openbitfun-layout-field-group-radius);
-    background: var(--openbitfun-color-surface-raised);
-    transition: border-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard);
+    background: var(--openbitfun-color-surface-tertiary);
+    font-family: var(--openbitfun-type-body-sm-font-family);
   }
 
   &__selected-model-head {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0;
-    padding: 2px 0;
+    padding: var(--openbitfun-space-3) var(--openbitfun-space-4);
 
     &--toggleable {
       cursor: pointer;
       user-select: none;
 
-      &:focus-visible {
-        outline: 2px solid var(--openbitfun-color-accent-default);
-        outline-offset: 2px;
+      &:hover {
+        background: var(--openbitfun-color-action-neutral-surface-hover);
       }
-    }
-
-    .openbitfun-icon-button--small {
-      width: 24px;
-      height: 24px;
-      margin-top: -1px;
-      flex-shrink: 0;
 
-      svg {
-        width: 14px;
-        height: 14px;
+      &:focus-visible {
+        outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
+        outline-offset: calc(-1 * var(--openbitfun-focus-width));
       }
     }
   }
 
-  &__selected-model-head-title {
+  &__selected-model-head-title,
+  &__selected-model-head-top {
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
+    align-items: center;
     gap: var(--openbitfun-space-2);
-    width: 100%;
     min-width: 0;
   }
 
+  &__selected-model-head-title {
+    justify-content: space-between;
+  }
+
   &__selected-model-head-top {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--openbitfun-space-2);
-    min-width: 0;
     flex: 1;
-    overflow: hidden;
+    flex-wrap: wrap;
   }
 
   &__selected-model-head-bottom {
-    width: 100%;
     min-width: 0;
-    margin-top: 2px;
+    margin-top: var(--openbitfun-space-1);
     padding-left: calc(20px + var(--openbitfun-space-2));
-    box-sizing: border-box;
   }
 
   &__selected-model-toggle {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 20px;
-    height: 20px;
     flex-shrink: 0;
     color: var(--openbitfun-color-content-muted);
-    transition: transform var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard);
-
-    svg {
-      width: 14px;
-      height: 14px;
-    }
   }
 
   &__selected-model-name {
     min-width: 0;
     font-size: var(--openbitfun-type-label-md-font-size);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
     color: var(--openbitfun-color-content-primary);
-    line-height: var(--openbitfun-type-body-sm-line-height);
-    font-family: var(--openbitfun-type-body-sm-font-family);
-    word-break: break-word;
+    line-height: var(--openbitfun-type-label-md-line-height);
+    overflow-wrap: anywhere;
   }
 
   &__selected-model-unsaved {
-    display: inline-flex;
     flex-shrink: 0;
-    align-items: center;
-    min-height: 18px;
-    padding: 1px 6px;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-status-warning-content) 28%, transparent);
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 9%, transparent);
-    color: var(--openbitfun-color-status-warning-content);
-    font-size: var(--openbitfun-type-meta-font-size);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
-    line-height: var(--openbitfun-type-modifier-leading-none-line-height);
-    white-space: nowrap;
   }
 
   &__selected-model-summary {
@@ -1330,33 +1292,18 @@
 
   &__selected-model-grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: var(--openbitfun-space-2);
-    padding-top: var(--openbitfun-space-2);
-    border-top: 1px dashed var(--openbitfun-color-border-subtle);
-
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--openbitfun-space-4);
+    padding: var(--openbitfun-space-4);
+    border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
   }
 
   &__selected-model-field {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: var(--openbitfun-space-2);
     min-width: 0;
+    align-content: start;
 
-    > span {
-      font-size: var(--openbitfun-type-meta-font-size);
-      color: var(--openbitfun-color-content-secondary);
-      white-space: nowrap;
-      text-align: left;
-      line-height: var(--openbitfun-type-modifier-leading-snug-line-height);
-    }
-
-    > .openbitfun-model-settings__selected-model-category-select,
-    > .openbitfun-model-settings__selected-model-context-input {
-      width: 100%;
-      min-width: 0;
+    [data-openbitfun-part='label-row'] {
+      min-height: var(--openbitfun-space-6);
     }
   }
 
@@ -1364,28 +1311,25 @@
     grid-column: 1 / -1;
     display: flex;
     align-items: center;
-    gap: var(--openbitfun-space-2);
+    gap: var(--openbitfun-space-3);
     min-width: 0;
-    min-height: 44px;
-    padding: var(--openbitfun-space-2) var(--openbitfun-space-3);
-    border: 1px solid var(--openbitfun-color-border-subtle);
-    border-radius: var(--openbitfun-radius-lg);
-    background: var(--openbitfun-color-surface-tertiary);
-    color: inherit;
+    padding: var(--openbitfun-space-3) 0 0;
+    border: 0;
+    border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    border-radius: 0;
+    background: transparent;
+    color: var(--openbitfun-color-content-primary);
+    font: inherit;
     text-align: left;
     cursor: pointer;
-    transition:
-      border-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard),
-      background-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard);
 
-    &:hover {
-      border-color: var(--openbitfun-color-border-default);
-      background: var(--openbitfun-color-action-neutral-surface-hover);
+    &:hover .openbitfun-model-settings__reasoning-summary-action {
+      color: var(--openbitfun-color-accent-default);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--openbitfun-color-accent-default);
-      outline-offset: 2px;
+      outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
+      outline-offset: var(--openbitfun-focus-offset);
     }
   }
 
@@ -1393,37 +1337,28 @@
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 999px;
-    background: var(--openbitfun-color-action-neutral-surface-hover);
     color: var(--openbitfun-color-content-secondary);
   }
 
   &__reasoning-summary-content {
     display: flex;
-    flex: 1 1 auto;
+    flex: 1;
     flex-direction: column;
-    gap: 2px;
+    gap: var(--openbitfun-space-1);
     min-width: 0;
-
-    strong,
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+    overflow-wrap: anywhere;
 
     strong {
       color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-sm-font-weight);
+      font-size: var(--openbitfun-type-label-md-font-size);
+      font-weight: var(--openbitfun-type-label-selected-font-weight);
+      line-height: var(--openbitfun-type-label-md-line-height);
     }
 
     span {
       color: var(--openbitfun-color-content-muted);
-      font-size: var(--openbitfun-type-meta-font-size);
+      font-size: var(--openbitfun-type-label-sm-font-size);
+      line-height: var(--openbitfun-type-body-sm-line-height);
     }
   }
 
@@ -1433,6 +1368,18 @@
     font-size: var(--openbitfun-type-label-sm-font-size);
   }
 
+  &__model-fetch-hint {
+    &:not(.openbitfun-model-settings__json-status--error) {
+      color: var(--openbitfun-color-content-muted);
+    }
+    font-size: var(--openbitfun-type-label-sm-font-size);
+    line-height: var(--openbitfun-type-body-sm-line-height);
+  }
+
+  &__model-selection-row > .openbitfun-config-page-row__control > .openbitfun-model-settings__control-stack {
+    gap: var(--openbitfun-space-3);
+  }
+
   &__resolved-url {
     display: flex;
     flex-direction: column;
@@ -1463,7 +1410,8 @@
   &__form--modal {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
   }
 
@@ -1471,13 +1419,15 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow-x: hidden;
-    padding-left: var(--openbitfun-space-6);
-    padding-right: calc(var(--openbitfun-space-6) + 4px);
-    padding-bottom: var(--openbitfun-overlay-dialog-footer-content-inset);
-    scroll-padding-bottom: var(--openbitfun-overlay-dialog-footer-content-inset);
+    padding: var(--openbitfun-space-5) var(--openbitfun-space-6);
+    scroll-padding-block: var(--openbitfun-space-5);
     display: flex;
     flex-direction: column;
     gap: var(--openbitfun-space-6);
+
+    > * {
+      flex-shrink: 0;
+    }
   }
 
   
@@ -1643,10 +1593,9 @@
 
   
   &__provider-selection {
-    max-width: 640px;
     width: 100%;
-    margin: 0 auto;
-    padding: var(--openbitfun-space-4);
+    margin: 0;
+    padding: 0;
   }
 
   &__provider-search {
@@ -1659,8 +1608,9 @@
   &__provider-list {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: var(--openbitfun-radius-sm);
+    border: 0;
+    border-radius: var(--openbitfun-layout-field-group-radius);
+    background: var(--openbitfun-color-surface-tertiary);
     overflow: hidden;
   }
 
@@ -1668,8 +1618,8 @@
     display: flex;
     align-items: center;
     gap: var(--openbitfun-space-2);
-    height: 38px;
-    padding: 0 var(--openbitfun-space-3);
+    min-height: 68px;
+    padding: var(--openbitfun-space-3) var(--openbitfun-space-5);
     border-bottom: 1px solid var(--openbitfun-color-border-subtle);
     transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
@@ -1685,12 +1635,15 @@
   // Spans the row so the whole line is the click target for picking a provider.
   &__provider-select {
     display: flex;
-    align-items: center;
-    gap: var(--openbitfun-space-2);
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: var(--openbitfun-space-1);
     flex: 1;
     min-width: 0;
-    height: 100%;
+    align-self: stretch;
     padding: 0;
+    font: inherit;
     background: transparent;
     border: none;
     text-align: start;
@@ -1714,9 +1667,8 @@
     min-width: 0;
     font-size: var(--openbitfun-type-label-sm-font-size);
     color: var(--openbitfun-color-content-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
 
   &__provider-chevron {
@@ -1736,9 +1688,10 @@
     align-items: center;
     justify-content: center;
     gap: var(--openbitfun-space-1);
-    height: 34px;
+    min-height: 40px;
+    font-family: inherit;
     padding: 0 var(--openbitfun-space-3);
-    background: var(--openbitfun-color-surface-subtle);
+    background: transparent;
     border: none;
     border-top: 1px solid var(--openbitfun-color-border-subtle);
     font-size: var(--openbitfun-type-label-sm-font-size);
@@ -1778,38 +1731,37 @@
   }
 
   &__selection-divider {
-    display: flex;
-    align-items: center;
-    gap: var(--openbitfun-space-3);
-    margin: var(--openbitfun-space-4) 0 var(--openbitfun-space-3);
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-
-    &::before,
-    &::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: var(--openbitfun-color-border-default);
-    }
+    margin: var(--openbitfun-space-6) 0 var(--openbitfun-space-4);
+    color: var(--openbitfun-color-content-primary);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
   }
 
   &__custom-option {
+    display: block;
+    width: 100%;
+    padding: var(--openbitfun-space-4) var(--openbitfun-space-5);
+    border: 0;
+    border-radius: var(--openbitfun-layout-field-group-radius);
+    background: var(--openbitfun-color-surface-tertiary);
+    color: var(--openbitfun-color-content-secondary);
+    font: inherit;
+    text-align: left;
     cursor: pointer;
-    transition:
-      background-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard),
-      border-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard),
-      box-shadow var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard),
-      color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard);
-    border: 1px dashed var(--openbitfun-color-border-default);
+    transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
     &:hover {
-      border-color: var(--openbitfun-color-accent-default);
-      border-style: solid;
-      background: var(--openbitfun-color-surface-subtle);
+      background: var(--openbitfun-color-action-neutral-surface-hover);
     }
   }
 
+  &__custom-option:focus-visible,
+  &__provider-select:focus-visible,
+  &__provider-more:focus-visible {
+    outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
+    outline-offset: calc(-1 * var(--openbitfun-focus-width));
+  }
+
   &__custom-option-content {
     display: flex;
     align-items: center;
@@ -1841,14 +1793,13 @@
   &__custom-option-description {
     font-size: var(--openbitfun-type-label-sm-font-size);
     color: var(--openbitfun-color-content-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
 
   &__selection-actions {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     margin-top: var(--openbitfun-space-4);
   }
 
@@ -2278,3 +2229,34 @@
     }
   }
 }
+
+@container config-panel (max-width: 520px) {
+  .openbitfun-model-settings__provider-row {
+    flex-wrap: wrap;
+  }
+
+  .openbitfun-model-settings__provider-help-link {
+    font-size: var(--openbitfun-type-micro-font-size);
+  }
+}
+
+@media (max-width: 640px) {
+  .openbitfun-model-settings__form--modal .openbitfun-model-settings__edit-section {
+    .openbitfun-config-page-row:not(.openbitfun-config-page-row--multiline):not(.openbitfun-model-settings__toggle-row),
+    .openbitfun-config-page-row--multiline.openbitfun-config-page-row--wide {
+      grid-template-columns: minmax(0, 1fr) !important;
+    }
+
+    .openbitfun-config-page-row__control,
+    .openbitfun-config-page-row--multiline.openbitfun-config-page-row--wide .openbitfun-config-page-row__control {
+      grid-column: 1;
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .openbitfun-model-settings__selected-model-grid,
+  .openbitfun-model-settings__manual-model-entry {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
index 746e977963..bae703cf33 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
-  Card,
+  Field,
+  StatusPill,
   Combobox,
   Icon,
   IconButton,
@@ -802,7 +803,8 @@ const ModelSettingsPage: React.FC = () => {
         return createModelDraft(modelName, draftBaseConfig, {
           configId: pinnedRowId,
           contextWindow: catalogModel?.limits?.context,
-          category: catalogModel?.capabilities.attachment ? 'multimodal' : undefined,
+          // New selections start as multimodal; existing model edits retain their category.
+          category: pinnedRowId ? (baseConfig?.category ?? 'general_chat') : 'multimodal',
         });
       })
     );
@@ -1102,8 +1104,8 @@ const ModelSettingsPage: React.FC = () => {
         model_name: '',
         enabled: true,
         context_window: 200000,
-        category: 'general_chat',
-        capabilities: ['text_chat', 'function_calling'],
+        category: 'multimodal',
+        capabilities: getCapabilitiesByCategory('multimodal'),
         recommended_for: [],
         metadata: {},
         inline_think_in_text: true,
@@ -1453,33 +1455,24 @@ const ModelSettingsPage: React.FC = () => {
     
     // Dynamically get translated name
     const providerName = t(`providers.${template.id}.name`);
-    const defaultModel = template.models[0] || '';
     
     setEditingConfig({
       name: providerName,
       base_url: template.baseUrl,
-      request_url: resolveRequestUrl(
-        template.baseUrl,
-        template.format,
-        defaultModel
-      ),
+      request_url: '',
       api_key: '',
-      model_name: defaultModel,
+      model_name: '',
       provider: template.format,
       enabled: true,
       context_window: 200000,
-      category: 'general_chat',
-      capabilities: ['text_chat', 'function_calling'],
+      category: 'multimodal',
+      capabilities: getCapabilitiesByCategory('multimodal'),
       recommended_for: [],
       metadata: {},
       inline_think_in_text: true,
     });
-    setSelectedModelDrafts(
-      defaultModel ? [createModelDraft(defaultModel, {
-        context_window: 200000,
-        reasoning: { catalog: { source: 'auto' }, presets: [] },
-      })] : []
-    );
+    // Provider templates supply available choices, never an implicit selection.
+    setSelectedModelDrafts([]);
     setEditingProviderModelIds(new Set());
     setShowAdvancedSettings(false);
     setCreationMode('form');
@@ -1503,8 +1496,8 @@ const ModelSettingsPage: React.FC = () => {
       provider: 'openai',  
       enabled: true,
       context_window: 200000,
-      category: 'general_chat',
-      capabilities: ['text_chat'],
+      category: 'multimodal',
+      capabilities: getCapabilitiesByCategory('multimodal'),
       recommended_for: [],
       metadata: {},
       inline_think_in_text: true,
@@ -2204,11 +2197,10 @@ const ModelSettingsPage: React.FC = () => {
         <ConfigPageContent className="openbitfun-model-settings__content openbitfun-model-settings__content--selection">
           <div className="openbitfun-model-settings__provider-selection" data-openbitfun-component="model-settings" data-openbitfun-part="providerSelection">
             
-            <Card
+            <button
+              type="button"
               data-testid="settings-model-custom-config-btn"
               data-provider-id="custom"
-              appearance="neutral"
-              padding="sm"
               className="openbitfun-model-settings__custom-option"
               onClick={handleSelectCustom}
             >
@@ -2219,7 +2211,7 @@ const ModelSettingsPage: React.FC = () => {
                   <div className="openbitfun-model-settings__custom-option-description" data-openbitfun-component="model-settings" data-openbitfun-part="customOptionDescription">{t('providerSelection.customDescription')}</div>
                 </div>
               </div>
-            </Card>
+            </button>
 
             
             <div className="openbitfun-model-settings__selection-divider" data-openbitfun-component="model-settings" data-openbitfun-part="selectionDivider">
@@ -2316,7 +2308,7 @@ const ModelSettingsPage: React.FC = () => {
 
 
             <div className="openbitfun-model-settings__selection-actions" data-openbitfun-component="model-settings" data-openbitfun-part="selectionActions">
-              <Button variant="outline" onClick={() => setCreationMode(null)}>
+              <Button variant="outline" size="sm" onClick={() => setCreationMode(null)}>
                 {t('actions.cancel')}
               </Button>
             </div>
@@ -2520,19 +2512,22 @@ const ModelSettingsPage: React.FC = () => {
                 >
                   <div className="openbitfun-model-settings__selected-model-head-title">
                     <div className="openbitfun-model-settings__selected-model-head-top">
-                      <div className="openbitfun-model-settings__selected-model-toggle">
-                        {isExpanded ? <Icon name="chevron-down" size="sm" /> : <Icon name="chevron-right" size="sm" />}
-                      </div>
+                      {canToggleExpand && (
+                        <div className="openbitfun-model-settings__selected-model-toggle">
+                          {isExpanded ? <Icon name="chevron-down" size="sm" /> : <Icon name="chevron-right" size="sm" />}
+                        </div>
+                      )}
                       <div className="openbitfun-model-settings__selected-model-name">{modelDisplayName}</div>
                       {hasUnsavedChanges && (
-                        <span
+                        <StatusPill
+                          tone="warning"
                           className="openbitfun-model-settings__selected-model-unsaved"
                           title={t('providerSelection.unsavedModelHint')}
                           aria-label={t('providerSelection.unsavedModelHint')}
                           data-testid="settings-model-unsaved-badge"
                         >
                           {t('providerSelection.unsavedModel')}
-                        </span>
+                        </StatusPill>
                       )}
                     </div>
                     {!editingConfig.id && (
@@ -2567,8 +2562,7 @@ const ModelSettingsPage: React.FC = () => {
                 </div>
                 {isExpanded && (
                   <div className="openbitfun-model-settings__selected-model-grid">
-                    <div className="openbitfun-model-settings__selected-model-field">
-                      <span>{t('category.label')}</span>
+                    <Field className="openbitfun-model-settings__selected-model-field" label={t('category.label')} controlWidth="fill">
                       <Combobox
                         value={draft.category}
                         onValueChange={(value) => updateModelDraft(draft.modelName, { category: value as ModelCategory })}
@@ -2576,21 +2570,22 @@ const ModelSettingsPage: React.FC = () => {
                         size="sm"
                         className="openbitfun-model-settings__selected-model-category-select"
                       />
-                    </div>
-                    <div className="openbitfun-model-settings__selected-model-field">
-                      <span className="openbitfun-model-settings__inline-header-main">
-                        <span>{t('form.contextWindow')}</span>
+                    </Field>
+                    <Field
+                      className="openbitfun-model-settings__selected-model-field"
+                      label={t('form.contextWindow')}
+                      controlWidth="fill"
+                      labelAction={(
                         <Tooltip content={t('form.contextWindowHint')} placement="top">
-                          <span
-                            className="openbitfun-model-settings__inline-header-info"
-                            role="button"
-                            tabIndex={0}
+                          <IconButton
+                            size="xs"
+                            variant="quiet"
                             aria-label={t('form.contextWindowHint')}
-                          >
-                            <Icon name="info" size="sm" aria-hidden="true" />
-                          </span>
+                            icon={<Icon name="info" size="sm" />}
+                          />
                         </Tooltip>
-                      </span>
+                      )}
+                    >
                       <NumberInput
                         className="openbitfun-model-settings__selected-model-context-input"
                         value={draft.contextWindow}
@@ -2601,7 +2596,7 @@ const ModelSettingsPage: React.FC = () => {
                         size="sm"
                         disableWheel
                       />
-                    </div>
+                    </Field>
                     {draft.contextWindow > LONG_CONTEXT_WARNING_THRESHOLD_TOKENS && (
                       <div className="openbitfun-model-settings__warning-inline openbitfun-model-settings__context-window-warning">
                         <AlertTriangle size={14} />
@@ -2788,7 +2783,7 @@ const ModelSettingsPage: React.FC = () => {
                           }));
                         }}
                         placeholder={t('form.baseUrl')}
-                        options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.url, value: opt.url, description: `${opt.format.toUpperCase()} · ${opt.note}` }))}
+                        options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.note || opt.url, value: opt.url, description: `${opt.format.toUpperCase()} · ${opt.url}` }))}
                         size="sm"
                       />
                     )}
@@ -2810,13 +2805,8 @@ const ModelSettingsPage: React.FC = () => {
                     />
                     {editingConfig.base_url && (
                       <div className="openbitfun-model-settings__resolved-url">
-                        <Input
-                          value={previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai')}
-                          readOnly
-                          onFocus={(e) => e.target.select()}
-                          className="openbitfun-model-settings__resolved-url-input"
-                          size="sm"
-                        />
+                        <span className="openbitfun-model-settings__resolved-url-label">{t('form.resolvedUrlLabel')}</span>
+                          <span className="openbitfun-model-settings__resolved-url-value">{previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai')}</span>
                       </div>
                     )}
                   </div>
@@ -2839,7 +2829,7 @@ const ModelSettingsPage: React.FC = () => {
                     size="sm"
                   />
                 </ConfigPageRow>
-                <ConfigPageRow label={t('form.modelSelection')} required wide multiline>
+                <ConfigPageRow label={t('form.modelSelection')} required multiline className="openbitfun-model-settings__model-selection-row">
                   <div className="openbitfun-model-settings__control-stack">
                     <div className="openbitfun-model-settings__model-picker-row">
                       <MultiSelect
@@ -2872,12 +2862,12 @@ const ModelSettingsPage: React.FC = () => {
                         placeholder={t('providerSelection.inputModelName')}
                         size="sm"
                       />
-                      <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="secondary" size="sm" onClick={addManualModelDraft}>
+                      <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="outline" size="sm" onClick={addManualModelDraft}>
                         {t('providerSelection.addCustomModel')}
                       </Button>
                     </div>
                     {modelFetchHint && (
-                      <small className={`resolved-url__hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
+                      <small className={`resolved-url__hint openbitfun-model-settings__model-fetch-hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
                         {modelFetchHint}
                       </small>
                     )}
@@ -2922,13 +2912,8 @@ const ModelSettingsPage: React.FC = () => {
                         />
                         {editingConfig.base_url && (
                           <div className="openbitfun-model-settings__resolved-url">
-                            <Input
-                              value={previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai')}
-                              readOnly
-                              onFocus={(e) => e.target.select()}
-                              className="openbitfun-model-settings__resolved-url-input"
-                              size="sm"
-                            />
+                            <span className="openbitfun-model-settings__resolved-url-label">{t('form.resolvedUrlLabel')}</span>
+                          <span className="openbitfun-model-settings__resolved-url-value">{previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai')}</span>
                           </div>
                         )}
                       </div>
@@ -2951,7 +2936,7 @@ const ModelSettingsPage: React.FC = () => {
 
             {!isFromTemplate && (
               <>
-                <ConfigPageRow label={t('form.modelSelection')} required wide multiline>
+                <ConfigPageRow label={t('form.modelSelection')} required multiline className="openbitfun-model-settings__model-selection-row">
                   <div className="openbitfun-model-settings__control-stack">
                     <div className="openbitfun-model-settings__model-picker-row">
                       {editingConfig.id ? (
@@ -3000,12 +2985,12 @@ const ModelSettingsPage: React.FC = () => {
                         placeholder={t('providerSelection.inputModelName')}
                         size="sm"
                       />
-                      <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="secondary" size="sm" onClick={addManualModelDraft}>
+                      <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="outline" size="sm" onClick={addManualModelDraft}>
                         {t('providerSelection.addCustomModel')}
                       </Button>
                     </div>
                     {modelFetchHint && (
-                      <small className={`resolved-url__hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
+                      <small className={`resolved-url__hint openbitfun-model-settings__model-fetch-hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
                         {modelFetchHint}
                       </small>
                     )}
@@ -4155,13 +4140,14 @@ const ModelSettingsPage: React.FC = () => {
         ) : renderEditingForm()}
               </DialogBody>
         {!reasoningPanelDraft && (
-          <DialogFooter appearance="floating">
-            <Button variant="secondary" onClick={requestCloseEditingModal} disabled={isEditorSaving}>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={requestCloseEditingModal} disabled={isEditorSaving}>
               {t('actions.cancel')}
             </Button>
             <Button
               data-testid="settings-model-save-btn"
-              variant="primary"
+              variant="fill"
+              size="sm"
               onClick={() => void handleSave()}
               loading={isEditorSaving}
             >