diff --git a/learn/src/components/AlphabetTableDialog.tsx b/learn/src/components/AlphabetTableDialog.tsx
index d930705c..c45ef5ec 100644
--- a/learn/src/components/AlphabetTableDialog.tsx
+++ b/learn/src/components/AlphabetTableDialog.tsx
@@ -2,13 +2,13 @@ import { useState } from "react";
 import {
   Typography,
   Box,
-  Button,
   Table,
   TableRow,
   TableCell,
   Paper,
 } from "@mui/material";
 import { alphabetTable } from "@/utils/translateBraille";
+import CommonButton from "./CommonButton";
 
 export default function AlphabetTableDialog(): JSX.Element {
   const [isAlphabetTableOpen, setIsAlphabetTableOpen] =
@@ -17,15 +17,14 @@ export default function AlphabetTableDialog(): JSX.Element {
     <Box paddingTop={2}>
       {isAlphabetTableOpen ? (
         <>
-          <Button
-            color="inherit"
+          <CommonButton
             variant="outlined"
             onClick={() => {
               setIsAlphabetTableOpen(false);
             }}
           >
             点字⇔アルファベット表を閉じる
-          </Button>
+          </CommonButton>
           <Box paddingTop={2}>
             <Paper elevation={2} sx={{ my: 2 }}>
               <Typography variant="h6" component="h2" color="inherit" p={2}>
@@ -97,15 +96,14 @@ export default function AlphabetTableDialog(): JSX.Element {
           </Box>
         </>
       ) : (
-        <Button
-          color="inherit"
+        <CommonButton
           variant="outlined"
           onClick={() => {
             setIsAlphabetTableOpen(true);
           }}
         >
           点字⇔アルファベット表を確認する
-        </Button>
+        </CommonButton>
       )}
     </Box>
   );
diff --git a/learn/src/components/BottomStepper.tsx b/learn/src/components/BottomStepper.tsx
index c60a38a2..88d50817 100644
--- a/learn/src/components/BottomStepper.tsx
+++ b/learn/src/components/BottomStepper.tsx
@@ -1,6 +1,7 @@
 import { type Dispatch, type SetStateAction } from "react";
 import { useRouter } from "next/router";
-import { BottomNavigation, Button, MobileStepper } from "@mui/material";
+import { BottomNavigation, MobileStepper } from "@mui/material";
+import CommonButton from "./CommonButton";
 
 export default function BottomStepper({
   selectedStep,
@@ -20,8 +21,7 @@ export default function BottomStepper({
         position="bottom"
         activeStep={selectedStep}
         backButton={
-          <Button
-            variant="contained"
+          <CommonButton
             disabled={selectedStep === 0}
             onClick={() => {
               if (selectedStep > 0) {
@@ -30,12 +30,11 @@ export default function BottomStepper({
             }}
           >
             前へ
-          </Button>
+          </CommonButton>
         }
         nextButton={
           selectedStep !== length - 1 ? (
-            <Button
-              variant="contained"
+            <CommonButton
               disabled={selectedStep === length - 1}
               onClick={() => {
                 if (selectedStep < length - 1) {
@@ -44,16 +43,16 @@ export default function BottomStepper({
               }}
             >
               次へ
-            </Button>
+            </CommonButton>
           ) : (
-            <Button
+            <CommonButton
               variant="contained"
               onClick={async () => {
                 await router.push("/");
               }}
             >
               終了
-            </Button>
+            </CommonButton>
           )
         }
       />
diff --git a/learn/src/components/CommonButton.tsx b/learn/src/components/CommonButton.tsx
new file mode 100644
index 00000000..939e8ba2
--- /dev/null
+++ b/learn/src/components/CommonButton.tsx
@@ -0,0 +1,44 @@
+import { MouseEventHandler } from "react";
+
+type CommonButtonProps = {
+  disabled?: boolean | undefined;
+  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+  variant?: "outlined" | "contained";
+  children: React.ReactNode;
+};
+
+function CommonButton(props: CommonButtonProps) {
+  const { disabled, onClick, variant, children } = props;
+  const baseClassName =
+    "mb-1 rounded border px-4 py-2 text-center font-medium ";
+  let className = baseClassName;
+
+  if (disabled) {
+    if (variant === "contained") {
+      className += "text-white bg-blue-300 dark:bg-white dark:text-blue-300";
+    } else {
+      className +=
+        "border-blue-300 text-blue-300 dark:border-blue-300 dark:text-blue-300";
+    }
+  } else if (!disabled) {
+    if (variant === "contained") {
+      className += "text-white bg-blue-500 hover:text-blue-500 hover:bg-white";
+    } else {
+      className +=
+        "border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300";
+    }
+  }
+
+  return (
+    <button
+      className={className}
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default CommonButton;
diff --git a/learn/src/components/HiraganaTableDialog.tsx b/learn/src/components/HiraganaTableDialog.tsx
index db938cc5..4250a4cc 100644
--- a/learn/src/components/HiraganaTableDialog.tsx
+++ b/learn/src/components/HiraganaTableDialog.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import {
   Typography,
   Box,
-  Button,
   Table,
   TableHead,
   TableRow,
@@ -10,6 +9,7 @@ import {
   Paper,
 } from "@mui/material";
 import { hiraganaTable } from "@/utils/translateBraille";
+import CommonButton from "./CommonButton";
 
 export default function HiraganaTableDialog(): JSX.Element {
   const [isHiraganaTableOpen, setIsHiraganaTableOpen] =
@@ -18,15 +18,14 @@ export default function HiraganaTableDialog(): JSX.Element {
     <Box paddingTop={2}>
       {isHiraganaTableOpen ? (
         <>
-          <Button
-            color="inherit"
+          <CommonButton
             variant="outlined"
             onClick={() => {
               setIsHiraganaTableOpen(false);
             }}
           >
             点字⇔ひらがな表を閉じる
-          </Button>
+          </CommonButton>
           <Box paddingTop={2}>
             <Paper elevation={2} sx={{ my: 2 }}>
               <Typography variant="h6" component="h2" color="inherit" p={2}>
@@ -208,15 +207,14 @@ export default function HiraganaTableDialog(): JSX.Element {
           </Box>
         </>
       ) : (
-        <Button
-          color="inherit"
+        <CommonButton
           variant="outlined"
           onClick={() => {
             setIsHiraganaTableOpen(true);
           }}
         >
           点字⇔ひらがな表を確認する
-        </Button>
+        </CommonButton>
       )}
     </Box>
   );
diff --git a/learn/src/components/PracticeField.tsx b/learn/src/components/PracticeField.tsx
index f233f9f1..addf2988 100644
--- a/learn/src/components/PracticeField.tsx
+++ b/learn/src/components/PracticeField.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import useTypedBrailleString from "@/hooks/useTypedBrailleString";
 import translateBraille from "@/utils/translateBraille";
-import { TextField, Typography, Box, Button } from "@mui/material";
+import { TextField, Typography, Box } from "@mui/material";
 import { BrailleArray } from "@dot-tutor/braille";
+import CommonButton from "./CommonButton";
 
 export default function PracticeField({
   question,
@@ -42,7 +43,7 @@ export default function PracticeField({
         </Typography>
       </Box>
       <Box m={1}>
-        <Button
+        <CommonButton
           variant="outlined"
           onClick={() => {
             setCorrectOrNot(false);
@@ -53,7 +54,7 @@ export default function PracticeField({
           }}
         >
           答え合わせをする
-        </Button>
+        </CommonButton>
       </Box>
       <Box m={1}>
         {answered
diff --git a/learn/src/components/TenjiInput.tsx b/learn/src/components/TenjiInput.tsx
index 81259cb5..2dd218fa 100644
--- a/learn/src/components/TenjiInput.tsx
+++ b/learn/src/components/TenjiInput.tsx
@@ -18,6 +18,7 @@ export default function TenjiInput(props: {
   const oncePressedKeysRef = useRef(new Set<string>());
   return (
     <input
+      className="border-2 border-solid"
       ref={inputRef}
       onChange={(e) =>
         setValue((e.target.value.match(/[⠀-⣿]/g) ?? [""]).join(""))
diff --git a/learn/src/components/TopBar.tsx b/learn/src/components/TopBar.tsx
index f674e19f..795cd091 100644
--- a/learn/src/components/TopBar.tsx
+++ b/learn/src/components/TopBar.tsx
@@ -8,12 +8,12 @@ import {
   Toolbar,
   Stack,
   Typography,
-  Button,
   Link,
   IconButton,
 } from "@mui/material";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import { type TutorialDialogSteps } from "../types/Tutorial";
+import CommonButton from "./CommonButton";
 
 export default function TopBar({
   tutorialDialogSteps,
@@ -58,15 +58,14 @@ export default function TopBar({
           <Stack direction="row" spacing={2} alignItems="center">
             {tutorialDialogSteps !== undefined && (
               <>
-                <Button
-                  color="inherit"
-                  variant="outlined"
+                <CommonButton
+                  variant="contained"
                   onClick={() => {
                     setIsTutorialOpen(true);
                   }}
                 >
                   スライドで確認
-                </Button>
+                </CommonButton>
                 <TutorialDialog
                   open={isTutorialOpen}
                   setOpen={setIsTutorialOpen}
diff --git a/learn/src/components/TutorialDialog.tsx b/learn/src/components/TutorialDialog.tsx
index 9c6e1a14..8123108d 100644
--- a/learn/src/components/TutorialDialog.tsx
+++ b/learn/src/components/TutorialDialog.tsx
@@ -7,9 +7,9 @@ import {
   DialogActions,
   Typography,
   IconButton,
-  Button,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import CommonButton from "./CommonButton";
 
 export default function TutorialDialog({
   open,
@@ -62,7 +62,7 @@ export default function TutorialDialog({
         {tutorialDialogSteps[selectedStep].content}
       </DialogContent>
       <DialogActions>
-        <Button
+        <CommonButton
           variant="outlined"
           disabled={selectedStep === 0}
           onClick={() => {
@@ -72,8 +72,8 @@ export default function TutorialDialog({
           }}
         >
           前へ
-        </Button>
-        <Button
+        </CommonButton>
+        <CommonButton
           variant="outlined"
           disabled={selectedStep === tutorialDialogSteps.length - 1}
           onClick={() => {
@@ -83,16 +83,16 @@ export default function TutorialDialog({
           }}
         >
           次へ
-        </Button>
+        </CommonButton>
         {selectedStep === tutorialDialogSteps.length - 1 && (
-          <Button
+          <CommonButton
             variant="contained"
             onClick={() => {
               closeDialog();
             }}
           >
             はじめる
-          </Button>
+          </CommonButton>
         )}
       </DialogActions>
     </Dialog>
diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/index.tsx b/learn/src/pages/keyboard/tutorial/tutorial1/index.tsx
index 2691c92e..c14ff575 100644
--- a/learn/src/pages/keyboard/tutorial/tutorial1/index.tsx
+++ b/learn/src/pages/keyboard/tutorial/tutorial1/index.tsx
@@ -1,21 +1,12 @@
 import React, { useState, useEffect, useRef } from "react";
-import {
-  Paper,
-  Divider,
-  Box,
-  Typography,
-  Button,
-  Stack,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from "@mui/material";
+import { Accordion, AccordionSummary, AccordionDetails } from "@mui/material";
 import translateBraille from "@/utils/translateBraille";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import TenjiInput from "@/components/TenjiInput";
 import { BrailleArray } from "@dot-tutor/braille";
+import CommonButton from "@/components/CommonButton";
 
 interface Question {
   question: string;
@@ -86,74 +77,67 @@ export default function Tutorial1({
     setQuestionIndex(0);
   }, [questionList]);
 
+  const sectionClass = "mb-8 rounded pt-3 shadow";
+  const sectionTitleClass = "mb-3 ml-3 text-xl font-bold";
+  const sectionTextClass = "min-h-24 p-3";
+
   return (
     <>
-      <Paper elevation={2} sx={{ my: 2 }}>
-        <Typography variant="h6" component="h2" color="inherit" p={2}>
-          問題
-        </Typography>
-        <Divider />
-        <Typography sx={{ minHeight: 100 }} p={2}>
+      <div className={sectionClass}>
+        <p className={sectionTitleClass}>問題</p>
+        <hr />
+        <p className={sectionTextClass}>
           {questionList !== undefined &&
             (questionIndex >= questionList.length
               ? "すべての問題を解きました！"
               : `「${questionList[questionIndex].question}」を入力してください。`)}
-        </Typography>
-      </Paper>
+        </p>
+      </div>
 
-      <Paper elevation={2} sx={{ my: 2 }}>
-        <Stack direction="row" p={2} spacing={2}>
-          <Typography variant="h6" component="h2" color="inherit">
-            点字を入力
-          </Typography>
-          <Button
-            variant="outlined"
-            onClick={resetInput}
-            startIcon={<RefreshIcon />}
-          >
+      <div className={sectionClass}>
+        <div className="flex py-1">
+          <p className={sectionTitleClass}>点字を入力</p>
+          <CommonButton onClick={resetInput}>
+            <RefreshIcon />
             リセット
-          </Button>
-        </Stack>
-        <Divider />
-        <Box sx={{ minHeight: 100 }} p={2}>
+          </CommonButton>
+        </div>
+        <hr />
+        <div className={sectionTextClass}>
           <TenjiInput
             brailleDotCount={6}
             inputRef={inputRef}
             setValue={setTypedBraille}
           />
-        </Box>
-      </Paper>
+        </div>
+      </div>
 
-      <Paper elevation={2} sx={{ my: 2 }}>
-        <Typography variant="h6" component="h2" color="inherit" p={2}>
-          翻訳
-        </Typography>
-        <Divider />
-        <Box display="flex" sx={{ minHeight: 100 }} p={2}>
+      <div className={sectionClass}>
+        <p className={sectionTitleClass}>翻訳</p>
+        <hr />
+        <div className={`flex ${sectionTextClass}`}>
           {translatedBrailleString}
           {goNextQuestion && <CheckCircleOutlineIcon color="success" />}
-        </Box>
-      </Paper>
+        </div>
+      </div>
 
       {questionList !== undefined &&
         questionList[questionIndex] !== undefined &&
         questionList[questionIndex].hint !== undefined && (
-          <Paper elevation={2} sx={{ my: 2 }}>
+          <div className={sectionClass}>
             <Accordion>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography variant="h6" component="h2" color="inherit">
-                  ヒント
-                </Typography>
-                <Divider />
+                <p className={sectionTitleClass}>ヒント</p>
+                <hr />
               </AccordionSummary>
               <AccordionDetails>
-                <Typography>{questionList[questionIndex].hint}</Typography>
+                <p className="pl-3">{questionList[questionIndex].hint}</p>
               </AccordionDetails>
             </Accordion>
-          </Paper>
+          </div>
         )}
 
-      <Button
+      <CommonButton
         onClick={() => {
           if (questionList !== undefined) {
             if (questionIndex < questionList.length) {
@@ -164,10 +148,9 @@ export default function Tutorial1({
           resetInput();
         }}
         disabled={!goNextQuestion}
-        variant="contained"
       >
         次の問題へ
-      </Button>
+      </CommonButton>
     </>
   );
 }