diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts
new file mode 100644
index 0000000000000000000000000000000000000000..39c1adb5e506065207f52d82e919e1aaf55a9bd9
--- /dev/null
+++ b/styles/src/component/icon_button.ts
@@ -0,0 +1,86 @@
+import { ColorScheme } from "../common"
+import { interactive, toggleable } from "../element"
+import { background, foreground } from "../styleTree/components"
+
+export type Margin = {
+    top: number
+    bottom: number
+    left: number
+    right: number
+}
+
+interface IconButtonOptions {
+    layer?:
+        | ColorScheme["lowest"]
+        | ColorScheme["middle"]
+        | ColorScheme["highest"]
+    color?: keyof ColorScheme["lowest"]
+    margin?: Partial<Margin>
+}
+
+type ToggleableIconButtonOptions = IconButtonOptions & {
+    active_color?: keyof ColorScheme["lowest"]
+}
+
+export function icon_button(
+    theme: ColorScheme,
+    { color, margin, layer }: IconButtonOptions
+) {
+    if (!color) color = "base"
+
+    const m = {
+        top: margin?.top ?? 0,
+        bottom: margin?.bottom ?? 0,
+        left: margin?.left ?? 0,
+        right: margin?.right ?? 0,
+    }
+
+    return interactive({
+        base: {
+            corner_radius: 6,
+            padding: {
+                top: 2,
+                bottom: 2,
+                left: 4,
+                right: 4,
+            },
+            margin: m,
+            icon_width: 14,
+            icon_height: 14,
+            button_width: 20,
+            button_height: 16,
+        },
+        state: {
+            default: {
+                background: background(layer ?? theme.lowest, color),
+                color: foreground(layer ?? theme.lowest, color),
+            },
+            hovered: {
+                background: background(layer ?? theme.lowest, color, "hovered"),
+                color: foreground(layer ?? theme.lowest, color, "hovered"),
+            },
+            clicked: {
+                background: background(layer ?? theme.lowest, color, "pressed"),
+                color: foreground(layer ?? theme.lowest, color, "pressed"),
+            },
+        },
+    })
+}
+
+export function toggleable_icon_button(
+    theme: ColorScheme,
+    { color, active_color, margin }: ToggleableIconButtonOptions
+) {
+    if (!color) color = "base"
+
+    return toggleable({
+        state: {
+            inactive: icon_button(theme, { color, margin }),
+            active: icon_button(theme, {
+                color: active_color ? active_color : color,
+                margin,
+                layer: theme.middle,
+            }),
+        },
+    })
+}
diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8a2272cd340c7785ce172600900e8b2889bc787
--- /dev/null
+++ b/styles/src/component/text_button.ts
@@ -0,0 +1,90 @@
+import { ColorScheme } from "../common"
+import { interactive, toggleable } from "../element"
+import {
+    TextProperties,
+    background,
+    foreground,
+    text,
+} from "../styleTree/components"
+import { Margin } from "./icon_button"
+
+interface TextButtonOptions {
+    layer?:
+        | ColorScheme["lowest"]
+        | ColorScheme["middle"]
+        | ColorScheme["highest"]
+    color?: keyof ColorScheme["lowest"]
+    margin?: Partial<Margin>
+    text_properties?: TextProperties
+}
+
+type ToggleableTextButtonOptions = TextButtonOptions & {
+    active_color?: keyof ColorScheme["lowest"]
+}
+
+export function text_button(
+    theme: ColorScheme,
+    { color, layer, margin, text_properties }: TextButtonOptions
+) {
+    if (!color) color = "base"
+
+    const text_options: TextProperties = {
+        size: "xs",
+        weight: "normal",
+        ...text_properties,
+    }
+
+    const m = {
+        top: margin?.top ?? 0,
+        bottom: margin?.bottom ?? 0,
+        left: margin?.left ?? 0,
+        right: margin?.right ?? 0,
+    }
+
+    return interactive({
+        base: {
+            corner_radius: 6,
+            padding: {
+                top: 1,
+                bottom: 1,
+                left: 6,
+                right: 6,
+            },
+            margin: m,
+            button_height: 22,
+            ...text(layer ?? theme.lowest, "sans", color, text_options),
+        },
+        state: {
+            default: {
+                background: background(layer ?? theme.lowest, color),
+                color: foreground(layer ?? theme.lowest, color),
+            },
+            hovered: {
+                background: background(layer ?? theme.lowest, color, "hovered"),
+                color: foreground(layer ?? theme.lowest, color, "hovered"),
+            },
+            clicked: {
+                background: background(layer ?? theme.lowest, color, "pressed"),
+                color: foreground(layer ?? theme.lowest, color, "pressed"),
+            },
+        },
+    })
+}
+
+export function toggleable_text_button(
+    theme: ColorScheme,
+    { color, active_color, margin }: ToggleableTextButtonOptions
+) {
+    if (!color) color = "base"
+
+    return toggleable({
+        state: {
+            inactive: text_button(theme, { color, margin }),
+            active: text_button(theme, {
+                color: active_color ? active_color : color,
+                margin,
+                layer: theme.middle,
+            }),
+        },
+    })
+}
diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts
index 1c0f393cff5041e27fb4e295b4ead5f1a2c43c75..d174d3fd4d56adf7e15c0bae332a26f1ab98244b 100644
--- a/styles/src/element/interactive.ts
+++ b/styles/src/element/interactive.ts
@@ -1,7 +1,7 @@
 import merge from "ts-deepmerge"
 import { DeepPartial } from "utility-types"
 
