diff --git a/src/main/java/com/example/demo/app/presentation/controller/CourseController.java b/src/main/java/com/example/demo/app/presentation/controller/CourseController.java
index 7628b09..bb13534 100644
--- a/src/main/java/com/example/demo/app/presentation/controller/CourseController.java
+++ b/src/main/java/com/example/demo/app/presentation/controller/CourseController.java
@@ -41,7 +41,7 @@ public class CourseController {
 
 		session.setAttribute("userForm", userForm);
 		model.addAttribute("mode", "regist");
-		model.addAttribute("currentCourseId", 4);
+		model.addAttribute("currentCourseId", courseService.findByName("バランスコース"));
 		model.addAttribute("courseList", CourseForm.convertFrom(courseService.findAll()));
 		model.addAttribute("courseInfoList", CourseInfoForm.convertFrom(courseInfoService.findAll()));
 
diff --git a/src/main/resources/static/css/menu.css b/src/main/resources/static/css/menu.css
index 7f15fd6..4ef46fc 100644
--- a/src/main/resources/static/css/menu.css
+++ b/src/main/resources/static/css/menu.css
@@ -1,6 +1,7 @@
 body {
     margin: 0;
-    padding: 0;
+	padding-top:80px;
+	padding-bottom:120px;
 }
 
 #calendar {
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 0000000..399873b
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,214 @@
+/* =======================
+   全体
+======================= */
+body {
+    padding-top: 80px;
+    padding-bottom: 80px;
+    background-color: #f8f9fa;
+}
+
+/* =======================
+   コンテンツ
+======================= */
+.main-container {
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 0 12px;
+}
+
+/* =======================
+   タイトル
+======================= */
+.page-title {
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+/* =======================
+   ヘッダー
+======================= */
+.app-header {
+    background-color: #E3F2FD;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.app-logo {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+/* =======================
+   フッター
+======================= */
+.app-footer {
+    background-color: #E3F2FD;
+    border-top: 1px solid #d0d7de;
+}
+
+/* =======================
+   カード
+======================= */
+.app-card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 15px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
+}
+
+.card {
+    border-radius: 12px;
+    margin-bottom: 12px;
+}
+
+.card-body {
+    padding: 12px;
+}
+
+/* =======================
+   カレンダー
+======================= */
+
+#calendar {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+#calendar th,
+#calendar td {
+    border: 1px solid black;
+}
+
+th {
+    font-weight: bold;
+    height: 35px;
+    font-size: 13px;
+    text-align: center;
+}
+
+td {
+    width: 14%;
+    height: 70px;
+    padding: 5px;
+    text-align: left;
+    vertical-align: top;
+}
+
+td:hover {
+    background-color: lightblue;
+}
+
+.holiday {
+    color: red;
+}
+
+#today {
+    font-weight: bold;
+    background-color: bisque;
+}
+
+.calendar-title {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    text-align: center;
+}
+
+.calendar-date {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
+.year {
+    font-size: 20px;
+}
+
+.month {
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.month-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+
+    font-size: 28px;
+    text-decoration: none;
+    color: #333;
+
+    border-radius: 50%;
+}
+
+.month-button:hover {
+    background-color: #eee;
+}
+
+.month-button:last-child {
+    justify-self: end;
+}
+
+.date {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.income {
+    color: blue;
+    font-size: 10px;
+}
+
+.expense {
+    color: red;
+    font-size: 10px;
+}
+
+.total {
+    margin: 15px 10px;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+
+    font-size: 16px;
+    text-align: right;
+}
+
+/* =======================
+   金額表示
+======================= */
+.plus {
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.minus {
+    color: #0d6efd;
+    font-weight: bold;
+}
+
+/* =======================
+   テーブル
+======================= */
+.table {
+    background-color: white;
+}
+
+.table th {
+    vertical-align: middle;
+}
+
+.table td {
+    vertical-align: middle;
+}
+
+/* =======================
+   ボタン
+======================= */
+.btn {
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/analysis.html b/src/main/resources/templates/analysis.html
index a44b40a..c85e4e0 100644
--- a/src/main/resources/templates/analysis.html
+++ b/src/main/resources/templates/analysis.html
@@ -4,17 +4,18 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>分析画面</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 	</div>
 	
-	<div class="container mt-4">
-	<h2 class="text-center">支出分析</h2>
+	<div class="main-container">
+	<h2 class="page-title">支出分析</h2>
 	
-	<div class="text-center">
+	<div class="calendar-title">
 
 		<a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}">
 			←
@@ -49,8 +50,8 @@
 					      ? '＋' + ${analysisForm.totalDifferenceAmount}
 						  : ${analysisForm.totalDifferenceAmount}"
 				      th:class="${analysisForm.totalDifferenceAmount >= 0}
-					      ? 'color-danger;'
-						  : 'color-primary;'">
+					      ? 'text-danger'
+						  : 'text-primary'">
 					0
 				  </td>
 		      </tr>
@@ -84,16 +85,16 @@
 			          ? '＋' + ${category.monthDifferenceAmount}
 				      : ${category.monthDifferenceAmount}"
 			      th:class="${category.monthDifferenceAmount >= 0}
-				      ? 'color-danger;'
-				  	  : 'color-primary;'">
+				      ? 'text-danger'
+				  	  : 'text-primary'">
 			</span>
 			<br>
 			<span th:text="${category.courseDifferenceAmount >= 0}
 				      ? '＋' + ${category.courseDifferenceAmount}
 					  : ${category.courseDifferenceAmount}"
 			      th:class="${category.courseDifferenceAmount >= 0}
-				      ? 'color-danger;'
-				      : 'color-primary;'">
+				      ? 'text-danger'
+				      : 'text-primary'">
 			</span>
 		  </td>
 	    </tr>
diff --git a/src/main/resources/templates/authentication.html b/src/main/resources/templates/authentication.html
index 4ea2f8e..1e820a9 100644
--- a/src/main/resources/templates/authentication.html
+++ b/src/main/resources/templates/authentication.html
@@ -2,59 +2,122 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>認証</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
 
-<body class="pb-5 pt-5">
-	
-	<div th:replace="~{header :: header}">
-		</div>
-	
-	<main>
-		<h1>本人認証確認</h1>
-	
-		<form th:action="@{/authentication}" th:object="${authenticationForm}" method="post">
-	
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email" id="mailAddress" th:field="*{mailAddress}">
-			</div>
-	
-			<div>
-				<label for="secretQuestionId">秘密の質問</label>
-				<select id="secretQuestionId" th:field="*{secretQuestionId}">
-	
-					<option value="">選択してください</option>
-	
-					<option th:each="question : ${questionList}" th:value="${question.secretQuestionId}"
-						th:text="${question.questionText}">
-					</option>
-	
-				</select>
-			</div>
-	
-			<div>
-				<label for="secretAnswer">秘密の質問の回答</label>
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}">
-			</div>
-	
-			<button type="submit">確認</button>
-	
-		</form>
-		
-		<form th:action="@{/login}" method="get">
-			<button type="submit">戻る</button>
-		</form>
-	</main>
-	
-	<script th:if="${errorMessage}" th:inline="javascript">
-	    alert(/*[[${errorMessage}]]*/);
-	</script>
-	
-	
+<body style="padding-top:80px; padding-bottom:80px;">
+
+    <div th:replace="~{header :: header}">
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            本人認証
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/authentication}"
+                      th:object="${authenticationForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
+                        <input type="email"
+                               id="mailAddress"
+                               class="form-control"
+                               th:field="*{mailAddress}"
+                               required>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="secretQuestionId"
+                               class="form-label">
+                            秘密の質問
+                        </label>
+
+                        <select id="secretQuestionId"
+                                class="form-select"
+                                th:field="*{secretQuestionId}">
+
+                            <option value="">
+                                選択してください
+                            </option>
+
+                            <option th:each="question : ${questionList}"
+                                    th:value="${question.secretQuestionId}"
+                                    th:text="${question.questionText}">
+                            </option>
+
+                        </select>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="secretAnswer"
+                               class="form-label">
+                            秘密の質問の回答
+                        </label>
+
+                        <input type="text"
+                               id="secretAnswer"
+                               class="form-control"
+                               th:field="*{secretAnswer}"
+                               required>
+
+                    </div>
+
+                    <div class="d-grid gap-2">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            確認
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <div class="d-grid mt-3">
+
+            <form th:action="@{/login}"
+                  method="get">
+
+                <button type="submit"
+                        class="btn btn-outline-secondary w-100">
+                    戻る
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+
+    <script th:if="${errorMessage}"
+            th:inline="javascript">
+        alert(/*[[${errorMessage}]]*/);
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/footer.html b/src/main/resources/templates/footer.html
index 2274cd3..8e446ef 100644
--- a/src/main/resources/templates/footer.html
+++ b/src/main/resources/templates/footer.html
@@ -4,10 +4,11 @@
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
 <title>フッター</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 <body>
 	
-	<footer th:fragment="footer" class="fixed-bottom border-top py-2" style="background-color:#E3F2FD;">
+	<footer th:fragment="footer" class="fixed-bottom border-top py-2 app-footer" style="background-color:#E3F2FD;">
 		
 	  <nav data-bs-theme="light">
 		<div class="card-footer text-center">
diff --git a/src/main/resources/templates/goal_edit.html b/src/main/resources/templates/goal_edit.html
index 64e980d..4915c33 100644
--- a/src/main/resources/templates/goal_edit.html
+++ b/src/main/resources/templates/goal_edit.html
@@ -1,43 +1,55 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>目標編集</title>
 	
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
-
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 	
 	<div th:replace="~{header :: header}"></div>
+	
+	<div class="main-container">
 
-	<h1>目標編集</h1>
+	<h1 class="page-title">目標編集</h1>
+	
+	<div class="card shadow-sm">
+		
+		<div class="card-body">
+		
+			<form th:action="@{/goal/update}" th:object="${goalForm}" method="post">
+				<input type="hidden" th:field="*{goalId}">
 
-	<form th:action="@{/goal/update}" th:object="${goalForm}" method="post">
-		<input type="hidden" th:field="*{goalId}">
+			<div>
+				<label>目標名</label>
+				<input type="text" th:field="*{goalTitle}" required>
+			</div>
 
-		<div>
-			<label>目標名</label>
-			<input type="text" th:field="*{goalTitle}" required>
+			<div>
+				<label>目標説明</label>
+				<textarea th:field="*{goalSubtitle}" required></textarea>
+			</div>
+
+			<div>
+				<label>目標金額</label>
+				<input type="number" th:field="*{targetAmount}" min="0" max="1000000000" required>
+			</div>
+
+			<div>
+				<label>目標達成期限</label>
+				<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
+			</div>
+
+			</form>
+			
 		</div>
-
-		<div>
-			<label>目標説明</label>
-			<textarea th:field="*{goalSubtitle}" required></textarea>
-		</div>
-
-		<div>
-			<label>目標金額</label>
-			<input type="number" th:field="*{targetAmount}" required min="1">
-		</div>
-
-		<div>
-			<label>目標達成期限</label>
-			<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
-		</div>
-		<button type="submit">更新する</button>
-
-	</form>
+	</div>
+	
+	<button type="submit" class="btn btn-sm btn-primary w-100">更新する</button>
+	
+	</div>
 
 	<div th:replace="~{footer :: footer}"></div>
 
diff --git a/src/main/resources/templates/goal_view.html b/src/main/resources/templates/goal_view.html
index dfccdf1..719d946 100644
--- a/src/main/resources/templates/goal_view.html
+++ b/src/main/resources/templates/goal_view.html
@@ -2,204 +2,198 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>目標詳細</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
 </head>
 
-<body class="pb-5 pt-5">
-
+<body style="padding-top:80px; padding-bottom:80px;">
 	<div th:replace="~{header :: header}"></div>
 
-	<h1>目標詳細</h1>
+
+	<div class="main-container">
+
+		<h1 class="page-title">目標詳細</h1>
+
+		<!--    -->
+		<div th:if="${graphGoal != null}">
+
+			<h2 th:text="${graphGoal.goalTitle}"></h2>
+
+			<p>
+				目標金額：
+				<span th:text="${graphGoal.targetAmount}"></span>
+			</p>
+
+		</div>
 
 
-	<div th:if="${graphGoal != null}">
-
-		<h2 th:text="${graphGoal.goalTitle}"></h2>
-
-		<p>
-			目標金額：
-			<span th:text="${graphGoal.targetAmount}"></span>
-		</p>
-
-	</div>
+		<div style="width: 600px; height: 300px;">
+			<canvas id="myChart"></canvas>
+		</div>
 
 
-	<div style="width: 600px; height: 300px;">
-		<canvas id="myChart"></canvas>
-	</div>
+		<script th:inline="javascript">
 
-
-	<script th:inline="javascript">
-
-		const months =
+			const months =
             /*[[${achievementList.![month.monthValue]}]]*/[];
 
-		const achievementRates =
+			const achievementRates =
             /*[[${achievementList.![achievementRate]}]]*/[];
 
-		const labels =
-			months.map(month => month + '月');
+			const labels =
+				months.map(month => month + '月');
 
 
-		const myCt =
-			document.getElementById('myChart');
+			const myCt =
+				document.getElementById('myChart');
 
 
-		const myChart =
-			new Chart(myCt, {
+			const myChart =
+				new Chart(myCt, {
 
-				type: 'bar',
+					type: 'bar',
 
-				data: {
+					data: {
 
-					labels: labels,
+						labels: labels,
 
-					datasets: [
-						{
-							label: '達成率',
+						datasets: [
+							{
+								label: '達成率',
 
-							data: achievementRates,
+								data: achievementRates,
 
-							backgroundColor:
-								'rgba(54, 162, 235, 0.5)',
+								backgroundColor:
+									'rgba(54, 162, 235, 0.5)',
 
-							borderColor:
-								'rgba(54, 162, 235, 1)',
+								borderColor:
+									'rgba(54, 162, 235, 1)',
 
-							borderWidth: 1
-						}
-					]
-				},
+								borderWidth: 1
+							}
+						]
+					},
 
-				options: {
+					options: {
 
-					responsive: true,
+						responsive: true,
 
-					scales: {
+						scales: {
 
-						y: {
-							beginAtZero: true,
-							max: 100,
+							y: {
+								beginAtZero: true,
+								max: 100,
 
-							ticks: {
-								callback: function (value) {
-									return value + '%';
+								ticks: {
+									callback: function (value) {
+										return value + '%';
+									}
 								}
 							}
 						}
 					}
-				}
-			});
+				});
 
-	</script>
+		</script>
+		<!--    -->
+
+		<div>
+
+			<ul>
+
+				<li th:each="goalForm : ${goalFormList}" class="transaction-item">
+
+					<div>
 
 
-	<div>
+						<form th:action="@{/goal}" method="get">
+							<table class="table">
 
-		<ul>
+								<input type="radio" name="goalId" th:value="${goalForm.goalId}"
+									th:checked="${graphGoal != null and graphGoal.goalId == goalForm.goalId}"
+									onchange="this.form.submit()">
+								<tr>
+									<th>目標名</th>
+									<td th:text="${goalForm.goalTitle}"></td>
+								</tr>
 
-			<li th:each="goalForm : ${goalFormList}" class="transaction-item">
+								<tr>
+									<th>目標説明</th>
+									<td th:text="${goalForm.goalSubtitle}"></td>
+								</tr>
+								<tr>
+									<th>目標金額</th>
+									<td th:text="${goalForm.targetAmount}"></td>
+								</tr>
+								<tr>
+									<th>目標達成期限</th>
+									<td th:text="${goalForm.deadline}"></td>
+								</tr>
 
-				<div>
+								<tr>
+									<th>達成率</th>
+									<td th:text="${goalForm.achievementRate} + '%'"></td>
+								</tr>
+							</table>
+						</form>
 
-					<form th:action="@{/goal}" method="get">
-
-						<input type="radio" name="goalId" th:value="${goalForm.goalId}"
-							th:checked="${graphGoal != null and graphGoal.goalId == goalForm.goalId}"
-							onchange="this.form.submit()">
-
-						<p>
-
-							目標名：
-							<span th:text="${goalForm.goalTitle}">
-							</span>
-
-							<br>
-
-							目標説明：
-							<span th:text="${goalForm.goalSubtitle}">
-							</span>
-
-							<br>
-
-							目標金額：
-							<span th:text="${goalForm.targetAmount}">
-							</span>
-
-							<br>
-
-							目標達成期限：
-							<span th:text="${goalForm.deadline}">
-							</span>
-
-							<br>
-
-							達成率：
-							<span th:text="${goalForm.achievementRate} + '%'">
-							</span>
-
-						</p>
-
-					</form>
-
-				</div>
+					</div>
 
 
-				<div class="transaction-buttons">
+					<div class="transaction-buttons">
 
-					<form th:action="@{/goal/edit}" method="get">
+						<form th:action="@{/goal/edit}" method="get">
 
-						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
 
-						<button type="submit">
-							編集
-						</button>
+							<button type="submit" class="btn btn-sm btn-primary w-100">
+								編集
+							</button>
 
-					</form>
+						</form>
 
 
-					<form th:action="@{/goal/delete}" method="post">
+						<form th:action="@{/goal/delete}" method="post">
 
-						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
 
-						<button type="submit">
-							削除
-						</button>
+							<button type="submit" class="btn btn-sm btn-primary w-100">
+								削除
+							</button>
 
-					</form>
+						</form>
 
-				</div>
+					</div>
 
-			</li>
+				</li>
 
-		</ul>
+			</ul>
 
-	</div>
+		</div>
 
 
-	<form th:action="@{/goal/create}" method="get">
+		<form th:action="@{/goal/create}" method="get">
 
-		<button type="submit">
-			新規登録
-		</button>
+			<button type="submit" class="btn btn-sm btn-primary w-100">
+				新規登録
+			</button>
 
-	</form>
-	<form th:action="@{/goal/record}" method="get">
+		</form>
+		<form th:action="@{/goal/record}" method="get">
 
-		<button type="submit">
-			履歴
-		</button>
+			<button type="submit" class="btn btn-sm btn-primary w-100">
+				履歴
+			</button>
 
-	</form>
+		</form>
 
 
-	<div th:replace="~{footer :: footer}"></div>
+		<div th:replace="~{footer :: footer}"></div>
 
 </body>
 
-
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/header.html b/src/main/resources/templates/header.html
index de068b9..867f4a3 100644
--- a/src/main/resources/templates/header.html
+++ b/src/main/resources/templates/header.html
@@ -4,12 +4,13 @@
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
 <title>ヘッダー</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 <body>
 	
 	<header th:fragment="header" class="fixed-top">
 
-		<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
+		<nav class="navbar app-header" style="background-color: #e3f2fd;" data-bs-theme="light">
 		  <div class="container-fluid">
 		    <a th:href="@{/menu}" class="navbar-brand fw-bold">Monegement</a>
 			<div class="d-flex gap-2">
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 472e628..f34ac81 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,50 +1,101 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>ログイン</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
-	<div th:replace="~{header :: header}">
-		</div>
-	
-	<main>
-		<h1>ログイン</h1>
-		
-		<div th:if="${errorMessage}" th:text="${errorMessage}"></div>
-		<form th:action="@{/login}" th:object="${loginForm}" method="post">
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				
-				<input type="email"
-				id="mailAddress"
-				th:field="*{mailAddress}"
-				required>
-			</div>
-			
-			<div>
-				<label for="password">パスワード</label>
-				
-				<input type="password"
-				id="password"
-				th:field="*{password}"
-				required>
-			</div>
-			
-			<div>
-				<button type="submit">ログイン</button>
-			</div>
-		</form>
-		
-		<div>
-			<a th:href="@{user/register}">新規会員登録</a>
-		</div>
-		
-		<div>
-			<a th:href="@{/authentication}">パスワードを忘れた方</a>
-		</div>
-	</main>
+<body style="padding-top:80px; padding-bottom:80px;">
+
+    <div th:replace="~{header :: header}">
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            ログイン
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <div th:if="${errorMessage}"
+                     class="alert alert-danger">
+
+                    <span th:text="${errorMessage}">
+                    </span>
+
+                </div>
+
+                <form th:action="@{/login}"
+                      th:object="${loginForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
+                        <input type="email"
+                               id="mailAddress"
+                               class="form-control"
+                               th:field="*{mailAddress}"
+                               required>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="password"
+                               class="form-label">
+                            パスワード
+                        </label>
+
+                        <input type="password"
+                               id="password"
+                               class="form-control"
+                               th:field="*{password}"
+                               required>
+
+                    </div>
+
+                    <div class="d-grid">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            ログイン
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <div class="text-center mt-3">
+
+            <a th:href="@{/user/register}">
+                新規会員登録
+            </a>
+
+        </div>
+
+        <div class="text-center mt-2">
+
+            <a th:href="@{/authentication}">
+                パスワードを忘れた方
+            </a>
+
+        </div>
+
+    </div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/menu.html b/src/main/resources/templates/menu.html
index 02cc0e7..4b4b6b3 100644
--- a/src/main/resources/templates/menu.html
+++ b/src/main/resources/templates/menu.html
@@ -8,13 +8,13 @@
 
 	<title>Calendar</title>
 
-	<link rel="stylesheet" th:href="@{/css/menu.css}">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 
 	<div th:replace="~{header :: header}"></div>
 
@@ -97,52 +97,68 @@
 	</table>
 
 
-	<div class="total">
+	<div class="card shadow-sm mb-3">
 
-		<div>
-			<span>収入：</span>
-			<span th:text="${totalIncome}"></span>
-			<span>円</span>
-		</div>
+	    <div class="card-body">
 
-		<div>
-			<span>支出：</span>
-			<span th:text="${totalExpense}"></span>
-			<span>円</span>
-		</div>
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>収入</span>
+	            <span th:text="'￥' + ${totalIncome}"></span>
+	        </div>
+
+	        <div class="d-flex justify-content-between">
+	            <span>支出</span>
+	            <span th:text="'￥' + ${totalExpense}"></span>
+	        </div>
+
+	    </div>
 
 	</div>
-
-<!--	<div>-->
-<!--		<span>目標貯金</span>-->
-<!--		<span th:text="${targetAmount}"></span>-->
-<!--		<span>円</span>-->
-<!--	</div>-->
 	
-<!--	<div>-->
-<!--			<span>現在高</span>-->
-<!--			<span th:text="${currentAmount}"></span>-->
-<!--			<span>円</span>-->
-<!--		</div>-->
+	<hr class="border border-primary border-2 opacity-50">
+
+	<div class="card shadow-sm mb-3">
+
+	    <div class="card-body">
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>目標資金</span>
+	            <span th:text="'￥' + ${targetAmount}"></span>
+	        </div>
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>現在高</span>
+	            <span th:text="'￥' + ${currentAmount}"></span>
+	        </div>
+
+	        <div class="d-flex justify-content-between">
+	            <span>貯金額</span>
+	            <span th:text="'￥' + ${saving}"></span>
+	        </div>
+
+	    </div>
 
-	<div>
-		<span>貯金額</span>
-		<span th:text="${saving}"></span>
-		<span>円</span>
 	</div>
 	
-	<hr>
-	
-<!--	<div>-->
-<!--		<span>達成率</span>-->
-<!--		<span th:text="${achievementRate}"></span>-->
-<!--		<span>%</span>-->
-<!--	</div>-->
-<!--	<div>-->
-<!--		<span>達成期限</span>-->
-<!--		<span th:text="${deadline}"></span>-->
-<!--		<span>円</span>-->
-<!--	</div>-->
+	<div class="card shadow-sm">
+
+	    <div class="card-body">
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>達成率</span>
+	            <span th:text="${achievementRate} + '%'"
+				      class="badge bg-success">
+				</span>
+	        </div>
+
+	        <div class="d-flex justify-content-between">
+	            <span>達成期限</span>
+	            <span th:text="${deadline}"></span>
+	        </div>
+
+	    </div>
+
+	</div>
 
 	<div th:replace="~{footer :: footer}"></div>
 
diff --git a/src/main/resources/templates/password_reset.html b/src/main/resources/templates/password_reset.html
index 07d4ffb..6d350be 100644
--- a/src/main/resources/templates/password_reset.html
+++ b/src/main/resources/templates/password_reset.html
@@ -1,46 +1,91 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>パスワード再設定</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body>
-<!--<body class="pb-5 pt-5">-->
-<!--	<div th:replace="~{header :: header}">-->
-<!--		</div>-->
-	
-	<main>
-		<h1>パスワード再設定</h1>
-		
-		<form th:action="@{/password/reset}" th:object="${passwordResetForm}" method="post">
-			<div>
-				<label for="password">新しいパスワード</label>
-				<input type="password"
-				id="password"
-				th:field="*{password}"
-				minlength="8"
-				maxlength="255"
-				required>
-			</div>
-			
-			<div>
-				<label for="passwordConfirm">パスワード確認</label>
-				<input type="password"
-				id="passwordConfirm"
-				th:field="*{passwordConfirm}"
-				minlength="8"
-				maxlength="255"
-				required>
-			</div>
-			
-			<button type="submit">再設定</button>
-		</form>
-		
-		<div th:if="${Message}">
-		    <p th:text="${Message}"></p>
-		</div>
-	</main>
+<body style="padding-top:80px; padding-bottom:80px;">
+
+    <div th:replace="~{header :: header}">
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            パスワード再設定
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/password/reset}"
+                      th:object="${passwordResetForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="password"
+                               class="form-label">
+                            新しいパスワード
+                        </label>
+
+                        <input type="password"
+                               id="password"
+                               class="form-control"
+                               th:field="*{password}"
+                               minlength="8"
+                               maxlength="255"
+                               required>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label for="passwordConfirm"
+                               class="form-label">
+                            パスワード確認
+                        </label>
+
+                        <input type="password"
+                               id="passwordConfirm"
+                               class="form-control"
+                               th:field="*{passwordConfirm}"
+                               minlength="8"
+                               maxlength="255"
+                               required>
+
+                    </div>
+
+                    <div class="d-grid">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+
+                            再設定
+
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <div th:if="${Message}"
+             class="alert alert-danger mt-3">
+
+            <span th:text="${Message}">
+            </span>
+
+        </div>
+
+    </div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/profile.html b/src/main/resources/templates/profile.html
index 8a9c72b..b939792 100644
--- a/src/main/resources/templates/profile.html
+++ b/src/main/resources/templates/profile.html
@@ -1,69 +1,110 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>プロフィール</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 		</div>
 	
-	<main>
-		<div>
-			<p>氏名</p>
-			<p th:text="${profileForm.userName}"></p>
-		</div>
+		<div class="main-container">
+
+		    <h2 class="page-title">
+		        プロフィール
+		    </h2>
+
+		    <div class="card shadow-sm">
+
+		        <div class="card-body">
+
+		            <table class="table mb-0">
+
+		                <tbody>
+
+		                    <tr>
+		                        <th>氏名</th>
+		                        <td th:text="${profileForm.userName}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>メールアドレス</th>
+		                        <td th:text="${profileForm.mailAddress}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>生年月日</th>
+		                        <td th:text="${profileForm.birthDate}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>貯蓄金</th>
+		                        <td th:text="'￥' + ${profileForm.saving}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>年収</th>
+		                        <td th:text="'￥' + ${profileForm.annualIncome}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>月別使用可能額</th>
+		                        <td th:text="'￥' + ${profileForm.monthlyBudget}"></td>
+		                    </tr>
+
+		                </tbody>
+
+		            </table>
+
+		        </div>
+
+		    </div>
 			
-		<div>
-			<p>メールアドレス</p>
-			<p th:text="${profileForm.mailAddress}"></p>
-		</div>
-			
-		<div>
-			<p>生年月日</p>
-			<p th:text="${profileForm.birthDate}"></p>
-		</div>
-			
-		<div>
-			<p>パスワード</p>
-			<form th:action="@{/password/reset}" method="get">
-				<button type="submit">パスワード再設定</button>
-			</form>
-		</div>
-			
-		<div>
-			<p>貯蓄金</p>
-			<p th:text="${profileForm.saving}"></p>
-		</div>
-			
-		<div>
-			<p>年収</p>
-			<p th:text="${profileForm.annualIncome}"></p>
-		</div>
-			
-		<div>
-			<p>月別使用可能額</p>
-			<p th:text="${profileForm.monthlyBudget}"></p>
-		</div>
-			
-		<div>
-			<form th:action="@{/profile/edit}" method="get">
-				<button type="submit">編集</button>
-			</form>
-		</div>
-		
-			<form th:action="@{/logout}" method="post">
-				<button type="submit">ログアウト</button>
-			</form>
-			
-			<form th:action="@{/withdraw}" method="post"
-			      onsubmit="return confirm('本当に脱退しますか？');">
-			    <button type="submit">脱退</button>
-			</form>
-		</main>
+			<div class="d-grid gap-2 mt-4">
+
+			    <form th:action="@{/profile/edit}" method="get">
+
+			        <button class="btn btn-primary w-100"
+			                type="submit">
+			            編集
+			        </button>
+
+			    </form>
+
+			    <form th:action="@{/password/reset}" method="get">
+
+			        <button class="btn btn-outline-primary w-100"
+			                type="submit">
+			            パスワード再設定
+			        </button>
+
+			    </form>
+
+			    <form th:action="@{/logout}" method="post">
+
+			        <button class="btn btn-secondary w-100"
+			                type="submit">
+			            ログアウト
+			        </button>
+
+			    </form>
+
+			    <form th:action="@{/withdraw}"
+			          method="post"
+			          onsubmit="return confirm('本当に脱退しますか？');">
+
+			        <button class="btn btn-danger w-100"
+			                type="submit">
+			            脱退
+			        </button>
+
+			    </form>
+
+			</div>
 		
 		<div th:replace="~{footer :: footer}">
 			</div>
diff --git a/src/main/resources/templates/profile_edit.html b/src/main/resources/templates/profile_edit.html
index ec7d81e..7902a3a 100644
--- a/src/main/resources/templates/profile_edit.html
+++ b/src/main/resources/templates/profile_edit.html
@@ -1,72 +1,119 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>プロフィール編集</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 		</div>
 	
-	<main>
-		<h1>プロフィール編集</h1>
-		
-		<form th:action="@{/profile/edit}"th:object="${profileEditForm}"method="post">
-			<div>
-				<label>氏名</label>
-				<input type="text"
-				th:field="*{userName}"
-				maxlength="100"
-				required>
-			</div>
-			
-			<div>
-				<label>メールアドレス</label>
-				<input type="email"
-				th:field="*{mailAddress}"
-				maxlength="255"
-				required>
-			</div>
-			
-			<div>
-				<label>パスワード</label>
-				<input type="password"
-				value="********"
-				disabled>
-			</div>
-			
-			<div>
-				<label>貯蓄金</label>
-				<input type="number"
-				th:field="*{saving}"
-				min="0"
-				required>
-			</div>
-			
-			<div>
-				<label>年収</label>
-				<input type="number"
-				th:field="*{annualIncome}"
-				min="0"
-				required>
-			</div>
-			
-			<div>
-				<label>月別使用可能額</label>
-				<input type="number"
-				th:field="*{monthlyBudget}"
-				min="0"
-				required>
-			</div>
-			
-			<div>
-				<button type="submit">確認</button>
-			</div>
-		</form>
-	</main>
+		<div class="main-container">
+
+		    <h1 class="page-title">
+		        プロフィール編集
+		    </h1>
+
+		    <div class="card shadow-sm">
+
+		            <form th:action="@{/profile/edit}"
+		                  th:object="${profileEditForm}"
+		                  method="post">
+						  
+					<div class="card-body">
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        氏名
+		                    </label>
+
+		                    <input type="text"
+		                           class="form-control"
+		                           th:field="*{userName}"
+		                           maxlength="100"
+		                           required>
+		                </div>
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        メールアドレス
+		                    </label>
+
+		                    <input type="email"
+		                           class="form-control"
+		                           th:field="*{mailAddress}"
+		                           maxlength="255"
+		                           required>
+		                </div>
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        パスワード
+		                    </label>
+
+		                    <input type="password"
+		                           class="form-control"
+		                           value="********"
+		                           disabled>
+		                </div>
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        貯蓄金
+		                    </label>
+
+		                    <input type="number"
+		                           class="form-control"
+		                           th:field="*{saving}"
+		                           min="0"
+								   max="1000000000"
+		                           required>
+		                </div>
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        年収
+		                    </label>
+
+		                    <input type="number"
+		                           class="form-control"
+		                           th:field="*{annualIncome}"
+		                           min="0"
+								   max="100000000"
+		                           required>
+		                </div>
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        月別使用可能額
+		                    </label>
+
+		                    <input type="number"
+		                           class="form-control"
+		                           th:field="*{monthlyBudget}"
+		                           min="0"
+								   max="10000000"
+		                           required>
+		                </div>
+
+		        	</div>
+					
+					<div class="d-grid">
+	                    <button type="submit"
+	                            class="btn btn-primary">
+	                        確認
+	                    </button>
+	                </div>
+				
+				</form>
+
+		    </div>
+
+		</div>
 	
 	<div th:replace="~{footer :: footer}">
 	</div>
diff --git a/src/main/resources/templates/transaction_create.html b/src/main/resources/templates/transaction_create.html
index 80902c0..2fb96f2 100644
--- a/src/main/resources/templates/transaction_create.html
+++ b/src/main/resources/templates/transaction_create.html
@@ -2,70 +2,140 @@
 <html>
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>Insert title here</title>
 	<link rel="stylesheet" th:href="@{/css/menu.css}">
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 
 	<div th:replace="~{header :: header}"></div>
 
-	<h1>取引登録</h1>
+	<div class="main-container">
 
-	<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
+	    <h1 class="page-title">
+	        取引登録
+	    </h1>
 
-		<div>
-			<label for="transactionDate">日付</label>
-			<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
-		</div>
+	    <div class="card shadow-sm">
 
-		<br>
+	        <div class="card-body">
 
-		<div>
-			<label for="transactionType">収入・支出</label>
+	            <form th:action="@{/transaction/create}"
+	                  th:object="${transactionForm}"
+	                  method="post">
 
-			<select id="transactionType" th:field="*{transactionType}">
+	                <div class="mb-3">
 
-				<option value="">選択してください</option>
-				<option value="1">支出</option>
-				<option value="2">収入</option>
+	                    <label for="transactionDate"
+	                           class="form-label">
+	                        日付
+	                    </label>
 
-			</select>
-		</div>
+	                    <input type="date"
+	                           id="transactionDate"
+	                           class="form-control"
+	                           th:value="*{transactionDate}" 
+							   required>
 
-		<br>
+	                </div>
 
-		<div>
-			<label for="categoryId">カテゴリ</label>
+	                <div class="mb-3">
 
-			<select id="categoryId" th:field="*{categoryId}">
+	                    <label for="transactionType"
+	                           class="form-label">
+	                        収入・支出
+	                    </label>
 
-				<option value="">選択してください</option>
+	                    <select id="transactionType"
+	                            class="form-select"
+	                            th:field="*{transactionType}"  
+								required>
 
-				<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
-					th:text="${category.categoryName}">
-				</option>
+	                        <option value="">
+	                            選択してください
+	                        </option>
 
-			</select>
-		</div>
+	                        <option value="1">
+	                            支出
+	                        </option>
 
-		<br>
+	                        <option value="2">
+	                            収入
+	                        </option>
 
-		<div>
-			<label for="amount">金額</label>
+	                    </select>
 
-			<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
-		</div>
+	                </div>
 
-		<br>
-		<input type="hidden" name="today" id="today" th:value="${today}">
+	                <div class="mb-3">
 
-		<button type="submit">登録</button>
+	                    <label for="categoryId"
+	                           class="form-label">
+	                        カテゴリ
+	                    </label>
 
-	</form>
+	                    <select id="categoryId"
+	                            class="form-select"
+	                            th:field="*{categoryId}"  
+								required>
+
+	                        <option value="">
+	                            選択してください
+	                        </option>
+
+	                        <option th:each="category : ${categoryFormList}"
+	                                th:value="${category.categoryId}"
+	                                th:text="${category.categoryName}">
+	                        </option>
+
+	                    </select>
+
+	                </div>
+
+	                <div class="mb-3">
+
+	                    <label for="amount"
+	                           class="form-label">
+	                        金額
+	                    </label>
+
+	                    <input type="number"
+	                           id="amount"
+	                           class="form-control"
+	                           th:field="*{amount}"
+	                           min="0"
+							   max="100000000"
+	                           placeholder="金額を入力してください"  
+							   required>
+
+	                </div>
+
+	                <input type="hidden"
+	                       name="today"
+	                       th:value="${today}">
+
+	                <div class="d-grid">
+
+	                    <button type="submit"
+	                            class="btn btn-primary">
+
+	                        登録
+
+	                    </button>
+
+	                </div>
+
+	            </form>
+
+	        </div>
+
+	    </div>
+
+	</div>
 
 	<div th:replace="~{footer :: footer}"></div>
 
diff --git a/src/main/resources/templates/transaction_detail.html b/src/main/resources/templates/transaction_detail.html
index 03a51c0..93a352c 100644
--- a/src/main/resources/templates/transaction_detail.html
+++ b/src/main/resources/templates/transaction_detail.html
@@ -2,56 +2,110 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>収支詳細</title>
 	<link rel="stylesheet" th:href="@{/css/transaction_detail.css}">
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 
 	<div th:replace="~{header :: header}"></div>
-	<h1 th:text="${today}"></h1>
+	<div class="main-container">
 
-	<div>
-		<ul>
-			<li th:each="transactionForm : ${transactionFormList}" class="transaction-item">
+	    <h2 class="page-title"
+	        th:text="${today}">
+	    </h2>
 
-				<div>
-					<p>
-						カテゴリ名：
-						<span th:text="${transactionForm.categoryName}"></span>
-						<br>
-						金額：
-						<span th:text="${transactionForm.amount}"></span>
-					</p>
-				</div>
+	    <div th:each="transactionForm : ${transactionFormList}"
+	         class="card shadow-sm mb-3">
 
-				<div class="transaction-buttons">
+	        <div class="card-body">
 
-					<form th:action="@{/transaction/delete}" method="post">
-						<input type="hidden" name="today" th:value="${today}">
-						<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
-						<button type="submit">削除</button>
-					</form>
+	            <div class="d-flex justify-content-between">
 
-					<form th:action="@{/transaction/update}" method="get">
-						<input type="hidden" name="today" th:value="${today}">
-						<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
-						<button type="submit">編集</button>
-					</form>
+	                <span class="fw-bold"
+	                      th:text="${transactionForm.categoryName}">
+	                </span>
 
-				</div>
+	                <span th:text="'￥' + ${transactionForm.amount}">
+	                </span>
+
+	            </div>
+
+	            <div class="d-flex justify-content-end gap-2 mt-3">
+
+	                <form th:action="@{/transaction/update}"
+	                      method="get">
+
+	                    <input type="hidden"
+	                           name="today"
+	                           th:value="${today}">
+
+	                    <input type="hidden"
+	                           name="transactionId"
+	                           th:value="${transactionForm.transactionId}">
+
+	                    <button class="btn btn-sm btn-primary"
+	                            type="submit">
+
+	                        編集
+
+	                    </button>
+
+	                </form>
+
+	                <form th:action="@{/transaction/delete}"
+	                      method="post">
+
+	                    <input type="hidden"
+	                           name="today"
+	                           th:value="${today}">
+
+	                    <input type="hidden"
+	                           name="transactionId"
+	                           th:value="${transactionForm.transactionId}">
+
+	                    <button class="btn btn-sm btn-danger"
+	                            type="submit">
+
+	                        削除
+
+	                    </button>
+
+	                </form>
+
+	            </div>
+
+	        </div>
+
+	    </div>
+
+	    <div class="d-grid mt-4">
+
+	        <form th:action="@{/transaction/create}"
+	              method="get">
+
+	            <input type="hidden"
+	                   name="today"
+	                   th:value="${today}">
+
+	            <button class="btn btn-success w-100"
+	                    type="submit">
+
+	                新規登録
+
+	            </button>
+
+	        </form>
+
+	    </div>
 
-				<hr>
-				<hr>
-			</li>
-		</ul>
 	</div>
 
 
-
 	<form th:action="@{/transaction/create}" method="get">
 		<input type="hidden" name="today" id="today" th:value="${today}">
 		<button type="submit">新規登録</button>
diff --git a/src/main/resources/templates/transaction_list.html b/src/main/resources/templates/transaction_list.html
index 8dc00d4..a416a74 100644
--- a/src/main/resources/templates/transaction_list.html
+++ b/src/main/resources/templates/transaction_list.html
@@ -2,17 +2,19 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>一覧</title>
 	<link rel="stylesheet" th:href="@{/css/menu.css}">
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 
 	<div th:replace="~{header :: header}"></div>
 
+	<div class="main-container">
 	<div class="calendar-title">
 
 		<a class="month-button" th:href="@{/transaction/list(
@@ -40,20 +42,27 @@
 
 
 
-	<div th:each="transactionForm : ${transactionFormMap}">
+	<div th:each="transactionForm : ${transactionFormMap}"
+	     th:if="${!transactionForm.value.isEmpty()}"
+	     class="card shadow-sm mb-3">
+		 
+		 <div class="card-body">
 
-		<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}">
-			<h3 th:text="${transactionForm.key}"></h3>
+		<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}" class="text-decoration-none">
+			<h3 th:text="${transactionForm.key}" class="fw-bold"></h3>
 		</a>
-		<ul>
-			<li th:each="transaction : ${transactionForm.value}">
-				<p>カテゴリ名：<span th:text="${transaction.categoryName}"></span>
-					<br>金額：<span th:text="${transaction.amount}"></span>
-				</p>
-				<hr />
-			</li>
-		</ul>
+		<div th:each="transaction : ${transactionForm.value}"
+		class="d-flex justify-content-between mb-2">
+		 
+		<span th:text="${transaction.categoryName}">
+		</span>
+		 
+		<span th:text="'￥' + ${transaction.amount}">
+		</span>
+		 
+		</div>
 
+	</div>
 	</div>
 	<div th:replace="~{footer :: footer}"></div>
 
diff --git a/src/main/resources/templates/transaction_update.html b/src/main/resources/templates/transaction_update.html
index 24822a1..3817ee4 100644
--- a/src/main/resources/templates/transaction_update.html
+++ b/src/main/resources/templates/transaction_update.html
@@ -2,74 +2,144 @@
 <html>
 
 <head>
-	<meta charset="UTF-8">
-	<title>Insert title here</title>
-	<link rel="stylesheet" th:href="@{/css/menu.css}">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
+	<title>取引更新</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 
-	<div th:replace="~{header :: header}"></div>
+    <div th:replace="~{header :: header}">
+    </div>
 
-	<h1>取引登録</h1>
+    <div class="main-container">
 
-	<form th:action="@{/transaction/update}" th:object="${transactionForm}" method="post">
+        <h1 class="page-title">
+            取引更新
+        </h1>
 
-		<input type="hidden" name="transactionId" th:value="${transactionId}">
-		
-		<div>
-			<label for="transactionDate">日付</label>
-			<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
-		</div>
+        <div class="card shadow-sm">
 
-		<br>
+            <div class="card-body">
 
-		<div>
-			<label for="transactionType">収入・支出</label>
+                <form th:action="@{/transaction/update}"
+                      th:object="${transactionForm}"
+                      method="post">
 
-			<select id="transactionType" th:field="*{transactionType}">
+                    <input type="hidden"
+                           name="transactionId"
+                           th:value="${transactionId}">
 
-				<option value="">選択してください</option>
-				<option value="0">支出</option>
-				<option value="1">収入</option>
+                    <input type="hidden"
+                           name="today"
+                           th:value="${today}">
 
-			</select>
-		</div>
+                   <div class="mb-3">
+                        <label for="transactionDate" class="form-label">
+						   	日付
+						</label>
+				        <input type="date"
+						    id="transactionDate"
+						   	class="form-control"
+						   	name="transactionDate" 
+						   	th:value="*{transactionDate}"
+							required>
+				    </div>
 
-		<br>
+                    <div class="mb-3">
 
-		<div>
-			<label for="categoryId">カテゴリ</label>
+                        <label for="transactionType"
+                               class="form-label">
+                            収入・支出
+                        </label>
 
-			<select id="categoryId" th:field="*{categoryId}">
+                        <select id="transactionType"
+                                class="form-select"
+                                th:field="*{transactionType}"
+								required>
 
-				<option value="">選択してください</option>
+                            <option value="">
+                                選択してください
+                            </option>
 
-				<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
-					th:text="${category.categoryName}">
-				</option>
+                            <option value="0">
+                                支出
+                            </option>
 
-			</select>
-		</div>
+                            <option value="1">
+                                収入
+                            </option>
 
-		<br>
+                        </select>
 
-		<div>
-			<label for="amount">金額</label>
+                    </div>
 
-			<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
-		</div>
+                    <div class="mb-3">
 
-		<br>
-		<input type="hidden" name="today" id="today" th:value="${today}">
+                        <label for="categoryId"
+                               class="form-label">
+                            カテゴリ
+                        </label>
 
-		<button type="submit">登録</button>
+                        <select id="categoryId"
+                                class="form-select"
+                                th:field="*{categoryId}"
+								required>
 
-	</form>
+                            <option value="">
+                                選択してください
+                            </option>
 
-	<div th:replace="~{footer :: footer}"></div>
+                            <option th:each="category : ${categoryFormList}"
+                                    th:value="${category.categoryId}"
+                                    th:text="${category.categoryName}">
+                            </option>
+
+                        </select>
+
+                    </div>
+
+                    <div class="mb-4">
+
+                        <label for="amount"
+                               class="form-label">
+                            金額
+                        </label>
+
+                        <input type="number"
+                               id="amount"
+                               class="form-control"
+                               th:field="*{amount}"
+                               min="0"
+							   max="100000000"
+                               placeholder="金額を入力してください"
+							   required>
+
+                    </div>
+
+                    <div class="d-grid">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+
+                            更新
+
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div th:replace="~{footer :: footer}">
+    </div>
 
 </body>
 
diff --git a/src/main/resources/templates/user_register.html b/src/main/resources/templates/user_register.html
index 1bdb65c..b8e3c0a 100644
--- a/src/main/resources/templates/user_register.html
+++ b/src/main/resources/templates/user_register.html
@@ -1,128 +1,231 @@
 <!DOCTYPE html>
-<html lang="ja"xmlns:th="http://www.thymeleaf.org">
-<head>
-<meta charset="UTF-8">
-<title>新規会員登録</title>
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<html lang="ja" xmlns:th="http://www.thymeleaf.org">
 
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1">
+
+    <title>新規会員登録</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
+          rel="stylesheet">
+
+    <link rel="stylesheet"
+          th:href="@{/css/style.css}">
 </head>
-<body class="pb-5 pt-5">
-	<div th:replace="~{header :: header}">
-		</div>
-	
-	<main>
-		<h1>新規会員登録</h1>
-		
-		<form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
-			<div>
-				<label for="userName">氏名</label>
-				<input type="text"
-				id="userName"
-				th:field="*{userName}"
-				maxlength="100"
-				required>
-			</div>
-			
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email"
-				id="mailAddress"
-				th:field="*{mailAddress}"
-				maxlength="255"
-				required>
-			</div>
-			
-			<div>
-				<label for="birthDate">生年月日</label>
-				<input type="date"
-				id="birthDate"
-				th:field="*{birthDate}"
-				required>
-			</div>
-			
-			<div>
-				<label for="password">パスワード</label>
-				<input type="password"
-				id="password"
-				th:field="*{password}"
-				minlength="8"
-				maxlength="255"
-				required>
-			</div>
-			
-			<div>
-				<label for="secretQuestionId">秘密の質問</label>
-				<select id="secretQuestionId"
-				        th:field="*{secretQuestionId}"
-				        required>
-				    <option value="">選択してください</option>
-				    <option th:each="question : ${session.questionList}"
-				            th:value="${question.secretQuestionId}"
-				            th:text="${question.questionText}">
-				    </option>
-				</select>
-			</div>
-			
-			<div>
-				<label for="secretAnswer">秘密の質問の回答</label>
-				<input type="text"
-				id="secretAnswer"
-				th:field="*{secretAnswer}"
-				maxlength="100"
-				required>
-			</div>
-			
-			<div>
-				<label for="saving">貯蓄金</label>
-				<input type="number"
-				id="saving"
-				th:field="*{saving}"
-				min="0"
-				required>
-			</div>
-			
-			<div>
-				<label for="annualIncome">年収</label>
-				<input type="number"
-				id="annualIncome"
-				th:field="*{annualIncome}"
-				 min="0"
-				 required>
-			 </div>
-			 
-			 <div>
-				<label for="monthlyBudget">月別使用可能金額</label>
-				<input type="number"
-				id="monthlyBudget"
-				th:field="*{monthlyBudget}"
-				min="0"
-				required>
-			 </div>
-			 
-			 <div>
-				<label for="goalId">目標</label>
-				<input type="number"
-				id="goalId"
-				th:field="*{goalId}"
-				min="0"
-				required>
-			</div>
-			
-			<div>
-				<label>コース</label>
-				<input type="hidden" th:field="*{courseId}">
-				<button type="submit">コース選択</button>
-			</div>
-			
-			<div>
-				<button type="submit">作成</button>
-			</div>
-		</form>
-		
-		<form th:action="@{/login}" method="get">
-			<button type="submit">戻る</button>
-		</form>
-		
-	</main>
+
+<body style="padding-top:80px; padding-bottom:80px;">
+
+    <div th:replace="~{header :: header}">
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            新規会員登録
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/user/register/course}"
+                      th:object="${userForm}"
+                      method="post">
+
+                    <div class="mb-3">
+                        <label for="userName"
+                               class="form-label">
+                            氏名
+                        </label>
+
+                        <input type="text"
+                               id="userName"
+                               class="form-control"
+                               th:field="*{userName}"
+                               maxlength="100"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
+                        <input type="email"
+                               id="mailAddress"
+                               class="form-control"
+                               th:field="*{mailAddress}"
+                               maxlength="255"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="birthDate"
+                               class="form-label">
+                            生年月日
+                        </label>
+
+                        <input type="date"
+                               id="birthDate"
+                               class="form-control"
+                               th:field="*{birthDate}"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="password"
+                               class="form-label">
+                            パスワード
+                        </label>
+
+                        <input type="password"
+                               id="password"
+                               class="form-control"
+                               th:field="*{password}"
+                               minlength="8"
+                               maxlength="255"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="secretQuestionId"
+                               class="form-label">
+                            秘密の質問
+                        </label>
+
+                        <select id="secretQuestionId"
+                                class="form-select"
+                                th:field="*{secretQuestionId}"
+                                required>
+
+                            <option value="">
+                                選択してください
+                            </option>
+
+                            <option th:each="question : ${session.questionList}"
+                                    th:value="${question.secretQuestionId}"
+                                    th:text="${question.questionText}">
+                            </option>
+
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="secretAnswer"
+                               class="form-label">
+                            秘密の質問の回答
+                        </label>
+
+                        <input type="text"
+                               id="secretAnswer"
+                               class="form-control"
+                               th:field="*{secretAnswer}"
+                               maxlength="100"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="saving"
+                               class="form-label">
+                            貯蓄金
+                        </label>
+
+                        <input type="number"
+                               id="saving"
+                               class="form-control"
+                               th:field="*{saving}"
+                               min="0"
+							   max="1000000000"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="annualIncome"
+                               class="form-label">
+                            年収
+                        </label>
+
+                        <input type="number"
+                               id="annualIncome"
+                               class="form-control"
+                               th:field="*{annualIncome}"
+                               min="0"
+							   max="100000000"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="monthlyBudget"
+                               class="form-label">
+                            月別使用可能金額
+                        </label>
+
+                        <input type="number"
+                               id="monthlyBudget"
+                               class="form-control"
+                               th:field="*{monthlyBudget}"
+                               min="0"
+							   max="10000000"
+                               required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="goalId"
+                               class="form-label">
+                            目標貯金額
+                        </label>
+
+                        <input type="number"
+                               id="goalId"
+                               class="form-control"
+                               th:field="*{goalId}"
+                               min="0"
+							   max="1000000000"
+                               required>
+                    </div>
+
+                    <input type="hidden"
+                           th:field="*{courseId}">
+
+                    <div class="d-grid gap-2 mt-4">
+
+                        <button type="submit"
+                                class="btn btn-outline-primary">
+                            コース選択
+                        </button>
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            作成
+                        </button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <div class="d-grid mt-3">
+
+            <form th:action="@{/login}"
+                  method="get">
+
+                <button type="submit"
+                        class="btn btn-outline-secondary">
+                    戻る
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/user_register_confirm.html b/src/main/resources/templates/user_register_confirm.html
index 581457e..80a4348 100644
--- a/src/main/resources/templates/user_register_confirm.html
+++ b/src/main/resources/templates/user_register_confirm.html
@@ -2,43 +2,48 @@
 <html>
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>新規会員登録確認</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 	<div th:replace="~{header :: header}">
 	</div>
 
-	<main>
-		<h1>新規会員登録確認</h1>
+	<div class="main-container">
+		<h1 class="page-title">新規会員登録確認</h1>
+		
+		<div class="card shadow-sm">
+		 
+		<div class="card-body">
 
 		<form th:action="@{/user/register/complete}" th:object="${userForm}" method="post">
-			<div>
-				<label for="userName">氏名</label>
-				<input type="text" id="userName" th:field="*{userName}" maxlength="100" readonly>
+			<div class="mb-3">
+				<label for="userName" class="form-label">氏名</label>
+				<input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100" readonly>
 			</div>
 
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email" id="mailAddress" th:field="*{mailAddress}" maxlength="255" readonly>
+			<div class="mb-3">
+				<label for="mailAddress" class="form-label">メールアドレス</label>
+				<input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}" maxlength="255" readonly>
 			</div>
 
