diff --git a/src/components/Todo/AddTodo.tsx b/src/components/Todo/AddTodo.tsx
index c9ed5ed..e93ac64 100644
--- a/src/components/Todo/AddTodo.tsx
+++ b/src/components/Todo/AddTodo.tsx
@@ -9,19 +9,21 @@ import {
 } from "@mui/material";
 import Image from "next/image";
 import { useState } from "react";
+import { CustomButton } from "../common/CustomButton";
 import DatePick from "../common/DatePick";
 
 export default function AddTodo() {
     const [isOpen, setIsOpen] = useState(false);
     return (
         <div>
-            <Button
+            <CustomButton
                 onClick={() => {
                     setIsOpen(!isOpen);
                 }}
-            >
-                Open
-            </Button>
+                primaryColor="#C5956B"
+                secondaryColor="#C37349"
+                buttonName="Open"
+            />
             <Modal
                 open={isOpen}
                 onClose={() => setIsOpen(false)}
diff --git a/src/components/common/CustomButton.tsx b/src/components/common/CustomButton.tsx
index 620c5f6..b79f4c5 100644
--- a/src/components/common/CustomButton.tsx
+++ b/src/components/common/CustomButton.tsx
@@ -1,59 +1,183 @@
-import { Box, Button, CircularProgress, Typography } from "@mui/material";
+import {
+    Box,
+    Button,
+    ButtonProps,
+    CircularProgress,
+    Typography,
+} from "@mui/material";
 
-export const CustomButton = ({ buttonName }: { buttonName: string }) => {
+export const CustomButton = (
+    props: {
+        buttonName: string;
+        primaryColor: string;
+        secondaryColor: string;
+    } & ButtonProps
+) => {
     return (
-        <Button
-            sx={{
-                position: "relative",
-                borderRadius: "999px",
-                textTransform: "none",
-                paddingLeft: 0.8,
-            }}
-            variant="contained"
-        >
+        <Box component="div" position="relative" padding={1}>
+            <Button
+                sx={{
+                    position: "relative",
+                    borderRadius: "999px",
+                    textTransform: "none",
+                    paddingLeft: 0.8,
+                    zIndex: 100,
+                    backgroundColor: props.primaryColor,
+                    ":hover": {
+                        backgroundColor: props.primaryColor,
+                    },
+                }}
+                {...props}
+                variant="contained"
+            >
+                <Box
+                    position="absolute"
+                    component="div"
+                    sx={{
+                        backgroundColor: props.secondaryColor,
+                        width: "5px",
+                        height: "15px",
+                        left: 40,
+                        top: 0,
+                        borderEndEndRadius: "100px",
+                        borderEndStartRadius: "100px",
+                        zIndex: -10,
+                    }}
+                />
+                <Box
+                    position="absolute"
+                    component="div"
+                    sx={{
+                        backgroundColor: props.secondaryColor,
+                        width: "5px",
+                        height: "15px",
+                        left: 50,
+                        top: 0,
+                        borderEndEndRadius: "100px",
+                        borderEndStartRadius: "100px",
+                        zIndex: -10,
+                    }}
+                />
+                <Box
+                    position="absolute"
+                    component="div"
+                    sx={{
+                        backgroundColor: props.secondaryColor,
+                        width: "5px",
+                        height: "15px",
+                        left: 60,
+                        top: 0,
+                        borderEndEndRadius: "100px",
+                        borderEndStartRadius: "100px",
+                        zIndex: -10,
+                    }}
+                />
+                <Box
+                    position="absolute"
+                    component="div"
+                    sx={{
+                        backgroundColor: props.secondaryColor,
+                        width: "5px",
+                        height: "15px",
+                        left: 70,
+                        top: 0,
+                        borderEndEndRadius: "100px",
+                        borderEndStartRadius: "100px",
+                        zIndex: -10,
+                    }}
+                />
+                <Typography
+                    variant="caption"
+                    sx={{
+                        fontSize: "15px",
+                        letterSpacing: -3,
+                        paddingRight: 1,
+                        zIndex: 120,
+                    }}
+                >
+                    ・ω・
+                </Typography>
+                {props.buttonName}
+                <CircularProgress
+                    value={60}
+                    thickness={15}
+                    variant="determinate"
+                    size={14}
+                    sx={{
+                        position: "absolute",
+                        right: -17,
+                        top: 0,
+                        rotate: "200deg",
+                        zIndex: 95,
+                        borderRadius: "999px",
+                        color: props.primaryColor,
+                        ":hover": {
+                            color: props.primaryColor,
+                        },
+                    }}
+                />
+                <CircularProgress
+                    value={60}
+                    thickness={10}
+                    variant="determinate"
+                    size={20}
+                    sx={{
+                        position: "absolute",
+                        right: -15,
+                        rotate: "20deg",
+                        zIndex: 95,
+                        color: props.primaryColor,
+                        ":hover": {
+                            color: props.primaryColor,
+                        },
+                    }}
+                />
+            </Button>
+
             <Box
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `20px solid #03A400`,
+                    borderBottom: `20px solid ${props.primaryColor}`,
                     borderLeft: "12px solid transparent",
                     borderRight: "12px solid transparent",
                     width: 0,
                     height: 0,
-                    left: 18,
-                    top: -10,
-                    zIndex: -10,
+                    left: 24,
+                    top: 0,
+                    zIndex: 90,
                 }}
             />
             <Box
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `10px solid black`,
-                    borderLeft: "6px solid transparent",
-                    borderRight: "6px solid transparent",
-                    opacity: 0.5,
+                    borderBottom: `20px solid ${props.primaryColor}`,
+                    borderLeft: "12px solid transparent",
+                    borderRight: "12px solid transparent",
                     width: 0,
                     height: 0,
-                    left: 9,
-                    top: -5,
-                    zIndex: -5,
+                    left: 10,
+                    top: 0,
+                    zIndex: 90,
                 }}
             />
             <Box
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `20px solid #03A400`,
-                    borderLeft: "12px solid transparent",
-                    borderRight: "12px solid transparent",
+                    borderBottom: `10px solid black`,
+                    borderLeft: "6px solid transparent",
+                    borderRight: "6px solid transparent",
+                    opacity: 0.5,
                     width: 0,
                     height: 0,
-                    left: 3,
-                    top: -10,
-                    zIndex: -10,
+                    left: 30,
+                    top: 3,
+                    zIndex: 90,
                 }}
             />