-type InteractiveState =
+export type InteractiveState =
     | "default"
     | "hovered"
     | "clicked"
diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts
index b6e97303f24f7f3006d97a0db372e58103527567..30e109df1a8e092cc71d1af2e8b762ab68dc8e43 100644
--- a/styles/src/styleTree/assistant.ts
+++ b/styles/src/styleTree/assistant.ts
@@ -26,15 +26,15 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 12, right: 8.5 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         splitButton: interactive({
             base: {
@@ -48,15 +48,15 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 8.5, right: 8.5 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         quoteButton: interactive({
             base: {
@@ -70,15 +70,15 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 8.5, right: 8.5 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         assistButton: interactive({
             base: {
@@ -92,15 +92,15 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 8.5, right: 8.5 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         zoomInButton: interactive({
             base: {
@@ -114,15 +114,15 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 10, right: 10 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         zoomOutButton: interactive({
             base: {
@@ -136,15 +136,15 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 10, right: 10 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         plusButton: interactive({
             base: {
@@ -158,29 +158,29 @@ export default function assistant(colorScheme: ColorScheme) {
                 },
                 container: {
                     padding: { left: 10, right: 10 },
-                }
+                },
             },
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered")
-                    }
-                }
-            }
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
         }),
         title: {
-            ...text(layer, "sans", "default", { size: "sm" })
+            ...text(layer, "sans", "default", { size: "sm" }),
         },
         savedConversation: {
             container: interactive({
                 base: {
                     background: background(layer, "on"),
-                    padding: { top: 4, bottom: 4 }
+                    padding: { top: 4, bottom: 4 },
                 },
                 state: {
                     hovered: {
                         background: background(layer, "on", "hovered"),
-                    }
+                    },
                 },
             }),
             savedAt: {
@@ -189,8 +189,11 @@ export default function assistant(colorScheme: ColorScheme) {
             },
             title: {
                 margin: { left: 16 },
-                ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
-            }
+                ...text(layer, "sans", "default", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         userSender: {
             default: {
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index bfd1f75cb07eae0e805eeb6632fdcb92a3f8354d..3b6f26066bffc26d2d4451adaecd985ef41560ff 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -93,6 +93,14 @@ interface Text extends Object {
     underline?: boolean
 }
 
+export interface TextStyle extends Object {
+    family: keyof typeof fontFamilies
+    color: string
+    size: number
+    weight?: FontWeight
+    underline?: boolean
+}
+
 export interface TextProperties {
     size?: keyof typeof fontSizes
     weight?: FontWeight
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 6bec9512883976e60d110d80d3feba294260ae04..3727c1916cb9cd1929de316a6c81f000468b56c5 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,73 +1,116 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
-import { background, border, foreground, text } from "./components"
+import {
+    Border,
+    TextStyle,
+    background,
+    border,
+    foreground,
+    text,
+} from "./components"
 import { interactive, toggleable } from "../element"
+import merge from "ts-deepmerge"
 export default function projectPanel(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
 
     let layer = colorScheme.middle
 
-    let baseEntry = {
-        height: 22,
-        iconColor: foreground(layer, "variant"),
-        iconSize: 7,
-        iconSpacing: 5,
+    type EntryStateProps = {
+        background?: string
+        border?: Border
+        text?: TextStyle
+        iconColor?: string
     }
 
-    let status = {
-        git: {
-            modified: isLight
-                ? colorScheme.ramps.yellow(0.6).hex()
-                : colorScheme.ramps.yellow(0.5).hex(),
-            inserted: isLight
-                ? colorScheme.ramps.green(0.45).hex()
-                : colorScheme.ramps.green(0.5).hex(),
-            conflict: isLight
-                ? colorScheme.ramps.red(0.6).hex()
-                : colorScheme.ramps.red(0.5).hex(),
-        },
+    type EntryState = {
+        default: EntryStateProps
+        hovered?: EntryStateProps
+        clicked?: EntryStateProps
     }
 
-    const default_entry = interactive({
-        base: {
-            ...baseEntry,
-            text: text(layer, "mono", "variant", { size: "sm" }),
-            status,
-        },
-        state: {
-            default: {
-                background: background(layer),
+    const entry = (unselected?: EntryState, selected?: EntryState) => {
+        const git_status = {
+            git: {
+                modified: isLight
+                    ? colorScheme.ramps.yellow(0.6).hex()
+                    : colorScheme.ramps.yellow(0.5).hex(),
+                inserted: isLight
+                    ? colorScheme.ramps.green(0.45).hex()
+                    : colorScheme.ramps.green(0.5).hex(),
+                conflict: isLight
+                    ? colorScheme.ramps.red(0.6).hex()
+                    : colorScheme.ramps.red(0.5).hex(),
             },
-            hovered: {
-                background: background(layer, "variant", "hovered"),
-            },
-            clicked: {
-                background: background(layer, "variant", "pressed"),
+        }
+
+        const base_properties = {
+            height: 22,
+            background: background(layer),
+            iconColor: foreground(layer, "variant"),
+            iconSize: 7,
+            iconSpacing: 5,
+            text: text(layer, "mono", "variant", { size: "sm" }),
+            status: {
+                ...git_status,
             },
-        },
-    })
+        }
 
-    let entry = toggleable({
-        base: default_entry,
-        state: {
-            active: interactive({
-                base: {
-                    ...default_entry,
-                },
-                state: {
-                    default: {
-                        background: background(colorScheme.lowest),
-                    },
-                    hovered: {
-                        background: background(colorScheme.lowest, "hovered"),
+        const selectedStyle: EntryState | undefined = selected
+            ? selected
+            : unselected
+
+        const unselected_default_style = merge(
+            base_properties,
+            unselected?.default ?? {},
+            {}
+        )
+        const unselected_hovered_style = merge(
+            base_properties,
+            unselected?.hovered ?? {},
+            { background: background(layer, "variant", "hovered") }
+        )
+        const unselected_clicked_style = merge(
+            base_properties,
+            unselected?.clicked ?? {},
+            { background: background(layer, "variant", "pressed") }
+        )
+        const selected_default_style = merge(
+            base_properties,
+            selectedStyle?.default ?? {},
+            { background: background(layer) }
+        )
+        const selected_hovered_style = merge(
+            base_properties,
+            selectedStyle?.hovered ?? {},
+            { background: background(layer, "variant", "hovered") }
+        )
+        const selected_clicked_style = merge(
+            base_properties,
+            selectedStyle?.clicked ?? {},
+            { background: background(layer, "variant", "pressed") }
+        )
+
+        return toggleable({
+            state: {
+                inactive: interactive({
+                    state: {
+                        default: unselected_default_style,
+                        hovered: unselected_hovered_style,
+                        clicked: unselected_clicked_style,
                     },
-                    clicked: {
-                        background: background(colorScheme.lowest, "pressed"),
+                }),
+                active: interactive({
+                    state: {
+                        default: selected_default_style,
+                        hovered: selected_hovered_style,
+                        clicked: selected_clicked_style,
                     },
-                },
-            }),
-        },
-    })
+                }),
+            },
+        })
+    }
+
+    const defaultEntry = entry()
 
     return {
         openProjectButton: interactive({
@@ -104,35 +147,38 @@ export default function projectPanel(colorScheme: ColorScheme) {
         background: background(layer),
         padding: { left: 6, right: 6, top: 0, bottom: 6 },
         indentWidth: 12,
-        entry,
+        entry: defaultEntry,
         draggedEntry: {
-            ...baseEntry,
+            ...defaultEntry.inactive.default,
             text: text(layer, "mono", "on", { size: "sm" }),
             background: withOpacity(background(layer, "on"), 0.9),
             border: border(layer),
-            status,
         },
-        ignoredEntry: {
-            ...entry,
-            iconColor: foreground(layer, "disabled"),
-            text: text(layer, "mono", "disabled"),
-            active: {
-                ...entry.active,
-                iconColor: foreground(layer, "variant"),
+        ignoredEntry: entry(
+            {
+                default: {
+                    text: text(layer, "mono", "disabled"),
+                },
             },
-        },
-        cutEntry: {
-            ...entry,
-            text: text(layer, "mono", "disabled"),
-            active: {
-                ...entry.active,
+            {
+                default: {
+                    iconColor: foreground(layer, "variant"),
+                },
+            }
+        ),
+        cutEntry: entry(
+            {
+                default: {
+                    text: text(layer, "mono", "disabled"),
+                },
+            },
+            {
                 default: {
-                    ...entry.active.default,
                     background: background(layer, "active"),
                     text: text(layer, "mono", "disabled", { size: "sm" }),
                 },
-            },
-        },
+            }
+        ),
         filenameEditor: {
             background: background(layer, "on"),
             text: text(layer, "mono", "on", { size: "sm" }),
diff --git a/styles/src/styleTree/titlebar.ts b/styles/src/styleTree/titlebar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c7318a56e5015ce4f4a9e5b3fb00cd94e2b4ca5
--- /dev/null
+++ b/styles/src/styleTree/titlebar.ts
@@ -0,0 +1,266 @@
+import { ColorScheme } from "../common"
+import { icon_button, toggleable_icon_button } from "../component/icon_button"
+import { toggleable_text_button } from "../component/text_button"
+import { interactive, toggleable } from "../element"
+import { withOpacity } from "../theme/color"
+import { background, border, foreground, text } from "./components"
+
+const ITEM_SPACING = 8
+const TITLEBAR_HEIGHT = 32
+
+function build_spacing(
+    container_height: number,
+    element_height: number,
+    spacing: number
+) {
+    return {
+        group: spacing,
+        item: spacing / 2,
+        half_item: spacing / 4,
+        marginY: (container_height - element_height) / 2,
+        marginX: (container_height - element_height) / 2,
+    }
+}
+
+function call_controls(theme: ColorScheme) {
+    const button_height = 18
+
+    const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
+    const marginY = {
+        top: space.marginY,
+        bottom: space.marginY,
+    }
+
+    return {
+        toggle_microphone_button: toggleable_icon_button(theme, {
+            margin: {
+                ...marginY,
+                left: space.group,
+                right: space.half_item,
+            },
+            active_color: "negative",
+        }),
+
+        toggle_speakers_button: toggleable_icon_button(theme, {
+            margin: {
+                ...marginY,
+                left: space.half_item,
+                right: space.half_item,
+            },
+        }),
+
+        screen_share_button: toggleable_icon_button(theme, {
+            margin: {
+                ...marginY,
+                left: space.half_item,
+                right: space.group,
+            },
+            active_color: "accent",
+        }),
+
+        muted: foreground(theme.lowest, "negative"),
+        speaking: foreground(theme.lowest, "accent"),
+    }
+}
+
+/**
+ * Opens the User Menu when toggled
+ *
+ * When logged in shows the user's avatar and a chevron,
+ * When logged out only shows a chevron.
+ */
+function user_menu(theme: ColorScheme) {
+    const button_height = 18
+
+    const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
+
+    const build_button = ({ online }: { online: boolean }) => {
+        const button = toggleable({
+            base: interactive({
+                base: {
+                    cornerRadius: 6,
+                    height: button_height,
+                    width: online ? 37 : 24,
+                    padding: {
+                        top: 2,
+                        bottom: 2,
+                        left: 6,
+                        right: 6,
+                    },
+                    margin: {
+                        left: space.item,
+                        right: space.item,
+                    },
+                    ...text(theme.lowest, "sans", { size: "xs" }),
+                    background: background(theme.lowest),
+                },
+                state: {
+                    hovered: {
+                        ...text(theme.lowest, "sans", "hovered", {
+                            size: "xs",
+                        }),
+                        background: background(theme.lowest, "hovered"),
+                    },
+                    clicked: {
+                        ...text(theme.lowest, "sans", "pressed", {
+                            size: "xs",
+                        }),
+                        background: background(theme.lowest, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                        background: background(theme.middle),
+                    },
+                    hovered: {
+                        ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                        background: background(theme.middle, "hovered"),
+                    },
+                    clicked: {
+                        ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                        background: background(theme.middle, "pressed"),
+                    },
+                },
+            },
+        })
+
+        return {
+            user_menu: button,
+            avatar: {
+                icon_width: 16,
+                icon_height: 16,
+                corner_radius: 4,
+                outer_width: 16,
+                outer_corner_radius: 16,
+            },
+            icon: {
+                margin: {
+                    top: 2,
+                    left: online ? space.item : 0,
+                    right: space.group,
+                    bottom: 2,
+                },
+                width: 11,
+                height: 11,
+                color: foreground(theme.lowest),
+            },
+        }
+    }
+    return {
+        userMenuButtonOnline: build_button({ online: true }),
+        userMenuButtonOffline: build_button({ online: false }),
+    }
+}
+
+export function titlebar(theme: ColorScheme) {
+    const avatarWidth = 15
+    const avatarOuterWidth = avatarWidth + 4
+    const followerAvatarWidth = 14
+    const followerAvatarOuterWidth = followerAvatarWidth + 4
+
+    return {
+        item_spacing: ITEM_SPACING,
+        facePileSpacing: 2,
+        height: TITLEBAR_HEIGHT,
+        background: background(theme.lowest),
+        border: border(theme.lowest, { bottom: true }),
+        padding: {
+            left: 80,
+            right: 0,
+        },
+
+        // Project
+        title: text(theme.lowest, "sans", "variant"),
+        highlight_color: text(theme.lowest, "sans", "active").color,
+
+        // Collaborators
+        leaderAvatar: {
+            width: avatarWidth,
+            outerWidth: avatarOuterWidth,
+            cornerRadius: avatarWidth / 2,
+            outerCornerRadius: avatarOuterWidth / 2,
+        },
+        followerAvatar: {
+            width: followerAvatarWidth,
+            outerWidth: followerAvatarOuterWidth,
+            cornerRadius: followerAvatarWidth / 2,
+            outerCornerRadius: followerAvatarOuterWidth / 2,
+        },
+        inactiveAvatarGrayscale: true,
+        followerAvatarOverlap: 8,
+        leaderSelection: {
+            margin: {
+                top: 4,
+                bottom: 4,
+            },
+            padding: {
+                left: 2,
+                right: 2,
+                top: 2,
+                bottom: 2,
+            },
+            cornerRadius: 6,
+        },
+        avatarRibbon: {
+            height: 3,
+            width: 14,
+            // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
+        },
+
+        sign_in_button: toggleable_text_button(theme, {}),
+        offlineIcon: {
+            color: foreground(theme.lowest, "variant"),
+            width: 16,
+            margin: {
+                left: ITEM_SPACING,
+            },
+            padding: {
+                right: 4,
+            },
+        },
+
+        // When the collaboration server is out of date, show a warning
+        outdatedWarning: {
+            ...text(theme.lowest, "sans", "warning", { size: "xs" }),
+            background: withOpacity(background(theme.lowest, "warning"), 0.3),
+            border: border(theme.lowest, "warning"),
+            margin: {
+                left: ITEM_SPACING,
+            },
+            padding: {
+                left: 8,
+                right: 8,
+            },
+            cornerRadius: 6,
+        },
+
+        leave_call_button: icon_button(theme, {
+            margin: {
+                left: ITEM_SPACING / 2,
+                right: ITEM_SPACING,
+            },
+        }),
+
+        ...call_controls(theme),
+
+        toggle_contacts_button: toggleable_icon_button(theme, {
+            margin: {
+                left: ITEM_SPACING,
+            },
+        }),
+
+        // Jewel that notifies you that there are new contact requests
+        toggleContactsBadge: {
+            cornerRadius: 3,
+            padding: 2,
+            margin: { top: 3, left: 3 },
+            border: border(theme.lowest),
+            background: foreground(theme.lowest, "accent"),
+        },
+        shareButton: toggleable_text_button(theme, {}),
+        user_menu: user_menu(theme),
+    }
+}
diff --git a/styles/src/themes/rose-pine/common.ts b/styles/src/themes/rose-pine/common.ts
index 8b3b3b700098610d292cc1f3f3f4b9374f539b24..146305890b98e136acbfd04955b28c7f233a898e 100644
--- a/styles/src/themes/rose-pine/common.ts
+++ b/styles/src/themes/rose-pine/common.ts
@@ -1,39 +1,39 @@
-import { ThemeSyntax } from "../../common";
+import { ThemeSyntax } from "../../common"
 
 export const color = {
     default: {
-        base: '#191724',
-        surface: '#1f1d2e',
-        overlay: '#26233a',
-        muted: '#6e6a86',
-        subtle: '#908caa',
-        text: '#e0def4',
-        love: '#eb6f92',
-        gold: '#f6c177',
-        rose: '#ebbcba',
-        pine: '#31748f',
-        foam: '#9ccfd8',
-        iris: '#c4a7e7',
-        highlightLow: '#21202e',
-        highlightMed: '#403d52',
-        highlightHigh: '#524f67',
+        base: "#191724",
+        surface: "#1f1d2e",
+        overlay: "#26233a",
+        muted: "#6e6a86",
+        subtle: "#908caa",
+        text: "#e0def4",
+        love: "#eb6f92",
+        gold: "#f6c177",
+        rose: "#ebbcba",
+        pine: "#31748f",
+        foam: "#9ccfd8",
+        iris: "#c4a7e7",
+        highlightLow: "#21202e",
+        highlightMed: "#403d52",
+        highlightHigh: "#524f67",
     },
     moon: {
-        base: '#232136',
-        surface: '#2a273f',
-        overlay: '#393552',
-        muted: '#6e6a86',
-        subtle: '#908caa',
-        text: '#e0def4',
-        love: '#eb6f92',
-        gold: '#f6c177',
-        rose: '#ea9a97',
-        pine: '#3e8fb0',
-        foam: '#9ccfd8',
-        iris: '#c4a7e7',
-        highlightLow: '#2a283e',
-        highlightMed: '#44415a',
-        highlightHigh: '#56526e',
+        base: "#232136",
+        surface: "#2a273f",
+        overlay: "#393552",
+        muted: "#6e6a86",
+        subtle: "#908caa",
+        text: "#e0def4",
+        love: "#eb6f92",
+        gold: "#f6c177",
+        rose: "#ea9a97",
+        pine: "#3e8fb0",
+        foam: "#9ccfd8",
+        iris: "#c4a7e7",
+        highlightLow: "#2a283e",
+        highlightMed: "#44415a",
+        highlightHigh: "#56526e",
     },
     dawn: {
         base: "#faf4ed",
@@ -51,8 +51,8 @@ export const color = {
         highlightLow: "#f4ede8",
         highlightMed: "#dfdad9",
         highlightHigh: "#cecacd",
-    }
-};
+    },
+}
 
 export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => {
     return {
diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts
index 3ec5d30bb6b2ba1cf36e2a8ac009c54398c99f37..15d7b5de2d3084e43a62dc46dca32951ac027397 100644
--- a/styles/src/themes/rose-pine/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts
@@ -6,12 +6,12 @@ import {
     ThemeConfig,
 } from "../../common"
 
-import { color as c, syntax } from "./common";
+import { color as c, syntax } from "./common"
 
 const color = c.dawn
 
-const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
-const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
+const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
 
 export const theme: ThemeConfig = {
     name: "Rosé Pine Dawn",
@@ -21,7 +21,19 @@ export const theme: ThemeConfig = {
     licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
     licenseFile: `${__dirname}/LICENSE`,
     inputColor: {
-        neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text].reverse()).domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
+        neutral: chroma
+            .scale(
+                [
+                    color.base,
+                    color.surface,
+                    color.highlightHigh,
+                    color.overlay,
+                    color.muted,
+                    color.subtle,
+                    color.text,
+                ].reverse()
+            )
+            .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
         red: colorRamp(chroma(color.love)),
         orange: colorRamp(chroma(color.iris)),
         yellow: colorRamp(chroma(color.gold)),
@@ -32,6 +44,6 @@ export const theme: ThemeConfig = {
         magenta: colorRamp(chroma(magenta)),
     },
     override: {
-        syntax: syntax(color)
-    }
+        syntax: syntax(color),
+    },
 }
diff --git a/styles/src/themes/rose-pine/rose-pine-moon.ts b/styles/src/themes/rose-pine/rose-pine-moon.ts
index 4e70d2f0addc8aa8bfc23f2d9ecc1d514d87a5f1..c5ef0c997f51605273007abc34d1fe4adf37a368 100644
--- a/styles/src/themes/rose-pine/rose-pine-moon.ts
+++ b/styles/src/themes/rose-pine/rose-pine-moon.ts
@@ -6,12 +6,12 @@ import {
     ThemeConfig,
 } from "../../common"
 
-import { color as c, syntax } from "./common";
+import { color as c, syntax } from "./common"
 
 const color = c.moon
 
-const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
-const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
+const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
 
 export const theme: ThemeConfig = {
     name: "Rosé Pine Moon",
@@ -21,7 +21,17 @@ export const theme: ThemeConfig = {
     licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
     licenseFile: `${__dirname}/LICENSE`,
     inputColor: {
-        neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]).domain([0, 0.3, 0.55, 1]),
+        neutral: chroma
+            .scale([
+                color.base,
+                color.surface,
+                color.highlightHigh,
+                color.overlay,
+                color.muted,
+                color.subtle,
+                color.text,
+            ])
+            .domain([0, 0.3, 0.55, 1]),
         red: colorRamp(chroma(color.love)),
         orange: colorRamp(chroma(color.iris)),
         yellow: colorRamp(chroma(color.gold)),
@@ -32,6 +42,6 @@ export const theme: ThemeConfig = {
         magenta: colorRamp(chroma(magenta)),
     },
     override: {
-        syntax: syntax(color)
-    }
+        syntax: syntax(color),
+    },
 }
diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts
index 6c4a6ac49bb3f02461892355448b6538299a9922..0f3b439338764d6e62df9d4a4a91b9ffc832532f 100644
--- a/styles/src/themes/rose-pine/rose-pine.ts
+++ b/styles/src/themes/rose-pine/rose-pine.ts
@@ -5,12 +5,12 @@ import {
     ThemeLicenseType,
     ThemeConfig,
 } from "../../common"
-import { color as c, syntax } from "./common";
+import { color as c, syntax } from "./common"
 
 const color = c.default
 
-const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
-const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
+const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
 
 export const theme: ThemeConfig = {
     name: "Rosé Pine",
@@ -20,7 +20,15 @@ export const theme: ThemeConfig = {
     licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
     licenseFile: `${__dirname}/LICENSE`,
     inputColor: {
-        neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]),
+        neutral: chroma.scale([
+            color.base,
+            color.surface,
+            color.highlightHigh,
+            color.overlay,
+            color.muted,
+            color.subtle,
+            color.text,
+        ]),
         red: colorRamp(chroma(color.love)),
         orange: colorRamp(chroma(color.iris)),
         yellow: colorRamp(chroma(color.gold)),
@@ -31,6 +39,6 @@ export const theme: ThemeConfig = {
         magenta: colorRamp(chroma(magenta)),
     },
     override: {
-        syntax: syntax(color)
-    }
+        syntax: syntax(color),
+    },
 }