[EDIT]スマホ画面のデザインに統一しました

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>