diff --git a/aleksis/core/frontend/components/calendar/CalendarControlBar.vue b/aleksis/core/frontend/components/calendar/CalendarControlBar.vue
index c3f9c45c424aa73c0178ea15882e4e6783a73e43..2120ee1cd70992b4fefb27618662123b9cfc18b4 100644
--- a/aleksis/core/frontend/components/calendar/CalendarControlBar.vue
+++ b/aleksis/core/frontend/components/calendar/CalendarControlBar.vue
@@ -6,15 +6,14 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex justify-center">
-    <v-btn icon class="mx-2" @click="$emit('prev')">
+  <div class="d-flex justify-center mx-2">
+    <v-btn icon @click="$emit('prev')">
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
-    <v-btn outlined text class="mx-2" @click="$emit('today')">
-      <v-icon left>mdi-calendar-today-outline</v-icon>
+    <v-btn outlined text class="mx-1" @click="$emit('today')">
       {{ $t("calendar.today") }}
     </v-btn>
-    <v-btn icon class="mx-2" @click="$emit('next')">
+    <v-btn icon @click="$emit('next')">
       <v-icon>mdi-chevron-right</v-icon>
     </v-btn>
   </div>
diff --git a/aleksis/core/frontend/components/calendar/CalendarWithControls.vue b/aleksis/core/frontend/components/calendar/CalendarWithControls.vue
index 304904f3d9f24ced0d27e7fd1d822e121f9a3357..68d631591b471a8f67deab08a05a7ae0f083f7c0 100644
--- a/aleksis/core/frontend/components/calendar/CalendarWithControls.vue
+++ b/aleksis/core/frontend/components/calendar/CalendarWithControls.vue
@@ -1,5 +1,12 @@
 <template>
   <div>
+    <div
+      class="mx-2 mb-2 text-center"
+      v-if="$refs.calendar && $vuetify.breakpoint.smAndDown"
+    >
+      {{ $refs.calendar.title }}
+    </div>
+
     <div class="d-flex mb-3 justify-space-between">
       <!-- Control bar with prev, next and today buttons -->
       <calendar-control-bar
@@ -9,7 +16,9 @@
       />
 
       <!-- Calendar title with current calendar time range -->
-      <div class="mx-2" v-if="$refs.calendar">{{ $refs.calendar.title }}</div>
+      <div class="mx-2" v-if="$refs.calendar && $vuetify.breakpoint.mdAndUp">
+        {{ $refs.calendar.title }}
+      </div>
 
       <calendar-type-select v-model="calendarType" />
     </div>