diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index e1deaf01..ff81c433 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/input.css b/osinaweb/input.css
index 601daba1..08626b60 100644
--- a/osinaweb/input.css
+++ b/osinaweb/input.css
@@ -2,6 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+.fixedSideHeader::-webkit-scrollbar {
+    width: 5px;
+    /* Width of the entire scrollbar */
+
+}
+
+.fixedSideHeader::-webkit-scrollbar-thumb {
+    background: #7B8894;
+    /* Color of the scroll thumb */
+}
+
+.fixedSideHeader::-webkit-scrollbar-track {
+    background: #5a5a5a3c;
+    /* Color of the scrollbar track */
+}
+
 
 /* FOR THE IFRAME TO TAKE 95% OF WIDTH ON SMALL SCREEN SIZES */
 @media screen and (max-width: 798px) {
diff --git a/osinaweb/osinacore/__pycache__/forms.cpython-311.pyc b/osinaweb/osinacore/__pycache__/forms.cpython-311.pyc
index 30bf420c..35fbcffa 100644
Binary files a/osinaweb/osinacore/__pycache__/forms.cpython-311.pyc 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
index e5a8228b..58161853 100644
Binary files a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc
index 19de9950..e74394c9 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0021_alter_customerprofile_business_and_more.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0021_alter_customerprofile_business_and_more.cpython-311.pyc
new file mode 100644
index 00000000..96fe2b56
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0021_alter_customerprofile_business_and_more.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0022_customerprofile_customer_id.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0022_customerprofile_customer_id.cpython-311.pyc
new file mode 100644
index 00000000..7ed65dd1
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0022_customerprofile_customer_id.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0023_task_assigned_to.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0023_task_assigned_to.cpython-311.pyc
new file mode 100644
index 00000000..bec5f55c
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0023_task_assigned_to.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 5f71adad..67dc5fa7 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -6,7 +6,7 @@ from django.contrib import messages
 from .forms import *
 from django.utils import timezone
 from django.urls import reverse
-
+from django.http import HttpResponse
 
 
 # Pages views
@@ -198,6 +198,40 @@ def businessdetails(request):
     }
     return render(request, 'business-details.html', context)
 
+@login_required
+def businesses(request):
+    context = {       
+
+    }
+    return render(request, 'businesses.html', context)
+
+@login_required
+def adduser(request):
+
+    context = {
+
+
+    }
+    return render(request, 'add-user.html', context)
+
+@login_required
+def userdetails(request):
+
+    context = {
+
+
+    }
+    return render(request, 'user-details.html', context)
+
+@login_required
+def users(request):
+
+    context = {
+
+
+    }
+    return render(request, 'users.html', context)
+
 
 
 
@@ -275,28 +309,30 @@ def update_status_modal(request, *args, **kwargs):
 
 
 #Save Functions
-
-
 @login_required
 def save_note(request):
     if request.method == 'POST':
         text = request.POST.get('note_text')
-        color= request.POST.get('note_color')
+        color = request.POST.get('note_color')
         user = request.user
         date = timezone.now()
 
         note = Note(
-        text = text,
-        color = color,
-        user = user,
-        date = date,
+            text=text,
+            color=color,
+            user=user,
+            date=date,
         )
         note.save()
 
+        # Reload the parent page
+        return HttpResponse('<script>window.top.location.reload();</script>')
 
-       
     return render(request, 'addnote-modal.html') 
 
