diff --git a/src/main/java/com/example/demo/LoginController.java b/src/main/java/com/example/demo/LoginController.java
new file mode 100644
index 0000000..e876fc0
--- /dev/null
+++ b/src/main/java/com/example/demo/LoginController.java
@@ -0,0 +1,21 @@
+package com.example.demo;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class LoginController {
+
+//	初期画面
+	@GetMapping("/login")
+	public String login() {
+		return "login";
+	}
+	
+//	ログイン処理が実行された後
+	@GetMapping("/topmenu")
+	public String topmenu() {
+		return "topmenu";
+	}
+
+}
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 32d8519..08606fe 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="ja">
+<html xmlns:th="http://www.thymeleaf.org">
 
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>ログイン - ShareBooks</title>
+	
 	<style>
 		* {
 			box-sizing: border-box;
@@ -233,7 +234,7 @@
 			<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
 			<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
 		</svg>
-		社内備品・図書管理システム
+		ShareBooks
 	</div>
 
 	<div class="content-wrap">
@@ -249,11 +250,12 @@
 				<h1>ログイン</h1>
 				<p class="subtitle">社員IDとパスワードを入力して、システムにログインしてください。</p>
 
-				<% if (request.getAttribute("errorMessage") !=null) { %>
-					<div class="error-message">
-						<%= request.getAttribute("errorMessage") %>
-					</div>
-					<% } %>
+<!--				JSP処理なのでコメントアウト-->
+<!--				<% if (request.getAttribute("errorMessage") !=null) { %>-->
+<!--					<div class="error-message">-->
+<!--						<%= request.getAttribute("errorMessage") %>-->
+<!--					</div>-->
+<!--				<% } %>-->
 
 						<form method="post" action="LoginServlet">
 							<div class="form-group">
diff --git a/src/main/resources/templates/topmenu.html b/src/main/resources/templates/topmenu.html
index 98fb2c2..645c77e 100644
--- a/src/main/resources/templates/topmenu.html
+++ b/src/main/resources/templates/topmenu.html
@@ -1,17 +1,637 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:th="http://www.thymeleaf.org">
 
 <head>
 	<meta charset="UTF-8">
 	<title>トップメニュー - ShareBooks</title>
+
+	<style>
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Yu Gothic", "Meiryo", sans-serif;
+			color: #18243a;
+			font-size: 14px;
+		}
+
+		a {
+			text-decoration: none;
+			color: inherit;
+		}
+
+		button {
+			font-family: inherit;
+		}
+
+		/* ===== ヘッダー ===== */
+		.header {
+			height: 58px;
+			border-bottom: 1px solid #d8e0e8;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 18px 0 20px;
+			background: #fff;
+		}
+
+		.header-title {
+			font-size: 20px;
+			font-weight: 700;
+			display: flex;
+			gap: 9px;
+			align-items: center;
+		}
+
+		.book-icon {
+			font-size: 24px;
+		}
+
+		.header-right {
+			display: flex;
+			align-items: center;
+			gap: 18px;
+		}
+
+		.user {
+			font-size: 13px;
+			font-weight: 600;
+		}
+
+		.bell {
+			font-size: 22px;
+			position: relative;
+		}
+
+		.badge {
+			position: absolute;
+			top: -3px;
+			right: -5px;
+			background: #e33;
+			color: #fff;
+			border-radius: 9px;
+			font-size: 8px;
+			min-width: 13px;
+			text-align: center;
+		}
+
+		.logout {
+			height: 34px;
+			padding: 0 14px;
+			border: 1px solid #a8b3c0;
+			border-radius: 5px;
+			background: #fff;
+			font-weight: bold;
+			cursor: pointer;
+		}
+
+		/* ===== レイアウト ===== */
+		.layout {
+			display: flex;
+			min-height: calc(100vh - 100px);
+		}
+
+		/* ===== サイドバー ===== */
+		.sidebar {
+			width: 180px;
+			flex: 0 0 180px;
+			background: #082957;
+			color: #fff;
+			padding: 10px 8px;
+		}
+
+		.side-label {
+			font-size: 13px;
+			font-weight: bold;
+			margin: 4px 9px 12px;
+		}
+
+		.side-menu {
+			min-height: 42px;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 0 10px;
+			border-radius: 4px;
+			font-size: 13px;
+			font-weight: bold;
+			margin-bottom: 4px;
+		}
+
+		.side-menu.active {
+			background: #1267d9;
+		}
+
+		.side-icon {
+			font-size: 18px;
+			width: 20px;
+			text-align: center;
+		}
+
+		/* ===== メイン ===== */
+		.content {
+			flex: 1;
+			min-width: 0;
+			padding: 16px 20px 15px;
+		}
+
+		.title {
+			font-size: 26px;
+			margin: 0 0 3px;
+		}
+
+		.description {
+			font-size: 13px;
+			font-weight: bold;
+			color: #4d596b;
+			margin: 0 0 20px;
+		}
+
+		.section-title {
+			font-size: 15px;
+			margin: 0 0 10px;
+		}
+
+		.menu-grid {
+			display: grid;
+			grid-template-columns: repeat(6, 1fr);
+			gap: 12px;
+		}
+
+		.card {
+			height: 181px;
+			border: 1px solid #e0e5eb;
+			border-radius: 4px;
+			box-shadow: 0 2px 7px #1e344d12;
+			background: #fff;
+			position: relative;
+			text-align: center;
+			padding: 16px 10px;
+			transition: .15s;
+		}
+
+		.card:hover,
+		.system-card:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px #1e344d22;
+		}
+
+		.icon {
+			width: 59px;
+			height: 59px;
+			border-radius: 50%;
+			margin: 0 auto 10px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28px;
+		}
+
+		.blue {
+			background: #e6f0ff;
+			color: #3175d2;
+		}
+
+		.green {
+			background: #e8f7ea;
+			color: #55a768;
+		}
+
+		.yellow {
+			background: #fff5d8;
+			color: #c39b31;
+		}
+
+		.purple {
+			background: #f1eaff;
+			color: #8a68ca;
+		}
+
+		.orange {
+			background: #fff0e3;
+			color: #e3974e;
+		}
+
+		.red {
+			background: #fde9eb;
+			color: #d77a82;
+		}
+
+		.card h3 {
+			font-size: 13px;
+			margin: 0 0 6px;
+			line-height: 1.35;
+		}
+
+		.card p {
+			font-size: 11px;
+			line-height: 1.45;
+			color: #5b6575;
+			font-weight: bold;
+			margin: 0;
+		}
+
+		.arrow {
+			position: absolute;
+			right: 10px;
+			bottom: 9px;
+			font-size: 22px;
+		}
+
+		/* ===== システム管理 ===== */
+		.system-section {
+			margin-top: 15px;
+		}
+
+		.system-card {
+			width: 265px;
+			height: 96px;
+			border: 1px solid #e0e5eb;
+			border-radius: 4px;
+			box-shadow: 0 2px 7px #1e344d12;
+			display: flex;
+			align-items: center;
+			padding: 12px 16px;
+			position: relative;
+			background: #fff;
+			transition: .15s;
+		}
+
+		.system-icon {
+			width: 50px;
+			height: 50px;
+			border-radius: 50%;
+			background: #e8f1ff;
+			color: #3978d2;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 25px;
+			margin-right: 14px;
+		}
+
+		.system-card h3 {
+			font-size: 13px;
+			margin: 0 0 4px;
+		}
+
+		.system-card p {
+			font-size: 10px;
+			color: #5b6575;
+			font-weight: bold;
+			margin: 0;
+		}
+
+		/* ===== お知らせ ===== */
+		.notice-section {
+			margin-top: 15px;
+			border-top: 1px solid #e4e8ee;
+			padding-top: 9px;
+		}
+
+		.notice-heading {
+			display: flex;
+			gap: 7px;
+			align-items: center;
+			margin-bottom: 6px;
+		}
+
+		.notice-heading h2 {
+			font-size: 14px;
+			margin: 0;
+		}
+
+		.count {
+			background: #e84242;
+			color: #fff;
+			border-radius: 10px;
+			font-size: 9px;
+			padding: 2px 6px;
+			font-weight: bold;
+		}
+
+		.notice-box {
+			border: 1px solid #e1e6ec;
+			border-radius: 4px;
+			overflow: hidden;
+		}
+
+		.notice {
+			min-height: 36px;
+			display: grid;
+			grid-template-columns: 72px 270px 1fr 125px;
+			align-items: center;
+			gap: 8px;
+			padding: 0 12px;
+			border-bottom: 1px solid #edf0f3;
+			font-size: 11px;
+		}
+
+		.notice:last-child {
+			border: 0;
+		}
+
+		.type {
+			min-width: 51px;
+			width: max-content;
+			padding: 3px 5px;
+			border-radius: 3px;
+			text-align: center;
+			font-size: 9px;
+			font-weight: bold;
+		}
+
+		.danger {
+			background: #fde6e4;
+			color: #d9362e;
+		}
+
+		.warning {
+			background: #fff0d9;
+			color: #dc7b11;
+		}
+
+		.success {
+			background: #e7f7e9;
+			color: #36924a;
+		}
+
+		.message,
+		.target {
+			font-weight: bold;
+			color: #39465a;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.date {
+			text-align: right;
+			white-space: nowrap;
+		}
+
+		/* ===== フッター ===== */
+		.footer {
+			height: 42px;
+			border-top: 1px solid #dfe4ea;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #687386;
+			font-size: 10px;
+		}
+
+		/* ===== レスポンシブ ===== */
+		@media (max-width : 1100px) {
+			.menu-grid {
+				grid-template-columns: repeat(3, 1fr);
+			}
+
+			.menu-grid.user-grid {
+				grid-template-columns: repeat(3, minmax(200px, 250px));
+			}
+		}
+
+		@media (max-width : 700px) {
+			.user {
+				display: none;
+			}
+
+			.sidebar {
+				width: 160px;
+				flex-basis: 160px;
+			}
+
+			.menu-grid {
+				grid-template-columns: repeat(2, 1fr);
+			}
+
+			.menu-grid.user-grid {
+				grid-template-columns: repeat(2, minmax(200px, 250px));
+			}
+
+			.notice {
+				grid-template-columns: 60px 1fr;
+				height: auto;
+				padding: 7px 10px;
+			}
+
+			.target,
+			.date {
+				grid-column: 2;
+				text-align: left;
+			}
+		}
+
+		@media (max-width : 480px) {
+			.layout {
+				display: block;
+			}
+
+			.sidebar {
+				width: 100%;
+			}
+
+			.menu-grid {
+				grid-template-columns: 1fr;
+			}
+
+			.menu-grid.user-grid {
+				grid-template-columns: minmax(220px, 250px);
+			}
+
+			.system-card {
+				width: 100%;
+			}
+		}
+	</style>
 </head>
 
 <body>
 
