diff --git a/src/main/resources/templates/daily.html b/src/main/resources/templates/daily.html
new file mode 100644
index 0000000..574b63a
--- /dev/null
+++ b/src/main/resources/templates/daily.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Daily To-Do List</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #F1F3F9;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .home {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+            padding: 10px 15px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 14px;
+            transition: background-color 0.3s;
+        }
+
+        .home:hover {
+            background-color: #5BAA9D;
+        }
+
+        .tabs {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .tabs button {
+            background-color: #6FD1C5;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 20px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: bold;
+            color: #FFFFFF;
+            transition: all 0.3s ease;
+        }
+
+        .tabs button:hover {
+            background-color: #5BAA9D;
+        }
+
+        .tabs .active {
+            background-color: #5BAA9D;
+        }
+
+        .container {
+            background-color: #FFFFFF;
+            width: 90%;
+            max-width: 700px;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+            margin-top: 80px;
+            height: calc(100vh - 120px);
+            overflow-y: auto;
+        }
+
+        .logo {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
+        .section {
+            margin-bottom: 20px;
+        }
+
+        .section h2 {
+            font-size: 28px;
+            font-weight: bold;
+            color: #333333;
+            margin-bottom: 20px;
+            text-align: center;
+            display: inline-block;
+        }
+
+        .add-btn {
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+
+        .add-btn:hover {
+            background-color: #5BAA9D;
+        }
+
+        .date-box {
+            background-color: #E3F2FD;
+            padding: 12px;
+            margin: 10px auto 20px;
+            text-align: center;
+            font-size: 20px;
+            font-weight: bold;
+            color: #1976D2;
+            border-radius: 10px;
+            width: 80px;
+            border: 1px solid #BBDEFB;
+        }
+
+        .todo-item {
+            background-color: #FAFAFA;
+            border: 1px solid #EEEEEE;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+
+        .todo-item h3 {
+            margin: 0 0 8px;
+            font-size: 16px;
+            color: #424242;
+        }
+
+        .todo-item p {
+            margin: 0 0 10px;
+            color: #757575;
+            font-size: 14px;
+        }
+
+        .todo-item .actions {
+            display: flex;
+            gap: 10px;
+        }
+
+        .action-btn {
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            font-size: 18px;
+        }
+
+        .priority {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: bold;
+            text-transform: uppercase;
+            width: fit-content;
+        }
+
+        .priority.high {
+            color: #D32F2F;
+            background-color: #FFCDD2;
+        }
+
+        .priority.medium {
+            color: #F57C00;
+            background-color: #FFE0B2;
+        }
+
+        .priority.low {
+            color: #388E3C;
+            background-color: #C8E6C9;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background-color: #FFFFFF;
+            padding: 20px;
+            border-radius: 12px;
+            text-align: center;
+            width: 300px;
+        }
+
+        .modal-content button {
+            margin: 10px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+        }
+
+        .modal-content .confirm {
+            background-color: #D32F2F;
+            color: #FFFFFF;
+        }
+
+        .modal-content .cancel {
+            background-color: #B0BEC5;
+            color: #FFFFFF;
+        }
+
+    </style>
+</head>
+<body>
+    <a href="index.html" class="home">Home</a>
+
+    <div class="tabs">
+        <a href="daily.html"><button class="active">Daily</button></a>
+        <a href="weekly.html"><button>Weekly</button></a>
+        <a href="monthly.html"><button>Monthly</button></a>
+    </div>
+
+    <div class="container">
+        <div class="logo">
+            <img src="로고.png" alt="Logo" style="height: 50px;">
+        </div>
+        <div class="section">
+            <h2>Daily</h2>
+            <button class="add-btn">+</button>
+            <div class="date-box">16</div>
+            <div class="todo-item">
+                <h3>Task Title</h3>
+                <p>Description of the task goes here.</p>
+                <span class="priority high">High</span>
+                <div class="actions">
+                    <button class="action-btn">✏️</button>
+                    <button class="action-btn delete">🗑️</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="deleteModal">
+        <div class="modal-content">
+            <p>Are you sure you want to delete this task?</p>
+            <button class="confirm">Yes</button>
+            <button class="cancel">No</button>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            const modal = document.getElementById("deleteModal");
+            const confirmDelete = modal.querySelector(".confirm");
+            const cancelDelete = modal.querySelector(".cancel");
+            const deleteButtons = document.querySelectorAll(".delete");
+
+            deleteButtons.forEach(button => {
+                button.addEventListener("click", () => {
+                    modal.style.display = "flex";
+                });
+            });
+
+            confirmDelete.addEventListener("click", () => {
+                alert("Task deleted.");
+                modal.style.display = "none";
+            });
+
+            cancelDelete.addEventListener("click", () => {
+                modal.style.display = "none";
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/src/main/resources/templates/monthly.html b/src/main/resources/templates/monthly.html
new file mode 100644
index 0000000..11ae373
--- /dev/null
+++ b/src/main/resources/templates/monthly.html
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Monthly To-Do List</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #F1F3F9;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .home {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+            padding: 10px 15px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 14px;
+            transition: background-color 0.3s;
+        }
+
+        .home:hover {
+            background-color: #5BAA9D;
+        }
+
+        .tabs {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .tabs button {
+            background-color: #6FD1C5;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 20px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: bold;
+            color: #FFFFFF;
+            transition: all 0.3s ease;
+        }
+
+        .tabs button:hover {
+            background-color: #5BAA9D;
+        }
+
+        .tabs .active {
+            background-color: #5BAA9D;
+        }
+
+        .container {
+            background-color: #FFFFFF;
+            width: 90%;
+            max-width: 700px;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+            margin-top: 80px;
+            height: calc(100vh - 120px);
+            overflow-y: auto;
+        }
+
+        .logo {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
+        .section {
+            margin-bottom: 20px;
+        }
+
+        .section h2 {
+            font-size: 28px;
+            font-weight: bold;
+            color: #333333;
+            margin-bottom: 20px;
+            text-align: center;
+            display: inline-block;
+        }
+
+        .add-btn {
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+
+        .add-btn:hover {
+            background-color: #5BAA9D;
+        }
+
+        .month-box {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .day {
+            background-color: #E3F2FD;
+            padding: 12px;
+            text-align: center;
+            font-size: 16px;
+            font-weight: bold;
+            color: #1976D2;
+            border-radius: 10px;
+            width: 50px;
+            border: 1px solid #BBDEFB;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .day:hover {
+            background-color: #5BAA9D;
+            color: #FFFFFF;
+        }
+
+        .selected-day {
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+        }
+
+        .todo-item {
+            background-color: #FAFAFA;
+            border: 1px solid #EEEEEE;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+
+        .todo-item h3 {
+            margin: 0 0 8px;
+            font-size: 16px;
+            color: #424242;
+        }
+
+        .todo-item p {
+            margin: 0 0 10px;
+            color: #757575;
+            font-size: 14px;
+        }
+
+        .todo-item .actions {
+            display: flex;
+            gap: 10px;
+        }
+
+        .action-btn {
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            font-size: 18px;
+        }
+
+        .priority {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: bold;
+            text-transform: uppercase;
+            width: fit-content;
+        }
+
+        .priority.high {
+            color: #D32F2F;
+            background-color: #FFCDD2;
+        }
+
+        .priority.medium {
+            color: #F57C00;
+            background-color: #FFE0B2;
+        }
+
+        .priority.low {
+            color: #388E3C;
+            background-color: #C8E6C9;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background-color: #FFFFFF;
+            padding: 20px;
+            border-radius: 12px;
+            text-align: center;
+            width: 300px;
+        }
+
+        .modal-content button {
+            margin: 10px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+        }
+
+        .modal-content .confirm {
+            background-color: #D32F2F;
+            color: #FFFFFF;
+        }
+
+        .modal-content .cancel {
+            background-color: #B0BEC5;
+            color: #FFFFFF;
+        }
+    </style>
+</head>
+<body>
+    <a href="index.html" class="home">Home</a>
+
+    <div class="tabs">
+        <a href="daily.html"><button>Daily</button></a>
+        <a href="weekly.html"><button>Weekly</button></a>
+        <a href="monthly.html"><button class="active">Monthly</button></a>
+    </div>
+
+    <div class="container">
+        <div class="logo">
+            <img src="로고.png" alt="Logo" style="height: 50px;">
+        </div>
+        <div class="section">
+            <h2>Monthly</h2><button class="add-btn">+</button>
+            <div class="month-box">
+                <div class="day selected-day">12</div>
+            </div>
+            <div class="todo-item">
+                <h3>Task Title</h3>
+                <p>Description of the task goes here.</p>
+                <span class="priority high">High</span>
+                <div class="actions">
+                    <button class="action-btn">✏️</button>
+                    <button class="action-btn delete">🗑️</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="deleteModal">
+        <div class="modal-content">
+            <p>Are you sure you want to delete this task?</p>
+            <button class="confirm">Yes</button>
+            <button class="cancel">No</button>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            const modal = document.getElementById("deleteModal");
+            const confirmDelete = modal.querySelector(".confirm");
+            const cancelDelete = modal.querySelector(".cancel");
+            const deleteButtons = document.querySelectorAll(".delete");
+
+            deleteButtons.forEach(button => {
+                button.addEventListener("click", () => {
+                    modal.style.display = "flex";
+                });
+            });
+
+            confirmDelete.addEventListener("click", () => {
+                alert("Task deleted.");
+                modal.style.display = "none";
+            });
+
+            cancelDelete.addEventListener("click", () => {
+                modal.style.display = "none";
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/src/main/resources/templates/weekly.html b/src/main/resources/templates/weekly.html
new file mode 100644
index 0000000..6d77001
--- /dev/null
+++ b/src/main/resources/templates/weekly.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weekly To-Do List</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #F1F3F9;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .home {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+            padding: 10px 15px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 14px;
+            transition: background-color 0.3s;
+        }
+
+        .home:hover {
+            background-color: #5BAA9D;
+        }
+
+        .tabs {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .tabs button {
+            background-color: #6FD1C5;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 20px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: bold;
+            color: #FFFFFF;
+            transition: all 0.3s ease;
+        }
+
+        .tabs button:hover {
+            background-color: #5BAA9D;
+        }
+
+        .tabs .active {
+            background-color: #5BAA9D;
+        }
+
+        .container {
+            background-color: #FFFFFF;
+            width: 90%;
+            max-width: 700px;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+            margin-top: 80px;
+            height: calc(100vh - 120px);
+            overflow-y: auto;
+        }
+
+        .logo {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
+        .section {
+            margin-bottom: 20px;
+        }
+
+        .section h2 {
+            font-size: 28px;
+            font-weight: bold;
+            color: #333333;
+            margin-bottom: 20px;
+            text-align: center;
+            display: inline-block;
+        }
+
+        .add-btn {
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+
+        .add-btn:hover {
+            background-color: #5BAA9D;
+        }
+
+        .week-box {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .week-day {
+            background-color: #E3F2FD;
+            padding: 12px;
+            text-align: center;
+            font-size: 16px;
+            font-weight: bold;
+            color: #1976D2;
+            border-radius: 10px;
+            width: 50px;
+            border: 1px solid #BBDEFB;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .week-day:hover {
+            background-color: #5BAA9D;
+            color: #FFFFFF;
+        }
+
+        .selected-week {
+            background-color: #6FD1C5;
+            color: #FFFFFF;
+        }
+
+        .todo-item {
+            background-color: #FAFAFA;
+            border: 1px solid #EEEEEE;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+
+        .todo-item h3 {
+            margin: 0 0 8px;
+            font-size: 16px;
+            color: #424242;
+        }
+
+        .todo-item p {
+            margin: 0 0 10px;
+            color: #757575;
+            font-size: 14px;
+        }
+
+        .todo-item .actions {
+            display: flex;
+            gap: 10px;
+        }
+
+        .action-btn {
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            font-size: 18px;
+        }
+
+        .priority {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: bold;
+            text-transform: uppercase;
+            width: fit-content;
+        }
+
+        .priority.high {
+            color: #D32F2F;
+            background-color: #FFCDD2;
+        }
+
+        .priority.medium {
+            color: #F57C00;
+            background-color: #FFE0B2;
+        }
+
+        .priority.low {
+            color: #388E3C;
+            background-color: #C8E6C9;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background-color: #FFFFFF;
+            padding: 20px;
+            border-radius: 12px;
+            text-align: center;
+            width: 300px;
+        }
+
+        .modal-content button {
+            margin: 10px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+        }
+
+        .modal-content .confirm {
+            background-color: #D32F2F;
+            color: #FFFFFF;
+        }
+
+        .modal-content .cancel {
+            background-color: #B0BEC5;
+            color: #FFFFFF;
+        }
+
+    </style>
+</head>
+<body>
+    <a href="index.html" class="home">Home</a>
+
+    <div class="tabs">
+        <a href="daily.html"><button>Daily</button></a>
+        <a href="weekly.html"><button class="active">Weekly</button></a>
+        <a href="monthly.html"><button>Monthly</button></a>
+    </div>
+
+    <div class="container">
+        <div class="logo">
+            <img src="로고.png" alt="Logo" style="height: 50px;">
+        </div>
+        <div class="section">
+            <h2>Weekly</h2><button class="add-btn">+</button>
+            <div class="week-box">
+                <div class="week-day selected-week">1-7</div>
+                <div class="week-day">8-14</div>
+                <div class="week-day">15-21</div>
+                <div class="week-day">22-28</div>
+            </div>
+            <div class="todo-item">
+                <h3>Task Title</h3>
+                <p>Description of the task goes here.</p>
+                <span class="priority high">High</span>
+                <div class="actions">
+                    <button class="action-btn">✏️</button>
+                    <button class="action-btn delete">🗑️</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="deleteModal">
+        <div class="modal-content">
+            <p>Are you sure you want to delete this task?</p>
+            <button class="confirm">Yes</button>
+            <button class="cancel">No</button>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            const modal = document.getElementById("deleteModal");
+            const confirmDelete = modal.querySelector(".confirm");
+            const cancelDelete = modal.querySelector(".cancel");
+            const deleteButtons = document.querySelectorAll(".delete");
+
+            deleteButtons.forEach(button => {
+                button.addEventListener("click", () => {
+                    modal.style.display = "flex";
+                });
+            });
+
+            confirmDelete.addEventListener("click", () => {
+                alert("Task deleted.");
+                modal.style.display = "none";
+            });
+
+            cancelDelete.addEventListener("click", () => {
+                modal.style.display = "none";
+            });
+        });
+    </script>
+</body>
+</html>
