diff --git a/pkgs/webview-ui/app/src/components/button/css/button-ghost.css b/pkgs/webview-ui/app/src/components/button/css/button-ghost.css
new file mode 100644
index 000000000..cee0cdb14
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/button/css/button-ghost.css
@@ -0,0 +1,11 @@
+.button--ghost-hover:hover {
+  @apply hover:bg-secondary-100 hover:text-secondary-900;
+}
+
+.button--ghost-focus:focus {
+  @apply focus:bg-secondary-200 focus:text-secondary-900;
+}
+
+.button--ghost-active:active {
+  @apply active:bg-secondary-200 active:text-secondary-900 active:shadow-inner-primary-active;
+}
diff --git a/pkgs/webview-ui/app/src/components/button/css/index.css b/pkgs/webview-ui/app/src/components/button/css/index.css
index 33f69a263..56cdc308b 100644
--- a/pkgs/webview-ui/app/src/components/button/css/index.css
+++ b/pkgs/webview-ui/app/src/components/button/css/index.css
@@ -1,5 +1,6 @@
 @import "./button-light.css";
 @import "./button-dark.css";
+@import "./button-ghost.css";
 
 .button {
   @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 font-semibold;
diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx
index 87756ad47..675197984 100644
--- a/pkgs/webview-ui/app/src/components/button/index.tsx
+++ b/pkgs/webview-ui/app/src/components/button/index.tsx
@@ -26,10 +26,9 @@ const variantColors: (
     !disabled && "button--light-active", // Active state
   ),
   ghost: cx(
-    // "shadow-inner-secondary",
-    !disabled && "hover:bg-secondary-200 hover:text-secondary-900", // Hover state
-    !disabled && "focus:bg-secondary-200 focus:text-secondary-900", // Focus state
-    !disabled && "button--light-active", // Active state
+    !disabled && "button--ghost-hover", // Hover state
+    !disabled && "button--ghost-focus", // Focus state
+    !disabled && "button--ghost-active", // Active state
   ),
 });