-			<div>
-				<label for="birthDate">生年月日</label>
-				<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}" required readonly>
+			<div class="mb-3">
+				<label for="birthDate" class="form-label">生年月日</label>
+				<input type="date" id="birthDate" class="form-control" name="birthDate" th:value="*{birthDate}" required readonly>
 			</div>
 
-			<div>
-				<label for="password">パスワード</label>
-				<input type="password" id="password" name="password" th:value="*{password}" minlength="8"
+			<div class="mb-3">
+				<label for="password" class="form-label">パスワード</label>
+				<input type="password" id="password" class="form-control" name="password" th:value="*{password}" minlength="8"
 					maxlength="255" required readonly>
 			</div>
 
-			<div>
-				<label for="secretQuestionId">秘密の質問</label>
+			<div class="mb-3">
+				<label for="secretQuestionId" class="form-label">秘密の質問</label>
 				<select id="secretQuestionId" th:field="*{secretQuestionId}" required readonly>
 					<option value="">選択してください</option>
 					<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
@@ -47,50 +52,58 @@
 				</select>
 			</div>
 
-			<div>
-				<label for="secretAnswer">秘密の質問の回答</label>
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}" maxlength="100" readonly>
+			<div class="mb-3">
+				<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
+				<input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}" maxlength="100" readonly>
 			</div>
 
