diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 92cdf2cf49d669983c2b75add84c7663380ff284..733963217ac614a2caafc41d3394a6fbfc237a44 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -69,11 +69,17 @@
         :date="date"
         :docs="docs"
         :lastQuery="lastQuery"
-        :focus-on-mount="gotoDate && (gotoDate.toMillis() === date.toMillis())"
+        :focus-on-mount="initDate && (initDate.toMillis() === date.toMillis())"
         @init="transition"
+        ref="days"
         />
 
-      <date-select-footer :value="$route.hash.substring(1)" />
+      <date-select-footer
+        :value="$route.hash.substring(1)"
+        @input="gotoDate"
+        @prev="gotoPrev"
+        @next="gotoNext"
+        />
     </template>
     <template #loading>
       <CoursebookLoader />
@@ -144,7 +150,7 @@ export default {
       courses: [],
       incomplete: false,
       ready: false,
-      gotoDate: false,
+      initDate: false,
     };
   },
   apollo: {
@@ -196,11 +202,11 @@ export default {
       console.log('Resetting date range', this.$route.hash);
       if (!this.$route.hash) {
         console.log('Set default date');
-        this.$router.replace({ hash: DateTime.now().toISODate() })
+        this.setDate(DateTime.now().toISODate());
       } 
 
       const date = DateTime.fromISO(this.$route.hash.substring(1));
-      this.gotoDate = date;
+      this.initDate = date;
       this.dateStart = date.minus({ days: 3 }).toISODate();
       this.dateEnd = date.plus({ days: 4 }).toISODate();
     },
@@ -220,7 +226,7 @@ export default {
       // might skip query until both set = atomic
     },
     transition() {
-      this.gotoDate = false
+      this.initDate = false
       this.ready = true
     },
     groupDocsByDay(docs) {
@@ -309,6 +315,36 @@ export default {
         }
       };
     },
+    // TODO: only load the else if out of range / not just not present
+    gotoDate(date) {
+      const present = this.$refs.days
+            .find((day) => day.date.toISODate() === date);
+
+      if (present) {
+        present.focus("smooth");
+      } else {
+        this.setDate(date);
+        this.resetDate();
+      }
+    },
+    // TODO: Disable navigation while loading!
+    gotoPrev() {
+      const current = this.$route.hash.substring(1);
+      const pref = this.$refs.days
+            .map((day) => day.date.toISODate())
+            .sort()
+            .reverse()
+            .find((date) => date < current);
+      this.gotoDate(pref);
+    },
+    gotoNext() {
+      const current = this.$route.hash.substring(1);
+      const next = this.$refs.days
+            .map((day) => day.date.toISODate())
+            .sort()
+            .find((date) => date > current);
+      this.gotoDate(next);
+    },
   },
   created() {
     this.resetDate();
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
index 96f3d2dd379a0ee12b090a7add2d4dc38ea8cc97..fa847de1315e01db7b3de4116d61d302cdeef596 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
@@ -57,13 +57,13 @@ export default {
         block: "start",
         inline: "nearest"
       });
+      console.log('focused @', this.date.toISODate());
     },
   },
   mounted() {
     console.log('mounted ', this.date.toISODate(), this.focusOnMount);
     if (this.focusOnMount) {
       this.$nextTick(this.focus("instant"));
-      console.log('focused @', this.date.toISODate());
       this.$emit('init');
     }
   },