diff --git a/public/cat.mp3 b/public/cat.mp3
new file mode 100644
index 0000000..6cb646b
Binary files /dev/null and b/public/cat.mp3 differ
diff --git a/public/cat2.mp3 b/public/cat2.mp3
new file mode 100644
index 0000000..545dbb9
Binary files /dev/null and b/public/cat2.mp3 differ
diff --git a/public/images/catTumaguro.png b/public/images/catTumaguro.png
new file mode 100644
index 0000000..dd4b41e
Binary files /dev/null and b/public/images/catTumaguro.png differ
diff --git a/src/components/Signinbutton.tsx b/src/components/Signinbutton.tsx
deleted file mode 100644
index 6016fd9..0000000
--- a/src/components/Signinbutton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button } from "@mui/material";
-import {
-  Box,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-  Direction,
-} from "@mui/material";
-import { useState } from "react";
-
-export default function SigninButton() {
-  return (
-    <Typography style={{ 
-      textAlign: "center",}}>
-    <Box component="div" p={2} >
-    <Button
-      sx={{
-        width: "20%",
-        alignItems: "center"
-      }}
-      variant="text"
-    >
-      sign in
-    </Button>
-    </Box>
-          </Typography>
-  );
-}
diff --git a/src/components/Signupbutton.tsx b/src/components/Signupbutton.tsx
deleted file mode 100644
index 190f9ae..0000000
--- a/src/components/Signupbutton.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button } from "@mui/material";
-import {
-  Box,
-  Paper,
-  Stack,
-  TextField,
-  Direction,
-  Typography,
-} from "@mui/material";
-import React from "react";
-
-import FemaleWorkerCheckingData from "../images/female-worker-checking-data.png";
-
-export default function SignupButton() {
-  return (
-    <Typography style={{ textAlign: "center" }}>
-      <Box component="div" p={2}>
-        <Button
-          color="primary"
-          sx={{
-            width: "20%",
-            alignItems: "center",
-          }}
-          variant="text"
-        >
-          sign up
-        </Button>
-      </Box>
-    </Typography>
-  );
-}
diff --git a/src/components/Todo/AddTodo.tsx b/src/components/Todo/AddTodo.tsx
index e93ac64..6a40b3a 100644
--- a/src/components/Todo/AddTodo.tsx
+++ b/src/components/Todo/AddTodo.tsx
@@ -17,12 +17,12 @@ export default function AddTodo() {
     return (
         <div>
             <CustomButton
-                onClick={() => {
+                onclick={() => {
                     setIsOpen(!isOpen);
                 }}
-                primaryColor="#C5956B"
-                secondaryColor="#C37349"
-                buttonName="Open"
+                primarycolor="#C5956B"
+                secondarycolor="#C37349"
+                buttonname="Open"
             />
             <Modal
                 open={isOpen}
diff --git a/src/components/Todo/Cat.tsx b/src/components/Todo/Cat.tsx
index 03f29eb..a24b323 100644
--- a/src/components/Todo/Cat.tsx
+++ b/src/components/Todo/Cat.tsx
@@ -47,7 +47,6 @@ const Cat = ({ cats }: { cats: Task[] }) => {
                     Math.random() * 30 - 15,
                 ];
                 const rotation = [0, Math.random() * Math.PI, 0];
-                console.log(position);
                 const animationName =
                     randomAnimation[Math.floor(Math.random() * 2)];
                 return (
diff --git a/src/components/Todo/TodoView.tsx b/src/components/Todo/TodoView.tsx
index 6d0f9db..8288117 100644
--- a/src/components/Todo/TodoView.tsx
+++ b/src/components/Todo/TodoView.tsx
@@ -16,7 +16,6 @@ export default function TodoView() {
         const getTasks = async () => {
             try {
                 const token = localStorage.getItem("jwt");
-                console.log(token);
                 const response = await axios.get(
                     `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/my`,
                     { headers: { Authorization: `Bearer ${token}` } }
diff --git a/src/components/common/CustomButton.tsx b/src/components/common/CustomButton.tsx
index b79f4c5..78e7a83 100644
--- a/src/components/common/CustomButton.tsx
+++ b/src/components/common/CustomButton.tsx
@@ -5,14 +5,21 @@ import {
     CircularProgress,
     Typography,
 } from "@mui/material";
-
+import { MouseEventHandler } from "react";
+const randomSeBox = ["/cat.mp3", "/cat2.mp3"];
 export const CustomButton = (
     props: {
-        buttonName: string;
-        primaryColor: string;
-        secondaryColor: string;
+        buttonname: string;
+        primarycolor: string;
+        secondarycolor: string;
+        onclick?: MouseEventHandler<HTMLButtonElement>;
     } & ButtonProps
 ) => {
+    const meow = () => {
+        const index = Math.floor(Math.random() * 2);
+        const audio = new Audio(randomSeBox[index]);
+        audio.play().catch((error) => console.warn(error));
+    };
     return (
         <Box component="div" position="relative" padding={1}>
             <Button
@@ -22,11 +29,17 @@ export const CustomButton = (
                     textTransform: "none",
                     paddingLeft: 0.8,
                     zIndex: 100,
-                    backgroundColor: props.primaryColor,
+                    backgroundColor: props.primarycolor,
                     ":hover": {
-                        backgroundColor: props.primaryColor,
+                        backgroundColor: props.primarycolor,
                     },
                 }}
+                onClick={(event) => {
+                    meow();
+                    if (props.onclick != undefined) {
+                        props.onclick(event);
+                    }
+                }}
                 {...props}
                 variant="contained"
             >
@@ -34,7 +47,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 40,
@@ -48,7 +61,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 50,
@@ -62,7 +75,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 60,
@@ -76,7 +89,7 @@ export const CustomButton = (
                     position="absolute"
                     component="div"
                     sx={{
-                        backgroundColor: props.secondaryColor,
+                        backgroundColor: props.secondarycolor,
                         width: "5px",
                         height: "15px",
                         left: 70,
@@ -97,7 +110,7 @@ export const CustomButton = (
                 >
                     ・ω・
                 </Typography>
-                {props.buttonName}
+                {props.buttonname}
                 <CircularProgress
                     value={60}
                     thickness={15}
@@ -110,9 +123,9 @@ export const CustomButton = (
                         rotate: "200deg",
                         zIndex: 95,
                         borderRadius: "999px",
-                        color: props.primaryColor,
+                        color: props.primarycolor,
                         ":hover": {
-                            color: props.primaryColor,
+                            color: props.primarycolor,
                         },
                     }}
                 />
@@ -126,9 +139,9 @@ export const CustomButton = (
                         right: -15,
                         rotate: "20deg",
                         zIndex: 95,
-                        color: props.primaryColor,
+                        color: props.primarycolor,
                         ":hover": {
-                            color: props.primaryColor,
+                            color: props.primarycolor,
                         },
                     }}
                 />
@@ -138,7 +151,7 @@ export const CustomButton = (
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `20px solid ${props.primaryColor}`,
+                    borderBottom: `20px solid ${props.primarycolor}`,
                     borderLeft: "12px solid transparent",
                     borderRight: "12px solid transparent",
                     width: 0,
@@ -152,7 +165,7 @@ export const CustomButton = (
                 position="absolute"
                 component="div"
                 sx={{
-                    borderBottom: `20px solid ${props.primaryColor}`,
+                    borderBottom: `20px solid ${props.primarycolor}`,
                     borderLeft: "12px solid transparent",
                     borderRight: "12px solid transparent",
                     width: 0,
diff --git a/src/components/common/layout.tsx b/src/components/common/layout.tsx
index 2837202..4b2827f 100644
--- a/src/components/common/layout.tsx
+++ b/src/components/common/layout.tsx
@@ -3,9 +3,14 @@ import React from "react";
 import { Header } from "./Header";
 export const Layout = ({ children }: { children: React.ReactNode }) => {
     return (
-        <Stack>
+        <Stack p={0}>
             <Header />
-            <Box component="div">{children}</Box>
+            <Box
+                component="div"
+                sx={{ height: "92vh", backgroundColor: "#FFFDE2" }}
+            >
+                {children}
+            </Box>
         </Stack>
     );
 };
diff --git a/src/components/schedule/ScheduleCalender.tsx b/src/components/schedule/ScheduleCalender.tsx
index e7196cb..ce6cb45 100644
--- a/src/components/schedule/ScheduleCalender.tsx
+++ b/src/components/schedule/ScheduleCalender.tsx
@@ -17,7 +17,6 @@ export const ScheduleCalendar = () => {
                     `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/schedule/my`,
                     { headers: { Authorization: `Bearer ${token}` } }
                 );
-                console.log(response);
                 setEvent(response.data.schedules);
             } catch (err) {
                 console.log(err);
@@ -26,7 +25,6 @@ export const ScheduleCalendar = () => {
         getEvent();
     }, []);
     const handleScheduleClick = (schedule: any) => {
-        console.log(schedule);
         setSchedule({
             ...schedule.event.extendedProps,
             start: schedule.event.startStr,
diff --git a/src/pages/font.css b/src/pages/font.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6739cd4..b85e7fc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,3 +1,50 @@
-export default function App() {
-    return <>this is top</>;
+import { CustomButton } from "@/components/common/CustomButton";
+import { Box, Stack, Typography } from "@mui/material";
+import Image from "next/image";
+export default function TopPage() {
+    return (
+        <Stack
+            sx={{
+                margin: "auto",
+                marginY: "auto",
+                p: 3,
+            }}
+        >
+            <Box component="div" p={10}>
+                <Typography
+                    color="primary"
+                    sx={{
+                        textAlign: "center",
+                        fontWeight: "bold",
+                    }}
+                    variant="h4"
+                    fontWeight=""
+                >
+                    にゃーーーーーん
+                </Typography>
+            </Box>
+            <Stack direction="row" justifyContent="center" spacing={5}>
+                <Image
+                    src="/images/catTumaguro.png"
+                    alt="catTumaguro.png"
+                    height={300}
+                    width={300}
+                />
+                <Stack alignSelf="center">
+                    <CustomButton
+                        buttonname="サインイン"
+                        href="/signin"
+                        primarycolor="#C37349"
+                        secondarycolor="#C5956B"
+                    />
+                    <CustomButton
+                        buttonname="サインアップ"
+                        href="/signup"
+                        primarycolor="#C37349"
+                        secondarycolor="#C5956B"
+                    />
+                </Stack>
+            </Stack>
+        </Stack>
+    );
 }
diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx
index 32ec163..adbdd16 100644
--- a/src/pages/signin.tsx
+++ b/src/pages/signin.tsx
@@ -87,9 +87,9 @@ const Signin = () => {
                     <Box component="div" p={2} alignSelf="center">
                         <CustomButton
                             onClick={handleSubmit}
-                            buttonName="送信"
-                            primaryColor="gray"
-                            secondaryColor="black"
+                            buttonname="送信"
+                            primarycolor="gray"
+                            secondarycolor="black"
                         />
                     </Box>
                 </Stack>
diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx
index 725c0e0..1db07d4 100644
--- a/src/pages/todo.tsx
+++ b/src/pages/todo.tsx
@@ -18,7 +18,6 @@ export default function Todo() {
                     `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/my`,
                     { headers: { Authorization: `Bearer ${token}` } }
                 );
-                console.log(response);
                 setTasks(response.data.tasks);
             } catch (err) {
                 console.log(err);
diff --git a/src/pages/toppage.tsx b/src/pages/toppage.tsx
deleted file mode 100644
index c483115..0000000
--- a/src/pages/toppage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Box } from "@mui/material";
-import SigninButton from "../components/Signinbutton";
-import SignupButton from "../components/Signupbutton";
-import { Button, Paper, Stack, TextField, Typography } from "@mui/material";
-import { Style } from "@mui/icons-material";
-import Image from "next/image";
-import cattumaguro from "../images/cattumaguro.png";
-import { isTemplateSpan } from "typescript";
-
-export default function Toppage() {
-  return (
-      <div>
-        
-      <Paper
-        sx={{
-            width: "100vw",
-            height: "100vh",
-            margin: "auto",
-            marginY: "auto",
-            p: 3,
-            backgroundColor: "#FFFDE2",
-        }}
-      >
-        <Box component="div" p={10}>
-          <Typography
-            color="primary"
-            sx={{
-                textAlign: "center",
-                fontWeight: "bold",
-            }}
-            variant="h4"
-            fontWeight=""
-          >
-            にゃーーーーーん
-          </Typography>
-        </Box>
-
-        <SigninButton />
-        <SignupButton />
-<Image
-  src={cattumaguro}
-  alt="cattumaguro.png"
-  height={300}
-  width={300}
-/>
-      </Paper>
-    </div>
-  );
-}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index addf419..c459f9a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,20 +2,6 @@
 @tailwind components;
 @tailwind utilities; */
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(