diff --git a/src/main/resources/static/css/menu.css b/src/main/resources/static/css/menu.css
index 5195e7c..12d4ad2 100644
--- a/src/main/resources/static/css/menu.css
+++ b/src/main/resources/static/css/menu.css
@@ -1,15 +1,80 @@
-table, th, td {border: 1px solid black; border-collapse: collapse;}
+body {
+    margin: 0;
+    padding: 0;
+}
 
-td:hover{background-color: lightblue;}
+#calendar {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
 
-th{font-weight: bold; height: 50px;}
+#calendar th,
+#calendar td {
+    border: 1px solid black;
+}
 
-td{text-align: left; vertical-align: text-top; width: 200px; height: 100px; padding: 10px}
+th {
+    font-weight: bold;
+    height: 35px;
+    font-size: 13px;
+    text-align: center;
+}
 
-.holiday{color: red;}
+td {
+    width: 14.28%;
+    height: 70px;
+    padding: 5px;
+    text-align: left;
+    vertical-align: top;
+}
 
-#today{font-weight: bold; background-color: bisque;}
+td:hover {
+    background-color: lightblue;
+}
 
-.year{font-size: 30px;}
+.holiday {
+    color: red;
+}
 
-.month{font-size: 50px; font-weight: bold;}
\ No newline at end of file
+#today {
+    font-weight: bold;
+    background-color: bisque;
+}
+
+.year {
+    font-size: 20px;
+}
+
+.month {
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.calendar-title {
+    margin: 15px 10px;
+}
+
+.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;
+}
diff --git a/src/main/resources/templates/menu.html b/src/main/resources/templates/menu.html
index 15365cf..9c6fc1f 100644
--- a/src/main/resources/templates/menu.html
+++ b/src/main/resources/templates/menu.html
@@ -2,71 +2,106 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-    <meta charset="UTF-8">
-    <title>Calendar</title>
-    <link rel="stylesheet" th:href="@{/css/menu.css}">
+
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>Calendar</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">
+
 </head>
 
 <body>
 
-    <span class="year" th:text="|${year}年|"></span>
-    <span class="month" th:text="|${month}月|"></span>
+	<div th:replace="~{header :: header}"></div>
 
-    <table id="calendar">
 
-        <thead>
-            <tr>
-                <th class="holiday">日</th>
-                <th>月</th>
-                <th>火</th>
-                <th>水</th>
-                <th>木</th>
-                <th>金</th>
-                <th>土</th>
-            </tr>
-        </thead>
+	<div class="calendar-title">
 
-        <tbody>
+		<span class="year" th:text="|${year}年|">
+		</span>
 
-            <tr th:each="week : ${#numbers.sequence(0, 5)}">
+		<span class="month" th:text="|${month}月|">
+		</span>
 
-                <td th:each="weekDay : ${#numbers.sequence(0, 6)}">
+	</div>
 
-                    <div th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
 
-                        <div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
-                        </div>
+	<table id="calendar">
 
-                        <div th:each="income : ${incomeList}"
-                             th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
-                             class="income"
-                             th:text="|収入 +${income.amount}円|"
-                             style="color: blue;">
-                        </div>
+		<thead>
 
-                        <div th:each="expense : ${expenseList}"
-                             th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
-                             class="expense"
-                             th:text="|支出 -${expense.amount}円|"
-                             style="color: red;">
-                        </div>
+			<tr>
+				<th class="holiday">日</th>
+				<th>月</th>
+				<th>火</th>
+				<th>水</th>
+				<th>木</th>
+				<th>金</th>
+				<th>土</th>
+			</tr>
 
-                    </div>
+		</thead>
 
-                </td>
 
-            </tr>
+		<tbody>
 
-        </tbody>
-    </table>
+			<tr th:each="week : ${#numbers.sequence(0, 5)}">
+
+				<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
+
+					<a th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1
+					           and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}"
+					   th:href="@{/transaction/detail(
+					       todayDates=${T(java.time.LocalDate).of(year, month, week * 7 + weekDay - firstDayOfWeek + 1)}
+					   )}">
+
+
+						<div th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
+
+							<div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
+							</div>
+
+							<div th:each="income : ${incomeList}" th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="income" th:text="|収入 +${income.amount}円|">
+							</div>
+
+							<div th:each="expense : ${expenseList}" th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="expense" th:text="|支出 -${expense.amount}円|">
+							</div>
+
+						</div>
+
+					</a>
+
+				</td>
+
+			</tr>
+
+
+		</tbody>
+
+	</table>
+
+
+	<div class="total">
+
+		<div>
+			<span>収入：</span>
+			<span th:text="${totalIncome}"></span>
+			<span>円</span>
+		</div>
+
+		<div>
+			<span>支出：</span>
+			<span th:text="${totalExpense}"></span>
+			<span>円</span>
+		</div>
+
+	</div>
 
-    <div>
-        <h2>
-            <span th:text="|収入：${totalIncome}|"></span>
-            <span th:text="|支出：${totalExpense}|"></span>
-        </h2>
-    </div>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file