diff --git a/osinaweb/billing/__pycache__/views.cpython-312.pyc b/osinaweb/billing/__pycache__/views.cpython-312.pyc
index ea069b29..5c1a9ef8 100644
Binary files a/osinaweb/billing/__pycache__/views.cpython-312.pyc and b/osinaweb/billing/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc
index b8a66263..ae572231 100644
Binary files a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc and b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc differ
diff --git a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc
index 876027f9..8bb4265a 100644
Binary files a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc and b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/customercore/__pycache__/views.cpython-312.pyc b/osinaweb/customercore/__pycache__/views.cpython-312.pyc
index 86d12287..7998b1e0 100644
Binary files a/osinaweb/customercore/__pycache__/views.cpython-312.pyc and b/osinaweb/customercore/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/customercore/templates/details_templates/inner-customer-project.html b/osinaweb/customercore/templates/details_templates/inner-customer-project.html
index d51e30dd..d9d7d7c4 100644
--- a/osinaweb/customercore/templates/details_templates/inner-customer-project.html
+++ b/osinaweb/customercore/templates/details_templates/inner-customer-project.html
@@ -5,10 +5,16 @@
 
 <div class="w-full px-5 s:px-9 flex flex-col gap-3">
     <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <div class="w-full rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px] {% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %}">
+        <div
+            class="w-full rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px] {% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %}">
             <div
                 class="w-[70px] s:w-[90px] h-[70px] s:h-[90px] rounded-full mt-[-50px] s:mt-[-63px] border border-gray-300 bg-white">
-                <img src="{{project.logo.url}}" alt="" class="w-full h-full object-cover rounded-full">
+                {% if project.logo %}
+                <img src="{{project.logo.url}}" class="w-full h-full rounded-full object-cover">
+                {% else %}
+                <img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}"
+                    class="w-full h-full rounded-full object-cover">
+                {% endif %}
             </div>
             <div class="text-center">
                 <p class="text-xl text-white font-semibold">{{project.name}}</p>
@@ -62,11 +68,11 @@
                     <img src="{% static 'images/default-user.png' %}"
                         class="w-full h-full object-cover shadow-md rounded-full">
                     {% else %}
-                    <img src="{{project.manager.image.url}}"
-                        class="w-full h-full object-cover shadow-md rounded-full">
+                    <img src="{{project.manager.image.url}}" class="w-full h-full object-cover shadow-md rounded-full">
                     {% endif %}
                 </div>
-                <p class="text-gray-500 text-[16px]">{{project.manager.user.first_name}} {{project.manager.user.last_name}}</p>
+                <p class="text-gray-500 text-[16px]">{{project.manager.user.first_name}}
+                    {{project.manager.user.last_name}}</p>
             </div>
 
         </div>
diff --git a/osinaweb/customercore/templates/payment_pages/buy-now.html b/osinaweb/customercore/templates/payment_pages/buy-now.html
index ea04885f..e83b5aa3 100644
--- a/osinaweb/customercore/templates/payment_pages/buy-now.html
+++ b/osinaweb/customercore/templates/payment_pages/buy-now.html
@@ -40,21 +40,31 @@
                     <div class="hidden s:flex z-10">
                         <img src="{% static 'images/ositcom_logos/full-logo-white.png' %}" class="w-[150px]">
                     </div>
-    
-                    <div class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center border border-white border-opacity-10 rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
+
+                    <div
+                        class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
                         <p class="text-secondosiblue font-poppinsExtraBold uppercase text-xl s:text-2xl">{{item.title}}</p>
                         <p class="text-secondosiblue text-xl s:text-2xl">$<span id="cyclePrice"></span></p>
-        
-                        <select class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none flex justify-center items-center text-center cursor-pointer" id="cycle">
+
+                        <select
+                            class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none cursor-pointer"
+                            id="cycle">
                             {% for cycle in cycles %}
-                            <option value="{{cycle.id}}" data-cycle-price="{{cycle.cycle_price}}">{{cycle.months}} {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
+                            <option value="{{cycle.id}}" data-cycle-price="{{cycle.cycle_price}}">{{cycle.months}} 
+                            {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
                             {% endfor %}
                         </select>
+
+                        {% if item.item_type.name == 'cPanel' %}
+                        <input type="text" class="w-full bg-white border border-gray-200 rounded-md px-3 py-3 outline-none"
+                            placeholder="Enter your IP">
+                        {% endif %}
                     </div>
                 </div>
 
 
-                <div class="w-full bg-white border-bl-none xxlg1:border-bl-md px-5 py-3 z-10 flex flex-col justify-center items-center border border-gray-100">
+                <div
+                    class="w-full bg-white border-bl-none xxlg1:border-bl-md px-5 py-3 z-10 flex flex-col justify-center items-center border border-gray-100">
                     <p class="text-secondosiblue font-poppinsLight text-sm">Payment Powered By</p>
                     <img src="{% static 'images/netcommerce-logo.png' %}" class="w-[120px]">
                 </div>
@@ -63,11 +73,18 @@
 
             <!-- EMBEDDED PAYMENT FORM -->
             <div class="p-5 relative min-h-[200px] xxlg1:h-full">
-                <div class="w-full h-full absolute flex justify-center items-center bg-black bg-opacity-30 z-10 inset-0 rounded-rt-none rounded-b-md xxlg1:rounded-r-md rounded-bl-md xxlg1:rounded-bl-none hidden" id="paymentLoader">
+                <div class="w-full h-full absolute flex justify-center items-center bg-black bg-opacity-30 z-10 inset-0 rounded-rt-none rounded-b-md xxlg1:rounded-r-md rounded-bl-md xxlg1:rounded-bl-none hidden"
+                    id="paymentLoader">
                     <div role="status">
-                        <svg aria-hidden="true" class="w-14 h-14 text-white animate-spin dark:text-gray-600 fill-secondosiblue" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+                        <svg aria-hidden="true"
+                            class="w-14 h-14 text-white animate-spin dark:text-gray-600 fill-secondosiblue"
+                            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                                fill="currentColor" />
+                            <path
+                                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                                fill="currentFill" />
                         </svg>
                     </div>
                 </div>
diff --git a/osinaweb/customercore/templates/products/cpanel-licenses.html b/osinaweb/customercore/templates/products/cpanel-licenses.html
index 93637828..b73d0379 100644
--- a/osinaweb/customercore/templates/products/cpanel-licenses.html
+++ b/osinaweb/customercore/templates/products/cpanel-licenses.html
@@ -15,19 +15,26 @@
         <!-- PRICING ON DESKTOP -->
         <div class="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 mt-10">
             <div
-                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
+                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_admin_cloud %} bg-black bg-opacity-20 {% endif %}">
                 <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Admin Cloud</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$26/month</p>
                 </div>
 
-                <a href="">
+                {% if not active_order_admin_cloud %}
+                <a href="{% url 'buynow' admin_cloud.id %}">
                     <button
                         class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                         Started
                     </button>
                 </a>
+                {% else %}
+                <button
+                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
+                    Subscribed
+                </button>
+                {% endif %}
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
@@ -52,19 +59,26 @@
             </div>
 
             <div
-                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
+                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_pro_cloud %} bg-black bg-opacity-20 {% endif %}">
                 <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Pro Cloud</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$38.5/month</p>
                 </div>
 
