diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 021681f..a7a790f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx
new file mode 100644
index 0000000..97d6534
--- /dev/null
+++ b/src/pages/signup.tsx
@@ -0,0 +1,106 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+  Link,
+  Paper,
+  Stack,
+  TextField,
+  ThemeProvider,
+  Typography,
+  createStyles,
+  createTheme,
+} from "@mui/material";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import { teal } from "@mui/material/colors";
+import { SignpostOutlined } from "@mui/icons-material";
+
+export const signup = () => {
+  const handleLogin = async () => {};
+  const handleSubmit = () => {};
+  const handlechange = () => {};
+  return (
+    <Box
+      component="div"
+      sx={{ width: "100vw", height: "100vh", backgroundColor: "#FFFDE2" }}
+    >
+      <Paper
+        sx={{
+          width: "50%",
+          margin: "auto",
+          marginY: "auto",
+          p: 3,
+          backgroundColor: "#FFFDcc",
+        }}
+      >
+        <Box component="div" sx={{}}>
+          <Typography
+            color="primary"
+            style={{ textAlign: "center" }}
+            variant="h4"
+            fontWeight="Bold"
+          >
+            SIGN UP
+          </Typography>
+          <Stack>
+            <Stack p={2} spacing={2}>
+              <TextField
+                required
+                label="ユーザーネーム"
+                placeholder="必須"
+                sx={{ backgroundColor: "#FFFDE2" }}
+              />
+              <TextField
+                required
+                label="メールアドレス"
+                placeholder="必須"
+                sx={{ backgroundColor: "#FFFDE2" }}
+              />
+              <TextField
+                required
+                label="パスワード"
+                type="password"
+                placeholder="必須"
+                sx={{ backgroundColor: "#FFFDE2" }}
+
+                // error
+                // helperText="パスワードは半角8文字以上で入力してください"
+              />
+              <TextField
+                required
+                label="パスワード確認"
+                type="password"
+                placeholder="必須"
+                sx={{ backgroundColor: "#FFFDE2" }}
+                // error
+                // helperText="パスワードは半角8文字以上で入力してください"
+              />
+            </Stack>
+            <h2 style={{ textAlign: "center" }}>
+              <Box component="div" p={2}>
+                <Button
+                  variant="contained"
+                  type="submit"
+                  sx={{
+                    width: "20%",
+                    // backgroundColor: "#03A400",
+                    // "&:hover": { background: "#03A400" },
+                    // "&:active": { background: "#03A400" },
+                  }}
+                  // onClick={handleLogin}
+                >
+                  送信
+                </Button>
+              </Box>
+            </h2>
+          </Stack>
+        </Box>
+      </Paper>
+    </Box>
+  );
+};
+
+export default signup;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fd81e88..4107905 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,6 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities; */
 
 :root {
   --foreground-rgb: 0, 0, 0;
diff --git a/tailwind.config.js b/tailwind.config.js
index d53b2ea..0b66309 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
+      // backgroundImage: {
+      //   'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+      //   'gradient-conic':
+      //     'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      // },
     },
   },
   plugins: [],
-}
+};