diff --git a/desks-web-app/src/components/booking-components/AvailabilityCard.vue b/desks-web-app/src/components/booking-components/AvailabilityCard.vue
index 6262f2c..f77adec 100644
--- a/desks-web-app/src/components/booking-components/AvailabilityCard.vue
+++ b/desks-web-app/src/components/booking-components/AvailabilityCard.vue
@@ -106,7 +106,7 @@ export default defineComponent({
 
       return "success"
 
-    }
+    },
   }
 });
 </script>
diff --git a/desks-web-app/src/components/booking-components/BookingsCards.vue b/desks-web-app/src/components/booking-components/BookingsCards.vue
new file mode 100644
index 0000000..b983ab2
--- /dev/null
+++ b/desks-web-app/src/components/booking-components/BookingsCards.vue
@@ -0,0 +1,97 @@
+<template>
+<v-row class="bookingsRow justify-start flex-0-0">
+  <v-col
+      v-for="item in [...bookings].sort(compareBookingsByTime)"
+      :key="item.id"
+    class="bookingsCol">
+    <v-card
+        :variant="'flat'"
+        class="card"
+    >
+      <template v-slot:append>
+        <v-btn icon elevation="0" >
+          <v-icon>mdi-dots-vertical</v-icon>
+          <booking-context-menu activator="parent" :booking="item" @edit="editBooking(item)"></booking-context-menu>
+        </v-btn>
+      </template>
+      <template v-slot:title v-if="dateConverter(item.start).startOf('day').isSame(moment().startOf('day'))">
+        Today
+      </template>
+      <template v-slot:title v-else-if="dateConverter(item.start).isSameOrBefore(dateConverter(item.start).add(1, 'week'))">
+        {{ dateConverter(item.start).format("DD.MM.YYYY") }}
+      </template>
+      <template v-slot:title v-else>
+        {{ $format.date(item.start) }}
+      </template>
+      <template v-slot:subtitle>
+        {{ item.room.name }}
+      </template>
+
+
+      <v-card-text>
+
+         <v-chip>{{ $format.time(item.start) }} - {{ $format.time(item.end) }}</v-chip>
+
+      </v-card-text>
+    </v-card>
+  </v-col>
+</v-row>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import Booking from "@/models/Booking";
+import BookingContextMenu from "@/components/booking-components/BookingContextMenu.vue";
+import moment from "moment/moment";
+import {mapActions} from "vuex";
+import {Moment} from "moment";
+
+export default defineComponent({
+  name: "BookingsCards",
+  components: {BookingContextMenu},
+  // type inference enabled
+  props: {
+    bookings: Array
+  },
+  methods: {
+    ...mapActions("bookings", ["leaveEarly", "deleteBooking"]),
+    editBooking(booking: Booking) {
+      this.$emit("editBooking", booking)
+    },
+    moment: () => moment(),
+
+    compareBookingsByTime(a: Booking, b: Booking): number {
+      return moment(a.start).diff(moment(b.start))
+    },
+
+    isOngoing(booking:Booking): boolean{
+      return moment().isBetween(booking.start,booking.end)
+    },
+    dateConverter(d: Date): Moment {
+      return moment(d);
+    },
+    onEdite() {
+      this.$emit("edit")
+    }
+  }
+
+})
+</script>
+
+<style>
+
+@media screen and (min-device-width: 970px) {
+  .bookingsRow {
+    min-width: 20%;
+    width: fit-content;
+  }
+}
+
+.bookingsCol {
+  flex-grow: 0;
+}
+
+.card {
+  width: max-content;
+}
+</style>
diff --git a/desks-web-app/src/components/booking-components/BookingsTable.vue b/desks-web-app/src/components/booking-components/BookingsTable.vue
deleted file mode 100644
index ecc3446..0000000
--- a/desks-web-app/src/components/booking-components/BookingsTable.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <v-table>
-    <thead>
-    <tr>
-      <th class="text-left w-33">
-        Room
-      </th>
-      <th class="text-left w-25">
-        Date
-      </th>
-      <th class="text-left">
-        Start
-      </th>
-      <th class="text-left">
-        End
-      </th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody>
-
-    <tr
-        v-for="item in [...bookings].sort(compareBookingsByTime)"
-        :key="item.id"
-        @click="$emit('openBooking', item)"
-    >
-      <td>{{ item.room.name }}</td>
-      <td>{{ $format.date(item.start) }}</td>
-      <td>{{ $format.time(item.start) }}</td>
-      <td>{{ $format.time(item.end) }}</td>
-      <td class="d-flex justify-end align-center">
-        <v-btn v-if="isOngoing(item)" @click.stop.prevent="() => leaveEarly(item)" variant="flat">Leave now</v-btn>
-        <v-btn
-            icon
-            elevation="0"
-        >
-          <v-icon>mdi-dots-vertical</v-icon>
-          <booking-context-menu activator="parent" :booking="item" @edit="editBooking(item)"></booking-context-menu>
-        </v-btn>
-      </td>
-    </tr>
-    </tbody>
-  </v-table>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import Booking from "@/models/Booking";
-import BookingContextMenu from "@/components/booking-components/BookingContextMenu.vue";
-import moment from "moment/moment";
-import {mapActions} from "vuex";
-
-export default defineComponent({
-  name: "BookingsTable",
-  components: {BookingContextMenu},
-  // type inference enabled
-  props: {
-    bookings: Array
-  },
-  methods: {
-    ...mapActions("bookings", ["leaveEarly"]),
-    editBooking(booking: Booking) {
-      this.$emit("editBooking", booking)
-    },
-
-    compareBookingsByTime(a: Booking, b: Booking): number {
-      return moment(a.start).diff(moment(b.start))
-    },
-
-    isOngoing(booking:Booking): boolean{
-      return moment().isBetween(booking.start,booking.end)
-    }
-  }
-
-})
-</script>
-
-<style scoped>
-
-</style>
diff --git a/desks-web-app/src/components/views/BookingsView.vue b/desks-web-app/src/components/views/BookingsView.vue
index fb09105..beec7c8 100644
--- a/desks-web-app/src/components/views/BookingsView.vue
+++ b/desks-web-app/src/components/views/BookingsView.vue
@@ -41,19 +41,17 @@
       </v-row>
       <v-row>
         <v-col cols="12">
