diff --git a/.gitignore b/.gitignore
index 11cdd9386..f97bae752 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,4 @@ public/lib
 node_modules
 todo.txt
 .sass-cache
+.byebug_history
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
index c66b8dc55..b0e564c20 100644
--- a/Gemfile
+++ b/Gemfile
@@ -7,7 +7,7 @@ gem 'rake',  '~> 12.3.2'
 gem "will_paginate", "3.1.7"
 gem "will_paginate-bootstrap"
 gem "friendly_id"
-
+gem 'popper_js', '~> 1.11', '>= 1.11.1'
 # dependencies
 group :dependencies do
   gem 'mysql2', '< 0.4'
@@ -43,6 +43,7 @@ group :test do
 end
 
 group :development do
+  gem "byebug"
   gem "jshintrb"
   gem "therubyracer"
 end
diff --git a/Gemfile.lock b/Gemfile.lock
index ca1e2ab2b..6dcf3f726 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -101,6 +101,7 @@ GEM
       rack
       rake (>= 0.8.1)
     polyglot (0.3.5)
+    popper_js (1.14.5)
     power_assert (1.1.4)
     rack (1.4.7)
     rack-cache (1.8.0)
@@ -197,6 +198,7 @@ DEPENDENCIES
   open_id_authentication
   paperclip (~> 4.3.7)
   passenger
+  popper_js (~> 1.11, >= 1.11.1)
   rails (~> 3.2)
   rake (~> 12.3.2)
   rdiscount (= 2.2.0.1)
diff --git a/app/assets/bower.json b/app/assets/bower.json
index a97e5995c..605644e21 100644
--- a/app/assets/bower.json
+++ b/app/assets/bower.json
@@ -10,7 +10,7 @@
 		"leaflet-illustrate": "manleyjster/Leaflet.Illustrate#master",
 		"leaflet-image-distort": "manleyjster/ImageDistortLeaflet",
 
-		"bootstrap": "http://github.com/twbs/bootstrap/archive/v3.2.0.tar.gz",
+		"bootstrap": "https://github.com/twbs/bootstrap/archive/v4.3.1.zip",
 
 		"blueimp-file-upload": "9.7.0",
 		"blueimp-tmpl": "2.5.4",
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 068faeff6..2382cda73 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -11,15 +11,17 @@
 // GO AFTER THE REQUIRES BELOW.
 //
 
+//= require popper
 //= require jquery/dist/jquery.js
 //= require jquery-ujs/src/rails.js 
-
 //= require bootstrap/dist/js/bootstrap.js
 
 //= require leaflet/dist/leaflet
 //= require leaflet-providers/leaflet-providers.js
 //= require leaflet-toolbar/dist/leaflet.toolbar.js
 //= require leaflet-distortableimage/dist/leaflet.distortableimage.js
+//= require leaflet-easybutton/src/easy-button.js
+//= require leaflet-google/index.js
 //= require sparklines/source/sparkline.js
 //= require annotations-legacy.js
 //= require glfx-js/dist/glfx.js
diff --git a/app/assets/javascripts/maps.js b/app/assets/javascripts/maps.js
index 40f6aac8f..295149c75 100644
--- a/app/assets/javascripts/maps.js
+++ b/app/assets/javascripts/maps.js
@@ -1,7 +1,9 @@
+//= require popper
 //= require jquery-ui/jquery-ui.min.js
 //= require knitter
 //= require exif-js/exif.js
 //= require mapknitter