-                <a href="">
+                {% if not active_order_pro_cloud %}
+                <a href="{% url 'buynow' pro_cloud.id %}">
                     <button
                         class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                         Started
                     </button>
                 </a>
+                {% else %}
+                <button
+                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
+                    Subscribed
+                </button>
+                {% endif %}
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
@@ -89,19 +103,26 @@
             </div>
 
             <div
-                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
+                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_premier_cloud %} bg-black bg-opacity-20 {% endif %}">
                 <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Premier Cloud</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$57.5/month</p>
                 </div>
 
-                <a href="">
+                {% if not active_order_premier_cloud %}
+                <a href="{% url 'buynow' premier_cloud.id %}">
                     <button
                         class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                         Started
                     </button>
                 </a>
+                {% else %}
+                <button
+                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
+                    Subscribed</button>
+                {% endif %}
+
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
@@ -126,19 +147,26 @@
             </div>
 
             <div
-                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
+                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_premier_metal %} bg-black bg-opacity-20 {% endif %}">
                 <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Premier Metal</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$57.5/month</p>
                 </div>
 
-                <a href="">
+                {% if not active_order_premier_metal %}
+                <a href="{% url 'buynow' premier_metal.id %}">
                     <button
                         class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                         Started
                     </button>
                 </a>
+                {% else %}
+                <button
+                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
+                    Subscribed</button>
+                {% endif %}
+
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
diff --git a/osinaweb/customercore/views.py b/osinaweb/customercore/views.py
index 8b682cee..2f118ed9 100644
--- a/osinaweb/customercore/views.py
+++ b/osinaweb/customercore/views.py
@@ -267,9 +267,27 @@ def dedicated_servers_plans(request, *args, **kwargs):
 
 @customer_login_required
 def cpanel_licenses(request, *args, **kwargs):
+    admin_cloud = Item.objects.filter(title='ADMIN CLOUD').first()
+    pro_cloud = Item.objects.filter(title='PRO CLOUD').first()
+    premier_cloud = Item.objects.filter(title='PREMIER CLOUD').first()
+    premier_metal = Item.objects.filter(title='PREMIER METAL').first()
+
+
+    active_order_admin_cloud = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=admin_cloud, active=True)
+    active_order_pro_cloud = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=pro_cloud, active=True)
+    active_order_premier_cloud = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=premier_cloud, active=True)
+    active_order_premier_metal = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=premier_metal, active=True)
     
     context = {
-
+        'admin_cloud' : admin_cloud,
+        'pro_cloud' : pro_cloud,
+        'premier_cloud' : premier_cloud,
+        'premier_metal' : premier_metal,
+        
+        'active_order_admin_cloud' : active_order_admin_cloud,
+        'active_order_pro_cloud' : active_order_pro_cloud,
+        'active_order_premier_cloud' : active_order_premier_cloud,
+        'active_order_premier_metal' : active_order_premier_metal,
     }
 
     return render(request, 'products/cpanel-licenses.html', context)
diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index 0b4be21b..81e88f1d 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/input.css b/osinaweb/input.css
index 10fcfff0..49de8094 100644
--- a/osinaweb/input.css
+++ b/osinaweb/input.css
@@ -346,4 +346,18 @@
 .default-css ol {
     list-style-type: decimal;
     padding: 0px 30px;
+}
+
+
+
+/* Add transition to the dropdown content */
+#accessibilitesDropDown {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.8s ease-in-out;
+}
+
+/* Set max-height to reveal dropdown content */
+#accessibilitesDropDown.visible {
+    max-height: 1000px;
 }
\ No newline at end of file
diff --git a/osinaweb/osinacore/__pycache__/custom_context.cpython-312.pyc b/osinaweb/osinacore/__pycache__/custom_context.cpython-312.pyc
index b2d3efc9..430d0cdc 100644
Binary files a/osinaweb/osinacore/__pycache__/custom_context.cpython-312.pyc and b/osinaweb/osinacore/__pycache__/custom_context.cpython-312.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-312.pyc b/osinaweb/osinacore/__pycache__/views.cpython-312.pyc
index e07c83b2..e74cf41c 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-312.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/osinacore/custom_context.py b/osinaweb/osinacore/custom_context.py
index 90395df2..60c6aa87 100644
--- a/osinaweb/osinacore/custom_context.py
+++ b/osinaweb/osinacore/custom_context.py
@@ -76,7 +76,17 @@ def utilities(request):
 
     # Calculate time ago for each status and store it in a dictionary
     latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses]
