diff --git a/pkgs/frontend/app/components/CommonButton.tsx b/pkgs/frontend/app/components/CommonButton.tsx
new file mode 100644
index 0000000..337cab6
--- /dev/null
+++ b/pkgs/frontend/app/components/CommonButton.tsx
@@ -0,0 +1,32 @@
+import { Button, ButtonProps } from "~/components/ui/button";
+
+interface CommonButtonProps extends Omit<ButtonProps, "width"> {
+	children: React.ReactNode;
+	width?: "full" | number;
+	size?: "sm" | "md" | "lg";
+	backgroundColor?: string;
+	color?: string;
+}
+
+export const CommonButton = ({
+	children,
+	width = "full",
+	size = "md",
+	backgroundColor,
+	color,
+	...props
+}: CommonButtonProps) => {
+	return (
+		<Button
+			w={width === "full" ? "100%" : width}
+			size={size}
+			backgroundColor={backgroundColor}
+			color={color}
+			{...props}
+		>
+			{children}
+		</Button>
+	);
+};
+
+export default CommonButton;
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index 3e050f4..fef0165 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/pkgs/frontend/app/routes/_index.tsx
@@ -1,79 +1,83 @@
 import {
-  Box,
-  Button,
-  Checkbox,
-  ClientOnly,
-  HStack,
-  Heading,
-  Progress,
-  RadioGroup,
-  Skeleton,
-  VStack,
-} from "@chakra-ui/react"
-import type { MetaFunction } from "@remix-run/node"
-import { ColorModeToggle } from "../components/color-mode-toggle"
+	Box,
+	Button,
+	Checkbox,
+	ClientOnly,
+	HStack,
+	Heading,
+	Progress,
+	RadioGroup,
+	Skeleton,
+	VStack,
+} from "@chakra-ui/react";
+import type { MetaFunction } from "@remix-run/node";
+import { ColorModeToggle } from "../components/color-mode-toggle";
+import { CommonButton } from "~/components/CommonButton";
 
 export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ]
-}
+	return [
+		{ title: "New Remix App" },
+		{ name: "description", content: "Welcome to Remix!" },
+	];
+};
 
 export default function Index() {
-  return (
-    <Box textAlign="center" fontSize="xl" pt="30vh">
-      <VStack gap="8">
-        <img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
-        <Heading size="2xl" letterSpacing="tight">
-          Welcome to Chakra UI v3 + Remix
-        </Heading>
+	return (
+		<Box textAlign="center" fontSize="xl" pt="30vh">
+			<CommonButton width="full" backgroundColor="red" size="lg" color="blue">
+				<>Click me</>
+			</CommonButton>
+			<VStack gap="8">
+				<img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
+				<Heading size="2xl" letterSpacing="tight">
+					Welcome to Chakra UI v3 + Remix
+				</Heading>
 
-        <HStack gap="10">
-          <Checkbox.Root defaultChecked>
-            <Checkbox.HiddenInput />
-            <Checkbox.Control>
-              <Checkbox.Indicator />
-            </Checkbox.Control>
-            <Checkbox.Label>Checkbox</Checkbox.Label>
-          </Checkbox.Root>
+				<HStack gap="10">
+					<Checkbox.Root defaultChecked>
+						<Checkbox.HiddenInput />
+						<Checkbox.Control>
+							<Checkbox.Indicator />
+						</Checkbox.Control>
+						<Checkbox.Label>Checkbox</Checkbox.Label>
+					</Checkbox.Root>
 
-          <RadioGroup.Root display="inline-flex" defaultValue="1">
-            <RadioGroup.Item value="1" mr="2">
-              <RadioGroup.ItemHiddenInput />
-              <RadioGroup.ItemControl>
-                <RadioGroup.ItemIndicator />
-              </RadioGroup.ItemControl>
-              <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
-            </RadioGroup.Item>
+					<RadioGroup.Root display="inline-flex" defaultValue="1">
+						<RadioGroup.Item value="1" mr="2">
+							<RadioGroup.ItemHiddenInput />
+							<RadioGroup.ItemControl>
+								<RadioGroup.ItemIndicator />
+							</RadioGroup.ItemControl>
+							<RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
+						</RadioGroup.Item>
 
-            <RadioGroup.Item value="2">
-              <RadioGroup.ItemHiddenInput />
-              <RadioGroup.ItemControl>
-                <RadioGroup.ItemIndicator />
-              </RadioGroup.ItemControl>
-              <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
-            </RadioGroup.Item>
-          </RadioGroup.Root>
-        </HStack>
+						<RadioGroup.Item value="2">
+							<RadioGroup.ItemHiddenInput />
+							<RadioGroup.ItemControl>
+								<RadioGroup.ItemIndicator />
+							</RadioGroup.ItemControl>
+							<RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
+						</RadioGroup.Item>
+					</RadioGroup.Root>
+				</HStack>
 
-        <Progress.Root width="300px" value={65} striped animated>
-          <Progress.Track>
-            <Progress.Range />
-          </Progress.Track>
-        </Progress.Root>
+				<Progress.Root width="300px" value={65} striped animated>
+					<Progress.Track>
+						<Progress.Range />
+					</Progress.Track>
+				</Progress.Root>
 
-        <HStack>
-          <Button>Lets go</Button>
-          <Button variant="outline">bun install @chakra-ui/react</Button>
-        </HStack>
-      </VStack>
+				<HStack>
+					<Button>Lets go</Button>
+					<Button variant="outline">bun install @chakra-ui/react</Button>
+				</HStack>
+			</VStack>
 
-      <Box pos="absolute" top="4" right="4">
-        <ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}>
-          <ColorModeToggle />
-        </ClientOnly>
-      </Box>
-    </Box>
-  )
+			<Box pos="absolute" top="4" right="4">
+				<ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}>
+					<ColorModeToggle />
+				</ClientOnly>
+			</Box>
+		</Box>
+	);
 }