diff --git a/src/app/_layout/Header/ColorModeToggle.tsx b/src/app/_layout/Header/ColorModeToggle.tsx
index 7dfa53cb..48d443df 100644
--- a/src/app/_layout/Header/ColorModeToggle.tsx
+++ b/src/app/_layout/Header/ColorModeToggle.tsx
@@ -3,7 +3,7 @@
 import { Moon, SunMedium } from "lucide-react";
 import { useTheme } from "next-themes";
 import { forwardRef, useEffect, useState } from "react";
-import { Button, ButtonProps } from "^/components/ui/button";
+import Button, { ButtonProps } from "^/components/ui/Button";
 import Tooltip from "^/components/ui/Tooltip";
 
 export interface ColorModeToggleProps extends Partial<ButtonProps> {}
diff --git a/src/app/_layout/Header/GithubLink.tsx b/src/app/_layout/Header/GithubLink.tsx
index 03e279fb..ae86928b 100644
--- a/src/app/_layout/Header/GithubLink.tsx
+++ b/src/app/_layout/Header/GithubLink.tsx
@@ -3,7 +3,7 @@
 import { Github } from "lucide-react";
 import { forwardRef } from "react";
 import ExternalLink from "^/components/ExternalLink";
-import { Button, ButtonProps } from "^/components/ui/button";
+import Button, { ButtonProps } from "^/components/ui/Button";
 import Tooltip from "^/components/ui/Tooltip";
 
 export interface GithubLinkProps extends Omit<ButtonProps, "aria-label"> {}
diff --git a/src/app/_page/MainForm/MainForm.tsx b/src/app/_page/MainForm/MainForm.tsx
index a5344844..c4407204 100644
--- a/src/app/_page/MainForm/MainForm.tsx
+++ b/src/app/_page/MainForm/MainForm.tsx
@@ -3,7 +3,7 @@ import { TooltipContent, TooltipTrigger } from "@radix-ui/react-tooltip";
 import { Loader2 } from "lucide-react";
 import npa from "npm-package-arg";
 import { FormEvent, useCallback, useMemo, useRef, useState } from "react";
-import { Button } from "^/components/ui/button";
+import Button from "^/components/ui/Button";
 import { TooltipRoot } from "^/components/ui/Tooltip";
 import { AutocompleteSuggestion } from "^/lib/autocomplete";
 import CenterInputAddon from "./CenterInputAddon";
diff --git a/src/components/ui/button.tsx b/src/components/ui/Button.tsx
similarity index 96%
rename from src/components/ui/button.tsx
rename to src/components/ui/Button.tsx
index c33aba74..25ed767e 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/Button.tsx
@@ -3,7 +3,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 import cn from "^/lib/cn";
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
     "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
@@ -52,4 +52,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export default Button;