diff --git a/css/main.css b/css/main.css
index 2c7b0c1..a2339df 100644
--- a/css/main.css
+++ b/css/main.css
@@ -53,6 +53,26 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
 }
+select {
+
+  font-family: inherit;
+  line-height: 1.4em;
+
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 4px;
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance:none;
+
+  background-image: url(/img/select-arrows.png) !important;
+  background-size: 11px;
+  background-repeat: no-repeat !important;
+  background-position-x: 100% !important;
+  background-position-y: 50% !important;
+}
 #header {
   width: 100%;
   color: #FFE2A8;
@@ -62,7 +82,7 @@ h1, h2, h3, h4, h5, h6 {
   align-items: center;
   height: 30px;
   background: #4f2e28;
-  padding: 0 10px 0 6px;
+  padding: 0 10px 0 8px;
   /*background: linear-gradient(90deg, #4A282A, #66373a);*/
   overflow-x: auto;
 }
@@ -86,14 +106,14 @@ h1, h2, h3, h4, h5, h6 {
   width: 20px;
   margin-right: 6px;
 }
-#header .main-title {
+#header .site-title {
   white-space: nowrap;
   display: flex;
   align-items: center;
   flex-direction: row;
   font-size: 15px;
 }
-#header .main-title a {
+#header .site-title a {
   display: inline-flex;
   margin-right: 3px;
 }
@@ -105,40 +125,81 @@ h1, h2, h3, h4, h5, h6 {
   bottom: 0;
   top: 30px;
 }
-#body p {
+#sidebar p {
   margin-bottom: 12px;
 }
 #map-wrap {
   z-index: 0;
   flex-basis: 100%;
-  padding: 10px 10px 10px 0;
+  padding: 10px;
   position: relative;
 }
+body.sidebar-open #map-wrap {
+  padding-right: 0;
+}
 #map {
-  border: 1px solid #ddd;
+  border: 1px solid #ccc;
   height: 100%;
   width: 100%;
 }
-#controls {
+#map .quickinfo {
+  font-family: "National Park", "Source Sans", "Helvetica", sans-serif;
+}
+#nameplate {
+  color: #000;/*#331d1a;*/
+  line-height: 1.4;
+  padding: 0 10px 10px 0;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  background: #fff;
   position: absolute;
+  top: 10px;
   left: 10px;
+  z-index: 2;
+  text-align: left;
+  max-width: 100%;
+}
+#nameplate select {
+  font-size: 16px;
+  width: 100%;
+}
+#nameplate > *:not(:last-child) {
+  margin-bottom: 8px;
+}
+#nameplate .swatch {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 6px;
+  border: 1px solid #738C40;
+  background: #D8E8B7;
+}
+#nameplate a {
+  color: #aaa;
+  text-decoration: none;
+  vertical-align: text-bottom;
+  padding-left: 8px;
+  margin-top: -2px;
+}
+#nameplate a:hover {
+  text-decoration: underline;
+}
+#nameplate h1 {
+  font-size: 20px;
+}
+#controls {
+  position: absolute;
+  right: 50px;
   top: 20px;
+  width: 100%;
+  max-width: 200px;
   z-index: 2;
   border-radius: 5px;
 }
 #controls select {
   font-size: 15px;
-  font-family: inherit;
-  line-height: 1.4em;
-  max-width: 200px;
   width: 100%;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance:none;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  padding: 4px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
   margin-bottom: 8px;
 }
@@ -148,13 +209,16 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 100;
 }
 #sidebar {
-  display: flex;
+  display: none;
   flex-direction: column;
   background: white;
   height: 100%;
   min-width: 250px;
   width: 33.3333vw;
 }
+body.sidebar-open #sidebar {
+  display: flex;
+}
 #sidebar .top,
 #sidebar .body {
   padding: 10px;
@@ -199,18 +263,26 @@ h1, h2, h3, h4, h5, h6 {
 
 @media only screen and (max-width: 600px) {
   #body {
-    flex-direction: column-reverse;
+    flex-direction: column;
+  }
+  #nameplate {
+    position: relative;
+    left: 0;
+    top: 0;
+    padding: 10px;
   }
   #header .tagline {
     display: none;
   }
   #sidebar {
     width: 100%;