-			<div>
-				<label for="saving">貯蓄金</label>
-				<input type="number" id="saving" th:field="*{saving}" min="0" readonly>
+			<div class="mb-3">
+				<label for="saving" class="form-label">貯蓄金</label>
+				<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0" readonly>
 			</div>
 
-			<div>
-				<label for="annualIncome">年収</label>
-				<input type="number" id="annualIncome" th:field="*{annualIncome}" min="0" readonly>
+			<div class="mb-3">
+				<label for="annualIncome" class="form-label">年収</label>
+				<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0" readonly>
 			</div>
 
-			<div>
-				<label for="monthlyBudget">月別使用可能金額</label>
-				<input type="number" id="monthlyBudget" th:field="*{monthlyBudget}" min="0" readonly>
+			<div class="mb-3">
+			    <label for="monthlyBudget" class="form-label">月別使用可能金額</label>
+				<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0" readonly>
 			</div>
 
-			<div>
-				<label for="goalId">目標</label>
-				<input type="number" id="goalId" th:field="*{goalId}" min="0" readonly>
+			<div class="mb-3">
+				<label for="goalId" class="form-label">目標</label>
+				<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" readonly>
 			</div>
 
-			<div>
-				<label>コース</label>
-				<input type="hidden" th:field="*{courseId}">
+			<div class="mb-4">
+				<label class="form-label">コース</label>
+				<div class="d-flex justify-content-between align-items-center">
+				<input type="hidden" class="form-control" th:field="*{courseId}">
 				<span th:text="${selectedCourseName}">未選択</span>