+
             <Box
                 position="absolute"
                 component="div"
@@ -64,44 +188,11 @@ export const CustomButton = ({ buttonName }: { buttonName: string }) => {
                     opacity: 0.5,
                     width: 0,
                     height: 0,
-                    left: 24,
-                    top: -5,
-                    zIndex: -5,
-                }}
-            />
-            <Typography
-                variant="caption"
-                sx={{ fontSize: "15px", letterSpacing: -3, paddingRight: 1 }}
-            >
-                ・ω・
-            </Typography>
-            {buttonName}
-            <CircularProgress
-                value={60}
-                thickness={15}
-                variant="determinate"
-                size={14}
-                sx={{
-                    position: "absolute",
-                    right: -17,
-                    top: 0,
-                    rotate: "200deg",
-                    zIndex: -10,
-                    borderRadius: "999px",
-                }}
-            />
-            <CircularProgress
-                value={60}
-                thickness={10}
-                variant="determinate"
-                size={20}
-                sx={{
-                    position: "absolute",
-                    right: -15,
-                    rotate: "20deg",
-                    zIndex: -10,
+                    left: 16,
+                    top: 3,
+                    zIndex: 90,
                 }}
             />
-        </Button>
+        </Box>
     );
 };
diff --git a/src/components/schedule/ScheduleCalender.tsx b/src/components/schedule/ScheduleCalender.tsx
index b67e16e..e7196cb 100644
--- a/src/components/schedule/ScheduleCalender.tsx
+++ b/src/components/schedule/ScheduleCalender.tsx
@@ -1,7 +1,7 @@
 import { Schedule } from "@/types/schema";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import FullCalendar from "@fullcalendar/react";
-import { Button, Paper, Typography } from "@mui/material";
+import { Paper, Typography } from "@mui/material";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { CustomDate } from "../common/CustomDate";
@@ -50,11 +50,6 @@ export const ScheduleCalendar = () => {
                         padding: 2,
                     }}
                 >
-                    <Button
-                        onClick={() => {
-                            console.log(schedule);
-                        }}
-                    ></Button>
                     <Typography>{schedule?.title}</Typography>
                     <Typography>
                         開始:
diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx
index e1e4cea..32ec163 100644
--- a/src/pages/signin.tsx
+++ b/src/pages/signin.tsx
@@ -1,112 +1,100 @@
-
-import React, { ChangeEvent, useState } from "react";
-import {
-  Box,
-  Button,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import { SigninUser } from "../types/schema";
+import { CustomButton } from "@/components/common/CustomButton";
+import { Box, Paper, Stack, TextField, Typography } from "@mui/material";
 import axios from "axios";
 import { useRouter } from "next/router";
+import { ChangeEvent, useState } from "react";
+import { SigninUser } from "../types/schema";
 const Signin = () => {
-  const router = useRouter();
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setUserInput({ ...userInput, [event.target.name]: event.target.value });
-  };
-  const [userInput, setUserInput] = useState<SigninUser>({
-    email: "",
-    password: "",
-  });
-  const handleSubmit = () => {
-    if (userInput.email === "") {
-      return;
-    } else if (userInput.password === "") {
-      return;
-    }
-    handleSignIn();
-  };
+    const router = useRouter();
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setUserInput({ ...userInput, [event.target.name]: event.target.value });
+    };
+    const [userInput, setUserInput] = useState<SigninUser>({
+        email: "",
+        password: "",
+    });
+    const handleSubmit = () => {
+        if (userInput.email === "") {
+            return;
+        } else if (userInput.password === "") {
+            return;
+        }
+        handleSignIn();
+    };
+
+    const handleSignIn = async () => {
+        try {
+            const response = await axios.post(
+                `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/users/signin`,
+                userInput
+            );
 
-  const handleSignIn = async () => {
-    try {
-      const response = await axios.post(
-        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/users/signin`,
-        userInput
-      );
-    
-      if (response.status == 200) {
-        localStorage.setItem("jwt", response.data.jwt);
-        router.push("/todo");
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  return (
-    <Box
-      component="div"
-      sx={{ width: "100vw", height: "100vh", backgroundColor: "#FFFDE2" }}
-      display="flex"
-    >
-      <Paper
-        sx={{
-          width: "50%",
-          margin: "auto",
-          marginY: "auto",
-          p: 3,
-          backgroundColor: "#FFFDcc",
-        }}
-      >
-        <Typography
-          color="primary"
-          sx={{
-            textAlign: "center",
-            fontWeight: "bold",
-          }}
-          variant="h4"
-          fontWeight=""
+            if (response.status == 200) {
+                localStorage.setItem("jwt", response.data.jwt);
+                router.push("/todo");
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    };
+    return (
+        <Box
+            component="div"
+            sx={{ width: "100vw", height: "100vh", backgroundColor: "#FFFDE2" }}
+            display="flex"
         >
-          SIGN IN
-        </Typography>
-        <Stack>
-          <Stack p={2} spacing={2} sx={{ justifyContent: "center" }}>
-            <TextField
-              sx={{ backgroundColor: "#FFFDED" }}
-              placeholder="必須"
-              required
-              id="outlined-required"
-              label="メールアドレス"
-              onChange={handleChange}
-              name="email"
-            />
-            <TextField
-              required
-              label=" パスワード　(パスワードは半角16文字以上で入力してください。) "
-              type="password"
-              placeholder="必須"
-              sx={{ backgroundColor: "#FFFDED" }}
-              onChange={handleChange}
-              name="password"
-            />
-          </Stack>
-          <Typography style={{ textAlign: "center" }}>
-            <Box component="div" p={2}>
-              <Button
-                onClick={handleSubmit}
+            <Paper
                 sx={{
-                  width: "20%",
+                    width: "50%",
+                    margin: "auto",
+                    marginY: "auto",
+                    p: 3,
+                    backgroundColor: "#FFFDcc",
                 }}
-                variant="contained"
-              >
-                送信
-              </Button>
-            </Box>
-          </Typography>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+            >
+                <Typography
+                    color="primary"
+                    sx={{
+                        textAlign: "center",
+                        fontWeight: "bold",
+                    }}
+                    variant="h4"
+                    fontWeight=""
+                >
+                    SIGN IN
+                </Typography>
+                <Stack>
+                    <Stack p={2} spacing={2} sx={{ justifyContent: "center" }}>
+                        <TextField
+                            sx={{ backgroundColor: "#FFFDED" }}
+                            placeholder="必須"
+                            required
+                            id="outlined-required"
+                            label="メールアドレス"
+                            onChange={handleChange}
+                            name="email"
+                        />
+                        <TextField
+                            required
+                            label=" パスワード　(パスワードは半角16文字以上で入力してください。) "
+                            type="password"
+                            placeholder="必須"
+                            sx={{ backgroundColor: "#FFFDED" }}
+                            onChange={handleChange}
+                            name="password"
+                        />
+                    </Stack>
+                    <Box component="div" p={2} alignSelf="center">
+                        <CustomButton
+                            onClick={handleSubmit}
+                            buttonName="送信"
+                            primaryColor="gray"
+                            secondaryColor="black"
+                        />
+                    </Box>
+                </Stack>
+            </Paper>
+        </Box>
+    );
 };
 export default Signin;