-          <v-card variant="flat">
             <v-card-text v-if="myUpcomingBookings.length <= 0">
               <v-alert>
                 You have no upcoming desk bookings.
               </v-alert>
             </v-card-text>
-            <BookingsTable
+            <BookingsCards
                 v-else
                 :bookings="myUpcomingBookings"
                 @editBooking="(booking) => openEditeBookingDialog(booking)"
                 @openBooking="(booking) => openShowBookingDialog(booking)"
-            ></BookingsTable>
-          </v-card>
+            ></BookingsCards>
         </v-col>
       </v-row>
 
@@ -68,7 +66,7 @@
 
 import {defineComponent} from "vue";
 import {mapActions, mapGetters, mapState} from "vuex";
-import BookingsTable from "@/components/booking-components/BookingsTable.vue";
+import BookingsCards from "@/components/booking-components/BookingsCards.vue";
 import Booking from "@/models/Booking";
 import BookingDetails from "@/components/booking-components/BookingDetails.vue";
 import BookingFormDialogue from "@/components/booking-components/BookingFormDialogue.vue";
@@ -88,7 +86,7 @@ interface bookingViewData {
 
 export default defineComponent({
   name: "BookingsView",
-  components: {DeskAvailabilty, BookingFormDialogue, BookingDetails, BookingsTable, Loading},
+  components: {DeskAvailabilty, BookingFormDialogue, BookingDetails, BookingsCards, Loading},
   data: (): bookingViewData => ({
     showBookingFormDialog: false,
     bookingToEdit: null,