diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index d0eae15c..aedfdc6a 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc
index 39ed3991..19f13efb 100644
Binary files a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc
index 701e7700..dba2f518 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0010_remove_note_date.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0010_remove_note_date.cpython-311.pyc
new file mode 100644
index 00000000..fd4dc3da
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0010_remove_note_date.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0011_note_date_alter_note_color_alter_note_text_and_more.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0011_note_date_alter_note_color_alter_note_text_and_more.cpython-311.pyc
new file mode 100644
index 00000000..7f7f3780
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0011_note_date_alter_note_color_alter_note_text_and_more.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index c18a19a5..7aab4405 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -72,6 +72,15 @@ def my_projects(request, *args, **kwargs):
     return render(request, 'projects.html', context)
 
 
+@login_required
+def my_tasks(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'tasks.html', context)
+
+
 @login_required
 def detailed_project(request, project_id):
     project = get_object_or_404(Project, project_id=project_id)
@@ -98,6 +107,26 @@ def create_epic(request):
     }
     return render(request, 'create-epic.html', context)
 
+@login_required
+def create_task(request):
+    context = {       
+
+    }
+    return render(request, 'create-task.html', context)
+
+@login_required
+def createtask_project(request):
+    context = {       
+
+    }
+    return render(request, 'createtask-project.html', context)
+
+@login_required
+def createtask_epic(request):
+    context = {       
+
+    }
+    return render(request, 'createtask-epic.html', context)
 
 
 def add_note_modal(request, *args, **kwargs):
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
index 4e928823..0cb661db 100644
Binary files a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc and b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/urls.py b/osinaweb/osinaweb/urls.py
index ccd25fc6..6a523166 100644
--- a/osinaweb/osinaweb/urls.py
+++ b/osinaweb/osinaweb/urls.py
@@ -24,10 +24,13 @@ urlpatterns = [
     path('logout/', views.signout, name='signout'),
     path('', login_required(views.home), name='home'),
     path('my-projects/', login_required(views.my_projects), name='my-projects'),
+    path('my-tasks/', login_required(views.my_tasks), name='my-tasks'),
     path('detailedproject/<str:project_id>/', views.detailed_project, name='detailed-project'),
     path('createproject/', views.create_project, name='createproject'),
     path('createepic/', views.create_epic, name='createepic'),
-
+    path('createtask/', views.create_task, name='createtask'),
+    path('createtaskproject/', views.createtask_project, name='createtaskproject'),
+    path('createtaskepic/', views.createtask_epic, name='createtaskepic'),
 
     path('addstatus/', views.add_status_modal, name='addstatus'),
     path('updatestatus/', views.update_status_modal, name='updatestatus'),
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 6f9074fc..e9492065 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -534,6 +534,94 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 380px) {
+  .container {
+    max-width: 380px;
+  }
+}
+
+@media (min-width: 500px) {
+  .container {
+    max-width: 500px;
+  }
+}
+
+@media (min-width: 550px) {
+  .container {
+    max-width: 550px;
+  }
+}
+
+@media (min-width: 650px) {
+  .container {
+    max-width: 650px;
+  }
+}
+
+@media (min-width: 798px) {
+  .container {
+    max-width: 798px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1110px) {
+  .container {
+    max-width: 1110px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+
+@media (min-width: 1300px) {
+  .container {
+    max-width: 1300px;
+  }
+}
+
+@media (min-width: 1350px) {
+  .container {
+    max-width: 1350px;
+  }
+}
+
+@media (min-width: 1390px) {
+  .container {
+    max-width: 1390px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+@media (min-width: 1750px) {
+  .container {
+    max-width: 1750px;
+  }
+}
+
+@media (min-width: 2400px) {
+  .container {
+    max-width: 2400px;
+  }
+}
+
 .visible {
   visibility: visible;
 }
@@ -591,6 +679,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-5 {
   margin-bottom: 1.25rem;
 }
@@ -711,10 +803,6 @@ video {
   height: 50px;
 }
 
-.h-\[600px\] {
-  height: 600px;
-}
-
 .h-\[60px\] {
   height: 60px;
 }
@@ -820,6 +908,10 @@ video {
   width: 35px;
 }
 
+.w-\[380px\] {
+  width: 380px;
+}
+
 .w-\[40px\] {
   width: 40px;
 }
@@ -852,10 +944,6 @@ video {
   width: 55%;
 }
 
-.w-\[60\%\] {
-  width: 60%;
-}
-
 .w-\[60px\] {
   width: 60px;
 }
@@ -913,6 +1001,10 @@ video {
   resize: both;
 }
 
+.list-decimal {
+  list-style-type: decimal;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -1005,6 +1097,11 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-e-md {
+  border-start-end-radius: 0.375rem;
+  border-end-end-radius: 0.375rem;
+}
+
 .rounded-t-md {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -1184,6 +1281,11 @@ video {
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1228,10 +1330,19 @@ video {
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
 
+.stroke-black {
+  stroke: #000;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1258,6 +1369,11 @@ video {
   padding-right: 2.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1444,10 +1560,18 @@ video {
   text-decoration-line: underline;
 }
 
+.line-through {
+  text-decoration-line: line-through;
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
 
+.opacity-40 {
+  opacity: 0.4;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1509,6 +1633,11 @@ video {
   height: 25px;
 }
 
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
@@ -1533,6 +1662,11 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
diff --git a/osinaweb/static/js/pop-modals.js b/osinaweb/static/js/pop-modals.js
index 6069668e..e0d0c0db 100644
--- a/osinaweb/static/js/pop-modals.js
+++ b/osinaweb/static/js/pop-modals.js
@@ -107,7 +107,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "450px"
-        iframe.style.width = "500px"
+        iframe.style.width = "600px"
     });
 
     //Show the add point modal
@@ -119,8 +119,8 @@ document.addEventListener("DOMContentLoaded", function () {
         openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "160px"
-        iframe.style.width = "fit-content"
+        iframe.style.height = "225px"
+        iframe.style.width = "500px"
     });
 
     //Show the Timeline modal
diff --git a/osinaweb/templates/addpoint-modal.html b/osinaweb/templates/addpoint-modal.html
index af62e891..e02c11f8 100644
--- a/osinaweb/templates/addpoint-modal.html
+++ b/osinaweb/templates/addpoint-modal.html
@@ -2,6 +2,7 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,15 +17,73 @@
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Point</h1>
-    
+
         <div class="w-full flex justify-center items-center">
-            <input type="text" placeholder="Type your point here..." class="w-[300px] p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+            <input type="text" placeholder="Type your point here..."
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4" id="pointInput"
+                required>
         </div>
-    
-        <div class="w-full flex justify-center items-center mt-4">
+
+        <!-- THE WARNING MESSAGE THAT APPEARS WHEN THE USER CLICKS ON THE ADD BUTTON WITH AN EMPTY INPUT FIELD -->
+        <p class="text-red-500 font-light mt-2" id="AlertPointMessage">
+
+        </p>
+
+        <div class="w-full flex justify-center items-center mt-4 gap-4">
             <button
-                class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
+                class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500"
+                id="addPointsFormButton">Add</button>
+
+            <button
+                class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save
+                Notes</button>
+        </div>
+
+        <div class="w-full flex flex-col" id="allPointsContainer">
+           <!-- THE ENTERED POINTS BY THE USER CONTAINER -->
         </div>
+
+
+        <script>
+            const allPointsContainer = document.getElementById("allPointsContainer");
+            const pointInput = document.getElementById("pointInput");
+            const addButton = document.getElementById("addPointsFormButton");
+            const alertMessage = document.getElementById("AlertPointMessage");
+
+            addButton.addEventListener("click", function () {
+                // Fetch the entered in the input field
+                const pointText = pointInput.value;
+
+                // Check if the input field is empty
+                if (pointText.trim() === "") {
+                    // Show an error message
+                    alertMessage.textContent = "Please enter a point before adding.";
+                    return; // Exit the function without adding if input is empty
+                }
+
+                // Clear the error message
+                alertMessage.textContent = "";
+
+                // Create a new container div for each pair
+                const container = document.createElement("div");
+                container.className = "w-full flex justify-start items-center gap-3 mt-3";
+
+                // Create a new paragraph element
+                const newParagraph = document.createElement("p");
+
+                // Set the text content of the new paragraph to the input text
+                newParagraph.textContent = "- " + pointText;
+
+                container.appendChild(newParagraph);
+
+                allPointsContainer.appendChild(container);
+
+                // Clear the input field
+                pointInput.value = "";
+            });
+        </script>
+
     </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/osinaweb/templates/create-epic.html b/osinaweb/templates/create-epic.html
index 164affc2..21a23448 100644
--- a/osinaweb/templates/create-epic.html
+++ b/osinaweb/templates/create-epic.html
@@ -2,7 +2,7 @@
 {%load static%}
 {% block content %}
 
-<div class="w-full px-10">
+<div class="w-full px-10 mb-4">
     <div class="w-full bg-white h-fit shadow-md rounded-md p-5">
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
             Create Epic
@@ -33,123 +33,12 @@
                     class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
             </div>
 
-            <div class="w-full">
-                <button class="w-full border border-gray-300 text-gray-500 py-2 px-3 outline-none rounded-md text-xl"
-                    id="AddTaskButton">Add
-                    Task</button>
-            </div>
-
             <div class="w-full flex justify-center items-center mt-3">
                 <button
                     class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
                     Epic</button>
             </div>
         </div>
-
-        <div class="mx-auto w-[60%] h-full shadow-md rounded-md mt-5 border border-gray-300 p-3 hidden"
-            id="taskFormContainer">
-            <h1 class="text-3xl text-slate-800 text-center font-semibold">
-                Create Task
-            </h1>
-
-            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
-                <input type="text" placeholder="Task Name"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
-
-                <select id=""
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
-                    <option value="" selected disabled>Assigned To</option>
-                    <option value="">Nataly</option>
-                    <option value="">Salim</option>
-                </select>
-
-                <select id=""
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
-                    <option value="" selected disabled>Status</option>
-                    <option value="">Open</option>
-                    <option value="">Working On</option>
-                    <option value="">Closed</option>
-                </select>
-
-                <select id=""
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
-                    <option value="" selected disabled>Extra</option>
-                    <option value="">Yes</option>
-                    <option value="">No</option>
-                </select>
-
-                <div class="w-full">
-                    <label class="text-gray-500">Start Date:</label>
-                    <input type="date" id="date" name="date"
-                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
-                </div>
-
-                <div class="w-full">
-                    <label class="text-gray-500">End Date:</label>
-                    <input type="date" id="date" name="date"
-                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
-                </div>
-
-                <div class="w-full flex justify-between items-center gap-2">
-                    <input type="text" placeholder="Add Point"
-                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
-                    <button
-                        class="w-[150px] h-[50px] py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 cursor-pointer hover:bg-white hover:text-blue-500">Add
-                        Point</button>
-                </div>
-
-                <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
-                    <div class="flex items-center justify-between">
-                        <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
-                        <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
-                            Document</span>
-                        <label for="actual-btn"
-                            class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
-                                class="fa fa-upload"></i></label>
-
-                    </div>
-                </div>
-
-                <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
-                <script>
-                    const fileInput = document.getElementById('actual-btn');
-                    const fileNameSpan = document.getElementById('file-name');
-
-                    fileInput.addEventListener('change', (event) => {
-                        const selectedFiles = event.target.files;
-                        if (selectedFiles.length > 0) {
-                            const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
-                            fileNameSpan.textContent = fileNames;
-                        } else {
-                            fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
-                        }
-                    });
-                </script>
-
-                <div class="w-full flex justify-center items-center mt-3">
-                    <button
-                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
-                        Task</button>
-                </div>
-            </div>
-        </div>
-
-        <script>
-            const addTaskButton = document.getElementById('AddTaskButton');
-            const taskFormContainer = document.getElementById('taskFormContainer');
-
-            // Add a click event listener to the button
-            addTaskButton.addEventListener('click', () => {
-                // Toggle the visibility of the taskFormContainer
-                if (taskFormContainer.style.display === 'none' || taskFormContainer.style.display === '') {
-                    taskFormContainer.style.display = 'block';
-                    // Scroll to the taskFormContainer
-                    taskFormContainer.scrollIntoView({ behavior: 'smooth' });
-                } else {
-                    taskFormContainer.style.display = 'none';
-                }
-            });
-        </script>
     </div>
 </div>
 </div>
diff --git a/osinaweb/templates/create-project.html b/osinaweb/templates/create-project.html
index 4ad64dbd..a6e0cfc9 100644
--- a/osinaweb/templates/create-project.html
+++ b/osinaweb/templates/create-project.html
@@ -2,12 +2,110 @@
 {%load static%}
 {% block content %}
 
-<div class="w-full px-10">
-    <div class="w-full bg-white h-[600px] shadow-md rounded-md">
+<!-- IN THIS TASK FORM THE TASK BELONG ONLY TO A PROJECT AND THE USER MUST CHOOSE TO WHICH EPIC IT BELONGS -->
 
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Create Project
+        </h1>
+
+        <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <input type="text" placeholder="Project Name"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <input type="text" placeholder="Client"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Project Manager</option>
+                <option value="">Emile</option>
+                <option value="">Salim</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Developer(s)</option>
+                <option value="">Emile</option>
+                <option value="">Salim</option>
+                <option value="">Nataly</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Designer(s)</option>
+                <option value="">Emile</option>
+                <option value="">Salim</option>
+                <option value="">Nataly</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Status</option>
+                <option value="">Active</option>
+                <option value="">Pending</option>
+                <option value="">Completed</option>
+            </select>
+
+            <input type="text" placeholder="Project Type"
+            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <textarea type="text" placeholder="Project Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+
+            <textarea type="text" placeholder="Project Requirements" rows="5" cols="5"
+            class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                <div class="flex items-center justify-between">
+                    <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
+                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Document(s)</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+
+                </div>
+            </div>
+
+            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+            <script>
+                const fileInput = document.getElementById('actual-btn');
+                const fileNameSpan = document.getElementById('file-name');
+
+                fileInput.addEventListener('change', (event) => {
+                    const selectedFiles = event.target.files;
+                    if (selectedFiles.length > 0) {
+                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                        fileNameSpan.textContent = fileNames;
+                    } else {
+                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                    }
+                });
+            </script>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                    Task</button>
+            </div>
+        </div>
     </div>
 </div>
-</div>
 
 <!-- POPUP MODAL -->
 <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
diff --git a/osinaweb/templates/create-task.html b/osinaweb/templates/create-task.html
new file mode 100644
index 00000000..6a5fcfb2
--- /dev/null
+++ b/osinaweb/templates/create-task.html
@@ -0,0 +1,110 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<!-- IN THIS TASK FORM THE TASK DOESN'T BELONG NEITHER TO APROJECT OR EPIC, WE REAHC THIS FORM FROM THE TASKS.HTML -->
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Create Task
+        </h1>
+    
+        <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <input type="text" placeholder="Task Name"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+
+            <select id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Select Project</option>
+                <option value="">Cars & Classics</option>
+                <option value="">Osina</option>
+            </select>
+    
+            <select id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Select Epic</option>
+                <option value="">Epic 1</option>
+                <option value="">Epic 2</option>
+                <option value="">Epic 3</option>
+            </select>
+    
+            <select id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Status</option>
+                <option value="">Open</option>
+                <option value="">Working On</option>
+                <option value="">Closed</option>
+            </select>
+    
+            <select id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Extra</option>
+                <option value="">Yes</option>
+                <option value="">No</option>
+            </select>
+
+            <textarea type="text" placeholder="Task Description" rows="5" cols="5"
+            class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+    
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+    
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                <div class="flex items-center justify-between">
+                    <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
+                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Document(s)</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+    
+                </div>
+            </div>
+    
+            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+            <script>
+                const fileInput = document.getElementById('actual-btn');
+                const fileNameSpan = document.getElementById('file-name');
+    
+                fileInput.addEventListener('change', (event) => {
+                    const selectedFiles = event.target.files;
+                    if (selectedFiles.length > 0) {
+                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                        fileNameSpan.textContent = fileNames;
+                    } else {
+                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                    }
+                });
+            </script>
+    
+            <div class="w-full flex justify-center items-center mt-3">
+                <button
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                    Task</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/createtask-epic.html b/osinaweb/templates/createtask-epic.html
new file mode 100644
index 00000000..14540654
--- /dev/null
+++ b/osinaweb/templates/createtask-epic.html
@@ -0,0 +1,109 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<!-- IN THIS TASK FORM THE TASK ALREADY BELONG TO AN EPIC THAT BELONGS TO A PROJECT -->
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Create Task
+        </h1>
+
+        <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <input type="text" placeholder="Task Name"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 cursor-not-allowed"
+                disabled>
+                <option value="">Test 1</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 cursor-not-allowed"  disabled>
+                <option value="">Epic</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Status</option>
+                <option value="">Open</option>
+                <option value="">Working On</option>
+                <option value="">Closed</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Extra</option>
+                <option value="">Yes</option>
+                <option value="">No</option>
+            </select>
+
+            <textarea type="text" placeholder="Task Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                <div class="flex items-center justify-between">
+                    <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
+                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Document(s)</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+
+                </div>
+            </div>
+
+            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+            <script>
+                const fileInput = document.getElementById('actual-btn');
+                const fileNameSpan = document.getElementById('file-name');
+
+                fileInput.addEventListener('change', (event) => {
+                    const selectedFiles = event.target.files;
+                    if (selectedFiles.length > 0) {
+                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                        fileNameSpan.textContent = fileNames;
+                    } else {
+                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                    }
+                });
+            </script>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                    Task</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/createtask-project.html b/osinaweb/templates/createtask-project.html
new file mode 100644
index 00000000..4ad059a1
--- /dev/null
+++ b/osinaweb/templates/createtask-project.html
@@ -0,0 +1,111 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<!-- IN THIS TASK FORM THE TASK BELONG ONLY TO A PROJECT AND THE USER MUST CHOOSE TO WHICH EPIC IT BELONGS -->
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Create Task
+        </h1>
+
+        <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <input type="text" placeholder="Task Name"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 cursor-not-allowed" disabled>
+                <option value="" selected disabled>Test 1</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Select Epic</option>
+                <option value="">Epic 1</option>
+                <option value="">Epic 2</option>
+                <option value="">Epic 3</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Status</option>
+                <option value="">Open</option>
+                <option value="">Working On</option>
+                <option value="">Closed</option>
+            </select>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Extra</option>
+                <option value="">Yes</option>
+                <option value="">No</option>
+            </select>
+
+            <textarea type="text" placeholder="Task Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                <div class="flex items-center justify-between">
+                    <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
+                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Document(s)</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+
+                </div>
+            </div>
+
+            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+            <script>
+                const fileInput = document.getElementById('actual-btn');
+                const fileNameSpan = document.getElementById('file-name');
+
+                fileInput.addEventListener('change', (event) => {
+                    const selectedFiles = event.target.files;
+                    if (selectedFiles.length > 0) {
+                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                        fileNameSpan.textContent = fileNames;
+                    } else {
+                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                    }
+                });
+            </script>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                    Task</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/main.html b/osinaweb/templates/main.html
index 7f037eaa..031f4b5e 100644
--- a/osinaweb/templates/main.html
+++ b/osinaweb/templates/main.html
@@ -73,15 +73,15 @@
                     </div>
 
                     <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
-                        <a href="projects.html">
+                        <a href="{% url 'my-projects' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
                                 <i class='fas fa-project-diagram' style="font-size: 16px;"></i>
-                                <a href="{% url 'my-projects' %}" class="text-white">My Projects</a>
+                                <p class="text-white">My Projects</p>
                             </div>
                         </a>
 
-                        <a href="tasks.html">
+                        <a href="{% url 'my-tasks' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
                                 <i class='fas fa-tasks' style="font-size: 19px;"></i>
diff --git a/osinaweb/templates/project-details.html b/osinaweb/templates/project-details.html
index 354f6c31..fdf37419 100644
--- a/osinaweb/templates/project-details.html
+++ b/osinaweb/templates/project-details.html
@@ -64,18 +64,37 @@
 <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / TASK DETAIL SECTION -->
     <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
-        <div class="flex flex-col justify-center items-center">
-            <h1 class="text-3xl text-yellow-500 font-semibold">{{project.name}}</h1>
-            <p class="text-yellow-500 text-base">{{project.project_id}}</p>
+        <div class="w-full bg-yellow-500 rounded-t-md flex flex-col justify-center items-center py-2">
+            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
+            <p class="text-white text-base">{{project.project_id}}</p>
         </div>
-        <div
-            class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4 gap-3">
-            <button
-                class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
-                Project</button>
-            <button
-                class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
-                Project</button>
+        <div class="w-full h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
+            <div class="flex justify-start items-center gap-3">
+                <a href="{% url 'createepic' %}">
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
+                        Epic</button>
+                </a>
+                <a href="{% url 'createtaskproject' %}">
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
+                        Task</button>
+                </a>
+                <button
+                    class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
+                    Story</button>
+                <button
+                    class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
+                    Milestone</button>
+            </div>
+            <div class="flex justify-end items-center gap-3">
+                <button
+                    class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
+                    Project</button>
+                <button
+                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                    Project</button>
+            </div>
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">
             <div>
@@ -249,13 +268,15 @@
                         <div class="w-[50%] flex justify-end items-center gap-2">
                             <a href="{% url 'createepic' %}">
                                 <button
-                                class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md hover:bg-transparent hover:text-blue-500 duration-300">Create
-                                Epic</button>
+                                    class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md hover:bg-transparent hover:text-blue-500 duration-300">Create
+                                    Epic</button>
+                            </a>
+                            <a href="{% url 'createtaskepic' %}">
+                                <button id="createTaskButton"
+                                    class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
+                                    disabled>Create
+                                    Task</button>
                             </a>
-                            <button id="createTaskButton"
-                                class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
-                                disabled>Create
-                                Task</button>
                             <button id="createStoryButton"
                                 class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
                                 disabled>Create
diff --git a/osinaweb/templates/showpoints-modal.html b/osinaweb/templates/showpoints-modal.html
index 58231ce1..bd043c82 100644
--- a/osinaweb/templates/showpoints-modal.html
+++ b/osinaweb/templates/showpoints-modal.html
@@ -2,6 +2,7 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,11 +13,48 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 
+
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center mb-1">Points</h1>
-    
-        <div class="w-full py-2 flex justify-start gap-3 items-center">
+
+        <div class="w-full">
+            <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
+                <div class="w-[380px]">
+                    <p class="text-slate-800">Fix the LaylNhar Header Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Mollitia, dolorum. Earum error atÍb dol</p>
+                </div>
+                <div class="w-[150px]">
+                    <button
+                        class="w-full px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                </div>
+            </div>
+
+            <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
+                <div class="w-[380px]">
+                    <p class="text-slate-800">Fix the LaylNhar Header</p>
+                </div>
+                <div class="w-[150px]">
+                    <button
+                        class="w-full px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                </div>
+            </div>
+
+            <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
+                <div class="w-[380px]">
+                    <p class="text-slate-800 line-through">Fix the LaylNhar Header Lorem ipsum dolor sit amet
+                        consectetur
+                        adipisicing elit. Autem sit esse, cupiditate voluptas, dolorem nisi sunt, molestiae eaque neque
+                        cumque ex amet! Sequi aliquid quos ullam, sapiente iste impedit explicabo?</p>
+                </div>
+                <div class="w-[150px]">
+                    <button
+                        class="w-full px-2 py-1 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40" value="Completed" disabled>Completed</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- <div class="w-full py-2 flex justify-start gap-3 items-center">
             <input type="checkbox" name="" id="">
             <p class="text-slate-700 text-base">Fix the LaylNhar Header</p>
         </div>
@@ -49,7 +87,8 @@
         <div class="w-full py-2 flex justify-start gap-3 items-center">
             <input type="checkbox" name="" id="">
             <p class="text-slate-700 text-base">Fix the LaylNhar Header</p>
-        </div>
+        </div> -->
     </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/osinaweb/templates/tasks.html b/osinaweb/templates/tasks.html
new file mode 100644
index 00000000..e16ff4a4
--- /dev/null
+++ b/osinaweb/templates/tasks.html
@@ -0,0 +1,453 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- PROJECTS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / PROJECTS SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-[800px] bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">My Tasks</h1>
+
+            <!-- PROJECT FILTERING -->
+            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
+                <div class="flex justify-start items-center gap-5">
+                    <input type="text" placeholder="Enter Project Name"
+                        class="w-[300px] h-[40px] py-2 px-3 border border-gray-300 rounded-md outline-none">
+
+                    <select name="" id=""
+                        class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
+                        <option value="" disabled selected>Status</option>
+                        <option value="">Open</option>
+                        <option value="">Working On</option>
+                        <option value="">Closed</option>
+                    </select>
+
+                    <select name="" id=""
+                        class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
+                        <option value="" disabled selected>Assigned To</option>
+                        <option value="">Nataly</option>
+                        <option value="">Salim</option>
+                        <option value="">Emile</option>
+                        <option value="">Arze</option>
+                    </select>
+                </div>
+                <div>
+                    <a href="{% url 'createtask' %}">
+                        <button
+                            class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Create
+                            Task</button>
+                    </a>
+                </div>
+            </div>
+
+            <!-- ALL TASKS -->
+            <div class="w-full mt-10">
+                <!-- TASKS TABLE -->
+                <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-5">
+                    <!-- TABLE HEADER -->
+                    <div class="w-full flex h-[70px] rounded-t-md">
+                        <div
+                            class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
+                            <p class="text-xl text-white">Task Name</p>
+                        </div>
+                        <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
+                            <p class="text-xl text-slate-700">Open</p>
+                        </div>
+                        <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
+                            <p class="text-xl text-slate-700">1/2/2021</p>
+                        </div>
+                        <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
+                            <p class="text-xl text-slate-700">1/2/2022</p>
+                        </div>
+                    </div>
+
+                    <!-- TABLE BODY -->
+                    <div class="w-full h-fit flex">
+                        <!-- LEFT SIDE OF TABLE BODY -->
+                        <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
+                            <!-- 1st row -->
+                            <div class="w-full flex flex-col gap-2">
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Project:</p>
+                                    <p class="text-slate-700 text-base">Osina Project</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Epic:</p>
+                                    <p class="text-slate-700 text-base">epic</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Assigned To:</p>
+                                    <p class="text-slate-700 text-base">Nataly</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Files:</p>
+                                    <p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
+                                </div>
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Tags:</p>
+                                    <p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Extra:</p>
+                                    <p class="text-slate-700 text-base">Yes</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- RIGHT SIDE OF TABLE BODY -->
+                        <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
+                                Status</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
+                                Time</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
+                                id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
+                                Points</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
+                                Point</button>
+                            <a href="./task-details.html" class="w-[33.33%]">
+                                <button
+                                    class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                            </a>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
+                                id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- TASKS TABLE -->
+                <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-5">
+                    <!-- TABLE HEADER -->
+                    <div class="w-full flex h-[70px] rounded-t-md">
+                        <div
+                            class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
+                            <p class="text-xl text-white">Task Name</p>
+                        </div>
+                        <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
+                            <p class="text-xl text-slate-700">Open</p>
+                        </div>
+                        <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
+                            <p class="text-xl text-slate-700">1/2/2021</p>
+                        </div>
+                        <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
+                            <p class="text-xl text-slate-700">1/2/2022</p>
+                        </div>
+                    </div>
+
+                    <!-- TABLE BODY -->
+                    <div class="w-full h-fit flex">
+                        <!-- LEFT SIDE OF TABLE BODY -->
+                        <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
+                            <!-- 1st row -->
+                            <div class="w-full flex flex-col gap-2">
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Project:</p>
+                                    <p class="text-slate-700 text-base">Osina Project</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Epic:</p>
+                                    <p class="text-slate-700 text-base">epic</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Assigned To:</p>
+                                    <p class="text-slate-700 text-base">Nataly</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Files:</p>
+                                    <p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
+                                </div>
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Tags:</p>
+                                    <p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
+                                </div>
+
+                                <div class="flex justify-start items-center gap-2">
+                                    <p class="text-gray-400  text-base">Extra:</p>
+                                    <p class="text-slate-700 text-base">Yes</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- RIGHT SIDE OF TABLE BODY -->
+                        <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
+                                Status</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
+                                Time</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
+                                id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
+                                Points</button>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
+                                Point</button>
+                            <a href="./task-details.html" class="w-[33.33%]">
+                                <button
+                                    class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                            </a>
+                            <button
+                                class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
+                                id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
+        <div class="w-full h-[300px] mt-2">
+
+
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2NT ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3RD ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 4TH ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+<!---------------------- JS SCRIPTS -------------------->
+
+<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
+<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
+
+{% endblock content %}
\ No newline at end of file