diff --git a/assets/style.css b/assets/style.css
index a5a21f6..025e50c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,11 +1,15 @@
-body {
+:root {
   --background-color: white;
+  --background-color-menu: #ddd;
+}
+
+body {
   background-color: var(--background-color);
 }
 
 .header {
   display: flex;
-  align-items: center;
+  align-items: stretch;
 }
 
 .header h1 {
@@ -14,24 +18,70 @@ body {
 }
 
 .header h1 input {
-  appearance: none;
   border: none;
   font-size: inherit;
 }
 
+.header div {
+  height: auto;
+  position: relative;
+}
+.header button {
+  height: 100%;
+  border: none;
+  background-color: transparent;
+}
+.header button[aria-expanded="true"] {
+  background-color: var(--background-color-menu);
+  border-top-left-radius: 0.25em;
+  border-top-right-radius: 0.25em;
+}
+
 [role="menu"] {
   display: none;
+
+  position: absolute;
+  right: 0;
+  width: max-content;
+
+  margin: 0;
+  list-style-type: none;
+  padding: 0.25em;
+
+  background-color: var(--background-color-menu);
+  border-radius: 0.5em;
+  border-top-right-radius: 0;
 }
 
 [role="menu"].open {
   display: block;
 }
 
-button[aria-disabled="true"] {
+[role^="menuitem" i]:not([aria-disabled="true"]):hover {
+  background-color: oklch(from var(--background-color-menu) calc(l * 90%) c h);
+}
+
+[role="menu"] [role="group"] {
+  list-style-type: none;
+  padding-inline-start: 1.5em;
+}
+
+[role="menuitemradio"][aria-checked="true"],
+[role="menuitemcheckbox"][aria-checked="true"] {
+  list-style-type: "✓";
+}
+
+[role^="menuitem"][aria-disabled="true"] {
   color: grey;
   /* FIXME: still has hover state */
 }
 
+[role="menu"] [role="separator"] {
+  height: 1px;
+  background-color: grey;
+  margin: 0.25lh 0.25em;
+}
+
 .tabs {
   --border-color: #888;
   --border-selected-width: 2px;
diff --git a/gleam.toml b/gleam.toml
index 4a3ddbd..d6cc92a 100644
--- a/gleam.toml
+++ b/gleam.toml
@@ -28,3 +28,6 @@ source_maps = true
 
 [tools.lustre.html]
 stylesheets = [{ href = "/style.css" }]
+
+[tools.lustre.dev]
+watch_mode = "polling"
diff --git a/src/bag_of_holding.gleam b/src/bag_of_holding.gleam
index c93d82b..15d6a27 100644
--- a/src/bag_of_holding.gleam
+++ b/src/bag_of_holding.gleam
@@ -336,6 +336,7 @@ fn loaded_view(model: LoadedModel) -> Element(Message) {
               _ -> Error(Nil)
             },
           ),
+          menu.separator(),
           menu.radio(
             label: "Inventories",
             on_select: fn(selected_inventory) {
diff --git a/src/bag_of_holding/ui/menu.gleam b/src/bag_of_holding/ui/menu.gleam
index 492a299..677b29f 100644
--- a/src/bag_of_holding/ui/menu.gleam
+++ b/src/bag_of_holding/ui/menu.gleam
@@ -92,6 +92,14 @@ pub fn radio(
   Radio(label:, options:, on_select:)
 }
 
+pub fn group(label: String, items: List(Item(message))) -> Item(message) {
+  Group(label:, items:)
+}
+
+pub fn separator() -> Item(message) {
+  Separator
+}
+
 fn item_elem(item: Item(message)) -> Element(message) {
   case item {
     Button(label:, on_click:, tabindex:) ->
@@ -134,7 +142,7 @@ fn item_elem(item: Item(message)) -> Element(message) {
             let RadioItem(label:, value:, checked:, disabled:) = radio_item
             html.li(
               [
-                attribute.role("menuitemcheckbox"),
+                attribute.role("menuitemradio"),
                 attribute.aria_checked(case checked {
                   True -> "true"
                   False -> "false"