diff --git a/js/index.js b/js/index.js
index 856ea83..1b49afe 100644
--- a/js/index.js
+++ b/js/index.js
@@ -25,12 +25,65 @@ let upcoming = [{
     title: "Lorem3",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 }]
+
+let project1 = [{
+    id: 10,
+    title: "Lorem1",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}, {
+    id: 12,
+    title: "Lorem2",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}, {
+    id: 11,
+    title: "Lorem3",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}]
+
+let project2 = [{
+    id: 13,
+    title: "Lorem1",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}, {
+    id: 15,
+    title: "Lorem2",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}, {
+    id: 14,
+    title: "Lorem3",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}]
+
+let project3 = [{
+    id: 16,
+    title: "Lorem1",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}, {
+    id: 18,
+    title: "Lorem2",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}, {
+    id: 17,
+    title: "Lorem3",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}]
+
+
 let projectList = {
     "today": today,
-    "upcoming": upcoming
+    "upcoming": upcoming,
+    "project1": project1,
+    "project2": project2,
+    "project3": project3
+}
+
+let projectList1 = {
+    "project1": project1,
+    "project2": project2,
+    "project3": project3
 }
 
-let currentView; 
+let currentView;
 
 
 function removeTask(id) {
@@ -84,6 +137,47 @@ function showProject(listId) {
 }
 
 
+function showProjectList() {
+    projectListArray = Object.keys(projectList1);
+    let projects = "";
+    for (let i = 0; i < projectListArray.length; i++) {
+        projects += "<li class='list-unstyled px-3'>" +
+            "<div class='d-flex justify-content-center align-items-center'>" +
+            "<a href='#' class='list-group-item list-group-item-action' id='" + projectListArray[i] + "'onclick='showProject(" + 'id' + ")'>" + projectListArray[i] + "</a>" +
+            "<div class='dropdown'>" +
+            "<button class='btn dropdown-toggle' type='button' id='dropdownMenuButton1' data-bs-toggle='dropdown' aria-expanded='false'></button>" +
+            "<ul class='dropdown-menu' aria-labelledby='dropdownMenuButton1'>" +
+            "<li>";
+
+        projects += "<li>" +
+            "<a class='dropdown-item' href='#'>" +
+            "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil-square' viewBox='0 0 16 16'>" +
+            "<path d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z' />" +
+            "<path fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z' />" +
+            "</svg>" +
+            "<span> Edit project</span>" +
+            "</a>" +
+            "</li>";
+        projects += "<li>" +
+            "<a class='dropdown-item' href='#'>" +
+            "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>" +
+            "<path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z' />" +
+            "<path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/>" +
+            "</svg>" +
+            "<span> Delete project</span>" +
+            "</a>" +
+            "</li>";
+        projects += "</ul>" +
+            "</div>" +
+            "</div>" +
+            "</li>";
+    }
+    document.getElementById("projects").innerHTML = projects;
+}
+
+
+
+
 
 
 
diff --git a/views/view-task.html b/views/view-task.html
index 249af41..7f4d92b 100644
--- a/views/view-task.html
+++ b/views/view-task.html
@@ -100,7 +100,7 @@
                 <!-- Navigation Bar -->
                 <div class="row">
                     <div class="col-3 collapse collapse-horizontal show" id="side-bar">
-                        <nav>
+                        <div>
                             <ul class="list-group pt-4">
                                 <a href="#" class="list-group-item list-group-item-action">
                                     <li class="d-flex justify-content-between align-items-center">
@@ -118,7 +118,8 @@
                                     </li>
                                 </a>
 
-                                <a href="#" class="list-group-item list-group-item-action" onclick="showProject('today')">
+                                <a href="#" class="list-group-item list-group-item-action"
+                                    onclick="showProject('today')">
                                     <li class="d-flex justify-content-between align-items-center">
                                         <div>
                                             <span>
@@ -137,7 +138,8 @@
                                     </li>
                                 </a>
 
-                                <a href="#" class="list-group-item list-group-item-action" onclick="showProject('upcoming')">
+                                <a href="#" class="list-group-item list-group-item-action"
+                                    onclick="showProject('upcoming')">
                                     <li class="d-flex justify-content-between align-items-center">
                                         <div>
                                             <span>
@@ -171,9 +173,27 @@
                                     </li>
                                 </a>
                             </ul>
-                        </nav>
-                    </div>
+                        </div>
+
+                        <!-- starting of project list -->
+                        <div class="pt-4">
+                            <div class="d-flex">
+                                <button class="btn btn-light flex-grow-1 d-flex justify-content-between align-items-center" onclick="showProjectList()">Projects <span>
+                                        <svg data-bs-toggle="modal" data-bs-target="#addProjectModal" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                            fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd"
+                                                d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" />
+                                        </svg>
+                                    </span></button>
+                            </div>
+
+                            <div id="projects">
 
+                            </div>
+
+                        </div>
+                        <!-- ending of project list -->
+                    </div>
 
                     <div class="col align-center px-5 py-4">
                         <h4>Today</h4>
@@ -265,8 +285,10 @@ <h5 class="modal-title" id="exampleModalLabel">Add Task</h5>
                         </div>
 
                         <div class="modal-footer">
+                            <button type="button" class="btn btn-light" data-bs-dismiss="modal"
+                                aria-label="Close">Cancel</button>
                             <button type="submit" class="btn btn-primary">
-                                Add
+                                Add task
                             </button>
                         </div>
                     </div>
@@ -299,6 +321,37 @@ <h5 class="modal-title" id="exampleModalLabel">Add Task</h5>
             </div>
         </div>
 
+        <!-- Add New Project Modal -->
+        <section>
+            <div class="modal fade" id="addProjectModal" tabindex="-1" aria-labelledby="addProjectModal"
+                aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="exampleModalLabel">Add Project</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+
+                        <div class="modal-body">
+                            <div class="mb-3">
+                                <label for="project-name" class="col-form-label">Name</label>
+                                <input id="name" type="text" class="form-control" name="project-name">
+                            </div>
+                        </div>
+
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-light" data-bs-dismiss="modal"
+                                aria-label="Close">Cancel</button>
+                            <button type="submit" class="btn btn-primary">
+                                Add
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
     </main>
 
     <!-- Custom Js -->