diff --git a/ui/colony/src/App.tsx b/ui/colony/src/App.tsx
index e6f1e8a..0b79506 100644
--- a/ui/colony/src/App.tsx
+++ b/ui/colony/src/App.tsx
@@ -6,7 +6,6 @@ import { ChannelSidebar } from "@/components/ChannelSidebar";
 import { MessageItem } from "@/components/MessageItem";
 import { ComposeBox } from "@/components/ComposeBox";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Button } from "@/components/ui/button";
 
 export default function App() {
   const [channels, setChannels] = useState<Channel[]>([]);
@@ -87,10 +86,8 @@ export default function App() {
         <div className="px-3 py-2 md:px-4 border-b border-border flex items-center gap-2">
           {/* Mobile: Sheet trigger */}
           <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-            <SheetTrigger asChild>
-              <Button variant="ghost" size="sm" className="md:hidden p-1 h-8 w-8 text-muted-foreground">
-                =
-              </Button>
+            <SheetTrigger className="md:hidden p-1 h-8 w-8 text-muted-foreground hover:text-foreground rounded-sm">
+              =
             </SheetTrigger>
             <SheetContent side="left" className="p-0 w-64 bg-background">
               {sidebar}
diff --git a/ui/colony/src/components/ComposeBox.tsx b/ui/colony/src/components/ComposeBox.tsx
index a99d7c8..da4d878 100644
--- a/ui/colony/src/components/ComposeBox.tsx
+++ b/ui/colony/src/components/ComposeBox.tsx
@@ -3,7 +3,7 @@ import type { MessageType } from "@/types/MessageType";
 import { postMessage } from "@/api";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
 
 interface Props {
   channelId: string;
@@ -60,22 +60,24 @@ export function ComposeBox({
       )}
 
       <div className="flex items-center gap-1.5 md:gap-2">
-        <ToggleGroup
-          type="single"
-          value={msgType}
-          onValueChange={(v) => { if (v) setMsgType(v as MessageType); }}
-          className="gap-0.5"
-        >
+        {/* Type selector */}
+        <div className="flex gap-0.5 rounded-md border border-border p-0.5">
           {MSG_TYPES.map((t) => (
-            <ToggleGroupItem
+            <button
+              type="button"
               key={t.value}
-              value={t.value}
-              className="h-8 w-8 md:h-7 md:w-auto md:px-2 text-xs font-bold data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
+              onClick={() => setMsgType(t.value)}
+              className={cn(
+                "h-7 w-7 md:h-6 md:w-6 rounded-sm text-xs font-bold transition-colors",
+                msgType === t.value
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
             >
               {t.label}
-            </ToggleGroupItem>
+            </button>
           ))}
-        </ToggleGroup>
+        </div>
 
         <Input
           value={content}