- 
+
+
+    recent_logged_in_staffs = User.objects.filter(
+        staffprofile__isnull=False,  # Ensure there's a StaffProfile associated
+        last_login__isnull=False  # Ensure they have logged in at least once
+    ).order_by('-last_login')[:8] 
+
+    recent_logged_in_customers = User.objects.filter(
+        customerprofile__isnull=False,  # Ensure there's a CustomerProfile associated
+        last_login__isnull=False  # Ensure they have logged in at least once
+    ).order_by('-last_login')[:8]  
     
     return {'total_tasks': total_tasks, 
             'latest_statuses' : latest_statuses, 
@@ -85,6 +95,8 @@ def utilities(request):
             'recent_note' : recent_note,
             'online_staff_profiles' : online_staff_profiles,
             'user_offline' : user_offline,
+            'recent_logged_in_staffs' : recent_logged_in_staffs,
+            'recent_logged_in_customers' : recent_logged_in_customers,
 }
 
 
diff --git a/osinaweb/osinacore/templates/customer_index.html b/osinaweb/osinacore/templates/customer_index.html
index 51b81d68..09bb918b 100644
--- a/osinaweb/osinacore/templates/customer_index.html
+++ b/osinaweb/osinacore/templates/customer_index.html
@@ -4,6 +4,62 @@
 
 
 <div class="w-full px-5 s:px-9 flex flex-col gap-5">
+    <!-- PROJECTS -->
+    {% if customer_projects %}
+    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+        <h1 class="text-secondosiblue text-[25px]">Projects</h1>
+
+        <div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-3">
+            {% for customer_project in customer_projects %}
+            <a href="{% url 'customerprojectdetails' customer_project.project_id %}">
+                <div
+                    class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300 projectContainer">
+                    <div class="flex flex-col justify-center items-center gap-5">
+                        <div class="w-[70px] h-[70px] rounded-full shadow-md">
+                            {% if customer_project.logo %}
+                            <img src="{{customer_project.logo.url}}" class="w-full h-full rounded-full object-cover">
+                            {% else %}
+                            <img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}"
+                                class="w-full h-full rounded-full object-cover">
+                            {% endif %}
+
+                        </div>
+
+                        <div>
+                            <p class="text-secondosiblue font-poppinsBold text-center text-xl">{{customer_project.name}}</p>
+                            <p class="text-sm uppercase font-light text-secondosiblue text-center">
+                                {{customer_project.project_id}}</p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="{% if customer_project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %} px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
+                        <p>{{customer_project.projectstatus_set.all.last.status}}</p>
+                    </div>
+
+
+                    <div class="w-full mt-5 flex flex-col gap-2">
+                        <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
+                            <p class="startDate">{{customer_project.start_date}}</p>
+                            <p class="endDate">{{customer_project.end_date}}</p>
+                        </div>
+
+                        <p id="projectId" class="hidden">{{customer_project.id}}</p>
+
+                        <div class="w-full rounded-md bg-white shadow-md h-[8px] mainBar">
+                            <div class=" rounded-md h-full progressBar"></div>
+                        </div>
+                    </div>
+
+                </div>
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+
+
+
     <!-- SUBSCRIPTION -->
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
         <h1 class="text-secondosiblue text-[25px]">Subscriptions</h1>
@@ -11,31 +67,39 @@
 
             {% for subscription in active_subscriptions %}
             {% if subscription.item.item_type.name == 'OSIMENU' %}
-                <a href="{% url 'redirectosimenu' %}">
-                    <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
-                        <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
-                            {% if subscription.item.item_type.name == 'OSIMENU' %}
-                            <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
-                            {% endif %}
+            <a href="{% url 'redirectosimenu' %}">
+                <div
+                    class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
+                    <div
+                        class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
+                        {% if subscription.item.item_type.name == 'OSIMENU' %}
+                        <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
+                        {% endif %}
 
-                        </div>
-                        <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
-                            <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No Expiry {% endif %}</span>
-                            </p>
-                        </div>
                     </div>
-                </a>
+                    <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
+                        <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span
+                                class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
+                                    Expiry {% endif %}</span>
+                        </p>
+                    </div>
+                </div>
+            </a>
             {% elif subscription.item.item_type.name == 'OSICARD' %}
             <a href="{% url 'redirectosicard' %}">
-                <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
-                    <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
-                            {% if subscription.item.item_type.name == 'OSICARD' %}
-                            <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
-                            {% endif %}
+                <div
+                    class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
+                    <div
+                        class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
+                        {% if subscription.item.item_type.name == 'OSICARD' %}
+                        <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
+                        {% endif %}
 
                     </div>
                     <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
-                        <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No Expiry {% endif %}</span>
+                        <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span
+                                class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
+                                    Expiry {% endif %}</span>
                         </p>
                     </div>
                 </div>
@@ -45,8 +109,10 @@
 
 
             <a href="{% url 'products' %}" class="w-full h-full">
-                <div class="w-full h-full bg-gray-50 rounded-md flex justify-center items-center py-10 px-5 shadow-md border border-gray-100 cursor-pointer hover:bg-secondosiblue duration-300 group zoom">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-secondosiblue group-hover:text-white duration-300">
+                <div
+                    class="w-full h-full bg-gray-50 rounded-md flex justify-center items-center py-10 px-5 shadow-md border border-gray-100 cursor-pointer hover:bg-secondosiblue duration-300 group zoom">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-10 h-10 text-secondosiblue group-hover:text-white duration-300">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                     </svg>
                 </div>