-				<button type="submit">コース選択</button>
+				<button type="submit" class="btn btn-outline-primary btn-sm">コース選択</button>
+				</div>
 			</div>
 
-			<div>
-				<button type="submit">作成</button>
-			</div>
-			<div>
-				<form th:action="@{/user/register}" method="get">
-					<button type="submit">戻る</button>
-				</form>
+			<div class="d-grid">
+				<button type="submit" class="btn btn-primary">
+					作成
+				</button>	
 			</div>
 		</form>
+		</div>
+		</div>
+			<div class="d-grid mt-3">
+				<form th:action="@{/user/register}" method="get">
+					<button type="submit" class="btn btn-outline-secondary">
+						戻る
+					</button>
+				</form>
+			</div>
 
 
-	</main>
+	</div>
 
 </body>
 
diff --git a/src/main/resources/templates/user_register_return.html b/src/main/resources/templates/user_register_return.html
index 04fb234..3863a24 100644
--- a/src/main/resources/templates/user_register_return.html
+++ b/src/main/resources/templates/user_register_return.html
@@ -1,56 +1,65 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>新規会員登録</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body>
 	<div th:replace="~{header :: header}">
 		</div>
 	
-	<main>
-		<h1>新規会員登録</h1>
+	<div class="main-container">
 		