-    height: 50%;
+    height: 30%;
     flex: 0 0 auto;
     min-width: 100%;
   }
   #map-wrap {
+    display: flex;
+    flex-direction: column;
     padding: 0;
   }
   #map {
diff --git a/img/select-arrows.png b/img/select-arrows.png
new file mode 100644
index 0000000..5eec5d1
Binary files /dev/null and b/img/select-arrows.png differ
diff --git a/index.html b/index.html
index ae54fd5..746a12c 100644
--- a/index.html
+++ b/index.html
@@ -23,24 +23,25 @@
       })(window, document, 'dataLayer', '0245a355-96b9-47f5-997e-8cafd843c18a');
     </script>
     <div id="header">
-      <div class="main-title">
+      <div class="site-title">
         <a href="/"><img src="img/opentrailmap-logo.svg" alt="Stick figure hiker with walking stick and backpack above a dashed line surrounded by a map outline"/> <h1>OpenTrailMap</h1></a> <p class="tagline">by <a href="https://openstreetmap.us" target="_blank">OpenStreetMap US</a></p>
       </div>
       <ul class="main-menu">
         <li><a href="https://openstreetmap.us/our-work/trails/" target="_blank">About</a></li>
         <li><a href="https://github.com/osmus/OpenTrailMap" target="_blank">GitHub</a></li>
         <li><a href="https://openstreetmap.app.neoncrm.com/forms/trails-stewardship-initiative" target="_blank">Donate</a></li>
+        <li><a href="" id="inspect-toggle">Inspect</a></li>
       </ul>
     </div>
     <div id="body">
-      <div id="sidebar"></div>
       <div id="map-wrap">
-        <div id="map"></div>
-        <div id="controls">
+        <!--<div id="controls"></div>-->
+        <div id="nameplate">
+          <h1 id="focus-meta" style="display: none;"><span style="flex-basis: 100%;"><span class="swatch"></span><span id="map-title"></span></span><a href="" title="Clear focus area" id="clear-focus">⨯</a></h1>
           <select id="travel-mode">
             <optgroup label="Trails">
-              <option value="all">All Trails</option>
-              <option value="foot" selected>Hiking & Walking Trails</option>
+              <option value="all" selected>All Trails</option>
+              <option value="foot">Hiking & Walking Trails</option>
               <option value="wheelchair">Wheelchair Trails</option>
               <option value="bicycle">Biking Trails</option>
               <option value="horse">Horseback Riding Trails</option>
@@ -53,7 +54,9 @@
           </select>
           <select id="lens"></select>
         </div>
+        <div id="map"></div>
       </div>
+      <div id="sidebar"></div>
     </div>
     <script type="application/javascript" src="js/mapController.js"></script>
     <script type="application/javascript" src="js/sidebarController.js"></script>
diff --git a/js/hashController.js b/js/hashController.js
index 1c90da3..d7ded9a 100644
--- a/js/hashController.js
+++ b/js/hashController.js
@@ -50,4 +50,5 @@ function updateForHash() {
   setLens(hashValue("lens"));
   selectEntity(selectedEntityInfoFromHash());
   focusEntity(focusedEntityInfoFromHash());
+  hashValue("inspect") ? openSidebar() : closeSidebar();
 }
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 1484299..5285a79 100644
--- a/js/index.js
+++ b/js/index.js
@@ -206,7 +206,7 @@ const waterwayOnlyLenses = [
   "rapids",
   "open_water",
 ];
-const defaultTravelMode = "foot";
+const defaultTravelMode = "all";
 const defaultLens= "";
 var travelMode = defaultTravelMode;
 var lens = defaultLens;
@@ -238,6 +238,19 @@ function focusEntity(entityInfo) {
   });
 
   updateMapForFocus();