@@ -75,14 +141,16 @@
                             class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                             Regarding
                         </th>
-                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
                             Last Updated
                         </th>
-                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
                             Updated By
                         </th>
                         <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
-                           Unread
+                            Unread
                         </th>
                     </tr>
                 </thead>
@@ -90,7 +158,8 @@
                 <!-- TABLE BODY -->
                 {% for ticket in customer_open_tickets %}
                 <tbody class="bg-white divide-y divide-gray-200">
-                    <tr data-href="{% url 'customerticketdetails' ticket.ticket_number %}" class="hover:bg-gray-100 duration-300 cursor-pointer">
+                    <tr data-href="{% url 'customerticketdetails' ticket.ticket_number %}"
+                        class="hover:bg-gray-100 duration-300 cursor-pointer">
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                             <a href="{% url 'customerticketdetails' ticket.ticket_number %}">
                                 <p class="text-secondosiblue cursor-pointer">{{ticket.title}}</p>
@@ -106,9 +175,9 @@
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-              
+
                             <p class="text-secondosiblue">{{ticket.ticketupdate_set.last.date_added}}</p>
-    
+
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
@@ -117,10 +186,11 @@
 
                         <td class="px-6 py-4 text-center items-center text-sm">
                             <div class="w-full flex justify-center items-center">
-                                <div class="w-[40px] h-[40px] rounded-full border-2 border-secondosiblue flex justify-center items-center">
+                                <div
+                                    class="w-[40px] h-[40px] rounded-full border-2 border-secondosiblue flex justify-center items-center">
                                     <p class="text-secondosiblue">{{ticket.unread_updates_count}}</p>
                                 </div>
-                            </div>  
+                            </div>
                         </td>
                     </tr>
                 </tbody>
@@ -129,42 +199,56 @@
         </div>
     </div>
 
-    
+
 
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
         <h1 class="text-secondosiblue text-[25px]">Ways to Get Help</h1>
 
         <div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-5">
-            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
-                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-                      </svg>
+            <div
+                class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
+                <div
+                    class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-8 h-8 text-secondosiblue">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+                    </svg>
                 </div>
 
                 <p class="font-poppinsBold text-secondosiblue text-center text-xl">Guides & Tutorials</p>
 
-                <p class="text-gray-500 font-light text-center">View Osina guides and tutorials for all experience levels.</p>
+                <p class="text-gray-500 font-light text-center">View Osina guides and tutorials for all experience
+                    levels.</p>
             </div>
 
-            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
-                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+            <div
+                class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
+                <div
+                    class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-8 h-8 text-secondosiblue">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                     </svg>
                 </div>
 
                 <p class="font-poppinsBold text-secondosiblue text-center text-xl">Community Q&A</p>
 
-                <p class="text-gray-500 font-light text-center">Ask questions, find answers, and connect with other members of the Ositcom community.</p>
+                <p class="text-gray-500 font-light text-center">Ask questions, find answers, and connect with other
+                    members of the Ositcom community.</p>
             </div>
 
 
-            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
-                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
-                    </svg>  
+            <div
+                class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
+                <div
+                    class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-8 h-8 text-secondosiblue">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
+                    </svg>
                 </div>
 
                 <p class="font-poppinsBold text-secondosiblue text-center text-xl">Ositcom Status Page</p>
@@ -172,12 +256,16 @@
                 <p class="text-gray-500 font-light text-center">Get Updates on Ositcom incidents and maintenance.</p>
             </div>
 
-            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
-                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
-                      </svg>
-                      
+            <div
+                class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
+                <div
+                    class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-8 h-8 text-secondosiblue">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
+                    </svg>
+
                 </div>
 
                 <p class="font-poppinsBold text-secondosiblue text-center text-xl">Customer Support</p>
@@ -198,5 +286,5 @@
     });
 </script>
 
-
+<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/main.html b/osinaweb/osinacore/templates/main.html
index 97eb96e1..0b72ae5f 100644
--- a/osinaweb/osinacore/templates/main.html
+++ b/osinaweb/osinacore/templates/main.html
@@ -9,7 +9,7 @@
     <title>{% block title %} Osina {% endblock %}</title>
     <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    
+
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
     <!-- DRAGGABLE SLIDER LINKS -->
@@ -50,7 +50,9 @@
         class="w-full h-full bg-black bg-opacity-40 z-20 fixed hidden justify-center items-center inset-0 p-5">
         <div class="w-full s:w-[500px] h-fit rounded-md p-5 cursor-pointer relative"
             style="background-color: {{note.color}}">
-            <p class="text-base text-gray-500 p-5 rounded-md" style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;" id="noteContent"></p>
+            <p class="text-base text-gray-500 p-5 rounded-md"
+                style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;"
+                id="noteContent"></p>
 
             <div class="bg-white rounded-full h-[30px] w-[30px] shadow-md absolute top-2 right-2 p-2 flex justify-center items-center cursor-pointer text-secondosiblue"
                 onclick="closeModal()">
@@ -61,7 +63,8 @@
 
 
     <!-- NOTIFICATIONS SIDEBAR -->
-    <div class="w-full h-[100vh] fixed flex justify-end items-center z-50 right-[-100%] bg-black bg-opacity-50" id="notificationsSideBar">
+    <div class="w-full h-[100vh] fixed flex justify-end items-center z-50 right-[-100%] bg-black bg-opacity-50"
+        id="notificationsSideBar">
         <div class="w-[450px] h-[100vh] bg-white p-5">
             <div class="w-full flex justify-between items-center">
                 <div class="flex justify-start items-center gap-2">
