diff --git a/resources/js/Pages/Explore.vue b/resources/js/Pages/Explore.vue
index ee41fa9..eb21a3b 100644
--- a/resources/js/Pages/Explore.vue
+++ b/resources/js/Pages/Explore.vue
@@ -6,7 +6,7 @@
       <v-card-title class="px-1">
         <v-btn
           icon
-          @click="goToPrevPane"
+          @click="() => currentPane--"
         >
           <span class="d-sr-only">Previous data</span>
           <v-icon>mdi-chevron-left</v-icon>
@@ -16,7 +16,7 @@
           style="flex: 1 1 0"
         >
           <v-window
-            v-model="exploreCurrentPane"
+            v-model="currentPane"
             vertical
           >
             <v-window-item
@@ -31,7 +31,7 @@
         </div>
         <v-btn
           icon
-          @click="goToNextPane"
+          @click="() => currentPane++"
         >
           <span class="d-sr-only">Next data</span>
           <v-icon>mdi-chevron-right</v-icon>
@@ -41,7 +41,7 @@
 
     <template #sheet-expanded>
       <v-window
-        v-model="exploreCurrentPane"
+        v-model="currentPane"
         class="mt-n6"
       >
         <v-window-item
@@ -105,55 +105,34 @@ export default {
   },
 
   computed: {
-    currentPaneRoute() {
-      return this.panes[this.exploreCurrentPane].route;
-    },
-
     paneCount() {
       return this.panes.length;
     },
 
+    currentPane: {
+      get() {
+        const { pane } = route().params;
+        return this.panes.findIndex((p) => p.route === pane);
+      },
+      set(value) {
+        let index = value;
+        if (index < 0) {
+          index = this.panes.length - 1;
+        } else if (index >= this.panes.length) {
+          index = 0;
+        }
+        this.$inertia.visit(`/explore/${this.panes[index].route}`, { replace: true });
+      },
+    },
+
     ...mapFields([
       'exploreIsExpanded',
-      'exploreCurrentPane',
     ]),
   },
-
-  watch: {
-    exploreCurrentPane() {
-      this.handleNewPane();
-    },
-  },
-
   methods: {
-    handleNewPane() {
-      window.history.pushState(null, null, `/explore/${this.currentPaneRoute}`);
-      this.$parent.$emit('new-pane', this.currentPaneRoute);
-    },
-
     handleToggle(newState) {
       this.exploreIsExpanded = newState;
     },
-
-    goToNextPane() {
-      if (this.exploreCurrentPane + 1 < this.paneCount) {
-        this.exploreCurrentPane += 1;
-      } else {
-        this.exploreCurrentPane = 0;
-      }
-
-      this.handleNewPane();
-    },
-
-    goToPrevPane() {
-      if (this.exploreCurrentPane > 0) {
-        this.exploreCurrentPane -= 1;
-      } else {
-        this.exploreCurrentPane = this.paneCount - 1;
-      }
-
-      this.handleNewPane();
-    },
   },
 };
 </script>
diff --git a/resources/js/Pages/Explore/panes.js b/resources/js/Pages/Explore/panes.js
new file mode 100644
index 0000000..4d2f544
--- /dev/null
+++ b/resources/js/Pages/Explore/panes.js
@@ -0,0 +1,27 @@
+import Alteration from './Alteration.vue';
+import NewConstruction from './NewConstruction.vue';
+import SalePrices from './SalePrices.vue';
+import Zoning from './Zoning.vue';
+import Layers from './Layers.vue';
+
+export default [{
+  title: 'Sale Prices',
+  component: SalePrices,
+  route: 'sales',
+}, {
+  title: 'Zoning',
+  component: Zoning,
+  route: 'zoning',
+}, {
+  title: 'New Construction Permits',
+  component: NewConstruction,
+  route: 'construction',
+}, {
+  title: 'Alteration Permits',
+  component: Alteration,
+  route: 'alteration',
+}, {
+  title: 'Planning Overlays',
+  component: Layers,
+  route: 'layers',
+}];
diff --git a/resources/js/Shared/Layouts/MapSheetLayout.vue b/resources/js/Shared/Layouts/MapSheetLayout.vue
index b342abe..969a64e 100644
--- a/resources/js/Shared/Layouts/MapSheetLayout.vue
+++ b/resources/js/Shared/Layouts/MapSheetLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <lp-bottom-sheet @new-pane="handleNewPane">
+  <lp-bottom-sheet>
     <mapbox-map
       ref="mapboxmap"
       :tiles="mapTiles"
@@ -57,11 +57,13 @@ export default {
   computed: {
     ...mapFields([
       'exploreIsExpanded',
-      'exploreCurrentPane',
       'shownTour',
     ]),
   },
   mounted() {
+    this.$inertia.on('finish', () => {
+      this.mapTiles = route().params.pane;
+    });
     // if already shown before then do not show again
     if (this.shownTour) { return; }
     this.$nextTick(() => {
@@ -232,9 +234,6 @@ export default {
     });
   },
   methods: {
-    handleNewPane(pane) {
-      this.mapTiles = pane;
-    },
 
     sourceDataLoaded(event) {
       // we should not mess with the parcel color
@@ -317,7 +316,7 @@ export default {
         filter: ['==', 'parcel_id', '441425'],
       });
       const coordinates = { lat: 39.9534051531393, lng: -75.20876878307995 };
-      const parcel = feature[0].properties;
+      const parcel = feature[0] ? feature[0].properties : undefined;
       this.showPopup({ properties: parcel, coords: coordinates, feature: feature[0] });
     },
     triggerExpanded() {
@@ -327,10 +326,10 @@ export default {
       this.exploreIsExpanded = false;
     },
     triggerPlanningOverlays() {
-      this.exploreCurrentPane = 4;
+      this.$inertia.visit('/explore/layers', { replace: true });
     },
     triggerSales() {
-      this.exploreCurrentPane = 0;
+      this.$inertia.visit('/explore/sales', { replace: true });
     },
   },
 };
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 88958d2..d60b6dd 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -28,7 +28,6 @@ export default new Vuex.Store({
     // from letsplanorg
     exploreIsExpanded: false,
     layersIsExpanded: true,
-    exploreCurrentPane: 0,
     tourShown: false,
   },
   mutations: {