diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
new file mode 100644
index 0000000..3488de1
--- /dev/null
+++ b/src/main/resources/templates/login.html
@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>ログイン | 社内備品・図書管理システム</title>
+	<style>
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			min-height: 100vh;
+			font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
+			background: linear-gradient(160deg, #cfe0f5 0%, #e8f0fa 45%, #d8e6f5 100%);
+		}
+
+		/* ヘッダーバー */
+		.header-bar {
+			background-color: #16325c;
+			color: #ffffff;
+			padding: 18px 32px;
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			font-size: 16px;
+			font-weight: bold;
+		}
+
+		.header-bar svg {
+			width: 20px;
+			height: 20px;
+		}
+
+		/* 中央エリア */
+		.content-wrap {
+			display: flex;
+			justify-content: center;
+			padding: 56px 16px 40px;
+		}
+
+		.login-card {
+			background: #ffffff;
+			width: 100%;
+			max-width: 420px;
+			padding: 40px 36px 32px;
+			border-radius: 10px;
+			box-shadow: 0 4px 18px rgba(20, 40, 70, 0.10);
+			text-align: center;
+		}
+
+		.book-icon-circle {
+			width: 56px;
+			height: 56px;
+			margin: 0 auto 14px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.book-icon-circle svg {
+			width: 40px;
+			height: 40px;
+			color: #1a56c4;
+		}
+
+		.login-card h1 {
+			font-size: 22px;
+			margin: 0 0 8px;
+			color: #1c2733;
+		}
+
+		.login-card p.subtitle {
+			font-size: 13px;
+			color: #6b7686;
+			margin: 0 0 28px;
+		}
+
+		.form-group {
+			text-align: left;
+			margin-bottom: 18px;
+		}
+
+		.form-group label {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 13px;
+			font-weight: bold;
+			color: #33404f;
+			margin-bottom: 8px;
+		}
+
+		.required-badge {
+			background-color: #e5484d;
+			color: #fff;
+			font-size: 10px;
+			font-weight: bold;
+			padding: 2px 7px;
+			border-radius: 10px;
+		}
+
+		.input-with-icon {
+			position: relative;
+		}
+
+		.input-with-icon svg.left-icon {
+			position: absolute;
+			left: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 16px;
+			height: 16px;
+			color: #9aa4b2;
+		}
+
+		.input-with-icon input {
+			width: 100%;
+			padding: 11px 12px 11px 36px;
+			font-size: 14px;
+			border: 1px solid #d7dde5;
+			border-radius: 6px;
+			background-color: #fafbfc;
+		}
+
+		.input-with-icon input:focus {
+			outline: none;
+			border-color: #1a56c4;
+			background-color: #ffffff;
+		}
+
+		.toggle-password {
+			position: absolute;
+			right: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 16px;
+			height: 16px;
+			color: #9aa4b2;
+			cursor: pointer;
+			background: none;
+			border: none;
+			padding: 0;
+		}
+
+		.btn-login {
+			width: 100%;
+			padding: 12px;
+			margin-top: 6px;
+			background-color: #1a56c4;
+			color: #fff;
+			border: none;
+			border-radius: 6px;
+			font-size: 15px;
+			font-weight: bold;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 8px;
+		}
+
+		.btn-login svg {
+			width: 16px;
+			height: 16px;
+		}
+
+		.btn-login:hover {
+			background-color: #15479f;
+		}
+
+		.forgot-text {
+			font-size: 12px;
+			color: #6b7686;
+			margin-top: 18px;
+		}
+
+		.error-message {
+			background-color: #fdecea;
+			color: #c0392b;
+			font-size: 13px;
+			padding: 10px 12px;
+			border-radius: 6px;
+			margin-bottom: 18px;
+			text-align: left;
+		}
+
+		/* ご利用にあたってボックス */
+		.info-box {
+			max-width: 420px;
+			margin: 18px auto 0;
+			background-color: #eaf2fc;
+			border: 1px solid #d3e3f7;
+			border-radius: 8px;
+			padding: 16px 18px;
+			font-size: 12px;
+			color: #4a5768;
+		}
+
+		.info-box .info-title {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			font-weight: bold;
+			color: #1c2733;
+			margin-bottom: 8px;
+		}
+
+		.info-box .info-title svg {
+			width: 14px;
+			height: 14px;
+			color: #1a56c4;
+		}
+
+		.info-box ul {
+			margin: 0;
+			padding-left: 18px;
+		}
+
+		.info-box li {
+			margin-bottom: 4px;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div class="header-bar">
+		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+			stroke-linejoin="round">
+			<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>
+		社内備品・図書管理システム
+	</div>
+
+	<div class="content-wrap">
+		<div>
+			<div class="login-card">
+				<div class="book-icon-circle">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+						stroke-linejoin="round">
+						<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>
+				</div>
+				<h1>ログイン</h1>
+				<p class="subtitle">社員IDとパスワードを入力して、システムにログインしてください。</p>
+
+				<% if (request.getAttribute("errorMessage") !=null) { %>
+					<div class="error-message">
+						<%= request.getAttribute("errorMessage") %>
+					</div>
+					<% } %>
+
+						<form method="post" action="LoginServlet">
+							<div class="form-group">
+								<label for="employeeId">社員ID <span class="required-badge">必須</span></label>
+								<div class="input-with-icon">
+									<svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+										stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+										<circle cx="12" cy="7" r="4" />
+									</svg>
+									<input type="text" id="employeeId" name="employeeId"
+										placeholder="社員IDを入力してください（例：123456）" required>
+								</div>
+							</div>
+
+							<div class="form-group">
+								<label for="password">パスワード <span class="required-badge">必須</span></label>
+								<div class="input-with-icon">
+									<svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+										stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<rect x="3" y="11" width="18" height="11" rx="2" />
+										<path d="M7 11V7a5 5 0 0 1 10 0v4" />
+									</svg>
+									<input type="password" id="password" name="password" placeholder="パスワードを入力してください"
+										required>
+									<button type="button" class="toggle-password" onclick="togglePassword()">
+										<svg id="eyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+											stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+											<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+											<circle cx="12" cy="12" r="3" />
+										</svg>
+									</button>
+								</div>
+							</div>
+
+							<button type="submit" class="btn-login">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+									stroke-linecap="round" stroke-linejoin="round">
+									<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+									<polyline points="10 17 15 12 10 7" />
+									<line x1="15" y1="12" x2="3" y2="12" />
+								</svg>
+								ログイン
+							</button>
+						</form>
+
+						<p class="forgot-text">パスワードお忘れの方は管理者までご連絡ください</p>
+			</div>
+
+			<div class="info-box">
+				<div class="info-title">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+						stroke-linejoin="round">
+						<circle cx="12" cy="12" r="10" />
+						<line x1="12" y1="16" x2="12" y2="12" />
+						<line x1="12" y1="8" x2="12.01" y2="8" />
+					</svg>
+					ご利用にあたって
+				</div>
+				<ul>
+					<li>当システムの利用は、当社の業務に関連する方に限定されています。</li>
+					<li>不正なアクセスや利用は、社内規程に基づき厳正に対処します。</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<script>
+		function togglePassword() {
+			const input = document.getElementById('password');
+			input.type = (input.type === 'password') ? 'text' : 'password';
+		}
+	</script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/topmenu.html b/src/main/resources/templates/topmenu.html
new file mode 100644
index 0000000..98fb2c2
--- /dev/null
+++ b/src/main/resources/templates/topmenu.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>トップメニュー - ShareBooks</title>
+</head>
+
+<body>
+
+	<h1>
+		テスト
+	</h1>
+		
+
+</body>
+
+</html>
\ No newline at end of file