@@ -73,7 +76,8 @@
                     <p class="text-secondosiblue font-poppinsBold text-xl">13 New Notifications</p>
                 </div>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                    stroke="currentColor" class="w-8 h-8 text-secondosiblue cursor-pointer" id="closeNotificationsSideBar">
+                    stroke="currentColor" class="w-8 h-8 text-secondosiblue cursor-pointer"
+                    id="closeNotificationsSideBar">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                 </svg>
             </div>
@@ -191,8 +195,10 @@
                         class="w-full bg-transparent border border-white border-opacity-10 py-2 px-3 text-white outline-none rounded-md"
                         placeholder="Search...">
                     <div class="inset-y-0 absolute right-5 flex justify-center items-center text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"  class="w-[20px] text-white">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-[20px] text-white">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                         </svg>
                     </div>
                 </div>
@@ -207,8 +213,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                                 </svg>
                                 <p class="text-white">Accounts</p>
                             </div>
@@ -249,8 +257,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
                                 </svg>
                                 <p class="text-white">My Work</p>
                             </div>
@@ -296,8 +306,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                                 </svg>
                                 <p class="text-white">Support</p>
                             </div>
@@ -325,8 +337,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
                                 </svg>
                                 <p class="text-white">Billing</p>
                             </div>
@@ -375,8 +389,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"  class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
                                 </svg>
                                 <p class="text-white">Utilities</p>
                             </div>
@@ -452,8 +468,10 @@
 
                     <a class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-[25px] text-white">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
                             </svg>
                             <p class="text-white">Activity</p>
                         </div>
@@ -466,7 +484,8 @@
                 class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
                 <div class="w-full flex flex-col justify-center gap-1 items-center">
                     <div class="flex justify-center items-center gap-1">
-                        <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
+                        <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo"
+                            class="w-[30px] h-[25px]">
                         <p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
                     </div>
                     <p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
@@ -499,9 +518,11 @@
                     <div class="w-full h-fit bg-secondosiblue px-5 flex flex-col hidden" id="mobileUserProfileDropdown">
                         <a href="{% url 'signout' %}" class="w-full">
                             <div class="w-full py-3 flex items-center gap-2 text-white text-[16px]">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
-                                </svg>    
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
+                                </svg>
                                 <p>Logout</p>
                             </div>
                         </a>
@@ -517,8 +538,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                                 </svg>
                                 <p class="text-white">Accounts</p>
                             </div>
@@ -559,8 +582,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
                                 </svg>
                                 <p class="text-white">My Work</p>
                             </div>
@@ -607,8 +632,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                                 </svg>
                                 <p class="text-white">Support</p>
                             </div>
@@ -635,8 +662,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
                                 </svg>
                                 <p class="text-white">Billing</p>
                             </div>
@@ -685,8 +714,10 @@
                         <div
                             class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"  class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
                                 </svg>
                                 <p class="text-white">Utilities</p>
                             </div>
@@ -761,8 +792,10 @@
 
                     <a class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-[25px] text-white">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
                             </svg>
                             <p class="text-white">Activity</p>
                         </div>
@@ -791,10 +824,11 @@
                         <button
                             class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton hover:bg-osiblue duration-300"
                             data-modal-url="{% url 'addstatusmodal' %}">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                                stroke="currentColor" class="w-[20px]">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                             </svg>
-                              
+
                         </button>
                     </div>
                 </div>
@@ -802,7 +836,8 @@
 
                 <div class="flex justify-end items-center gap-5">
                     <!-- NOTIFICATION -->
-                    <div class="relative cursor-pointer hover:scale-105 duration-300 transition-transform" id="openNotificationsSideBar">
+                    <div class="relative cursor-pointer hover:scale-105 duration-300 transition-transform"
+                        id="openNotificationsSideBar">
                         <div
                             class="w-[20px] h-[20px] rounded-full bg-secondosiblue text-white flex justify-center items-center text-sm p-1 absolute top-[-5px] right-[-5px]">
                             <p>1</p>
@@ -879,35 +914,7 @@
 
 
             <!-- MODULES SECTION -->
-            <div class="w-full h-fit grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
-                <div class="h-[150px] bg-white shadow-md rounded-md block xlg1:hidden">
-                    <div
-                        class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-[22px] font-bold h-[50px]">
-                        <div class="px-3">
-                            <p>Recent Status</p>
-                        </div>
-
-                        <button
-                            class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer hidden sm:flex justify-center items-center shadow-md addStatusButton"
-                            data-modal-url="{% url 'addstatusmodal' %}">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                            </svg>
-                        </button>
-
-                        <button
-                            class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
-                            data-modal-url="{% url 'statusmobilemodal' %}">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div id="statusContainer" class="w-full h-fit p-5">
-                        {% include 'recent-status.html' %}
-                    </div>
-                </div>
-
+            <div class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
@@ -949,6 +956,99 @@
             </div>
 
 
