diff --git a/src/pages/Play/GameInterface.tsx b/src/pages/Play/GameInterface.tsx
index 265ad3a..74f3dc4 100644
--- a/src/pages/Play/GameInterface.tsx
+++ b/src/pages/Play/GameInterface.tsx
@@ -209,20 +209,7 @@ const GameInterface = (props: GameInterfaceProps) => {
 	};
 
 	return (
-		<div
-			style={{
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				padding: "1rem",
-				width: "80vw",
-				height: "80vh",
-				gap: "1rem",
-				backgroundColor: "white",
-				borderRadius: "1rem",
-				margin: "0 auto",
-			}}
-		>
+		<div className="p-4 w-[80vw] h-[80vh] bg-white rounded-[1rem] overflow-hidden">
 			<Dialog open={open} onClose={() => setOpen(false)}>
 				<DialogTitle>
 					{isAborted
@@ -244,47 +231,30 @@ const GameInterface = (props: GameInterfaceProps) => {
 				gameState.junme === 19 ? (
 					<DrawEnd drawEnd={drawEnd} />
 				) : (
-					<div>
-						<Header
-							kyoku={gameState.kyoku}
-							junme={gameState.junme}
-							playerInfo={props.playerInfo}
-							setPlayerInfo={props.setPlayerInfo}
-						/>
-						<div
-							style={{
-								display: "grid",
-								gridTemplateColumns: "50% 50%",
-								gridTemplateRows: "50% 50%",
-								width: "70rem",
-								height: "20rem",
-								gap: "0.1rem",
-							}}
-						>
+					<div className="flex flex-col size-full">
+						<div className="h-16">
+							<Header
+								kyoku={gameState.kyoku}
+								junme={gameState.junme}
+								playerInfo={props.playerInfo}
+								setPlayerInfo={props.setPlayerInfo}
+							/>
+						</div>
+						<div className="grid grid-cols-2 grid-rows-2 w-[70rem] h-[20rem] gap-[0.1rem] mx-auto">
 							{gameState.isAgari ? (
 								<TsumoEnd tsumoEnd={tsumoEnd} />
 							) : (
 								<>
 									{display === "sutehai" ? (
-										<span
-											style={{
-												gridColumn: "1",
-												gridRow: "1 / 3",
-											}}
-										>
+										<div className="col-1 row-start-1 row-end-3">
 											<DisplaySwitch
 												display={display}
 												setDisplay={setDisplay}
 											/>
 											<DiscardArea sutehai={gameState.sutehai} />
-										</span>
+										</div>
 									) : (
-										<span
-											style={{
-												gridColumn: "1",
-												gridRow: "1 / 3",
-											}}
-										>
+										<div className="col-1 row-start-1 row-end-3">
 											<DisplaySwitch
 												display={display}
 												setDisplay={setDisplay}
@@ -293,14 +263,9 @@ const GameInterface = (props: GameInterfaceProps) => {
 												tehai={gameState.tehai}
 												tsumo={gameState.tsumo}
 											/>
-										</span>
+										</div>
 									)}
-									<span
-										style={{
-											gridColumn: "2",
-											gridRow: "1",
-										}}
-									>
+									<div className="col-2 row-1">
 										{isLoading ? (
 											<>
 												<HandStatusSkelton />
@@ -311,41 +276,33 @@ const GameInterface = (props: GameInterfaceProps) => {
 												toitsuSyanten={gameState.toitsuSyanten}
 											/>
 										)}
-									</span>
+									</div>
 									{isLoading ? (
 										<>
-											<span
-												style={{
-													gridColumn: "2",
-													gridRow: "2",
-												}}
-											>
+											<div className="col-2 row-2">
 												<WaitingTilesSkeleton />
-											</span>
+											</div>
 										</>
 									) : (
-										<span
-											style={{
-												gridColumn: "2",
-												gridRow: "2",
-											}}
-										>
+										<div className="col-2 row-2">
 											<WaitingTiles tehai={gameState.tehai} />
-										</span>
+										</div>
 									)}
 								</>
 							)}
 						</div>
-						{isLoading ? (
-							<HandTileSkelton />
-						) : (
-							<HandTiles
-								tehai={gameState.tehai}
-								tsumo={gameState.tsumo}
-								tedashi={tedashi}
-								tsumogiri={tsumogiri}
-							/>
-						)}
+						<div className="h-24 my-auto">
+							{isLoading ? (
+								<HandTileSkelton />
+							) : (
+								<HandTiles
+									tehai={gameState.tehai}
+									tsumo={gameState.tsumo}
+									tedashi={tedashi}
+									tsumogiri={tsumogiri}
+								/>
+							)}
+						</div>
 					</div>
 				)
 			) : (
diff --git a/src/pages/Play/components/DiscardArea.tsx b/src/pages/Play/components/DiscardArea.tsx
index 8954741..4912e4d 100644
--- a/src/pages/Play/components/DiscardArea.tsx
+++ b/src/pages/Play/components/DiscardArea.tsx
@@ -13,22 +13,8 @@ function DiscardArea(props: DiscardAreaProps) {
 		};
 	});
 	return (
-		<div
-			style={{
-				height: "90%",
-				borderRadius: "1rem",
-				boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-			}}
-		>
-			<div
-				style={{
-					paddingTop: "1rem",
-					justifyContent: "center",
-					display: "grid",
-					gridTemplateColumns: "repeat(6, 50px)",
-					listStyle: "none",
-				}}
-			>
+		<div className="h-[90%] rounded-[1rem] shadow-md">
+			<div className="pt-4 justify-center grid grid-cols-[repeat(6,50px)] list-none">
 				{sutehaiWithID.map((hai) => (
 					<li key={hai.id}>
 						<img
diff --git a/src/pages/Play/components/DisplaySwitch.tsx b/src/pages/Play/components/DisplaySwitch.tsx
index 33e7a1e..af0f1e4 100644
--- a/src/pages/Play/components/DisplaySwitch.tsx
+++ b/src/pages/Play/components/DisplaySwitch.tsx
@@ -8,13 +8,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
 	return (
 		<div style={{ height: "10%" }}>
 			{props.display === "sutehai" ? (
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "center",
-						gap: "40px",
-					}}
-				>
+				<div className="flex justify-center gap-10">
 					<Button
 						variant="contained"
 						onClick={() => props.setDisplay("sutehai")}
@@ -29,13 +23,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
 					</Button>
 				</div>
 			) : (
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "center",
-						gap: "40px",
-					}}
-				>
+				<div className="flex justify-center gap-10">
 					<Button
 						variant="outlined"
 						onClick={() => props.setDisplay("sutehai")}
diff --git a/src/pages/Play/components/HandStatus.tsx b/src/pages/Play/components/HandStatus.tsx
index fe46e33..e4d87bd 100644
--- a/src/pages/Play/components/HandStatus.tsx
+++ b/src/pages/Play/components/HandStatus.tsx
@@ -5,37 +5,9 @@ type HandStatusProps = {
 
 function HandStatus(props: HandStatusProps) {
 	return (
-		<div
-			style={{
-				height: "100%",
-				display: "flex",
-				gap: "1rem",
-				flexDirection: "column",
-				borderRadius: "1rem",
-				backgroundColor: "white",
-				boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-			}}
-		>
-			<div
-				style={{
-					paddingTop: "1rem",
-					fontWeight: "500",
-					paddingLeft: "1rem",
-					fontSize: "1.5rem",
-					textAlign: "left",
-				}}
-			>
-				向聴数
-			</div>
-			<div
-				style={{
-					fontWeight: "500",
-					paddingLeft: "1.5rem",
-					textAlign: "left",
-					fontSize: "1.3rem",
-					lineHeight: "1.5",
-				}}
-			>
+		<div className="h-full flex flex-col rounded-[1rem] shadow-md">
+			<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
+			<div className="font-medium pt-4 pl-6 text-left text-xl leading-normal">
 				{props.mentsuSyanten === 0 ? (
 					<>メンツ手: テンパイ</>
 				) : (
diff --git a/src/pages/Play/components/HandStatusSkeleton.tsx b/src/pages/Play/components/HandStatusSkeleton.tsx
index 4ed384e..0da469c 100644
--- a/src/pages/Play/components/HandStatusSkeleton.tsx
+++ b/src/pages/Play/components/HandStatusSkeleton.tsx
@@ -3,38 +3,9 @@ import { Skeleton } from "@mui/material";
 export default function HandStatusSkelton() {
 	return (
 		<>
-			<div
-				style={{
-					height: "100%",
-					display: "flex",
-					gap: "1rem",
-					flexDirection: "column",
-					borderRadius: "1rem",
-					backgroundColor: "white",
-					boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-				}}
-			>
-				<div
-					style={{
-						paddingTop: "1rem",
-						fontWeight: "500",
-						paddingLeft: "1rem",
-						fontSize: "1.5rem",
-						textAlign: "left",
-					}}
-				>
-					向聴数
-				</div>
-				<div
-					style={{
-						fontWeight: "500",
-						paddingLeft: "1.5rem",
-						textAlign: "left",
-						fontSize: "1.3rem",
-						lineHeight: "1.5",
-						width: "80%",
-					}}
-				>
+			<div className="h-full flex flex-col gap-4 rounded-[1rem] shadow-md">
+				<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
+				<div className="font-medium pl-6 text-left text-xl leading-normal w-[80%]">
 					<Skeleton variant="text" />
 					<Skeleton variant="text" />
 				</div>
diff --git a/src/pages/Play/components/HandTileSkeleton.tsx b/src/pages/Play/components/HandTileSkeleton.tsx
index 94c2753..820094a 100644
--- a/src/pages/Play/components/HandTileSkeleton.tsx
+++ b/src/pages/Play/components/HandTileSkeleton.tsx
@@ -7,14 +7,7 @@ export default function HandTileSkelton() {
 
 	return (
 		<div>
-			<ul
-				style={{
-					padding: "0",
-					display: "flex",
-					listStyleType: "none",
-					justifyContent: "center",
-				}}
-			>
+			<ul className="p-0 flex list-none justify-center">
 				{arr.map((value) => (
 					<li key={value}>
 						<Skeleton variant="rectangular" width={50} height={70} />
diff --git a/src/pages/Play/components/HandTiles.tsx b/src/pages/Play/components/HandTiles.tsx
index 608efdb..470ebad 100644
--- a/src/pages/Play/components/HandTiles.tsx
+++ b/src/pages/Play/components/HandTiles.tsx
@@ -16,19 +16,8 @@ function HandTiles(props: HandTilesProps) {
 	});
 	return (
 		<>
-			<div
-				style={{
-					display: "flex",
-					flexDirection: "row",
-					justifyContent: "center",
-				}}
-			>
-				<ul
-					style={{
-						display: "flex",
-						listStyleType: "none",
-					}}
-				>
+			<div className="flex justify-center">
+				<ul className="flex list-none">
 					{tehaiWithID.map((hai) => (
 						<li key={hai.id}>
 							<img
diff --git a/src/pages/Play/components/ValidTiles.tsx b/src/pages/Play/components/ValidTiles.tsx
index b4610be..04f9598 100644
--- a/src/pages/Play/components/ValidTiles.tsx
+++ b/src/pages/Play/components/ValidTiles.tsx
@@ -11,30 +11,11 @@ export default function ValidTiles(props: ValidTilesProps) {
 	const shortenedInfo = extractValidTile(validTileInfo);
 	const keys = [...shortenedInfo.keys()];
 	return (
-		<div
-			style={{
-				borderRadius: "1rem",
-				boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-				height: "90%",
-				overflow: "hidden",
-			}}
-		>
+		<div className="rounded-[1rem] shadow-md h-[90%]">
 			{keys.map((key) => (
 				<div key={key}>
-					<p
-						style={{
-							fontSize: "1.3rem",
-							fontWeight: "500",
-						}}
-					>
-						{key}{" "}
-					</p>
-					<ul
-						style={{
-							display: "flex",
-							listStyleType: "none",
-						}}
-					>
+					<p className="text-xl font-medium pt-4">{key} </p>
+					<ul className="flex justify-center list-none">
 						{shortenedInfo.get(key)?.map((hai) => (
 							<li key={`${hai.kind} - ${hai.value}`}>
 								<img
diff --git a/src/pages/Play/components/WaitingTiles.tsx b/src/pages/Play/components/WaitingTiles.tsx
index fcacc1b..05af2a0 100644
--- a/src/pages/Play/components/WaitingTiles.tsx
+++ b/src/pages/Play/components/WaitingTiles.tsx
@@ -15,43 +15,14 @@ function WaitingTiles(props: WaitingTilesProps) {
 		};
 	});
 	return (
-		<div
-			style={{
-				height: "100%",
-				borderRadius: "1rem",
-				boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-			}}
-		>
-			<div
-				style={{
-					paddingTop: "0.5rem",
-					paddingLeft: "1rem",
-					fontSize: "1.5rem",
-					textAlign: "left",
-					fontWeight: "500",
-				}}
-			>
-				待ち
-			</div>
+		<div className="h-full rounded-[1rem] shadow-md">
+			<div className="pt-4 pl-4 text-2xl text-left font-medium">待ち</div>
 			{machihai.length === 0 ? (
-				<div
-					style={{
-						paddingLeft: "1.5rem",
-						fontSize: "1.3rem",
-						fontWeight: "500",
-					}}
-				>
+				<div className="font-medium pt-4 pl-6 text-left text-xl leading-normal">
 					なし
 				</div>
 			) : (
-				<div
-					style={{
-						listStyleType: "none",
-						display: "flex",
-						paddingLeft: "1.3rem",
-						paddingTop: "0.5rem",
-					}}
-				>
+				<div className="list-none flex pl-5 pt-2">
 					{machihaiWithId.map((hai) => (
 						<li key={hai.id}>
 							<img
diff --git a/src/pages/Play/components/WaitingTilesSkeleton.tsx b/src/pages/Play/components/WaitingTilesSkeleton.tsx
index d5b0d51..3d5ae78 100644
--- a/src/pages/Play/components/WaitingTilesSkeleton.tsx
+++ b/src/pages/Play/components/WaitingTilesSkeleton.tsx
@@ -1,37 +1,10 @@
-import { Height } from "@mui/icons-material";
 import { Skeleton } from "@mui/material";
 
 export default function WaitingTilesSkeleton() {
 	return (
-		<div
-			style={{
-				height: "100%",
-				borderRadius: "1rem",
-				boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-			}}
-		>
-			<div
-				style={{
-					paddingTop: "0.5rem",
-					paddingLeft: "1rem",
-					fontSize: "1.5rem",
-					textAlign: "left",
-					fontWeight: "500",
-				}}
-			>
-				待ち
-			</div>
-			<div
-				style={{
-					paddingTop: "1rem",
-					fontWeight: "500",
-					paddingLeft: "1.5rem",
-					textAlign: "left",
-					fontSize: "1.3rem",
-					lineHeight: "1.5",
-					width: "80%",
-				}}
-			>
+		<div className="h-full rounded-[1rem] shadow-md">
+			<div className="pt-4 pl-4 text-2xl text-left font-medium">待ち</div>
+			<div className="pt-4 font-medium pl-6 text-left text-xl leading-normal w-[80%]">
 				<Skeleton variant="text" />
 			</div>
 		</div>
diff --git a/src/pages/Result/style.ts b/src/pages/Result/style.ts
index 01f1890..63ff2c3 100644
--- a/src/pages/Result/style.ts
+++ b/src/pages/Result/style.ts
@@ -30,6 +30,8 @@ export const headerTitleStyle: { [key: string]: string } = {
 	position: "absolute",
 	left: "50%",
 	transform: "translateX(-50%)",
+	fontSize: "30px",
+	fontWeight: "bold",
 };
 
 export const topRankingStyle: { [key: string]: string } = {
diff --git a/src/pages/Tutorial/BasicRules.tsx b/src/pages/Tutorial/BasicRules.tsx
index a715bb5..c83ceab 100644
--- a/src/pages/Tutorial/BasicRules.tsx
+++ b/src/pages/Tutorial/BasicRules.tsx
@@ -1,7 +1,9 @@
 export default function BasicRules() {
 	return (
 		<>
-			<h2>麻雀の基本的なルールについて</h2>
+			<div className="text-2xl font-bold mb-2">
+				麻雀の基本的なルールについて
+			</div>
 
 			<img
 				src="/tutorial/exampleTehai.png"
@@ -18,7 +20,7 @@ export default function BasicRules() {
 				</li>
 			</ul>
 
-			<h3>面子（メンツ）とは？</h3>
+			<div className="text-xl font-bold my-2">面子（メンツ）とは？</div>
 			<p>
 				同じ牌3枚（刻子、コーツ）または同じ種類の連続した数字の牌3枚（順子、シュンツ）
 			</p>
@@ -31,11 +33,11 @@ export default function BasicRules() {
 			/>
 			<img src="/tutorial/Syuntsu.png" alt="順子" width="160" height="70" />
 
-			<h3>雀頭（ジャントウ）とは？</h3>
+			<div className="text-xl font-bold my-2">雀頭（ジャントウ）とは？</div>
 			<p>同じ牌2枚</p>
 			<img src="/tutorial/Jantou.png" alt="雀頭" width="110" height="70" />
 
-			<h3>聴牌（テンパイ）とは？</h3>
+			<div className="text-xl font-bold my-2">聴牌（テンパイ）とは？</div>
 			<p>
 				特定の牌を山から持ってくる（<strong>ツモ</strong>
 				る）か他家が捨てた牌を持ってきたら（<strong>ロン</strong>
@@ -53,7 +55,7 @@ export default function BasicRules() {
 				<strong>立直（リーチ）</strong>
 				することで、立直という役がつき、その牌を持ってきたときにアガリになります。また、立直以外にも役はありますが、初心者のうちはポンやチーなどはせず、立直に向かうことが大切です。
 			</p>
-			<h3>シャンテン数とは？</h3>
+			<div className="text-xl font-bold my-2">シャンテン数とは？</div>
 			<p>
 				テンパイまで最短であと何巡必要か、という値のことをシャンテン数と言います。例えば、以下の手牌では、次巡に索子（ソーズ）の3（竹が3つ描かれている牌）か筒子（ピンズ）の3（丸が3つ描かれている牌）を持ってきて、字牌の中（チュン）を捨てればテンパイできるので、1シャンテン（イーシャンテン）であると言えます。
 			</p>
@@ -63,8 +65,8 @@ export default function BasicRules() {
 				width="700"
 				height="75"
 			/>
-			<h3>七対子（チートイツ）とは？</h3>
-			<p>
+			<div className="text-xl font-bold my-2">七対子（チートイツ）とは？</div>
+			<p className="mb-4">
 				麻雀は役がないとアガることができないという話を先ほどしましたが、立直以外にも役はあって、その一つが七対子です。七対子とは読んで字の如く、対子を7個揃えると成立します。覚えるのがとても簡単で、実戦でも高打点を作りたいときに狙います。また一般的には、対子が4つ（七対子の2シャンテン）から、4面子1雀頭揃える手順と七対子に向かう手順のバランスを取るとよいとされています。七対子と区別するために、4面子1雀頭揃えた手のことをメンツ手と言うことがあります。
 			</p>
 		</>
diff --git a/src/pages/Tutorial/LocalRules.tsx b/src/pages/Tutorial/LocalRules.tsx
index 4e910a8..cc97602 100644
--- a/src/pages/Tutorial/LocalRules.tsx
+++ b/src/pages/Tutorial/LocalRules.tsx
@@ -1,7 +1,9 @@
 export default function LocalRules() {
 	return (
 		<>
-			<h2>一人麻雀のローカルルールについて</h2>
+			<div className="text-2xl font-bold mb-2">
+				一人麻雀のローカルルールについて
+			</div>
 
 			<ul>
 				<li>
diff --git a/src/pages/Tutorial/Tutorial.tsx b/src/pages/Tutorial/Tutorial.tsx
index 2c954e5..b930ea0 100644
--- a/src/pages/Tutorial/Tutorial.tsx
+++ b/src/pages/Tutorial/Tutorial.tsx
@@ -3,7 +3,6 @@ import { Button } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import styles from "../../styles/Tutorial.module.css";
 import BasicRules from "./BasicRules";
 import LocalRules from "./LocalRules";
 
@@ -15,8 +14,8 @@ export default function Tutorial() {
 	const contents: ContentsType[] = ["basic", "local"];
 
 	return (
-		<div className={styles.container}>
-			<div className={styles.header}>
+		<div className="flex flex-col items-center bg-white rounded-[1rem] absolute h-[80vh] w-[80vw] left-[10%] top-[10%] pt-4 pl-4">
+			<div className="flex items-center w-full h-[10%]">
 				<IconButton
 					onClick={() => {
 						navigate("/");
@@ -24,11 +23,13 @@ export default function Tutorial() {
 				>
 					<HighlightOffIcon style={{ color: "#2B2B2B", fontSize: "2rem" }} />
 				</IconButton>
-				<h2 className={styles.headerTitle}>遊び方</h2>
+				<div className="absolute left-1/2 -translate-x-1/2 font-bold text-3xl">
+					一人麻雀 チュートリアル
+				</div>
 			</div>
 
-			<div className={styles.body}>
-				<div className={styles.drawer}>
+			<div className="grid size-full gap-[3%] h-[90%] overflow-auto pt-4">
+				<div className="col-start-1 col-end-2 flex w-50 flex-col border-r border-gray-300 px-5 h-full">
 					{contents.map((content) => (
 						<Button
 							key={content}
@@ -43,7 +44,7 @@ export default function Tutorial() {
 					))}
 				</div>
 
-				<div className={styles.contents}>
+				<div className="col-start-2 col-end-3 text-left">
 					{currentContent === "basic" && <BasicRules />}
 					{currentContent === "local" && <LocalRules />}
 				</div>
diff --git a/src/styles/Tutorial.module.css b/src/styles/Tutorial.module.css
deleted file mode 100644
index de235e2..0000000
--- a/src/styles/Tutorial.module.css
+++ /dev/null
@@ -1,56 +0,0 @@
-img {
-	max-width: 100%;
-}
-
-.container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 16px;
-	color: #2b2b2b;
-	background-color: white;
-	border-radius: 1%;
-	left: 10%;
-	top: 10%;
-	min-height: 80vh;
-	min-width: 80vw;
-	max-height: calc(100vh - 100px);
-	overflow-y: auto;
-}
-
-.header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	position: relative;
-}
-
-.headerTitle {
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-}
-
-.body {
-	display: grid;
-	width: 100%;
-	height: 100%;
-	gap: 3%;
-}
-
-.drawer {
-	grid-column: 1 / 2;
-	display: flex;
-	width: 10rem;
-	flex-direction: column;
-	border-right: 0.1rem solid #ccc;
-	padding-left: 5%;
-	padding-right: 5%;
-	height: 100%;
-}
-
-.contents {
-	grid-column: 2 / 3;
-	text-align: left;
-}