diff --git a/book-rent/src/main/java/com/example/demo/controller/MenuController.java b/book-rent/src/main/java/com/example/demo/controller/MenuController.java
index 7ba61b1..a84e905 100644
--- a/book-rent/src/main/java/com/example/demo/controller/MenuController.java
+++ b/book-rent/src/main/java/com/example/demo/controller/MenuController.java
@@ -1,5 +1,19 @@
 package com.example.demo.controller;
 
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
 public class MenuController {
 
+    @GetMapping("/menu")
+    public String showMenu(Model model) {
+
+        // 仮のログインユーザー名
+        model.addAttribute("loginUserName", "テストユーザー");
+
+        // menu.htmlを表示
+        return "menu";
+    }
 }
diff --git a/book-rent/src/main/resources/templates/login.html b/book-rent/src/main/resources/templates/login.html
index 2571001..6ee30de 100644
--- a/book-rent/src/main/resources/templates/login.html
+++ b/book-rent/src/main/resources/templates/login.html
@@ -1,10 +1,94 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:th="http://www.thymeleaf.org">
+
 <head>
-<meta charset="UTF-8">
-<title>Insert title here</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- 外部スクリプトの読み込み -->
+    <script th:src="@{/js/common.js}"></script>
+
+    <!-- CSSの読み込み -->
+    <link rel="stylesheet" th:href="@{/css/all.css}" type="text/css">
+    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css">
+
+    <title>ログイン</title>
 </head>
+
 <body>
 
+    <div class="loginContainer">
+
+        <h1>ログイン</h1>
+
+        <form th:action="@{/doLogin}"
+              method="post"
+              th:object="${loginInfoForm}">
+
+            <!-- エラーメッセージ -->
+            <div class="msgBox error"
+                 th:if="${messageError != null}">
+                <span class="error"
+                      th:text="${messageError.message}"></span>
+            </div>
+
+            <table>
+                <!-- メールアドレス -->
+                <tr>
+                    <th class="header">メールアドレス</th>
+                    <td>
+                        <input
+                            id="mailAddress"
+                            type="text"
+                            th:field="*{mailAddress}"
+                            placeholder="メールアドレス"
+                            required
+                        />
+                    </td>
+                </tr>
+
+                <!-- パスワード -->
+                <tr>
+                    <th class="header">パスワード</th>
+                    <td>
+                        <input
+                            id="password"
+                            type="password"
+                            th:field="*{password}"
+                            placeholder="パスワード"
+                            required
+                        />
+                    </td>
+                </tr>
+
+                <!-- ボタン -->
+                <tr>
+                    <td class="btnArea" colspan="2">
+                        <input
+                            type="submit"
+                            value="ログイン"
+                        />
+
+                        <button
+                            type="button"
+                            onclick="clearInput()">
+                            リセット
+                        </button>
+                    </td>
+                </tr>
+            </table>
+
+        </form>
+
+    </div>
+
+    <!-- 入力内容のリセット -->
+    <script>
+        function clearInput() {
+            document.getElementById('mailAddress').value = '';
+            document.getElementById('password').value = '';
+        }
+    </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/book-rent/src/main/resources/templates/menu.html b/book-rent/src/main/resources/templates/menu.html
new file mode 100644
index 0000000..e14f482
--- /dev/null
+++ b/book-rent/src/main/resources/templates/menu.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8">
+    <title>メニュー</title>
+
+    <link rel="stylesheet" th:href="@{/css/all.css}">
+    <link rel="stylesheet" th:href="@{/css/style.css}">
+</head>
+
+<body>
+
+    <h1>メニュー</h1>
+
+    <div class="userInfo">
+        <span>ログインユーザー：</span>
+        <span th:text="${loginUserName}">ユーザー名</span>
+
+        <form th:action="@{/logout}" method="post">
+            <button type="submit">ログアウト</button>
+        </form>
+    </div>
+
+    <div class="menuArea">
+        <form th:action="@{/book/list}" method="get">
+            <button type="submit">書籍一覧</button>
+        </form>
+
+        <form th:action="@{/book/rent}" method="get">
+            <button type="submit">書籍貸出申請一覧</button>
+        </form>
+    </div>
+
+</body>
+</html>
\ No newline at end of file