diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..6b5e56bc719a4e01c71b575410afae1a4226c0bb
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,137 @@
+/* Reset default styles */
+body {
+ margin: 0;
+ padding: 0;
+ font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+
+/* Container for the entire layout */
+.container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+/* Header styling */
+.header {
+ background-color: #ddf;
+ color: #000;
+ padding: 10px;
+ padding-bottom: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header h1 {
+ margin: 0;
+}
+
+header button {
+ margin-top: 0px;
+}
+
+.user-actions {
+ display: flex;
+ gap: 10px;
+}
+
+/* Main content styling */
+.main-content {
+ display: flex;
+ flex-grow: 1; /* Makes the main content stretch to fill the remaining space */
+ overflow-y: hidden; /* Hides overflow within the main content */
+}
+
+/* Sidebar styling */
+.sidebar {
+ width: 200px; /* Adjust the width as needed */
+ padding: 25px;
+ background-color: #ddf;
+}
+
+.status-bar {
+ list-style: none;
+ padding: 0;
+}
+
+/* Task list styling */
+.task-list {
+ flex-grow: 1; /* Makes the task list stretch to fill the remaining space */
+ padding: 10px;
+ padding-top: 25px;
+ overflow-y: auto; /* Enables vertical scrolling within the task list */
+ max-height: calc(100vh - 100px); /* Adjust the max-height as needed */
+}
+
+.task {
+ border-bottom: 1px solid #aaf;
+ padding: 10px;
+}
+
+.task-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 5px;
+}
+
+p {
+ font-size: 24px;
+ margin-bottom: 0;
+}
+
+button {
+ margin-top: 1rem;
+ padding: 0.5rem;
+ background-color: #bbf;
+ color: #000;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+button:hover {
+ background-color: #99f;
+}
+
+.hide-btn {
+ background-color: #0f0;
+}
+
+.hide-btn:hover {
+ background-color: #0c0;
+}
+
+.edit-btn {
+ background-color: #ff0;
+}
+
+.edit-btn:hover {
+ background-color: #cc0;
+}
+
+.delete-btn {
+ background-color: #f00;
+}
+
+.delete-btn:hover {
+ background-color: #c00;
+}
+
+.add-btn {
+ background-color: #f70;
+}
+
+.add-btn:hover {
+ background-color: #f40;
+}
+
+.new-btn {
+ width: 40%;
+ font-weight: bold;
+}
+
+input {
+ font-size: 24px;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ada57ea8c9c12520292fade7ef865dc207dc0bcd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>To-Do Dashboard</title>
+ <link rel="stylesheet" href="./css/main.css"> </head>
+<body>
+ <div class="container">
+ <header class="header">
+ <h1>To-Do Dashboard</h1>
+ <button class="new-btn">New Task</button>
+ <div class="user-actions">
+ <button class id="change-password-btn">Change Password</button>
+ <button id="logout-btn">Logout</button>
+ </div>
+ </header>
+ <main class="main-content">
+ <aside class="sidebar">
+ <h2>Status</h2>
+ <ul class="status-bar">
+ <li><progress id="file" value="3" max="5"> 60% </progress></li>
+ <li>Total Tasks: <span id="total-tasks">5</span></li>
+ <li>Active: <span id="active-tasks">2</span></li>
+ <li>Hidden: <span id="hidden-tasks">3</span></li>
+ <li><button id="show-hidden-btn">Show Hidden</button></li>
+ </ul>
+ </aside>
+ <section class="task-list">
+ <h2>Tasks</h2>
+ <ul>
+ <li class="task">
+ <form method="POST" action="" autocomplete="off">
+ <input type="text" name="task" style="width:60%;">
+ <div class="task-actions">
+ <button class="add-btn">Add</button>
+ </div>
+ </form>
+ </li>
+ <li class="task">
+ <p>Finish Project Report</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Buy Groceries</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Finish Project Report</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Buy Groceries</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Finish Project Report</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Buy Groceries</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Finish Project Report</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Buy Groceries</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ <li class="task">
+ <p>Finish Project Report</p>
+ <div class="task-actions">
+ <button class="hide-btn">Done</button>
+ <button class="edit-btn">Edit</button>
+ <button class="delete-btn">Delete</button>
+ </div>
+ </li>
+ </ul>
+ </section>
+ </main>
+ </div>
+ </body>
+</html>
\ No newline at end of file