+    
+
+
 @login_required
 def save_project(request):
     if request.method == 'POST':
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
index 9ac6e985..50a3d3a4 100644
Binary files a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc and b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/urls.py b/osinaweb/osinaweb/urls.py
index 09e4ff39..905ba1b0 100644
--- a/osinaweb/osinaweb/urls.py
+++ b/osinaweb/osinaweb/urls.py
@@ -31,6 +31,10 @@ urlpatterns = [
     path('customerdetails/<str:customer_id>/', views.customerdetails, name='customerdetails'),
     path('addbusiness/', views.addbusiness, name='addbusiness'),
     path('businessdetails/', views.businessdetails, name='businessdetails'),
+    path('businesses/', views.businesses, name='businesses'),
+    path('adduser/', views.adduser, name='adduser'),
+    path('userdetails/', views.userdetails, name='userdetails'),
+    path('users/', views.users, name='users'),
     path('projectdetails/<str:project_id>/', views.detailed_project, name='detailed-project'),
     path('createproject/', views.create_project, name='createproject'),
     path('createepic/<str:project_id>/', views.create_epic, name='createepic'),
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 7e074e91..db16ba17 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -743,10 +743,18 @@ video {
   margin-top: 1.5rem;
 }
 
+.mt-\[-63px\] {
+  margin-top: -63px;
+}
+
 .mt-\[5\%\] {
   margin-top: 5%;
 }
 
+.mt-\[50px\] {
+  margin-top: 50px;
+}
+
 .block {
   display: block;
 }
@@ -848,6 +856,10 @@ video {
   width: 100px;
 }
 
+.w-\[120px\] {
+  width: 120px;
+}
+
 .w-\[14\%\] {
   width: 14%;
 }
@@ -932,6 +944,10 @@ video {
   width: 380px;
 }
 
+.w-\[40\%\] {
+  width: 40%;
+}
+
 .w-\[40px\] {
   width: 40px;
 }
@@ -964,6 +980,10 @@ video {
   width: 55%;
 }
 
+.w-\[55px\] {
+  width: 55px;
+}
+
 .w-\[60px\] {
   width: 60px;
 }
@@ -1121,6 +1141,10 @@ video {
   overflow-x: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1243,6 +1267,11 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(234 179 8 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1698,6 +1727,21 @@ video {
   transition-duration: 300ms;
 }
 
+.fixedSideHeader::-webkit-scrollbar {
+  width: 5px;
+  /* Width of the entire scrollbar */
+}
+
+.fixedSideHeader::-webkit-scrollbar-thumb {
+  background: #7B8894;
+  /* Color of the scroll thumb */
+}
+
+.fixedSideHeader::-webkit-scrollbar-track {
+  background: #5a5a5a3c;
+  /* Color of the scrollbar track */
+}
+
 /* FOR THE IFRAME TO TAKE 95% OF WIDTH ON SMALL SCREEN SIZES */
 
 @media screen and (max-width: 798px) {
@@ -1736,11 +1780,21 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-yellow-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .hover\:text-blue-500:hover {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .hover\:text-red-500:hover {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
diff --git a/osinaweb/static/js/pop-modals.js b/osinaweb/static/js/pop-modals.js
index 2efbf722..266177e5 100644
--- a/osinaweb/static/js/pop-modals.js
+++ b/osinaweb/static/js/pop-modals.js
@@ -1,192 +1,68 @@
 document.addEventListener("DOMContentLoaded", function () {
 
-    // Function to open the modal
-    function openModal(url) {
-        const modalContainer = document.getElementById("popUpModal");
+    function openModalWithDimensions(url, width, height) {
+        const modalUrl = url;
+        openModal(modalUrl);
 
-        //Get the iframe element
         const iframe = document.getElementById("popupModalFrame");
+        iframe.style.height = height;
+        iframe.style.width = width;
+    }
 
-        //Get the body element
+    function openModal(url) {
+        const modalContainer = document.getElementById("popUpModal");
+        const iframe = document.getElementById("popupModalFrame");
         const body = document.body;
 
-        //Disable scrolling
         body.style.overflow = "hidden";
-
-        //Set the URL of the iframe to load the external content
         iframe.src = url;
-
-        //Display the modal
         modalContainer.style.display = "flex";
     }
 
-    //Function to close the modal
     function closeModal() {
         const modalContainer = document.getElementById("popUpModal");
-
         const iframe = document.getElementById("popupModalFrame");
-
-        //Clear the URL to stop loading the content
-        iframe.src = "";
-
         const body = document.body;
 
-        //Enable scrolling
+        iframe.src = "";
         body.style.overflow = "auto";
-
-        //Hide the modal
         modalContainer.style.display = "none";
     }
 
+    function addButtonClickListener(buttonId, width, height) {
+        const button = document.getElementById(buttonId);
+        if (button) {
+            button.addEventListener("click", () => {
+                const modalUrl = button.getAttribute("data-modal-url");
+                openModalWithDimensions(modalUrl, width, height);
+            });
+        }
+    }
 
-    const closeButton = document.getElementById("closeModalButton");
+    // Add button click listeners with dimensions
+    addButtonClickListener("addStatusButton", "450px", "200px");
+    addButtonClickListener("addNoteButton", "400px", "225px");
+    addButtonClickListener("addFileButton", "500px", "320px");
+    addButtonClickListener("addCredentialsButton", "500px", "300px");
+    addButtonClickListener("updateStatusButton", "fit-content", "160px");
+    addButtonClickListener("showPointsButton", "600px", "450px");
+    addButtonClickListener("addPointButton", "500px", "225px");
+    addButtonClickListener("timelineButton", "600px", "450px");
+    addButtonClickListener("addTimeButton", "300px", "270px");
+    addButtonClickListener("deleteTaskButton", "fit-content", "130px");
 
+    const closeButton = document.getElementById("closeModalButton");
     closeButton.addEventListener("click", () => {
         closeModal();
     });
 
     const modalContainer = document.getElementById("popUpModal");
-    // Event listener to trigger the modal when clicking outside of it
     window.addEventListener("click", function (event) {
         if (event.target === modalContainer) {
             closeModal();
         }
     });
 
-    //ADD STATUS MODAL
-    const addStatusButton = document.getElementById("addStatusButton");
-
-    addStatusButton.addEventListener("click", () => {
-        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"
-    });
-
-    //ADD FILE MODAL (in the inner project page)
-    const addFileButton = document.getElementById("addFileButton");
-
-    addFileButton.addEventListener("click", () => {
-        const modalUrl = addFileButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "320px"
-        iframe.style.width = "500px"
-    });
-
-
-    //ADD CREDENTIALS MODAL (in the inner project page)
-    const addCredentialsButton = document.getElementById("addCredentialsButton");
-
-    addCredentialsButton.addEventListener("click", () => {
-        const modalUrl = addCredentialsButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "300px"
-        iframe.style.width = "500px"
-    });
-
-
-    //SHOW TASK MODALS
-    //Show the update status modal
-    const updateStatusButton = document.getElementById("updateStatusButton");
-
-    updateStatusButton.addEventListener("click", () => {
-        const modalUrl = updateStatusButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "160px"
-        iframe.style.width = "fit-content"
-    });
-
-
-    //Show the show points modal
-    const showPointsButton = document.getElementById("showPointsButton");
-
-    showPointsButton.addEventListener("click", () => {
-        const modalUrl = showPointsButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "450px"
-        iframe.style.width = "600px"
-    });
-
-    //Show the add point modal
-    const addPointButton = document.getElementById("addPointButton");
-
-    addPointButton.addEventListener("click", () => {
-        const modalUrl = addPointButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "225px"
-        iframe.style.width = "500px"
-    });
-
-    //Show the Timeline modal
-    const timelineButton = document.getElementById("timelineButton");
-
-    timelineButton.addEventListener("click", () => {
-        const modalUrl = timelineButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "450px"
-        iframe.style.width = "600px"
-    });
-
-    //Show the add timeline modal
-    const addTimeButton = document.getElementById("addTimeButton");
-
-    addTimeButton.addEventListener("click", () => {
-        const modalUrl = addTimeButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "270px"
-        iframe.style.width = "300px"
-    });
-
-    //Show the delete task modal
-    const deleteTaskButton = document.getElementById("deleteTaskButton");
-
-    deleteTaskButton.addEventListener("click", () => {
-        const modalUrl = deleteTaskButton.getAttribute("data-modal-url");
-
-        openModal(modalUrl);
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "130px"
-        iframe.style.width = "fit-content"
-    });
-
-});
\ No newline at end of file
+    // TO RELOAD THE TOP WINDOW AFTER ADDING
+    // window.top.location.reload();
+});
diff --git a/osinaweb/templates/add-business.html b/osinaweb/templates/add-business.html
index b4b3a18c..639bc57a 100644
--- a/osinaweb/templates/add-business.html
+++ b/osinaweb/templates/add-business.html
@@ -2,8 +2,6 @@
 {%load static%}
 {% block content %}
 
-<!-- IN THIS TASK FORM THE TASK DOESN'T BELONG NEITHER TO APROJECT OR EPIC, WE REAHC THIS FORM FROM THE TASKS.HTML -->
-
 <div class="w-full px-10 mb-4">
     <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
diff --git a/osinaweb/templates/add-customer.html b/osinaweb/templates/add-customer.html
index 1d959630..f26a809a 100644
--- a/osinaweb/templates/add-customer.html
+++ b/osinaweb/templates/add-customer.html
@@ -2,7 +2,6 @@
 {%load static%}
 {% block content %}
 
-<!-- IN THIS TASK FORM THE TASK DOESN'T BELONG NEITHER TO APROJECT OR EPIC, WE REAHC THIS FORM FROM THE TASKS.HTML -->
 
 <div class="w-full px-10 mb-4">
     <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
@@ -58,6 +57,13 @@
                         Select Business
                     </h1>
 
+                    <div class="w-full flex justify-end items-center px-3 py-2">
+                        <a href="{% url 'addbusiness' %}">
+                            <button type="button" class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white">
+                                Add Business
+                            </button>
+                        </a>
+                    </div>
                   <div class="w-full mt-2">
                     <select name="business" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                     <option value="" selected disabled>Business Name</option>
diff --git a/osinaweb/templates/add-user.html b/osinaweb/templates/add-user.html
new file mode 100644
index 00000000..a465e3ba
--- /dev/null
+++ b/osinaweb/templates/add-user.html
@@ -0,0 +1,94 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Add User
+        </h1>
+        <form method="POST" action="{% url 'save_customer' %}">
+            {% csrf_token %}
+            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+
+                <input type="text" placeholder="Username"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="password" placeholder="Password"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="password" placeholder="Password Confirmation"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <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="image/*" hidden multiple />
+                        <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                            Profile Picture</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>
+
+                <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>Groups</option>
+                    <option>Group 1</option>
+                    <option>Group 2</option>
+                    <option>Group 3</option>
+
+                </select>
+
+                <input name="first_name" type="text" placeholder="First Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="last_name" type="text" placeholder="Last Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="email" type="email" placeholder="Email"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <button type="submit"
+                        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
+                        User</button>
+                </div>
+            </div>
+        </form>
+    </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/addstatus-modal.html b/osinaweb/templates/addstatus-modal.html
index 4a0e907c..93eaf429 100644
--- a/osinaweb/templates/addstatus-modal.html
+++ b/osinaweb/templates/addstatus-modal.html
@@ -2,6 +2,7 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,21 +16,49 @@
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Status</h1>
-    
+
         <div class="w-full flex justify-center items-center">
-            <input type="text" placeholder="Type your status here..." class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+            <input type="text" placeholder="Type your status here..."
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
         </div>
 
         <div class="w-full py-2 flex justify-start gap-3 items-center">
-            <input type="checkbox" name="" id="">
+            <input type="checkbox" name="" id="relatedTaskCheckbox">
             <p class="text-slate-700 text-base">Add Status To Task</p>
         </div>
 
-    
+        <div class="w-full hidden"
+            id="relatedTaskContainer">
+            <select required 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>Choose Task</option>
+            <option>Task 1</option>
+            <option>Task 2</option>
+            <option>Task 3</option>
+            <option>Task 4</option>
+        </select>
+
+        </div>
+
+        <script>
+            const relatedTaskCheckbox = document.getElementById("relatedTaskCheckbox");
+            const relatedTaskContainer = document.getElementById("relatedTaskContainer");
+
+            relatedTaskCheckbox.addEventListener("change", function () {
+                if (relatedTaskCheckbox.checked) {
+                    relatedTaskContainer.classList.remove("hidden");
+                } else {
+                    relatedTaskContainer.classList.add("hidden");
+                }
+            });
+
+        </script>
+
         <div class="w-full flex justify-center items-center mt-4">
             <button
                 class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
         </div>
     </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/osinaweb/templates/business-details.html b/osinaweb/templates/business-details.html
index 22901635..a6c79409 100644
--- a/osinaweb/templates/business-details.html
+++ b/osinaweb/templates/business-details.html
@@ -53,13 +53,13 @@
     </div>
 </div>
 
-<!-- CUSTOMER 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 -->
+<!-- BUSINESS DETAIL AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / BUSINESS DETAIL SECTION -->
     <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
-        <div class="w-full bg-gray-300 rounded-t-md flex justify-center items-center py-2 gap-3">
-            <div class="w-[100px] h-[100px] bg-red-300">
-                <img src="{% static 'images/logo-social.png' %}" alt="" class="w-full h-full object-cover">
+        <div class="w-full bg-gray-300 rounded-t-md flex flex-col justify-center items-center py-2 gap-3 mt-[50px]">
+            <div class="w-[100px] h-[100px] rounded-full mt-[-63px] border border-gray-300">
+                <img src="{% static 'images/logo-social.png' %}" alt="" class="w-full h-full object-cover rounded-full">
             </div>
             <h1 class="text-3xl text-white font-semibold">Emile Ellye - Ositcom</h1>
         </div>
@@ -75,8 +75,8 @@
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">
             <div>
-                <p class="text-gray-500 text-xl">Name: <span
-                        class="text-slate-800 text-xl font-semibold">Ositcom</span></p>
+                <p class="text-gray-500 text-xl">Name: <span class="text-slate-800 text-xl font-semibold">Ositcom</span>
+                </p>
             </div>
 
             <div>
@@ -85,8 +85,8 @@
             </div>
 
             <div>
-                <p class="text-gray-500 text-xl">VAT: <span
-                        class="text-slate-800 text-xl font-semibold">Checked</span></p>
+                <p class="text-gray-500 text-xl">VAT: <span class="text-slate-800 text-xl font-semibold">Checked</span>
+                </p>
             </div>
 
             <div>
@@ -108,12 +108,22 @@
                 <p class="text-gray-500 text-xl">Business Type: <span
                         class="text-green-700 text-xl font-semibold">Association</span></p>
             </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Related Customer: 
+                    <a class="cursor-pointer" href="">
+                        <span class="text-slate-800 text-xl font-semibold hover:text-gray-500">Emile Elliye</span>
+                    </a>
+                </p>
+            </div>
+
         </div>
     </div>
+
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
 
             <!-- 1ST ROW -->
diff --git a/osinaweb/templates/businesses.html b/osinaweb/templates/businesses.html
new file mode 100644
index 00000000..529f5e46
--- /dev/null
+++ b/osinaweb/templates/businesses.html
@@ -0,0 +1,273 @@
+{% 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>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- BUSINESSES AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / BUSINESSES SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">Businesses</h1>
+
+            <!-- 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">
+                    <div class="relative h-fit w-fit flex items-center">
+                        <input type="text" placeholder="Enter Business Name"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button
+                            class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <a href="{% url 'addbusiness' %}">
+                        <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">Add
+                            Business</button>
+                    </a>
+                </div>
+            </div>
+
+            <div class="mt-5 w-full h-fit">
+                <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-[35%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-sm">Name</p>
+                        </div>
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-sm">Business Type</p>
+                        </div>
+                        <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-sm">Financial number</p>
+                        </div>
+                        <div class="w-[15%] h-full flex justify-center items-center">
+                            <p class="text-sm">Actions</p>
+                        </div>
+                    </div>
+
+                    <!-- BODY -->
+                    <div class="w-full border-t border-gray-300">
+                        <!-- ROW -->
+                        <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">HII</p>
+                            </div>
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">Non-profit</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">2022</p>
+                            </div>
+                            <div class="w-[15%] h-full flex justify-center items-center gap-3">
+                                <a href="{% url 'businessdetails' %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <div class="text-[18px] text-blue-500 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>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white h-fit 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-fit mt-2">
+
+
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2NT ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3RD ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+
+        </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/create-project.html b/osinaweb/templates/create-project.html
index 0f361959..c6aa816d 100644
--- a/osinaweb/templates/create-project.html
+++ b/osinaweb/templates/create-project.html
@@ -2,8 +2,6 @@
 {%load static%}
 {% block content %}
 
-<!-- IN THIS TASK FORM THE TASK BELONG ONLY TO A PROJECT AND THE USER MUST CHOOSE TO WHICH EPIC IT BELONGS -->
-
 <div class="w-full px-10 mb-4">
     <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
diff --git a/osinaweb/templates/create-task.html b/osinaweb/templates/create-task.html
index cad9074e..5edeb807 100644
--- a/osinaweb/templates/create-task.html
+++ b/osinaweb/templates/create-task.html
@@ -9,47 +9,58 @@
         <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">
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                 <option value="" selected disabled>Select Project</option>
                 <option value="">Cars & Classics</option>
                 <option value="">Osina</option>
             </select>
-    
-            <select id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                 <option value="" selected disabled>Select Epic</option>
                 <option value="">Epic 1</option>
                 <option value="">Epic 2</option>
                 <option value="">Epic 3</option>
             </select>
-    
-            <select id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+
+            <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">
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                 <option value="" selected disabled>Extra</option>
                 <option value="">Yes</option>
                 <option value="">No</option>
             </select>
 
-            <textarea  type="text" placeholder="Task Description" rows="5" cols="5"
-            class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
-    
+            <select required 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="Pending">Nataly</option>
+                <option value="Active">Salim</option>
+            </select>
+
+            <textarea type="text" placeholder="Task Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
             <div class="w-full">
                 <label class="text-gray-500">Start Date:</label>
                 <input type="date" id="date" name="date"
                     class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
             </div>
-    
+
             <div class="w-full">
                 <label class="text-gray-500">End Date:</label>
                 <input type="date" id="date" name="date"
@@ -64,15 +75,15 @@
                     <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) {
@@ -83,7 +94,7 @@
                     }
                 });
             </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
diff --git a/osinaweb/templates/createtask-epic.html b/osinaweb/templates/createtask-epic.html
index 14540654..8882f244 100644
--- a/osinaweb/templates/createtask-epic.html
+++ b/osinaweb/templates/createtask-epic.html
@@ -21,7 +21,8 @@
             </select>
 
             <select id=""
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 cursor-not-allowed"  disabled>
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 cursor-not-allowed"
+                disabled>
                 <option value="">Epic</option>
             </select>
 
@@ -40,6 +41,13 @@
                 <option value="">No</option>
             </select>
 
+            <select required 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="Pending">Nataly</option>
+                <option value="Active">Salim</option>
+            </select>
+
             <textarea type="text" placeholder="Task Description" rows="5" cols="5"
                 class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
 
diff --git a/osinaweb/templates/createtask-project.html b/osinaweb/templates/createtask-project.html
index 92f29179..a4ae1d43 100644
--- a/osinaweb/templates/createtask-project.html
+++ b/osinaweb/templates/createtask-project.html
@@ -10,14 +10,15 @@
             Create Task For {{project.name}}
         </h1>
 
-        <form class="w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST" action="{% url 'save_task' %}">
+        <form class="w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST"
+            action="{% url 'save_task' %}">
             {% csrf_token %}
             <input required name="name" type="text" placeholder="Task Name"
                 class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
 
-            <select  required name="project" id=""
+            <select required name="project" id=""
                 class="hidden w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
-               
+
                 <option value="{{project.id}}">{{project.name}}</option>
 
             </select>
@@ -45,6 +46,13 @@
                 <option value="False">No</option>
             </select>
 
+            <select required 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="Pending">Nataly</option>
+                <option value="Active">Salim</option>
+            </select>
+
             <textarea required name="description" type="text" placeholder="Task Description" rows="5" cols="5"
                 class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
 
diff --git a/osinaweb/templates/customer-details.html b/osinaweb/templates/customer-details.html
index 878907fc..f13e1afe 100644
--- a/osinaweb/templates/customer-details.html
+++ b/osinaweb/templates/customer-details.html
@@ -54,8 +54,8 @@
 </div>
 
 <!-- CUSTOMER 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-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / CUSTOMER DETAIL SECTION -->
     <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
         {% if customer.status == 'Active' %}
         <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-2">
@@ -197,9 +197,9 @@
 
     </div>
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
 
             <!-- 1ST ROW -->
diff --git a/osinaweb/templates/customers.html b/osinaweb/templates/customers.html
index 12cab0f5..e618d322 100644
--- a/osinaweb/templates/customers.html
+++ b/osinaweb/templates/customers.html
@@ -53,14 +53,14 @@
     </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 -->
+<!-- CUSTOMERS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / CUSTOMERS SECTION -->
     <div class="w-[74.5%]">
         <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
             <h1 class="text-slate-800 text-[30px] font-semibold">Customers</h1>
 
-            <!-- PROJECT FILTERING -->
+            <!-- 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">
                     <div class="relative h-fit w-fit flex items-center">
@@ -163,10 +163,9 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
             <!-- 1ST ROW -->
             <div class="w-full flex flex-col py-3">
diff --git a/osinaweb/templates/index.html b/osinaweb/templates/index.html
index db87be09..6303130b 100644
--- a/osinaweb/templates/index.html
+++ b/osinaweb/templates/index.html
@@ -7,7 +7,7 @@
         <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>
+                <p class="text-slate-700">--</p>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -37,7 +37,7 @@
 </div>
 
 <!-- TASKS AND USERS ACTIVITY SECTION -->
-<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / TASKS SECTION -->
     <div class="w-[74.5%]">
         <!-- TASK FILTERING BAR -->
@@ -441,10 +441,9 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
             <!-- 1ST ROW -->
             <div class="w-full flex flex-col py-3">
diff --git a/osinaweb/templates/main.html b/osinaweb/templates/main.html
index d2d3e6ab..8b7eea1a 100644
--- a/osinaweb/templates/main.html
+++ b/osinaweb/templates/main.html
@@ -14,7 +14,7 @@
 <body class="bg-gray-200">
     <div class="w-full flex">
         <!-- FIXED SIDE NAVBAR -->
-        <div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between" id="fixedSideHeader">
+        <div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader" id="fixedSideHeader">
             <!-- Menu Items -->
             <div class="w-full h-fit flex flex-col justify-center items-center px-5">
                 <div class="mb-14 w-full">
@@ -63,6 +63,22 @@
                                 <p class="text-white">Customers</p>
                             </div>
                         </a>
+
+                        <a href="{% url 'businesses' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <i class='fas fa-business-time' style="font-size: 16px;"></i>
+                                <p class="text-white">Businesses</p>
+                            </div>
+                        </a>
+
+                        <a href="{% url 'users' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <i class='fa fa-user' style="font-size: 16px;"></i>
+                                <p class="text-white">Users</p>
+                            </div>
+                        </a>
                     </div>
                 </div>
 
diff --git a/osinaweb/templates/project-details.html b/osinaweb/templates/project-details.html
index c08da322..e8fade55 100644
--- a/osinaweb/templates/project-details.html
+++ b/osinaweb/templates/project-details.html
@@ -61,8 +61,8 @@
 </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-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / PROJECT DETAIL SECTION -->
     <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
         {% if project.status == 'Completed' %}
         <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-2">
@@ -477,10 +477,12 @@
             </div>
         </div>
     </div>
+
+
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
 
             <!-- 1ST ROW -->
diff --git a/osinaweb/templates/projects.html b/osinaweb/templates/projects.html
index ddc264d9..4d6cb91c 100644
--- a/osinaweb/templates/projects.html
+++ b/osinaweb/templates/projects.html
@@ -54,7 +54,7 @@
 </div>
 
 <!-- PROJECTS AND USERS ACTIVITY SECTION -->
-<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / PROJECTS SECTION -->
     <div class="w-[74.5%]">
         <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
@@ -177,9 +177,9 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
 
             <!-- 1ST ROW -->
diff --git a/osinaweb/templates/showpoints-modal.html b/osinaweb/templates/showpoints-modal.html
index bd043c82..cbb31b20 100644
--- a/osinaweb/templates/showpoints-modal.html
+++ b/osinaweb/templates/showpoints-modal.html
@@ -24,9 +24,12 @@
                     <p class="text-slate-800">Fix the LaylNhar Header Lorem ipsum dolor sit amet consectetur,
                         adipisicing elit. Mollitia, dolorum. Earum error atÍb dol</p>
                 </div>
-                <div class="w-[150px]">
+                <div class="flex justify-end items-center gap-2">
+                    <button
+                        class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
                     <button
-                        class="w-full px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                        class="w-[120px] px-2 py-1 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
+                        On</button>
                 </div>
             </div>
 
@@ -34,9 +37,12 @@
                 <div class="w-[380px]">
                     <p class="text-slate-800">Fix the LaylNhar Header</p>
                 </div>
-                <div class="w-[150px]">
+                <div class="flex justify-end items-center gap-2">
                     <button
-                        class="w-full px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                        class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                    <button
+                        class="w-[120px] px-2 py-1 border border-yellow-500 rounded-md bg-yellow-500 text-white opacity-40"
+                        disabled>Working On</button>
                 </div>
             </div>
 
@@ -48,8 +54,8 @@
                         cumque ex amet! Sequi aliquid quos ullam, sapiente iste impedit explicabo?</p>
                 </div>
                 <div class="w-[150px]">
-                    <button
-                        class="w-full px-2 py-1 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40" value="Completed" disabled>Completed</button>
+                    <button class="w-full px-2 py-1 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40"
+                        value="Completed" disabled>Completed</button>
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/task-details.html b/osinaweb/templates/task-details.html
index 489ebfde..060da761 100644
--- a/osinaweb/templates/task-details.html
+++ b/osinaweb/templates/task-details.html
@@ -272,7 +272,7 @@
             </div>
 
             <!-- TASK DETAIL AND USERS ACTIVITY SECTION -->
-            <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+            <div class="w-full flex 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">
@@ -502,9 +502,9 @@
                     </div>
                 </div>
                 <!-- RIGHT SIDE / USERS ACTIVITY -->
-                <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+                <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
                         <div class="w-full flex flex-col py-3">
                             <div class="w-full flex justify-start gap-2 items-center">
diff --git a/osinaweb/templates/tasks.html b/osinaweb/templates/tasks.html
index 427dfb99..4d009c5f 100644
--- a/osinaweb/templates/tasks.html
+++ b/osinaweb/templates/tasks.html
@@ -52,9 +52,9 @@
     </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 -->
+<!-- TASKS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / TASKS SECTION -->
     <div class="w-[74.5%]">
         <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
             <h1 class="text-slate-800 text-[30px] font-semibold">My Tasks</h1>
@@ -287,9 +287,9 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+    <div class="w-[23%] bg-white h-fit 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 h-fit mt-2">
 
 
             <!-- 1ST ROW -->
diff --git a/osinaweb/templates/user-details.html b/osinaweb/templates/user-details.html
new file mode 100644
index 00000000..014f75bd
--- /dev/null
+++ b/osinaweb/templates/user-details.html
@@ -0,0 +1,250 @@
+{% 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>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- USER DETAIL AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+
+    <!-- LEFT SIDE / USER DETAIL SECTION -->
+    <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
+        <div class="w-full h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
+            <div class="flex justify-start items-center gap-2">
+                <div class="w-[55px] h-[55px] bg-slate-600 rounded-full">
+                    <img src='{% static "images/avatar.svg" %}' alt="user-image"
+                        class="w-full h-full object-cover rounded-full">
+                </div>
+                <div>
+                    <p class="text-gray-400 text-xl">Nataly</p>
+                </div>
+            </div>
+            <div class="flex justify-end items-center gap-3">
+                <button
+                    class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
+                    User</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
+                    User</button>
+            </div>
+        </div>
+        <div class="w-full flex flex-col gap-4 mt-5">
+            <div>
+                <p class="text-gray-500 text-xl">Username: <span
+                        class="text-slate-800 text-xl font-semibold">Nataly</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Password: <span class="text-slate-800 text-xl font-semibold">--</span>
+                </p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Group: <span class="text-slate-800 text-xl font-semibold">Group
+                        1</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">First Name: <span
+                        class="text-slate-800 text-xl font-semibold">Nataly</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Last Name: <span
+                        class="text-slate-800 text-xl font-semibold">Nataly</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Email: <span
+                        class="text-slate-800 text-xl font-semibold">nataly.aw@ositcom.net</span></p>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white h-fit 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-fit mt-2">
+
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2NT ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3RD ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </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>
+
+<!-- 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/users.html b/osinaweb/templates/users.html
new file mode 100644
index 00000000..09ff19ce
--- /dev/null
+++ b/osinaweb/templates/users.html
@@ -0,0 +1,266 @@
+{% 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>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- USERS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / USERS SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">Users</h1>
+
+            <!-- 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">
+                    <div class="relative h-fit w-fit flex items-center">
+                        <input type="text" placeholder="Enter Username"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <a href="{% url 'adduser' %}">
+                        <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">Add
+                            User</button>
+                    </a>
+                </div>
+            </div>
+
+            <div class="mt-5 w-full h-fit">
+                <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-[40%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Username</p>
+                        </div>
+                        <div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p>Group</p>
+                        </div>
+                        <div class="w-[20%] h-full flex justify-center items-center">
+                            Actions
+                        </div>
+                    </div>
+
+                    <!-- TABLE BODY -->
+                    <div class="w-full">
+                        <!-- 1st row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Nataly.aw</p>
+                            </div>
+                            <div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Group 1</p>
+                            </div>
+                            <div class="w-[20%] h-full flex justify-center items-center gap-3">
+                                <a href="{% url 'userdetails' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <div class="text-[15px] text-blue-500 cursor-pointer">
+                                    <i class="fa fa-edit"></i>
+                                </div>
+                                <div class="text-[15px] text-red-500 cursor-pointer">
+                                    <i class="fa fa-trash"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white h-fit 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-fit mt-2">
+
+
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2NT ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3RD ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+               
+        </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