-		<form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
-			<div>
-				<label for="userName">氏名</label>
-				<input type="text"
-				id="userName"
-				th:field="*{userName}"
-				maxlength="100"
+		<h1 class="page-title">新規会員登録</h1>
+		
+		<div class="card shadow-sm">
+
+		    <div class="card-body">
+		
+		       <form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
+			     <div class="mb-3">
+				    <label for="userName" class="form-label">氏名</label>
+				    <input type="text"
+				    id="userName"
+					class="form-control"
+				    th:field="*{userName}"
+				    maxlength="100"
+				    required>
+			     </div>
+			
+			     <div class="mb-3">
+				   <label for="mailAddress" class="form-label">メールアドレス</label>
+				   <input type="email"
+				   id="mailAddress"
+				   class="form-control"
+				   th:field="*{mailAddress}"
+				   maxlength="255"
+				   required>
+			     </div>
+			
+			<div class="mb-3">
+				<label for="birthDate" class="form-label">生年月日</label>
+				<input type="date" id="birthDate" name="birthDate" class="form-control" th:value="*{birthDate}"
 				required>
 			</div>
 			
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email"
-				id="mailAddress"
-				th:field="*{mailAddress}"
-				maxlength="255"
-				required>
-			</div>
-			
-			<div>
-				<label for="birthDate">生年月日</label>
-				<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}"
-				required>
-			</div>
-			
-			<div>
-				<label for="password">パスワード</label>
+			<div class="mb-3">
+				<label for="password" class="form-label">パスワード</label>
 				<input type="password"
 				id="password"
 				name="password"
