diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a2e2459..e1039b1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "leaflet": "^1.9.4",
         "leaflet-draw": "^1.0.2",
         "leaflet-easybutton": "^2.4.0",
+        "leaflet-groupedlayercontrol": "^0.6.1",
         "leaflet-iconmaterial": "^1.1.0",
         "leaflet.markercluster": "^1.5.3",
         "papaparse": "^5.4.1",
@@ -5477,6 +5478,15 @@
         "leaflet": "^1.0.1"
       }
     },
+    "node_modules/leaflet-groupedlayercontrol": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/leaflet-groupedlayercontrol/-/leaflet-groupedlayercontrol-0.6.1.tgz",
+      "integrity": "sha512-xkGeH6ygcryFQI0FUWn6Bz93zlwrOSpeXgJQ3jLRoUQJ5h/Qgrz+GqR9nhBFfikjUKtC1sCKL3eDR9wNTWhLlA==",
+      "license": "MIT",
+      "dependencies": {
+        "leaflet": "^1.0.1"
+      }
+    },
     "node_modules/leaflet-iconmaterial": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/leaflet-iconmaterial/-/leaflet-iconmaterial-1.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f4dc170..fb995f6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.2",
     "leaflet-easybutton": "^2.4.0",
+    "leaflet-groupedlayercontrol": "^0.6.1",
     "leaflet-iconmaterial": "^1.1.0",
     "leaflet.markercluster": "^1.5.3",
     "papaparse": "^5.4.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 893f491..f50823f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -44,13 +44,17 @@ const alertStore = useAlertStore()
 let showMobileNavigation = ref(false)
 const paths = [
   {
-    attrs: { to: '/' },
-    label: 'Map'
+    attrs: { to: '/hydrologic_processes' },
+    label: 'Hydrologic Processes'
   },
   // {
   //   attrs: { to: "/api" },
   //   label: "API",
   // },
+  {
+    attrs: { to: '/perceptual_models' },
+    label: 'Perceptual Models'
+  },
   {
     attrs: { to: '/about' },
     label: 'About'
diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
index 1a94353..0c17027 100644
--- a/frontend/src/components/TheLeafletMap.vue
+++ b/frontend/src/components/TheLeafletMap.vue
@@ -11,7 +11,6 @@
 import L from 'leaflet'
 import 'leaflet-draw'
 import 'leaflet.markercluster'
-import { storeToRefs } from 'pinia'
 import * as esriLeaflet from 'esri-leaflet'
 import { onMounted, onUpdated } from 'vue'
 import { useMapStore } from '@/stores/map'
@@ -21,24 +20,13 @@ import 'leaflet-draw/dist/leaflet.draw.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 
-const emit = defineEmits(['onFilter'])
-
 const mapStore = useMapStore()
-const {
-  mapLoaded,
-  userTouchedFilter,
-  currentFilteredData,
-  selectedSpatialZones,
-  selectedTemporalZones,
-  selectedProcesses,
-  searchTerm
-} = storeToRefs(mapStore)
 
 onUpdated(() => {
   mapStore.leaflet.invalidateSize()
 })
 
-onMounted(async () => {
+onMounted(() => {
   mapStore.leaflet = L.map('mapContainer', { minZoom: 2 }).setView([0, 11], 2)
   mapStore.layerGroup = new L.LayerGroup()
   mapStore.layerGroup.addTo(mapStore.leaflet)
@@ -77,198 +65,8 @@ onMounted(async () => {
   Esri_WorldImagery.addTo(mapStore.leaflet)
   Esri_Hydro_Reference_Overlay.addTo(mapStore.leaflet)
 
-  await mapStore.fetchPerceptualModelsGeojson()
-  const bounds = L.latLngBounds(mapStore.allAvailableCoordinates)
-  mapStore.leaflet.setMaxBounds(bounds)
-
-  const mixed = {
-    'Perceptual Models': mapStore.layerGroup,
-    'Esri Hydro Reference Overlay': Esri_Hydro_Reference_Overlay
-  }
-  L.control.layers(baselayers, mixed).addTo(mapStore.leaflet)
-
-  const drawnItems = new L.FeatureGroup()
-  mapStore.drawnItems = drawnItems
-  mapStore.leaflet.addLayer(drawnItems)
-  drawnItems.setZIndex(1000)
-
-  let currentRectangle = null
-
-  L.Control.RectangleToggle = L.Control.extend({
-    options: { position: 'topleft' },
-    onAdd: function () {
-      const container = L.DomUtil.create(
-        'div',
-        'leaflet-bar leaflet-control leaflet-control-custom draw-toggle-btn'
-      )
-      updateDrawButton(container)
-      let drawer = null
-      L.DomEvent.on(container, 'click', () => {
-        if (currentRectangle || drawer) {
-          drawnItems.clearLayers()
-          currentRectangle = null
-          mapStore.filterFeatures(
-            (feature) => {
-              if (feature.geometry.type === 'Point') {
-                const [lng, lat] = feature.geometry.coordinates
-                return currentRectangle.getBounds().contains([lat, lng])
-              }
-              return false
-            },
-            'remove',
-            'rectangle'
-          )
-          userTouchedFilter.value = false
-          emit('onFilter', {
-            selectedSpatialZones,
-            selectedTemporalZones,
-            selectedProcesses,
-            searchTerm,
-            filteredFeatures: currentFilteredData.value
-          })
-          updateDrawButton(container)
-        } else {
-          const drawer = new L.Draw.Rectangle(mapStore.leaflet, {
-            shapeOptions: {
-              color: '#3388ff',
-              weight: 2,
-              opacity: 0.8,
-              fillOpacity: 0.3
-            },
-            showArea: false
-          })
-          drawer.enable()
-          currentRectangle = {}
-          updateDrawButton(container)
-
-          const drawHandler = (e) => {
-            mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
-            drawnItems.clearLayers()
-            currentRectangle = e.layer
-            currentRectangle.feature = {
-              type: 'Feature',
-              geometry: {
-                type: 'Polygon',
-                coordinates: [
-                  currentRectangle.getLatLngs()[0].map((latLng) => [latLng.lng, latLng.lat])
-                ]
-              },
-              properties: {}
-            }
-            drawnItems.addLayer(currentRectangle)
-            mapStore.leaflet.fitBounds(currentRectangle.getBounds())
-
-            mapStore.filterFeatures(
-              (feature) => {
-                if (feature.geometry.type === 'Point') {
-                  const [lng, lat] = feature.geometry.coordinates
-                  return currentRectangle.getBounds().contains([lat, lng])
-                }
-                return false
-              },
-              'add',
-              'rectangle'
-            )
-
-            userTouchedFilter.value = true
-            emit('onFilter', {
-              selectedSpatialZones,
-              selectedTemporalZones,
-              selectedProcesses,
-              searchTerm,
-              filteredFeatures: currentFilteredData.value
-            })
-
-            updateDrawButton(container)
-          }
-
-          mapStore.leaflet.on(L.Draw.Event.CREATED, drawHandler)
-          mapStore.leaflet.once('draw:drawstop', () => {
-            // If no rectangle was drawn, reset the toggle state
-            if (!drawnItems.getLayers().length) {
-              currentRectangle = null
-              updateDrawButton(container)
-              mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
-            }
-          })
-        }
-      })
-
-      return container
-    }
-  })
-  mapStore.leaflet.addControl(new L.Control.RectangleToggle())
-
-  function updateDrawButton(container) {
-    if (currentRectangle) {
-      container.innerHTML = '<span class="material-icons">close</span>'
-      container.style.background = 'white'
-      container.title = 'Clear box'
-    } else {
-      container.style.backgroundImage = "url('/DrawIcon.ico')"
-      container.innerHTML = ''
-      container.title = 'Draw a box'
-    }
-    container.style.backgroundRepeat = 'no-repeat'
-    container.style.backgroundSize = '60% 60%'
-    container.style.backgroundPosition = 'center'
-    container.style.borderRadius = '4px'
-    container.style.width = '34px'
-    container.style.height = '34px'
-    container.style.cursor = 'pointer'
-    container.style.display = 'flex'
-    container.style.alignItems = 'center'
-    container.style.justifyContent = 'center'
-  }
-  L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Click and drag to draw a box'
-  L.Control.ClearFilters = L.Control.extend({
-    options: { position: 'topleft' },
-    onAdd: function () {
-      const container = L.DomUtil.create(
-        'div',
-        'leaflet-bar leaflet-control leaflet-control-custom'
-      )
-      container.title = 'Reset Filters'
-
-      container.style.backgroundImage = "url('/ClearFilter.ico')"
-      container.style.backgroundRepeat = 'no-repeat'
-      container.style.backgroundSize = '60% 60%'
-      container.style.backgroundColor = 'white'
-      container.style.backgroundPosition = 'center'
-      container.style.borderRadius = '4px'
-      container.style.width = '34px'
-      container.style.height = '34px'
-      container.style.cursor = 'pointer'
-      container.style.display = 'flex'
-      container.style.alignItems = 'center'
-      container.style.justifyContent = 'center'
-
-      L.DomEvent.on(container, 'click', () => {
-        mapStore.clearAllFilters()
-        emit('onFilter', {
-          selectedSpatialZones,
-          selectedTemporalZones,
-          selectedProcesses,
-          searchTerm,
-          filteredFeatures: currentFilteredData.value
-        })
-      })
-
-      return container
-    }
-  })
-  mapStore.leaflet.addControl(new L.Control.ClearFilters())
-
-  mapStore.leaflet.on('click', function (e) {
-    mapClick(e)
-  })
-
-  mapLoaded.value = true
+  L.control.layers(baselayers).addTo(mapStore.leaflet)
 })
-
-async function mapClick() {
-  return
-}
 </script>
 
 <style scoped>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index ea75dee..21a89bb 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,18 +1,27 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import MapView from '../views/MapView.vue'
+import PerceptualView from '../views/PerceptualView.vue'
 import ApiView from '../views/ApiView.vue'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
-      path: '/',
-      name: 'map',
+      path: '/hydrologic_processes',
+      name: 'Hydrologic Processes',
       component: MapView,
       meta: {
         showMap: true
       }
     },
+    {
+      path: '/perceptual_models',
+      name: 'Perceptual Models',
+      component: PerceptualView,
+      meta: {
+        showMap: true
+      }
+    },
     {
       path: '/about',
       name: 'about',
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 0efeb40..3fe6748 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -59,9 +59,22 @@ import TheLeafletMap from '@/components/TheLeafletMap.vue'
 import { mdiChevronRight, mdiChevronLeft, mdiInformationOutline } from '@mdi/js'
 import { useMapStore } from '@/stores/map'
 import { useDisplay } from 'vuetify'
+import { storeToRefs } from 'pinia'
+import L from 'leaflet'
 
-const { mdAndDown } = useDisplay()
+const emit = defineEmits(['onFilter'])
 const mapStore = useMapStore()
+const {
+  mapLoaded,
+  userTouchedFilter,
+  currentFilteredData,
+  selectedSpatialZones,
+  selectedTemporalZones,
+  selectedProcesses,
+  searchTerm
+} = storeToRefs(mapStore)
+
+const { mdAndDown } = useDisplay()
 
 const showFilterDrawer = ref(true)
 const dataDrawerRef = ref(null)
@@ -72,8 +85,193 @@ watch(mdAndDown, (val) => {
   showDataDrawer.value = !val
 })
 
-onMounted(() => {
-  showFilterDrawer.value = !mdAndDown.value
+showFilterDrawer.value = !mdAndDown.value
+
+onMounted(async () => {
+  await mapStore.fetchPerceptualModelsGeojson()
+  const bounds = L.latLngBounds(mapStore.allAvailableCoordinates)
+  mapStore.leaflet.setMaxBounds(bounds)
+
+  const drawnItems = new L.FeatureGroup()
+  mapStore.drawnItems = drawnItems
+  mapStore.leaflet.addLayer(drawnItems)
+  drawnItems.setZIndex(1000)
+
+  let currentRectangle = null
+
+  L.Control.RectangleToggle = L.Control.extend({
+    options: { position: 'topleft' },
+    onAdd: function () {
+      const container = L.DomUtil.create(
+        'div',
+        'leaflet-bar leaflet-control leaflet-control-custom draw-toggle-btn'
+      )
+      updateDrawButton(container)
+      let drawer = null
+      L.DomEvent.on(container, 'click', () => {
+        if (currentRectangle || drawer) {
+          drawnItems.clearLayers()
+          currentRectangle = null
+          mapStore.filterFeatures(
+            (feature) => {
+              if (feature.geometry.type === 'Point') {
+                const [lng, lat] = feature.geometry.coordinates
+                return currentRectangle.getBounds().contains([lat, lng])
+              }
+              return false
+            },
+            'remove',
+            'rectangle'
+          )
+          userTouchedFilter.value = false
+          emit('onFilter', {
+            selectedSpatialZones,
+            selectedTemporalZones,
+            selectedProcesses,
+            searchTerm,
+            filteredFeatures: currentFilteredData.value
+          })
+          updateDrawButton(container)
+        } else {
+          const drawer = new L.Draw.Rectangle(mapStore.leaflet, {
+            shapeOptions: {
+              color: '#3388ff',
+              weight: 2,
+              opacity: 0.8,
+              fillOpacity: 0.3
+            },
+            showArea: false
+          })
+          drawer.enable()
+          currentRectangle = {}
+          updateDrawButton(container)
+
+          const drawHandler = (e) => {
+            mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
+            drawnItems.clearLayers()
+            currentRectangle = e.layer
+            currentRectangle.feature = {
+              type: 'Feature',
+              geometry: {
+                type: 'Polygon',
+                coordinates: [
+                  currentRectangle.getLatLngs()[0].map((latLng) => [latLng.lng, latLng.lat])
+                ]
+              },
+              properties: {}
+            }
+            drawnItems.addLayer(currentRectangle)
+            mapStore.leaflet.fitBounds(currentRectangle.getBounds())
+
+            mapStore.filterFeatures(
+              (feature) => {
+                if (feature.geometry.type === 'Point') {
+                  const [lng, lat] = feature.geometry.coordinates
+                  return currentRectangle.getBounds().contains([lat, lng])
+                }
+                return false
+              },
+              'add',
+              'rectangle'
+            )
+
+            userTouchedFilter.value = true
+            emit('onFilter', {
+              selectedSpatialZones,
+              selectedTemporalZones,
+              selectedProcesses,
+              searchTerm,
+              filteredFeatures: currentFilteredData.value
+            })
+
+            updateDrawButton(container)
+          }
+
+          mapStore.leaflet.on(L.Draw.Event.CREATED, drawHandler)
+          mapStore.leaflet.once('draw:drawstop', () => {
+            // If no rectangle was drawn, reset the toggle state
+            if (!drawnItems.getLayers().length) {
+              currentRectangle = null
+              updateDrawButton(container)
+              mapStore.leaflet.off(L.Draw.Event.CREATED, drawHandler)
+            }
+          })
+        }
+      })
+
+      return container
+    }
+  })
+  mapStore.leaflet.addControl(new L.Control.RectangleToggle())
+
+  async function mapClick() {
+    return
+  }
+  function updateDrawButton(container) {
+    if (currentRectangle) {
+      container.innerHTML = '<span class="material-icons">close</span>'
+      container.style.background = 'white'
+      container.title = 'Clear box'
+    } else {
+      container.style.backgroundImage = "url('/DrawIcon.ico')"
+      container.innerHTML = ''
+      container.title = 'Draw a box'
+    }
+    container.style.backgroundRepeat = 'no-repeat'
+    container.style.backgroundSize = '60% 60%'
+    container.style.backgroundPosition = 'center'
+    container.style.borderRadius = '4px'
+    container.style.width = '34px'
+    container.style.height = '34px'
+    container.style.cursor = 'pointer'
+    container.style.display = 'flex'
+    container.style.alignItems = 'center'
+    container.style.justifyContent = 'center'
+  }
+  L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Click and drag to draw a box'
+  L.Control.ClearFilters = L.Control.extend({
+    options: { position: 'topleft' },
+    onAdd: function () {
+      const container = L.DomUtil.create(
+        'div',
+        'leaflet-bar leaflet-control leaflet-control-custom'
+      )
+      container.title = 'Reset Filters'
+
+      container.style.backgroundImage = "url('/ClearFilter.ico')"
+      container.style.backgroundRepeat = 'no-repeat'
+      container.style.backgroundSize = '60% 60%'
+      container.style.backgroundColor = 'white'
+      container.style.backgroundPosition = 'center'
+      container.style.borderRadius = '4px'
+      container.style.width = '34px'
+      container.style.height = '34px'
+      container.style.cursor = 'pointer'
+      container.style.display = 'flex'
+      container.style.alignItems = 'center'
+      container.style.justifyContent = 'center'
+
+      L.DomEvent.on(container, 'click', () => {
+        mapStore.clearAllFilters()
+        emit('onFilter', {
+          selectedSpatialZones,
+          selectedTemporalZones,
+          selectedProcesses,
+          searchTerm,
+          filteredFeatures: currentFilteredData.value
+        })
+      })
+
+      return container
+    }
+  })
+  mapStore.leaflet.addControl(new L.Control.ClearFilters())
+
+  mapStore.leaflet.on('click', function (e) {
+    mapClick(e)
+  })
+
+  mapLoaded.value = true
 })
 
 const onFilter = (data) => {
diff --git a/frontend/src/views/PerceptualView.vue b/frontend/src/views/PerceptualView.vue
new file mode 100644
index 0000000..9643204
--- /dev/null
+++ b/frontend/src/views/PerceptualView.vue
@@ -0,0 +1,169 @@
+<template>
+  <v-overlay :model-value="!mapStore.mapLoaded" class="d-flex align-center justify-center">
+    <v-progress-circular indeterminate :size="128" />
+  </v-overlay>
+
+  <v-container fluid class="pa-0 fill-height position-relative">
+    <v-row class="fill-height ma-0">
+      <v-col class="map-container pa-0">
+        <TheLeafletMap />
+
+        <div id="wms-legend"></div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import TheLeafletMap from '@/components/TheLeafletMap.vue'
+import { useMapStore } from '@/stores/map'
+import L from 'leaflet'
+import 'leaflet-groupedlayercontrol'
+import 'leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css'
+
+const mapStore = useMapStore()
+
+// Load map store properties as refs for reactivity
+const { mapLoaded } = storeToRefs(mapStore)
+
+// Define the perceptual models "Domain" WMS layer
+const wmsLayerDomain = L.tileLayer.wms(
+  'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Domain/MapServer/WMSServer',
+  {
+    layers: '0',
+    format: 'image/png',
+    transparent: true,
+    pane: 'overlayPane'
+  }
+)
+
+// Define the perceptual models "Provinces" WMS layer
+const wmsLayerProvince = L.tileLayer.wms(
+  'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Province/MapServer/WMSServer',
+  {
+    layers: '0',
+    format: 'image/png',
+    transparent: true,
+    pane: 'overlayPane'
+  }
+)
+
+// Define the Legend URLs
+const legendUrls = {
+  domain:
+    'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Domain/MapServer/WMSServer?service=WMS&request=GetLegendGraphic&format=image/png&layer=0&version=1.1.1',
+  province:
+    'https://arcgis.cuahsi.org/arcgis/services/HydroProcess/Province/MapServer/WMSServer?service=WMS&request=GetLegendGraphic&format=image/png&layer=0&version=1.1.1'
+}
+
+onMounted(async () => {
+  // set the map bounds so that only North America is visible
+  // also set the minimum zoom level to prevent users from zooming
+  // out too far and seeing the entire world.
+  mapStore.leaflet.setMaxBounds(
+    L.latLngBounds([
+      [5, -170], // SW coordinate of bbox
+      [75, -50] // NE coordinate of bbox
+    ])
+  )
+  mapStore.leaflet.setMinZoom(3)
+
+  // Add the perceptual models "Domain" layer to the map
+  // Only adding the "Domain" layer by default to
+  // control which layer is initially active.
+  wmsLayerDomain.addTo(mapStore.leaflet)
+
+  // Set up grouped layer control
+  // Add the default base layer to the map before adding the control
+  const groupedOverlays = {
+    Regions: {
+      Domains: wmsLayerDomain,
+      Provinces: wmsLayerProvince
+    }
+  }
+
+  // Move layer control to the left
+  const layerControl = new L.Control.GroupedLayers(null, groupedOverlays, {
+    exclusiveGroups: ['Regions'],
+    groupCheckboxes: true,
+    position: 'topleft',
+    collapsed: false
+  })
+  mapStore.leaflet.addControl(layerControl)
+
+  // Move zoom control to the right
+  mapStore.leaflet.removeControl(mapStore.leaflet.zoomControl)
+  mapStore.leaflet.zoomControl = L.control.zoom({ position: 'topright' }).addTo(mapStore.leaflet)
+
+  // add hooks to update the legend when layers are added or removed.
+  // Then call the updateLegend function manually. This is necessary
+  // because the overlayadd isn't called when initially adding the
+  // layers to the map.
+  mapStore.leaflet.on('overlayadd', updateLegend)
+  mapStore.leaflet.on('overlayremove', updateLegend)
+  updateLegend()
+
+  // set the mapLoaded flag to true after the map and layers have been initialized
+  // this will turn off the loading overlay and allow the map to be displayed
+  mapLoaded.value = true
+
+  console.log(mapStore.leaflet.hasLayer(wmsLayerDomain))
+  console.log(mapStore.leaflet.hasLayer(wmsLayerProvince))
+})
+
+function updateLegend() {
+  const domainOn = mapStore.leaflet.hasLayer(wmsLayerDomain)
+  const provinceOn = mapStore.leaflet.hasLayer(wmsLayerProvince)
+  let html = ''
+  if (domainOn) {
+    html += `<img src="${legendUrls.domain}" alt="Domain Legend" />`
+  }
+  if (provinceOn) {
+    html += `<img src="${legendUrls.province}" alt="Province Legend" />`
+  }
+  document.getElementById('wms-legend').innerHTML = html
+}
+</script>
+
+<style scoped>
+div {
+  line-height: 0;
+}
+
+/* Legend styles */
+#wms-legend {
+  z-index: 1001;
+  position: absolute;
+  overflow: auto;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  min-width: 90px;
+  max-width: 350px;
+  max-height: 300px;
+  padding: 6px;
+  font-size: 1em;
+  border-radius: 6px;
+  bottom: 10px;
+  left: 10px;
+  background: white;
+}
+
+@media (max-width: 600px) {
+  #wms-legend {
+    z-index: 1001;
+    position: absolute;
+    overflow: auto;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    min-width: 90px;
+    max-width: 350px;
+    max-height: 120px;
+    padding: 6px;
+    font-size: 1em;
+    border-radius: 6px;
+    bottom: 4px;
+    left: 4px;
+    background: white;
+  }
+}
+</style>