diff --git a/apps/code/src/renderer/components/HeaderRow.tsx b/apps/code/src/renderer/components/HeaderRow.tsx
index 713003eb8..2e36918e6 100644
--- a/apps/code/src/renderer/components/HeaderRow.tsx
+++ b/apps/code/src/renderer/components/HeaderRow.tsx
@@ -84,7 +84,7 @@ export function HeaderRow() {
         <Flex
           align="center"
           justify="between"
-          px="3"
+          pl="3"
           style={{
             height: "100%",
             overflow: "hidden",
@@ -100,12 +100,11 @@ export function HeaderRow() {
         <Flex
           align="center"
           justify="end"
-          gap="2"
-          pr="3"
-          pl="2"
+          gap="1"
+          pr="1"
+          pl="1"
           style={{
             height: "100%",
-            borderLeft: "1px solid var(--gray-6)",
             flexShrink: 0,
             maxWidth: "50%",
             overflow: "hidden",
diff --git a/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx b/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx
index a6198dce8..a3060f858 100644
--- a/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx
+++ b/apps/code/src/renderer/features/code-review/components/DiffStatsBadge.tsx
@@ -5,6 +5,7 @@ import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useCloudChangedFiles } from "@features/task-detail/hooks/useCloudChangedFiles";
 import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
 import { GitDiff } from "@phosphor-icons/react";
+import { Button } from "@posthog/quill";
 import { Flex, Text } from "@radix-ui/themes";
 import {
   formatHotkey,
@@ -70,10 +71,11 @@ export function DiffStatsBadge({ task }: DiffStatsBadgeProps) {
       shortcut={formatHotkey(SHORTCUTS.TOGGLE_REVIEW_PANEL)}
       side="bottom"
     >
-      <button
-        type="button"
+      <Button
         onClick={handleClick}
-        className={`no-drag inline-flex h-6 cursor-pointer items-center gap-1 rounded-[var(--radius-1)] border-none px-1.5 font-mono text-[11px] text-[var(--gray-11)] transition-colors duration-100 hover:bg-[var(--gray-a3)] ${isOpen ? "bg-[var(--gray-a3)]" : "bg-transparent"}`}
+        variant="outline"
+        size="sm"
+        className={`no-drag font-mono text-(--gray-11) text-[11px] transition-colors duration-100 hover:bg-(--gray-a3) ${isOpen ? "bg-(--gray-a3)" : "bg-transparent"}`}
       >
         <GitDiff size={14} style={{ flexShrink: 0 }} />
         {hasChanges ? (
@@ -92,7 +94,7 @@ export function DiffStatsBadge({ task }: DiffStatsBadgeProps) {
         ) : (
           <Text style={{ color: "var(--gray-9)", fontSize: "11px" }}>0</Text>
         )}
-      </button>
+      </Button>
     </Tooltip>
   );
 }
diff --git a/apps/code/src/renderer/features/git-interaction/components/GitInteractionMenu.tsx b/apps/code/src/renderer/features/git-interaction/components/GitInteractionMenu.tsx
index 91af37ec5..056b1a2e0 100644
--- a/apps/code/src/renderer/features/git-interaction/components/GitInteractionMenu.tsx
+++ b/apps/code/src/renderer/features/git-interaction/components/GitInteractionMenu.tsx
@@ -12,8 +12,16 @@ import {
   GitFork,
   GitPullRequest,
 } from "@phosphor-icons/react";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { Button, DropdownMenu, Flex, Spinner, Text } from "@radix-ui/themes";
+import {
+  Button,
+  ButtonGroup,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@posthog/quill";
+import { Spinner } from "@radix-ui/themes";
+import { ChevronDown } from "lucide-react";
 
 interface GitInteractionMenuProps {
   primaryAction: GitMenuAction;
@@ -23,51 +31,6 @@ interface GitInteractionMenuProps {
   onSelect: (actionId: GitMenuActionId) => void;
 }
 
-function ActionButton({
-  action,
-  isPrimary,
-  isBusy,
-  allDisabled,
-  onClick,
-}: {
-  action: GitMenuAction;
-  isPrimary: boolean;
-  isBusy?: boolean;
-  allDisabled?: boolean;
-  onClick: () => void;
-}) {
-  const icon = getActionIcon(action.id);
-  const isDisabled = !action.enabled || isBusy;
-  const button = (
-    <Button
-      size="1"
-      variant={allDisabled ? "soft" : "solid"}
-      color={allDisabled ? "gray" : undefined}
-      disabled={isDisabled}
-      onClick={onClick}
-      style={{
-        borderTopRightRadius: isPrimary ? 0 : undefined,
-        borderBottomRightRadius: isPrimary ? 0 : undefined,
-      }}
-    >
-      <Flex align="center" gap="2">
-        {isBusy ? <Spinner size="1" /> : icon}
-        <Text size="1">{action.label}</Text>
-      </Flex>
-    </Button>
-  );
-
-  if (!action.enabled && action.disabledReason) {
-    return (
-      <Tooltip content={action.disabledReason} side="bottom">
-        <span style={{ display: "inline-flex" }}>{button}</span>
-      </Tooltip>
-    );
-  }
-
-  return button;
-}
-
 function getActionIcon(actionId: GitMenuActionId) {
   switch (actionId) {
     case "commit":
@@ -98,69 +61,81 @@ export function GitInteractionMenu({
 }: GitInteractionMenuProps) {
   const allDisabled = actions.every((a) => !a.enabled);
   const showDropdown = actions.length > 1;
+  const variant = allDisabled ? "default" : "primary";
+  const isPrimaryDisabled = !primaryAction.enabled || isBusy;
+
+  const primaryButton = (
+    <Button
+      variant={variant}
+      disabled={isPrimaryDisabled}
+      onClick={() => onPrimary(primaryAction.id)}
+      className="bg-primary text-primary-foreground not-disabled:hover:bg-primary/80 hover:text-primary-foreground/80"
+    >
+      {isBusy ? <Spinner size="1" /> : getActionIcon(primaryAction.id)}
+      {primaryAction.label}
+    </Button>
+  );
+
+  const wrappedPrimaryButton =
+    !primaryAction.enabled && primaryAction.disabledReason ? (
+      <Tooltip content={primaryAction.disabledReason} side="bottom">
+        <span style={{ display: "inline-flex" }}>{primaryButton}</span>
+      </Tooltip>
+    ) : (
+      primaryButton
+    );
+
+  if (!showDropdown || allDisabled) {
+    return wrappedPrimaryButton;
+  }
 
   return (
-    <Flex align="center" gap="0">
-      <ActionButton
-        action={primaryAction}
-        isPrimary={showDropdown}
-        isBusy={isBusy}
-        allDisabled={allDisabled}
-        onClick={() => onPrimary(primaryAction.id)}
-      />
-      {showDropdown && (
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
+    <ButtonGroup>
+      {wrappedPrimaryButton}
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
             <Button
-              size="1"
-              variant={allDisabled ? "soft" : "solid"}
-              color={allDisabled ? "gray" : undefined}
+              className="bg-primary not-disabled:hover:bg-primary/80"
+              variant={variant}
               disabled={isBusy}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: allDisabled
-                  ? undefined
-                  : "1px solid var(--accent-8)",
-                paddingLeft: "6px",
-                paddingRight: "6px",
-              }}
-            >
-              <ChevronDownIcon />
-            </Button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content size="1" align="end">
-            {actions.map((action) => {
-              const icon = getActionIcon(action.id);
-              const itemContent = (
-                <Flex align="center" gap="2">
-                  {icon}
-                  <Text size="1">{action.label}</Text>
-                </Flex>
-              );
-
-              if (!action.enabled && action.disabledReason) {
-                return (
-                  <Tooltip key={action.id} content={action.disabledReason}>
-                    <DropdownMenu.Item disabled>
-                      {itemContent}
-                    </DropdownMenu.Item>
-                  </Tooltip>
-                );
-              }
+            />
+          }
+        >
+          <ChevronDown size={12} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {actions.map((action) => {
+            const icon = getActionIcon(action.id);
+            const itemContent = (
+              <>
+                {icon} {action.label}
+              </>
+            );
 
+            if (!action.enabled && action.disabledReason) {
               return (
-                <DropdownMenu.Item
+                <Tooltip
                   key={action.id}
-                  onSelect={() => onSelect(action.id)}
+                  content={action.disabledReason}
+                  side="left"
                 >
-                  {itemContent}
-                </DropdownMenu.Item>
+                  <DropdownMenuItem disabled>{itemContent}</DropdownMenuItem>
+                </Tooltip>
               );
-            })}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      )}
-    </Flex>
+            }
+
+            return (
+              <DropdownMenuItem
+                key={action.id}
+                onSelect={() => onSelect(action.id)}
+              >
+                {itemContent}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
   );
 }
diff --git a/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx b/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx
index 3ab95e8aa..ea54b45d4 100644
--- a/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/ExternalAppsOpener.tsx
@@ -1,22 +1,32 @@
 import { useExternalApps } from "@features/external-apps/hooks/useExternalApps";
 import { CodeIcon, CopyIcon } from "@phosphor-icons/react";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { DropdownMenu, Flex, Text } from "@radix-ui/themes";
+import {
+  Button,
+  ButtonGroup,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  Kbd,
+} from "@posthog/quill";
 import { SHORTCUTS } from "@renderer/constants/keyboard-shortcuts";
 import { handleExternalAppAction } from "@utils/handleExternalAppAction";
-import { useCallback, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { useCallback } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 const THUMBNAIL_ICON_SIZE = 20;
-const DROPDOWN_ICON_SIZE = 16;
+const DROPDOWN_ICON_SIZE = 20;
 
 interface ExternalAppsOpenerProps {
   targetPath: string | null;
 }
 
 export function ExternalAppsOpener({ targetPath }: ExternalAppsOpenerProps) {
-  const { detectedApps, defaultApp, isLoading } = useExternalApps();
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { detectedApps, defaultApp, isLoading, setLastUsedApp } =
+    useExternalApps();
 
   const handleOpenDefault = useCallback(async () => {
     if (!defaultApp || !targetPath) return;
@@ -37,8 +47,9 @@ export function ExternalAppsOpener({ targetPath }: ExternalAppsOpenerProps) {
         targetPath,
         displayName,
       );
+      await setLastUsedApp(appId);
     },
-    [targetPath],
+    [targetPath, setLastUsedApp],
   );
 
   const handleCopyPath = useCallback(async () => {
@@ -78,72 +89,44 @@ export function ExternalAppsOpener({ targetPath }: ExternalAppsOpenerProps) {
   const isReady = !isLoading && detectedApps.length > 0;
 
   return (
-    <DropdownMenu.Root open={dropdownOpen} onOpenChange={setDropdownOpen}>
-      <Flex align="center" className="no-drag" gap="0">
-        <button
-          type="button"
-          aria-label={`Open in ${defaultApp?.name ?? "editor"}`}
-          onClick={handleOpenDefault}
-          disabled={!isReady || !defaultApp}
-          className="hover:bg-[var(--gray-a3)]"
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "26px",
-            height: "24px",
-            borderRadius: "var(--radius-1) 0 0 var(--radius-1)",
-            border: "1px solid var(--gray-6)",
-            borderRight: "none",
-            background: "transparent",
-            cursor: "pointer",
-            color: "var(--gray-11)",
-          }}
-        >
-          {defaultApp?.icon ? (
-            <img
-              src={defaultApp.icon}
-              width={DROPDOWN_ICON_SIZE}
-              height={DROPDOWN_ICON_SIZE}
-              alt=""
-              style={{ borderRadius: "2px" }}
+    <ButtonGroup className="no-drag">
+      <Button
+        size="icon-sm"
+        variant="outline"
+        aria-label={`Open in ${defaultApp?.name ?? "editor"}`}
+        onClick={handleOpenDefault}
+        disabled={!isReady || !defaultApp}
+      >
+        {defaultApp?.icon ? (
+          <img
+            src={defaultApp.icon}
+            width={DROPDOWN_ICON_SIZE}
+            height={DROPDOWN_ICON_SIZE}
+            alt=""
+            style={{ borderRadius: "2px" }}
+          />
+        ) : (
+          <CodeIcon size={DROPDOWN_ICON_SIZE} weight="regular" />
+        )}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="outline"
+              size="icon-sm"
+              aria-label="More editor options"
             />
-          ) : (
-            <CodeIcon size={DROPDOWN_ICON_SIZE} weight="regular" />
-          )}
-        </button>
-        <DropdownMenu.Trigger>
-          <button
-            type="button"
-            aria-label="More editor options"
-            className="hover:bg-[var(--gray-a3)]"
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "18px",
-              height: "24px",
-              borderRadius: "0 var(--radius-1) var(--radius-1) 0",
-              border: "1px solid var(--gray-6)",
-              background: "transparent",
-              cursor: "pointer",
-              color: "var(--gray-11)",
-            }}
-          >
-            <ChevronDownIcon width={10} height={10} />
-          </button>
-        </DropdownMenu.Trigger>
-      </Flex>
-
-      <DropdownMenu.Content align="end">
-        {detectedApps.map((app) => (
-          <DropdownMenu.Item
-            key={app.id}
-            onSelect={() => handleOpenWith(app.id)}
-            shortcut={app.id === defaultApp?.id ? "⌘ O" : undefined}
-            className="px-1"
-          >
-            <Flex align="center" gap="2">
+          }
+        >
+          <ChevronDown size={10} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-[150px]">
+          {detectedApps.map((app) => (
+            <DropdownMenuItem
+              key={app.id}
+              onClick={() => handleOpenWith(app.id)}
+            >
               {app.icon ? (
                 <img
                   src={app.icon}
@@ -154,21 +137,24 @@ export function ExternalAppsOpener({ targetPath }: ExternalAppsOpenerProps) {
               ) : (
                 <CodeIcon size={THUMBNAIL_ICON_SIZE} weight="regular" />
               )}
-              <Text size="1">{app.name}</Text>
-            </Flex>
-          </DropdownMenu.Item>
-        ))}
-        <DropdownMenu.Item
-          onSelect={handleCopyPath}
-          shortcut="⌘ ⇧ C"
-          className="px-1"
-        >
-          <Flex align="center" gap="2">
+              {app.name}
+              {app.id === defaultApp?.id && (
+                <DropdownMenuShortcut>
+                  <Kbd>⌘O</Kbd>
+                </DropdownMenuShortcut>
+              )}
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={handleCopyPath}>
             <CopyIcon size={THUMBNAIL_ICON_SIZE} weight="regular" />
-            <Text size="1">Copy Path</Text>
-          </Flex>
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+            Copy Path
+            <DropdownMenuShortcut>
+              <Kbd>⌘⇧C</Kbd>
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
   );
 }
diff --git a/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx b/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx
index 22a900d08..f7d038522 100644
--- a/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx
+++ b/apps/code/src/renderer/features/task-detail/components/TaskDetail.tsx
@@ -151,11 +151,7 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
             </Text>
           </Tooltip>
         )}
-        {openTargetPath && (
-          <Flex align="center" gap="2" className="shrink-0">
-            <ExternalAppsOpener targetPath={openTargetPath} />
-          </Flex>
-        )}
+        {openTargetPath && <ExternalAppsOpener targetPath={openTargetPath} />}
       </Flex>
     ),
     [