diff --git a/vacs-map-app/package-lock.json b/vacs-map-app/package-lock.json
index e0b89ed..914f1d4 100644
--- a/vacs-map-app/package-lock.json
+++ b/vacs-map-app/package-lock.json
@@ -15,6 +15,7 @@
         "mapbox-gl": "^3.0.0-rc.2",
         "pinia": "^2.1.7",
         "qs": "^6.11.2",
+        "slugify": "^1.6.6",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
       },
@@ -2975,6 +2976,14 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
diff --git a/vacs-map-app/package.json b/vacs-map-app/package.json
index 1ed9026..feb0eca 100644
--- a/vacs-map-app/package.json
+++ b/vacs-map-app/package.json
@@ -18,6 +18,7 @@
     "mapbox-gl": "^3.0.0-rc.2",
     "pinia": "^2.1.7",
     "qs": "^6.11.2",
+    "slugify": "^1.6.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
index 2fb6d1c..12dce52 100644
--- a/vacs-map-app/src/App.vue
+++ b/vacs-map-app/src/App.vue
@@ -5,7 +5,15 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
 import { RouterView } from 'vue-router';
+import { useCropYieldsStore } from '@/stores/cropYields';
+
+const cropYieldsStore = useCropYieldsStore();
+
+onMounted(() => {
+  cropYieldsStore.load();
+});
 </script>
 
 <style scoped>
diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
index 3992e2b..15aa486 100644
--- a/vacs-map-app/src/LandingPage.vue
+++ b/vacs-map-app/src/LandingPage.vue
@@ -2,16 +2,11 @@
   <LayoutOpen>
     <div class="map-wrapper-row">
       <div class="callout">
+        <div class="callout-header">
+          What crops have the most potential in a changing climate?
+        </div>
         <div class="callout-content">
-          How does
-          <select v-model="topic" class="topic-picker">
-            <option
-              v-for="t in topicUrlOptions"
-              :key="t.value"
-              :value="t.value"
-            >{{ t.label }}</option>
-          </select>
-          impact decisions about food security?
+The Vision for Adapted Crops and Soils (VACS) aims to foster more resilient food systems, with an initial focus on the African continent. VACS seeks to boost agricultural productivity and nutrition by developing diverse, climate-resilient crop varieties and building healthy soils. Keep reading
         </div>
         <button class="go-to-topic" @click="navigate">
           Find out
@@ -29,11 +24,9 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import LayoutOpen from '@/components/layouts/LayoutOpen.vue';
 import MapContainerColor from '@/components/MapContainerColor.vue';
-import { topicUrlOptions } from '@/constants/topics';
 
 const router = useRouter();
-const topic = ref(topicUrlOptions[0].value);
-const navigate = () => router.push(topic.value);
+const navigate = () => router.push('/crops');
 </script>
 
 <style scoped>
@@ -56,10 +49,13 @@ const navigate = () => router.push(topic.value);
   align-items: flex-start;
   justify-content: center;
   padding: 0 5rem;
-  font-size: 3em;
   flex-basis: 0;
   flex-grow: 1;
   gap: 2rem;
+}
+
+.callout-header {
+  font-size: 3em;
   line-height: 1.25em;
 }
 
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 56ff204..478ba85 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -1,13 +1,17 @@
 <template>
-  <main>
-    <div class="top-bar">
-      <select v-model="selectedMap">
-        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
-      </select>
-      <Filters />
+  <LayoutOverview>
+    <div class="map-wrapper-row">
+      <ExploreSidebar />
+      <div class="map-wrapper">
+        <component :is="selectedMapComponent" />
+        <div class="map-overlay">
+          <select v-model="selectedMap">
+            <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+          </select>
+        </div>
+      </div>
     </div>
-    <component :is="selectedMapComponent" />
-  </main>
+  </LayoutOverview>
 </template>
 
 <script setup>
@@ -20,8 +24,10 @@ import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTw
 import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
 import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue';
 import MapContainerColorSand from '@/components/MapContainerColorSand.vue';
-import Filters from '@/components/Filters.vue';
+import { useFiltersStore } from '@/stores/filters';
 import { useMapExploreStore } from '@/stores/mapExplore';