+
+  document.getElementById("map-title").innerText = '';
+
+  if (focusedEntityInfo) {
+    document.getElementById("focus-meta").style.display = 'flex';
+    fetchOsmEntity(type, entityId).then(function(entity) {
+      if (entity?.tags?.name) {
+        document.getElementById("map-title").innerText = entity.tags.name;
+      }
+    });
+  } else  {
+    document.getElementById("focus-meta").style.display = 'none';
+  }
 }
 
 function selectEntity(entityInfo) {
@@ -258,26 +271,16 @@ function selectEntity(entityInfo) {
   updateMapForSelection();
   updateMapForHover();
 
-  updateSidebar(selectedEntityInfo);
+  if (isSidebarOpen()) updateSidebar();
 
   if (!selectedEntityInfo) return;
 
-  fetchOsmEntity(type, entityId).then(function(entity) {
-    if (entity) {
-      fetchOsmChangeset(entity.changeset).then(function(changeset) {
-        updateMetaTable(entity, changeset);
-      });
-    }
-    var tags = entity && entity.tags;
-    if (tags) updateTagsTable(tags);
-
-    // update map again in case we selected a relation and want to highlight members
-    updateMapForSelection();
-  });
-
-  fetchOsmEntityMemberships(type, entityId).then(function(memberships) {
-    updateMembershipsTable(memberships);
-  });
+  if (type === "relation") {
+    fetchOsmEntity(type, entityId).then(function(entity) {
+      // update map again to add highlighting to any relation members
+      updateMapForSelection();
+    });
+  }
 }
 function updateLensControl() {
   var html = "";
@@ -334,6 +337,14 @@ window.onload = function(event) {
   document.getElementById("lens").addEventListener('change', function(e) {
     setLens(e.target.value);
   });
+  document.getElementById("inspect-toggle").addEventListener('click', function(e) {
+    e.preventDefault();
+    toggleSidebar();
+  });
+  document.getElementById("clear-focus").addEventListener('click', function(e) {
+    e.preventDefault();
+    focusEntity();
+  });
 
   updateLensControl();
 
@@ -404,4 +415,4 @@ window.onload = function(event) {
 
   map
     .on('load', loadInitialMap);
-}
\ No newline at end of file
+}
diff --git a/js/mapController.js b/js/mapController.js
index 9200b36..2b8927c 100644
--- a/js/mapController.js
+++ b/js/mapController.js
@@ -156,14 +156,12 @@ function toggleWaterTrailsIfNeeded() {
     map.addSource("trails_poi", {
       type: "vector",
       url: "https://dwuxtsziek7cf.cloudfront.net/trails_poi.json",
-      attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
     });
   }
   if (!map.getSource('water_trails_poi')) {
     map.addSource("water_trails_poi", {
       type: "vector",
       url: "https://dwuxtsziek7cf.cloudfront.net/water_trails_poi.json",
-      attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
     });
   }
 
@@ -173,7 +171,6 @@ function toggleWaterTrailsIfNeeded() {
     map.addSource("water_trails", {
       type: "vector",
       url: "https://dwuxtsziek7cf.cloudfront.net/water_trails.json",
-      attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
     });
     loadTrailLayers('water_trail');
 
@@ -183,7 +180,6 @@ function toggleWaterTrailsIfNeeded() {
     map.addSource("trails", {
       type: "vector",
       url: "https://dwuxtsziek7cf.cloudfront.net/trails.json",
-      attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
     });
     loadTrailLayers('trail');
   }  
@@ -780,7 +776,7 @@ function loadTrailLayers(name) {
     }
   }, 'clickable');
   addTrailLayer({
-    "id": "trail-major-pois",
+    "id": "major-trail-pois",
     "source": 'trails_poi',
     "source-layer": 'trail_poi',
     "type": "symbol",
@@ -821,11 +817,6 @@ function loadTrailLayers(name) {
       "text-halo-blur": 1,
       "text-halo-color": colors.labelHalo,
     },
-    "filter": [
-      "any",
-      ['in', ["get", "leisure"], ["literal", ["park", "nature_reserve"]]],
-      ['in', ["get", "boundary"], ["literal", ["protected_area", "national_park"]]]
-    ]
   }, 'clickable');
   addTrailLayer({
     "id": "trails-qa",
@@ -1486,6 +1477,15 @@ function updateMapForFocus() {
     ["==", ["id"], focusedId], "#738C40",
     "#ACC47A"
   ]);
+  map.setFilter('major-trail-pois', [
+    "all",
+    [
+      "any",
+      ['in', ["get", "leisure"], ["literal", ["park", "nature_reserve"]]],
+      ['in', ["get", "boundary"], ["literal", ["protected_area", "national_park"]]]
+    ],
+    ["!=", ["get", "OSM_ID"], focusedEntityInfo ? focusedEntityInfo.id : null]
+  ]);
 }
 
 function updateMapForSelection() {
@@ -1546,27 +1546,69 @@ function entityForEvent(e, layerIds) {
   var features = map.queryRenderedFeatures(e.point, { layers: layerIds });
   var feature = features.length && features[0];
   if (feature) {
+    var focusLngLat = feature.geometry.type === 'Point' ? feature.geometry.coordinates : e.lngLat;
     if (feature.properties.OSM_ID && feature.properties.OSM_TYPE) {
       return {
         id: feature.properties.OSM_ID,
         type: feature.properties.OSM_TYPE,
-        focusLngLat: e.lngLat,
+        focusLngLat: focusLngLat,
+        rawFeature: feature,
       };
     }
     return {
       id: feature.id.toString().slice(0, -1),
       type: 'node',
-      focusLngLat: e.lngLat,
+      focusLngLat: focusLngLat,
+      rawFeature: feature,
     };
   }
   return null;
 }
 
+var activePopup;
+
 function didClickMap(e) {
-  selectEntity(entityForEvent(e, layerIdsByCategory.clickable));
+
+  var entity = entityForEvent(e, layerIdsByCategory.clickable);
+  selectEntity(entity);
+
+  if (!entity || isSidebarOpen()) return;
+  
+  var coordinates = entity.focusLngLat;
+
+  // Ensure that if the map is zoomed out such that multiple
+  // copies of the feature are visible, the popup appears
+  // over the copy being pointed to.
+  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+  }
+
+  var tags = entity.rawFeature.properties;
+
+  var html = "";
+
+  if (tags.name) html += "<b>" + tags.name + "</b><br/>"
+  html += '<a id="view-feature-details" href="" class="button">View Details</a>';
+
+  activePopup = new maplibregl.Popup({
+      className: 'quickinfo',
+      closeButton: false,
+    })
+    .setLngLat(coordinates)
+    .setHTML(html)
+    .addTo(map);
+  
+  document.getElementById("view-feature-details").addEventListener('click', function(e) {
+    e.preventDefault();
+    openSidebar();
+  });
+}
+function didClickViewDetails(e) {
+  e.preventDefault();
 }
 function didDoubleClickMap(e) {
-  focusEntity(entityForEvent(e, ['trail-major-pois']));
+  var entity = entityForEvent(e, ['major-trail-pois']);
+  if (entity) focusEntity(entity);
 }
 
 function didMouseMoveMap(e) {
diff --git a/js/sidebarController.js b/js/sidebarController.js
index f35cb1d..81f7386 100644
--- a/js/sidebarController.js
+++ b/js/sidebarController.js
@@ -1,5 +1,34 @@
+function isSidebarOpen() {
+  return document.getElementsByTagName('body')[0].classList.contains('sidebar-open');
+}
+function toggleSidebar(toOpen) {
+  if (isSidebarOpen()) {
+    closeSidebar();
+  } else {
+    openSidebar();
+  }
+}
+function openSidebar() {
+  if (!isSidebarOpen()) {
+    if (activePopup) {
+      activePopup.remove();
+      activePopup = null;
+    }
+    document.getElementsByTagName('body')[0].classList.add('sidebar-open');
+    setHashParameters({ inspect: 1 });
+    updateSidebar();
+  }
+}
+function closeSidebar() {
+  if (isSidebarOpen()) {
+    document.getElementsByTagName('body')[0].classList.remove('sidebar-open');
+    setHashParameters({ inspect: null });
+  }
+}
+
+function updateSidebar() {
 
-function updateSidebar(entity) {
+  var entity = selectedEntityInfo;
 
   if (!entity) {
     document.getElementById('sidebar').innerHTML = "";
@@ -53,6 +82,20 @@ function updateSidebar(entity) {
   html += "</div>";
 
   document.getElementById('sidebar').innerHTML = html;
+
+  fetchOsmEntity(type, entityId).then(function(entity) {
+    if (entity) {
+      fetchOsmChangeset(entity.changeset).then(function(changeset) {
+        updateMetaTable(entity, changeset);
+      });
+    }
+    var tags = entity && entity.tags;
+    if (tags) updateTagsTable(tags);
+  });
+
+  fetchOsmEntityMemberships(type, entityId).then(function(memberships) {
+    updateMembershipsTable(memberships);
+  });
 }
 
 function updateMetaTable(entity, changeset) {