diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts
index d71996042b..47953a56d3 100644
--- a/styles/src/component/icon_button.ts
+++ b/styles/src/component/icon_button.ts
@@ -1,14 +1,17 @@
 import { ColorScheme } from "../common";
-import { interactive } from "../element";
+import { interactive, toggleable } from "../element";
 import { background, foreground } from "../styleTree/components";
 import { Margin } from "../types/zed";
 
 interface IconButtonOptions {
+    layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
     color?: keyof ColorScheme['lowest'];
     margin?: Partial<Margin>;
 }
 
-export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOptions) {
+type ToggleableIconButtonOptions = IconButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
+
+export function icon_button(theme: ColorScheme, { color, margin, layer }: IconButtonOptions) {
     if (!color)
         color = "base";
 
@@ -21,7 +24,7 @@ export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOpt
 
     return interactive({
         base: {
-            corner_radius: 4,
+            corner_radius: 6,
             padding: {
                 top: 2,
                 bottom: 2,
@@ -36,19 +39,31 @@ export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOpt
         },
         state: {
             default: {
-                background: background(theme.lowest, color),
-                color: foreground(theme.lowest, color),
+                background: background(layer ?? theme.lowest, color),
+                color: foreground(layer ?? theme.lowest, color),
             },
             hovered: {
-                background: background(theme.lowest, color, "hovered"),
-                color: foreground(theme.lowest, color, "hovered"),
+                background: background(layer ?? theme.lowest, color, "hovered"),
+                color: foreground(layer ?? theme.lowest, color, "hovered"),
 
             },
             clicked: {
-                background: background(theme.lowest, color, "pressed"),
-                color: foreground(theme.lowest, color, "pressed"),
+                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 0000000000..921ecc639f
--- /dev/null
+++ b/styles/src/component/text_button.ts
@@ -0,0 +1,74 @@
+import { ColorScheme } from "../common";
+import { interactive, toggleable } from "../element";
+import { TextProperties, background, foreground, text } from "../styleTree/components";
+import { Margin } from "../types/zed";
+
+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/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index a500988bf7..da1ad1fe18 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -13,7 +13,8 @@ import statusBar from "./statusBar"
 import tabBar from "./tabBar"
 import { interactive } from "../element"
 import merge from "ts-deepmerge"
-import { icon_button } from "../component/icon_button"
+import { icon_button, toggleable_icon_button } from "../component/icon_button"
+import { text_button, toggleable_text_button } from "../component/text_button"
 export default function workspace(colorScheme: ColorScheme) {
     const layer = colorScheme.lowest
     const isLight = colorScheme.isLight
@@ -298,137 +299,45 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
                 cornerRadius: 6,
             },
-            callControl: interactive({
-                base: {
-                    cornerRadius: 6,
-                    color: foreground(layer, "variant"),
-                    iconWidth: 12,
-                    buttonWidth: 20,
-                },
-                state: {
-                    hovered: {
-                        background: background(layer, "variant", "hovered"),
-                        color: foreground(layer, "variant", "hovered"),
-                    },
-                },
-            }),
-            toggleContactsButton: toggleable({
-                base: interactive({
-                    base: {
-                        margin: { left: itemSpacing },
-                        cornerRadius: 6,
-                        color: foreground(layer, "variant"),
-                        iconWidth: 14,
-                        buttonWidth: 20,
-                    },
-                    state: {
-                        clicked: {
-                            background: background(layer, "variant", "pressed"),
-                        },
-                        hovered: {
-                            background: background(layer, "variant", "hovered"),
-                        },
-                    },
-                }),
-                state: {
-                    active: {
-                        default: {
-                            background: background(layer, "on", "default"),
-                        },
-                        hovered: {
-                            background: background(layer, "on", "hovered"),
-                        },
-                        clicked: {
-                            background: background(layer, "on", "pressed"),
-                        },
-                    },
-                },
-            }),
-            toggleMicrophoneButton: toggleable({
-                base: interactive({
-                    base: {
-                        margin: { left: itemSpacing },
-                        cornerRadius: 6,
-                        color: foreground(layer, "variant"),
-                        iconWidth: 14,
-                        buttonWidth: 20,
-                    },
-                    state: {
-                        clicked: {
-                            background: background(layer, "variant", "pressed"),
-                        },
-                        hovered: {
-                            background: background(layer, "variant", "hovered"),
-                        },
-                    },
-                }),
-                state: {
-                    active: {
-                        default: {
-                            background: background(layer, "on", "default"),
-                        },
-                        hovered: {
-                            background: background(layer, "on", "hovered"),
-                        },
-                        clicked: {
-                            background: background(layer, "on", "pressed"),
-                        },
-                    },
-                },
-            }),
-            toggleSpeakersButton: toggleable({
-                base: interactive({
-                    base: {
-                        margin: { left: itemSpacing },
-                        cornerRadius: 6,
-                        color: foreground(layer, "variant"),
-                        iconWidth: 14,
-                        buttonWidth: 20,
-                    },
-                    state: {
-                        clicked: {
-                            background: background(layer, "variant", "pressed"),
-                        },
-                        hovered: {
-                            background: background(layer, "variant", "hovered"),
-                        },
-                    },
-                }),
-                state: {
-                    active: {
-                        default: {
-                            background: background(layer, "on", "default"),
-                        },
-                        hovered: {
-                            background: background(layer, "on", "hovered"),
-                        },
-                        clicked: {
-                            background: background(layer, "on", "pressed"),
-                        },
-                    },
-                },
+
+            call_control: icon_button(colorScheme, {
+                margin: { left: itemSpacing / 2 },
             }),
 
-            leaveCallButton: icon_button(colorScheme, {
+            toggle_contacts_button: toggleable_icon_button(colorScheme, {
+                margin: { left: itemSpacing }
+            }),
+
+            toggle_microphone_button: toggleable_icon_button(colorScheme, {
+                margin: { left: itemSpacing },
+                active_color: 'negative'
+            }),
+
+            toggle_speakers_button: toggleable_icon_button(colorScheme, {
+                margin: { left: itemSpacing / 2 },
+            }),
+
+            leave_call_button: icon_button(colorScheme, {
                 margin: { left: itemSpacing },
             }),
 
-            userMenuButton: merge(titlebarButton, {
-                inactive: {
-                    default: {
-                        buttonWidth: 20,
-                        iconWidth: 12,
+            user_menu_button:
+                merge(titlebarButton, {
+                    inactive: {
+                        default: {
+                            buttonWidth: 20,
+                            iconWidth: 12,
+                        },
                     },
-                },
-                active: {
-                    default: {
-                        iconWidth: 12,
-                        button_width: 20,
-                        background: background(layer, "variant", "active"),
-                        color: foreground(layer, "variant", "active"),
-                    }
-                },
-            }),
+                    active: {
+                        default: {
+                            iconWidth: 12,
+                            button_width: 20,
+                            background: background(layer, "variant", "active"),
+                            color: foreground(layer, "variant", "active"),
+                        }
+                    },
+                }),
 
             toggleContactsBadge: {
                 cornerRadius: 3,
@@ -437,9 +346,7 @@ export default function workspace(colorScheme: ColorScheme) {
                 border: border(layer),
                 background: foreground(layer, "accent"),
             },
-            shareButton: {
-                ...titlebarButton,
-            },
+            shareButton: toggleable_text_button(colorScheme, {}),
         },
 
         toolbar: {