+				class="form-control"
 				th:value="*{password}"
 				minlength="8"
 				maxlength="255"
 				required>
 			</div>
 			
-			<div>
-				<label for="secretQuestionId">秘密の質問</label>
+			<div class="mb-3">
+				<label for="secretQuestionId" class="form-label">秘密の質問</label>
 				<select id="secretQuestionId"
 				        th:field="*{secretQuestionId}"
 				        required>
@@ -62,67 +71,83 @@
 				</select>
 			</div>
 			
-			<div>
-				<label for="secretAnswer">秘密の質問の回答</label>
+			<div class="mb-3">
+				<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
 				<input type="text"
 				id="secretAnswer"
+				class="form-control"
 				th:field="*{secretAnswer}"
 				maxlength="100"
 				required>
 			</div>
 			
-			<div>
-				<label for="saving">貯蓄金</label>
+			<div class="mb-3">
+				<label for="saving" class="form-label">貯蓄金</label>
 				<input type="number"
 				id="saving"
+				class="form-control"
 				th:field="*{saving}"
 				min="0"
 				required>
 			</div>
 			
-			<div>
-				<label for="annualIncome">年収</label>
+			<div class="mb-3">
+				<label for="annualIncome" class="form-label">年収</label>
 				<input type="number"
 				id="annualIncome"