+//= require seiyria-bootstrap-slider/dist/bootstrap-slider.min.js
 
 /* Move navbar links into dropdown if nav is inside the sidebar. */
 jQuery(document).ready(function($) {
diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss
index 49e9631a6..3eb380601 100644
--- a/app/assets/stylesheets/header.css.scss
+++ b/app/assets/stylesheets/header.css.scss
@@ -1,50 +1,23 @@
 body {
-  padding-top: 60px;
+  padding-top: 70px;
 }
 
-/* override Bootstrap 3 navbar collapse for medium screen sizes */
-@media (max-width: 1200px) {
-  .navbar-header {
-    float: none;
-  }
-
-  .navbar-left,.navbar-right {
-    float: none !important;
-  }
-
-  .navbar-toggle {
-    display: block;
-  }
-
-  .navbar-collapse {
-    border-top: 1px solid transparent;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
-  }
-
-  .navbar-fixed-top {
-    top: 0;
-    border-width: 0 0 1px;
-  }
-
-  .navbar-collapse.collapse {
-    display: none !important;
-  }
-
-  .navbar-nav {
-    float: none !important;
-    margin-top: 7.5px;
-  }
+.login-links {
+  color: rgba(0,0,0,.7);
+  text-decoration: none;
+}
 
-  .navbar-nav > li {
-    float: none;
-  }
+.login-links:visited {
+  color: rgba(0,0,0,.7);
+  text-decoration: none;
+}
 
-  .navbar-nav > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
+.login-links:hover {
+  color: rgba(0,0,0,.7);
+  text-decoration: underline;
+}
 
-  .collapse.in{
-    display:block !important;
-  }
-}
\ No newline at end of file
+.login-links:active {
+  color: rgba(0,0,0,.7);
+  text-decoration: underline;
+}
diff --git a/app/assets/stylesheets/maps.css.scss b/app/assets/stylesheets/maps.css.scss
index aa75a2cd5..83bbb4202 100644
--- a/app/assets/stylesheets/maps.css.scss
+++ b/app/assets/stylesheets/maps.css.scss
@@ -31,7 +31,7 @@ html, body {
 }
 
 .map-list .map img {
-  max-height:300px;
+  max-height: 300px;
 }
 
 .map-list .map h3 {
@@ -290,4 +290,4 @@ table .btn {
 }
 .fa-red {
   color:red;
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss
index 437b36704..6a861bb8d 100644
--- a/app/assets/stylesheets/style.css.scss
+++ b/app/assets/stylesheets/style.css.scss
@@ -25,6 +25,11 @@ It was originally created by Caroline Hadilaksono: http://www.hadilaksono.com
     font-style: normal;
 }
 
+.login-form {
+  width: 200px;
+  padding-left: 20px;
+}
+
 /* Application-wide styles */
 h1, h2, h3, h4 {
   font-family: 'Junction Light', lucida grande,lucida sans console,sans-serif;
@@ -93,15 +98,6 @@ label small {
   display: none;
 }
 
-.login-form {
-  width: 200px;
-  padding: 10px;
-  label {
-    margin-top: 5px;
-    font-weight: normal;
-  }
-}
-
 .alert-error {
   color: #a94442;
   background-color: #f2dede;
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index 98841b78a..0b1998e31 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -64,7 +64,7 @@ def successful_login(back_to, id)
   def logout
     session[:user_id] = nil 
     flash[:success] = "You have successfully logged out."
-    redirect_to '/'
+    redirect_to '/' + '?_=' + Time.now.to_i.to_s
   end
 
   protected
diff --git a/app/views/images/_new.html.erb b/app/views/images/_new.html.erb
index fa6a67c57..a9410fa93 100644
--- a/app/views/images/_new.html.erb
+++ b/app/views/images/_new.html.erb
@@ -2,11 +2,11 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
+        <h4 class="modal-title">Upload Images</h4>
+        <label for="warpable">Drag images or click to choose a file from your computer (10mb max):</label>
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
           &times;
         </button>
-        <h4 class="modal-title">Upload Images</h4>
-        <label for="warpable">Drag images or click to choose a file from your computer (10mb max):</label>
       </div>
       <div class="modal-body">
         <div>
@@ -108,13 +108,13 @@
         </div>
       </div>
       <div class="modal-footer">
-        <center>
         <button class="btn btn-primary" type="button" class="close" data-dismiss="modal" aria-hidden="true">
-          Continue
-        </button> to place the images on the map
-        </center>
+          Continue to place the images on the map
+        </button>
         <hr />
-        Where can you get images to upload?<br />Take them from an airplane window, or read about <a href="http://publiclab.org/wiki/balloon-mapping">Grassroots Mapping with Balloons and Kites</a>.
+        <p>
+          Where can you get images to upload?<br />Take them from an airplane window, or read about <a href="http://publiclab.org/wiki/Balloonslloons-mapping">Grassroots Mapping with Balloons and Kites</a>.
+        </p>
       </div>
     </div>
   </div>
diff --git a/app/views/layouts/_alerts.html.erb b/app/views/layouts/_alerts.html.erb
new file mode 100644
index 000000000..0425944c0
--- /dev/null
+++ b/app/views/layouts/_alerts.html.erb
@@ -0,0 +1,15 @@
+<div class="container-fluid" id="alerts">
+  <% flash.each do |key, value| %> 
+    <% if key == :notice %>
+      <div class="alert alert-success">
+        <button type="button" class="close" data-dismiss="alert">
+          <i class="fa fa-close"></i></button><%= value %>
+      </div>
+    <% else %>
+      <div class="alert alert-<%= key %>">
+        <button type="button" class="close" data-dismiss="alert">
+          <i class="fa fa-close"></i></button><%= value %>
+      </div>
+    <% end %>
+  <% end %>
+</div>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index a33847a41..fdd1e52ad 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,33 +1,36 @@
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="/">MapKnitter</a>
-    </div>
+<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand" href="/">MapKnitter</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-navbar-collapse" aria-controls="header-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-    <div class="collapse navbar-collapse" id="navbar-collapse">
-      <form action="/search" method='get' class="navbar-form navbar-left" id="nav_search_form">
+  <div class="collapse navbar-collapse" id="header-navbar-collapse">
+    <ul class="navbar-nav">
+      <form action="/search" method='get' class="navbar-form navbar-left">
         <div class="input-group">
-          <input class="form-control mr-sm-2" style="min-width: 280px;" type="text" id="search-input" name="q" value='<%= params[:id] if params[:action] == "search" %>' placeholder="Search maps"/>
-          <span class="input-group-btn">
-            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
+          <input class="form-control" id="search-input" style="min-width: 280px;" type="text" name='q' placeholder="Search maps" value='<%= params[:id] if params[:action] == "search" %>'>
+          <span class="input-group-append">
+            <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search"></i></button>
           </span>
         </div>
       </form>
-      <ul class="nav navbar-nav">
-        <li><a href="//publiclab.org/wiki/mapknitter" target="_blank">Getting Started</a></li>
-        <li><a href="//publiclab.org/wiki/balloon-mapping" target="_blank">Balloon Mapping</a></li>
-        <li><a href="//store.publiclab.org/products/balloon-mapping-kit" target="_blank">Aerial Mapping Kits</a></li>
-        <li><a href="//publiclab.org/lists" target="_blank">Mailing Lists</a></li>
-      </ul>
-      <ul class="nav navbar-nav navbar-right">
-        <%= render :partial => "layouts/login" %>
-      </ul>
-    </div>
+    </ul>
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="//publiclab.org/wiki/mapknitter" target="_blank">Getting Started</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="//publiclab.org/wiki/balloon-mapping" target="_blank">Baloon Mapping</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="//store.publiclab.org/products/balloon-mapping-kit" target="_blank">Aerial Mapping Kits</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="//publiclab.org/lists" target="_blank">Mailing Lists</a>
+      </li>
+    </ul>
+    <ul class="navbar-nav">
+      <%= render :partial => "layouts/login" %>
+    </ul>
   </div>
 </nav>
\ No newline at end of file
diff --git a/app/views/layouts/_login.html.erb b/app/views/layouts/_login.html.erb
index 53f0de5d3..989d0dffb 100644
--- a/app/views/layouts/_login.html.erb
+++ b/app/views/layouts/_login.html.erb
@@ -1,21 +1,21 @@
 <% if logged_in? %>
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="logout-menu"><%= current_user.login %></a>
-    <ul class="dropdown-menu" role="menu" aria-labelled-by="logout-menu">
-      <div class="dropdown-header">
-        <% if current_user.role == 'admin'%>
-          - logged as Admin %>
-        <% end %>
-      </div>
-      <li><a href="//publiclab.org/profile/<%= current_user.login %>">Profile</a></li>
-      <li><a href="/logout">Log out</a></li>
-    </ul>
+  <li class="nav-item dropdown">
+    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="logout-menu" aria-haspopup="true" aria-expanded="false">
+      <i class="fa fa-user"></i> <%= current_user.login %>
+    </a>
+    <div class="dropdown-menu login-form" aria-labelled-by="logout-menu">
+      <a href="//publiclab.org/profile/<%= current_user.login %>" class="dropdown-item">Profile</a>
+      <a href="/logout" class="dropdown-item">Log out</a>
+      <% if current_user.role == 'admin' %>
+        <a href="#">Role: <b>Admin</b></a>
+      <% end %>
+    </div>
   </li>
 <% else %>
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="login-menu">Log In</a>
-    <div class="dropdown-menu login-form" role="menu" aria-labelled-by="login-menu">
+  <li class="nav-item dropdown">
+    <a href="#" class="nav-link dropdown login-form" data-toggle="dropdown" id="login-menu" aria-haspopup="true" aria-expanded="false">Log In</a>
+    <div class="dropdown-menu" aria-labelled-by="login-menu">
       <%= render :partial => "layouts/login_form" %>
     </div>
-  </li>                
-<% end %>
+  </li>
+<% end %>
\ No newline at end of file
diff --git a/app/views/layouts/_login_form.html.erb b/app/views/layouts/_login_form.html.erb
index fcfeda64c..1e4d739ec 100644
--- a/app/views/layouts/_login_form.html.erb
+++ b/app/views/layouts/_login_form.html.erb
@@ -10,14 +10,12 @@
     </label>
   </div>
    <div class="form-group">
-    <%= text_field_tag 'open_id', @login, { :placeholder => "Username (not email)", :class => "form-control"} %>
-    <div class="checkbox">
-      <label for="remember_me">
-        <%= check_box_tag 'remember_me', '1', @remember_me %> Remember me
-      </label>
-    </div>
+    <%= text_field_tag 'open_id', @login, { :placeholder => "Username (not email)", :tabindex => 1, :class => 'form-control', :id => 'username-login' } %>
   </div>
-  <div class="form-group">
-    <%= submit_tag 'Log in', {:class => "btn btn-primary btn-large"} %>
+  <div class="form-check">
+    <label>
+      <%= check_box_tag 'remember_me', '1', @remember_me, { :class => "form-check-input" } %> Remember me
+    </label>
   </div>
+  <%= submit_tag 'Log in', {:class => "btn btn-primary btn-large"} %>
 </form>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6ded824c7..8ea32cd5f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -17,15 +17,8 @@
   </head>
   <body>
     <%= render 'layouts/header' %>
-
-    <div class="container-fluid" id="alerts">
-      <% if flash[:notice] %><div class="alert alert-success"><button type="button" class="close" data-dismiss="alert"><i class="fa fa-close"></i></button><%=raw flash[:notice] %></div><% end %>
-      <% if flash[:error] %><div class="alert alert-error"><button type="button" class="close" data-dismiss="alert"><i class="fa fa-close"></i></button><%=raw flash[:error] %></div><% end %>
-      <% if flash[:warning] %><div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert"><i class="fa fa-close"></i></button><%=raw flash[:warning] %></div><% end %>
-    </div>
-
+    <%= render 'layouts/alerts' %>
     <%= yield; %>
-
     <%= render 'layouts/footer' %>
 
     <script>
diff --git a/app/views/layouts/knitter2.html.erb b/app/views/layouts/knitter2.html.erb
index 26b435b81..67cbcd3bc 100644
--- a/app/views/layouts/knitter2.html.erb
+++ b/app/views/layouts/knitter2.html.erb
@@ -30,8 +30,8 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h3 class="modal-title">Looks like this is a new map</h3>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
           <p>
@@ -76,80 +76,116 @@
             <!-- Toolbar for uploading and viewing images and exporting the map. -->
             <div class="btn-group btn-group-justified sidebar-buttons">
               <!-- Upload images -->
-              <div class="btn-group">
-                <button class="btn btn-default" title="Upload images" type"button" data-toggle="modal" data-target="#uploadModal" onClick="$('#map-images-tab').tab('show')">
+                <button class="btn btn-outline-secondary" title="Upload images" type="button" data-toggle="modal" data-target="#uploadModal" onClick="$('#map-images-tab').tab('show')">
                   <span class="fa fa-upload"></span> 
                   <span class="hidden-xs">Upload</span>
                 </button>
-              </div>
 
               <!-- Write a research note on Public Lab -->
-              <div class="btn-group">
-                <a target="_blank" class="btn btn-default" title="Post a research note on Public Lab" href="//publiclab.org/post?title=MapKnitter map of <%= @map.name %>&tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,mapknitter&body=%3Ciframe%20src=%22https://mapknitter.org/embed/<%= @map.slug %>%22%20style=%22border:none%22%20width=%22100%25%22%20height=%22400px%22%3E%3C/iframe%3E%3Cbr /%3E%3Cbr /%3E<%= @map.description %>%3Cbr /%3Ehttps://mapknitter.org/embed/<%= @map.slug %>">
+                <a target="_blank" class="btn btn-outline-secondary" title="Post a research note on Public Lab" href="//publiclab.org/post?title=MapKnitter map of <%= @map.name %>&tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,mapknitter&body=%3Ciframe%20src=%22https://mapknitter.org/embed/<%= @map.slug %>%22%20style=%22border:none%22%20width=%22100%25%22%20height=%22400px%22%3E%3C/iframe%3E%3Cbr /%3E%3Cbr /%3E<%= @map.description %>%3Cbr /%3Ehttps://mapknitter.org/embed/<%= @map.slug %>">
                   <span class="fa fa-file"></span> 
                   <span class="hidden-xs">Post</span>
                 </a>
-              </div>
 
-              <!-- Export map -->
-              <div class="dropdown btn-group">
-                <button class="btn btn-default dropdown-toggle" title="Export map" type="button"  data-toggle="dropdown">
-                  <span class="fa fa-download"></span> 
-                  <span class="hidden-xs">Download</span>
-                  <span class="caret"></span>              
-                </button>
-                <ul class="dropdown-menu dropdown-menu-right map-exports" role="menu">
-                  <%= render :partial => 'maps/exports' %>
-                </ul>
-              </div>
+                <div class="btn-group" role="group">
+                  <button id="btnGroupDrop1" type="button" title="Export map" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="fa fa-download"></span>
+                    Download
+                  </button>
+                  <div class="dropdown-menu map-exports" aria-labelledby="btnGroupDrop1" role="menu">
+                    <a class="dropdown-item" href="#"><%= render :partial => 'maps/exports' %></a>
+                  </div>
+                </div>
             </div>
 
             <div class="sidebar-tabs">
-
-              <!-- Navigation tabs -->
               <ul class="nav nav-tabs" role="tablist">
-                <li class="active"><a href="#map-details-container" role="tab" data-toggle="tab">About</a></li>
-    <li><a id="map-images-tab" href="#map-images-container" role="tab" data-toggle="tab">
-                  <span class="hidden-xs">Images</span>
-                  <span class="visible-xs"><i class="fa fa-image"></i></span>
-                </a></li>
-                <li><a href="#map-editing-container" role="tab" data-toggle="tab">
-                  <span class="hidden-xs">Annotate</span>
-                  <span class="visible-xs"><i class="fa fa-map-marker"></i></span>
-                </a></li>
-                <li><a href="#map-exports-container" role="tab" data-toggle="tab">Export</a></li>
-                <li class="hidden-xs"><a class="chat-btn" href="#chat" role="tab" data-toggle="tab">Chat</a></li>
+                <li class="nav-item">
+                  <a class="nav-link active" href="#map-details-container" role="tab" data-toggle="tab" aria-selected="true">About</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#map-images-container" role="tab" data-toggle="tab">Images</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#map-editing-container" role="tab" data-toggle="tab">Annotate</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#map-exports-container" role="tab" data-toggle="tab">Export</a>
+                </li>
+                <li class="nav-item d-none d-sm-block">
+                  <a class="nav-link" href="#chat" role="tab" data-toggle="tab">Chat</a>
+                </li>
               </ul>
 
-              <!-- Tabbed panes -->
-              <div class="tab-content sidebar-content">
-                <div class="tab-pane active" id="map-details-container">
-
-                  <div class="visible-xs">
+              <!-- Tab panes -->
+              <div class="tab-content">
+                <div role="tabpanel" class="tab-pane active" id="map-details-container">
+                   <div class="d-block d-sm-none">
                     <p style="text-align:center;">
                      <a class="btn btn-primary btn-lg sidebar-toggle">View map <i class="fa fa-chevron-circle-right"></i></a>
                     </p>
                     <hr />
                   </div>
-
-                  <%= yield :details %>
+                  <div>
+                    <%=raw markdown_to_html(@map.description) unless @map.description.nil? %>
+                  </div>
+                  <p>
+                    <span class="map-detail-label">Location</span>
+                    <a href="https://www.openstreetmap.org/#map=<%= @map.zoom %>/<%= @map.lat %>/<%= @map.lon %>"><%= @map.location %></a>
+                  </p>
+                  <table>
+                    <tr><td><span class="map-detail-label">Latitude </span><%= @map.lat %></td><td><span class="map-detail-label">Longitude </span><%= @map.lon %></td></tr>
+                  </table>
+
+                  <p>
+                    <span class="map-detail-label">License (<a target="_blank" href="http://publiclab.org/licenses">Learn more</a>):</span>
+                    <a href="/maps/license/<%= @map.license %>"><%= @map.license %></a> 
+                  </p>
+
+                  <hr />
+                  <p>
+                    <% if logged_in? %>
+                      <button type="button" class="btn btn-outline-info btn-sm" onClick="$('#map-edit-container').toggle()">Edit details</button>
+                      <%= link_to 'Delete map', map_path(@map), method: :delete, class: "btn btn-outline-info btn-sm", data: { confirm: 'Are you sure? This cannot be undone.' } %>
+                    <% end %>
+                    <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()">Embed code</button>
+                    <!-- this button does not lead to anywhere -->
+<!--                     <button type="button" class="btn btn-outline-info btn-sm" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])">NDVI (beta)</button> -->
+                    <button type="button" class="btn btn-outline-info btn-sm" rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))">Add ImageSequencer code</button> 
+                    <div class="share-link" style="display:none;">
+                      <%= render :partial => 'maps/share' %>
+                    </div>
+                    <a href="https://publiclab.org/image-sequencer#NDVI">Learn more about ImageSequencer code</a>
+                  </p>
+
+                  <div style="display:none;" id="map-edit-container">
+                    <%= render :partial => 'maps/edit' %>
+                  </div>
+                  <div class="tags">
+                    <%= render :partial => "tags/index" %>
+                  </div>
+                  <hr />
+                  <div class="comments">
+                    <%= render :partial => "comments/index" %>
+                    <hr />
+                    <%= render :partial => "comments/new" %>
+                  </div>
                 </div>
-                <div class="tab-pane" id="map-images-container">
+                <div role="tabpanel" class="tab-pane fade" id="map-images-container">
                   <%= yield :images unless @map.warpables.empty? %>
                 </div>
-                <div class="tab-pane" id="map-editing-container">
+                <div role="tabpanel" class="tab-pane fade" id="map-editing-container">
                   <%= render :partial => "sidebar_annotations" %>
                 </div>
-                <div class="tab-pane" id="map-exports-container">
+                <div role="tabpanel" class="tab-pane fade" id="map-exports-container">
                   <%= render :partial => "sidebar_exports" %>
                 </div>
-                <div class="tab-pane" id="chat">
-                    <a style="margin-right:4px;" class="pull-right btn btn-small" href="https://webchat.oftc.net/?channels=publiclab<% if current_user %>&nick=<%= current_user.login %><% end %>" target="_blank">pop out</a>
-                    <p class="popover-title">Public Lab chatroom</p>
-                    <script>login = '<%= current_user.login if logged_in? %>'</script>
+                <div role="tabpanel" class="tab-pane fade" id="chat">
+                  <a style="margin-right:4px;" class="pull-right nav-link" href="https://webchat.oftc.net/?channels=publiclab<% if current_user %>&nick=<%= current_user.login %><% end %>" target="_blank">pop out</a>
+                  <p class="popover-title">Public Lab chatroom</p>
+                  <script>login = '<%= current_user.login if logged_in? %>'</script>
                 </div>
-              </div>  
-
+              </div>
             </div><!-- .sidebar-tabs -->
           </div><!-- .sidebar-content -->
         <% end %>
@@ -159,7 +195,7 @@
 
   <%= render :partial => "/images/new" unless params[:action] == 'new' %>
   <% end %>
-
+  
   <script>
     var map
     (function(){
diff --git a/app/views/maps/_edit.html.erb b/app/views/maps/_edit.html.erb
index b0bf816cb..93ff3bc97 100644
--- a/app/views/maps/_edit.html.erb
+++ b/app/views/maps/_edit.html.erb
@@ -8,7 +8,6 @@
   <div class="form-group">
     <%= f.label :location, "Location <small>begin typing to search by name</small>".html_safe %>
     <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-search"></i></div>
       <%= f.text_field :location, :class => "form-control" %>
     </div>
   </div>
diff --git a/app/views/maps/_exports.html.erb b/app/views/maps/_exports.html.erb
index 90c76ecb6..f231aa5f1 100644
--- a/app/views/maps/_exports.html.erb
+++ b/app/views/maps/_exports.html.erb
@@ -24,4 +24,6 @@
   <li><a href="http://www.zazzle.com/api/create/at-238652512768069879?rf=238652512768069879&ax=Linkover&pd=228632289886847720&fwd=ProductPage&ed=true&tc=&ic=&title=<%= @map.name %>&map=https://mapknitter.org/export/jpg/<%= @map.slug %>.jpg"><i class="icon-white icon-print"></i> Order a print</a></li>
 <% end %>
 <% end %>
-<li><a href="//publiclab.org/wiki/mapknitter-exporting/"><i class="fa fa-question-circle"></i> MapKnitter exporting help</a></li>
+<li>
+  <button type="button" href="//publiclab.org/wiki/mapknitter-exporting/" class="btn btn-link">MapKnitter exporting help</button>
+</li>
diff --git a/app/views/maps/_list.html.erb b/app/views/maps/_list.html.erb
index d11f642ad..17042af73 100644
--- a/app/views/maps/_list.html.erb
+++ b/app/views/maps/_list.html.erb
@@ -26,4 +26,4 @@
       <%= map.warpables.length %> images | <%= map.comments.length %> comments
     </small>
   </p>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/maps/_search.html.erb b/app/views/maps/_search.html.erb
index 4a1436fc8..46559b499 100644
--- a/app/views/maps/_search.html.erb
+++ b/app/views/maps/_search.html.erb
@@ -1,7 +1,9 @@
-<form action="/search" method='get' class="form-inline">
-  <div><label for="search-input">Search</label></div>
-  <div class="form-group">
-    <input placeholder="name or description" id="search-input" class='form-control' type='text' name='q' value='<%= params[:id] if params[:action] == "search" %>'/>
+<h5>Looking for something on MapKnitter?</h5>
+<form action="/search" method='get' class="navbar-form navbar-left">
+  <div class="input-group">
+    <input class="form-control" id="search-input" style="min-width: 280px;" type="text" name='q' placeholder="Search maps" value='<%= params[:id] if params[:action] == "search" %>'>
+    <span class="input-group-append">
+      <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search"></i></button>
+    </span>
   </div>
-  <button class="btn btn-default" type='submit'><i class="fa fa-search"></i></button>
-</form>
+</form>
\ No newline at end of file
diff --git a/app/views/maps/_sidebar_annotations.html.erb b/app/views/maps/_sidebar_annotations.html.erb
index a3b5fca69..d18fd9e24 100644
--- a/app/views/maps/_sidebar_annotations.html.erb
+++ b/app/views/maps/_sidebar_annotations.html.erb
@@ -4,8 +4,8 @@ A new annotation system is under development; for now, <a href="/embed/<%= @map.
 
 <p>To try the new annotations system, click here:</p>
 
-<p><a href="/maps/<%= @map.slug %>/annotate" class="btn btn-lg btn-default">Beta annotation tool</a></p>
+<p><button type="button" class="btn btn-outline-info" href="/maps/<%= @map.slug %>/annotate">Beta annotation tool</button></p>
 
 <p>To overlay a KML (temporarily only, for now!), click here:</p>
 
-<p><a onClick="mapKnitter.addKml()" class="btn btn-default">KML</a></p>
+<p><button type="button" class="btn btn-outline-info" onClick="mapKnitter.addKml()">KML</button></p>
diff --git a/app/views/maps/_sidebar_exports.html.erb b/app/views/maps/_sidebar_exports.html.erb
index b5d175eee..acade09b2 100644
--- a/app/views/maps/_sidebar_exports.html.erb
+++ b/app/views/maps/_sidebar_exports.html.erb
@@ -8,7 +8,7 @@
   <img style="width:100%;" src="/images/download-btn.png" />
 </p>
 <p>
-  <a onClick="$('#exporting-info').toggle();">Learn more about exporting &raquo;</a>
+  <a href="#" onClick="$('#exporting-info').toggle();">Learn more about exporting &raquo;</a>
 </p>
 <div style="display:none;" id="exporting-info"> 
   <p>From this panel you can export this map in a variety of formats. If you've changed the map at all since last exporting, you can re-run the export, but be aware that this will <b>delete and replace previously exported files</b>, so download them first if you want them. All formats are generated sequentially, so if you're waiting for a JPG you will have to let all the other formats complete first.</p>
@@ -16,13 +16,17 @@
   <p><a href="//publiclab.org/wiki/mapknitter-exporting">Learn even more &raquo;</a></p>
 </div>
 
-<ul class="nav nav-tabs" role="tablist">
-  <li class="active"><a href="#map-export-subtab" role="tab" data-toggle="tab">Export</a></li>
-  <li><a href="#map-export-options-subtab" role="tab" data-toggle="tab"><i class="fa fa-cog"></i> Advanced options</a></li>
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" href="#map-export-subtab" role="tab" data-toggle="tab">Export</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#map-export-options-subtab" role="tab" data-toggle="tab">Advanced option</a>
+  </li>
 </ul>
 
 <div class="tab-content">
-  <div class="tab-pane active" id="map-export-subtab">
+  <div role="tabpanel" class="tab-pane active" id="map-export-subtab">
   
     <div class="progress"<% unless @map.exporting? %> style="display:none;"<% end %>>
       <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
diff --git a/app/views/maps/index.html.erb b/app/views/maps/index.html.erb
index b7ed1d10c..d684d8237 100644
--- a/app/views/maps/index.html.erb
+++ b/app/views/maps/index.html.erb
@@ -10,18 +10,20 @@
 <%= javascript_include_tag('/lib/leaflet-spin/example/leaflet.spin.min.js') %>
 
 <div class="container-fluid">
-  <div id="mapknitter-unique" style="height: 300px ; width: 100% ;  margin-bottom: 1%"></div> 
+  <div id="mapknitter-unique" style="height: 300px ; width: 100% ;  margin-bottom: 1%; z-index: 5;"></div> 
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-3">
       <% if logged_in? %>
-      <a class="btn btn-lg btn-primary create-map" href="<%= new_map_url %>">
+      <a class="btn btn-lg btn-outline-primary btn-block" href="<%= new_map_url %>">
         <i class="fa fa-plus-circle"></i> Create a map
       </a>
       <% else %>
-      <p><a class="btn btn-lg btn-default disabled create-map" href="#">
+      <p><a class="btn btn-lg btn-outline-secondary btn-block disabled" href="#">
         <i class="fa fa-plus-circle"></i> Create a map
       </a></p>
-      <p><a href="#" onClick="$('.mini-login').toggle()">Log in</a> to create a map, or if you have privacy concerns, you may <a onClick="$('.hidden-map-btn').show()">create a map anonymously.</a></p>
+      <p>
+        <a href="#" onClick="$('.mini-login').toggle()">Log in</a> to create a map, or if you have privacy concerns, you may <a onClick="$('.hidden-map-btn').show()" href="#">create a map anonymously.</a>
+      </p>
       <hr />
 
       <div class="well mini-login" style="display:none;">
@@ -56,7 +58,6 @@
     </div><!-- .col-md-3 -->
 
     <div class="maps-list col-md-9">
-      <br>
       <div class="hero">
         <h1 style="margin-top:4px;">Make maps from aerial photos</h1>
         <p>
@@ -72,7 +73,6 @@
       </div>
 
       <hr />
-
       <h2><%= @title ||= "Featured" %> <small> 
         | <a href="/authors">Authors</a>
         <% if params[:controller] == "tags" %>
@@ -82,7 +82,7 @@
 
       <div class="row map-list">
         <% @maps.each_with_index do |map,i| %>
-        <%= render :partial => 'maps/list', :locals => {:map => map} %>
+          <%= render :partial => 'maps/list', :locals => {:map => map} %>
         <% end %>
       </div>
       <br style="clear:both;" />
diff --git a/app/views/maps/new.html.erb b/app/views/maps/new.html.erb
index f512995e3..1b0b5de6a 100644
--- a/app/views/maps/new.html.erb
+++ b/app/views/maps/new.html.erb
@@ -1,4 +1,4 @@
-<% content_for :title do %>
+  <% content_for :title do %>
   <div class="sidebar-title new-map">
     <h4>Create a new map</h4>
     <p>Pan and zoom to locate your site, then give your map a title, location, and description.</p>
@@ -17,8 +17,8 @@
 
     <div class="form-group">
       <%= f.label :slug, "URL" %>
-      <div class="input-group">
-        <div class="input-group-addon">mapknitter.org/maps/</div>
+      <div class="input-group-prepend">
+        <button class="btn btn-outline-secondary" type="button">mapknitter.org/maps/</button>
         <%= f.text_field :slug, :class => "form-control" %>
       </div>
     </div>
@@ -30,10 +30,9 @@
     </small></p>
     <hr/>
 
-    <div class="form-group">
+     <div class="form-group">
       <%= f.label :location, "Location <small>begin typing to search by name</small>".html_safe %>
       <div class="input-group">
-        <div class="input-group-addon"><i class="fa fa-search"></i></div>
         <%= f.text_field :location, :class => "form-control", :tabIndex => 2 %>
       </div>
     </div>
@@ -51,7 +50,7 @@
       </tbody>
     </table>
 
-    <p class="visible-xs">
+    <p class="d-block d-sm-none">
       <a class="btn btn-default sidebar-toggle"><i class="fa fa-map-marker"></i> Choose location via map</a>
     </p>
 
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 78cf4a2ec..7b165a969 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -1,14 +1,4 @@
 <% content_for :title do %>
-  <div class="pull-right dropdown">
-    <a href="#" data-toggle="dropdown">
-      <span class="fa fa-cog"></span>
-    </a>
-    <ul class="dropdown-menu dropdown-menu-right" role="menu">
-      <% if logged_in? && current_user.can_delete?(@map) %>
-        <li><%= link_to 'Delete', map_path(@map), method: :delete, data: { confirm: 'Are you sure? This cannot be undone.' } %></li>
-      <% end %>
-    </ul>
-  </div>
   <div class="sidebar-title">
     <h3><%= @map.name %></h3>
   </div>
@@ -44,15 +34,15 @@
   <hr />
   <p>
     <% if logged_in? %>
-    <a onClick="$('#map-edit-container').toggle()" class="btn btn btn-default">Edit details</a> 
+      <button type="button" class="btn btn-outline-info btn-sm" onClick="$('#map-edit-container').toggle()">Edit details</button>
     <% end %>
-    <a onClick="$('.share-link').toggle()" class="btn btn btn-default"><i class="fa fa-code"></i> Embed code</a> 
+    <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()">Embed code</button>
+    <button type="button" class="btn btn-outline-info btn-sm" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])">NDVI (beta)</button>
+    <button type="button" class="btn btn-outline-info btn-sm" rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))">Add ImageSequencer code</button> 
     <div class="share-link" style="display:none;">
       <%= render :partial => 'maps/share' %>
     </div>
