From 6a291f36b2a3612dda985dadb8aeb01c9683fac3 Mon Sep 17 00:00:00 2001
From: nataly <nataly.abi.wajeh0@gmail.com>
Date: Tue, 16 Jan 2024 16:50:24 +0200
Subject: [PATCH] new changes.

---
 osinaweb/db.sqlite3                           | Bin 638976 -> 638976 bytes
 osinaweb/input.css                            |   8 +
 osinaweb/static/dist/output.css               |  79 ++-
 osinaweb/static/js/daily-reports.js           |  13 +
 .../templates/add_pages/add-business.html     |   4 +-
 .../templates/add_pages/add-customer.html     |   4 +-
 .../templates/add_pages/add-daily-report.html |   4 +-
 osinaweb/templates/add_pages/add-staff.html   |   8 +-
 .../templates/add_pages/create-project.html   |  10 +-
 osinaweb/templates/add_pages/create-task.html |   6 +-
 .../details_pages/business-details.html       | 110 +--
 .../details_pages/customer-details.html       | 247 ++++---
 .../details_pages/project-details.html        |   8 +-
 .../details_pages/staff-details.html          | 112 +--
 .../templates/details_pages/task-details.html | 663 +++++++++---------
 osinaweb/templates/index.html                 |  27 +-
 .../listing_pages/business-types.html         |  27 +-
 .../templates/listing_pages/businesses.html   |  27 +-
 .../templates/listing_pages/customers.html    |  28 +-
 .../listing_pages/daily-reports.html          |  53 +-
 .../listing_pages/project-types.html          |  28 +-
 .../templates/listing_pages/projects.html     |  27 +-
 .../templates/listing_pages/references.html   |  27 +-
 .../listing_pages/staff-positions.html        |  28 +-
 osinaweb/templates/listing_pages/staffs.html  |  27 +-
 osinaweb/templates/listing_pages/tags.html    |  27 +-
 osinaweb/templates/listing_pages/tasks.html   |  27 +-
 osinaweb/templates/main.html                  |   7 +-
 28 files changed, 914 insertions(+), 722 deletions(-)
 create mode 100644 osinaweb/static/js/daily-reports.js

diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index 936c431248ca8ba5b477cf48d75899f352ffaa17..56d2ec67ff3c97b302ee45266f14d0a43ee06461 100644
GIT binary patch
delta 1035
zcmaizOH9;I6oz}J)7~j9C2E3?akP^G5tNzR*Ypug9LXqXK*jiu(RSJ*DokYn5s08f
z*(pYoCbH0#OM;nbH)vww&W&4LxKNC)2#GA*_~;B6ADDO_XLHXv-}&#kcWkU~Y^-iF
z3Z`#wYzEVh&M=Jt7P}iS0WfmsLvj+>#evjKx4N0^z~EtKx~ipe7ki5~*w^%0vZJ`}
zflAib;B7!i=PvZ5&*t3TAzKkUZOIfn2YD9_D5|Y?yZLO%$=h+6;>M>Q`cn@<S1aBO
z=RCLou7}`UF~c2!iA{J02uP3`5#J~xju&(p>5`fhMNQ+SZ0Xo*8lpB##J>PP{w4JO
zBW|&b2WP-+Wi89GQMQ_0#WHL|an(#yrRUCvH%&Cm<9@?@_zjO&)2BSh5pjmeF}3s}
z{hXepPX*w5dX%?GEFPsY1;YxKQLv1J<K&E-@v|B}&GDkn%R17Ml7duOOj#rrTM7yM
z3s%B5t+b=93=oropve;Ab4v`X3@DKjj%_;{FQCyS$;%K)mzAWztD2^y%w<T45X^*`
zb_@&s2|=ok_@sv9w32QzNK7eLRT5ENOQr-(n2u#S&R@||ph-$fs;H?_>dZ3F3TVOp
zH&4{%bW##E9!dV)?ZnBNs^2=LXoBj0J3x^4LCzx<h!@1Cs&`e3-m3*-i@&%)46)#n
zm;X)_7y<_%Hd403{`_~MdM92(obcdIa!-gj5j3WP*j|4Zl2|GpqmJf#&v*57a{GI9
zu6!52R3Jg;RqjCB#EmQ&Z0O&}My{O0GojkxWkg29p<31ovP}WBZJ5H=#sL<`V&xpa
zlEzl1yB6*B*FBCzf$tV0pDVa<Y=pwr*8waTR-x36_Iw}LobPro*nPGY^T(e>u4Zr(
z&OC<HY>1kHFX0RL6g~;qb77LesZa&<pFpbp>}nWUgRyTbXPJBSV8szij;slszQV27
zHfM>p@wUwWev|iLn0nOO)sOVkhx+$+w0E@(DE$ZBi~9}@ntf7tuiSsEU>s|8Tl#W^
X(}ms0%p8~VKP9gGS-yOkdb#@t*LfjS

delta 401
zcmV;C0dD?)fG2=}Cy*Nfp^+Rz0im&A3@rf$vu!PR0ReiG<t~r`U$b^Ej&Kx026q4l
zRSd2VNDV>`j|*WA*$Wr58lX4^lTaWh1SA7Z0hc{_2_S=;rnj4>0clACLI?ww2k-%f
zvq2zt2Lv7iK>?RMdI=hbA@~8eA@~C0=L232DwhYa0lWb!vk|an4VQ3_1O$gJ?gO_j
z?gZ8`0}u?9mj@sPA+tdsYz()QECpL64=^}7G&wpmGcGnaF*h_hxBgHC2A=_8mj&<z
z!~yh|(C`H&m*DUP2DkR`1$YhtgO_jr1#=7r0000T5(NMN02dOs?*9cAKm#KMhL;CG
z21m0&AUFkwhD8R4hD8UrhD8W|Y6Cw4QkMs?2!FFdAj|;+f*W$T7_|r+0k?3o2=fXc
zBNZnbcL@L$CjkHe003ljVPsBkbRa`-ZE$R5bY)~3w}ZY2fk6Xd2e!2b3A_Ra%Ll{<
vy$80lK_Kh|x3&ifPG}GY2{ix?-VMAAnhSUeRtYt;K_DOr0fM(Rc?ru#7pZ-X

diff --git a/osinaweb/input.css b/osinaweb/input.css
index cb4514ca..07af5fc2 100644
--- a/osinaweb/input.css
+++ b/osinaweb/input.css
@@ -143,4 +143,12 @@
     .swiper-slide {
         width: 90% !important;
     }
+}
+
+
+
+@media screen and (max-width: 650px) {
+    #notesContainer {
+        display: block;
+    }
 }
\ No newline at end of file
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 97a8ac35..b26caf01 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -806,8 +806,8 @@ video {
   margin-top: 1.5rem;
 }
 
