diff --git a/app.py b/app.py
index 50d2631..be6e1e7 100644
--- a/app.py
+++ b/app.py
@@ -48,8 +48,11 @@ class Workout(db.Model):
     user_id = db.Column(db.Integer, db.ForeignKey(
         'users.id', ondelete='CASCADE'), nullable=False)
     created_at = db.Column(db.DateTime, nullable=False, default=db.func.now())
+    bike_id = db.Column(db.Integer, db.ForeignKey(
+        'bikes.id', ondelete='CASCADE'), nullable=False)
     cadence_readings = db.relationship(
         'CadenceReading', backref='workout', lazy=True)
+    bike = db.relationship('Bike', backref='workouts', lazy=True)
 
 
 class CadenceReading(db.Model):
@@ -109,11 +112,13 @@ def workouts(user_id):
         return render_template('workouts_list.html', workouts=workouts_data)
 
     elif request.method == 'POST':
+        user = User.query.get(user_id)
+
         data = request.json
         data = data['workout']
 
         # create a new workout
-        workout = Workout(user_id=user_id)
+        workout = Workout(user_id=user_id, bike_id=user.bike_id)
         db.session.add(workout)
         db.session.commit()
 
@@ -199,6 +204,18 @@ def render_users_and_workouts():
     users_data = []
     for user in users:
         workouts = get_workouts_for_user(user.id)
+        if not workouts:
+            user_data = {
+                'id': user.id,
+                'name': user.name,
+                'bike_id': user.bike_id,
+                'workouts_count': 0,
+                'workouts': [],
+                'workout_counts_by_week': 0,
+                'duration_by_week': 0
+            }
+            users_data.append(user_data)
+            continue
         workout_counts_by_week = []
         duration_by_week = []
         # get start date from last workout
@@ -236,6 +253,10 @@ def render_users_and_workouts():
             'duration_by_week': duration_by_week
         }
         users_data.append(user_data)
+
+    if htmx:
+        render_template('users_and_workouts_wrapper.html',
+                        users=users_data, bikes=Bike.query.all())
     return render_template('users_and_workouts.html', users=users_data, bikes=Bike.query.all())
 
 
@@ -265,7 +286,8 @@ def get_workouts_for_user(user_id):
                 'duration_minutes': duration.total_seconds() / 60,
                 'average_rpm': int(average_rpm),
                 'calories': int(calories),
-                'distance': int(distance)
+                'distance': int(distance),
+                'bike_display_name': workout.bike.display_name
             })
     return workouts_data
 
diff --git a/templates/users.html b/templates/users.html
index dac0484..b0ade3c 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -1,8 +1,8 @@
-<form class="block p-6 bg-white border  border-gray-200 rounded-lg shadow mt-4" hx-post="{{ url_for('users') }}"
+<form class="block p-6 bg-white border border-gray-200 rounded-lg shadow mt-8" hx-post="{{ url_for('users') }}"
     hx-target="#users-container">
 
-    <div class="flex flex-wrap mb-2">
-        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+    <div class="grid gap-4 grid-cols-1 md:grid-cols-3 mb-2 mb-2">
+        <div class="w-full mb-6 md:mb-0">
             <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
                 Name
             </label>
@@ -10,11 +10,11 @@
                 class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                 id="grid-city" type="text" placeholder="Full name" name="name" required>
         </div>
-        <div class="w-full md:w-1/2 px-3 mb-4">
+        <div class="w-full  mb-4 ">
             <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
                 Bike
             </label>
-            <div class="relative">
+            <div class="relative ml-0">
                 <select
                     class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                     id="new-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required>
@@ -29,7 +29,7 @@
         </div>
 
         <button
-            class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded ml-3 w-full md:w-auto"
+            class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2.5 mt-5 my-auto px-4 rounded w-full"
             type="submit">
             Add User
         </button>
diff --git a/templates/users_and_workouts.html b/templates/users_and_workouts.html
index 74aeccc..ff7fa69 100644
--- a/templates/users_and_workouts.html
+++ b/templates/users_and_workouts.html
@@ -55,17 +55,12 @@
         <div class="flex flex-col justify-between">
             <div class="w-full px-4 mb-8">
 
