diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index 4ab063bf..a463b92e 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/__init__.cpython-311.pyc b/osinaweb/osinacore/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 00000000..34674be1
Binary files /dev/null and b/osinaweb/osinacore/__pycache__/__init__.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc b/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc
new file mode 100644
index 00000000..8db97a3f
Binary files /dev/null and b/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/apps.cpython-311.pyc b/osinaweb/osinacore/__pycache__/apps.cpython-311.pyc
new file mode 100644
index 00000000..254f8f56
Binary files /dev/null and b/osinaweb/osinacore/__pycache__/apps.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/forms.cpython-311.pyc b/osinaweb/osinacore/__pycache__/forms.cpython-311.pyc
new file mode 100644
index 00000000..30bf420c
Binary files /dev/null and b/osinaweb/osinacore/__pycache__/forms.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc
new file mode 100644
index 00000000..39ed3991
Binary files /dev/null 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
new file mode 100644
index 00000000..701e7700
Binary files /dev/null and b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0001_initial.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0001_initial.cpython-311.pyc
new file mode 100644
index 00000000..5207a8ae
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0001_initial.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0002_projecttype_alter_business_options_staffprofile_and_more.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0002_projecttype_alter_business_options_staffprofile_and_more.cpython-311.pyc
new file mode 100644
index 00000000..fe078f0c
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0002_projecttype_alter_business_options_staffprofile_and_more.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0003_milestone.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0003_milestone.cpython-311.pyc
new file mode 100644
index 00000000..8d9510ca
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0003_milestone.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0004_epic.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0004_epic.cpython-311.pyc
new file mode 100644
index 00000000..5c9fbfc3
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0004_epic.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0005_staffprofile_image.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0005_staffprofile_image.cpython-311.pyc
new file mode 100644
index 00000000..0bd1d930
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0005_staffprofile_image.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0006_note.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0006_note.cpython-311.pyc
new file mode 100644
index 00000000..db17336d
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0006_note.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0007_project_project_id_alter_project_status.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0007_project_project_id_alter_project_status.cpython-311.pyc
new file mode 100644
index 00000000..6b38179b
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0007_project_project_id_alter_project_status.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0008_alter_project_project_id.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0008_alter_project_project_id.cpython-311.pyc
new file mode 100644
index 00000000..e637b83f
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0008_alter_project_project_id.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0009_alter_project_project_id.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0009_alter_project_project_id.cpython-311.pyc
new file mode 100644
index 00000000..e520b623
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0009_alter_project_project_id.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/__init__.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 00000000..711106a9
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/__init__.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 43338c30..8aec24d8 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -82,3 +82,67 @@ def detailed_project(request, project_id):
     }
     return render(request, 'project-details.html', context)
 
+
+@login_required
+def create_project(request):
+    context = {       
+
+    }
+    return render(request, 'create-project.html', context)
+
+@login_required
+def create_epic(request):
+    context = {       
+
+    }
+    return render(request, 'create-epic.html', context)
+
+
+
+def add_note_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addnote-modal.html', context)   
+
+def add_status_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addstatus-modal.html', context)
+
+def add_point_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addpoint-modal.html', context)
+
+def add_time_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addtime-modal.html', context)
+
+def delete_task_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'deletetask-modal.html', context)
+
+def show_points_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'showpoints-modal.html', context)
+
+def timeline_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'timeline-modal.html', context)
+
+def update_status_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'update-status-modal.html', context)
\ No newline at end of file
diff --git a/osinaweb/osinaweb/__pycache__/__init__.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 00000000..9f555807
Binary files /dev/null and b/osinaweb/osinaweb/__pycache__/__init__.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc
new file mode 100644
index 00000000..49075e02
Binary files /dev/null and b/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
new file mode 100644
index 00000000..4e928823
Binary files /dev/null and b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/__pycache__/wsgi.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/wsgi.cpython-311.pyc
new file mode 100644
index 00000000..9a3462b8
Binary files /dev/null and b/osinaweb/osinaweb/__pycache__/wsgi.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/settings.py b/osinaweb/osinaweb/settings.py
index 337be192..b49ea666 100644
--- a/osinaweb/osinaweb/settings.py
+++ b/osinaweb/osinaweb/settings.py
@@ -23,10 +23,12 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = 'django-insecure-(rqb)11ax((t*r$hji+m4fdh^w-*c(dv*97rjv25&=sxa4m^-h'
 
+X_FRAME_OPTIONS = 'SAMEORIGIN'
+
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 LOGIN_URL = 'signin' 
 