-.mt-\[-63px\] {
-  margin-top: -63px;
+.mt-\[-50px\] {
+  margin-top: -50px;
 }
 
 .mt-\[5\%\] {
@@ -951,18 +951,10 @@ video {
   width: 13px;
 }
 
-.w-\[15\%\] {
-  width: 15%;
-}
-
 .w-\[150px\] {
   width: 150px;
 }
 
-.w-\[16\.33\%\] {
-  width: 16.33%;
-}
-
 .w-\[160px\] {
   width: 160px;
 }
@@ -975,10 +967,6 @@ video {
   width: 220px;
 }
 
-.w-\[23\%\] {
-  width: 23%;
-}
-
 .w-\[25\%\] {
   width: 25%;
 }
@@ -1003,10 +991,6 @@ video {
   width: 30px;
 }
 
-.w-\[35\%\] {
-  width: 35%;
-}
-
 .w-\[35px\] {
   width: 35px;
 }
@@ -1039,8 +1023,8 @@ video {
   width: 60px;
 }
 
-.w-\[74\.5\%\] {
-  width: 74.5%;
+.w-\[70px\] {
+  width: 70px;
 }
 
 .w-\[80\%\] {
@@ -1233,10 +1217,6 @@ video {
   gap: 1.25rem;
 }
 
-.gap-\[2\.5\%\] {
-  gap: 2.5%;
-}
-
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -2264,6 +2244,12 @@ video {
   }
 }
 
+@media screen and (max-width: 650px) {
+  #notesContainer {
+    display: block;
+  }
+}
+
 .hover\:bg-blue-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -2319,10 +2305,34 @@ video {
 }
 
 @media (min-width: 650px) {
+  .s\:mt-\[-63px\] {
+    margin-top: -63px;
+  }
+
+  .s\:flex {
+    display: flex;
+  }
+
+  .s\:hidden {
+    display: none;
+  }
+
+  .s\:h-\[100px\] {
+    height: 100px;
+  }
+
   .s\:h-\[50px\] {
     height: 50px;
   }
 
+  .s\:h-\[55px\] {
+    height: 55px;
+  }
+
+  .s\:w-\[100px\] {
+    width: 100px;
+  }
+
   .s\:w-\[300px\] {
     width: 300px;
   }
@@ -2357,6 +2367,11 @@ video {
     padding-right: 2.25rem;
   }
 
+  .s\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .s\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
@@ -2437,21 +2452,9 @@ video {
     position: fixed;
   }
 
-  .xlg1\:block {
-    display: block;
-  }
-
-  .xlg1\:hidden {
-    display: none;
-  }
-
   .xlg1\:w-\[300px\] {
     width: 300px;
   }
-
-  .xlg1\:w-\[74\.5\%\] {
-    width: 74.5%;
-  }
 }
 
 @media (min-width: 1300px) {
@@ -2481,6 +2484,10 @@ video {
     display: none;
   }
 
+  .xxlg1\:w-\[74\.5\%\] {
+    width: 74.5%;
+  }
+
   .xxlg1\:w-\[75\%\] {
     width: 75%;
   }
diff --git a/osinaweb/static/js/daily-reports.js b/osinaweb/static/js/daily-reports.js
new file mode 100644
index 00000000..2617639a
--- /dev/null
+++ b/osinaweb/static/js/daily-reports.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", function () {
+    var showReportButtons = document.querySelectorAll(".showReportButton");
+
+    // Iterate through each button and attach the click event
+    showReportButtons.forEach(function (button) {
+        button.addEventListener("click", function () {
+            // Find the related reportContainer based on the button's parent
+            var reportContainer = button.closest(".daily-report").querySelector(".reportContainer");
+
+            reportContainer.classList.toggle("hidden");
+        });
+    });
+});
\ No newline at end of file
diff --git a/osinaweb/templates/add_pages/add-business.html b/osinaweb/templates/add_pages/add-business.html
index 6e48f5c3..b91fc51d 100644
--- a/osinaweb/templates/add_pages/add-business.html
+++ b/osinaweb/templates/add_pages/add-business.html
@@ -2,7 +2,7 @@
 {%load static%}
 {% block content %}
 
-<div class="w-full px-10 mb-4">
+<div class="w-full px-5 s:px-9 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 Business
@@ -96,7 +96,7 @@
 
             <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
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-base s:text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
                     Business</button>
             </div>
         </form>
diff --git a/osinaweb/templates/add_pages/add-customer.html b/osinaweb/templates/add_pages/add-customer.html
index f266ef92..91ee5fb9 100644
--- a/osinaweb/templates/add_pages/add-customer.html
+++ b/osinaweb/templates/add_pages/add-customer.html
@@ -2,7 +2,7 @@
 {%load static%}
 {% block content %}
 
-<div class="w-full px-10 mb-4">
+<div class="w-full px-5 s:px-9 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 Customer
@@ -99,7 +99,7 @@
 
                 <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
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-base s:text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
                         Customer</button>
                 </div>
             </div>
diff --git a/osinaweb/templates/add_pages/add-daily-report.html b/osinaweb/templates/add_pages/add-daily-report.html
index 0ce654cd..40366deb 100644
--- a/osinaweb/templates/add_pages/add-daily-report.html
+++ b/osinaweb/templates/add_pages/add-daily-report.html
@@ -2,7 +2,7 @@
 {%load static%}
 {% block content %}
 
-<div class="w-full px-10 mb-4">
+<div class="w-full px-5 s:px-9 mb-4">
     <div class="w-full bg-white h-fit shadow-md rounded-md p-5">
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
             Add Daily Report
@@ -18,7 +18,7 @@
 
             <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</button>
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-base s:text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add</button>
             </div>
         </form>
     </div>
diff --git a/osinaweb/templates/add_pages/add-staff.html b/osinaweb/templates/add_pages/add-staff.html
index 54ff4d32..1e1b347d 100644
--- a/osinaweb/templates/add_pages/add-staff.html
+++ b/osinaweb/templates/add_pages/add-staff.html
@@ -3,7 +3,7 @@
 {% block content %}
 
 
-<div class="w-full px-10 mb-4">
+<div class="w-full px-5 s:px-9 mb-4">
     <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
         <div class="flex justify-center items-center gap-4">
             <h1 class="text-3xl text-slate-800 text-center font-semibold">
@@ -17,7 +17,7 @@
         <form method="POST" action="{% url 'save_staff' %}" enctype="multipart/form-data">
             {% csrf_token %}
             <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
-                <div class="w-[100px] h-[100px] rounded-full border border-gray-200" id="image-container">
+                <div class="w-[70px] s:w-[100px] h-[70px] s:h-[100px] rounded-full border border-gray-200" id="image-container">
                     <img src="{% static 'images/default-user.png' %}" alt="" srcset="" id=""
                         class="rounded-full w-full h-full">
                 </div>
@@ -128,7 +128,7 @@
 
                 <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
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-base s:text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
                         Staff</button>
                 </div>
             </div>
@@ -136,6 +136,8 @@
     </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">
diff --git a/osinaweb/templates/add_pages/create-project.html b/osinaweb/templates/add_pages/create-project.html
index 867f88da..7fd15cac 100644
--- a/osinaweb/templates/add_pages/create-project.html
+++ b/osinaweb/templates/add_pages/create-project.html
@@ -2,7 +2,7 @@
 {%load static%}
 {% block content %}
 
-<div class="w-full px-10 mb-4">
+<div class="w-full px-5 s:px-9 mb-4">
     <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
             Create Project
@@ -72,7 +72,7 @@
                         <input name="requirements" type="text" placeholder="Requirement"
                             class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none">
                         <button
-                            class="w-full h-[55px] rounded-md bg-gray-300 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2"
+                            class="w-full h-[40px] s:h-[55px] rounded-md bg-gray-300 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2"
                             id="removeReqButton" type="button">
                             <i class="fa fa-minus"></i>
                         </button>
@@ -80,7 +80,7 @@
                 </div>
 
                 <button
-                    class="w-full h-[55px] rounded-md bg-gray-400 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2 mt-2"
+                    class="w-full h-[40px] s:h-[55px] rounded-md bg-gray-400 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2 mt-2"
                     id="addReqButton" type="button">
                     <i class="fa fa-plus"></i>
                 </button>
@@ -120,13 +120,15 @@
             </div>
             <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
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-base s:text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
                     Project</button>
             </div>
         </form>
     </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">
diff --git a/osinaweb/templates/add_pages/create-task.html b/osinaweb/templates/add_pages/create-task.html
index a43d88e2..f77f8e31 100644
--- a/osinaweb/templates/add_pages/create-task.html
+++ b/osinaweb/templates/add_pages/create-task.html
@@ -4,7 +4,7 @@
 
 <!-- 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 px-5 s:px-9 mb-4">
     <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
             Create Task
@@ -99,13 +99,15 @@
 
             <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
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-base s:text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
                     Task</button>
             </div>
         </div>
     </div>
 </div>
 </div>
+
+
 <!-- POPUP MODAL -->
 <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
     <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
diff --git a/osinaweb/templates/details_pages/business-details.html b/osinaweb/templates/details_pages/business-details.html
index 5a16f490..93b33d62 100644
--- a/osinaweb/templates/details_pages/business-details.html
+++ b/osinaweb/templates/details_pages/business-details.html
@@ -2,79 +2,99 @@
 {%load static%}
 {% block title %}My Projects{% endblock %}
 {% block content %}
+
+<!-- USERS ACTIVITIES ON MOBILE -->
+<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
+    data-modal-url="{% url 'getupdatedactivities' %}">
+    <img src="{% static 'images/usersactivity.png' %}" alt="Users">
+</div>
+
 <!-- 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 class="w-full px-5 s:px-9 pb-5">
+    <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
+
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
+                    </div>
+                </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="flex justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s: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"
+                    class="w-full s: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">
+                    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 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>
-
-            <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 class="w-full h-fit mt-5 hidden" id="notesContainer">
+
+            <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
+                {% for note in notes %}
+                <div class="h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                    <p class="text-base text-slate-800">{{note.text}}</p>
+                </div>
+                {% endfor %}
+            </div>
+
+            <div class="w-full black lg:hidden">
+                <div class="swiper-container mt-5">
+                    <div class="swiper-wrapper">
+                        {% for note in notes %}
+                        <div class="swiper-slide">
+                            <div class="w-full h-[150px] p-3 flex justify-start items-start"
+                                style="background-color: {{note.color}}">
+                                {{note.text}}
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
 <!-- BUSINESS DETAIL AND USERS ACTIVITY SECTION -->
-<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+<div class="w-full flex justify-between gap-5 px-5 s:px-9 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 xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
         <div class="w-full bg-slate-700 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">
+            <div class="w-[70px] s:w-[100px] h-[70px] s:h-[100px] rounded-full mt-[-50px] s:mt-[-63px] border border-gray-300">
                 <img src="{{business.logo.url}}" alt="" class="w-full h-full object-cover rounded-full">
             </div>
-            <h1 class="text-3xl text-white font-semibold">{{business.name}}</h1>
+            <h1 class="text-xl s:text-3xl text-white font-semibold">{{business.name}}</h1>
         </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">
-            <div class="flex justify-end items-center gap-3">
+        <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
+            <div class="w-full s:w-fit flex flex-col s:flex-row 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
+                    class="w-full s: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
                     Business</button>
-                <a href="{% url 'editbusiness' business.business_id %}">
+                <a href="{% url 'editbusiness' business.business_id %}" class="w-full s:w-fit">
                     <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
+                        class="w-full s: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
                         Business</button>
                 </a>
             </div>
         </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">{{business.name}}</span>
@@ -126,11 +146,11 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="hidden xxlg1:block w-[25%] bg-white h-[800px] overflow-y-auto overflow-hidden 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" id="activitiesContainer">
 
-                {% include 'recent-activities.html' %}
+            {% include 'recent-activities.html' %}
 
         </div>
     </div>
diff --git a/osinaweb/templates/details_pages/customer-details.html b/osinaweb/templates/details_pages/customer-details.html
index 9f199622..a666b655 100644
--- a/osinaweb/templates/details_pages/customer-details.html
+++ b/osinaweb/templates/details_pages/customer-details.html
@@ -2,91 +2,113 @@
 {%load static%}
 {% block title %}My Projects{% endblock %}
 {% block content %}
+
+<!-- USERS ACTIVITIES ON MOBILE -->
+<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
+    data-modal-url="{% url 'getupdatedactivities' %}">
+    <img src="{% static 'images/usersactivity.png' %}" alt="Users">
+</div>
+
 <!-- 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 class="w-full px-5 s:px-9 pb-5">
+    <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
+
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
+                    </div>
+                </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="flex justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s: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"
+                    class="w-full s: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">
+                    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 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>
-
-            <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-full h-fit mt-5 hidden" id="notesContainer">
 
-            <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 class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
+                {% for note in notes %}
+                <div class="h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                    <p class="text-base text-slate-800">{{note.text}}</p>
+                </div>
+                {% endfor %}
             </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 class="w-full black lg:hidden">
+                <div class="swiper-container mt-5">
+                    <div class="swiper-wrapper">
+                        {% for note in notes %}
+                        <div class="swiper-slide">
+                            <div class="w-full h-[150px] p-3 flex justify-start items-start"
+                                style="background-color: {{note.color}}">
+                                {{note.text}}
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
+
 <!-- CUSTOMER DETAIL AND USERS ACTIVITY SECTION -->
-<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / CUSTOMER DETAIL SECTION -->
-    <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="w-full xxlg1:w-[75%] 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">
+        <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
             <h1 class="text-3xl text-white font-semibold">{{customer.first_name}} {{customer.last_name}}</h1>
             <p class="text-white text-base">{{customer.customer_id}}</p>
         </div>
         {% endif %}
         {% if customer.status == 'Suspended' %}
-        <div class="w-full bg-red-500 rounded-t-md flex flex-col justify-center items-center py-2">
+        <div class="w-full bg-red-500 rounded-t-md flex flex-col justify-center items-center py-3">
             <h1 class="text-3xl text-white font-semibold">{{customer.first_name}} {{customer.last_name}}</h1>
             <p class="text-white text-base">{{customer.customer_id}}</p>
         </div>
         {% endif %}
         {% if customer.status == 'Terminated' %}
-        <div class="w-full bg-gray-500 rounded-t-md flex flex-col justify-center items-center py-2">
+        <div class="w-full bg-gray-500 rounded-t-md flex flex-col justify-center items-center py-3">
             <h1 class="text-3xl text-white font-semibold">{{customer.first_name}} {{customer.last_name}}</h1>
             <p class="text-white text-base">{{customer.customer_id}}</p>
         </div>
         {% endif %}
-        <div class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
-            <div class="flex justify-end items-center gap-3">
+
+        <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-3">
+            <div class="w-full s:w-fit flex flex-col s:flex-row 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
+                    class="w-full s: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
                     Customer</button>
-                <a href="{% url 'editcustomer' customer.customer_id %}">
+                <a href="{% url 'editcustomer' customer.customer_id %}" class="w-full s:w-fit">
                     <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
+                        class="w-full s: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
                         Customer</button>
                 </a>
             </div>
         </div>
+
         <div class="w-full flex flex-col gap-4 mt-5">
             <div>
                 <p class="text-gray-500 text-xl">First Name: <span
@@ -102,13 +124,13 @@
                 <p class="text-gray-500 text-xl">Email: <span
                         class="text-slate-800 text-xl font-semibold">{{customer.user.email}}</span></p>
             </div>
-           {% if customer.personal_website %}
+            {% if customer.personal_website %}
             <div>
                 <p class="text-gray-500 text-xl">Personal Website: <span
                         class="text-slate-800 text-xl font-semibold">{{customer.personal_website}}</span></p>
             </div>
             {% endif %}
-         
+
 
             {% if customer.status == 'Active' %}
             <div>
@@ -141,74 +163,101 @@
 
 
         <!-- BUSINESS -->
-        <div class="mt-4">
-            <p class="text-gray-500 text-xl">Business:</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-[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>
+        <div class="mt-5 relative">
+            <div
+                class=" bg-slate-700 border border-slate-700 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                <div class="px-3">
+                    <p class="text-white uppercase font-bold">Businesses</p>
+                </div>
+
+                <a href="{% url 'addbusiness' %}" class="h-full">
+                    <button
+                        class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </a>
+            </div>
+
+            <div class="overflow-x-auto border border-gray-300 rounded-b-md">
+                <table class="min-w-full divide-y">
+                    <!-- TABLE HEADER -->
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col"
+                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                Name
+                            </th>
+                            <th scope="col"
+                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                Business Type
+                            </th>
+                            <th scope="col"
+                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                Financial Number
+                            </th>
+                            <th scope="col"
+                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
 
-                    <!-- BODY -->
-                    <div class="w-full border-t border-gray-300">
+                    <!-- TABLE BODY -->
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <!-- 1st row -->
                         {% if customer.business %}
-                        <!-- 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">{{customer.business.name}}</p>
-                            </div>
-                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                <p class="text-sm">{{customer.business.business_type}}</p>
-                            </div>
-                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
-                                <p class="text-sm">{{customer.business.financial_number}}</p>
-                            </div>
-                            <div class="w-[15%] h-full flex justify-center items-center gap-3">
-                                <a href="{% url 'businessdetails' customer.business.business_id %}">
-                                    <div class="text-[18px] text-blue-500 cursor-pointer">
-                                        <i class="fa fa-eye"></i>
-                                    </div>
-                                </a>
-                                <a href="{% url 'editbusiness' %}">
-                                    <div class="text-[18px] text-blue-500 cursor-pointer">
-                                        <i class="fa fa-edit"></i>
+                        <tr>
+                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                <p class="text-slate-800">{{customer.business.name}}</p>
+                            </td>
+
+                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                <p class="text-slate-800">{{customer.business.business_type}}</p>
+                            </td>
+
+                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                <p class="text-slate-800">{{customer.business.financial_number}}</p>
+                            </td>
+
+                            <td class="px-6 py-4 text-center text-sm">
+                                <div class="flex justify-center items-center gap-3">
+                                    <a href="{% url 'businessdetails' customer.business.business_id %}">
+                                        <div class="text-[15px] text-blue-500 cursor-pointer">
+                                            <i class="fa fa-edit"></i>
+                                        </div>
+                                    </a>
+
+                                    <a href="{% url 'editbusiness' %}">
+                                        <div class="text-[15px] text-blue-500 cursor-pointer">
+                                            <i class="fa fa-edit"></i>
+                                        </div>
+                                    </a>
+
+                                    <div class="text-[15px] text-red-500 cursor-pointer">
+                                        <i class="fa fa-trash"></i>
                                     </div>
-                                </a>
-                                <div class="text-[18px] text-red-500 cursor-pointer">
-                                    <i class="fa fa-trash"></i>
                                 </div>
-                            </div>
-                        </div>
+                            </td>
+                        </tr>
+                        {% else %}
+                        <tr>
+                            <td colspan="3" class="px-6 py-4 text-center text-sm text-slate-800">
+                                No Business For {{customer.user.first_name}} {{customer.user.last_name}}
+                            </td>
+                        </tr>
                         {% endif %}
-                    </div>
-                    <div class="w-full">
-                        <a href="{% url 'addbusiness' %}">
-                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100">ADD BUSINESS</button>
-                        </a>
-                    </div>
-                </div>
+                    </tbody>
+                </table>
             </div>
         </div>
-
     </div>
+
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="hidden xxlg1:block w-[25%] bg-white h-[800px] overflow-y-auto overflow-hidden 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" id="activitiesContainer">
 
-                {% include 'recent-activities.html' %}
+            {% include 'recent-activities.html' %}
 
         </div>
     </div>
diff --git a/osinaweb/templates/details_pages/project-details.html b/osinaweb/templates/details_pages/project-details.html
index 3eb044cb..aa4675d8 100644
--- a/osinaweb/templates/details_pages/project-details.html
+++ b/osinaweb/templates/details_pages/project-details.html
@@ -2,8 +2,8 @@
 {%load static%}
 {% block content %}
 
-
-<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
+<!-- USERS ACTIVITIES ON MOBILE -->
+<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
     data-modal-url="{% url 'getupdatedactivities' %}">
     <img src="{% static 'images/usersactivity.png' %}" alt="Users">
 </div>
@@ -80,7 +80,7 @@
 <!-- PROJECT DETAIL AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / PROJECT DETAIL SECTION -->
-    <div class="w-full xlg1:w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="w-full xxlg1: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">
             <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
@@ -453,7 +453,7 @@
 
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="hidden xlg1:block w-[25%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="hidden xxlg1:block w-[25%] 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" id="activitiesContainer">
 
diff --git a/osinaweb/templates/details_pages/staff-details.html b/osinaweb/templates/details_pages/staff-details.html
index 3247cee8..8f1f3bc6 100644
--- a/osinaweb/templates/details_pages/staff-details.html
+++ b/osinaweb/templates/details_pages/staff-details.html
@@ -2,76 +2,95 @@
 {%load static%}
 {% block title %}My Projects{% endblock %}
 {% block content %}
+
+<!-- USERS ACTIVITIES ON MOBILE -->
+<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
+    data-modal-url="{% url 'getupdatedactivities' %}">
+    <img src="{% static 'images/usersactivity.png' %}" alt="Users">
+</div>
+
 <!-- 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 class="w-full px-5 s:px-9 pb-5">
+    <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
+
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
+                    </div>
+                </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="flex justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s: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"
+                    class="w-full s: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">
+                    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 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>
-
-            <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 class="w-full h-fit mt-5 hidden" id="notesContainer">
+
+            <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
+                {% for note in notes %}
+                <div class="h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                    <p class="text-base text-slate-800">{{note.text}}</p>
+                </div>
+                {% endfor %}
+            </div>
+
+            <div class="w-full black lg:hidden">
+                <div class="swiper-container mt-5">
+                    <div class="swiper-wrapper">
+                        {% for note in notes %}
+                        <div class="swiper-slide">
+                            <div class="w-full h-[150px] p-3 flex justify-start items-start"
+                                style="background-color: {{note.color}}">
+                                {{note.text}}
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
 <!-- USER DETAIL AND USERS ACTIVITY SECTION -->
-<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+<div class="w-full flex justify-between gap-5 px-5 s:px-9 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 xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
         <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">
+            <div class="w-[70px] s:w-[100px] h-[70px] s:h-[100px] rounded-full mt-[-50px] border border-gray-300">
                 <img src="{{staff.image.url}}" alt="" class="w-full h-full object-cover rounded-full">
             </div>
             <h1 class="text-3xl text-white font-semibold">{{staff.first_name}} {{staff.last_name}}</h1>
         </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">
-            <div class="flex justify-end items-center gap-3">
+        <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
+            <div class="w-full s:w-fit flex flex-col s:flex-row 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
+                    class="w-full s: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>
-                <a href="{% url 'editstaff' staff.staff_id %}">
+                <a href="{% url 'editstaff' staff.staff_id %}" class="w-full s:w-fit">
                     <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
+                        class="w-full s: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>
                 </a>
             </div>
@@ -100,10 +119,11 @@
                 <p class="text-gray-500 text-xl">Mobile Number: <span
                         class="text-slate-800 text-xl font-semibold">{{staff.mobile_number}}</span></p>
             </div>
-           
+
 
             <div>
-                <p class="text-gray-500 text-xl">Position: <span class="text-slate-800 text-xl font-semibold">{{staff.staff_position}}</span></p>
+                <p class="text-gray-500 text-xl">Position: <span
+                        class="text-slate-800 text-xl font-semibold">{{staff.staff_position}}</span></p>
             </div>
 
             <div>
@@ -118,11 +138,11 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="hidden xxlg1:block w-[25%] bg-white h-[800px] overflow-y-auto overflow-hidden 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" id="activitiesContainer">
 
-                {% include 'recent-activities.html' %}
+            {% include 'recent-activities.html' %}
 
         </div>
     </div>
diff --git a/osinaweb/templates/details_pages/task-details.html b/osinaweb/templates/details_pages/task-details.html
index 0a57e13f..eef4d356 100644
--- a/osinaweb/templates/details_pages/task-details.html
+++ b/osinaweb/templates/details_pages/task-details.html
@@ -1,385 +1,390 @@
 {% extends "main.html" %}
 {%load static%}
 {% block content %}
-            <!-- NOTES SECTION -->
-            <div class="w-full h-fit flex justify-between items-center px-10 pb-5">
-                <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
-                    <div class="w-full flex justify-between items-center">
-                        <div>
-                            <p class="text-base text-gray-500">Recent Note:</p>
-                            <p class="text-slate-700">Send an Email to Salim.</p>
-                        </div>
-                        <div class="flex justify-end items-center gap-4">
-                            <button
-                                class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
-                                id="showNotesButton">Show
-                                Notes</button>
-                            <button
-                                class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                                id="addNoteButton">
-                                <i class="fa fa-plus"></i>
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-                    <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
-                        id="notesContainer">
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                            <p class="text-base text-slate-800">Send an Email to Salim.</p>
-                        </div>
 
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                            <p class="text-base text-slate-80">Contact the client.</p>
-                        </div>
+<!-- USERS ACTIVITIES ON MOBILE -->
+<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
+    data-modal-url="{% url 'getupdatedactivities' %}">
+    <img src="{% static 'images/usersactivity.png' %}" alt="Users">
+</div>
+
+<!-- NOTES SECTION -->
+<div class="w-full px-5 s:px-9 pb-5">
+    <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
-                        <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>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
+                    </div>
+                </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+                <button
+                    class="w-full s: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 addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </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>
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
-                        <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-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
+                {% for note in notes %}
+                <div class="h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                    <p class="text-base text-slate-800">{{note.text}}</p>
+                </div>
+                {% endfor %}
+            </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 class="w-full black lg:hidden">
+                <div class="swiper-container mt-5">
+                    <div class="swiper-wrapper">
+                        {% for note in notes %}
+                        <div class="swiper-slide">
+                            <div class="w-full h-[150px] p-3 flex justify-start items-start"
+                                style="background-color: {{note.color}}">
+                                {{note.text}}
+                            </div>
                         </div>
+                        {% endfor %}
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
+</div>
 
-            <!-- TASK DETAIL AND USERS ACTIVITY SECTION -->
-            <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">
-                    {% if task.status == 'Open' %}
-                    <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
-                        <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
-                    </div>
-                    {% endif %}
-                    {% if task.status == 'Working On' %}
-                    <div class="w-full bg-yellow-400 rounded-t-md flex flex-col justify-center items-center py-3">
-                        <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
-                    </div>
-                    {% endif %}
-                    {% if task.status == 'Closed' %}
-                    <div class="w-full  bg-red-500 rounded-t-md flex flex-col justify-center items-center py-3">
-                        <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
-                    </div>
-                    {% endif %}
-                    <div class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
-                        <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
-                                Task</button>
-                        <a href="{% url 'edittask' task.task_id %}">
-                            <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
-                                Task</button>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="w-full flex flex-col gap-4 mt-5">
-                        <div>
-                            <p class="text-gray-500 text-xl">Project: <span
-                                    class="text-slate-800 text-xl font-semibold">{{task.project.name}}</span></p>
-                        </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Start Date: <span
-                                    class="text-slate-800 text-xl font-semibold">{{task.formatted_start_date}}</span></p>
-                        </div>
+<!-- TASK DETAIL AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
+    <!-- LEFT SIDE / TASK DETAIL SECTION -->
+    <div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
+        {% if task.status == 'Open' %}
+        <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
+            <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
+        </div>
+        {% endif %}
+        {% if task.status == 'Working On' %}
+        <div class="w-full bg-yellow-400 rounded-t-md flex flex-col justify-center items-center py-3">
+            <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
+        </div>
+        {% endif %}
+        {% if task.status == 'Closed' %}
+        <div class="w-full  bg-red-500 rounded-t-md flex flex-col justify-center items-center py-3">
+            <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
+        </div>
+        {% endif %}
+        <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
+            <div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-3">
+                <button
+                    class="w-full s: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
+                    Task</button>
+                <a href="{% url 'edittask' task.task_id %}" class="w-full s:w-fit">
+                    <button
+                        class="w-full s: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
+                        Task</button>
+                </a>
+            </div>
+        </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">End Date: <span
-                                    class="text-slate-800 text-xl font-semibold">{{task.formatted_end_date}}</span></p>
-                        </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Epic: <span
-                                    class="text-slate-800 text-xl font-semibold">{{task.epic.title}}</span></p>
-                        </div>
+        <div class="w-full flex flex-col gap-4 mt-5">
+            <div>
+                <p class="text-gray-500 text-xl">Project: <span
+                        class="text-slate-800 text-xl font-semibold">{{task.project.name}}</span></p>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Assigned To: <span
-                                    class="text-slate-800 text-xl font-semibold">{{task.assigned_to.first_name}} {{task.assigned_to.last_name}}</span></p>
-                        </div>
+            <div>
+                <p class="text-gray-500 text-xl">Start Date: <span
+                        class="text-slate-800 text-xl font-semibold">{{task.formatted_start_date}}</span></p>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Extra: <span
-                                    class="text-slate-800 text-xl font-semibold">{{task.extra}}</span></p>
-                        </div>
+            <div>
+                <p class="text-gray-500 text-xl">End Date: <span
+                        class="text-slate-800 text-xl font-semibold">{{task.formatted_end_date}}</span></p>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Status: 
-                                {% if task.status == 'Closed' %}
-                                <span class="text-red-500 text-xl font-semibold">{{task.status}}</span>
-                                {% endif %}
-                                {% if task.status == 'Open' %}
-                                <span class="text-green-700 text-xl font-semibold">{{task.status}}</span>
-                                {% endif %}
-                                {% if project.status == 'Working on' %}
-                                <span class="text-yellow-400 text-xl font-semibold">{{task.status}}</span>
-                                {% endif %}
-                                </p>
-                        </div>
+            <div>
+                <p class="text-gray-500 text-xl">Epic: <span
+                        class="text-slate-800 text-xl font-semibold">{{task.epic.title}}</span></p>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Related Files: <span
-                                    class="text-slate-800 text-xl">Documentation.pdf, Project.doc</span>
-                            </p>
-                        </div>
+            <div>
+                <p class="text-gray-500 text-xl">Assigned To: <span
+                        class="text-slate-800 text-xl font-semibold">{{task.assigned_to.first_name}}
+                        {{task.assigned_to.last_name}}</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Extra: <span
+                        class="text-slate-800 text-xl font-semibold">{{task.extra}}</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Status:
+                    {% if task.status == 'Closed' %}
+                    <span class="text-red-500 text-xl font-semibold">{{task.status}}</span>
+                    {% endif %}
+                    {% if task.status == 'Open' %}
+                    <span class="text-green-700 text-xl font-semibold">{{task.status}}</span>
+                    {% endif %}
+                    {% if project.status == 'Working on' %}
+                    <span class="text-yellow-400 text-xl font-semibold">{{task.status}}</span>
+                    {% endif %}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Related Files: <span class="text-slate-800 text-xl">Documentation.pdf,
+                        Project.doc</span>
+                </p>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Points:</p>
-                            <div class="w-full px-4">
 
+            <div class="mt-5 relative">
+                <div
+                    class=" bg-slate-700 border border-slate-700 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                    <div class="px-3">
+                        <p class="text-white uppercase font-bold">Points</p>
+                    </div>
 
-                                {% for point in points %}
+                    <button
+                        class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addPointButton"
+                        data-modal-url="{% url 'addpoint' task.task_id %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
 
+                <div class="overflow-x-auto border border-gray-300 rounded-b-md">
+                    <table class="min-w-full divide-y">
+                        <!-- TABLE HEADER -->
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    Point
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                    Status
+                                </th>
+                            </tr>
+                        </thead>
+
+                        <!-- TABLE BODY -->
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- 1st row -->
+                            {% if points %}
+                            {% for point in points %}
+                            <tr>
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <p class="text-slate-800">{{point.text}}</p>
+                                </td>
 
                                 {% if point.status == 'Not Completed' %}
-                                <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
-                                    <div class="w-[380px]">
-                                        <p class="text-slate-800">{{point.text}}</p>
-                                    </div>
-                                    <div class="flex justify-end items-center gap-2">
-                                        <form method="post" action="{% url 'mark_point_working_on_task_page' point.id task.id %}">
-                                           {% csrf_token %}
-                                        <button type="submit"
-                                        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>
+                                <td class="px-6 py-4 text-center text-sm">
+                                    <div class="w-full flex justify-center items-center gap-2">
+                                        <form method="post"
+                                            action="{% url 'mark_point_working_on_task_page' point.id task.id %}">
+                                            {% csrf_token %}
+                                            <button type="submit"
+                                                class="w-[120px] px-2 py-2 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
+                                                On</button>
                                         </form>
-                                        <form method="post" action="{% url 'mark_point_completed_task_page' point.id task.id %}">
+                                        <form method="post"
+                                            action="{% url 'mark_point_completed_task_page' point.id task.id %}">
                                             {% csrf_token %}
-                                        <button type="submit"
-                                            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 type="submit"
+                                                class="w-[120px] px-2 py-2 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
                                         </form>
                                     </div>
-                                </div>
+                                </td>
                                 {% endif %}
-                    
+
                                 {% if point.status == 'Completed' %}
-                                <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
-                                    <div class="w-[380px]">
-                                        <p class="text-slate-800 line-through">{{point.text}}</p>
-                                    </div>
-                                    <div class="w-[150px]">
-                                        <button class="w-full px-2 py-1 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40"
-                                            value="Completed" disabled>Completed</button>
-                                    </div>
-                                </div>
+                                <td class="px-6 py-4 text-center text-sm">
+                                    <button
+                                        class="w-fit px-3 py-2 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40"
+                                        value="Completed" disabled>Completed</button>
+                                </td>
                                 {% endif %}
-                    
-                    
+
                                 {% if point.status == 'Working On' %}
-                                <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
-                                    <div class="w-[380px]">
-                                        <p class="text-slate-800">{{point.text}}</p>
-                                    </div>
-                                    <div class="flex justify-end items-center gap-2">
+                                <td class="px-6 py-4 text-center text-sm">
+                                    <div class="w-full flex justify-center items-center gap-2">
                                         <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>
-                                        <form method="post" action="{% url 'mark_point_completed_task_page' point.id task.id %}">
+                                            class="w-[120px] px-2 py-2 border border-yellow-500 rounded-md bg-yellow-500 text-white opacity-40"
+                                            disabled>Working On</button>
+                                        <form method="post"
+                                            action="{% url 'mark_point_completed_task_page' point.id task.id %}">
                                             {% csrf_token %}
-                                        <button type="submit"
-                                            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 type="submit"
+                                                class="w-[120px] px-2 py-2 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
                                         </form>
-                                     
                                     </div>
-                                </div>
+                                </td>
                                 {% endif %}
+                            </tr>
+                            {% endfor %}
+                            {% else %}
+                            <tr>
+                                <td colspan="3" class="px-6 py-4 text-center text-sm text-slate-800">
+                                    No Available Points
+                                </td>
+                            </tr>
+                            {% endif %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
 
-                                {% endfor %}
-
-
-                            </div>
-
-                            <div class="w-full px-4">
-                                <button class="w-full text-gray-500 py-3 bg-gray-100 addPointButton" data-modal-url="{% url 'addpoint' task.task_id %}">ADD POINT</button>
-                                </button>
-                            </div>
+            <div>
+                <div class="mt-5 relative">
+                    <div
+                        class=" bg-slate-700 border border-slate-700 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                        <div class="px-3">
+                            <p class="text-white uppercase font-bold">Timline</p>
                         </div>
+    
+                        <button
+                            class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addTimeButton"
+                            data-modal-url="{% url 'addtime' %}">
+                            <i class="fa fa-plus"></i>
+                        </button>
+                    </div>
+    
+                    <div class="overflow-x-auto border border-gray-300 rounded-b-md">
+                        <table class="min-w-full divide-y">
+                            <!-- TABLE HEADER -->
+                            <thead class="bg-gray-50">
+                                <tr>
+                                    <th scope="col"
+                                        class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                        Task Time: 300 min
+                                    </th>
+                                    <th scope="col"
+                                        class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                        User
+                                    </th>
+                                    <th scope="col"
+                                        class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                        Date
+                                    </th>
+                                    <th scope="col"
+                                        class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                        Total Time
+                                    </th>
+                                </tr>
+                            </thead>
+    
+                            <!-- TABLE BODY -->
+                            <tbody class="bg-white divide-y divide-gray-200">
+                                <!-- 1st row -->
+                                <tr>
+                                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                        <button
+                                        class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
+                                    </td>
+    
+                                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                        <a class="text-slate-800">Nataly</a>
+                                    </td>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Timeline:</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-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-sm">Task Time: <span class="text-sm text-gray-500">560
-                                                    minutes</span></p>
-                                        </div>
-                                        <div
-                                            class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-sm">User</p>
-                                        </div>
-                                        <div
-                                            class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-sm">Date</p>
-                                        </div>
-                                        <div class="w-[20%] h-full flex justify-center items-center">
-                                            <p class="text-sm">Total Time</p>
-                                        </div>
-                                    </div>
+                                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                        <a class="text-slate-800">6-9-2023</a>
+                                    </td>
+    
+                                    <td class="px-6 py-4 text-center text-sm">
+                                        <a class="text-slate-800">50min</a>
+                                    </td>
+                                </tr>
+                                <!-- <tr>
+                                    <td colspan="3" class="px-6 py-4 text-center text-sm text-slate-800">
+                                        No Available Credentials
+                                    </td>
+                                </tr> -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </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-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <button
-                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">Nataly</p>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">6-9-2023</p>
-                                            </div>
-                                            <div class="w-[20%] h-full flex justify-center items-center">
-                                                <p class="text-sm">360 minutes</p>
-                                            </div>
-                                        </div>
-
-                                        <!-- 2ND ROW -->
-                                        <div
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            <div
-                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <button
-                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">Salim</p>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">12-9-2023</p>
-                                            </div>
-                                            <div class="w-[20%] h-full flex justify-center items-center">
-                                                <p class="text-sm">200 minutes</p>
-                                            </div>
-                                        </div>
-
-                                        <!-- 3RD ROWS -->
-                                        <div
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            <div
-                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <button
-                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">Salim</p>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">12-9-2023</p>
-                                            </div>
-                                            <div class="w-[20%] h-full flex justify-center items-center">
-                                                <p class="text-sm">200 minutes</p>
-                                            </div>
-                                        </div>
-
-                                        <!-- 4TH ROW -->
-                                        <div
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            <div
-                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <button
-                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">Reine</p>
-                                            </div>
-                                            <div
-                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
-                                                <p class="text-sm">12-9-2023</p>
-                                            </div>
-                                            <div class="w-[20%] h-full flex justify-center items-center">
-                                                <p class="text-sm">200 minutes</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="w-full">
-                                        <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addTimeButton" data-modal-url="{% url 'addtime' %}">ADD TIMELINE</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+            <div class="mt-5">
+                <p class="text-gray-500 text-xl">Description:</p>
+                <div class="w-full h-fit px-4 mt-1">
+                    <p class="text-slate-700">
+                        {{task.description}}
+                    </p>
+                </div>
+            </div>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">Description:</p>
-                            <div class="w-full h-fit px-4 mt-1">
-                                <p class="text-slate-700">
-                                   {{task.description}}
-                                </p>
-                            </div>
-                        </div>
+            <div>
+                <p class="text-gray-500 text-xl">Tags:</p>
+                <div class="w-full h-fit px-4 mt-2 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>
 
-                        <div>
-                            <p class="text-gray-500 text-xl">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">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>
 
-                                <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>
+    </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" id="activitiesContainer">
 
-                            {% include 'recent-activities.html' %}
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="hidden xxlg1:block w-[25%] bg-white h-[800px] overflow-y-auto overflow-hidden 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" id="activitiesContainer">
 
-                    </div>
-                </div>
-            </div>
-        </div>
+            {% include 'recent-activities.html' %}
 
-        <!-- 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>
+</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>
+</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/index.html b/osinaweb/templates/index.html
index babdbae8..224f400b 100644
--- a/osinaweb/templates/index.html
+++ b/osinaweb/templates/index.html
@@ -14,17 +14,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -38,7 +45,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -61,7 +68,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -71,7 +78,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/business-types.html b/osinaweb/templates/listing_pages/business-types.html
index 0acff74c..36d1d396 100644
--- a/osinaweb/templates/listing_pages/business-types.html
+++ b/osinaweb/templates/listing_pages/business-types.html
@@ -13,17 +13,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -37,7 +44,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -60,7 +67,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -70,7 +77,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/businesses.html b/osinaweb/templates/listing_pages/businesses.html
index bcf64b04..6dfb763c 100644
--- a/osinaweb/templates/listing_pages/businesses.html
+++ b/osinaweb/templates/listing_pages/businesses.html
@@ -14,17 +14,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -38,7 +45,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -61,7 +68,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -71,7 +78,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/customers.html b/osinaweb/templates/listing_pages/customers.html
index 40783623..7564c11c 100644
--- a/osinaweb/templates/listing_pages/customers.html
+++ b/osinaweb/templates/listing_pages/customers.html
@@ -13,17 +13,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -37,7 +44,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -60,7 +67,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -70,14 +77,13 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-
 <!-- CUSTOMERS AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / CUSTOMERS SECTION -->
diff --git a/osinaweb/templates/listing_pages/daily-reports.html b/osinaweb/templates/listing_pages/daily-reports.html
index 09934e77..08ba528c 100644
--- a/osinaweb/templates/listing_pages/daily-reports.html
+++ b/osinaweb/templates/listing_pages/daily-reports.html
@@ -13,17 +13,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -37,7 +44,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -60,7 +67,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -70,7 +77,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
@@ -144,28 +151,6 @@
             </div>
             {% endfor %}
 
-            <script>
-                document.addEventListener("DOMContentLoaded", function () {
-                    // Get references to all showReportButton and reportContainer elements
-                    var showReportButtons = document.querySelectorAll(".showReportButton");
-
-                    // Iterate through each button and attach the click event
-                    showReportButtons.forEach(function (button) {
-                        button.addEventListener("click", function () {
-                            // Find the related reportContainer based on the button's parent
-                            var reportContainer = button.closest(".daily-report").querySelector(".reportContainer");
-
-                            // Toggle the visibility of the report container
-                            reportContainer.classList.toggle("hidden");
-                        });
-                    });
-                });
-
-            </script>
-
-
-
-
         </div>
     </div>
 
@@ -201,4 +186,8 @@
 <!-- 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>
 
+
+<!-- TO DISPLAY THE DAILY REPORT CONTENT -->
+<script type="text/javascript" src='{% static "js/daily-reports.js" %}'></script>
+
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/listing_pages/project-types.html b/osinaweb/templates/listing_pages/project-types.html
index ef47c578..5055b5c9 100644
--- a/osinaweb/templates/listing_pages/project-types.html
+++ b/osinaweb/templates/listing_pages/project-types.html
@@ -13,17 +13,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -37,7 +44,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -60,7 +67,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -70,13 +77,14 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
     </div>
 </div>
 
+
 <!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / PROJECT TYPES SECTION -->
diff --git a/osinaweb/templates/listing_pages/projects.html b/osinaweb/templates/listing_pages/projects.html
index 08df180a..983b8a35 100644
--- a/osinaweb/templates/listing_pages/projects.html
+++ b/osinaweb/templates/listing_pages/projects.html
@@ -14,17 +14,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -38,7 +45,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -61,7 +68,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -71,7 +78,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/references.html b/osinaweb/templates/listing_pages/references.html
index 3b2a23eb..4368f2ff 100644
--- a/osinaweb/templates/listing_pages/references.html
+++ b/osinaweb/templates/listing_pages/references.html
@@ -13,17 +13,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -37,7 +44,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -60,7 +67,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -70,7 +77,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/staff-positions.html b/osinaweb/templates/listing_pages/staff-positions.html
index cb785a91..10f83a60 100644
--- a/osinaweb/templates/listing_pages/staff-positions.html
+++ b/osinaweb/templates/listing_pages/staff-positions.html
@@ -14,17 +14,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -38,7 +45,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -61,7 +68,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -71,13 +78,14 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
     </div>
 </div>
 
+
 <!-- USERS AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / USERS SECTION -->
diff --git a/osinaweb/templates/listing_pages/staffs.html b/osinaweb/templates/listing_pages/staffs.html
index 80fb7f9e..a6dd82dc 100644
--- a/osinaweb/templates/listing_pages/staffs.html
+++ b/osinaweb/templates/listing_pages/staffs.html
@@ -14,17 +14,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -38,7 +45,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -61,7 +68,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -71,7 +78,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/tags.html b/osinaweb/templates/listing_pages/tags.html
index 69de043a..b18cd7af 100644
--- a/osinaweb/templates/listing_pages/tags.html
+++ b/osinaweb/templates/listing_pages/tags.html
@@ -13,17 +13,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -37,7 +44,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -60,7 +67,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -70,7 +77,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/listing_pages/tasks.html b/osinaweb/templates/listing_pages/tasks.html
index 4bbb00cd..bda76863 100644
--- a/osinaweb/templates/listing_pages/tasks.html
+++ b/osinaweb/templates/listing_pages/tasks.html
@@ -12,17 +12,24 @@
 <div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
-            <div class="w-full s:w-fit">
-                <p class="text-base text-gray-500">Recent Note:</p>
-                <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
-                        style="background-color: {{ last_note_color }};">
+            <div class="w-full s:w-fit flex justify-between items-center">
+                <div>
+                    <p class="text-base text-gray-500">Recent Note:</p>
+                    <div class="flex justify-start items-center gap-2">
+                        <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                            style="background-color: {{ recent_note.color }};">
 
+                        </div>
+                        <p class="text-slate-700">{{recent_note.text}}</p>
                     </div>
-                    <p class="text-slate-700">{{recent_note.text}}</p>
                 </div>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
             </div>
-            <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
+            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s: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
@@ -36,7 +43,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit hidden mt-5" id="notesContainer">
+        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -59,7 +66,7 @@
                         {% endfor %}
                     </div>
 
-                    <div class="flex justify-center items-center gap-3 mt-5">
+                    <!-- <div class="flex justify-center items-center gap-3 mt-5">
                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
                             id="sliderLeft">
                             <i class="fa fa-angle-left"></i>
@@ -69,7 +76,7 @@
                             id="sliderRight">
                             <i class="fa fa-angle-right"></i>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/osinaweb/templates/main.html b/osinaweb/templates/main.html
index 6dcb1668..36e0b666 100644
--- a/osinaweb/templates/main.html
+++ b/osinaweb/templates/main.html
@@ -337,11 +337,8 @@
                 <div class="bg-white shadow-md rounded-md p-5 cursor-pointer">
                     <div class="w-full h-full flex flex-col gap-3 items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p>
-                            <div
-                                class="w-[40px] h-[40px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
-                                <p class="text-green-700 font-semibold">14</p>
-                            </div>
+                            <p class="text-[22px] text-slate-800 font-bold uppercase"><span class="text-green-700">14</span> Connected</p>
+                            <i class="fa fa-users"  style="font-size: 30px; color: green;"></i>
                         </div>
 
                         <div class="w-full flex flex-wrap gap-2">