diff --git a/img/bg/mark-harpur-K2s_YE031CA-unsplash.jpg b/img/bg/mark-harpur-K2s_YE031CA-unsplash.jpg
new file mode 100644
index 0000000..f6067ad
Binary files /dev/null and b/img/bg/mark-harpur-K2s_YE031CA-unsplash.jpg differ
diff --git a/index.php b/index.php
index abea3c0..f3a8e9e 100644
--- a/index.php
+++ b/index.php
@@ -4,33 +4,48 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>FixPhrase</title>
+        <link rel="stylesheet" href="https://static.netsyms.net/bootstrap/5/bootstrap.quartz.min.css" />
         <link rel="stylesheet" href="js/maplibre-gl/dist/mapbox-gl.css" />
         <script src="https://static.netsyms.net/jquery/jquery.min.js"></script>
+        <script src="https://static.netsyms.net/bootstrap/5/bootstrap.bundle.min.js"></script>
+        <script src="js/map.js"></script>
         <script src="js/maplibre-gl/dist/mapbox-gl.js"></script>
         <script src="js/map_maplibre.js"></script>
         <script src="js/map.js"></script>
         <style>
+
             body {
-                height: 100vh;
-                width: 100vw;
-                padding: 0;
-                margin: 0;
+                background-image: url(<?php
+                $bgs = glob("img/bg/*.jpg");
+                echo $bgs[array_rand($bgs, 1)];
+                ?>);
+                background-attachment: fixed;
             }
-            #mapbox {
-                width: 100vw;
+
+            @media (min-width: 1200px) and (max-width: 1499px) {
+                #page-container {
+                    padding-left: 10rem;
+                    padding-right: 10rem;
+                }
+            }
+
+            @media (min-width: 1500px) {
+                #page-container {
+                    padding-left: 15rem;
+                    padding-right: 15rem;
+                }
+            }
+
+            #mapcard {
                 flex-grow: 9999;
+                max-height: 90vh;
+                height: 800px;
             }
 
             #mapbox .mapboxgl-user-location-dot, #mapbox .mapboxgl-user-location-accuracy-circle {
                 pointer-events: none;
             }
 
-            #wordbox {
-                width: 500px;
-                max-width: 75vw;
-                font-size: 110%;
-            }
-
             #header {
                 display: flex;
                 justify-content: space-between;
@@ -40,10 +55,18 @@
                 flex-wrap: wrap;
             }
 
-            #header h1 {
-                padding: 0;
-                margin: 0;
-                margin-right: 1em;
+            .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+                border-top-color: rgba(255, 255, 255, 0.4);
+                border-width: 0.5rem 0.5rem 0;
+            }
+            .mapboxgl-popup-content {
+                background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3) 70%);
+                box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px rgba(255, 255, 255, 0.1), 1px 3px 24px -1px rgba(0, 0, 0, 0.15);
+                background-color: transparent;
+                border: none;
+                border-radius: 0.5rem;
+                background-clip: border-box;
+                color: black;
             }
 
             #page-container {
@@ -88,16 +111,48 @@
 
     </head>
     <body>
-        <div id="page-container">
-            <div id="header">
-                <h1>FixPhrase</h1>
-                <div><input type="text" placeholder="FixPhrase Words" id="wordbox"/> <button onclick="dolookup();">Find</button></div>
-                <div>Locate any place on Earth with just four words. <a href="https://source.netsyms.com/Netsyms/fixphrase.com/src/branch/master/FixPhrase.lib.php">Free and open source</a>.
-                    <span class="taptext">Tap</span><span class="clicktext">Click</span> the map to
-                    get the unique phrase for that spot. Type a phrase into the search box to
-                    pinpoint it on the map.</div>
+        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+            <div class="container-fluid">
+                <a class="navbar-brand" href=".">FixPhrase</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a class="nav-link" href="https://source.netsyms.com/Netsyms/fixphrase.com/src/branch/master/FixPhrase.lib.php">Open Source</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <div class="container mw-100" id="page-container">
+            <div class="card mb-2 mt-2">
+
+                <div class="card-body">
+                    <div class="input-group mb-2 d-none d-md-flex">
+                        <input class="form-control" type="text" placeholder="FixPhrase Words" id="wordbox"/>
+                        <button class="btn btn-secondary" onclick="dolookup($('#wordbox').val());">Find on Map</button>
+                    </div>
+                    <div class="d-grid d-md-none gap-2 mb-2">
+                        <input class="form-control" type="text" placeholder="FixPhrase Words" id="wordbox-mobile"/>
+                        <button class="btn btn-secondary btn-block" onclick="dolookup($('#wordbox-mobile').val());">Find on Map</button>
+                    </div>
+                    <div>
+                        Locate any place on Earth with just four words.
+                        <span class="taptext">Tap</span><span class="clicktext">Click</span> the map to
+                        get the unique phrase for that spot. Type a phrase into the search box to
+                        pinpoint it on the map.
+                    </div>
+                </div>
+            </div>
+            <div class="card mb-2" id="mapcard">
+                <a name="map"></a>
+                <div class="card-body p-2">
+                    <div id="mapbox" class="w-100 h-100"></div>
+                </div>
             </div>
-            <div id="mapbox"></div>
         </div>
 
         <script>
@@ -105,11 +160,12 @@
                 createMap();
             };
 
-            function dolookup() {
+            function dolookup(words) {
                 $.getJSON("lookup.php", {
-                    words: $("#wordbox").val()
+                    words: words
                 }, function (resp) {
                     if (resp.status == "OK") {
+                        location.hash = "#map";
                         new mapboxgl.Popup()
                                 .setLngLat({lat: resp.coords[0], lng: resp.coords[1]})
                                 .setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
diff --git a/js/map_maplibre.js b/js/map_maplibre.js
index 1cc2db2..fdd7c6e 100644
--- a/js/map_maplibre.js
+++ b/js/map_maplibre.js
@@ -12,7 +12,7 @@ function maplibreMap() {
 
     var map = new mapboxgl.Map({
         container: 'mapbox',
-        style: "https://maps.netsyms.net/styles/osm-liberty/style.json",
+        style: "https://maps.netsyms.net/styles/klokantech-terrain/style.json",
         //attributionControl: false,
         interactive: true,
         pitch: 0,
@@ -27,10 +27,10 @@ function maplibreMap() {
             latitude: coordinates.lat,
             longitude: coordinates.lng
         }, function (resp) {
-            new mapboxgl.Popup()
-                    .setLngLat(coordinates)
-                    .setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
-                    .addTo(map);
+            var popup = new mapboxgl.Popup();
+            popup.setLngLat(coordinates);
+            popup.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
+            popup.addTo(map);
         });
     });
 