+            <!-- TOP MODULES ON MOBILE -->
+            <div class="block xlg1:hidden px-5 s:px-9 py-5">
+                <div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer" id="openAccessibilitiesDropDown">
+                    <div class="flex justify-start items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6" fill="none">
+                            <path d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
+                            <path d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z" stroke="currentColor" stroke-width="1.5" />
+                            <path d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z" stroke="currentColor" stroke-width="1.5" />
+                        </svg>
+                        <p>Accessibilites</p>
+                    </div>
+
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowDown">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                    </svg> 
+
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowUp hidden">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+                    </svg> 
+                </div>
+
+                <div class="w-full flex flex-col gap-3" id="accessibilitesDropDown">
+                    <div class="h-[150px] bg-white shadow-md rounded-md block xlg1:hidden">
+                        <div
+                            class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-[22px] h-[50px]">
+                            <div class="px-3">
+                                <p>Recent Status</p>
+                            </div>
+    
+                            <button
+                                class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer hidden sm:flex justify-center items-center shadow-md addStatusButton"
+                                data-modal-url="{% url 'addstatusmodal' %}">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                                    stroke="currentColor" class="w-[20px]">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                                </svg>
+                            </button>
+    
+                            <button
+                                class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
+                                data-modal-url="{% url 'statusmobilemodal' %}">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                                    stroke="currentColor" class="w-[20px]">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div id="statusContainer" class="w-full h-fit p-5">
+                            {% include 'recent-status.html' %}
+                        </div>
+                    </div>
+
+                    <div class="bg-white shadow-md rounded-md p-5">
+                        <div class="w-full h-full flex flex-col justify-between items-center">
+                            <div class="w-full flex justify-between items-center">
+                                <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
+                                <img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
+                            </div>
+                            <div
+                                class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
+                                <p class="text-secondosiblue text-xl font-semibold">{{total_tasks}}</p>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="bg-white shadow-md rounded-md p-5">
+                        <div class="w-full h-full flex flex-col justify-between items-center">
+                            <div class="w-full flex justify-between items-center">
+                                <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
+                                <img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
+                            </div>
+                            <div
+                                class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
+                                <p class="text-secondosiblue text-xl font-semibold">2</p>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="bg-white shadow-md rounded-md p-5">
+                        <div class="w-full h-full flex flex-col justify-between items-center">
+                            <div class="w-full flex justify-between items-center">
+                                <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
+                                <img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
+                            </div>
+                            <div
+                                class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
+                                <p class="text-secondosiblue text-xl font-semibold">2</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </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">
@@ -970,8 +1070,10 @@
                                 <button
                                     class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
                                     data-modal-url="{% url 'addnotemodal' %}">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="3" stroke="currentColor" class="w-[20px]">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M12 4.5v15m7.5-7.5h-15" />
                                     </svg>
                                 </button>
                             </div>
@@ -985,7 +1087,8 @@
                             <button
                                 class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
                                 data-modal-url="{% url 'addnotemodal' %}">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                                    stroke="currentColor" class="w-[20px]">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                 </svg>
                             </button>
@@ -1042,13 +1145,13 @@
                 <div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
 
                     <div
-                        class="hidden xxlg1:block w-full bg-white  {% if latest_statuses_time_ago %}h-[1283px]{% else %}h-[305px]{%endif%} overflow-y-auto overflow-hidden rounded-md shadow-md py-5 px-3 relative">
+                        class="hidden xxlg1:block w-full bg-white  {% if latest_statuses_time_ago %}h-[1000px]{% else %}h-[305px]{%endif%} overflow-y-auto overflow-hidden rounded-md shadow-md py-5 px-3 relative">
 
                         <a href="{% url 'recentactivitiespage' %}">
                             <div>
                                 <img src="{% static 'images/icons/expand.png' %}"
                                     class="absolute w-[25px] right-3 top-5 hover:scale-105 cursor-pointer duration-300">
-                                    
+
                             </div>
                         </a>
 
@@ -1066,9 +1169,9 @@
                     <div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5">
                         <div class="w-full h-full flex flex-col gap-3 items-center">
                             <div class="w-full flex justify-center items-center">
-                                <p class="text-[20px] text-secondosiblue font-bold text-center"><span
-                                        class="text-green-700"></span>
-                                    Connected Users</p>
+                                <p class="text-[20px] text-secondosiblue font-bold text-center">
+                                    Connected Users
+                                </p>
                             </div>
 
                             <div class="w-full flex flex-wrap gap-4">
@@ -1085,9 +1188,175 @@
                             </div>
                         </div>
                     </div>
