diff --git a/book-rent/src/main/resources/templates/employeeRegistComplete.html b/book-rent/src/main/resources/templates/employeeRegistComplete.html
new file mode 100644
index 0000000..4de5730
--- /dev/null
+++ b/book-rent/src/main/resources/templates/employeeRegistComplete.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>社員登録完了画面</title>
+    <link rel="stylesheet" th:href="@{/css/all.css}">
+    <style>
+        .complete-container {
+            width: 420px;
+            min-height: 140px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            background-color: #eaf7f8;
+        }
+        .header {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 25px;
+        }
+        .message {
+            margin: 20px 0;
+        }
+        .back-link {
+            margin-top: 25px;
+            font-size: 13px;
+        }
+    </style>
+</head>
+<body>
+    <main class="complete-container">
+        <div class="header">
+            <form th:action="@{/logout}" method="post">
+                <button type="submit">ログアウト</button>
+            </form>
+        </div>
+        <p class="message">社員登録が完了しました。</p>
+        <div class="back-link">
+            <a th:href="@{/menu}">メニューに戻る</a>
+        </div>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/book-rent/src/main/resources/templates/employeeRegistConfrim.html b/book-rent/src/main/resources/templates/employeeRegistConfrim.html
new file mode 100644
index 0000000..1e8dd6e
--- /dev/null
+++ b/book-rent/src/main/resources/templates/employeeRegistConfrim.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>社員登録確認画面</title>
+    <link rel="stylesheet" th:href="@{/css/all.css}">
+    <style>
+        .register-container {
+            width: 420px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            background-color: #eaf7f8;
+        }
+        .header {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 25px;
+        }
+        .form-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .form-row label {
+            width: 130px;
+            font-size: 13px;
+        }
+        .form-row span {
+            font-size: 13px;
+            overflow-wrap: anywhere;
+        }
+        .role-row {
+            margin: 18px 0;
+            font-size: 13px;
+        }
+        .actions {
+            text-align: right;
+            margin: 20px 45px 10px 0;
+        }
+        .back-link {
+            margin-top: 25px;
+            font-size: 13px;
+        }
+    </style>
+</head>
+<body>
+    <main class="register-container">
+        <div class="header">
+            <form th:action="@{/logout}" method="post">
+                <button type="submit">ログアウト</button>
+            </form>
+        </div>
+        <h2>社員登録確認</h2>
+        <form th:action="@{/employees/register/complete}" method="post">
+            <div class="form-row">
+                <label>社員名</label>
+                <span th:text="${nmEmployee}"></span>
+                <input type="hidden" name="nmEmployee"
+                       th:value="${nmEmployee}">
+            </div>
+            <div class="form-row">
+                <label>社員名よみ</label>
+                <span th:text="${knEmployee}"></span>
+                <input type="hidden" name="knEmployee"
+                       th:value="${knEmployee}">
+            </div>
+            <div class="form-row">
+                <label>メールアドレス</label>
+                <span th:text="${mailAddress}"></span>
+                <input type="hidden" name="mailAddress"
+                       th:value="${mailAddress}">
+            </div>
+            <div class="form-row">
+                <label>パスワード</label>
+                <span>********</span>
+                <input type="hidden" name="password"
+                       th:value="${password}">
+            </div>
+            <div class="role-row">
+                <span th:text="${role}"></span>
+                <input type="hidden" name="role"
+                       th:value="${role}">
+            </div>
+            <div class="actions">
+                <button type="submit">登録</button>
+            </div>
+        </form>
+        <div class="back-link">
+            <a th:href="@{/employees/register}">社員情報入力に戻る</a>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/book-rent/src/main/resources/templates/employeeRegistInput.html b/book-rent/src/main/resources/templates/employeeRegistInput.html
new file mode 100644
index 0000000..635bf26
--- /dev/null
+++ b/book-rent/src/main/resources/templates/employeeRegistInput.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>社員登録入力画面</title>
+    <link rel="stylesheet" th:href="@{/css/all.css}">
+    <style>
+        .register-container {
+            width: 420px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            background-color: #eaf7f8;
+        }
+        .header {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 25px;
+        }
+        .form-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .form-row label {
+            width: 130px;
+            font-size: 13px;
+        }
+        .form-row input {
+            width: 180px;
+            box-sizing: border-box;
+        }
+        .role-row {
+            margin: 18px 0;
+            font-size: 13px;
+        }
+        .actions {
+            text-align: right;
+            margin: 20px 45px 10px 0;
+        }
+        .back-link {
+            margin-top: 25px;
+            font-size: 13px;
+        }
+    </style>
+</head>
+<body>
+    <main class="register-container">
+        <!-- ログアウト -->
+        <div class="header">
+            <form th:action="@{/logout}" method="post">
+                <button type="submit">ログアウト</button>
+            </form>
+        </div>
+        <h2>社員登録</h2>
+        <!-- 社員情報入力 -->
+        <form th:action="@{/employees/register/confirm}" method="post">
+            <div class="form-row">
+                <label for="nmEmployee">社員名</label>
+                <input type="text" id="nmEmployee"
+                       name="nmEmployee" required>
+            </div>
+            <div class="form-row">
+                <label for="knEmployee">社員名よみ</label>
+                <input type="text" id="knEmployee"
+                       name="knEmployee" required>
+            </div>
+            <div class="form-row">
+                <label for="mailAddress">メールアドレス</label>
+                <input type="email" id="mailAddress"
+                       name="mailAddress" required>
+            </div>
+            <div class="form-row">
+                <label for="password">パスワード</label>
+                <input type="password" id="password"
+                       name="password" required>
+            </div>
+            <!-- 権限選択 -->
+            <div class="role-row">
+                <label>
+                    <input type="radio" name="role"
+                           value="管理者" required>
+                    管理者
+                </label>
+                <label>
+                    <input type="radio" name="role"
+                           value="一般ユーザー">
+                    一般ユーザー
+                </label>
+            </div>
+            <!-- 登録確認へ -->
+            <div class="actions">
+                <button type="submit">登録確認</button>
+            </div>
+        </form>
+        <!-- メニューへ戻る -->
+        <div class="back-link">
+            <a th:href="@{/menu}">メニューへ戻る</a>
+        </div>
+    </main>
+</body>
+</html>
\ No newline at end of file