-	<h1>
-		テスト
-	</h1>
-		
+	<!-- ===== ヘッダー ===== -->
+	<header class="header">
+
+		<div class="header-title">
+			<span class="book-icon">📖</span> ShareBooks
+		</div>
+
+		<div class="header-right">
+
+			<span class="user">
+				<%=session.getAttribute("employeeName")%>（<%=roleName%>）
+			</span>
+
+			<form action="${pageContext.request.contextPath}/logout" method="post"
+				onsubmit="return confirm('ログアウトしますか？');">
+
+				<button type="submit" class="logout">ログアウト</button>
+
+			</form>
+
+		</div>
+	</header>
+
+	<div class="layout">
+
+		<!-- ===== サイドバー ===== -->
+		<aside class="sidebar">
+
+			<div class="side-label">
+				<%=isAdmin ? "共通画面" : "一般メニュー" %>
+			</div>
+
+			<a class="side-menu active" href="${pageContext.request.contextPath}/topmenu.jsp"> <span
+					class="side-icon">⌂</span> トップメニュー
+			</a>
+
+		</aside>
+
+		<!-- ===== メイン ===== -->
+		<main class="content">
+
+			<h1 class="title">トップメニュー</h1>
+
+			<!-- ===== 重要なお知らせ ===== -->
+			<section class="notice-section">
+
+				<div class="notice-heading">
+					<h2>重要なお知らせ</h2>
+					<span class="count">1件</span>
+				</div>
+
+				<div class="notice-box">
+
+					<div class="notice">
+						<span class="type danger">返却期限</span> <span class="message">
+							返却期限が超過している図書があります。 </span> <span class="target"> 対象図書： </span> <span class="date">
+							2026/09/16 09:10 </span>
+					</div>
+
+
+				</div>
+			</section>
+
+			<!-- 超過お知らせと下の文言は1行分空けたい -->
+
+			<section>
+
+				<h2 class="section-title">各一覧メニュー</h2>
+
+				<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
+
+					<!-- ===== 共通：社内図書一覧 ===== -->
+					<a class="card" href="${pageContext.request.contextPath}/BookServlet">
+
+						<div class="icon green">📖</div>
+
+						<h3>社内図書一覧</h3>
+
+						<p>
+							登録されている図書の<br> 一覧を表示します。
+						</p> <span class="arrow">›</span>
+					</a>
+
+					<!-- ===== 管理者のみ ===== -->
+					<% if (isAdmin) { %>
+
+						<a class="card" href="${pageContext.request.contextPath}/lendList">
+							<div class="icon orange">📅</div>
+
+							<h3>
+								※管理者機能<br> 貸出中図書一覧
+							</h3>
+
+							<p>
+								貸出中の備品・図書の<br> 一覧を表示します。
+							</p>
+
+							<span class="arrow"></span>
+						</a>
+
+						<a class="card" href="${pageContext.request.contextPath}/approvalReceive">
+							<div class="icon red">▱</div>
+
+							<h3>
+								※管理者機能<br> 寄贈申請受信ボックス
+							</h3>
+
+							<p>
+								図書寄贈申請の<br> 受信一覧を確認します。
+							</p>
+
+							<span class="arrow">›</span>
+
+						</a>
+
+						<% } %>
+
+				</div>
+
+				<h2 class="section-title">寄贈申請・新規登録メニュー</h2>
+
+				<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
+
+					<!-- ===== 共通：寄贈申請 ===== -->
+					<a class="card" href="${pageContext.request.contextPath}/bookApproval">
+
+						<div class="icon yellow">📗</div>
+
+						<h3>寄贈申請</h3>
+
+						<p>
+							図書の寄贈申請を<br> 行います。
+						</p> <span class="arrow">›</span>
+					</a>
+
+					<!-- ===== 管理者のみ ===== -->
+
+					<% if (isAdmin) { %>
+
+						<a class="card" href="${pageContext.request.contextPath}/insertBook">
+
+							<div class="icon yellow">📗</div>
+
+							<h3>
+								※管理者機能<br> 新規図書登録
+							</h3>
+
+							<p>
+								図書の新規登録を<br> 行います。
+							</p> <span class="arrow">›</span>
+						</a>
+
+						<% } %>
+
+				</div>
+
+			</section>
+
+
+			<!-- ===== パスワード再設定 ===== -->
+			<section class="system-section <%=isAdmin ? " admin-system" : "user-system" %>">
+
+				<h2 class="section-title">システム管理メニュー</h2>
+
+				<a class="system-card" href="passwordChange.jsp">
+
+					<div class="system-icon">🔑</div>
+
+					<div>
+						<h3>パスワード再設定</h3>
+						<p>現在のパスワードを変更します。</p>
+					</div> <span class="arrow">›</span>
+
+				</a>
+
+			</section>
+
+		</main>
+	</div>
+
+	<footer class="footer"> © 2026 社内備品・図書管理システム </footer>
 
 </body>