diff --git a/src/main/java/com/example/demo/controller/BookLendController.java b/src/main/java/com/example/demo/controller/BookLendController.java
index 5b535e8..6683951 100644
--- a/src/main/java/com/example/demo/controller/BookLendController.java
+++ b/src/main/java/com/example/demo/controller/BookLendController.java
@@ -1,13 +1,30 @@
 package com.example.demo.controller;
 
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.PostMapping;
+
+import com.example.demo.entity.Employee;
+import com.example.demo.repository.EmployeeRepository;
+
 @Controller
 public class BookLendController {
-		@PostMapping("/bookLend")
-		public String bookLend() {
-			return "bookLend";
-		}
+
+	@Autowired
+	private EmployeeRepository employeeRepository;
+
+	@PostMapping("/bookLend")
+	public String bookLend(Model model) {
+		return "bookLend";
+	}
 	
+	// 社員IDを取得してプルダウンに表示させる
+	@PostMapping("/bookLend/employeeId")
+	public String selectEmployeeId(Employee employee, Model model) {
+		model.addAttribute("employeeList", employeeRepository.findByEmployeeId(employee.getEmployeeId()));
+		model.addAttribute("bookLend", employee);
+		return "bookLend";
+	}
 
 }
diff --git a/src/main/java/com/example/demo/form/BookLendForm.java b/src/main/java/com/example/demo/form/BookLendForm.java
new file mode 100644
index 0000000..ecf8f1f
--- /dev/null
+++ b/src/main/java/com/example/demo/form/BookLendForm.java
@@ -0,0 +1,7 @@
+package com.example.demo.form;
+
+// 図書の貸出処理に使用予定
+
+public class BookLendForm {
+
+}
diff --git a/src/main/java/com/example/demo/repository/EmployeeRepository.java b/src/main/java/com/example/demo/repository/EmployeeRepository.java
new file mode 100644
index 0000000..12605e9
--- /dev/null
+++ b/src/main/java/com/example/demo/repository/EmployeeRepository.java
@@ -0,0 +1,12 @@
+package com.example.demo.repository;
+
+import java.util.List;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import com.example.demo.entity.Employee;
+
+public interface EmployeeRepository extends JpaRepository<Employee, Integer>{
+
+	List<Employee> findByEmployeeId(Integer employeeId);
+}
diff --git a/src/main/java/com/example/demo/service/BookLendService.java b/src/main/java/com/example/demo/service/BookLendService.java
index 2296807..a416702 100644
--- a/src/main/java/com/example/demo/service/BookLendService.java
+++ b/src/main/java/com/example/demo/service/BookLendService.java
@@ -18,4 +18,4 @@ public class BookLendService {
 		return bookLendRepository.findAll();
 	}
 
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/bookLend.html b/src/main/resources/templates/bookLend.html
index 5f90131..fe4a3c2 100644
--- a/src/main/resources/templates/bookLend.html
+++ b/src/main/resources/templates/bookLend.html
@@ -1,32 +1,208 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:th="http://www.thymeleaf.org">
+
 <head>
-<meta charset="UTF-8">
-<title>図書貸出処理</title>
+	<meta charset="UTF-8">
+	<title>図書貸出処理</title>
 </head>
+
 <body>
-	図書貸出処理
-	<form id="loanForm"action="bookLendConfirmation" method="post">
-			<div class="button-area">
 
-						<div class="right-buttons">
-							<button type="button" class="btn btn-primary"
-								onclick="submitLoan()">貸出する</button>
-						</div>
-					</div>
+	<h1>
+		図書貸出処理
+	</h1>
 
