diff --git a/book-rent/src/main/java/com/example/demo/controller/BookController.java b/book-rent/src/main/java/com/example/demo/controller/BookController.java
index 5344892..1be9cca 100644
--- a/book-rent/src/main/java/com/example/demo/controller/BookController.java
+++ b/book-rent/src/main/java/com/example/demo/controller/BookController.java
@@ -1,5 +1,6 @@
 package com.example.demo.controller;
 
-public class BookController {
 
+public class BookController {
+	
 }
diff --git a/book-rent/src/main/resources/templates/bookList.html b/book-rent/src/main/resources/templates/bookList.html
index 043c10a..3a56306 100644
--- a/book-rent/src/main/resources/templates/bookList.html
+++ b/book-rent/src/main/resources/templates/bookList.html
@@ -7,32 +7,103 @@
 </head>
 
 <body>
+	
+	<div th:replace="~{fragments/header :: header}"></div>
+	<main>
 	<form action="selectBook" method="post" th:object="${searchConditionBookForm}">
-	    <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 placeholder="書籍名" th:field="*{nm_book}" type="text"/></td>
-	        </tr>
-	        <tr>
-	            <th class="header">出版社</th>
-	            <td><!-- ★部署名の入力欄（type="text"）を作る --></td>
-	        </tr>
-	        <tr>
-	            <td class="btnArea" colspan="2"><input type="submit" value="検索"/></td>
-	            <td class="btnArea" colspan="2"><button onclick="clearInput()">クリア</button></td>
-	        </tr>
-	    </table>
-	</form>
-	
-	<a href="showMenu">メニューに戻る</a>
-	<h1><span>検索結果</span></h1>
-	
-	<!-- ★検索結果が1件以上：表(部署ID・部署名)を th:each で繰り返す。変数は departmentFormList -->
-	<!-- ★0件：「検索結果はありません。」を表示 -->
+		<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 placeholder="書籍名" th:field="*{nm_book}" type="text" /></td>
+			</tr>
+			<tr>
+				<th class="header">出版社</th>
+				<td><input placeholder="出版社" th:field="*{publisher}" type="text"></td>
+			</tr>
+			<tr>
+				<th class="header">特記事項</th>
+				<td><input placeholder="特記事項" th:field="*{note}" type="text"></td>
+			</tr>
+			<tr>
+				<td class="btnArea" colspan="2"><input type="submit" value="検索" /></td>
+				<td class="btnArea" colspan="2"><button onclick="clearInput()">クリア</button></td>
+			</tr>
+		</table>
+	</form>
+	<div class="header-spacing"></div>
+	<a href="showMenu">メニューに戻る</a>
+	<div class="header-spacing"></div>
+	<h1><span>検索結果</span></h1>
+	<div class="header-spacing"></div>
+	<th:block th:if="${messageInfo != null}">
+		<script th:inline="javascript">
+			alert([[${messageInfo.message}]]);
+		</script>
+	</th:block>
+	<div class="header-spacing"></div>
+	<th:block th:if="${employeeInfoFormList != null and employeeInfoFormList.size() > 0}">
+
+	<!-- ★検索結果が1件以上：表(部署ID・部署名)を th:each で繰り返す。変数は departmentFormList -->
+	<table class="table-grid table-striped table-hover">
+		<thead>
+			<tr>
+				<th>蔵書ID</th>				
+				<th>ISBN</th>
+				<th>書籍名</th>
+				<th>書籍名よみ</th>
+				<th>出版社</th>
+				<th>特記事項</th>
+				<th>操作</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr th:each="BookCollection : ${BookCollectionList}">
+				<td th:text="${BookCollection.idBook}"></td>
+				<td th:text="${BookCollection.isbn}"></td>
+				<td th:text="${BookCollection.nmBook}"></td>
+				<td th:text="${BookCollection.knBook}"></td>
+				<td th:text="${BookCollection.publisher}"></td>
+				<td th:text="${BookCollection.note}"></td>
+				<td th:text="${BookCollection.nmDepartment}"></td>
+				<td>
+				    <!-- 更新フォーム -->
+		            <form action="showUpdateEmployee" method="post" style="display: inline;">
+	                    <input name="idEmployee" th:value="${employeeInfoForm.idEmployee}" type="hidden">
+			            <input type="submit" value="更新">
+	                </form>
+		            <!-- 削除フォーム -->
+				    <form action="deleteEmployee" method="post" onsubmit="return confirm('本当に削除しますか？');"
+				                      style="display: inline;">
+				         <input name="idEmployee" th:value="${employeeInfoForm.idEmployee}" type="hidden">
+				         <input type="submit" value="削除">
+				    </form>
+				</td>
+			 </tr>
+	    </tbody>
+	</table>
+</th:block>
+	<!-- ★0件：「検索結果はありません。」を表示 -->
+	<th:block th:if="${employeeInfoFormList == null or employeeInfoFormList.size() == 0}">
+		検索結果はありません。
+	</th:block>
+	</main>
 </body>
+<script type="text/javascript">
+
+    function clearInput() {
+        document.getElementById('idEmployee').value = '';
+        document.getElementById('nmEmployee').value = '';
+        document.getElementById('knEmployee').value = '';
+        document.getElementById('mailAddress').value = '';
+        document.getElementById('idDepartment').selectedIndex = 0;
+    }
+
+
+</script>
 
 </html>
\ No newline at end of file