diff --git a/app.py b/app.py
index aa9e2b5..7b9201a 100644
--- a/app.py
+++ b/app.py
@@ -170,6 +170,21 @@ class Room(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     name = db.Column(db.String(128), nullable=False, unique=True)
     title = db.Column(db.String(128), nullable=True)
+    # Store as a comma-separated string
+    active_users = db.Column(db.Text, default="")
+
+    def add_user(self, username):
+        users = set(self.active_users.split(",")) if self.active_users else set()
+        users.add(username)
+        self.active_users = ",".join(users)
+
+    def remove_user(self, username):
+        users = set(self.active_users.split(",")) if self.active_users else set()
+        users.discard(username)
+        self.active_users = ",".join(users)
+
+    def get_active_users(self):
+        return self.active_users.split(",") if self.active_users else []
 
 
 class Message(db.Model):
@@ -432,6 +447,18 @@ def on_join(data):
     room_name = data["room_name"]
     room = get_room(room_name)
 
+    room.add_user(data["username"])
+
+    # Emit the active users list to the new joiner
+    emit("active_users", {"users": room.get_active_users()}, room=request.sid)
+    # Emit the active users list to everyone in the room
+    emit(
+        "active_users",
+        {"users": room.get_active_users()},
+        room=room_name,
+        include_self=False,
+    )
+
     # this makes the client start listening for new events for this room.
     join_room(room_name)
 
@@ -466,12 +493,14 @@ def on_join(data):
     if room.title is None and message_count >= 6:
         room.title = gpt_generate_room_title(previous_messages)
         db.session.add(room)
-        db.session.commit()
         socketio.emit("update_room_title", {"title": room.title}, room=room.name)
         # Emit an event to update this rooms title in the sidebar for all users.
         updated_room_data = {"id": room.id, "name": room.name, "title": room.title}
         socketio.emit("update_room_list", updated_room_data, room=None)
 
+    # commit the active user list and title to database.
+    db.session.commit()
+
     # Broadcast to all clients in the room that a new user has joined.
     # Here, `room=room` ensures the message is sent to everyone in that specific room.
     emit(
@@ -479,11 +508,6 @@ def on_join(data):
         {"id": None, "content": f"{data['username']} has joined the room."},
         room=room.name,
     )
-    emit(
-        "user_joined",
-        {"username": data["username"]},
-        room=room.name,
-    )
     emit(
         "chat_message",
         {
@@ -1048,7 +1072,9 @@ def get_openai_client_and_model(model_name="NousResearch/Hermes-3-Llama-3.1-8B")
     if is_vllm_model:
         openai_client = OpenAI(base_url=vllm_endpoint, api_key=vllm_api_key)
     elif is_ollama_model:
-        openai_client = OpenAI(base_url="http://127.0.0.1:11434/v1", api_key=vllm_api_key)
+        openai_client = OpenAI(
+            base_url="http://127.0.0.1:11434/v1", api_key=vllm_api_key
+        )
     elif is_xai_model:
         openai_client = OpenAI(base_url="https://api.x.ai/v1", api_key=xai_api_key)
     elif is_google_model:
diff --git a/templates/chat.html b/templates/chat.html
index 3ac528d..ec552a2 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -115,36 +115,22 @@ function updateQueryString() {
 let activeUsers = {};
 
 // Function to update the active user list in the DOM
-function updateActiveUserList() {
+function updateActiveUserList(users) {
     const userListElement = document.getElementById("active-users");
     userListElement.innerHTML = ''; // Clear the current list
 
     // Populate the list with active users
-    for (const username in activeUsers) {
+    users.forEach(username => {
         const userItem = document.createElement("li");
         userItem.textContent = username;
         userListElement.appendChild(userItem);
-    }
+    });
 }
 
-// Socket event when a user joins
-socket.on("user_joined", (data) => {
-    activeUsers[data.username] = true; // Add user to the active list
-    updateActiveUserList(); // Update the DOM
-});
 
-// Socket event when a user leaves
-socket.on("user_left", (data) => {
-    delete activeUsers[data.username]; // Remove user from the active list
-    updateActiveUserList(); // Update the DOM
-});
-
-// Handle socket disconnection to update the user list
-socket.on("disconnect", () => {
-    // Optionally, clear the active users list or handle specific user disconnection
-    // For example, you might want to remove the current user from the list
-    delete activeUsers[username]; // Remove the current user
-    updateActiveUserList(); // Update the DOM
+// Update active users list whenever the event is received
+socket.on("active_users", (data) => {
+    updateActiveUserList(data.users);
 });