+				class="form-control"
 				th:field="*{annualIncome}"
 				 min="0"
 				 required>
 			 </div>
 			 
-			 <div>
-				<label for="monthlyBudget">月別使用可能金額</label>
+			 <div class="mb-3">
+				<label for="monthlyBudget" class="form-label">月別使用可能金額</label>
 				<input type="number"
 				id="monthlyBudget"
+				class="form-control"
 				th:field="*{monthlyBudget}"
 				min="0"
 				required>
 			 </div>
 			 
-			 <div>
-				<label for="goalId">目標</label>
+			 <div class="mb-3">
+				<label for="goalId" class="form-label">目標</label>
 				<input type="number"
 				id="goalId"
+				class="form-control"
 				th:field="*{goalId}"
 				min="0"
 				required>
 			</div>
 			
-			<div>
-				<label>コース</label>
+			<div class="mb-4">
+				<label class="form-label">コース</label>
+				<div class="d-flex justify-content-between align-items-center">
 				<input type="hidden" th:field="*{courseId}">
 				<span th:text="${selectedCourseName}">未選択</span>
-				<button type="submit">コース選択</button>
+				<button type="submit" class="btn btn-outline-primary btn-sm">
+					コース選択
+				</button>
+				</div>
 			</div>
 			
-			<div>
-				<button type="submit">作成</button>
+			<div class="d-grid">
+				<button type="submit" class="btn btn-primary">作成</button>
 			</div>
 		</form>
 		
+		    </div>
+			
+		</div>
+		
+		<div class="d-grid mt-3">
 		<form th:action="@{/login}" method="get">
-			<button type="submit">戻る</button>
+			<button type="submit" class="btn btn-outline-secondary">戻る</button>
 		</form>
 		
-	</main>
+	</div>
+	
+	</div>
 </body>
 </html>
\ No newline at end of file