-				</form>
+	<p>
+		以下の図書を貸出します。貸出先と貸出日・返却予定日を入力してください。
+	</p>
+
+	<h2>
+		図書情報
+	</h2>
+
+	<div class="card-body">
+		<table class="info-table">
+			<tr>
+				<th>
+					図書管理ID
+				</th>
+
+				<td>
+					（図書管理IDをここに表示させる）
+				</td>
+			</tr>
+
+			<tr>
+				<th>
+					図書タイトル
+				</th>
+
+				<td>
+					（タイトルをここに表示させる）
+				</td>
+			</tr>
+
+			<tr>
+				<th>
+					著者名
+				</th>
+
+				<td>
+					（著者名をここに表示させる）
+				</td>
+			</tr>
+
+			<tr>
+				<th>
+					ISBN
+				</th>
+
+				<td>
+					（ISBNをここに表示させる）
+				</td>
+			</tr>
+		</table>
+	</div>
+
+	<h2>
+		社員情報
+	</h2>
+
+	<div class="card">
+
+		<div class="form-row">
+
+			<label for="employeeSelect">
+				社員ID
+			</label>
+
+<!--			<select th:field="*{employeeId}" onchange="this.form.action='/bookLend/employeeId';this.form.submit();">-->
+
+			<select name="employeeId" id="employeeSelect">
 				
-				<script>
-				
-				function submitLoan() {
+				<option value="">
+					社員IDを選択してください
+				</option>
 
-							if (confirm('この図書を貸出しますか？')) {
-								// OK選択時にフォーム送信を実行し、BookLendReturnControllerに処理を投げる
-								document.getElementById('loanForm').submit();
-							}
-						}
-		</script>
+<!--				<option th:each="employee : ${employeeList}" th:value="${employee.employeeId}">-->
+<!--				</option>-->
+
+				<option value="1">1</option>
+				<option value="2">2</option>
+				<option value="3">3</option>
+				<option value="4">4</option>
+				
+			</select>
+		</div>
+
+		<div class="form-row">
+			<label for="employeeName">
+				社員名
+			</label>
+
+			<input type="text" id="employeeName" value="" placeholder="社員名が表示されます" readonly>
+
+		</div>
+
+	</div>
+
+	<h2>
+		貸出・返却日入力
+	</h2>
+
+	<div class="date-section">
+
+		<div class="date-box">
+
+			<label>
+				貸出日(自動取得)
+			</label>
+
+			<input type="date" id="loanDate" name="loanDate" value="">
+
+			<div class="note">
+				※ 現在の日付が自動で設定されます。
+			</div>
+
+		</div>
+
+		<div class="date-box">
+
+			<label>
+				貸出期間日数
+			</label>
+
+			<input type="text" id="loanDays" placeholder="日数を入力してください">
+
+			<div class="note">
+				※ 数値（1以上）で入力してください。
+			</div>
+
+		</div>
+
+		<div class="date-box">
+
+			<label>
+				返却予定日（必須）
+			</label>
+
+			<input type="date" id="returnDate" name="returnDate">
+
+			<div class="note">
+				※ カレンダーから日付を選択してください。
+			</div>
+
+			<div class="error">
+				※ 現在の日付より前は選択できません。
+			</div>
+
+		</div>
+
+	</div>
+
+	<div class="warning-area">
+
+		<strong>
+			注意事項
+		</strong>
+
+		<ul>
+			<li>
+				貸出処理を行うと、対象の図書のステータスが「貸出中」に変更されます。
+			</li>
+
+			<li>
+				返却予定日を必ず指定してください。
+			</li>
+		</ul>
+
+	</div>
+
+	<form id="lendForm" action="bookLendConfirmation" method="post">
+		<div class="button-area">
+
+			<div class="right-buttons">
+				<button type="button" class="btn btn-primary" onclick="submitLend()">
+					貸出する
+				</button>
+			</div>
+
+		</div>
+
+	</form>
+
+	<script>
+
+		function submitLend() {
+
+			if (confirm('この図書を貸出しますか？')) {
+				// OK選択時にフォーム送信を実行し、BookLendReturnControllerに処理を投げる
+				document.getElementById('lendForm').submit();
+			}
+		}
+
+	</script>
 
 </body>
+
 </html>
\ No newline at end of file