+
+
+                    <!-- RECENTLY LOGGED IN USERS -->
+                    <div
+                        class="w-full hidden xxlg1:flex flex-col justify-center items-center gap-3 bg-white shadow-md rounded-md p-5 logged-in-container">
+                        <div class="w-full flex justify-center items-center">
+                            <p class="text-[20px] text-secondosiblue font-bold text-center">Recently Logged In</p>
+                        </div>
+                        <div class="w-full recentltLoggedCustomersContainer">
+                            <div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
+                                <button
+                                    class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton"
+                                    style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Customers</button>
+                                <button
+                                    class="w-full text-secondosiblue text-sm cursor-pointer p-2 staffButton">Staffs</button>
+                            </div>
+                            <div class="w-full mt-3 flex flex-col gap-3 recentltLoggedCustomers">
+                                {% for recent_logged_in_customer in recent_logged_in_customers %}
+                                <div class="w-full flex justify-start items-center gap-2">
+                                    <div
+                                        class="w-[50px] h-[50px] bg-secondosiblue flex justify-center items-center rounded-full text-white">
+                                        <p>{{recent_logged_in_customer.first_name|slice:":1"}}{{recent_logged_in_customer.last_name|slice:":1"}}
+                                        </p>
+                                    </div>
+                                    <div class="flex flex-col">
+                                        <p class="text-secondosiblue text-sm">{{recent_logged_in_customer.first_name}}
+                                            {{recent_logged_in_customer.last_name}}</p>
+                                        <p class="text-gray-500 text-sm">
+                                            {{recent_logged_in_customer.last_login|date:"g:i A"}}</p>
+                                    </div>
+                                </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                        <div class="w-full hidden recentltLoggedStaffsContainer">
+                            <div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
+                                <button
+                                    class="w-full rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton">Customers</button>
+                                <button
+                                    class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 staffButton"
+                                    style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Staffs</button>
+                            </div>
+                            <div class="w-full mt-3">
+                                {% for recent_logged_in_staff in recent_logged_in_staffs %}
+                                <div class="w-full flex justify-start items-center gap-2">
+                                    <div class="relative">
+                                        <div class="w-[50px] h-[50px] rounded-full">
+                                            <img src="{{recent_logged_in_staff.staffprofile.image.url}}"
+                                                class="w-full h-full object-cover rounded-full">
+                                        </div>
+                                        {% if recent_logged_in_staff.staffprofile in online_staff_profiles %}
+                                            <div
+                                                class="w-[12px] h-[12px] absolute rounded-full bg-green-600 bottom-0 right-0 border-2 border-white">
+                                            </div>
+                                            {% else %}
+                                            <div
+                                                class="w-[12px] h-[12px] absolute rounded-full bg-red-500 bottom-0 right-0 border-2 border-white">
+                                            </div>
+                                        {% endif %}
+                                    </div>
+                                    <div class="flex flex-col">
+                                        <p class="text-secondosiblue text-sm">{{recent_logged_in_staff.first_name}}
+                                            {{recent_logged_in_staff.last_name}}</p>
+                                        <p class="text-gray-500 text-sm">{{recent_logged_in_staff.last_login|date:"g:i A"}}</p>
+                                    </div>
+                                </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
+            <!-- CONNECTED USERS / RECENTLY LOGGED IN ON MOBILE -->
+            <div class="grid grid-cols-1 s:grid-cols-2 gap-5 px-5 s:px-9 pb-5 xxlg1:hidden">
+                <!-- CONNECTED USERS ON MOBILE -->
+                <div class="w-full bg-white shadow-md rounded-md p-5">
+                    <div class="w-full h-full flex flex-col gap-3 items-center">
+                        <div class="w-full flex justify-center items-center">
+                            <p class="text-[20px] text-secondosiblue font-bold text-center">
+                                Connected Users
+                            </p>
+                        </div>
+
+                        <div class="w-full flex flex-wrap gap-4">
+
+                            {% for online in online_staff_profiles %}
+                            <div class="flex flex-col justify-center items-center gap-1">
+                                <div class="w-[30px] h-[30px] rounded-full">
+                                    <img src="{{online.image.url}}" alt="User Image"
+                                        class="w-full h-full rounded-full object-cover">
+                                </div>
+                                <p class="text-gray-500 text-[10px] font-light">{{online.user.first_name}}</p>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- RECENTLY LOGGED IN USERS ON MOBILE -->
+                <div
+                    class="w-full flex flex-col justify-center items-center gap-3 bg-white shadow-md rounded-md p-5 logged-in-container">
+                    <div class="w-full flex justify-center items-center">
+                        <p class="text-[20px] text-secondosiblue font-bold text-center">Recently Logged In</p>
+                    </div>
+                    <div class="w-full recentltLoggedCustomersContainer">
+                        <div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
+                            <button
+                                class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton"
+                                style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Customers</button>
+                            <button
+                                class="w-full text-secondosiblue text-sm cursor-pointer p-2 staffButton">Staffs</button>
+                        </div>
+                        <div class="w-full mt-3 flex flex-col gap-3 recentltLoggedCustomers">
+                            {% for recent_logged_in_customer in recent_logged_in_customers %}
+                            <div class="w-full flex justify-start items-center gap-2">
+                                <div
+                                    class="w-[50px] h-[50px] bg-secondosiblue flex justify-center items-center rounded-full text-white">
+                                    <p>{{recent_logged_in_customer.first_name|slice:":1"}}{{recent_logged_in_customer.last_name|slice:":1"}}
+                                    </p>
+                                </div>
+                                <div class="flex flex-col">
+                                    <p class="text-secondosiblue text-sm">{{recent_logged_in_customer.first_name}}
+                                        {{recent_logged_in_customer.last_name}}</p>
+                                    <p class="text-gray-500 text-sm">
+                                        {{recent_logged_in_customer.last_login|date:"g:i A"}}</p>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <div class="w-full hidden recentltLoggedStaffsContainer">
+                        <div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
+                            <button
+                                class="w-full rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton">Customers</button>
+                            <button
+                                class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 staffButton"
+                                style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Staffs</button>
+                        </div>
+                        <div class="w-full mt-3">
+                            {% for recent_logged_in_staff in recent_logged_in_staffs %}
+                            <div class="w-full flex justify-start items-center gap-2">
+                                <div class="relative">
+                                    <div class="w-[50px] h-[50px] rounded-full">
+                                        <img src="{{recent_logged_in_staff.staffprofile.image.url}}"
+                                            class="w-full h-full object-cover rounded-full">
+                                    </div>
+                                    {% if recent_logged_in_staff.staffprofile in online_staff_profiles %}
+                                        <div
+                                            class="w-[12px] h-[12px] absolute rounded-full bg-green-600 bottom-0 right-0 border-2 border-white">
+                                        </div>
+                                        {% else %}
+                                        <div
+                                            class="w-[12px] h-[12px] absolute rounded-full bg-red-500 bottom-0 right-0 border-2 border-white">
+                                        </div>
+                                    {% endif %}
+                                </div>
+                                <div class="flex flex-col">
+                                    <p class="text-secondosiblue text-sm">{{recent_logged_in_staff.first_name}}
+                                        {{recent_logged_in_staff.last_name}}</p>
+                                    <p class="text-gray-500 text-sm">
+                                        {{recent_logged_in_staff.last_login|date:"g:i A"}}</p>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            </div>
 
             <!-- MOBILE FOOTER -->
             <div class="bg-osiblue h-fit py-2 mobileFooter">
@@ -1103,8 +1372,10 @@
         </div>
     </div>
 
+
     <!-- POPUP MODAL -->
-    <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
+    <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0"
+        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">
@@ -1127,7 +1398,7 @@
         </div>
     </div>
 