-                <div class="bg-white shadow-md rounded-lg overflow-hidden" id="users-container">
-                    {% for u in users %}
-                    {% with user=u, workouts=u.workouts, bikes=bikes %}
-                    {% include 'workouts_list.html' %}
-                    {% endwith %}
-                    {% endfor %}
-
+                <div class="shadow-md rounded-lg overflow-hidden" id="users-container">
                     {% with users=users, bikes=bikes %}
-                    {% include 'users.html' %}
+                    {% include 'users_and_workouts_wrapper.html' %}
                     {% endwith %}
 
+
                 </div>
             </div>
             <div class="w-full px-4 mb-8" id="container">
diff --git a/templates/users_and_workouts_wrapper.html b/templates/users_and_workouts_wrapper.html
new file mode 100644
index 0000000..c055a38
--- /dev/null
+++ b/templates/users_and_workouts_wrapper.html
@@ -0,0 +1,9 @@
+{% for u in users %}
+{% with user=u, workouts=u.workouts, bikes=bikes %}
+{% include 'workouts_list.html' %}
+{% endwith %}
+{% endfor %}
+
+{% with users=users, bikes=bikes %}
+{% include 'users.html' %}
+{% endwith %}
\ No newline at end of file
diff --git a/templates/workouts_list.html b/templates/workouts_list.html
index 3ee87d8..cb83d07 100644
--- a/templates/workouts_list.html
+++ b/templates/workouts_list.html
@@ -1,5 +1,4 @@
-<a href="#"
-    class="block p-6 bg-white border  border-gray-200 rounded-lg rounded-b-none shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+<div class="block p-6 bg-white border border-b-0 border-gray-200 rounded-lg rounded-b-none shadow">
     <div class="flex flex-row justify-between">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ u.name }}</h5>
         <div hx-delete="{{ url_for('delete_user', user_id=user.id) }}"
@@ -15,37 +14,39 @@
 
         </div>
     </div>
-    <div class="w-full md:w-1/2 ">
-        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
-            Bike
-        </label>
-        <div class="relative">
-            <select
-                class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-                id="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required
-                hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
-                {% for b in bikes %}
-                <option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
-                </option>
-                {% endfor %}
-            </select>
-            <script>
-                te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue({{ user.bike_id | safe }});
-            </script>
+    <div class="flex flex-col md:flex-row">
+        <div class="w-full">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
+                Bike
+            </label>
+            <div class="relative">
+                <select
+                    class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                    id="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id"
+                    required hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
+                    {% for b in bikes %}
+                    <option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
+                    </option>
+                    {% endfor %}
+                </select>
+                <script>
+                    te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue("{{ user.bike_id | safe }}");
+                </script>
+            </div>
         </div>
+        <button
+            class="shadow mt-6 bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded w-full ml-0 md:ml-4"
+            type="submit">New Workout</button>
     </div>
-    <button
-        class="shadow mt-4 bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded w-full md:w-auto"
-        type="submit">New Workout</button>
-</a>
+</div>
 
-<div class="border border-neutral-200 border-b-lg bg-white dark:border-neutral-600 dark:bg-neutral-800">
+<div class="border border-t-0  border-neutral-200 border-b-lg bg-white dark:border-neutral-600 dark:bg-neutral-800">
     <h2 class="mb-0">
         <button
             class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
             type="button">
             <div>
-                <h2 class="text-lg font-medium text-gray-900">View 16 workouts</h2>
+                <h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>
                 <p class="text-sm text-gray-500">Duration: 35 days | Weekly average workouts: 25 mins|
                     Calories: 84 | Distance: 17</p>
             </div>
@@ -66,8 +67,14 @@
                     <button
                         class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
                         type="button">
-                        <div>
-                            <h2 class="text-lg font-medium text-gray-900">{{ w.start_time }}</h2>
+                        <div class="w-full">
+                            <div class="flex flex-row justify-between">
+                                <h2 class="text-lg font-medium text-gray-900">{{ w.start_time }}
+                                </h2>
+                                <h2 class="text-md font-small text-gray-600 pr-8">{{ w.bike_display_name }}
+                                </h2>
+                            </div>
+
                             <p class="text-sm text-gray-500">Duration: {{ w.duration }} | Average RPM: {{ w.average_rpm
                                 }} |
                                 Calories: {{ w.calories }} | Distance: {{ w.distance }}</p>