+import LayoutOverview from './components/layouts/LayoutOverview.vue';
+import ExploreSidebar from './components/ExploreSidebar.vue';
 
 const availableMaps = [
   {
@@ -74,18 +80,23 @@ const selectedMapComponent = computed(() => {
 </script>
 
 <style scoped>
-.top-bar {
-  padding: 0.5rem 2rem;
+.map-wrapper-row {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
+  height: 100%;
 }
 
-.overlay {
+.map-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.map-overlay {
   position: absolute;
-  left: 1rem;
-  top: 3rem;
+  top: 5rem;
+  right: 1rem;
 }
 </style>
 
diff --git a/vacs-map-app/src/components/CropCards.vue b/vacs-map-app/src/components/CropCards.vue
new file mode 100644
index 0000000..e2100d7
--- /dev/null
+++ b/vacs-map-app/src/components/CropCards.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="crop-cards">
+    <div class="crop-card" v-for="crop in filteredCrops" :key="crop">
+      <router-link :to="`/map-explore`" @click="selectedCrop = crop">
+        {{ crop }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import slugify from 'slugify';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useFiltersStore } from '@/stores/filters';
+
+const router = useRouter();
+const filtersStore = useFiltersStore();
+const { availableCrops, selectedCrop } = storeToRefs(filtersStore);
+
+// TODO actually filter
+const filteredCrops = computed(() => availableCrops.value);
+
+</script>
+
+<style scoped>
+.crop-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+.crop-card {
+  background: white;
+  border-radius: 10px;
+  height: 10rem;
+}
+</style>
diff --git a/vacs-map-app/src/components/CropFilters.vue b/vacs-map-app/src/components/CropFilters.vue
new file mode 100644
index 0000000..e7135fc
--- /dev/null
+++ b/vacs-map-app/src/components/CropFilters.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="crop-filters">
+    crop filters
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue
new file mode 100644
index 0000000..50d5861
--- /dev/null
+++ b/vacs-map-app/src/components/ExploreSidebar.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="sidebar">
+    <div class="crop-selection">
+      <select v-model="selectedCrop" class="crop-picker">
+        <option
+          v-for="crop in availableCrops"
+          :key="crop"
+          :value="crop"
+        > {{crop}} </option>
+      </select>
+
+      <span> a description of {{ selectedCrop }}</span>
+    </div>
+
+    <div class="crop-fingerprint">
+      crop fingerprint
+    </div>
+
+    <div class="scenarios">
+      <div v-for="scenario in futureScenarios" :key="scenario" class="scenario" :class="{selected: selectedModel === scenario}" @click="selectedModel = scenario">
+        <span>
+          {{ scenario }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFiltersStore } from '@/stores/filters';
+
+const filtersStore = useFiltersStore();
+const {
+  availableCrops,
+  selectedCrop,
+  availableModels,
+  selectedModel,
+} = storeToRefs(filtersStore);
+
+const futureScenarios = computed(() => availableModels.value.filter(d => d.startsWith('future')));
+</script>
+
+<style scoped>
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-left: var(--page-horizontal-margin);
+  padding-right: 2rem;
+  width: 400px;
+}
+
+.crop-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.crop-fingerprint {
+  width: 100%;
+  height: 40%;
+  border: 1px solid white;
+  border-radius: 0.5rem;
+}
+
+.scenarios { 
+  width: 100%;
+  height: 40%;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.scenario {
+  width: 100%;
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.scenario.selected {
+  cursor: pointer;
+  border-color: white;
+}
+
+</style>
\ No newline at end of file
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
index 18d40da..c6ff012 100644
--- a/vacs-map-app/src/components/OverviewTop.vue
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -2,28 +2,20 @@
   <div class="overview-top">
     <div class="row">
       <div>
-        How does <TopicPicker :value="topic" /> impact decisions about food security?
+        What crops have the most potential in a changing climate?
       </div>
-      <NavigationButton to="/map-explore">Explore the map</NavigationButton>
-    </div>
-    <div class="row">
-      <NavigationButton to="/">Go Back</NavigationButton>
+      <NavigationButton :to="backRoute">Go Back</NavigationButton>
     </div>
   </div>
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import NavigationButton from '@/components/NavigationButton.vue';
-import TopicPicker from '@/components/TopicPicker.vue';
 
-const props = defineProps({
-  topic: {
-    type: String,
-    default: '',
-  },
-});
-const { topic } = toRefs(props);
+const route = useRoute();
+const backRoute = computed(() => route.path === '/map-explore' ? '/crops' : '/');
 </script>
 
 <style scoped>
diff --git a/vacs-map-app/src/components/layouts/LayoutOverview.vue b/vacs-map-app/src/components/layouts/LayoutOverview.vue
index 2b1df94..5c853d1 100644
--- a/vacs-map-app/src/components/layouts/LayoutOverview.vue
+++ b/vacs-map-app/src/components/layouts/LayoutOverview.vue
@@ -35,6 +35,6 @@ const topic = computed(() => topicUrlOptions
 }
 
 .layout-overview-content {
-  margin: 0 var(--page-horizontal-margin);
+  height: 100%;
 }
 </style>
diff --git a/vacs-map-app/src/components/pages/CropDetail.vue b/vacs-map-app/src/components/pages/CropDetail.vue
new file mode 100644
index 0000000..931426f
--- /dev/null
+++ b/vacs-map-app/src/components/pages/CropDetail.vue
@@ -0,0 +1,18 @@
+<template>
+  <LayoutOverview>
+    {{ slug }}
+  </LayoutOverview>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+
+const route = useRoute();
+
+// TODO handle fact that this is a slug (in case of multi-word crop names)
+const { slug } = route.params;
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue
index 229bb73..e41225a 100644
--- a/vacs-map-app/src/components/pages/CropTypeOverview.vue
+++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue
@@ -1,12 +1,20 @@
 <template>
-  <LayoutOverview topic-label="crop type">
-    crop type
+  <LayoutOverview>
+    <div class="wrapper">
+      <CropFilters />
+      <CropCards />
+    </div>
   </LayoutOverview>
 </template>
 
 <script setup>
 import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+import CropCards from '@/components/CropCards.vue';
+import CropFilters from '@/components/CropFilters.vue';
 </script>
 
 <style scoped>
+.wrapper {
+  margin: 0 var(--page-horizontal-margin);
+}
 </style>
diff --git a/vacs-map-app/src/constants/topics.js b/vacs-map-app/src/constants/topics.js
index 5466c28..19c5eb8 100644
--- a/vacs-map-app/src/constants/topics.js
+++ b/vacs-map-app/src/constants/topics.js
@@ -1,7 +1,7 @@
 export const topicUrlOptions = [
   {
     label: 'crop type',
-    value: '/crop-type',
+    value: '/crops',
   },
   {
     label: 'climate change',
diff --git a/vacs-map-app/src/main.js b/vacs-map-app/src/main.js
index 77e935c..e246650 100644
--- a/vacs-map-app/src/main.js
+++ b/vacs-map-app/src/main.js
@@ -7,6 +7,7 @@ import App from './App.vue';
 import LandingPage from './LandingPage.vue';
 import MapExplorer from './MapExplorer.vue';
 import ClimateChangeOverview from '@/components/pages/ClimateChangeOverview.vue';
+import CropDetail from '@/components/pages/CropDetail.vue';
 import CropTypeOverview from '@/components/pages/CropTypeOverview.vue';
 import GeographyOverview from '@/components/pages/GeographyOverview.vue';
 import QueryPlugin from '@/store-plugins/query';
@@ -16,7 +17,8 @@ const app = createApp(App)
 
 const routes = [
   { path: '/', component: LandingPage },
-  { path: '/crop-type', component: CropTypeOverview },
+  { path: '/crops', component: CropTypeOverview },
+  { path: '/crops/:slug', component: CropDetail },
   { path: '/climate-change', component: ClimateChangeOverview },
   { path: '/geography', component: GeographyOverview },
   { path: '/map-explore', component: MapExplorer },
diff --git a/vacs-map-app/src/stores/filters.js b/vacs-map-app/src/stores/filters.js
index bbc3ee5..e0384a6 100644
--- a/vacs-map-app/src/stores/filters.js
+++ b/vacs-map-app/src/stores/filters.js
@@ -24,7 +24,7 @@ export const useFiltersStore = defineStore('filters', () => {
         .map(k => k.split('_')[0])
     )).sort();
     if (!selectedMetric.value) {
-      selectedMetric.value = availableMetrics.value[0];
+      selectedMetric.value = 'yieldratio';
     }
 
     availableCrops.value = Array.from(new Set(