diff --git a/src/components/Dashboard/UpcomingBookings.vue b/src/components/Dashboard/UpcomingBookings.vue
index b1a2dc2..dabada7 100644
--- a/src/components/Dashboard/UpcomingBookings.vue
+++ b/src/components/Dashboard/UpcomingBookings.vue
@@ -59,7 +59,7 @@ onMounted(() => {
       <h3 v-else>No Real-Time Sessions Booked</h3>
         <div class="table-summary">
         <div v-for="session in sortedSessions" :key="session.id">
-            <div><a @click.prevent="selectSession(session.id)">{{ formatDate(session.start) }}</a></div><div>{{ formatTime(session.start) }}</div>
+            <div><a @click.prevent="selectSession(session.id)" class="date">{{ formatDate(session.start) }}</a></div><div>{{ formatTime(session.start) }}</div>
             <button @click="deleteSession(session.id)" class="deleteButton">x</button>
         </div>
         </div>
diff --git a/src/tests/integration/components/upcomingBookings.test.js b/src/tests/integration/components/upcomingBookings.test.js
index e54eb81..65e4c18 100644
--- a/src/tests/integration/components/upcomingBookings.test.js
+++ b/src/tests/integration/components/upcomingBookings.test.js
@@ -52,4 +52,22 @@ describe('UpcomingBookings.vue', () => {
     const h3Text = wrapper.find('h3').text()
     expect(h3Text).toBe('Upcoming Bookings')
   })
+
+  it('deletes a session on click', async () => {
+    fetchApiCall.mockImplementation(({ url }) => {
+      if (url.includes('session1')) {
+        sessionsStore.sessions.results = sessionsStore.sessions.results.filter(session => session.id !== 'session1')
+      }
+    })
+    const deleteButtons = wrapper.findAll('.deleteButton')
+    expect(deleteButtons.length).toBe(2)
+    await deleteButtons.at(0).trigger('click')
+    expect(fetchApiCall).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: 'http://mock-api.com/realtime/session1/',
+        method: 'DELETE'
+      })
+    )
+    expect(sessionsStore.sessions.results.length).toBe(1)
+  })
 })