diff --git a/osinaweb/osinaweb/urls.py b/osinaweb/osinaweb/urls.py
index 5d7af0a1..016270e1 100644
--- a/osinaweb/osinaweb/urls.py
+++ b/osinaweb/osinaweb/urls.py
@@ -25,5 +25,15 @@ urlpatterns = [
     path('', login_required(views.home), name='home'),
     path('my-projects/', login_required(views.my_projects), name='my-projects'),
     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('addstatus/', views.add_status_modal, name='addstatus'),
+    path('updatestatus/', views.update_status_modal, name='updatestatus'),
+    path('addnote/', views.add_note_modal, name='addnote'),
+    path('addpoint/', views.add_point_modal, name='addpoint'),
+    path('showpoints/', views.show_points_modal, name='showpoints'),
+    path('addtime/', views.add_time_modal, name='addtime'),
+    path('timeline/', views.timeline_modal, name='timeline'),
+    path('deletetask/', views.delete_task_modal, name='deletetask'),
 ]
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 1b44ba98..6f9074fc 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -534,6 +534,18 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.visible {
+  visibility: visible;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }
@@ -566,6 +578,11 @@ video {
   z-index: 20;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -614,18 +631,38 @@ video {
   margin-top: 1.25rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mt-\[5\%\] {
   margin-top: 5%;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-\[100px\] {
   height: 100px;
 }
@@ -674,6 +711,10 @@ video {
   height: 50px;
 }
 
+.h-\[600px\] {
+  height: 600px;
+}
+
 .h-\[60px\] {
   height: 60px;
 }
@@ -715,6 +756,10 @@ video {
   width: 15%;
 }
 
+.w-\[150px\] {
+  width: 150px;
+}
+
 .w-\[15px\] {
   width: 15px;
 }
@@ -775,6 +820,10 @@ video {
   width: 35px;
 }
 
+.w-\[40px\] {
+  width: 40px;
+}
+
 .w-\[45\%\] {
   width: 45%;
 }
@@ -803,6 +852,10 @@ video {
   width: 55%;
 }
 
+.w-\[60\%\] {
+  width: 60%;
+}
+
 .w-\[60px\] {
   width: 60px;
 }
@@ -836,6 +889,14 @@ video {
   flex: 1 1 0%;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -844,6 +905,14 @@ video {
   cursor: pointer;
 }
 
+.resize-none {
+  resize: none;
+}
+
+.resize {
+  resize: both;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -856,6 +925,10 @@ video {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -912,6 +985,10 @@ video {
   gap: 3%;
 }
 
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -933,6 +1010,10 @@ video {
   border-top-right-radius: 0.375rem;
 }
 
+.rounded-bl-lg {
+  border-bottom-left-radius: 0.5rem;
+}
+
 .rounded-bl-md {
   border-bottom-left-radius: 0.375rem;
 }
@@ -1028,6 +1109,11 @@ video {
   border-color: rgb(30 41 59 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1038,6 +1124,11 @@ video {
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
+.bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1068,16 +1159,31 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-orange-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
+}
+
 .bg-pink-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 207 232 / var(--tw-bg-opacity));
 }
 
+.bg-pink-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 168 212 / var(--tw-bg-opacity));
+}
+
 .bg-purple-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(233 213 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1122,11 +1228,6 @@ 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;
 }
@@ -1339,6 +1440,10 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
@@ -1366,6 +1471,16 @@ video {
   outline-offset: 2px;
 }
 
+.outline {
+  outline-style: solid;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1418,6 +1533,11 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 @media (min-width: 798px) {
   .md\:w-\[300px\] {
     width: 300px;
diff --git a/osinaweb/static/js/pop-modals.js b/osinaweb/static/js/pop-modals.js
index d054827b..6069668e 100644
--- a/osinaweb/static/js/pop-modals.js
+++ b/osinaweb/static/js/pop-modals.js
@@ -53,35 +53,43 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
-    //ADD NOTE MODAL
-    const addNoteButton = document.getElementById("addNoteButton");
-
-    addNoteButton.addEventListener("click", () => {
-        openModal("./addnote-modal.html"); //Replace with the actual URL of your external content
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "160px"
-        iframe.style.width = "400px"
-    });
-
     //ADD STATUS MODAL
     const addStatusButton = document.getElementById("addStatusButton");
 
     addStatusButton.addEventListener("click", () => {
-        openModal("./addstatus-modal.html");
+        const modalUrl = addStatusButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "200px"
         iframe.style.width = "450px"
     });
 
+    //ADD NOTE MODAL
+    const addNoteButton = document.getElementById("addNoteButton");
+
+    addNoteButton.addEventListener("click", () => {
+        // Retrieve the URL from the data attribute
+        const modalUrl = addNoteButton.getAttribute("data-modal-url");
+
+        // Open the modal with the retrieved URL
+        openModal(modalUrl);
+
+        const iframe = document.getElementById("popupModalFrame");
+        iframe.style.height = "225px"
+        iframe.style.width = "400px"
+    });
+
 
     //SHOW TASK MODALS
     //Show the update status modal
     const updateStatusButton = document.getElementById("updateStatusButton");
 
     updateStatusButton.addEventListener("click", () => {
-        openModal("./update-status-modal.html");
+        const modalUrl = updateStatusButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "160px"
@@ -93,7 +101,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const showPointsButton = document.getElementById("showPointsButton");
 
     showPointsButton.addEventListener("click", () => {
-        openModal("./showpoints-modal.html");
+        const modalUrl = showPointsButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "450px"
@@ -104,7 +114,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const addPointButton = document.getElementById("addPointButton");
 
     addPointButton.addEventListener("click", () => {
-        openModal("./addpoint-modal.html");
+        const modalUrl = addPointButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "160px"
@@ -115,7 +127,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const timelineButton = document.getElementById("timelineButton");
 
     timelineButton.addEventListener("click", () => {
-        openModal("./timeline-modal.html");
+        const modalUrl = timelineButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "450px"
@@ -126,7 +140,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const addTimeButton = document.getElementById("addTimeButton");
 
     addTimeButton.addEventListener("click", () => {
-        openModal("./addtime-modal.html");
+        const modalUrl = addTimeButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "270px"
@@ -137,7 +153,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const deleteTaskButton = document.getElementById("deleteTaskButton");
 
     deleteTaskButton.addEventListener("click", () => {
-        openModal("./deletetask-modal.html");
+        const modalUrl = deleteTaskButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "130px"
diff --git a/osinaweb/tailwind.config.js b/osinaweb/tailwind.config.js
index 51fa0a85..23019b3e 100644
--- a/osinaweb/tailwind.config.js
+++ b/osinaweb/tailwind.config.js
@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["static/dist/*.{html,js}"],
+  content: [
+    "./input.css",
+    "./static/**/*.html",
+    "./static/dist/output.css",
+    "./templates/**/*.html",
+  ],
   theme: {
     screens: {
       xs: '380px',
diff --git a/osinaweb/templates/addnote-modal.html b/osinaweb/templates/addnote-modal.html
index e23c2722..38088312 100644
--- a/osinaweb/templates/addnote-modal.html
+++ b/osinaweb/templates/addnote-modal.html
@@ -1,11 +1,14 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
@@ -13,15 +16,95 @@
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Note</h1>
-    
+
         <div class="w-full flex justify-center items-center">
-            <input type="text" placeholder="Type your note here..." class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+            <input type="text" placeholder="Type your note here..."
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+        </div>
+
+        <div class="w-full flex justify-between items-center flex-wrap mt-4">
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-blue-200 cursor-pointer"
+                style="background-color: #BFDBFF;" id="blue">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-pink-200 cursor-pointer"
+                style="background-color: #FBCFE8;" id="pink">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-yellow-200 cursor-pointer"
+                style="background-color: #FEEF91;" id="yellow">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-green-200 cursor-pointer"
+                style="background-color: #B6FAD0;" id="green">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-purple-200 cursor-pointer"
+                style="background-color: #EBD6F9;" id="purple">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-red-200 cursor-pointer"
+                style="background-color: #FFCACA;" id="red">
+
+            </div>
+        </div>
+
+        <div>
+            <input type="text"
+                class="w-full border border-gray-300 rounded-md py-1 px-3 outline-none h-[50px] mt-4 hidden"
+                id="hexCodeDisplay">
         </div>
-    
-        <div class="w-full flex justify-center items-center mt-4">
+
+        <script>
+            // TO GET THE COLOR OF THE DIV
+            const colorOptions = document.querySelectorAll('.color-option');
+            const hexCodeDisplay = document.getElementById('hexCodeDisplay');
+
+            colorOptions.forEach((colorOption) => {
+                colorOption.addEventListener('click', () => {
+                    // Remove borders from all color-options
+                    colorOptions.forEach((option) => {
+                        option.style.border = 'none';
+                    });
+
+                    // Get the id and background color of the clicked color div
+                    const colorId = colorOption.id;
+                    const bgColor = colorOption.style.backgroundColor;
+
+                    // Convert the RGB color to a hex code (if it's in RGB format)
+                    const hexColor = rgbToHex(bgColor);
+
+                    // Display the hex code in the input field
+                    hexCodeDisplay.value = hexColor;
+
+                    // Apply a black border to the selected color-option
+                    colorOption.style.border = '3px solid gray';
+
+                    console.log(`Selected color ID: ${colorId}`);
+                });
+            });
+
+            // Function to convert RGB color to hex code
+            function rgbToHex(rgb) {
+                const rgbaArray = rgb.match(/\d+/g);
+                const hexArray = rgbaArray.map((value) => {
+                    const hex = parseInt(value, 10).toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                });
+                return '#' + hexArray.join('');
+            }
+        </script>
+
+        <div class="w-full flex justify-center items-center mt-6">
             <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>
         </div>
     </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/osinaweb/templates/addpoint-modal.html b/osinaweb/templates/addpoint-modal.html
index 307f5007..af62e891 100644
--- a/osinaweb/templates/addpoint-modal.html
+++ b/osinaweb/templates/addpoint-modal.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,11 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <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">Add Point</h1>
diff --git a/osinaweb/templates/addstatus-modal.html b/osinaweb/templates/addstatus-modal.html
index 57c13829..4a0e907c 100644
--- a/osinaweb/templates/addstatus-modal.html
+++ b/osinaweb/templates/addstatus-modal.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
diff --git a/osinaweb/templates/addtime-modal.html b/osinaweb/templates/addtime-modal.html
index 9f60c82d..964e7433 100644
--- a/osinaweb/templates/addtime-modal.html
+++ b/osinaweb/templates/addtime-modal.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,11 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <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">Add Timeline</h1>
diff --git a/osinaweb/templates/create-epic.html b/osinaweb/templates/create-epic.html
new file mode 100644
index 00000000..164affc2
--- /dev/null
+++ b/osinaweb/templates/create-epic.html
@@ -0,0 +1,171 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10">
+    <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
+        </h1>
+        <div class="mx-auto w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <input type="text" placeholder="Epic Name"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <textarea type="text" placeholder="Epic Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+            <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 Status</option>
+                <option value="">Open</option>
+                <option value="">Closed</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">
+                <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>
+
+<!-- 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/create-project.html b/osinaweb/templates/create-project.html
new file mode 100644
index 00000000..4ad64dbd
--- /dev/null
+++ b/osinaweb/templates/create-project.html
@@ -0,0 +1,26 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10">
+    <div class="w-full bg-white h-[600px] shadow-md rounded-md">
+
+    </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/deletetask-modal.html b/osinaweb/templates/deletetask-modal.html
index 07568315..3060fc85 100644
--- a/osinaweb/templates/deletetask-modal.html
+++ b/osinaweb/templates/deletetask-modal.html
@@ -1,12 +1,13 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
diff --git a/osinaweb/templates/index.html b/osinaweb/templates/index.html
index c124d93d..2dcfe8e2 100644
--- a/osinaweb/templates/index.html
+++ b/osinaweb/templates/index.html
@@ -1,878 +1,815 @@
 {% 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>
+{% 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" data-modal-url="{% url 'addnote' %}">
+                    <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">
+        <!-- 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">
 
-                        {% for note in notes %}
-                        <div class="w-[16.33%] h-[150px] shadow-xl  p-5" style="background-color: {{note.color}}">
-                            <p class="text-base text-slate-800">{{note.text}}</p>
-                        </div>
-                        {% endfor %}
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-xl p-5 rounded-bl-lg" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
+            </div>
+            {% endfor %}
 
+        </div>
+    </div>
+</div>
+
+<!-- TASKS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / TASKS SECTION -->
+    <div class="w-[74.5%]">
+        <!-- TASK FILTERING BAR -->
+        <div class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
+            <a class="text-xl text-gray-500">Tasks</a>
+            <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>
+            <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>
+            <input type="text" placeholder="Project"
+                class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[220px] h-[40px]">
+        </div>
+
+        <!-- TASKS TABLE -->
+        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
+            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
+                <!-- 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>
-            </div>
 
-            <!-- TASKS AND USERS ACTIVITY SECTION -->
-            <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
-                <!-- LEFT SIDE / TASKS SECTION -->
-                <div class="w-[74.5%]">
-                    <!-- TASK FILTERING BAR -->
-                    <div
-                        class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
-                        <a class="text-xl text-gray-500">Tasks</a>
-                        <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>
-                        <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>
-                        <input type="text" placeholder="Project"
-                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[220px] h-[40px]">
-                    </div>
-
-                    <!-- TASKS TABLE -->
-                    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-                        <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                            <!-- 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">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">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">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">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">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">Timline</button>
-                                </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>
-                    </div>
 
-                    <!-- TASKS TABLE -->
-                    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-                        <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                            <!-- 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">Update
-                                        Status</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Time</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">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">Show
-                                        Points</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Point</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
-                                </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>
-                    </div>
 
-                    <!-- TASKS TABLE -->
-                    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-                        <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                            <!-- 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">Update
-                                        Status</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Time</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">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">Show
-                                        Points</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Point</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
-                                </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>
-                    </div>
 
-                    <!-- TASKS TABLE -->
-                    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-                        <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                            <!-- 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">Update
-                                        Status</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Time</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">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">Show
-                                        Points</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Point</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
-                                </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>
-                    </div>
 
-                    <!-- TASKS TABLE -->
-                    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-                        <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                            <!-- 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">Update
-                                        Status</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Time</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">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">Show
-                                        Points</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Point</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
-                                </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>
+
+        <!-- TASKS TABLE -->
+        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
+            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
+                <!-- 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>
 
-                <!-- 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">
-
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
-                            </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>
+                <!-- 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
-                            </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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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">12:30 PM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
-                            </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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create Enooma home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
-                            </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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
-                            </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 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>
 
-            <!-- TICKETS SECTION -->
-            <div class="w-full h-fit px-10 py-5">
-                <!-- TICKETS FILTERING BAR -->
-                <div
-                    class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
-                    <a class="text-xl text-gray-500">Tickets</a>
-                    <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>
-                    <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>
-                        <option value="">Waiting for client reply</option>
-                    </select>
-                    <input type="text" placeholder="Project"
-                        class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[220px] h-[40px]">
-                </div>
-                <div class="w-full h-fit bg-white rounded-md shadow-md mt-5">
-                    <!-- TABLE HEADER -->
-                    <div class="w-full flex h-[70px] rounded-t-md border border-gray-300">
-                        <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">#</h1>
-                        </div>
-                        <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">Client</h1>
-                        </div>
-                        <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">Last Update</h1>
-                        </div>
-                        <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">Last Reply</h1>
-                        </div>
-                        <div class="w-[30%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">Subject</h1>
-                        </div>
-                        <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">Department</h1>
-                        </div>
-                        <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300">
-                            <h1 class="text-slate-700 text-base">Status</h1>
-                        </div>
-                        <div class="w-[5%] h-full flex justify-center items-center">
-                            <h1 class="text-slate-700 text-base">Action</h1>
-                        </div>
+        <!-- TASKS TABLE -->
+        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
+            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
+                <!-- 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>
-                    <!-- TABLE BODY -->
-                    <div class="w-full h-fit">
-                        <!-- 1ST ROW -->
-                        <div class="w-full h-[60px] flex border-b border-x border-gray-300">
-                            <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">1</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Emilio</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Mon 18/2/2023 - 12:30PM</p>
+                    <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="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Nataly</p>
+
+                            <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="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">Add a "Subsidiary of MetreKarre Koncept" under the
-                                    footer logo</p>
+
+                            <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="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Development</p>
+
+                            <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="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
-                                <p class="text-sm text-white text-center">Open</p>
+                            <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="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+
+                            <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>
 
-                        <!-- 2ND ROW -->
-                        <div class="w-full h-[60px] flex border-b border-x border-gray-300">
-                            <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">4</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Emile</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Wed 18/2/2023 - 12:30PM</p>
+                    <!-- 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>
+
+        <!-- TASKS TABLE -->
+        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
+            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
+                <!-- 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="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Salim</p>
+
+                            <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="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">Fix the ad banners based on screen size</p>
+
+                            <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="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Development</p>
+
+                            <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="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-yellow-400">
-                                <p class="text-sm text-white text-center">Working on</p>
+                            <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="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+
+                            <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>
 
-                        <!-- 3RD ROW -->
-                        <div class="w-full h-[60px] flex border-b border-x border-gray-300">
-                            <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">5</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Fouad</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Tue 18/2/2023 - 12:30PM</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Reine</p>
-                            </div>
-                            <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">Fix the alignments of the categories in the inner
-                                    category page</p>
-                            </div>
-                            <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Development</p>
-                            </div>
-                            <div
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-blue-500">
-                                <p class="text-sm text-white text-center">Waiting for client reply</p>
+                    <!-- 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>
+
+    <!-- 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="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+                            <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>
 
-                        <!-- 4TH ROW -->
-                        <div class="w-full h-[60px] flex border-b border-x border-gray-300">
-                            <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">10</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Emilio</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Wed 18/2/2023 - 02:30PM</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Nataly</p>
-                            </div>
-                            <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">Add a "Subsidiary of MetreKarre Koncept" under the
-                                    footer logo</p>
-                            </div>
-                            <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Development</p>
-                            </div>
-                            <div
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
-                                <p class="text-sm text-white text-center">Open</p>
+                    <!-- 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="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+                            <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>
 
-                        <!-- 5TH ROW -->
-                        <div class="w-full h-[60px] flex border-b border-x border-gray-300">
-                            <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">6</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Emilio</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Fri 20/2/2023 - 12:30PM</p>
-                            </div>
-                            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Nataly</p>
-                            </div>
-                            <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500">Add a "Subsidiary of MetreKarre Koncept" under the
-                                    footer logo</p>
+                    <!-- 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="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
-                                <p class="text-sm text-gray-500 text-center">Development</p>
+                            <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
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-red-500">
-                                <p class="text-sm text-white text-center">Closed</p>
+                        </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="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                <i class="fa fa-trash" style="color: red; font-size: 14px; cursor: pointer;"></i>
+                            <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>
+
+<!-- TICKETS SECTION -->
+<div class="w-full h-fit px-10 py-5">
+    <!-- TICKETS FILTERING BAR -->
+    <div class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
+        <a class="text-xl text-gray-500">Tickets</a>
+        <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>
+        <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>
+            <option value="">Waiting for client reply</option>
+        </select>
+        <input type="text" placeholder="Project"
+            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[220px] h-[40px]">
+    </div>
+    <div class="w-full h-fit bg-white rounded-md shadow-md mt-5">
+        <!-- TABLE HEADER -->
+        <div class="w-full flex h-[70px] rounded-t-md border border-gray-300">
+            <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">#</h1>
+            </div>
+            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">Client</h1>
+            </div>
+            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">Last Update</h1>
+            </div>
+            <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">Last Reply</h1>
+            </div>
+            <div class="w-[30%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">Subject</h1>
+            </div>
+            <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">Department</h1>
+            </div>
+            <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300">
+                <h1 class="text-slate-700 text-base">Status</h1>
+            </div>
+            <div class="w-[5%] h-full flex justify-center items-center">
+                <h1 class="text-slate-700 text-base">Action</h1>
+            </div>
+        </div>
+        <!-- TABLE BODY -->
+        <div class="w-full h-fit">
+            <!-- 1ST ROW -->
+            <div class="w-full h-[60px] flex border-b border-x border-gray-300">
+                <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">1</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Emilio</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Mon 18/2/2023 - 12:30PM</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Nataly</p>
+                </div>
+                <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">Add a "Subsidiary of MetreKarre Koncept" under the
+                        footer logo</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Development</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
+                    <p class="text-sm text-white text-center">Open</p>
+                </div>
+                <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
+                    <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+                </div>
+            </div>
 
+            <!-- 2ND ROW -->
+            <div class="w-full h-[60px] flex border-b border-x border-gray-300">
+                <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">4</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Emile</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Wed 18/2/2023 - 12:30PM</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Salim</p>
+                </div>
+                <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">Fix the ad banners based on screen size</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Development</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-yellow-400">
+                    <p class="text-sm text-white text-center">Working on</p>
+                </div>
+                <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
+                    <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+                </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>
+            <!-- 3RD ROW -->
+            <div class="w-full h-[60px] flex border-b border-x border-gray-300">
+                <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">5</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Fouad</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Tue 18/2/2023 - 12:30PM</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Reine</p>
+                </div>
+                <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">Fix the alignments of the categories in the inner
+                        category page</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Development</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-blue-500">
+                    <p class="text-sm text-white text-center">Waiting for client reply</p>
+                </div>
+                <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
+                    <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+                </div>
             </div>
-        </div>
-        <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
 
+            <!-- 4TH ROW -->
+            <div class="w-full h-[60px] flex border-b border-x border-gray-300">
+                <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">10</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Emilio</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Wed 18/2/2023 - 02:30PM</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Nataly</p>
+                </div>
+                <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">Add a "Subsidiary of MetreKarre Koncept" under the
+                        footer logo</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Development</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
+                    <p class="text-sm text-white text-center">Open</p>
+                </div>
+                <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
+                    <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
+                </div>
+            </div>
 
+            <!-- 5TH ROW -->
+            <div class="w-full h-[60px] flex border-b border-x border-gray-300">
+                <div class="w-[3%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">6</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Emilio</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Fri 20/2/2023 - 12:30PM</p>
+                </div>
+                <div class="w-[14%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Nataly</p>
+                </div>
+                <div class="w-[30%] h-full flex justify-start items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500">Add a "Subsidiary of MetreKarre Koncept" under the
+                        footer logo</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
+                    <p class="text-sm text-gray-500 text-center">Development</p>
+                </div>
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-red-500">
+                    <p class="text-sm text-white text-center">Closed</p>
+                </div>
+                <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
+                    <i class="fa fa-trash" style="color: red; font-size: 14px; cursor: pointer;"></i>
+                </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
diff --git a/osinaweb/templates/login.html b/osinaweb/templates/login.html
index da1f21da..a6288493 100644
--- a/osinaweb/templates/login.html
+++ b/osinaweb/templates/login.html
@@ -9,7 +9,6 @@
     <title>Osina</title>
 
     <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
-    <link href="../input.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
diff --git a/osinaweb/templates/main.html b/osinaweb/templates/main.html
index b2dd99a7..7f037eaa 100644
--- a/osinaweb/templates/main.html
+++ b/osinaweb/templates/main.html
@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %} Osina {% endblock %}</title>
     <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
-    <link href="../input.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
@@ -140,7 +139,7 @@
                         </div>
                         <button
                             class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                            id="addStatusButton">
+                            id="addStatusButton" data-modal-url="{% url 'addstatus' %}">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -229,9 +228,6 @@
     <!---------------------- JS SCRIPTS -------------------->
     <!-- SIDE BAR SCRIPT -->
     <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
-
-    <!-- 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>
    
 </body>
 
diff --git a/osinaweb/templates/project-details.html b/osinaweb/templates/project-details.html
index 45eeee43..354f6c31 100644
--- a/osinaweb/templates/project-details.html
+++ b/osinaweb/templates/project-details.html
@@ -1,643 +1,640 @@
-
 {% extends "main.html" %}
 {%load static%}
-{% block content %}  
-    <style>
-        /* TO APPLY HOVER EFFECT ON THE CREATE TASK AND STORY BUTTONS WHEN THEY ARE NOT :disabled ANYMORE */
-        .epicButtons:not([disabled]):hover {
-            background-color: transparent;
-            color: #3b82f6;
-            /* Blue-500 color */
-        }
-    </style>
-            <!-- 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>
+{% block content %}
+<style>
+    /* TO APPLY HOVER EFFECT ON THE CREATE TASK AND STORY BUTTONS WHEN THEY ARE NOT :disabled ANYMORE */
+    .epicButtons:not([disabled]):hover {
+        background-color: transparent;
+        color: #3b82f6;
+        /* Blue-500 color */
+    }
+</style>
+<!-- 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" data-modal-url="{% url 'addnote' %}">
+                    <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>
+        <!-- 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-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-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-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-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 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>
+
+<!-- PROJECT DETAIL AND USERS ACTIVITY SECTION -->
+<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>
+        <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>
+        <div class="w-full flex flex-col gap-4 mt-5">
+            <div>
+                <p class="text-gray-500 text-xl">Client: <span
+                        class="text-slate-800 text-xl font-semibold">{{project.customer}}</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Project Manager: <span
+                        class="text-slate-800 text-xl font-semibold">{{project.manager}}</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Designer: <span
+                        class="text-slate-800 text-xl font-semibold">Arze</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Developer(s): <span
+                        class="text-slate-800 text-xl font-semibold">Nataly, Salim</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Type: <span
+                        class="text-slate-800 text-xl font-semibold">Administration</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Status: <span
+                        class="text-yellow-500 text-xl font-semibold">Pending</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Start Date: <span
+                        class="text-slate-800 text-xl font-semibold">1/2/1023</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">End Date: <span
+                        class="text-slate-800 text-xl font-semibold">15/2/1023</span></p>
+            </div>
+
+            <!-- REQUIREMENTS -->
+            <div>
+                <p class="text-gray-500 text-xl">Requirements:</p>
+                <div class="w-full px-8">
+                    <ul class="list-disc text-slate-800">
+                        <li>Web-based Backend Administration System</li>
+                        <li>Web-based Frontend</li>
+                        <li>Mobile Android and IOS</li>
+                    </ul>
                 </div>
             </div>
 
-            <!-- PROJECT DETAIL AND USERS ACTIVITY SECTION -->
-            <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="w-full flex justify-between items-center relative">
-                        <div
-                            class="w-full h-[70px] flex flex-col justify-center items-center bg-green-700 rounded-md py-1">
-                            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
-                            <p class="text-white text-base">{{project.project_id}}</p>
-                        </div>
-                    </div>
-                    <div class="w-full flex flex-col gap-4 mt-5">
-                        <div>
-                            <p class="text-gray-500 text-xl">Client: <span
-                                    class="text-slate-800 text-xl font-semibold">{{project.customer}}</span></p>
+            <!-- RELATED FILES -->
+            <div>
+                <p class="text-gray-500 text-xl">Related Files:</p>
+                <div class="w-full px-4">
+                    <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
+                        <!-- HEADER -->
+                        <div class="w-full h-[60px] flex items-center justify-between">
+                            <div class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">File Name</p>
+                            </div>
+                            <div class="w-[30%] h-full flex justify-center items-center">
+                                <p class="text-sm">Date Entered</p>
+                            </div>
                         </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Project Manager: <span
-                                    class="text-slate-800 text-xl font-semibold">{{project.manager}}</span></p>
-                        </div>
+                        <!-- BODY -->
+                        <div class="w-full border-t border-gray-300">
+                            <!-- 1ST ROW -->
+                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                                <div class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
+                                    <p class="text-sm">Documentation.pdf</p>
+                                </div>
+                                <div class="w-[30%] h-full flex justify-center items-center">
+                                    <p class="text-sm">12-3-2022 13:20 PM</p>
+                                </div>
+                            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Designer: <span
-                                    class="text-slate-800 text-xl font-semibold">Arze</span></p>
+                            <!-- 2nd ROW -->
+                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                                <div class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
+                                    <p class="text-sm">database.docx</p>
+                                </div>
+                                <div class="w-[30%] h-full flex justify-center items-center">
+                                    <p class="text-sm">14-3-2023 13:20 PM</p>
+                                </div>
+                            </div>
                         </div>
+                    </div>
+                </div>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Developer(s): <span
-                                    class="text-slate-800 text-xl font-semibold">Nataly, Salim</span></p>
+            <!-- CREDENTIALS -->
+            <div>
+                <p class="text-gray-500 text-xl">Credentials:</p>
+                <div class="w-full px-4">
+                    <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
+                        <!-- HEADER -->
+                        <div class="w-full h-[60px] flex items-center justify-between">
+                            <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">Account</p>
+                            </div>
+                            <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
+                                <p class="text-sm">Password</p>
+                            </div>
+                            <div class="w-[25%] h-full flex justify-center items-center">
+                                <p class="text-sm">Used for</p>
+                            </div>
                         </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Type: <span
-                                    class="text-slate-800 text-xl font-semibold">Administration</span></p>
+                        <!-- BODY -->
+                        <div class="w-full border-t border-gray-300">
+                            <!-- 1ST ROW -->
+                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                                <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
+                                    <p class="text-sm">nataly.aw@ositcom.net</p>
+                                </div>
+                                <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
+                                    <p class="text-sm">12345678</p>
+                                </div>
+                                <div class="w-[25%] h-full flex justify-center items-center">
+                                    <p class="text-sm">Djando administration panel</p>
+                                </div>
+                            </div>
                         </div>
+                    </div>
+                </div>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Status: <span
-                                    class="text-yellow-500 text-xl font-semibold">Pending</span></p>
-                        </div>
+            <!-- TAGS -->
+            <div>
+                <p class="text-gray-500 text-xl mt-5">Tags:</p>
+                <div class="w-full h-fit px-4 mt-1 flex flex-wrap justify-start items-center gap-3">
+                    <button
+                        class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Media
+                        Streaming</button>
+
+                    <button
+                        class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Live
+                        Streaming</button>
+
+                    <button
+                        class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Audio
+                        On Demand</button>
+                </div>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Start Date: <span
-                                    class="text-slate-800 text-xl font-semibold">1/2/1023</span></p>
+            <!-- RELATED TASK CONTAINER BASED ON THE CHOSEN EPIC -->
+            <div class="w-full mt-5">
+                <div class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
+                    <div>
+                        <select id="epicSelect"
+                            class="w-[250px] rounded-md border border-gray-300 p-3 outline-none text-gray-500 cursor-pointer">
+                            <option selected disabled>EPICS</option>
+                            <option>Epic 1</option>
+                            <option>Epic 2</option>
+                            <option>Epic 3</option>
+                            <option>Epic 4</option>
+                        </select>
+                    </div>
+                    <div class="w-full flex justify-end gap-[3%] pl-5">
+                        <div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
+                            <p class="text-gray-500 font-light">Start Date: <span class="text-slate-800">1/2/2023</span>
+                            </p>
+                            <p class="text-gray-500 font-light">End Date: <span class="text-slate-800">1/3/2023</span>
+                            </p>
                         </div>
-
-                        <div>
-                            <p class="text-gray-500 text-xl">End Date: <span
-                                    class="text-slate-800 text-xl font-semibold">15/2/1023</span></p>
+                        <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>
+                            </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
+                                Story</button>
                         </div>
+                    </div>
+                </div>
+            </div>
 
-                        <!-- REQUIREMENTS -->
-                        <div>
-                            <p class="text-gray-500 text-xl">Requirements:</p>
-                            <div class="w-full px-8">
-                                <ul class="list-disc text-slate-800">
-                                    <li>Web-based Backend Administration System</li>
-                                    <li>Web-based Frontend</li>
-                                    <li>Mobile Android and IOS</li>
-                                </ul>
+            <div class="w-full px-4 hidden" id="epicRelatedTasks">
+                <div class="w-full p-3 bg-white rounded-md shadow-lg">
+                    <p class="text-gray-500 text-xl">Related Tasks:</p>
+                    <!-- TASK 1 -->
+                    <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
+                        <!-- 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>
 
-                        <!-- RELATED FILES -->
-                        <div>
-                            <p class="text-gray-500 text-xl">Related Files:</p>
-                            <div class="w-full px-4">
-                                <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
-                                    <!-- HEADER -->
-                                    <div class="w-full h-[60px] flex items-center justify-between">
-                                        <div
-                                            class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-sm">File Name</p>
-                                        </div>
-                                        <div class="w-[30%] h-full flex justify-center items-center">
-                                            <p class="text-sm">Date Entered</p>
-                                        </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>
 
-                                    <!-- BODY -->
-                                    <div class="w-full border-t border-gray-300">
-                                        <!-- 1ST ROW -->
-                                        <div
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            <div
-                                                class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">Documentation.pdf</p>
-                                            </div>
-                                            <div class="w-[30%] h-full flex justify-center items-center">
-                                                <p class="text-sm">12-3-2022 13:20 PM</p>
-                                            </div>
-                                        </div>
-
-                                        <!-- 2nd ROW -->
-                                        <div
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            <div
-                                                class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">database.docx</p>
-                                            </div>
-                                            <div class="w-[30%] h-full flex justify-center items-center">
-                                                <p class="text-sm">14-3-2023 13:20 PM</p>
-                                            </div>
-                                        </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>
-                            </div>
-                        </div>
 
-                        <!-- CREDENTIALS -->
-                        <div>
-                            <p class="text-gray-500 text-xl">Credentials:</p>
-                            <div class="w-full px-4">
-                                <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
-                                    <!-- HEADER -->
-                                    <div class="w-full h-[60px] flex items-center justify-between">
-                                        <div
-                                            class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-sm">Account</p>
-                                        </div>
-                                        <div
-                                            class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                            <p class="text-sm">Password</p>
-                                        </div>
-                                        <div class="w-[25%] h-full flex justify-center items-center">
-                                            <p class="text-sm">Used for</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>
 
-                                    <!-- BODY -->
-                                    <div class="w-full border-t border-gray-300">
-                                        <!-- 1ST ROW -->
-                                        <div
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            <div
-                                                class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">nataly.aw@ositcom.net</p>
-                                            </div>
-                                            <div
-                                                class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                                <p class="text-sm">12345678</p>
-                                            </div>
-                                            <div class="w-[25%] h-full flex justify-center items-center">
-                                                <p class="text-sm">Djando administration panel</p>
-                                            </div>
-                                        </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>
-                        </div>
 
-                        <!-- TAGS -->
-                        <div>
-                            <p class="text-gray-500 text-xl mt-5">Tags:</p>
-                            <div class="w-full h-fit px-4 mt-1 flex flex-wrap justify-start items-center gap-3">
+                            <!-- RIGHT SIDE OF TABLE BODY -->
+                            <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
                                 <button
-                                    class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Media
-                                    Streaming</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="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Live
-                                    Streaming</button>
-
+                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                    id="updateStatusButton">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">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">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="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Audio
-                                    On Demand</button>
+                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                                    id="showPointsButton">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">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">Timline</button>
                             </div>
                         </div>
+                    </div>
 
-                        <!-- RELATED TASK CONTAINER BASED ON THE CHOSEN EPIC -->
-                        <div class="w-full mt-5">
+                    <!-- TASK 2 -->
+                    <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
+                        <!-- TABLE HEADER -->
+                        <div class="w-full flex h-[70px] rounded-t-md">
                             <div
-                                class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
-                                <div>
-                                    <select id="epicSelect"
-                                        class="w-[250px] rounded-md border border-gray-300 p-3 outline-none text-gray-500 cursor-pointer">
-                                        <option selected disabled>EPICS</option>
-                                        <option>Epic 1</option>
-                                        <option>Epic 2</option>
-                                        <option>Epic 3</option>
-                                        <option>Epic 4</option>
-                                    </select>
-                                </div>
-                                <div class="w-full flex justify-end gap-[3%] pl-5">
-                                    <div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
-                                        <p class="text-gray-500 font-light">Start Date: <span
-                                                class="text-slate-800">1/2/2023</span></p>
-                                        <p class="text-gray-500 font-light">End Date: <span
-                                                class="text-slate-800">1/3/2023</span></p>
-                                    </div>
-                                    <div class="w-[50%] flex justify-end items-center gap-2">
-                                        <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>
-                                        <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
-                                            Story</button>
-                                    </div>
-                                </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>
 
-                        <div class="w-full px-4 hidden" id="epicRelatedTasks">
-                            <div class="w-full p-3 bg-white rounded-md shadow-lg">
-                                <p class="text-gray-500 text-xl">Related Tasks:</p>
-                                <!-- TASK 1 -->
-                                <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
-                                    <!-- 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>
+                        <!-- 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>
 
-                                    <!-- 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">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">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">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">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">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">Timline</button>
-                                        </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>
 
-                                <!-- TASK 2 -->
-                                <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
-                                    <!-- 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 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>
 
-                                    <!-- 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">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">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">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">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">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">Timline</button>
-                                        </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>
-                        </div>
 
-                        <div class="mt-10 flex flex-col justify-center items-center w-full">
-                            <p class="text-xl text-gray-500">Total Extra Task Time : <span
-                                    class="text-slate-800 font-semibold">46 hrs and 50 min</span></p>
-                            <p class="text-xl text-gray-500">Total Task Time : <span
-                                    class="text-slate-800 font-semibold">240 hrs and 40 min</span></p>
+                            <!-- 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">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">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">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">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">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">Timline</button>
+                            </div>
                         </div>
                     </div>
-
-                    <div class="w-full flex justify-center items-center gap-4 mt-11">
-                        <button
-                            class="w-fit text-xl 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-xl 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>
-                <!-- 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">
-
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
-                            </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 class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
+            <div class="mt-10 flex flex-col justify-center items-center w-full">
+                <p class="text-xl text-gray-500">Total Extra Task Time : <span class="text-slate-800 font-semibold">46
+                        hrs and 50 min</span></p>
+                <p class="text-xl text-gray-500">Total Task Time : <span class="text-slate-800 font-semibold">240 hrs
+                        and 40 min</span></p>
+            </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>
-                            <!-- 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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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">12:30 PM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </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>
-                            <!-- 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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create Enooma home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </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>
-                            <!-- 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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </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>
-                            <!-- 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 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>
-                </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>
+                    <!-- 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>
-        <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+    </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>
 
 
-    </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>
 
-    <!-- THE SCRIPT FOR THE EPICS BAR -->
-    <script type="text/javascript" src='{% static "js/epics.js" %}'></script>
+<!-- THE SCRIPT FOR THE EPICS BAR -->
+<script type="text/javascript" src='{% static "js/epics.js" %}'></script>
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/projects.html b/osinaweb/templates/projects.html
index 74ef8932..cf22a998 100644
--- a/osinaweb/templates/projects.html
+++ b/osinaweb/templates/projects.html
@@ -1,301 +1,344 @@
 {% extends "main.html" %}
 {%load static%}
 {% block title %}My Projects{% endblock %}
-{% 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>
+{% 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>
+        <!-- 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-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-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-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-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 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 Projects</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>
+                </div>
+                <div>
+                    <a href="{% url 'createproject' %}">
+                        <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
+                            Project</button>
+                    </a>
                 </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 Projects</h1>
-
-                        <!-- PROJECT FILTERING -->
-                        <div
-                            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 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>
+            <div class="mt-5 w-full h-[500px]">
+                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
+                    <!-- TABLE HEADER -->
+                    <div
+                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
+                        <div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">#</p>
                         </div>
-
-                        <div class="mt-5 w-full h-[500px]">
-                            <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
-                                <!-- TABLE HEADER -->
-                                <div
-                                    class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
-                                    <div
-                                        class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p class="text-slate-800">#</p>
-                                    </div>
-                                    <div
-                                        class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p>Project</p>
-                                    </div>
-                                    <div
-                                        class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p class="text-slate-800">Client</p>
-                                    </div>
-                                    <div
-                                        class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p class="text-slate-800">Status</p>
-                                    </div>
-                                    <div class="w-[15%] h-full flex justify-center items-center">
-                                        <!-- <div>
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p>Project</p>
+                        </div>
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Client</p>
+                        </div>
+                        <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Status</p>
+                        </div>
+                        <div class="w-[15%] h-full flex justify-center items-center">
+                            <!-- <div>
                                             <i class="fa fa-eye"></i>
                                         </div>
                                         <div>
                                             <i class="fa fa-trash"></i>
                                         </div> -->
-                                        <p class="text-slate-800">Action</p>
-                                    </div>
-                                </div>
+                            <p class="text-slate-800">Action</p>
+                        </div>
+                    </div>
 
-                                <!-- TABLE BODY -->
-                                <div class="w-full">
-                                    <!-- 1st row -->
-                                    {% for project in projects %}
-                                    <div
-                                        class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
-                                        <div
-                                            class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-gray-500">{{project.project_id}}</p>
-                                        </div>
-                                        <div
-                                            class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-gray-500">{{project.name}}</p>
-                                        </div>
-                                        <div
-                                            class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-gray-500">{{project.customer}}</p>
-                                        </div>
-                                        {% if project.status == 'Completed' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        {% if project.status == 'Cancelled' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        {% if project.status == 'Active' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-orange-700">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        {% if project.status == 'Pending' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-yellow-400">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        <div class="w-[15%] h-full flex justify-center items-center gap-4">
-                                            <a href="{% url 'detailed-project' project.project_id %}">
-                                                <div class="text-[18px] text-blue-500 cursor-pointer">
-                                                    <i class="fa fa-eye"></i>
-                                                </div>
-                                            </a>
-                                            <div class="text-[18px] text-red-500 cursor-pointer">
-                                                <i class="fa fa-trash"></i>
-                                            </div>
-                                        </div>
+                    <!-- TABLE BODY -->
+                    <div class="w-full">
+                        <!-- 1st row -->
+                        {% for project in projects %}
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">{{project.project_id}}</p>
+                            </div>
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">{{project.name}}</p>
+                            </div>
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">{{project.customer}}</p>
+                            </div>
+                            {% if project.status == 'Completed' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            {% if project.status == 'Cancelled' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            {% if project.status == 'Active' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-orange-700">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            {% if project.status == 'Pending' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-yellow-400">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            <div class="w-[15%] h-full flex justify-center items-center gap-4">
+                                <a href="{% url 'detailed-project' project.project_id %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
                                     </div>
-                                    {% endfor %}
-
+                                </a>
+                                <div class="text-[18px] text-slate-800 cursor-pointer">
+                                    <i class="fa fa-edit"></i>
+                                </div>
+                                <div class="text-[18px] text-red-500 cursor-pointer">
+                                    <i class="fa fa-trash"></i>
                                 </div>
                             </div>
                         </div>
+                        {% endfor %}
+
                     </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">
+    <!-- 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">
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
+
+            <!-- 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>
-                            <!-- 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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </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>
-                            <!-- 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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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">12:30 PM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </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>
-                            <!-- 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 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>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <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>
-                                    <p class="text-sm text-gray-500">Closed - Create Enooma home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </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>
-                            <!-- 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 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>
 
-        <!-- 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>
+</div>
 
-      <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+<!-- 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
diff --git a/osinaweb/templates/showpoints-modal.html b/osinaweb/templates/showpoints-modal.html
index 96e52b28..58231ce1 100644
--- a/osinaweb/templates/showpoints-modal.html
+++ b/osinaweb/templates/showpoints-modal.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
diff --git a/osinaweb/templates/task-details.html b/osinaweb/templates/task-details.html
index 920f9c84..489ebfde 100644
--- a/osinaweb/templates/task-details.html
+++ b/osinaweb/templates/task-details.html
@@ -7,7 +7,6 @@
     <title>Task Detail</title>
 
     <link href="output.css" rel="stylesheet">
-    <link href="../src/input.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
diff --git a/osinaweb/templates/timeline-modal.html b/osinaweb/templates/timeline-modal.html
index 80e1e34f..41ceedbb 100644
--- a/osinaweb/templates/timeline-modal.html
+++ b/osinaweb/templates/timeline-modal.html
@@ -1,16 +1,16 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <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-2">Timeline</h1>
diff --git a/osinaweb/templates/update-status-modal.html b/osinaweb/templates/update-status-modal.html
index 1e33279a..d8641b56 100644
--- a/osinaweb/templates/update-status-modal.html
+++ b/osinaweb/templates/update-status-modal.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>