diff --git a/vacs-map-app/package-lock.json b/vacs-map-app/package-lock.json
index 602896d..e7eb58d 100644
--- a/vacs-map-app/package-lock.json
+++ b/vacs-map-app/package-lock.json
@@ -14,7 +14,8 @@
         "d3": "^7.8.5",
         "mapbox-gl": "^2.15.0",
         "pinia": "^2.1.7",
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.5"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
@@ -3472,6 +3473,20 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5800,6 +5815,14 @@
         "semver": "^7.3.6"
       }
     },
+    "vue-router": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/vacs-map-app/package.json b/vacs-map-app/package.json
index 42423b2..ed2f005 100644
--- a/vacs-map-app/package.json
+++ b/vacs-map-app/package.json
@@ -16,7 +16,8 @@
     "d3": "^7.8.5",
     "mapbox-gl": "^2.15.0",
     "pinia": "^2.1.7",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
index f62671b..2fb6d1c 100644
--- a/vacs-map-app/src/App.vue
+++ b/vacs-map-app/src/App.vue
@@ -1,55 +1,11 @@
 <template>
   <main>
-    <div class="top-bar">
-      <select v-model="selectedMap">
-        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
-      </select>
-      <Filters />
-    </div>
-    <component :is="selectedMapComponent" />
+    <RouterView />
   </main>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
-import MapContainerColor from '@/components/MapContainerColor.vue';
-import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
-import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
-import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
-import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
-import Filters from '@/components/Filters.vue';
-
-const availableMaps = [
-  {
-    id: 'just-color',
-    name: 'dynamic color',
-    component: MapContainerColor,
-  },
-  {
-    id: 'color-and-radius-1',
-    name: 'dynamic color and radius (cropyield)',
-    component: MapContainerColorRadius,
-  },
-  {
-    id: 'not-filled',
-    name: 'circles not filled',
-    component: MapContainerNotFilled,
-  },
-  {
-    id: 'not-filled-2',
-    name: 'circles not filled, two layers',
-    component: MapContainerNotFilledTwoLayers,
-  },
-  {
-    id: 'african-union',
-    name: 'circles + african union regions',
-    component: MapContainerColorAfricanUnion,
-  },
-];
-const selectedMap = ref(availableMaps[0].id);
-const selectedMapComponent = computed(() => {
-  return availableMaps.find(({ id }) => id === selectedMap.value).component;
-});
+import { RouterView } from 'vue-router';
 </script>
 
 <style scoped>
@@ -60,18 +16,4 @@ main {
   width: 100vw;
   overflow: hidden;
 }
-
-.top-bar {
-  padding: 0.5rem 2rem;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.overlay {
-  position: absolute;
-  left: 1rem;
-  top: 3rem;
-}
 </style>
diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
new file mode 100644
index 0000000..3992e2b
--- /dev/null
+++ b/vacs-map-app/src/LandingPage.vue
@@ -0,0 +1,80 @@
+<template>
+  <LayoutOpen>
+    <div class="map-wrapper-row">
+      <div class="callout">
+        <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?
+        </div>
+        <button class="go-to-topic" @click="navigate">
+          Find out
+        </button>
+      </div>
+      <div class="map-wrapper">
+        <MapContainerColor />
+      </div>
+    </div>
+  </LayoutOpen>
+</template>
+
+<script setup>
+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);
+</script>
+
+<style scoped>
+.map-wrapper-row {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  justify-content: space-between;
+}
+
+.map-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 55%;
+}
+
+.callout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 5rem;
+  font-size: 3em;
+  flex-basis: 0;
+  flex-grow: 1;
+  gap: 2rem;
+  line-height: 1.25em;
+}
+
+.go-to-topic {
+  appearance: none;
+  border: 1px solid #BFBFBF;
+  background: none;
+  border-radius: 4px;
+  color: var(--white);
+  font-size: 0.9em;
+}
+
+.topic-picker {
+  display: block;
+  font-size: 1em;
+  appearance: none;
+}
+</style>
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
new file mode 100644
index 0000000..9ae714c
--- /dev/null
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -0,0 +1,70 @@
+<template>
+  <main>
+    <div class="top-bar">
+      <select v-model="selectedMap">
+        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+      </select>
+      <Filters />
+    </div>
+    <component :is="selectedMapComponent" />
+  </main>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import MapContainerColor from '@/components/MapContainerColor.vue';
+import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
+import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
+import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
+import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
+import Filters from '@/components/Filters.vue';
+
+const availableMaps = [
+  {
+    id: 'just-color',
+    name: 'dynamic color',
+    component: MapContainerColor,
+  },
+  {
+    id: 'color-and-radius-1',
+    name: 'dynamic color and radius (cropyield)',
+    component: MapContainerColorRadius,
+  },
+  {
+    id: 'not-filled',
+    name: 'circles not filled',
+    component: MapContainerNotFilled,
+  },
+  {
+    id: 'not-filled-2',
+    name: 'circles not filled, two layers',
+    component: MapContainerNotFilledTwoLayers,
+  },
+  {
+    id: 'african-union',
+    name: 'circles + african union regions',
+    component: MapContainerColorAfricanUnion,
+  },
+];
+const selectedMap = ref(availableMaps[0].id);
+const selectedMapComponent = computed(() => {
+  return availableMaps.find(({ id }) => id === selectedMap.value).component;
+});
+</script>
+
+<style scoped>
+.top-bar {
+  padding: 0.5rem 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.overlay {
+  position: absolute;
+  left: 1rem;
+  top: 3rem;
+}
+</style>
+
diff --git a/vacs-map-app/src/assets/main.css b/vacs-map-app/src/assets/main.css
index 3bbaf55..f186231 100644
--- a/vacs-map-app/src/assets/main.css
+++ b/vacs-map-app/src/assets/main.css
@@ -1,5 +1,16 @@
 @import './base.css';
 
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 #app {
   margin: 0 auto;
+
+  --dark-gray: #404040;
+  --white: #ffffff;
+
+  --page-horizontal-margin: 5rem;
 }
