diff --git a/src/components/Home.vue b/src/components/Home.vue
index 6489ec91900d4c3248d394445498934e160114a8..1f1186509f0d18b100af8c40daf65d94c9664b43 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,18 +1,39 @@
 <template>
 
-  <b-container fluid>
-    <b-row>
-      <TimeSelector class="float-left" @select-date="handleSelectDate"></TimeSelector>
-      <BeamSelector class="float-right" @select-beam="handleSelectBeam"></BeamSelector>
-    </b-row>
-    <b-row class="mt-3 mb-3">
-
-      <b-col class="float-left" v-if="selectedDate != null">Selected date is {{selectedDate}}</b-col>
-      <b-col class="float-right" v-if="selectedBeam != null">Selected beam is {{selectedBeam}}</b-col>
-    </b-row>
-    <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null' v-bind:selectedBeam="selectedBeam"></ProductsList>
-    <span v-if="selectedDate==null"><h2>Please select a date</h2></span>
-  </b-container>
+    <b-container fluid>
+        <b-row class="justify-content-center">
+            <b-card class="ml-3 mb-2">
+                <b-card-sub-title><h5>Last dynamic spectrum</h5></b-card-sub-title>
+                <b-card-body>
+                    <a :href="last_dynspec">
+                        <b-img-lazy fluid width="500px" v-bind:src="last_dynspec"></b-img-lazy>
+                    </a>
+                </b-card-body>
+
+            </b-card>
+            <b-card class="ml-3 mb-2">
+                <b-card-sub-title><h5>Last hour dynamic spectrum</h5></b-card-sub-title>
+                <b-card-body>
+                    <a :href="last_hour_dynspec">
+                        <b-img-lazy fluid width="500px" v-bind:src="last_hour_dynspec"></b-img-lazy>
+                    </a>
+                </b-card-body>
+
+            </b-card>
+        </b-row>
+        <b-row>
+            <TimeSelector class="float-left" @select-date="handleSelectDate"></TimeSelector>
+            <BeamSelector class="float-right" @select-beam="handleSelectBeam"></BeamSelector>
+        </b-row>
+        <b-row class="mt-3 mb-3">
+
+            <b-col class="float-left" v-if="selectedDate != null">Selected date is {{ selectedDate }}</b-col>
+            <b-col class="float-right" v-if="selectedBeam != null">Selected beam is {{ selectedBeam }}</b-col>
+        </b-row>
+        <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null'
+                      v-bind:selectedBeam="selectedBeam"></ProductsList>
+        <span v-if="selectedDate==null"><h2>Please select a date</h2></span>
+    </b-container>
 </template>
 
 <script>
@@ -21,27 +42,39 @@ import ProductsList from "./ProductsList";
 import BeamSelector from "./BeamSelector";
 
 export default {
-  name: "Home",
-  components: {
-    TimeSelector,
-    BeamSelector,
-    ProductsList
-  },
-  data () {
-    return {
-      selectedDate : null,
-      selectedBeam : null
+    name: "Home",
+    components: {
+        TimeSelector,
+        BeamSelector,
+        ProductsList
+    },
+    data() {
+        return {
+            selectedDate: this.$route.params.date,
+            selectedBeam: null,
+            last_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec.png",
+            last_hour_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec1H.png",
 
-    }
-  },
-  methods: {
-    handleSelectDate (date) {
-      this.selectedDate = date
+
+        }
+    },
+    created() {
+        this.$watch(
+            () => this.$route.params,
+            (toParams, previousParams) => {
+                console.log("HEY")
+                console.log(toParams, previousParams, this.$route.params.date)
+            }
+        )
     },
-    handleSelectBeam (beam) {
-      this.selectedBeam = beam
+    methods: {
+        handleSelectDate(date) {
+            this.selectedDate = date
+        },
+        handleSelectBeam(beam) {
+            this.selectedBeam = beam
+        }
     }
-  }
 }
 </script>
 
diff --git a/src/main.js b/src/main.js
index a71259f39fbf1ae047414d753d95da2d095ea673..7ba96d2539fabc1756ff4aec16a11570bce49edc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ import DisplayTAB from "@/components/DisplayTAB";
 import Home from "@/components/Home";
 const routes = [
     { path: '/', component: Home},
+    { path: '/:date', component: Home},
     { path: '/display', component: DisplayTAB}
 
 ]
diff --git a/yarn.lock b/yarn.lock
index 37a5f059db01aa0a1d680398c39cc463f0b8b427..e363a44fe19e4340ead032d58215cd93614c738d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2344,9 +2344,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286:
-  version "1.0.30001300"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz"
-  integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==
+  version "1.0.30001480"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
+  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"