-    <a rel="tooltip" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])" class="btn btn btn-default"><i class="fa fa-adjust"></i> NDVI (beta)</a> 
-    <a rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))" class="btn btn btn-default"><i class="fa fa-code"></i></a> 
-    <a href="https://publiclab.org/image-sequencer#NDVI">Learn more</a>
+    <a href="https://publiclab.org/image-sequencer#NDVI">Learn more about ImageSequencer code</a>
   </p>
 
   <div style="display:none;" id="map-edit-container">
diff --git a/app/views/tags/_index.html.erb b/app/views/tags/_index.html.erb
index 582bdc750..e4be70be0 100644
--- a/app/views/tags/_index.html.erb
+++ b/app/views/tags/_index.html.erb
@@ -1,29 +1,20 @@
-<%= form_for [@map, Tag.new], :html => { :method => "post" } do |m| %>
-  <div class="form-group">
-    <span class="map-detail-label"></span>
-    <p><span id="tags">
+<div class="form-group">
+  <%= form_for [@map, Tag.new], :html => { :method => "post" } do |m| %>
+    <p>
       <% @map.tags.each do |tag| %>
-        <span id="tag_<%= tag.id %>" class="label label-default">
-          <a href="/tags/<%= tag.name %>"><%= tag.name %></a>
-          <% link_to([@map, tag], :method => "delete") do %>
-            <pan>&times;</span>
+        <span id="tag_<%= tag.id %>" class="badge badge-light">
+          <a href="/tags/<%= tag.name %>" id="tag_<%= tag.id %>"><%= tag.name %></a>
+          <%= link_to([@map, tag], :method => "delete") do %>
+            <span>&times;</span>
           <% end %>
         </span>
       <% end %>
