diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx
index c9cae7c..9e3b05b 100644
--- a/app/components-preview/page.tsx
+++ b/app/components-preview/page.tsx
@@ -71,6 +71,9 @@ export default function ComponentsPreview() {
                   <Button variant="ghost" size="medium">
                     Ghost
                   </Button>
+                  <Button variant="ghost-inverse" size="medium">
+                    Ghost Inverse
+                  </Button>
                   <Button variant="danger" size="medium">
                     Danger
                   </Button>
@@ -149,6 +152,29 @@ export default function ComponentsPreview() {
                 </div>
               </div>
 
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Ghost Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="ghost-inverse" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="ghost-inverse" size="small">
+                    Small
+                  </Button>
+                  <Button variant="ghost-inverse" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="ghost-inverse" size="large">
+                    Large
+                  </Button>
+                  <Button variant="ghost-inverse" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
               <div>
                 <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
                   States - Danger Variant
@@ -190,6 +216,20 @@ export default function ComponentsPreview() {
                   </Button>
                 </div>
               </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Ghost Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="ghost-inverse" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="ghost-inverse" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
             </div>
           </div>
         </section>
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 9720495..556ff9d 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -10,6 +10,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     | "dark"
     | "inverse"
     | "ghost"
+    | "ghost-inverse"
     | "danger"
     | "danger-inverse";
   size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
@@ -73,7 +74,9 @@ const Button = memo<ButtonProps>(
       inverse:
         "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       ghost:
-        "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "ghost-inverse":
+        "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       danger:
         "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-border-default-negative-primary)] focus:outline-none focus:border-[var(--color-border-default-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       "danger-inverse":
@@ -88,13 +91,14 @@ const Button = memo<ButtonProps>(
       xlarge: "hover:outline-[2.5px]",
     };
 
-    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, danger, or danger-inverse
+    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, ghost-inverse, danger, or danger-inverse
     const outlineStyles =
       variant === "primary" ||
       variant === "outlined" ||
       variant === "dark" ||
       variant === "inverse" ||
       variant === "ghost" ||
+      variant === "ghost-inverse" ||
       variant === "danger" ||
       variant === "danger-inverse"
         ? ""
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 79a4588..bb1f813 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -23,6 +23,7 @@ export default {
         "dark",
         "inverse",
         "ghost",
+        "ghost-inverse",
         "danger",
         "danger-inverse",
       ],
@@ -81,6 +82,9 @@ export const Variants = {
         <Button {..._args} variant="ghost">
           Ghost
         </Button>
+        <Button {..._args} variant="ghost-inverse">
+          Ghost Inverse
+        </Button>
         <Button {..._args} variant="danger">
           Danger
         </Button>
@@ -300,6 +304,27 @@ export const AllVariants = {
         </div>
       </div>
 
+      <div>
+        <h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
+        <div className="space-x-4">
+          <Button variant="ghost-inverse" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="ghost-inverse" size="small">
+            Small
+          </Button>
+          <Button variant="ghost-inverse" size="medium">
+            Medium
+          </Button>
+          <Button variant="ghost-inverse" size="large">
+            Large
+          </Button>
+          <Button variant="ghost-inverse" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
       <div>
         <h3 className="text-white font-semibold mb-3">Danger Variant</h3>
         <div className="space-x-4">
@@ -366,6 +391,9 @@ export const AllVariants = {
           <Button variant="ghost" size="large" disabled>
             Ghost Disabled
           </Button>
+          <Button variant="ghost-inverse" size="large" disabled>
+            Ghost Inverse Disabled
+          </Button>
           <Button variant="danger" size="large" disabled>
             Danger Disabled
           </Button>