-    <script type="module" src='{% static "js/pop-modals.js" %}'></script>  
+    <script type="module" src='{% static "js/pop-modals.js" %}'></script>
 
     <!---------------------- JS SCRIPTS -------------------->
     <!-- SIDE BAR SCRIPT -->
@@ -1160,6 +1431,11 @@
     <!-- NOTIFICATIONS SIDE BAR -->
     <script type="text/javascript" src='{% static "js/notifications-side-bar.js" %}'></script>
 
+    <!-- TO SWITCH BETWEEN THE CUSTOMERS AND STAFFS TABS IN THE RECENTLY LOGGED IN CONTAINER -->
+    <script type="text/javascript" src='{% static "js/recently-logged-in-users.js" %}'></script>
+
+    <!-- MODULES DROP DOWN ON MOBILE -->
+    <script type="text/javascript" src='{% static "js/accessibilities-dropdown.js" %}'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/recent-activities.html b/osinaweb/osinacore/templates/recent-activities.html
index bbdb3f5c..41dc8156 100644
--- a/osinaweb/osinacore/templates/recent-activities.html
+++ b/osinaweb/osinacore/templates/recent-activities.html
@@ -124,7 +124,6 @@
 </div>
 
 
-
 {% if latest_statuses_time_ago %}
 {% for latest in latest_statuses_time_ago %}
 <div class="w-full flex flex-col py-3">
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 4a9d6ce6..34b3c6e1 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -192,6 +192,7 @@ def home(request, *args, **kwargs):
             total_time_worked = project.total_time_worked(request.user)
             open_tasks = project.open_tasks_count(request.user)
             pinned_projects_with_time.append({'project': project, 'total_time_worked': total_time_worked, 'open_tasks': open_tasks})
+
         
         context = {
             'notes': notes,
@@ -203,7 +204,9 @@ def home(request, *args, **kwargs):
 
 
     else:
+        customer_projects = Project.objects.filter(customer=request.user.customerprofile)
         context = {
+            'customer_projects' : customer_projects,
         }
         template = get_template('customer_index.html')
         return HttpResponse(template.render(context, request))
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index e87584a4..e6d6c33f 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -1161,6 +1161,10 @@ video {
   height: 24rem;
 }
 
+.h-\[1000px\] {
+  height: 1000px;
+}
+
 .h-\[100px\] {
   height: 100px;
 }
@@ -1173,10 +1177,6 @@ video {
   height: 10px;
 }
 
-.h-\[1283px\] {
-  height: 1283px;
-}
-
 .h-\[12px\] {
   height: 12px;
 }
@@ -2116,6 +2116,16 @@ video {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
+.border-green-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
+
 .border-green-700 {
   --tw-border-opacity: 1;
   border-color: rgb(21 128 61 / var(--tw-border-opacity));
@@ -2201,16 +2211,6 @@ video {
   border-color: rgb(202 138 4 / var(--tw-border-opacity));
 }
 
-.border-green-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
-}
-
-.border-green-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
-}
-
 .border-r-transparent {
   border-right-color: transparent;
 }
@@ -3610,6 +3610,20 @@ video {
   padding: 0px 30px;
 }
 
+/* Add transition to the dropdown content */
+
+#accessibilitesDropDown {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.8s ease-in-out;
+}
+
+/* Set max-height to reveal dropdown content */
+
+#accessibilitesDropDown.visible {
+  max-height: 1000px;
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -4086,6 +4100,10 @@ video {
     display: flex;
   }
 
+  .xlg1\:grid {
+    display: grid;
+  }
+
   .xlg1\:hidden {
     display: none;
   }
diff --git a/osinaweb/static/js/accessibilities-dropdown.js b/osinaweb/static/js/accessibilities-dropdown.js
new file mode 100644
index 00000000..d25c350f
--- /dev/null
+++ b/osinaweb/static/js/accessibilities-dropdown.js
@@ -0,0 +1,21 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const dropDown = document.getElementById('accessibilitesDropDown');
+    const dropDownArrowUp = document.querySelector('.arrowUp');
+    const dropDownArrowDown = document.querySelector('.arrowDown');
+
+    document.getElementById('openAccessibilitiesDropDown').addEventListener('click', function() {
+        dropDown.classList.toggle('visible');
+        dropDownArrowUp.classList.toggle('hidden');
+        dropDownArrowDown.classList.toggle('hidden');
+        
+        // Add mt-3 class immediately when dropdown is opened
+        if (dropDown.classList.contains('visible')) {
+            dropDown.classList.add('mt-3');
+        } else {
+            // Delay the removal of mt-3 class when dropdown is closed
+            setTimeout(function() {
+                dropDown.classList.remove('mt-3');
+            }, 800); // Same duration as transition in CSS
+        }
+    });
+});
\ No newline at end of file
diff --git a/osinaweb/static/js/recently-logged-in-users.js b/osinaweb/static/js/recently-logged-in-users.js
new file mode 100644
index 00000000..2c827e01
--- /dev/null
+++ b/osinaweb/static/js/recently-logged-in-users.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const customerButtons = document.querySelectorAll('.customerButton');
+    const staffButtons = document.querySelectorAll('.staffButton');
+    const customerContainers = document.querySelectorAll('.recentltLoggedCustomersContainer');
+    const staffContainers = document.querySelectorAll('.recentltLoggedStaffsContainer');
+
+    customerButtons.forEach(button => {
+        button.addEventListener('click', function () {
+            customerContainers.forEach(container => container.classList.remove('hidden'));
+            staffContainers.forEach(container => container.classList.add('hidden'));
+        });
+    });
+
+    staffButtons.forEach(button => {
+        button.addEventListener('click', function () {
+            staffContainers.forEach(container => container.classList.remove('hidden'));
+            customerContainers.forEach(container => container.classList.add('hidden'));
+        });
+    });
+});