diff --git a/pkgs/frontend/app/components/button.tsx b/pkgs/frontend/app/components/CommonButton.tsx
similarity index 58%
rename from pkgs/frontend/app/components/button.tsx
rename to pkgs/frontend/app/components/CommonButton.tsx
index ec0e6c7..bc1dc6d 100644
--- a/pkgs/frontend/app/components/button.tsx
+++ b/pkgs/frontend/app/components/CommonButton.tsx
@@ -1,9 +1,6 @@
-import {
-	Button as ChakraButton,
-	ButtonProps as ChakraButtonProps,
-} from "@chakra-ui/react";
+import { Button, ButtonProps } from "@chakra-ui/react";
 
-interface ButtonProps extends Omit<ChakraButtonProps, "width"> {
+interface CommonButtonProps extends Omit<ButtonProps, "width"> {
 	children: React.ReactNode;
 	width?: "full" | number;
 	size?: "sm" | "md" | "lg";
@@ -11,16 +8,16 @@ interface ButtonProps extends Omit<ChakraButtonProps, "width"> {
 	color?: string;
 }
 
-export const Button = ({
+export const CommonButton = ({
 	children,
 	width = "full",
 	size = "md",
 	backgroundColor,
 	color,
 	...props
-}: ButtonProps) => {
+}: CommonButtonProps) => {
 	return (
-		<ChakraButton
+		<Button
 			w={width === "full" ? "100%" : width}
 			size={size}
 			backgroundColor={backgroundColor}
@@ -28,8 +25,8 @@ export const Button = ({
 			{...props}
 		>
 			{children}
-		</ChakraButton>
+		</Button>
 	);
 };
 
-export default Button;
+export default CommonButton;
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index c8d067b..fef0165 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/pkgs/frontend/app/routes/_index.tsx
@@ -1,5 +1,6 @@
 import {
 	Box,
+	Button,
 	Checkbox,
 	ClientOnly,
 	HStack,
@@ -11,7 +12,7 @@ import {
 } from "@chakra-ui/react";
 import type { MetaFunction } from "@remix-run/node";
 import { ColorModeToggle } from "../components/color-mode-toggle";
-import { Button } from "~/components/button";
+import { CommonButton } from "~/components/CommonButton";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -23,9 +24,9 @@ export const meta: MetaFunction = () => {
 export default function Index() {
 	return (
 		<Box textAlign="center" fontSize="xl" pt="30vh">
-			<Button width="full" backgroundColor="red" size="lg" color="blue">
+			<CommonButton width="full" backgroundColor="red" size="lg" color="blue">
 				<>Click me</>
-			</Button>
+			</CommonButton>
 			<VStack gap="8">
 				<img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
 				<Heading size="2xl" letterSpacing="tight">