diff --git a/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc b/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc
index 3353e458..9208d6a2 100644
Binary files a/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc and b/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/custom_context.py b/osinaweb/osinacore/custom_context.py
index 32e43357..668e144b 100644
--- a/osinaweb/osinacore/custom_context.py
+++ b/osinaweb/osinacore/custom_context.py
@@ -21,6 +21,10 @@ def calculate_time_ago(status):
 
 
 def utilities(request):
+    user_ids_online = Connection.objects.filter(status='Online').values('user_id').annotate(last_online=Max('date')).values_list('user_id', flat=True)
+
+    # Now, filter StaffProfile objects associated with these user ids
+    online_staff_profiles = StaffProfile.objects.filter(user_id__in=user_ids_online)
     notes = None
     recent_note = None
     if request.user.is_authenticated:
@@ -63,6 +67,7 @@ def utilities(request):
             'latest_statuses_time_ago': latest_statuses_time_ago,  
             'notes' : notes, 
             'recent_note' : recent_note,
+            'online_staff_profiles' : online_staff_profiles,
 }
 
 
@@ -99,7 +104,7 @@ def last_status(request):
 
     
 
-    return {'last_status' : last_status, 'current_date' : current_date, 'minutes_ago' : minutes_ago, 'hours_minutes_ago': hours_minutes_ago,}
+    return {'last_status' : last_status, 'current_date' : current_date, 'minutes_ago' : minutes_ago, 'hours_minutes_ago': hours_minutes_ago}
 
 
 
diff --git a/osinaweb/osinacore/templates/index.html b/osinaweb/osinacore/templates/index.html
index 412e1d66..6d7eddd1 100644
--- a/osinaweb/osinacore/templates/index.html
+++ b/osinaweb/osinacore/templates/index.html
@@ -598,151 +598,25 @@
             <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">14</span>
-                        Connected User</p>
+                            class="text-green-700"></span>
+                        Connected Users</p>
                 </div>
     
                 <div class="w-full flex flex-wrap gap-2">
+
+                    {% for online in online_staff_profiles %}
                     <div class="relative userProfileContainer">
                         <div
                             class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/avatar3.png' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/avatar3.png' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/avatar3.png' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/avatar3.png' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
-                        </div>
-                        <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
-                                class="w-full h-full rounded-full object-cover">
-                        </div>
-                    </div>
-                    <div class="relative userProfileContainer">
-                        <div
-                            class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
-                            <p>Salim Elliye</p>
+                            <p>{{online.user.first_name}}</p>
                         </div>
                         <div class="w-[30px] h-[30px] rounded-full userImage">
-                            <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
+                            <img src="{{online.image.url}}" alt="User Image"
                                 class="w-full h-full rounded-full object-cover">
                         </div>
                     </div>
+                    {% endfor %}
+
                 </div>
             </div>
         </div>
diff --git a/osinaweb/osinaweb/__pycache__/middleware.cpython-310.pyc b/osinaweb/osinaweb/__pycache__/middleware.cpython-310.pyc
index 6b08a6a5..c97daa4f 100644
Binary files a/osinaweb/osinaweb/__pycache__/middleware.cpython-310.pyc and b/osinaweb/osinaweb/__pycache__/middleware.cpython-310.pyc differ