-    </span></p>
-
-    <label for="tags" class="sr-only">Enter tags</label>
+    </p>
     <div class="input-group">
-      <span class="input-group-addon">
-        <i class="fa fa-tags"></i>
-      </span>
-      <input class="form-control" type="text" placeholder="Enter tags" name="tags" id="new-tags"></input>
-    </div>  
-  </div>
-
-  <script>
-    //jQuery(document).ready(function($) {
-      //new MapKnitter.Tags({ tagInputId: 'new_tag' });
-    //});
-  </script>
-<% end %>
+      <div class="input-group-prepend">
+        <button class="btn btn-outline-secondary" type="button"><i class="fa fa-tags"></i></button>
+      </div>
+      <input type="text" class="form-control" placeholder="Enter tags" aria-label="tags" name="tags" id="new-tags">
+    </div>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/bower.json b/bower.json
index d73dcfe1c..e67426ae4 100644
--- a/bower.json
+++ b/bower.json
@@ -3,10 +3,10 @@
   "version": "2.0.2",
   "dependencies": {
     "fontawesome": "~4.2.0",
-    "bootstrap": "~3.2.0",
+    "bootstrap": "^4.3.1",
     "seiyria-bootstrap-slider": "~4.4.0",
     "jquery": "~1.11",
-    "jquery-ui": "~1.11",
+    "jquery-ui": "^1.12.1",
     "jquery-ujs": "~1.0.3",
     "ol2": "git+https://github.com/openlayers/ol2#release-2.13.1",
     "blueimp-file-upload": "blueimp/jQuery-File-Upload#~9.8.1",
@@ -35,6 +35,7 @@
   },
   "resolutions": {
     "jquery": "^2.1.3",
-    "leaflet": "^1.0.0"
+    "leaflet": "^1.0.0",
+    "bootstrap": "^4.3.1"
   }
 }