diff --git a/db.sqlite3 b/db.sqlite3
new file mode 100644
index 0000000..20fc4fb
Binary files /dev/null and b/db.sqlite3 differ
diff --git a/waiting_room/tasks.py b/waiting_room/tasks.py
index 31411b8..a7ccaa3 100644
--- a/waiting_room/tasks.py
+++ b/waiting_room/tasks.py
@@ -1,5 +1,6 @@
 from huey.contrib.djhuey import task
 import operator
+from django.template.loader import render_to_string
 from itertools import permutations
 from collections import Counter
 from functools import reduce
@@ -7,13 +8,16 @@ from math import factorial
 from channels.layers import get_channel_layer
 from asgiref.sync import async_to_sync
 
-def render_progress_bar(group_name, message):
+def render_progress_bar(group_name, progress, result=None):
     channel_layer = get_channel_layer()
     async_to_sync(channel_layer.group_send)(
         group_name,
         {
             'type': 'channel_message',
-            'message': f'<div id="notification">{message}</div>',
+            'message': render_to_string('components/tasks/update.html', {
+                'progress': progress,
+                'result': result,
+            }),
         }
     )
 
@@ -64,7 +68,7 @@ def calculate_min_distance(group_name):
             route_distance += distances[perm[-1]][perm[0]]  # Back to the start city
             shortest_route = min(shortest_route, route_distance)
 
-        render_progress_bar(group_name, 100)
+        render_progress_bar(group_name, 100, shortest_route)
         return shortest_route
 
     return calculate_shortest_route(distances)
diff --git a/waiting_room/templates/base.html b/waiting_room/templates/base.html
index adf3b37..61d5b04 100644
--- a/waiting_room/templates/base.html
+++ b/waiting_room/templates/base.html
@@ -6,11 +6,16 @@
     <title>{% block title %}Waiting Room{% endblock %}</title>
     <script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
+    <script>
+     if (!localStorage.getItem('userId')) {
+	 localStorage.setItem('userId', '{{ user_id }}');
+     }
+    </script>
 </head>
 <body>
     <main>
-        {% include 'progress_bar.html' %}
-        <section>{% block content %}{% endblock %}</section>
+        {% include 'components/tasks/layout.html' %}
+        {% block content %}{% endblock %}
     </main>
 </body>
 </html>
diff --git a/waiting_room/templates/components/tasks/layout.html b/waiting_room/templates/components/tasks/layout.html
new file mode 100644
index 0000000..38d56f3
--- /dev/null
+++ b/waiting_room/templates/components/tasks/layout.html
@@ -0,0 +1,15 @@
+<section
+    id="component-notification"
+    hx-ext="ws"
+    style="
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	padding: 2rem;
+	background: lightgray;
+	">
+    {% include 'components/tasks/update.html' %}
+</section>
+<script>
+ document.querySelector('#component-notification').setAttribute('ws-connect', '/ws/' + localStorage.getItem('userId') + '/');
+</script>
diff --git a/waiting_room/templates/components/tasks/update.html b/waiting_room/templates/components/tasks/update.html
new file mode 100644
index 0000000..cbf1b57
--- /dev/null
+++ b/waiting_room/templates/components/tasks/update.html
@@ -0,0 +1,11 @@
+<div id="component-notification__update">
+    <h1>Task</h1>
+    {% if result %}
+    <h2>Done!</h2>
+    <a href="{% url 'waiting_room:index' %}?result={{ result }}">Go to result</a>
+    {% elif progress %}
+    <progress value="{{ progress }}" max="100">{{ progress }}</progress>
+    {% else %}
+    <p>Nothing</p>
+    {% endif %}
+</div>
diff --git a/waiting_room/templates/index.html b/waiting_room/templates/index.html
index 7f924d4..6c81b58 100644
--- a/waiting_room/templates/index.html
+++ b/waiting_room/templates/index.html
@@ -5,13 +5,16 @@
 {% block content %}
     <h1>Index</h1>
     <section
+	id="form-start-task"
 	hx-ext="ws"
-	ws-connect="/ws/nombre_temporal/"
     >
 	<form id="form" ws-send>
 	    <input type="submit" name="task" value="calculate">
 	</form>
     </section>
+    <script>
+     document.querySelector('#form-start-task').setAttribute('ws-connect', '/ws/' + localStorage.getItem('userId') + '/');
+    </script>
     <section>
 	{% if result %}
         <h2>The result is {{ result }}</h2>
diff --git a/waiting_room/templates/progress_bar.html b/waiting_room/templates/progress_bar.html
deleted file mode 100644
index 51ee509..0000000
--- a/waiting_room/templates/progress_bar.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<section
-    hx-ext="ws"
-    ws-connect="/ws/nombre_temporal/"
-    hx-swap-oob="innerHTML:notification"
-    style="
-	    position: fixed;
-	    right: 0;
-	    bottom: 0;
-	    padding: 2rem;
-	    background: lightgray;
-	    ">
-    <div id="notification"></div>
-    <!-- <h1>Task</h1>
-	 {% if result %}
-         <h3>Done!</h3>
-         <a href="{% url 'waiting_room:index' %}?result={{ result }}">Show result</a>
-	 {% else %}
-         <progress value="{{ progress }}" max="100">{{ progress }}</progress>
-	 {% endif %} -->
-</section>
diff --git a/waiting_room/views.py b/waiting_room/views.py
index 8f1fe42..c3b6913 100644
--- a/waiting_room/views.py
+++ b/waiting_room/views.py
@@ -1,8 +1,17 @@
 from django.shortcuts import render
+import uuid
+
+def make_user_id():
+    return str(uuid.uuid4()).replace('-', '')
 
 def index(request):
     result = request.GET.get('result', None)
-    return render(request, 'index.html', {'result': result})
+    return render(request, 'index.html', {
+        'result': result,
+        'user_id': make_user_id(),
+    })
 
 def about_us(request):
-    return render(request, 'about_us.html')
+    return render(request, 'about_us.html', {
+        'user_id': make_user_id(),
+    })
