diff --git a/AGENTS.md b/AGENTS.md
index eb8087f..3fe2e79 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -100,11 +100,6 @@ Complete the following:
 
 Tasks to be considered in the future, not implemented immediately. Keep them in scope when making decisions.
 
-- [ ] Consider a light mode/dark mode toggle while retaining core theme, preferably without adding a Skin
-- [ ] Un-bold "topics" and "posts" and make the color lines replace the black line drived from category background color to either use the foreground color of the icon, or an ornate gilding like the icons (image 2)
-- [ ] Consider making the category names a bit smoother; it looks like it's not anti-aliased. (image 3)
-- [ ] Mobile website doesn't use the correct fonts.
-
 - [-] Implement curated game-icons support for category/subcategory icons: sanitize selected SVGs into mask-friendly theme assets, expose them through `staticDirs`, add reusable `wg-icon-*` CSS mask classes, and include category custom classes in the local category/subcategory templates if Harmony data supports them.
   - [x] Phase 1: Build our icon stack.
     - [x] Recommend icons from the game-icons pack for forum categories and their subcategories. See `GAME_ICONS.md`.
diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss
index bcb234b..27a39fd 100644
--- a/scss/westgate/_categories.scss
+++ b/scss/westgate/_categories.scss
@@ -108,20 +108,23 @@ $wg-game-icons: (
 
 .westgate-category-header-icon[class*="wg-icon-"] > .icon,
 li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon,
-.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon {
+.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon,
+.category-item[class*="wg-icon-"] > .icon {
 	position: relative;
 	color: var(--wg-ledger-ink);
 }
 
 .westgate-category-header-icon[class*="wg-icon-"] > .icon > i,
 li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon > i,
-.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i {
+.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i,
+.category-item[class*="wg-icon-"] > .icon > i {
 	opacity: 0;
 }
 
 .westgate-category-header-icon[class*="wg-icon-"] > .icon::before,
 li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon::before,
-.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before {
+.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before,
+.category-item[class*="wg-icon-"] > .icon::before {
 	content: "";
 	position: absolute;
 	inset: 13%;
@@ -143,10 +146,15 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-
 	inset: 16%;
 }
 
+.category-item[class*="wg-icon-"] > .icon::before {
+	inset: 18%;
+}
+
 @each $name, $file in $wg-game-icons {
 	.westgate-category-header-icon.wg-icon-#{$name} > .icon::before,
 	li[component="categories/category"].wg-icon-#{$name} > .d-flex > .flex-shrink-0 > .icon::before,
-	.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before {
+	.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before,
+	.category-item.wg-icon-#{$name} > .icon::before {
 		-webkit-mask-image: url("#{$wg-game-icon-path}#{$file}");
 		mask-image: url("#{$wg-game-icon-path}#{$file}");
 	}
diff --git a/templates/partials/category/selector-dropdown-content.tpl b/templates/partials/category/selector-dropdown-content.tpl
new file mode 100644
index 0000000..73bb87f
--- /dev/null
+++ b/templates/partials/category/selector-dropdown-content.tpl
@@ -0,0 +1,39 @@
+<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span component="category-selector-selected" class="fw-semibold">
+        {{{ if (selectedCategory && !showCategorySelectLabel) }}}
+        <span class="category-item d-inline-flex align-items-center gap-1 {{{ if selectedCategory.class }}}{selectedCategory.class}{{{ end }}}">
+            {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
+            <span class="category-name">{selectedCategory.name}</span>
+        </span>
+        {{{ else }}}
+        <i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}} text-primary"></i>
+        <span class="d-none d-md-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span>
+        {{{ end }}}
+    </span>
+</button>
+
+<div class="dropdown-menu p-1">
+    <div component="category-selector-search" class="p-1 hidden">
+        <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
+    </div>
+    <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+        <li component="category/no-matches" role="presentation" class="category hidden">
+            <a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
+        </li>
+        {{{ each categoryItems }}}
+        <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}{{{ if ./class }}} {./class}{{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
+            <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
+                <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                    <span class="category-item d-inline-flex align-items-center gap-1 {{{ if ./class }}}{./class}{{{ end }}}">
+                        {{{ if ./icon }}}
+                        {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                        {{{ end }}}
+                        <span class="category-name">{./name}</span>
+                    </span>
+                </span>
+            </a>
+        </li>
+        {{{ end }}}
+    </ul>
+</div>