diff --git a/content/custom/whereami.md b/content/custom/whereami.md
new file mode 100644
index 0000000..d514795
--- /dev/null
+++ b/content/custom/whereami.md
@@ -0,0 +1,6 @@
+---
+title: Where Am I?
+url: /whereami
+layout: current_location
+---
+
diff --git a/content/page/whereami.md b/content/page/whereami.md
deleted file mode 100644
index d0d6203..0000000
--- a/content/page/whereami.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: page
-title: Where Am I?
-url: /whereami
----
-
-{{< rawhtml >}}
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
-  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
-  crossorigin=""/>
- <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
-   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
-   crossorigin=""></script>
-
- <div id="mapid"></div>
-
-<style>
-#mapid { height: 480px; }
-</style>
-
-<script type="text/javascript">
-var lat, lon
-
-fetch('https://adriano.fyi/current_location')
-  .then(response => response.json())
-  .then(data => {
-      var lat = data.lat
-      var lon = data.lon
-      var map = L.map('mapid').setView([lat, lon], 15);
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
-      }).addTo(map);
-
-      // show the scale bar on the lower left corner
-      L.control.scale().addTo(map);
-
-      // show a marker on the map
-      L.marker({lon: lon, lat: lat}).bindPopup('Come say hi').addTo(map);
-
-  });
-
-</script>
-{{< /rawhtml >}}
diff --git a/layouts/custom/current_location.html b/layouts/custom/current_location.html
new file mode 100644
index 0000000..317495f
--- /dev/null
+++ b/layouts/custom/current_location.html
@@ -0,0 +1,38 @@
+{{ define "main" }}
+  {{ $current_location := getJSON "https://adriano.fyi/current_location" }}
+  {{ $geocode_url := printf "http://mycorp.adriano.fyi:4000/v1/reverse?point.lon=%f&point.lat=%f&layers=coarse&size=1" $current_location.lon $current_location.lat }}
+  {{ $dataJ := getJSON $geocode_url }}
+  {{ $place :=  index $dataJ.features 0 }}
+
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+                         integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+                         crossorigin=""/>
+  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+          integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+          crossorigin=""></script>
+  <style>
+    #mapid { height: 480px; }
+  </style>
+
+  <div class="container" role="main">
+    <h2>{{ $place.properties.label }}</h2>
+    <div id="mapid"></div>
+
+    <script type="text/javascript">
+      var lat = {{ $current_location.lat }};
+      var lon = {{ $current_location.lon }};
+      var map = L.map('mapid').setView([lat, lon], 15);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+      }).addTo(map);
+
+      // show the scale bar on the lower left corner
+      L.control.scale().addTo(map);
+
+      // show a marker on the map
+      L.marker({lon: lon, lat: lat}).bindPopup('Come say hi').addTo(map);
+    </script>
+  </div>
+  </div>
+{{ end }}
diff --git a/static/css/main.css b/static/css/main.css
index 1cf804c..7ffde41 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -590,6 +590,122 @@ footer .theme-by {
   }
 }
 
+/* --- custom layout css --- */
+.intro-header .custom-heading
+.intro-header .tags-heading,
+.intro-header .categories-heading {
+  text-align: center;
+}
+.intro-header.big-img .custom-heading,
+.intro-header.big-img .post-heading {
+  padding: 100px 0;
+  color: #FFF;
+  text-shadow: 1px 1px 3px #000;
+}
+.intro-header .custom-heading h1,
+.intro-header .tags-heading h1,
+.intro-header .categories-heading h1 {
+  margin-top: 0;
+  font-size: 50px;
+}
+.intro-header .post-heading h1 {
+  margin-top: 0;
+  font-size: 35px;
+}
+.intro-header .custom-heading .page-subheading,
+.intro-header .post-heading .post-subheading {
+  font-size: 27px;
+  line-height: 1.1;
+  display: block;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  margin: 10px 0 0;
+}
+.intro-header .post-heading .post-subheading {
+  margin-bottom: 20px;
+}
+.intro-header.big-img .custom-heading .page-subheading,
+.intro-header.big-img .post-heading .post-subheading {
+  font-weight: 400;
+}
+.intro-header.big-img .custom-heading hr {
+  box-shadow: 1px 1px 3px #000;
+  -webkit-box-shadow: 1px 1px 3px #000;
+  -moz-box-shadow: 1px 1px 3px #000;
+}
+.intro-header.big-img .post-heading .post-meta {
+  color: #EEE;
+}
+.intro-header.big-img .img-desc {
+  background: rgba(30, 30, 30, 0.6);
+  position: absolute;
+  padding: 5px 10px;
+  font-size: 11px;
+  color: #EEE;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  right: 0;
+  bottom: 0;
+  display: none;
+}
+@media only screen and (min-width: 768px) {
+  .intro-header {
+    margin-top: 130px;
+  }
+  .intro-header.big-img {
+    margin-top: 91px;  /* Full navbar is small navbar + 20px padding on each side when expanded */
+  }
+  .intro-header.big-img .custom-heading,
+  .intro-header.big-img .post-heading  {
+    padding: 150px 0;
+  }
+  .intro-header .custom-heading h1,
+  .intro-header .tags-heading h1,
+  .intro-header .categories-heading h1 {
+    font-size: 80px;
+    text-align: center;
+  }
+  .intro-header .post-heading h1 {
+    font-size: 50px;
+  }
+  .intro-header.big-img .img-desc {
+    font-size: 14px;
+  }
+}
+
+.header-section.has-img .no-img {
+  margin-top: 0;
+  background: #FCFCFC;
+  margin: 0 0 40px;
+  padding: 20px 0;
+  box-shadow: 0 0 5px #AAA;
+}
+/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
+.header-section.has-img .intro-header.no-img {
+  display: none;
+}
+@media only screen and (max-width: 365px) {
+  .header-section.has-img .intro-header.no-img {
+    display: block;
+  }
+  .intro-header.big-img {
+    width: 100%;
+    height: 220px;
+  }
+  .intro-header.big-img .custom-heading,
+  .intro-header.big-img .post-heading {
+    display: none;
+  }
+  .header-section.has-img .big-img {
+    margin-bottom: 0;
+  }
+}
+@media only screen and (max-width: 325px) {
+  .intro-header.big-img {
+    height: 200px;
+  }
+}
+
+
 /* --- Pager --- */
 
 .pager li a {