diff --git a/vacs-map-app/src/components/NavigationButton.vue b/vacs-map-app/src/components/NavigationButton.vue
new file mode 100644
index 0000000..240d17d
--- /dev/null
+++ b/vacs-map-app/src/components/NavigationButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <RouterLink
+    class="navigation-button"
+    v-bind="props"
+  >
+    <slot></slot>
+  </RouterLink>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router';
+
+const props = defineProps({
+  ...RouterLink.props,
+});
+</script>
+
+<style scoped>
+.navigation-button {
+  border: 1px solid #BFBFBF;
+  border-radius: 4px;
+  color: var(--white);
+  font-size: 0.8em;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+}
+</style>
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
new file mode 100644
index 0000000..18d40da
--- /dev/null
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="overview-top">
+    <div class="row">
+      <div>
+        How does <TopicPicker :value="topic" /> impact decisions about food security?
+      </div>
+      <NavigationButton to="/map-explore">Explore the map</NavigationButton>
+    </div>
+    <div class="row">
+      <NavigationButton to="/">Go Back</NavigationButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import NavigationButton from '@/components/NavigationButton.vue';
+import TopicPicker from '@/components/TopicPicker.vue';
+
+const props = defineProps({
+  topic: {
+    type: String,
+    default: '',
+  },
+});
+const { topic } = toRefs(props);
+</script>
+
+<style scoped>
+.overview-top {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  gap: 0.5rem;
+  margin: 1rem var(--page-horizontal-margin);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
diff --git a/vacs-map-app/src/components/TopicPicker.vue b/vacs-map-app/src/components/TopicPicker.vue
new file mode 100644
index 0000000..d1ccf45
--- /dev/null
+++ b/vacs-map-app/src/components/TopicPicker.vue
@@ -0,0 +1,32 @@
+<template>
+  <select :value="value" class="topic-picker" @change="navigate">
+    <option
+      v-for="t in topicUrlOptions"
+      :key="t.value"
+      :value="t.value"
+    >{{ t.label }}</option>
+  </select>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import { useRouter } from 'vue-router';
+import { topicUrlOptions } from '@/constants/topics';
+
+const router = useRouter();
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const { value } = toRefs(props);
+const navigate = (e) => router.push(e.target.value);
+</script>
+
+<style scoped>
+.topic-picker {
+}
+</style>
+
diff --git a/vacs-map-app/src/components/layouts/LayoutOpen.vue b/vacs-map-app/src/components/layouts/LayoutOpen.vue
new file mode 100644
index 0000000..9021076
--- /dev/null
+++ b/vacs-map-app/src/components/layouts/LayoutOpen.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="layout-open">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.layout-open {
+  background: var(--dark-gray);
+  color: var(--white);
+  min-height: 100vh;
+  width: 100vw;
+}
+</style>
diff --git a/vacs-map-app/src/components/layouts/LayoutOverview.vue b/vacs-map-app/src/components/layouts/LayoutOverview.vue
new file mode 100644
index 0000000..2b1df94
--- /dev/null
+++ b/vacs-map-app/src/components/layouts/LayoutOverview.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="layout-overview">
+    <OverviewTop :topic="topic" />
+    <div class="layout-overview-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+import OverviewTop from '@/components/OverviewTop.vue';
+import { topicUrlOptions } from '@/constants/topics';
+
+const props = defineProps({
+  topicLabel: {
+    type: String,
+    default: '',
+  },
+});
+const { topicLabel } = toRefs(props);
+const topic = computed(() => topicUrlOptions
+  .find(({ label }) => label === topicLabel.value)?.value);
+</script>
+
+<style scoped>
+.layout-overview {
+  background: var(--dark-gray);
+  color: var(--white);
+  min-height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.layout-overview-content {
+  margin: 0 var(--page-horizontal-margin);
+}
+</style>
diff --git a/vacs-map-app/src/components/pages/ClimateChangeOverview.vue b/vacs-map-app/src/components/pages/ClimateChangeOverview.vue
new file mode 100644
index 0000000..a779115
--- /dev/null
+++ b/vacs-map-app/src/components/pages/ClimateChangeOverview.vue
@@ -0,0 +1,12 @@
+<template>
+  <LayoutOverview topic-label="climate change">
+    climate change
+  </LayoutOverview>
+</template>
+
+<script setup>
+import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue
new file mode 100644
index 0000000..229bb73
--- /dev/null
+++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue
@@ -0,0 +1,12 @@
+<template>
+  <LayoutOverview topic-label="crop type">
+    crop type
+  </LayoutOverview>
+</template>
+
+<script setup>
+import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/components/pages/GeographyOverview.vue b/vacs-map-app/src/components/pages/GeographyOverview.vue
new file mode 100644
index 0000000..a1186a0
--- /dev/null
+++ b/vacs-map-app/src/components/pages/GeographyOverview.vue
@@ -0,0 +1,12 @@
+<template>
+  <LayoutOverview topic-label="geography">
+    geography
+  </LayoutOverview>
+</template>
+
+<script setup>
+import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/constants/topics.js b/vacs-map-app/src/constants/topics.js
new file mode 100644
index 0000000..5466c28
--- /dev/null
+++ b/vacs-map-app/src/constants/topics.js
@@ -0,0 +1,14 @@
+export const topicUrlOptions = [
+  {
+    label: 'crop type',
+    value: '/crop-type',
+  },
+  {
+    label: 'climate change',
+    value: '/climate-change',
+  },
+  {
+    label: 'geography',
+    value: '/geography',
+  },
+];
diff --git a/vacs-map-app/src/main.js b/vacs-map-app/src/main.js
index 48dad43..b1e056f 100644
--- a/vacs-map-app/src/main.js
+++ b/vacs-map-app/src/main.js
@@ -1,11 +1,31 @@
-import './assets/main.css'
+import './assets/main.css';
 
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './App.vue'
+import { createApp } from 'vue';
+import * as VueRouter from 'vue-router';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import LandingPage from './LandingPage.vue';
+import MapExplorer from './MapExplorer.vue';
+import ClimateChangeOverview from '@/components/pages/ClimateChangeOverview.vue';
+import CropTypeOverview from '@/components/pages/CropTypeOverview.vue';
+import GeographyOverview from '@/components/pages/GeographyOverview.vue';
 
 const app = createApp(App)
 
-app.use(createPinia())
+const routes = [
+  { path: '/', component: LandingPage },
+  { path: '/crop-type', component: CropTypeOverview },
+  { path: '/climate-change', component: ClimateChangeOverview },
+  { path: '/geography', component: GeographyOverview },
+  { path: '/map-explore', component: MapExplorer },
+];
 
-app.mount('#app')
+const router = VueRouter.createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: VueRouter.createWebHashHistory(),
+  routes, // short for `routes: routes`
+})
+
+app.use(createPinia());
+app.use(router);
+app.mount('#app');