diff --git a/.buildpacks b/.buildpacks
deleted file mode 100644
index c799b60ab1..0000000000
--- a/.buildpacks
+++ /dev/null
@@ -1,2 +0,0 @@
-https://github.com/heroku/heroku-buildpack-nodejs.git
-https://github.com/heroku/heroku-buildpack-ruby.git#v142
diff --git a/.ruby-version b/.ruby-version
index fa7adc7ac7..9c25013dbb 100755
--- a/.ruby-version
+++ b/.ruby-version
@@ -1 +1 @@
-3.3.5
+3.3.6
diff --git a/.sass-lint.yml b/.sass-lint.yml
index 2a3ebf8418..b950346e17 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -27,20 +27,6 @@ rules:
     - 2
     -
       size: 2
-  property-sort-order:
-    - 1
-    -
-      order:
-        - content
-        - display
-        - position
-        - top
-        - left
-        - bottom
-        - right
-        - z-index
-        - margin
-      ignore-custom-properties: true
   variable-for-property:
     - 2
     -
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
index 0278dac0ff..5d97025f6f 100644
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -24,7 +24,7 @@ If you want to run a server on a LAN for personal use, this is the easiest and c
 
 **Affordability:** :broken_heart:
 
- 1. Deploy as you would normally [deploy to Heroku](https://devcenter.heroku.com/articles/getting-started-with-rails4#deploy-your-application-to-heroku)
+ 1. Deploy as you would normally [deploy to Heroku](https://devcenter.heroku.com/articles/getting-started-with-rails6#deploy-the-app-to-heroku) (buildpacks: _heroku/nodejs_, _heroku/ruby_)
  2. Enable Dyno metadata: `heroku labs:enable runtime-dyno-metadata --app <app name>` (we need this to know the version number of the web app).
  3. (If emails are enabled) Enable the [Heroku scheduler](https://elements.heroku.com/addons/scheduler) and configure it to run `rake api:log_digest` every 10 minutes. This is required for Device log digests via email.
 
diff --git a/Gemfile b/Gemfile
index e03f343896..de4a70b004 100755
--- a/Gemfile
+++ b/Gemfile
@@ -1,5 +1,5 @@
 source "https://rubygems.org"
-ruby "~> 3.3.5"
+ruby "~> 3.3.6"
 
 gem "rails", "~> 6"
 gem "active_model_serializers"
diff --git a/Gemfile.lock b/Gemfile.lock
index 2bfa6a17db..7c4c4b97b3 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,65 +1,65 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.7.8)
-      actionpack (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    actioncable (6.1.7.10)
+      actionpack (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.7.8)
-      actionpack (= 6.1.7.8)
-      activejob (= 6.1.7.8)
-      activerecord (= 6.1.7.8)
-      activestorage (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    actionmailbox (6.1.7.10)
+      actionpack (= 6.1.7.10)
+      activejob (= 6.1.7.10)
+      activerecord (= 6.1.7.10)
+      activestorage (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       mail (>= 2.7.1)
-    actionmailer (6.1.7.8)
-      actionpack (= 6.1.7.8)
-      actionview (= 6.1.7.8)
-      activejob (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    actionmailer (6.1.7.10)
+      actionpack (= 6.1.7.10)
+      actionview (= 6.1.7.10)
+      activejob (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.7.8)
-      actionview (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    actionpack (6.1.7.10)
+      actionview (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.7.8)
-      actionpack (= 6.1.7.8)
-      activerecord (= 6.1.7.8)
-      activestorage (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    actiontext (6.1.7.10)
+      actionpack (= 6.1.7.10)
+      activerecord (= 6.1.7.10)
+      activestorage (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       nokogiri (>= 1.8.5)
-    actionview (6.1.7.8)
-      activesupport (= 6.1.7.8)
+    actionview (6.1.7.10)
+      activesupport (= 6.1.7.10)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    active_model_serializers (0.10.14)
+    active_model_serializers (0.10.15)
       actionpack (>= 4.1)
       activemodel (>= 4.1)
       case_transform (>= 0.2)
       jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
-    activejob (6.1.7.8)
-      activesupport (= 6.1.7.8)
+    activejob (6.1.7.10)
+      activesupport (= 6.1.7.10)
       globalid (>= 0.3.6)
-    activemodel (6.1.7.8)
-      activesupport (= 6.1.7.8)
-    activerecord (6.1.7.8)
-      activemodel (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
-    activestorage (6.1.7.8)
-      actionpack (= 6.1.7.8)
-      activejob (= 6.1.7.8)
-      activerecord (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    activemodel (6.1.7.10)
+      activesupport (= 6.1.7.10)
+    activerecord (6.1.7.10)
+      activemodel (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
+    activestorage (6.1.7.10)
+      actionpack (= 6.1.7.10)
+      activejob (= 6.1.7.10)
+      activerecord (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.7.8)
+    activesupport (6.1.7.10)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -85,18 +85,18 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
-    database_cleaner (2.0.2)
+    database_cleaner (2.1.0)
       database_cleaner-active_record (>= 2, < 3)
     database_cleaner-active_record (2.2.0)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.3.4)
+    date (3.4.1)
     declarative (0.0.20)
-    delayed_job (4.1.12)
-      activesupport (>= 3.0, < 8.0)
-    delayed_job_active_record (4.1.10)
-      activerecord (>= 3.0, < 8.0)
+    delayed_job (4.1.13)
+      activesupport (>= 3.0, < 9.0)
+    delayed_job_active_record (4.1.11)
+      activerecord (>= 3.0, < 9.0)
       delayed_job (>= 3.0, < 5)
     devise (4.9.4)
       bcrypt (~> 3.0)
@@ -107,26 +107,26 @@ GEM
     diff-lcs (1.5.1)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
-    discard (1.3.0)
-      activerecord (>= 4.2, < 8)
+    discard (1.4.0)
+      activerecord (>= 4.2, < 9.0)
     docile (1.4.1)
     e2mmap (0.1.0)
     erubi (1.13.0)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.3)
-      factory_bot (~> 6.4)
+    factory_bot_rails (6.4.4)
+      factory_bot (~> 6.5)
       railties (>= 5.0.0)
-    faker (3.4.2)
+    faker (3.5.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.12.0)
-      faraday-net_http (>= 2.0, < 3.4)
+    faraday (2.12.1)
+      faraday-net_http (>= 2.0, < 3.5)
       json
       logger
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
-    faraday-net_http (3.3.0)
-      net-http
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
     google-apis-core (0.15.1)
@@ -137,17 +137,17 @@ GEM
       mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-    google-apis-iamcredentials_v1 (0.21.0)
+    google-apis-iamcredentials_v1 (0.22.0)
       google-apis-core (>= 0.15.0, < 2.a)
-    google-apis-storage_v1 (0.45.0)
+    google-apis-storage_v1 (0.48.0)
       google-apis-core (>= 0.15.0, < 2.a)
     google-cloud-core (1.7.1)
       google-cloud-env (>= 1.0, < 3.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-env (2.2.0)
+    google-cloud-env (2.2.1)
       faraday (>= 1.0, < 3.a)
     google-cloud-errors (1.4.0)
-    google-cloud-storage (1.52.0)
+    google-cloud-storage (1.53.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
       google-apis-core (~> 0.13)
@@ -156,21 +156,21 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (~> 1.9)
       mini_mime (~> 1.0)
-    googleauth (1.11.0)
+    googleauth (1.11.2)
       faraday (>= 1.0, < 3.a)
       google-cloud-env (~> 2.1)
       jwt (>= 1.4, < 3.0)
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
-    hashdiff (1.1.1)
+    hashdiff (1.1.2)
     hashie (4.1.0)
     httpclient (2.8.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
+    json (2.9.0)
     jsonapi-renderer (0.2.2)
-    jwt (2.9.1)
+    jwt (2.9.3)
       base64
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -184,13 +184,13 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
-    logger (1.6.1)
+    logger (1.6.2)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -201,14 +201,14 @@ GEM
     marcel (1.0.4)
     method_source (1.1.0)
     mini_mime (1.1.5)
-    minitest (5.25.1)
+    minitest (5.25.4)
     multi_json (1.15.0)
     mutations (0.9.1)
       activesupport
-    mutex_m (0.2.0)
-    net-http (0.4.1)
+    mutex_m (0.3.0)
+    net-http (0.6.0)
       uri
-    net-imap (0.4.16)
+    net-imap (0.5.1)
       date
       net-protocol
     net-pop (0.1.2)
@@ -217,22 +217,22 @@ GEM
       timeout
     net-smtp (0.5.0)
       net-protocol
-    nio4r (2.7.3)
-    nokogiri (1.16.7-aarch64-linux)
+    nio4r (2.7.4)
+    nokogiri (1.16.8-aarch64-linux)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.16.8-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
     os (1.1.4)
-    parser (3.3.5.0)
+    parser (3.3.6.0)
       ast (~> 2.4.1)
       racc
     passenger (6.0.23)
       rack (>= 1.6.13)
       rackup
       rake (>= 12.3.3)
-    pg (1.5.8)
-    pry (0.14.2)
+    pg (1.5.9)
+    pry (0.15.0)
       coderay (~> 1.1)
       method_source (~> 1.0)
     pry-rails (0.3.11)
@@ -245,46 +245,46 @@ GEM
       hashie (~> 4.1)
       multi_json (~> 1.15)
     racc (1.8.1)
-    rack (2.2.9)
+    rack (2.2.10)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-cors (2.0.2)
       rack (>= 2.0.0)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rackup (1.0.0)
+    rackup (1.0.1)
       rack (< 3)
       webrick
-    rails (6.1.7.8)
-      actioncable (= 6.1.7.8)
-      actionmailbox (= 6.1.7.8)
-      actionmailer (= 6.1.7.8)
-      actionpack (= 6.1.7.8)
-      actiontext (= 6.1.7.8)
-      actionview (= 6.1.7.8)
-      activejob (= 6.1.7.8)
-      activemodel (= 6.1.7.8)
-      activerecord (= 6.1.7.8)
-      activestorage (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    rails (6.1.7.10)
+      actioncable (= 6.1.7.10)
+      actionmailbox (= 6.1.7.10)
+      actionmailer (= 6.1.7.10)
+      actionpack (= 6.1.7.10)
+      actiontext (= 6.1.7.10)
+      actionview (= 6.1.7.10)
+      activejob (= 6.1.7.10)
+      activemodel (= 6.1.7.10)
+      activerecord (= 6.1.7.10)
+      activestorage (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       bundler (>= 1.15.0)
-      railties (= 6.1.7.8)
+      railties (= 6.1.7.10)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     rails_12factor (0.0.3)
       rails_serve_static_assets
       rails_stdout_logging
     rails_serve_static_assets (0.0.5)
     rails_stdout_logging (0.0.5)
-    railties (6.1.7.8)
-      actionpack (= 6.1.7.8)
-      activesupport (= 6.1.7.8)
+    railties (6.1.7.10)
+      actionpack (= 6.1.7.10)
+      activesupport (= 6.1.7.10)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
@@ -301,18 +301,18 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.3.7)
+    rexml (3.3.9)
     rollbar (3.6.0)
     rspec (3.13.0)
       rspec-core (~> 3.13.0)
       rspec-expectations (~> 3.13.0)
       rspec-mocks (~> 3.13.0)
-    rspec-core (3.13.1)
+    rspec-core (3.13.2)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.3)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.1)
+    rspec-mocks (3.13.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
     rspec-rails (6.1.5)
@@ -323,7 +323,7 @@ GEM
       rspec-expectations (~> 3.13)
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
-    rspec-support (3.13.1)
+    rspec-support (3.13.2)
     rspec_junit_formatter (0.6.0)
       rspec-core (>= 2, < 4, != 2.12.0)
     scenic (1.8.0)
@@ -331,8 +331,8 @@ GEM
       railties (>= 4.0.0)
     scout_apm (5.4.0)
       parser
-    secure_headers (6.7.0)
-    set (1.1.0)
+    secure_headers (7.0.0)
+    set (1.1.1)
     signet (0.19.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
@@ -360,28 +360,28 @@ GEM
     thor (1.3.2)
     thwait (0.2.0)
       e2mmap
-    timeout (0.4.1)
+    timeout (0.4.2)
     trailblazer-option (0.1.2)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     tzinfo-data (1.2024.2)
       tzinfo (>= 1.0.0)
     uber (0.1.0)
-    uri (0.13.1)
+    uri (1.0.2)
     valid_url (0.0.4)
       addressable
       rails
     warden (1.2.9)
       rack (>= 2.0.9)
-    webmock (3.23.1)
+    webmock (3.24.0)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
+    webrick (1.9.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    zeitwerk (2.6.18)
+    zeitwerk (2.7.1)
 
 PLATFORMS
   aarch64-linux
@@ -431,7 +431,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.3.5p100
+   ruby 3.3.6p108
 
 BUNDLED WITH
-   2.5.19
+   2.5.23
diff --git a/app/controllers/api/ai_feedbacks_controller.rb b/app/controllers/api/ai_feedbacks_controller.rb
index 071c2628aa..ab5b327553 100644
--- a/app/controllers/api/ai_feedbacks_controller.rb
+++ b/app/controllers/api/ai_feedbacks_controller.rb
@@ -1,7 +1,10 @@
 module Api
   class AiFeedbacksController < Api::AbstractController
     def create
-      render json: AiFeedback.create!(update_params)
+      render json: AiFeedback.create!(update_params.merge(
+        model: ENV["OPENAI_MODEL_LUA"],
+        temperature: ENV["OPENAI_API_TEMPERATURE"]
+      ))
     end
 
     private
diff --git a/app/controllers/api/ais_controller.rb b/app/controllers/api/ais_controller.rb
index 901094c2fb..844e597257 100644
--- a/app/controllers/api/ais_controller.rb
+++ b/app/controllers/api/ais_controller.rb
@@ -111,7 +111,7 @@ def make_request(system_prompt, user_prompt, stream)
       url = "https://api.openai.com/v1/chat/completions"
       context_key = raw_json[:context_key]
       lua_request = context_key == "lua"
-      model_lua = ENV["OPENAI_MODEL_LUA"] || "gpt-3.5-turbo-16k"
+      model_lua = ENV["OPENAI_MODEL_LUA"] || "gpt-3.5-turbo"
       model_other = ENV["OPENAI_MODEL_OTHER"] || "gpt-3.5-turbo"
       payload = {
         "model" => lua_request ? model_lua : model_other,
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 4140ba75fd..62a145ef8d 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -21,7 +21,6 @@ class DashboardController < ApplicationController
   CACHE_DIR = File.join(".cache")
 
   CSS_INPUTS = {
-    front_page: "/css/laptop_splash.scss",
     default: "/css/_index.scss",
     terminal: "/css/xterm.css",
   }.with_indifferent_access
@@ -35,7 +34,6 @@ class DashboardController < ApplicationController
     try_farmbot: "/try_farmbot/index.tsx",
     promo: "/promo/index.tsx",
     os_download: "/os_download/index.tsx",
-    featured: "/featured/index.tsx",
     terminal: "/terminal/index.tsx",
   }.with_indifferent_access
 
diff --git a/app/views/dashboard/promo.html.erb b/app/views/dashboard/promo.html.erb
index 1701cf51d0..97f76e5473 100644
--- a/app/views/dashboard/promo.html.erb
+++ b/app/views/dashboard/promo.html.erb
@@ -5,7 +5,9 @@
   }
   body {
     margin: 0;
-    background-image: url("/placeholder_farmbot.jpg");
   }
 </style>
-<h1 class="initial-loading-text">Loading...</h1>
+<div class="promo-loading-container">
+  <img src="/promo_loading_image.avif" alt="Loading 3D interactive experience..." class="promo-loading-image">
+  <h1 class="promo-loading-text">Loading interactive 3D FarmBot...</h1>
+</div>
diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb
index 17c69ca3ce..8527eba3db 100644
--- a/app/views/layouts/dashboard.html.erb
+++ b/app/views/layouts/dashboard.html.erb
@@ -13,13 +13,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
       integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
       crossorigin="anonymous">
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"
-      integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
-      crossorigin="anonymous">
     <style>
-      body { background: #ccc; }
       .initial-loading-text { position: absolute; top: 385px;
       text-align: center; width: 100%; padding-top: 10%; color: #434343; }
     </style>
diff --git a/config/application.rb b/config/application.rb
index a4638908cf..472b9206ca 100755
--- a/config/application.rb
+++ b/config/application.rb
@@ -93,7 +93,6 @@ class Application < Rails::Application
         base_uri: %w('self'),
         connect_src: connect_src,
         font_src: %w(
-          maxcdn.bootstrapcdn.com
           fonts.gstatic.com
           fonts.googleapis.com
           data:
@@ -102,7 +101,7 @@ class Application < Rails::Application
         ),
         form_action: %w('self'),
         frame_src: %w(*),       # We need "*" to support webcam users.
-        frame_ancestors: %w('self' https://farm.bot),
+        frame_ancestors: %w('self' https://farm.bot https://*.shopify.com https://*.shopifypreview.com),
         img_src: %w(* data:),   # We need "*" to support webcam users.
         manifest_src: %w('self'),
         media_src: %w(),
@@ -114,6 +113,7 @@ class Application < Rails::Application
           allow-modals
           allow-popups
           allow-downloads
+          allow-top-navigation
         ),
         plugin_types: %w(),
         script_src: [
@@ -129,7 +129,6 @@ class Application < Rails::Application
           "blob:", # 3D
         ],
         style_src: %w(
-          maxcdn.bootstrapcdn.com
           fonts.gstatic.com
           fonts.googleapis.com
           cdnjs.cloudflare.com
diff --git a/config/routes.rb b/config/routes.rb
index b623130ce8..13cc92e274 100755
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -132,7 +132,6 @@
   get "/try_farmbot" => "dashboard#try_farmbot", as: :try_farmbot_main
   get "/promo" => "dashboard#promo", as: :promo_main
   get "/os" => "dashboard#os_download", as: :os_download
-  get "/featured" => "dashboard#featured", as: :featured
   get "/password_reset/*token" => "dashboard#password_reset", as: :password_reset
   get "/tos_update" => "dashboard#tos_update", as: :tos_update
   get "/verify/:token" => "dashboard#confirmation_page", as: :confirmation_page
diff --git a/db/migrate/20241203194030_add_dark_mode_to_web_app_config.rb b/db/migrate/20241203194030_add_dark_mode_to_web_app_config.rb
new file mode 100644
index 0000000000..a47a75fed5
--- /dev/null
+++ b/db/migrate/20241203194030_add_dark_mode_to_web_app_config.rb
@@ -0,0 +1,9 @@
+class AddDarkModeToWebAppConfig < ActiveRecord::Migration[6.1]
+  def up
+    add_column :web_app_configs, :dark_mode, :boolean, default: false
+  end
+
+  def down
+    remove_column :web_app_configs, :dark_mode
+  end
+end
diff --git a/db/migrate/20241203211516_add_model_to_ai_feedbacks.rb b/db/migrate/20241203211516_add_model_to_ai_feedbacks.rb
new file mode 100644
index 0000000000..4cb3489e61
--- /dev/null
+++ b/db/migrate/20241203211516_add_model_to_ai_feedbacks.rb
@@ -0,0 +1,11 @@
+class AddModelToAiFeedbacks < ActiveRecord::Migration[6.1]
+  def up
+    add_column :ai_feedbacks, :model, :string, limit: 30
+    add_column :ai_feedbacks, :temperature, :string, limit: 5
+  end
+
+  def down
+    remove_column :ai_feedbacks, :model
+    remove_column :ai_feedbacks, :temperature
+  end
+end
diff --git a/db/structure.sql b/db/structure.sql
index 7c33c62e9d..c0f963f558 100644
--- a/db/structure.sql
+++ b/db/structure.sql
@@ -9,13 +9,6 @@ SET xmloption = content;
 SET client_min_messages = warning;
 SET row_security = off;
 
---
--- Name: public; Type: SCHEMA; Schema: -; Owner: -
---
-
--- *not* creating schema, since initdb creates it
-
-
 --
 -- Name: hstore; Type: EXTENSION; Schema: -; Owner: -
 --
@@ -159,7 +152,9 @@ CREATE TABLE public.ai_feedbacks (
     prompt character varying(500),
     reaction character varying(25),
     created_at timestamp(6) without time zone NOT NULL,
-    updated_at timestamp(6) without time zone NOT NULL
+    updated_at timestamp(6) without time zone NOT NULL,
+    model character varying(30),
+    temperature character varying(5)
 );
 
 
@@ -1540,7 +1535,7 @@ CREATE VIEW public.resource_update_steps AS
             edge_nodes.kind,
             edge_nodes.value
            FROM public.edge_nodes
-          WHERE (((edge_nodes.kind)::text = 'resource_type'::text) AND ((edge_nodes.value)::text = ANY ((ARRAY['"GenericPointer"'::character varying, '"ToolSlot"'::character varying, '"Plant"'::character varying])::text[])))
+          WHERE (((edge_nodes.kind)::text = 'resource_type'::text) AND ((edge_nodes.value)::text = ANY (ARRAY[('"GenericPointer"'::character varying)::text, ('"ToolSlot"'::character varying)::text, ('"Plant"'::character varying)::text])))
         ), resource_id AS (
          SELECT edge_nodes.primary_node_id,
             edge_nodes.kind,
@@ -1715,7 +1710,7 @@ ALTER SEQUENCE public.sequence_publications_id_seq OWNED BY public.sequence_publ
 --
 
 CREATE VIEW public.sequence_usage_reports AS
- SELECT sequences.id AS sequence_id,
+ SELECT id AS sequence_id,
     ( SELECT count(*) AS count
            FROM public.edge_nodes
           WHERE (((edge_nodes.kind)::text = 'sequence_id'::text) AND ((edge_nodes.value)::integer = sequences.id))) AS edge_node_count,
@@ -2037,7 +2032,8 @@ CREATE TABLE public.web_app_configs (
     default_plant_depth integer DEFAULT 5,
     show_missed_step_plot boolean DEFAULT false,
     enable_3d_electronics_box_top boolean DEFAULT true,
-    three_d_garden boolean DEFAULT false
+    three_d_garden boolean DEFAULT false,
+    dark_mode boolean DEFAULT false
 );
 
 
@@ -3708,14 +3704,6 @@ ALTER TABLE ONLY public.plant_templates
     ADD CONSTRAINT plant_templates_device_id_fk FOREIGN KEY (device_id) REFERENCES public.devices(id);
 
 
---
--- Name: plant_templates plant_templates_saved_garden_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
---
-
-ALTER TABLE ONLY public.plant_templates
-    ADD CONSTRAINT plant_templates_saved_garden_id_fk FOREIGN KEY (saved_garden_id) REFERENCES public.saved_gardens(id);
-
-
 --
 -- Name: point_group_items point_group_items_point_group_id_fk; Type: FK CONSTRAINT; Schema: public; Owner: -
 --
@@ -3989,6 +3977,8 @@ INSERT INTO "schema_migrations" (version) VALUES
 ('20240202171922'),
 ('20240207234421'),
 ('20240405171128'),
-('20240625195838');
+('20240625195838'),
+('20241203194030'),
+('20241203211516');
 
 
diff --git a/docker_configs/api.Dockerfile b/docker_configs/api.Dockerfile
index 6a517dfc64..6399440e39 100644
--- a/docker_configs/api.Dockerfile
+++ b/docker_configs/api.Dockerfile
@@ -1,10 +1,10 @@
-FROM ruby:3.3.5
+FROM ruby:3.3.6
 RUN curl https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor | tee /etc/apt/trusted.gpg.d/apt.postgresql.org.gpg > /dev/null && \
   sh -c '. /etc/os-release; echo $VERSION_CODENAME; echo "deb http://apt.postgresql.org/pub/repos/apt/ $VERSION_CODENAME-pgdg main" >> /etc/apt/sources.list.d/pgdg.list' && \
   apt-get update -qq && apt-get install -y build-essential libpq-dev postgresql postgresql-contrib && \
   mkdir -p /etc/apt/keyrings && \
   curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
-  sh -c 'echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" >> /etc/apt/sources.list.d/nodesource.list' && \
+  sh -c 'echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_22.x nodistro main" >> /etc/apt/sources.list.d/nodesource.list' && \
   apt-get update -qq && \
   sh -c 'echo "\nPackage: *\nPin: origin deb.nodesource.com\nPin-Priority: 700\n" >> /etc/apt/preferences' && \
   apt-get install -y nodejs && \
diff --git a/docker_configs/rabbitmq.Dockerfile b/docker_configs/rabbitmq.Dockerfile
index 4e6d1bcc77..5bbb2fb2cf 100755
--- a/docker_configs/rabbitmq.Dockerfile
+++ b/docker_configs/rabbitmq.Dockerfile
@@ -1,4 +1,4 @@
-FROM rabbitmq:3.13.6
+FROM rabbitmq:4.0.4
 RUN rabbitmq-plugins enable --offline \
   rabbitmq_auth_backend_http \
   rabbitmq_management \
diff --git a/frontend/404.tsx b/frontend/404.tsx
index 0b9eebbd84..36fc0bbd27 100644
--- a/frontend/404.tsx
+++ b/frontend/404.tsx
@@ -15,3 +15,6 @@ export const FourOhFour = (_: {}) =>
       </h5>
     </div>
   </div>;
+
+// eslint-disable-next-line import/no-default-export
+export default FourOhFour;
diff --git a/frontend/__test_support__/additional_mocks.tsx b/frontend/__test_support__/additional_mocks.tsx
index b530a4e478..690f9f4663 100644
--- a/frontend/__test_support__/additional_mocks.tsx
+++ b/frontend/__test_support__/additional_mocks.tsx
@@ -28,12 +28,7 @@ window.TextDecoder = jest.fn(() => ({
 }));
 
 jest.mock("../error_boundary", () => ({
-  ErrorBoundary: (p: { children: React.ReactChild }) => <div>{p.children}</div>,
-}));
-
-jest.mock("../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => [],
+  ErrorBoundary: (p: { children: React.ReactNode }) => <div>{p.children}</div>,
 }));
 
 window.ResizeObserver = (() => ({
@@ -47,3 +42,14 @@ jest.mock("@rollbar/react", () => ({
   Provider: ({ children }: { children: React.ReactNode }) =>
     <div className={"rollbar"}>{children}</div>,
 }));
+
+global.mockNavigate = jest.fn(() => jest.fn());
+
+jest.mock("react-router", () => ({
+  BrowserRouter: jest.fn(({ children }) => <div>{children}</div>),
+  Route: jest.fn(({ children }) => <div>{children}</div>),
+  Routes: jest.fn(({ children }) => <div>{children}</div>),
+  useNavigate: () => mockNavigate,
+  Navigate: ({ to }: { to: string }) => <div>{mockNavigate(to)}</div>,
+  Outlet: jest.fn(() => <div />),
+}));
diff --git a/frontend/__test_support__/fake_designer_state.ts b/frontend/__test_support__/fake_designer_state.ts
index 957f5b70b2..7ba45401b0 100644
--- a/frontend/__test_support__/fake_designer_state.ts
+++ b/frontend/__test_support__/fake_designer_state.ts
@@ -52,6 +52,8 @@ export const fakeDesignerState = (): DesignerState => ({
   cropHeightCurveId: undefined,
   cropStage: undefined,
   cropPlantedAt: undefined,
+  distanceIndicator: "",
+  panelOpen: true,
 });
 
 export const fakeHelpState = (): HelpState => ({
diff --git a/frontend/__test_support__/fake_state/resources.ts b/frontend/__test_support__/fake_state/resources.ts
index 6e031ce6dd..d3be6a923e 100644
--- a/frontend/__test_support__/fake_state/resources.ts
+++ b/frontend/__test_support__/fake_state/resources.ts
@@ -36,6 +36,7 @@ import {
 } from "farmbot/dist/resources/api_resources";
 import { MessageType } from "../../sequences/interfaces";
 import { TaggedPointGroup } from "../../resources/interfaces";
+import { BooleanConfigKey } from "farmbot/dist/resources/configs/web_app";
 
 export const resources: Everything["resources"] = buildResourceIndex();
 let idCounter = 1;
@@ -390,6 +391,8 @@ export function fakeWebAppConfig(): TaggedWebAppConfig {
     map_size_x: 2900,
     map_size_y: 1400,
     user_interface_read_only_mode: false,
+    ["three_d_garden" as BooleanConfigKey]: false,
+    ["dark_mode" as BooleanConfigKey]: false,
     view_celery_script: false,
   });
 }
diff --git a/frontend/__test_support__/helpers.ts b/frontend/__test_support__/helpers.ts
index 26017ece44..97cf210966 100644
--- a/frontend/__test_support__/helpers.ts
+++ b/frontend/__test_support__/helpers.ts
@@ -1,3 +1,4 @@
+import { fireEvent } from "@testing-library/react";
 import { ReactWrapper, shallow, ShallowWrapper } from "enzyme";
 import { range } from "lodash";
 
@@ -42,6 +43,16 @@ export function changeBlurableInput(
   input.simulate("blur", { currentTarget: { value } });
 }
 
+/** Simulate BlurableInput commit. */
+export function changeBlurableInputRTL(
+  input: HTMLElement,
+  value: string,
+) {
+  fireEvent.focus(input);
+  fireEvent.change(input, { target: { value } });
+  fireEvent.blur(input);
+}
+
 export const fetchResponse = (
   read: () => Promise<ReadableStreamReadResult<never>>,
   response?: Partial<Response>,
diff --git a/frontend/__test_support__/mount_with_context.tsx b/frontend/__test_support__/mount_with_context.tsx
new file mode 100644
index 0000000000..3baa173426
--- /dev/null
+++ b/frontend/__test_support__/mount_with_context.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { mount } from "enzyme";
+import { NavigationProvider } from "../routes_helpers";
+
+export const mountWithContext = (element: React.ReactElement) =>
+  mount<React.ReactElement>(<NavigationProvider>{element}</NavigationProvider>);
diff --git a/frontend/__test_support__/panel_state.ts b/frontend/__test_support__/panel_state.ts
index 11d6f9e521..6a213d317f 100644
--- a/frontend/__test_support__/panel_state.ts
+++ b/frontend/__test_support__/panel_state.ts
@@ -27,6 +27,7 @@ export const settingsPanelState = (): SettingsPanelState => {
     parameter_management: false,
     custom_settings: false,
     farm_designer: false,
+    three_d: false,
     account: false,
     other_settings: false,
   };
diff --git a/frontend/__test_support__/setup_tests.js b/frontend/__test_support__/setup_tests.js
new file mode 100644
index 0000000000..15dd9b291b
--- /dev/null
+++ b/frontend/__test_support__/setup_tests.js
@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "./customMatchers";
diff --git a/frontend/__test_support__/svg_mount.tsx b/frontend/__test_support__/svg_mount.tsx
index 52494e083b..b9d9184f4f 100644
--- a/frontend/__test_support__/svg_mount.tsx
+++ b/frontend/__test_support__/svg_mount.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
 
-export function svgMount(element: React.ReactElement) {
-  return mount<React.ReactElement>(<svg>{element}</svg>);
+export function svgMount(element: React.ReactNode) {
+  return mount<React.ReactNode>(<svg>{element}</svg>);
 }
diff --git a/frontend/__test_support__/three_d_mocks.tsx b/frontend/__test_support__/three_d_mocks.tsx
index f903e43577..c5f3f2593d 100644
--- a/frontend/__test_support__/three_d_mocks.tsx
+++ b/frontend/__test_support__/three_d_mocks.tsx
@@ -29,14 +29,18 @@ jest.mock("@react-spring/three", () => ({
     (props.to as TransitionFn)?.(next);
     return { ...props, ...props.from };
   },
-  animated: {
-    mesh: ({ children }: { children: ReactNode }) =>
-      <div className={"animated"}>{children}</div>,
-    meshPhongMaterial: () => <div />,
-    group: ({ children }: { children: ReactNode }) =>
-      <div className={"group"}>{children}</div>,
-    pointLight: () => <div />,
-  }
+  // mocks for `<animated.mesh...` and similar:
+  //   animated: {
+  //     mesh: ({ children }: { children: ReactNode }) =>
+  //       <div className={"animated"}>{children}</div>,
+  //     meshPhongMaterial: () => <div />,
+  //     group: ({ children }: { children: ReactNode }) =>
+  //       <div className={"group"}>{children}</div>,
+  //     pointLight: () => <div />,
+  //   },
+  // mocks for `const AnimatedMesh = animated(Mesh); ... <AnimatedMesh...`:
+  animated: () => ({ children }: { children?: ReactNode }) =>
+    <div className={"animated"}>{children}</div>,
 }));
 
 jest.mock("@react-three/drei", () => {
@@ -556,7 +560,9 @@ jest.mock("@react-three/drei", () => {
       <div className={"trail"}>{name}</div>,
     Tube: ({ name, children }: { name: string, children: ReactNode }) =>
       <div className={"tube" + name}>{children}</div>,
-    Text: ({ children }: { children: ReactNode }) =>
+    Center: ({ children }: { children: ReactNode }) =>
+      <div className={"center"}>{children}</div>,
+    Text3D: ({ children }: { children: ReactNode }) =>
       <div className={"text"}>{children}</div>,
     Detailed: ({ children }: { children: ReactNode }) =>
       <div className={"detailed"}>{children}</div>,
@@ -580,8 +586,8 @@ jest.mock("@react-three/drei", () => {
       <div className={"circle" + name}>{children}</div>,
     Stats: ({ name }: { name: string }) =>
       <div className={"stats"}>{name}</div>,
-    Billboard: ({ name }: { name: string }) =>
-      <div className={"billboard"}>{name}</div>,
+    Billboard: ({ name, children }: { name: string, children: ReactNode }) =>
+      <div className={"billboard" + name}>{children}</div>,
     Image: ({ name }: { name: string }) =>
       <div className={"image"}>{name}</div>,
     Clouds: ({ name }: { name: string }) =>
diff --git a/frontend/__tests__/apology_test.tsx b/frontend/__tests__/apology_test.tsx
index 82e55e2d39..c7e01b99b3 100644
--- a/frontend/__tests__/apology_test.tsx
+++ b/frontend/__tests__/apology_test.tsx
@@ -1,6 +1,6 @@
 jest.mock("../session", () => ({ Session: { clear: jest.fn() } }));
 
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { Apology } from "../apology";
 import { Session } from "../session";
diff --git a/frontend/__tests__/app_test.tsx b/frontend/__tests__/app_test.tsx
index 10cafdeb56..c6e4128281 100644
--- a/frontend/__tests__/app_test.tsx
+++ b/frontend/__tests__/app_test.tsx
@@ -3,12 +3,6 @@ jest.mock("bowser", () => ({
   getParser: () => ({ satisfies: () => mockSatisfies }),
 }));
 
-let mockPath = "";
-jest.mock("../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-  push: jest.fn(),
-}));
-
 jest.mock("../hotkeys", () => ({
   HotKeys: () => <div />,
 }));
@@ -30,10 +24,10 @@ import { error, warning } from "../toast/toast";
 import { fakePings } from "../__test_support__/fake_state/pings";
 import { auth } from "../__test_support__/fake_state/token";
 import {
+  fakeDesignerState,
   fakeHelpState, fakeMenuOpenState,
 } from "../__test_support__/fake_designer_state";
 import { Path } from "../internal_urls";
-import { push } from "../history";
 import { app } from "../__test_support__/fake_state/app";
 
 const FULLY_LOADED: ResourceName[] = [
@@ -68,9 +62,14 @@ const fakeProps = (): AppProps => ({
   peripherals: [],
   sequences: [],
   menuOpen: fakeMenuOpenState(),
+  designer: fakeDesignerState(),
 });
 
 describe("<App />: Loading", () => {
+  beforeEach(() => {
+    location.pathname = Path.mock(Path.app());
+  });
+
   it("MUST_LOADs not loaded", () => {
     const wrapper = mount(<App {...fakeProps()} />);
     expect(wrapper.text()).toContain("Loading...");
@@ -126,19 +125,33 @@ describe("<App />: Loading", () => {
   });
 
   it("navigates to landing page", () => {
-    mockPath = Path.mock(Path.app());
+    location.pathname = Path.mock(Path.app());
     const p = fakeProps();
     p.getConfigValue = () => "controls";
     mount(<App {...p} />);
-    expect(push).toHaveBeenCalledWith(Path.controls());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.controls());
   });
 
   it("doesn't navigate to landing page", () => {
-    mockPath = Path.mock(Path.controls());
+    location.pathname = Path.mock(Path.controls());
     const p = fakeProps();
     p.getConfigValue = () => "controls";
     mount(<App {...p} />);
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("enables the dark theme", () => {
+    const p = fakeProps();
+    p.getConfigValue = () => true;
+    const wrapper = mount(<App {...p} />);
+    expect(wrapper.find(".app").hasClass("dark")).toBeTruthy();
+  });
+
+  it("enables the light theme", () => {
+    const p = fakeProps();
+    p.getConfigValue = () => false;
+    const wrapper = mount(<App {...p} />);
+    expect(wrapper.find(".app").hasClass("light")).toBeTruthy();
   });
 });
 
diff --git a/frontend/__tests__/history_test.ts b/frontend/__tests__/history_test.ts
deleted file mode 100644
index cfe6b127bd..0000000000
--- a/frontend/__tests__/history_test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-jest.mock("takeme", () => ({ navigate: jest.fn() }));
-jest.unmock("../history");
-
-import { navigate } from "takeme";
-import { getPathArray, push } from "../history";
-
-describe("push()", () => {
-  it("calls history with a URL", () => {
-    push("/wow.html");
-    expect(navigate).toHaveBeenCalledWith("/wow.html");
-  });
-
-  it("calls history, stripping /app", () => {
-    push("/app/wow");
-    expect(navigate).toHaveBeenCalledWith("/wow");
-  });
-});
-
-describe("getPathArray()", () => {
-  it("returns path array", () => {
-    location.pathname = "/1/2/3";
-    expect(getPathArray()).toEqual(["", "1", "2", "3"]);
-  });
-});
diff --git a/frontend/__tests__/hotkeys_test.tsx b/frontend/__tests__/hotkeys_test.tsx
index ada7afdf74..2d38712ebc 100644
--- a/frontend/__tests__/hotkeys_test.tsx
+++ b/frontend/__tests__/hotkeys_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../internal_urls";
-let mockPath = Path.mock(Path.designer());
-jest.mock("../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
 const mockSyncThunk = jest.fn();
 jest.mock("../devices/actions", () => ({ sync: () => mockSyncThunk }));
 jest.mock("../farm_designer/map/actions", () => ({ unselectPlant: jest.fn() }));
@@ -21,26 +15,32 @@ import { shallow } from "enzyme";
 import {
   HotKey, HotKeys, HotKeysProps, hotkeysWithActions, toggleHotkeyHelpOverlay,
 } from "../hotkeys";
-import { push } from "../history";
 import { sync } from "../devices/actions";
 import { unselectPlant } from "../farm_designer/map/actions";
 import { save } from "../api/crud";
 import { Actions } from "../constants";
+import { Path } from "../internal_urls";
 
 describe("hotkeysWithActions()", () => {
+  beforeEach(() => {
+    location.pathname = Path.mock(Path.designer());
+  });
+
   it("has key bindings", () => {
     const dispatch = jest.fn();
-    const hotkeys = hotkeysWithActions(dispatch, "");
+    const navigate = jest.fn();
+    const hotkeys = hotkeysWithActions(navigate, dispatch, "");
     expect(Object.values(hotkeys).length).toBe(8);
     const e = {} as KeyboardEvent;
 
     hotkeys[HotKey.save].onKeyDown?.(e);
     expect(save).not.toHaveBeenCalled();
     mockState.resources.consumers.sequences.current = "uuid";
-    const hotkeysSettingsPath = hotkeysWithActions(dispatch, "settings");
+    const hotkeysSettingsPath = hotkeysWithActions(navigate, dispatch, "settings");
     hotkeysSettingsPath[HotKey.save].onKeyDown?.(e);
     expect(save).not.toHaveBeenCalled();
-    const hotkeysSequencesPath = hotkeysWithActions(dispatch, "sequences");
+    const hotkeysSequencesPath = hotkeysWithActions(
+      navigate, dispatch, "sequences");
     hotkeysSequencesPath[HotKey.save].onKeyDown?.(e);
     expect(save).toHaveBeenCalledWith("uuid");
 
@@ -48,24 +48,24 @@ describe("hotkeysWithActions()", () => {
     expect(dispatch).toHaveBeenCalledWith(sync());
 
     hotkeys[HotKey.navigateRight].onKeyDown?.(e);
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
 
     hotkeys[HotKey.navigateLeft].onKeyDown?.(e);
-    expect(push).toHaveBeenCalledWith(Path.settings());
+    expect(navigate).toHaveBeenCalledWith(Path.settings());
 
     hotkeys[HotKey.addPlant].onKeyDown?.(e);
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(navigate).toHaveBeenCalledWith(Path.cropSearch());
 
     hotkeys[HotKey.addEvent].onKeyDown?.(e);
-    expect(push).toHaveBeenCalledWith(Path.farmEvents("add"));
+    expect(navigate).toHaveBeenCalledWith(Path.farmEvents("add"));
 
     hotkeysSettingsPath[HotKey.backToPlantOverview].onKeyDown?.(e);
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
     expect(unselectPlant).toHaveBeenCalled();
     jest.clearAllMocks();
-    const hotkeysPhotosPath = hotkeysWithActions(dispatch, "photos");
+    const hotkeysPhotosPath = hotkeysWithActions(navigate, dispatch, "photos");
     hotkeysPhotosPath[HotKey.backToPlantOverview].onKeyDown?.(e);
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
     expect(unselectPlant).not.toHaveBeenCalled();
   });
 });
@@ -87,13 +87,13 @@ describe("<HotKeys />", () => {
   });
 
   it("renders", () => {
-    mockPath = Path.mock(Path.designer("nope"));
+    location.pathname = Path.mock(Path.designer("nope"));
     const wrapper = shallow(<HotKeys {...fakeProps()} />);
     expect(wrapper.html()).toEqual("<div class=\"hotkeys\"></div>");
   });
 
   it("renders default", () => {
-    mockPath = Path.mock(Path.designer());
+    location.pathname = Path.mock(Path.designer());
     const wrapper = shallow(<HotKeys {...fakeProps()} />);
     expect(wrapper.html()).toEqual("<div class=\"hotkeys\"></div>");
   });
diff --git a/frontend/__tests__/internal_urls_test.ts b/frontend/__tests__/internal_urls_test.ts
index 57de342741..6010dffb31 100644
--- a/frontend/__tests__/internal_urls_test.ts
+++ b/frontend/__tests__/internal_urls_test.ts
@@ -1,31 +1,35 @@
 import {
   FilePath, Icon, landingPagePath, PAGE_SLUGS, Path,
 } from "../internal_urls";
-let mockPath = Path.mock(Path.designer());
-jest.mock("../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-}));
 
 describe("Path()", () => {
+  beforeEach(() => {
+    location.pathname = Path.mock(Path.designer());
+  });
+
   it("returns path", () => {
     expect(Path.plants()).toEqual("/app/designer/plants");
     expect(Path.plants(1)).toEqual("/app/designer/plants/1");
-    mockPath = Path.mock(Path.designerSequences("sequence"));
+    location.pathname = Path.mock(Path.designerSequences("sequence"));
     expect(Path.sequences("sequence")).toEqual("/app/designer/sequences/sequence");
-    mockPath = Path.mock(Path.sequencePage("sequence"));
+    location.pathname = Path.mock(Path.sequencePage("sequence"));
     expect(Path.sequences("sequence")).toEqual("/app/sequences/sequence");
   });
 
   it("returns path start result", () => {
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
     expect(Path.startsWith(Path.plants())).toEqual(true);
-    mockPath = Path.mock(Path.weeds(1));
+    location.pathname = Path.mock(Path.weeds(1));
     expect(Path.startsWith(Path.plants())).toEqual(false);
   });
 
   it("modifies path", () => {
     expect(Path.mock(Path.plants())).toEqual("/app/designer/plants");
-    expect(Path.route(Path.plants())).toEqual("/designer/plants");
+  });
+
+  it("returns last chunk", () => {
+    location.pathname = Path.mock(Path.plants(3));
+    expect(Path.getLastChunk()).toEqual("3");
   });
 
   it("returns index", () => {
@@ -39,7 +43,7 @@ describe("Path()", () => {
   });
 
   it("returns slug", () => {
-    mockPath = Path.mock(Path.cropSearch("slug"));
+    location.pathname = Path.mock(Path.cropSearch("slug"));
     expect(Path.getSlug(Path.cropSearch())).toEqual("slug");
   });
 
diff --git a/frontend/__tests__/link_test.tsx b/frontend/__tests__/link_test.tsx
index 2c87171ba0..faceea840e 100644
--- a/frontend/__tests__/link_test.tsx
+++ b/frontend/__tests__/link_test.tsx
@@ -1,30 +1,6 @@
-jest.mock("../history", () => ({ push: jest.fn() }));
-
 import React from "react";
 import { shallow } from "enzyme";
-import { clickHandler, Link } from "../link";
-import { push } from "../history";
-
-describe("clickHandler", () => {
-  function setupClickTest(to: string) {
-    const onClick = jest.fn();
-    const handler = clickHandler({ to, onClick });
-    type ClickEvent = React.MouseEvent<HTMLAnchorElement>;
-    const e: Partial<ClickEvent> = { preventDefault: jest.fn() };
-    return {
-      e: e as ClickEvent,
-      handler,
-      onClick
-    };
-  }
-
-  it("handles clicks", () => {
-    const { e, handler } = setupClickTest("/app/foo/bar");
-    handler(e);
-    expect(e.preventDefault).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith("/app/foo/bar");
-  });
-});
+import { Link } from "../link";
 
 describe("<Link/>", () => {
   it("renders child elements", () => {
@@ -37,12 +13,12 @@ describe("<Link/>", () => {
   it("navigates", () => {
     const wrapper = shallow(<Link to="/tools" />);
     wrapper.simulate("click", { preventDefault: jest.fn() });
-    expect(push).toHaveBeenCalledWith("/tools");
+    expect(mockNavigate).toHaveBeenCalledWith("/tools");
   });
 
   it("doesn't navigate when disabled", () => {
     const wrapper = shallow(<Link to="/tools" disabled={true} />);
     wrapper.simulate("click", { preventDefault: jest.fn() });
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 });
diff --git a/frontend/__tests__/route_config_test.tsx b/frontend/__tests__/route_config_test.tsx
index 524b4b1b09..ee63e47fe9 100644
--- a/frontend/__tests__/route_config_test.tsx
+++ b/frontend/__tests__/route_config_test.tsx
@@ -1,48 +1,16 @@
-jest.mock("react-redux", () => ({
-  connect: jest.fn(() => jest.fn(x => x)),
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  lazy: jest.fn(x => x()),
 }));
 
-import { UNBOUND_ROUTES } from "../route_config";
-import { RouteEnterEvent } from "takeme";
-import { ChangeRoute } from "../routes";
+import { last } from "lodash";
+import { ROUTE_DATA } from "../route_config";
 
-const fakeChangeRoute: ChangeRoute = (component, info, child) => {
-  if (info?.$ == "*") {
-    if (info?.children) {
-      expect(child?.name.split("Raw").join("")).toEqual("FourOhFour");
-    } else {
-      expect(component.name).toEqual("FourOhFour");
+describe("ROUTE_DATA", () => {
+  it("has 404", () => {
+    const lastRoute = last(ROUTE_DATA);
+    if (lastRoute) {
+      expect(lastRoute.path).toEqual("*");
     }
-  }
-  expect(component?.name.split("Raw").join("")).toEqual(info?.key);
-  if (info?.children) {
-    expect(child?.name.split("Raw").join("")).toEqual(info?.childKey);
-  }
-};
-
-const fakeRouteEnterEvent: RouteEnterEvent = {
-  params: { splat: "????" },
-  oldPath: "??",
-  newPath: "??"
-};
-
-describe("UNBOUND_ROUTES", () => {
-  it("generates correct routes", () => {
-    UNBOUND_ROUTES
-      .map(r => r(fakeChangeRoute))
-      .map(r => r.enter && r.enter(fakeRouteEnterEvent));
-  });
-
-  it("generates crash route", async () => {
-    console.error = jest.fn();
-    const fakeError = new Error("fake callback error");
-    const changeRouteError = jest.fn()
-      // try block call
-      .mockImplementationOnce(() => { throw fakeError; })
-      // catch block call
-      .mockImplementationOnce(x => { expect(x.name).toEqual("Apology"); });
-    const r = UNBOUND_ROUTES[0](changeRouteError);
-    r.enter && await r.enter(fakeRouteEnterEvent);
-    expect(console.error).toHaveBeenCalledWith(fakeError);
   });
 });
diff --git a/frontend/__tests__/routes_test.tsx b/frontend/__tests__/routes_test.tsx
index a6005740e9..dbbca4f629 100644
--- a/frontend/__tests__/routes_test.tsx
+++ b/frontend/__tests__/routes_test.tsx
@@ -7,18 +7,13 @@ jest.mock("../session", () => ({
   }
 }));
 
-jest.mock("takeme", () => ({
-  Router: jest.fn(() => ({ enableHtml5Routing: () => ({ init: jest.fn() }) })),
-}));
-
 import React from "react";
-import { mount, shallow } from "enzyme";
-import { AnyConnectedComponent, RootComponent } from "../routes";
+import { mount } from "enzyme";
+import { RootComponent } from "../routes";
 import { store } from "../redux/store";
 import { AuthState } from "../auth/interfaces";
 import { auth } from "../__test_support__/fake_state/token";
 import { Session } from "../session";
-import { FourOhFour } from "../404";
 import { Path } from "../internal_urls";
 
 describe("<RootComponent />", () => {
@@ -50,25 +45,4 @@ describe("<RootComponent />", () => {
     expect(wrapper.html()).not.toContain("rollbar");
     wrapper.unmount();
   });
-
-  it("changes route", () => {
-    const wrapper = shallow<RootComponent>(<RootComponent store={store} />);
-    wrapper.instance().changeRoute(FourOhFour);
-    expect(wrapper.state().Route).toEqual(FourOhFour);
-  });
-
-  it("initializes", () => {
-    const wrapper = shallow<RootComponent>(<RootComponent store={store} />);
-    const Component = wrapper.state().Route;
-    const route = shallow(<Component />);
-    expect(route.text()).toEqual("Loading...");
-  });
-
-  it("renders child route", () => {
-    const wrapper = shallow<RootComponent>(<RootComponent store={store} />);
-    wrapper.setState({
-      ChildRoute: jest.fn(() =>
-        <p>child</p>) as unknown as AnyConnectedComponent
-    });
-  });
 });
diff --git a/frontend/apology.tsx b/frontend/apology.tsx
index 1c97844703..621a92d273 100644
--- a/frontend/apology.tsx
+++ b/frontend/apology.tsx
@@ -31,7 +31,7 @@ export function Apology(_: {}) {
       </span>
       <ol>
         <li>
-          Refresh the page.
+          Click back and then refresh the page.
         </li>
         <li>
           {"Perform a \"hard refresh\""}
diff --git a/frontend/app.tsx b/frontend/app.tsx
index 13c9341954..3c198dfbe2 100644
--- a/frontend/app.tsx
+++ b/frontend/app.tsx
@@ -50,12 +50,14 @@ import { TourStepContainer } from "./help/tours";
 import { Toasts } from "./toast/fb_toast";
 import Bowser from "bowser";
 import { landingPagePath, Path } from "./internal_urls";
-import { push } from "./history";
 import { AppState } from "./reducer";
 import {
   sourceFbosConfigValue, sourceFwConfigValue,
 } from "./settings/source_config_value";
 import { RunButtonMenuOpen } from "./sequences/interfaces";
+import { Navigate, Outlet } from "react-router";
+import { ErrorBoundary } from "./error_boundary";
+import { DesignerState } from "./farm_designer/interfaces";
 
 export interface AppProps {
   dispatch: Function;
@@ -86,6 +88,7 @@ export interface AppProps {
   sequences: TaggedSequence[];
   menuOpen: RunButtonMenuOpen;
   appState: AppState;
+  designer: DesignerState;
   children?: React.ReactNode;
 }
 
@@ -127,6 +130,7 @@ export function mapStateToProps(props: Everything): AppProps {
     peripherals: uniq(selectAllPeripherals(props.resources.index)),
     sequences: selectAllSequences(props.resources.index),
     menuOpen: props.resources.consumers.sequences.menuOpen,
+    designer: props.resources.consumers.farm_designer,
   };
 }
 /** Time at which the app gives up and asks the user to refresh */
@@ -176,13 +180,14 @@ export class RawApp extends React.Component<AppProps, {}> {
     const syncLoaded = this.isLoaded;
     const { bot, dispatch, getConfigValue } = this.props;
     const landingPage = getConfigValue(StringSetting.landing_page);
-    if (Path.equals("") && isString(landingPage)) {
-      push(landingPagePath(landingPage));
-    }
-    return <div className="app">
+    const themeClass = getConfigValue(BooleanSetting.dark_mode) ? "dark" : "light";
+    return <div className={["app", themeClass].join(" ")}>
+      {(Path.equals("") || Path.equals(Path.app())) && isString(landingPage) &&
+        <Navigate to={landingPagePath(landingPage)} />}
       {!syncLoaded && <LoadingPlant animate={this.props.animate} />}
       <HotKeys dispatch={dispatch} hotkeyGuide={this.props.appState.hotkeyGuide} />
       {syncLoaded && <NavBar
+        designer={this.props.designer}
         timeSettings={this.props.timeSettings}
         user={this.props.user}
         bot={bot}
@@ -209,6 +214,11 @@ export class RawApp extends React.Component<AppProps, {}> {
         menuOpen={this.props.menuOpen}
         pings={this.props.pings} />}
       {syncLoaded && this.props.children}
+      <ErrorBoundary>
+        <React.Suspense>
+          {syncLoaded && <Outlet />}
+        </React.Suspense>
+      </ErrorBoundary>
       <div className={"toast-container"}>
         <TourStepContainer
           key={JSON.stringify(this.props.helpState)}
@@ -225,3 +235,5 @@ export class RawApp extends React.Component<AppProps, {}> {
 
 export const App = connect(mapStateToProps)(
   RawApp) as ConnectedComponent<typeof RawApp, { children?: React.ReactNode }>;
+// eslint-disable-next-line import/no-default-export
+export default App;
diff --git a/frontend/constants.ts b/frontend/constants.ts
index 9c9a2ef8a5..e81a111ea5 100644
--- a/frontend/constants.ts
+++ b/frontend/constants.ts
@@ -606,6 +606,43 @@ export namespace ToolTips {
   export const UNKNOWN_STEP =
     trim(`Unable to properly display this step.`);
 
+  // 3D
+  export const THREE_D_BED_WALL_THICKNESS =
+    trim(`Bed wood thickness. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_BED_HEIGHT =
+    trim(`Bed height. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_CC_SUPPORT_SIZE =
+    trim(`Cable carrier support size. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_BEAM_LENGTH =
+    trim(`Gantry beam extrusion length. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_COLUMN_LENGTH =
+    trim(`Gantry column extrusion length. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_Z_AXIS_LENGTH =
+    trim(`Z axis extrusion length. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_BED_X_OFFSET =
+    trim(`Bed X offset. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_BED_Y_OFFSET =
+    trim(`Bed Y offset. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_BED_Z_OFFSET =
+    trim(`Bed Z offset. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_LEG_SIZE =
+    trim(`Leg size. (default: {{ defaultConfigValue }}mm)`);
+
+  export const THREE_D_BOUNDS =
+    trim(`Display bounds. (default: 0)`);
+
+  export const THREE_D_GRID =
+    trim(`Display grid. (default: 0)`);
+
   // Tools
   export const WATER_FLOW_RATE =
     trim(`To calculate **WATER FLOW RATE**, hold a measuring cup below the
@@ -819,6 +856,9 @@ export namespace Content {
     trim(`Disallow account data changes. This does
     not prevent Farmwares or FarmBot OS from changing settings.`);
 
+  export const DARK_MODE =
+    trim(`Enable a dark interface theme.`);
+
   // Sequence Settings
   export const CONFIRM_STEP_DELETION =
     trim(`Show a confirmation dialog when deleting a sequence step.`);
@@ -1154,22 +1194,22 @@ export namespace Content {
     Try leaving the saved garden first.`);
 
   export const NO_PLANTS =
-    trim(`Press "+" to add a plant to your garden.`);
+    trim(`Press + to add a plant to your garden`);
 
   export const NO_GARDENS =
-    trim(`Press "+" to add a garden.`);
+    trim(`Press + to add a garden`);
 
   export const NO_POINTS =
-    trim(`Press "+" to add a point to your garden.`);
+    trim(`Press + to add a point to your garden`);
 
   export const NO_GROUPS =
-    trim(`Press "+" to add a group.`);
+    trim(`Press + to add a group`);
 
   export const NO_WEEDS =
-    trim(`Press "+" to add a weed.`);
+    trim(`Press + to add a weed`);
 
   export const NO_FARMWARE =
-    trim(`Press "+" to add a Farmware.`);
+    trim(`Press + to add a Farmware`);
 
   export const NO_PERIPHERALS =
     trim(`Press "edit" to add a peripheral.`);
@@ -1178,10 +1218,10 @@ export namespace Content {
     trim(`Press "edit" to add a sensor.`);
 
   export const NO_ZONES =
-    trim(`Press "+" to add a zone.`);
+    trim(`Press + to add a zone`);
 
   export const NO_CURVES =
-    trim(`Press "+" to add a curve.`);
+    trim(`Press + to add a curve`);
 
   export const ENTER_CROP_SEARCH_TERM =
     trim(`Search for a crop to add to your garden.`);
@@ -1193,10 +1233,10 @@ export namespace Content {
     trim(`add this crop on OpenFarm?`);
 
   export const NO_TOOLS =
-    trim(`Press "+" to add a new tool or seed container.`);
+    trim(`Press + to add a new tool or seed container`);
 
   export const NO_SEED_CONTAINERS =
-    trim(`Press "+" to add a seed container.`);
+    trim(`Press + to add a seed container`);
 
   export const MOUNTED_TOOL =
     trim(`The tool currently mounted to the UTM can be set here or by using
@@ -1205,7 +1245,7 @@ export namespace Content {
 
   // Farm Events
   export const NOTHING_SCHEDULED =
-    trim(`Press "+" to schedule an event.`);
+    trim(`Press + to schedule an event`);
 
   export const REGIMEN_TODAY_SKIPPED_ITEM_RISK =
     trim(`You are scheduling a regimen to run today. Be aware that
@@ -2089,7 +2129,7 @@ export enum DeviceSetting {
   addNewPinBinding = `Add new pin binding`,
 
   // Pin Guard
-  pinGuardLabels = ``,
+  pinGuardLabels = `Pin Guard`,
   pinGuardTitles = `pin timeout (sec) to state`,
   pinGuard = `Pin Guard`,
   pinGuard1 = `Pin Guard 1`,
@@ -2143,6 +2183,21 @@ export enum DeviceSetting {
   customSettings = `Custom Settings`,
   envEditor = `ENV Editor`,
 
+  // 3D
+  threeDGarden = `3D Garden`,
+  bedWallThickness = `Bed Wall Thickness`,
+  bedHeight = `Bed Height`,
+  ccSupportSize = `Cable Carrier Support Size`,
+  beamLength = `Beam Length`,
+  columnLength = `Column Length`,
+  zAxisLength = `Z Axis Length`,
+  bedXOffset = `Bed X Offset`,
+  bedYOffset = `Bed Y Offset`,
+  bedZOffset = `Bed Z Offset`,
+  legSize = `Leg Size`,
+  bounds = `Bounds`,
+  grid = `Grid`,
+
   // Map
   showPlants = `Plants`,
   showPlantsMapLayer = `Show Plants Map Layer`,
@@ -2221,6 +2276,7 @@ export enum DeviceSetting {
   discardUnsavedChanges = `Discard Unsaved Changes`,
   confirmEmergencyUnlock = `Confirm emergency unlock`,
   userInterfaceReadOnlyMode = `User Interface Read Only Mode`,
+  darkMode = `Dark Mode`,
 
   // Photos: Filters
   alwaysHighlightCurrentPhotoInMap = `always highlight current photo in map`,
@@ -2411,6 +2467,7 @@ export enum Actions {
   TOGGLE_GRID_ID = "TOGGLE_GRID_ID",
   SET_GRID_START = "SET_GRID_START",
   TOGGLE_SOIL_HEIGHT_LABELS = "TOGGLE_SOIL_HEIGHT_LABELS",
+  SET_PANEL_OPEN = "SET_PANEL_OPEN",
   SET_PROFILE_OPEN = "SET_PROFILE_OPEN",
   SET_PROFILE_AXIS = "SET_PROFILE_AXIS",
   SET_PROFILE_POSITION = "SET_PROFILE_POSITION",
@@ -2422,6 +2479,9 @@ export enum Actions {
   SET_CROP_STAGE = "SET_CROP_STAGE",
   SET_CROP_PLANTED_AT = "SET_CROP_PLANTED_AT",
 
+  // 3D
+  SET_DISTANCE_INDICATOR = "SET_DISTANCE_INDICATOR",
+
   // Regimens
   PUSH_WEEK = "PUSH_WEEK",
   POP_WEEK = "POP_WEEK",
diff --git a/frontend/controls/__tests__/controls_page_test.tsx b/frontend/controls/__tests__/controls_page_test.tsx
deleted file mode 100644
index b3ef107c14..0000000000
--- a/frontend/controls/__tests__/controls_page_test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { Controls } from "../controls_page";
-import { push } from "../../history";
-import { Path } from "../../internal_urls";
-
-describe("<Controls />", () => {
-  it("redirects", () => {
-    const wrapper = mount(<Controls />);
-    expect(wrapper.text().toLowerCase()).toContain("redirecting");
-    expect(push).toHaveBeenCalledWith(Path.controls());
-  });
-});
diff --git a/frontend/controls/__tests__/pin_form_fields_test.tsx b/frontend/controls/__tests__/pin_form_fields_test.tsx
index 01e3f8b6d1..4c6b59213c 100644
--- a/frontend/controls/__tests__/pin_form_fields_test.tsx
+++ b/frontend/controls/__tests__/pin_form_fields_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import { NameInputBox, PinDropdown, ModeDropdown } from "../pin_form_fields";
 import { fakeSensor } from "../../__test_support__/fake_state/resources";
diff --git a/frontend/controls/axis_display_group.tsx b/frontend/controls/axis_display_group.tsx
index 51d2c3b654..71d273f98e 100644
--- a/frontend/controls/axis_display_group.tsx
+++ b/frontend/controls/axis_display_group.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../ui";
+import { Row } from "../ui";
 import { AxisDisplayGroupProps, AxisProps } from "./interfaces";
 import { isNumber, isUndefined } from "lodash";
 import { t } from "../i18next_wrapper";
@@ -8,7 +8,7 @@ import { DevSettings } from "../settings/dev/dev_support";
 
 const Axis = (props: AxisProps) => {
   const { axis, val, missedSteps, axisState, index, detectionEnabled } = props;
-  return <Col xs={3} className={"index-" + index}>
+  return <div className={"index-" + index}>
     {isNumber(missedSteps) && missedSteps >= 0 && detectionEnabled &&
       <MissedStepIndicator
         missedSteps={axisState == "idle" ? 0 : missedSteps}
@@ -19,7 +19,7 @@ const Axis = (props: AxisProps) => {
         value={isNumber(val) ? val : "---"} />}
     {!isUndefined(axisState) && DevSettings.futureFeaturesEnabled() &&
       <p>{t(axisState)}</p>}
-  </Col>;
+  </div>;
 };
 
 export const AxisDisplayGroup = (props: AxisDisplayGroupProps) => {
@@ -30,7 +30,7 @@ export const AxisDisplayGroup = (props: AxisDisplayGroupProps) => {
     z: !!props.firmwareSettings?.encoder_enabled_z,
   };
   const common = { noValues: props.noValues };
-  return <Row>
+  return <Row className="grid-4-col">
     <Axis {...common} axis={"x"} val={x} busy={props.busy} index={3}
       detectionEnabled={detectionEnabled.x}
       missedSteps={props.missedSteps?.x}
@@ -47,10 +47,8 @@ export const AxisDisplayGroup = (props: AxisDisplayGroupProps) => {
       highlight={props.highlightAxis == "z"}
       axisState={props.axisStates?.z} />
     {!props.noValues &&
-      <Col xs={3} className={"no-pad"}>
-        <label style={props.style}>
-          {t(props.label)}
-        </label>
-      </Col>}
+      <label style={props.style}>
+        {t(props.label)}
+      </label>}
   </Row>;
 };
diff --git a/frontend/controls/axis_input_box.tsx b/frontend/controls/axis_input_box.tsx
index da59dfab6b..31c05a185d 100644
--- a/frontend/controls/axis_input_box.tsx
+++ b/frontend/controls/axis_input_box.tsx
@@ -1,16 +1,14 @@
-import * as React from "react";
+import React from "react";
 import { AxisInputBoxProps } from "./interfaces";
-import { Col, BlurableInput } from "../ui/index";
+import { BlurableInput } from "../ui";
 
 export const AxisInputBox = ({ onChange, value, axis }: AxisInputBoxProps) => {
-  return <Col xs={3}>
-    <BlurableInput
-      value={value ?? ""}
-      type="number"
-      allowEmpty={true}
-      onCommit={e => {
-        const val = parseFloat(e.currentTarget.value);
-        onChange(axis, isNaN(val) ? undefined : val);
-      }} />
-  </Col>;
+  return <BlurableInput
+    value={value ?? ""}
+    type="number"
+    allowEmpty={true}
+    onCommit={e => {
+      const val = parseFloat(e.currentTarget.value);
+      onChange(axis, isNaN(val) ? undefined : val);
+    }} />;
 };
diff --git a/frontend/controls/axis_input_box_group.tsx b/frontend/controls/axis_input_box_group.tsx
index a0913c95ed..f17e7bcd55 100644
--- a/frontend/controls/axis_input_box_group.tsx
+++ b/frontend/controls/axis_input_box_group.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { AxisInputBox } from "./axis_input_box";
-import { Row, Col } from "../ui";
+import { Row } from "../ui";
 import { AxisInputBoxGroupProps, AxisInputBoxGroupState } from "./interfaces";
 import { isNumber } from "lodash";
 import { Vector3 } from "farmbot";
@@ -44,7 +44,7 @@ export class AxisInputBoxGroup extends
   render() {
     const { x, y, z } = this.state;
 
-    return <Row>
+    return <Row className="grid-4-col">
       <AxisInputBox
         onChange={this.change}
         axis={"x"}
@@ -57,18 +57,16 @@ export class AxisInputBoxGroup extends
         onChange={this.change}
         axis={"z"}
         value={z} />
-      <Col xs={3}>
-        <button
-          onClick={this.clicked}
-          disabled={this.props.disabled || false}
-          title={t("Move to chosen location")}
-          className={[
-            "full-width green go fb-button",
-            lockedClass(this.props.locked),
-          ].join(" ")}>
-          {t("GO")}
-        </button>
-      </Col>
+      <button
+        onClick={this.clicked}
+        disabled={this.props.disabled || false}
+        title={t("Move to chosen location")}
+        className={[
+          "full-width green go fb-button",
+          lockedClass(this.props.locked),
+        ].join(" ")}>
+        {t("GO")}
+      </button>
     </Row>;
   }
 }
diff --git a/frontend/controls/controls.tsx b/frontend/controls/controls.tsx
index f1d8fe1b92..efd37ac694 100644
--- a/frontend/controls/controls.tsx
+++ b/frontend/controls/controls.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { Peripherals } from "./peripherals";
 import { WebcamPanel } from "./webcam";
 import { PinnedSequences } from "./pinned_sequence_list";
@@ -20,25 +20,24 @@ import {
 } from "farmbot";
 import { ResourceIndex } from "../resources/interfaces";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
 import { Path } from "../internal_urls";
 import { RunButtonMenuOpen } from "../sequences/interfaces";
+import { Navigate } from "react-router";
+import { mapStateToProps } from "./state_to_props";
 
-export class RawDesignerControls
-  extends React.Component<DesignerControlsProps, {}> {
-  render() {
-    this.props.dispatch({ type: Actions.OPEN_POPUP, payload: "controls" });
-    push(Path.plants());
-    return <DesignerPanel panelName={"controls"} panel={Panel.Controls}>
-      <DesignerNavTabs />
-      <DesignerPanelContent panelName={"controls"}>
-        <p>Controls have moved to the navigation bar.</p>
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+export const RawDesignerControls = (props: DesignerControlsProps) => {
+  props.dispatch({ type: Actions.OPEN_POPUP, payload: "controls" });
+  return <DesignerPanel panelName={"controls"} panel={Panel.Controls}>
+    <DesignerPanelContent panelName={"controls"}>
+      <Navigate to={Path.plants()} />
+      <p>Controls have moved to the navigation bar.</p>
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
-export const DesignerControls = connect()(RawDesignerControls);
+export const DesignerControls = connect(mapStateToProps)(RawDesignerControls);
+// eslint-disable-next-line import/no-default-export
+export default DesignerControls;
 
 export interface ControlsPanelProps {
   dispatch: Function;
@@ -81,7 +80,7 @@ export class ControlsPanel extends React.Component<ControlsPanelProps> {
   };
 
   Peripherals = () => {
-    return <div className={"peripherals-tab"}>
+    return <div className={"peripherals-tab grid"}>
       <Peripherals
         getConfigValue={this.props.getConfigValue}
         firmwareHardware={this.props.firmwareHardware}
diff --git a/frontend/controls/controls_page.tsx b/frontend/controls/controls_page.tsx
deleted file mode 100644
index 346303af5b..0000000000
--- a/frontend/controls/controls_page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { Page } from "../ui";
-import { t } from "../i18next_wrapper";
-import { push } from "../history";
-import { Path } from "../internal_urls";
-
-/** Controls page redirect. */
-export class Controls extends React.Component {
-  render() {
-    push(Path.controls());
-    return <Page className="controls-page">
-      <p>{t("This page has moved. Redirecting...")}</p>
-    </Page>;
-  }
-}
diff --git a/frontend/controls/move/__tests__/bot_position_rows_test.tsx b/frontend/controls/move/__tests__/bot_position_rows_test.tsx
index ce946ad82d..f2c44ebe98 100644
--- a/frontend/controls/move/__tests__/bot_position_rows_test.tsx
+++ b/frontend/controls/move/__tests__/bot_position_rows_test.tsx
@@ -19,7 +19,6 @@ import { bot } from "../../../__test_support__/fake_state/bot";
 import { Dictionary } from "farmbot";
 import { BooleanSetting } from "../../../session_keys";
 import { clickButton } from "../../../__test_support__/helpers";
-import { push } from "../../../history";
 import { Path } from "../../../internal_urls";
 
 describe("<BotPositionRows />", () => {
@@ -100,6 +99,6 @@ describe("<BotPositionRows />", () => {
     const wrapper = mount(<BotPositionRows {...fakeProps()} />);
     wrapper.find(".fa-ellipsis-v").first().simulate("click");
     wrapper.find("a").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.settings("axes"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.settings("axes"));
   });
 });
diff --git a/frontend/controls/move/bot_position_rows.tsx b/frontend/controls/move/bot_position_rows.tsx
index 2b0052b4be..d3a4d07e24 100644
--- a/frontend/controls/move/bot_position_rows.tsx
+++ b/frontend/controls/move/bot_position_rows.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, Popover } from "../../ui";
+import { Row, Popover } from "../../ui";
 import {
   findAxisLength, findHome, moveAbsolute, moveToHome, setHome, updateMCU,
 } from "../../devices/actions";
@@ -13,7 +13,7 @@ import { Position } from "@blueprintjs/core";
 import {
   disabledAxisMap,
 } from "../../settings/hardware_settings/axis_tracking_status";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import {
   AxisActionsProps, BotPositionRowsProps, SetAxisLengthProps,
 } from "./interfaces";
@@ -43,27 +43,27 @@ export const BotPositionRows = (props: BotPositionRowsProps) => {
     || (hasEncoders(props.firmwareHardware) &&
       (getConfigValue(BooleanSetting.scaled_encoders)
         || getConfigValue(BooleanSetting.raw_encoders)));
-  return <div className={"bot-position-rows"}>
+  return <div className={"bot-position-rows grid"}>
     <div className={"axis-titles"}>
-      <Row>
-        <Col xs={3}>
+      <Row className="grid-4-col">
+        <div className="row grid-exp-1">
           <label>{t("X AXIS")}</label>
           <AxisActions axis={"x"}
             hardwareDisabled={hardwareDisabled.x}
             {...commonAxisActionProps} />
-        </Col>
-        <Col xs={3}>
+        </div>
+        <div className="row grid-exp-1">
           <label>{t("Y AXIS")}</label>
           <AxisActions axis={"y"}
             hardwareDisabled={hardwareDisabled.y}
             {...commonAxisActionProps} />
-        </Col>
-        <Col xs={3}>
+        </div>
+        <div className="row grid-exp-1">
           <label>{t("Z AXIS")}</label>
           <AxisActions axis={"z"}
             hardwareDisabled={hardwareDisabled.z}
             {...commonAxisActionProps} />
-        </Col>
+        </div>
       </Row>
     </div>
     <AxisDisplayGroup
@@ -74,17 +74,17 @@ export const BotPositionRows = (props: BotPositionRowsProps) => {
       axisStates={locationData.axis_states}
       busy={arduinoBusy}
       style={{ overflowWrap: "break-word" }}
-      label={t("Current position (mm)")} />
+      label={t("Position (mm)")} />
     {hasEncoders(props.firmwareHardware) &&
       getConfigValue(BooleanSetting.scaled_encoders) &&
       <AxisDisplayGroup
         position={locationData.scaled_encoders}
-        label={t("Scaled Encoder (mm)")} />}
+        label={t("Encoder (mm)")} />}
     {hasEncoders(props.firmwareHardware) &&
       getConfigValue(BooleanSetting.raw_encoders) &&
       <AxisDisplayGroup
         position={locationData.raw_encoders}
-        label={t("Raw Encoder data")} />}
+        label={t("Encoder (raw)")} />}
     <AxisInputBoxGroup
       position={locationData.position}
       onCommit={moveAbsolute}
@@ -100,6 +100,7 @@ export const AxisActions = (props: AxisActionsProps) => {
     dispatch, botPosition, sourceFwConfig,
   } = props;
   const className = lockedClass(locked);
+  const navigate = useNavigate();
   return <Popover position={Position.BOTTOM_RIGHT} usePortal={false}
     target={<i className="fa fa-ellipsis-v" />}
     content={<div className={"axis-actions"}>
@@ -140,7 +141,7 @@ export const AxisActions = (props: AxisActionsProps) => {
         onClick={setAxisLength({ axis, dispatch, botPosition, sourceFwConfig })}>
         {t("SET LENGTH")}
       </LockableButton>
-      <a onClick={() => push(Path.settings("axes"))}>
+      <a onClick={() => { navigate(Path.settings("axes")); }}>
         <i className="fa fa-external-link" />
         {t("Settings")}
       </a>
diff --git a/frontend/controls/move/jog_buttons.tsx b/frontend/controls/move/jog_buttons.tsx
index 8e070dfe85..cc16ff2726 100644
--- a/frontend/controls/move/jog_buttons.tsx
+++ b/frontend/controls/move/jog_buttons.tsx
@@ -152,9 +152,6 @@ export class JogButtons
               directionAxisProps={directionAxesProps.z} />
           </td>
         </tr>
-        <tr>
-          <td />
-        </tr>
       </tbody>
     </table>;
   }
diff --git a/frontend/controls/move/motor_position_plot.tsx b/frontend/controls/move/motor_position_plot.tsx
index 87adf3f8a3..e0ca4cde18 100644
--- a/frontend/controls/move/motor_position_plot.tsx
+++ b/frontend/controls/move/motor_position_plot.tsx
@@ -246,9 +246,6 @@ export const MotorPositionPlot = (props: MotorPositionPlotProps) => {
   const plotContentProps = { load, encoders };
   return <svg
     className="motor-position-plot-border"
-    style={{ marginTop: "2rem", maxHeight: "250px" }}
-    width="100%"
-    height="100%"
     viewBox={trim(`${-BORDER_WIDTH} ${yMin}
       ${HISTORY_LENGTH_SECONDS + BORDERS} ${height}`)}>
     <TitleLegend {...plotContentProps} />
diff --git a/frontend/controls/move/move_controls.tsx b/frontend/controls/move/move_controls.tsx
index 5d5383307d..d522900953 100644
--- a/frontend/controls/move/move_controls.tsx
+++ b/frontend/controls/move/move_controls.tsx
@@ -18,9 +18,9 @@ export const MoveControls = (props: MoveControlsProps) => {
   const locationData = validBotLocationData(location_data);
   const botOnline = isBotOnlineFromState(props.bot);
   const { busy, locked } = props.bot.hardware.informational_settings;
-  return <div className={"move"}>
+  return <div className={"move grid double-gap"}>
     <Popover position={Position.LEFT_TOP} className={"move-settings"}
-      target={<i className={"fa fa-gear fb-icon-button"} />}
+      target={<i className={"fa fa-gear fb-icon-button invert"} />}
       content={<MoveWidgetSettingsMenu
         dispatch={props.dispatch}
         getConfigValue={props.getConfigValue}
diff --git a/frontend/controls/peripherals/__tests__/peripheral_form_test.tsx b/frontend/controls/peripherals/__tests__/peripheral_form_test.tsx
index 2d489d7f95..c260347ec1 100644
--- a/frontend/controls/peripherals/__tests__/peripheral_form_test.tsx
+++ b/frontend/controls/peripherals/__tests__/peripheral_form_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { PeripheralForm } from "../peripheral_form";
 import { TaggedPeripheral, SpecialStatus } from "farmbot";
diff --git a/frontend/controls/peripherals/index.tsx b/frontend/controls/peripherals/index.tsx
index b9dfcb906f..fc3f7cfa5e 100644
--- a/frontend/controls/peripherals/index.tsx
+++ b/frontend/controls/peripherals/index.tsx
@@ -121,7 +121,7 @@ export class Peripherals
     const editButtonText = isEditing
       ? t("Back")
       : t("Edit");
-    return <div className={"peripherals-widget"}>
+    return <div className={"peripherals-widget grid"}>
       {!this.props.hidePinBindings &&
         <BoxTop
           threeDimensions={!!this.props.getConfigValue(
diff --git a/frontend/controls/peripherals/peripheral_form.tsx b/frontend/controls/peripherals/peripheral_form.tsx
index c8bfd5e1b6..0588d47730 100644
--- a/frontend/controls/peripherals/peripheral_form.tsx
+++ b/frontend/controls/peripherals/peripheral_form.tsx
@@ -1,36 +1,28 @@
-import * as React from "react";
+import React from "react";
 import { PeripheralFormProps } from "./interfaces";
 import { sortResourcesById } from "../../util";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { DeleteButton } from "../../ui/delete_button";
 import { NameInputBox, PinDropdown, ModeDropdown } from "../pin_form_fields";
 
 export const PeripheralForm = (props: PeripheralFormProps) =>
-  <div className="peripheral-form">
+  <div className="peripheral-form grid">
     {sortResourcesById(props.peripherals).map(peripheral =>
-      <Row key={peripheral.uuid}>
-        <Col xs={4}>
-          <NameInputBox
-            dispatch={props.dispatch}
-            value={peripheral.body.label}
-            resource={peripheral} />
-        </Col>
-        <Col xs={3}>
-          <PinDropdown
-            dispatch={props.dispatch}
-            value={peripheral.body.pin}
-            resource={peripheral} />
-        </Col>
-        <Col xs={3}>
-          <ModeDropdown
-            dispatch={props.dispatch}
-            value={peripheral.body.mode}
-            resource={peripheral} />
-        </Col>
-        <Col xs={2}>
-          <DeleteButton
-            dispatch={props.dispatch}
-            uuid={peripheral.uuid} />
-        </Col>
+      <Row key={peripheral.uuid} className="peripheral-edit-grid">
+        <NameInputBox
+          dispatch={props.dispatch}
+          value={peripheral.body.label}
+          resource={peripheral} />
+        <PinDropdown
+          dispatch={props.dispatch}
+          value={peripheral.body.pin}
+          resource={peripheral} />
+        <ModeDropdown
+          dispatch={props.dispatch}
+          value={peripheral.body.mode}
+          resource={peripheral} />
+        <DeleteButton
+          dispatch={props.dispatch}
+          uuid={peripheral.uuid} />
       </Row>)}
   </div>;
diff --git a/frontend/controls/peripherals/peripheral_list.tsx b/frontend/controls/peripherals/peripheral_list.tsx
index e56433b6d6..0766730517 100644
--- a/frontend/controls/peripherals/peripheral_list.tsx
+++ b/frontend/controls/peripherals/peripheral_list.tsx
@@ -2,40 +2,34 @@ import React from "react";
 import { pinToggle, writePin } from "../../devices/actions";
 import { PeripheralListProps } from "./interfaces";
 import { sortResourcesById } from "../../util";
-import { Row, Col, ToggleButton } from "../../ui";
+import { Row, ToggleButton } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { Slider } from "@blueprintjs/core";
 import { ANALOG } from "farmbot";
 import { lockedClass } from "../locked_class";
 
 export const PeripheralList = (props: PeripheralListProps) =>
-  <div className="peripheral-list">
+  <div className="peripheral-list grid">
     {sortResourcesById(props.peripherals).map(peripheral => {
       const toggleValue =
         (props.pins[peripheral.body.pin || -1] || { value: undefined }).value;
-      return <Row key={peripheral.uuid}>
-        <Col xs={6}>
-          <label>{peripheral.body.label}</label>
-        </Col>
-        <Col xs={2}>
-          <p>{"" + peripheral.body.pin}</p>
-        </Col>
-        <Col xs={4}>
-          {peripheral.body.mode == 1
-            ? <AnalogSlider
-              initialValue={toggleValue}
-              pin={peripheral.body.pin}
-              disabled={props.disabled || props.locked} />
-            : <ToggleButton
-              toggleValue={toggleValue}
-              toggleAction={() => {
-                peripheral.body.pin && pinToggle(peripheral.body.pin);
-              }}
-              title={t(`Toggle ${peripheral.body.label}`)}
-              customText={{ textFalse: t("off"), textTrue: t("on") }}
-              className={lockedClass(props.locked)}
-              disabled={!!props.disabled} />}
-        </Col>
+      return <Row key={peripheral.uuid} className="grid-exp-1">
+        <label>{peripheral.body.label}</label>
+        <p>{"" + peripheral.body.pin}</p>
+        {peripheral.body.mode == 1
+          ? <AnalogSlider
+            initialValue={toggleValue}
+            pin={peripheral.body.pin}
+            disabled={props.disabled || props.locked} />
+          : <ToggleButton
+            toggleValue={toggleValue}
+            toggleAction={() => {
+              peripheral.body.pin && pinToggle(peripheral.body.pin);
+            }}
+            title={t(`Toggle ${peripheral.body.label}`)}
+            customText={{ textFalse: t("off"), textTrue: t("on") }}
+            className={lockedClass(props.locked)}
+            disabled={!!props.disabled} />}
       </Row>;
     })}
   </div>;
diff --git a/frontend/controls/pinned_sequence_list.tsx b/frontend/controls/pinned_sequence_list.tsx
index 3d9f6ba109..71b1807138 100644
--- a/frontend/controls/pinned_sequence_list.tsx
+++ b/frontend/controls/pinned_sequence_list.tsx
@@ -2,34 +2,32 @@ import React from "react";
 import { t } from "../i18next_wrapper";
 import { ToolTips } from "../constants";
 import { TestButton } from "../sequences/test_button";
-import { Widget, WidgetHeader, WidgetBody, Row, Col } from "../ui";
+import { Widget, WidgetHeader, WidgetBody, Row } from "../ui";
 import { PinnedSequencesProps } from "./interfaces";
 
 export const PinnedSequences = (props: PinnedSequencesProps) => {
   const pinnedSequences = props.sequences.filter(x => x.body.pinned);
   return <div className={"pinned-sequence-list"}>
     {pinnedSequences.length > 0 &&
-      <Widget className={"pinned-sequences-widget"}>
+      <Widget>
         <WidgetHeader
           title={t("Pinned Sequences")}
           helpText={ToolTips.PINNED_SEQUENCES} />
         <WidgetBody>
-          {pinnedSequences.map(sequence =>
-            <Row key={sequence.uuid}>
-              <Col xs={8}>
+          <div className="grid">
+            {pinnedSequences.map(sequence =>
+              <Row key={sequence.uuid} className="grid-exp-1">
                 <label style={{ marginTop: 0, verticalAlign: "top" }}>
                   {sequence.body.name}
                 </label>
-              </Col>
-              <Col xs={4}>
                 <TestButton component={"pinned"}
                   syncStatus={props.syncStatus}
                   sequence={sequence}
                   resources={props.resources}
                   menuOpen={props.menuOpen}
                   dispatch={props.dispatch} />
-              </Col>
-            </Row>)}
+              </Row>)}
+          </div>
         </WidgetBody>
       </Widget>}
   </div>;
diff --git a/frontend/controls/webcam/__tests__/index_test.tsx b/frontend/controls/webcam/__tests__/index_test.tsx
index 59ad507b19..2f13903918 100644
--- a/frontend/controls/webcam/__tests__/index_test.tsx
+++ b/frontend/controls/webcam/__tests__/index_test.tsx
@@ -24,7 +24,7 @@ describe("<WebcamPanel />", () => {
     expect(wrapper.instance().state.activeMenu).toEqual("show");
     const text = allButtonText(wrapper);
     expect(text.toLowerCase()).not.toContain("view");
-    clickButton(wrapper, 2, "edit");
+    clickButton(wrapper, 0, "edit");
     expect(wrapper.instance().state.activeMenu).toEqual("edit");
   });
 
diff --git a/frontend/controls/webcam/__tests__/show_test.tsx b/frontend/controls/webcam/__tests__/show_test.tsx
index 2cce9cba38..e445abda32 100644
--- a/frontend/controls/webcam/__tests__/show_test.tsx
+++ b/frontend/controls/webcam/__tests__/show_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { fakeWebcamFeed } from "../../../__test_support__/fake_state/resources";
 import { mount } from "enzyme";
 import { Show, IndexIndicator } from "../show";
@@ -54,13 +54,13 @@ describe("<IndexIndicator/>", () => {
   it("renders index indicator: position 1", () => {
     const wrapper = mount(<IndexIndicator i={0} total={2} />);
     expect(wrapper.find("div").props().style)
-      .toEqual({ left: "calc(-10px + 0 * 50%)", width: "50%" });
+      .toEqual({ left: "calc(0 * 50%)", width: "50%" });
   });
 
   it("renders index indicator: position 2", () => {
     const wrapper = mount(<IndexIndicator i={1} total={4} />);
     expect(wrapper.find("div").props().style)
-      .toEqual({ left: "calc(-10px + 1 * 25%)", width: "25%" });
+      .toEqual({ left: "calc(1 * 25%)", width: "25%" });
   });
 
   it("doesn't render index indicator", () => {
diff --git a/frontend/controls/webcam/edit.tsx b/frontend/controls/webcam/edit.tsx
index 1c9a82e71a..635215d24f 100644
--- a/frontend/controls/webcam/edit.tsx
+++ b/frontend/controls/webcam/edit.tsx
@@ -25,8 +25,8 @@ export function Edit(props: WebcamPanelProps) {
   const unsaved = props
     .feeds
     .filter(x => x.specialStatus === SpecialStatus.DIRTY);
-  return <div className={"webcam-widget"}>
-    <div className={"webcam-rows"}>
+  return <div className={"webcam-widget grid"}>
+    <div className={"grid"}>
       {rows}
     </div>
     <div className={"webcam-buttons"}>
diff --git a/frontend/controls/webcam/key_val_edit_row.tsx b/frontend/controls/webcam/key_val_edit_row.tsx
index 72ff3e55a1..bd74875017 100644
--- a/frontend/controls/webcam/key_val_edit_row.tsx
+++ b/frontend/controls/webcam/key_val_edit_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export interface KeyValEditRowProps {
@@ -19,28 +19,22 @@ export interface KeyValEditRowProps {
 /** A row containing two textboxes and a delete button. Useful for maintaining
  * lists of things (peripherals, feeds, tools etc). */
 export function KeyValEditRow(p: KeyValEditRowProps) {
-  return <Row>
-    <Col xs={6}>
-      <input type="text"
-        name="label"
-        placeholder={p.labelPlaceholder}
-        value={p.label}
-        onChange={p.onLabelChange} />
-    </Col>
-    <Col xs={4}>
-      <input type={p.valueType}
-        name="value"
-        value={p.value}
-        placeholder={p.valuePlaceholder}
-        onChange={p.onValueChange} />
-    </Col>
-    <Col xs={2}>
-      <button
-        className="red fb-button del-button"
-        title={t("Delete")}
-        onClick={p.onClick}>
-        <i className="fa fa-times" />
-      </button>
-    </Col>
+  return <Row className="key-value-edit-row">
+    <input type="text"
+      name="label"
+      placeholder={p.labelPlaceholder}
+      value={p.label}
+      onChange={p.onLabelChange} />
+    <input type={p.valueType}
+      name="value"
+      value={p.value}
+      placeholder={p.valuePlaceholder}
+      onChange={p.onValueChange} />
+    <button
+      className="red fb-button"
+      title={t("Delete")}
+      onClick={p.onClick}>
+      <i className="fa fa-times" />
+    </button>
   </Row>;
 }
diff --git a/frontend/controls/webcam/show.tsx b/frontend/controls/webcam/show.tsx
index b2e98a63ac..69c8f1ad04 100644
--- a/frontend/controls/webcam/show.tsx
+++ b/frontend/controls/webcam/show.tsx
@@ -19,16 +19,17 @@ type State = {
 
 const FALLBACK_FEED = { name: "", url: PLACEHOLDER_FARMBOT };
 
-export function IndexIndicator(props: { i: number, total: number }): JSX.Element {
-  const percentWidth = 100 / props.total;
-  return props.total > 1
-    ? <div className="index-indicator"
-      style={{
-        width: `${percentWidth}%`,
-        left: `calc(-10px + ${props.i} * ${percentWidth}%)`
-      }} />
-    : <div className={"no-index-indicator"} />;
-}
+export const IndexIndicator =
+  (props: { i: number, total: number }): React.ReactNode => {
+    const percentWidth = 100 / props.total;
+    return props.total > 1
+      ? <div className="index-indicator"
+        style={{
+          width: `${percentWidth}%`,
+          left: `calc(${props.i} * ${percentWidth}%)`
+        }} />
+      : <div className={"no-index-indicator"} />;
+  };
 
 export class Show extends React.Component<WebcamPanelProps, State> {
   NO_FEED = t("No webcams yet. Click the edit button to add a feed URL.");
@@ -54,7 +55,22 @@ export class Show extends React.Component<WebcamPanelProps, State> {
     const flipper = new Flipper(feeds, FALLBACK_FEED, this.state.current);
     const msg = this.getMessage(flipper.current.url);
     const imageClass = msg.length > 0 ? "no-flipper-image-container" : "";
-    return <div className={"webcam-widget"}>
+    return <div className={"webcam-widget grid no-gap"}>
+      <div className="grid half-gap">
+        <div className={"webcam-buttons row grid-exp-1"}>
+          <label>{flipper.current.name}</label>
+          <Help text={ToolTips.WEBCAM} />
+          <button
+            className="fb-button gray"
+            title={t("Edit")}
+            onClick={props.onToggle}>
+            {t("Edit")}
+          </button>
+        </div>
+        <div className="index-indicator-wrapper">
+          <IndexIndicator i={this.state.current} total={feeds.length} />
+        </div>
+      </div>
       <div className="image-flipper">
         <div className={imageClass}>
           <p>{msg}</p>
@@ -77,17 +93,6 @@ export class Show extends React.Component<WebcamPanelProps, State> {
           {t("Next")}
         </button>
       </div>
-      <div className={"webcam-buttons"}>
-        <Help text={ToolTips.WEBCAM} />
-        <p>{flipper.current.name}</p>
-        <button
-          className="fb-button gray"
-          title={t("Edit")}
-          onClick={props.onToggle}>
-          {t("Edit")}
-        </button>
-        <IndexIndicator i={this.state.current} total={feeds.length} />
-      </div>
     </div>;
   }
 }
diff --git a/frontend/css/_blueprint_overrides.scss b/frontend/css/_blueprint_overrides.scss
index 8cd1d73d7f..70f8e94c2c 100644
--- a/frontend/css/_blueprint_overrides.scss
+++ b/frontend/css/_blueprint_overrides.scss
@@ -1,14 +1,20 @@
+@use "variables" as *;
+@use "sass:color";
+
 // Padding for the popups.
 .bp5-popover-content {
   z-index: 999;
   padding: 1rem;
+  color: var(--text-color) !important;
+  background: var(--main-bg) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .bp5-popover {
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-  .bp5-popover-content {
-    border-radius: 5px;
-  }
+  box-shadow: var(--box-shadow);
+  font-size: 1.3rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
   .bp5-popover-arrow {
     display: none !important;
   }
@@ -32,26 +38,50 @@
   overflow-y: scroll;
 }
 
+.bp5-input {
+  box-shadow: none;
+  border-radius: 0;
+}
+
 .bp5-input-group {
+  border-bottom: 1.5px solid var(--border-color);
   .bp5-icon {
     top: 0.6rem;
   }
 }
 
+.bp5-popover.help {
+  .bp5-popover-content {
+    width: 32rem;
+  }
+}
+
+.bp5-slider {
+  margin: 0 2.5rem 0 1.5rem;
+  width: initial;
+}
+
+.bp5-slider-progress {
+  background: var(--secondary-bg);
+}
+
+.bp5-control {
+  margin: 0;
+}
+
 .bp5-button:not(.bp5-minimal) {
   font-weight: normal;
   text-transform: none;
-  background: $white;
-  border-radius: 0;
+  border-radius: 3px;
   font-size: 1.2rem !important;
   color: $black !important;
   height: 27px !important;
   width: 100% !important;
   border: 0 !important;
-  box-shadow: 0px 0px 10px #ddd !important;
-  background: $white !important;
+  box-shadow: none !important;
+  background: $translucent9_white !important;
   &:hover {
-    background: $white !important;
+    background: $translucent9_white !important;
   }
   :first-child {
     display: inline-block;
@@ -59,15 +89,7 @@
     width: 73%;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding-right: 1rem;
-  }
-}
-
-.bp5-popover-wrapper {
-  display: block;
-  position: relative;
-  * {
-    text-align: left;
+    padding-right: 1.5rem;
   }
 }
 
diff --git a/frontend/css/_index.scss b/frontend/css/_index.scss
index c120a66489..d564ca4285 100644
--- a/frontend/css/_index.scss
+++ b/frontend/css/_index.scss
@@ -1,38 +1,58 @@
-@use "sass:color";
-// Blueprint
-@import "~/node_modules/@blueprintjs/core/lib/css/blueprint.css";
-@import "~/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css";
-// Partials
-@import "animations";
-@import "colors";
-@import "fonts";
-@import "numbers";
 // Global
-@import "global";
-@import "mobile";
-@import "blueprint_overrides";
-// Designer
-@import "farm_designer/farm_designer_panels";
-@import "farm_designer/farm_designer";
-@import "farm_designer/farm_events";
-// Sequences and Regimens
-@import "sequences";
-@import "regimens";
-// App loading animations
-@import "spinner";
-@import "loading_plant";
+@use "global/imports";
+@use "global/fonts";
+@use "global/global";
+@use "global/buttons";
+@use "global/inputs";
+@use "global/labels";
+@use "global/saucers";
+@use "global/sliders";
+@use "global/tables";
+@use "global/tooltips";
+// Animations
+@use "animations/animations";
+@use "animations/spinner";
+@use "animations/loading_plant";
+// App
+@use "app/navbar";
+@use "app/static_pages";
+@use "app/status_ticker";
+@use "app/toastr";
 // Components
-@import "buttons";
-@import "image_flipper";
-@import "inputs";
-@import "steps"; // must be imported after "inputs"
-@import "labels";
-@import "navbar";
-@import "static_pages";
-@import "status_ticker";
-@import "tables";
-@import "toastr";
-@import "tooltips";
-@import "widget_move";
-@import "widgets";
-@import "scrollbar";
+@use "components/go_button";
+@use "components/image_flipper";
+@use "components/widgets";
+// Farm Designer
+@use "farm_designer/farm_designer_panels";
+@use "farm_designer/farm_designer";
+@use "farm_designer/profile_viewer";
+@use "farm_designer/three_d_garden";
+// Panels
+@use "panels/connectivity";
+@use "panels/controls";
+@use "panels/curves";
+@use "panels/events";
+@use "panels/farmware";
+@use "panels/gardens";
+@use "panels/help";
+@use "panels/jobs";
+@use "panels/location_info";
+@use "panels/logs";
+@use "panels/messages";
+@use "panels/peripherals";
+@use "panels/photos";
+@use "panels/plants";
+@use "panels/points";
+@use "panels/regimens";
+@use "panels/select";
+@use "panels/sensors";
+@use "panels/sequence_steps";
+@use "panels/sequences";
+@use "panels/settings";
+@use "panels/setup_wizard";
+@use "panels/tools";
+@use "panels/webcams";
+// Other
+@use "mobile";
+@use "not_bootstrap";
+@use "blueprint_overrides";
diff --git a/frontend/css/_mobile.scss b/frontend/css/_mobile.scss
index 25778ca031..0bc51c4d75 100644
--- a/frontend/css/_mobile.scss
+++ b/frontend/css/_mobile.scss
@@ -1,3 +1,6 @@
+@use "variables" as *;
+@use "sass:color";
+
 @media screen and (max-width: 1075px) {
   .all-content-wrapper {
     padding: 11rem 0 0;
diff --git a/frontend/css/_not_bootstrap.scss b/frontend/css/_not_bootstrap.scss
new file mode 100644
index 0000000000..4e568b07a0
--- /dev/null
+++ b/frontend/css/_not_bootstrap.scss
@@ -0,0 +1,129 @@
+@use "variables" as *;
+@use "sass:color";
+
+.grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.row {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1rem;
+  align-items: center;
+  // background: #f6ff8d;
+  .fb-button {
+    margin: 0;
+  }
+}
+
+.half-gap {
+  gap: 0.5rem;
+}
+
+.double-gap {
+  gap: 2rem;
+}
+
+.no-gap {
+  gap: 0;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+.grid-exp-1 {
+  grid-template-columns: 1fr;
+}
+
+.grid-exp-2 {
+  grid-template-columns: auto 1fr;
+}
+
+.grid-exp-3 {
+  grid-template-columns: auto auto 1fr;
+}
+
+.grid-2-col {
+  grid-template-columns: 1fr 1fr;
+}
+
+.grid-3-col {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.grid-4-col {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.key-value-edit-row {
+  grid-template-columns: 1fr 1fr auto;
+}
+
+.speed-grid {
+  grid-template-columns: 25% 1fr;
+  align-items: start;
+}
+
+.change-ownership-grid {
+  grid-auto-flow: unset;
+  grid-template-columns: auto 1fr;
+  row-gap: 0.25rem;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+.advanced-group-criteria {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto;
+  gap: 1rem;
+}
+
+.weed-detection-grid {
+  gap: 3rem;
+}
+
+.panel-title {
+  display: grid;
+  font-family: 'Inknut Antiqua', serif;
+  font-weight: bold;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+}
+
+.add-point-grid {
+  grid-template-columns: 2fr 1fr 1fr 1fr auto;
+}
+
+.criteria-operators-grid {
+  gap: 0;
+  text-align: center;
+}
+
+.grid-planting-grid {
+  grid-template-columns: 1fr 50px 50px;
+}
+
+.axes-grid {
+  grid-template-columns: 22% 1fr;
+}
+
+.axes-grid-header {
+  text-align: center;
+  grid-template-columns: 24% 1fr 1fr 1fr;
+}
+
+.mcu-inputs, .calibration-row-axes {
+  justify-items: center;
+}
+
+.z-setting-grid, .single-setting-grid {
+  grid-template-columns: 1fr 23.6%;
+  button {
+    justify-self: center;
+  }
+}
diff --git a/frontend/css/animations.scss b/frontend/css/animations/animations.scss
similarity index 84%
rename from frontend/css/animations.scss
rename to frontend/css/animations/animations.scss
index 44ec72f457..0cf9218299 100644
--- a/frontend/css/animations.scss
+++ b/frontend/css/animations/animations.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "sass:color";
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -85,7 +88,7 @@
 
 @keyframes flash {
   0% {
-    text-shadow: white 0px 0px 10px;
+    text-shadow: $white 0px 0px 10px;
   }
   100% {
     text-shadow: none;
@@ -130,3 +133,21 @@
     opacity: 0;
   }
 }
+
+@keyframes panel-show {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes panel-hide {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-120%);
+  }
+}
diff --git a/frontend/css/loading_plant.scss b/frontend/css/animations/loading_plant.scss
similarity index 96%
rename from frontend/css/loading_plant.scss
rename to frontend/css/animations/loading_plant.scss
index 2b9032e7f7..2bb3054ed0 100644
--- a/frontend/css/loading_plant.scss
+++ b/frontend/css/animations/loading_plant.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "sass:color";
+
 $duration: 2;
 .loading-plant-div-container {
   display: flex;
@@ -107,6 +110,7 @@ $duration: 2;
 }
 
 .loading-plant-text {
+  fill: $off_white;
   opacity: 1;
 }
 
diff --git a/frontend/css/spinner.scss b/frontend/css/animations/spinner.scss
similarity index 95%
rename from frontend/css/spinner.scss
rename to frontend/css/animations/spinner.scss
index a5e02ccf29..03d20bdb90 100644
--- a/frontend/css/spinner.scss
+++ b/frontend/css/animations/spinner.scss
@@ -1,6 +1,10 @@
+@use "../variables" as *;
+@use "sass:color";
+
 $offset: 187;
 $quarterOffset: 46.75;
 $duration: 1.3s;
+
 .spinner-container {
   display: flex;
   position: fixed;
diff --git a/frontend/css/navbar.scss b/frontend/css/app/navbar.scss
similarity index 81%
rename from frontend/css/navbar.scss
rename to frontend/css/app/navbar.scss
index 40dab303f7..f89c1e6845 100644
--- a/frontend/css/navbar.scss
+++ b/frontend/css/app/navbar.scss
@@ -1,15 +1,17 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .nav-wrapper {
   position: fixed;
   left: 0;
   right: 0;
   z-index: 99;
   height: 8.9rem;
-  background: $dark_gray;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
+  background: linear-gradient(0deg, transparent, $translucent2 30%, $black);
 }
 
 nav {
-  margin: 3.4rem auto 0;
+  margin-top: 3rem;
   button {
     margin: 1.8rem 1.8rem 0 0;
     font-size: 1.3rem !important;
@@ -83,7 +85,7 @@ nav {
     a {
       display: inline-block;
       position: relative;
-      height: 5.5rem;
+      height: 5rem;
       font-size: 1.2rem;
       white-space: nowrap;
       padding: 1.5rem 0.5rem;
@@ -104,13 +106,10 @@ nav {
       &.active {
         font-weight: bold;
         color: $white;
+        border-bottom: 3px solid $white;
         img {
           opacity: 1;
         }
-        &:after {
-          transition: all 0.4s ease;
-          transform: translateY(-3px);
-        }
       }
       &.beacon {
         &.active {
@@ -119,24 +118,6 @@ nav {
           }
         }
       }
-      &:before {
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        height: 3px;
-        background: $white;
-      }
-      &:after {
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        height: 3px;
-        background: $dark_gray;
-      }
       div .saucer, .external-icon {
         display: inline-flex;
         margin-left: 1rem;
@@ -169,7 +150,8 @@ nav {
   .nav-coordinates,
   .jobs-button,
   .setup-button,
-  .connectivity-button {
+  .connectivity-button,
+  .nav-name {
     display: flex;
     position: relative;
     gap: 1rem;
@@ -186,6 +168,7 @@ nav {
     line-height: 3rem;
     color: $light_gray;
     background: $medium_gray;
+    user-select: none;
     &.hover,
     &:hover {
       color: $white;
@@ -273,21 +256,7 @@ nav {
     }
   }
   .nav-name {
-    padding: 0.75rem;
-    border-radius: 5px;
     margin-top: -0.75rem;
-    font-weight: normal;
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-    &:after{
-      content: attr(data-title);
-      display: block;
-      font-weight: bold;
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
   }
 }
 
@@ -306,10 +275,12 @@ nav {
   .bp5-popover-content {
     position: relative;
     width: 22rem;
-    background: $dark_gray;
+    background: var(--main-bg);
+    backdrop-filter: blur(10px);
     padding: 0;
     font-size: 1.2rem;
     letter-spacing: 1.2px;
+    color: var(--text-color);
     i {
       margin-right: 0.8rem;
     }
@@ -317,32 +288,31 @@ nav {
       display: inline-block;
       width: 100%;
       text-transform: uppercase;
-      color: $off_white;
       padding: 0.5rem 1rem;
     }
     img {
       margin-right: 0.8rem;
-      margin-left: -0.1rem;
-      margin-bottom: 0.25rem;
-      filter: invert(1);
     }
     .app-version {
-      background: $dark_gray;
-      color: $white;
-      padding: 0.5rem 0 0 1rem;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
+      padding: 0.5rem 1rem 0;
+      margin-top: 0.5rem;
+      border-top: 1px solid var(--border-color);
       label {
-        color: $white;
+        font-weight: normal;
       }
       a {
-        width: auto;
-        color: $white;
+        text-align: right;
+        border-radius: 0.5rem;
       }
-      p {
-        display: inline;
-        color: $gray;
-        font-size: 1.2rem;
+    }
+    .dark-mode-toggle {
+      padding: 0.5rem 1rem;
+      line-height: 1.8rem;
+      label {
+        font-weight: normal;
+      }
+      .fb-button {
+        margin: 0;
       }
     }
   }
@@ -361,6 +331,16 @@ nav {
   }
 }
 
+body:has(.app.dark) {
+  .menu-popover {
+    .bp5-popover-content {
+      img {
+        filter: invert(0.75);
+      }
+    }
+  }
+}
+
 .mobile-menu {
   padding: 0;
   .links {
@@ -370,13 +350,9 @@ nav {
     overflow-x: hidden;
     padding-bottom: 3rem;
     &::-webkit-scrollbar {
-      background-color: $medium_gray;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: $medium_gray;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: $light_gray;
+      display: none !important;
+      width: 0px !important;
+      background-color: transparent !important;
     }
   }
   .nav-links {
@@ -412,6 +388,22 @@ nav {
   }
 }
 
+.nav-additional-menu {
+  padding: 0.5rem 0;
+  a:hover {
+    background: var(--secondary-bg);
+  }
+}
+
+.read-only-icon {
+  margin: 9px 0px 0px 9px;
+  float: right;
+  box-sizing: inherit;
+  .fa-pencil {
+    color: $white;
+  }
+}
+
 @media screen and (max-width: 1075px) {
   .top-menu-container .nav-links {
     display: none !important;
diff --git a/frontend/css/app/static_pages.scss b/frontend/css/app/static_pages.scss
new file mode 100644
index 0000000000..6896423708
--- /dev/null
+++ b/frontend/css/app/static_pages.scss
@@ -0,0 +1,362 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.static-page {
+  min-height: 100vh;
+  max-height: 100%;
+  background: url(/public/app-resources/img/plant-icon-background.png), linear-gradient(#00b685, #003f53);
+  background-size: 600px;
+  padding: 8rem 2rem;
+  h1,
+  h2 {
+    font-family: "Cabin", Arial, Helvetica, sans-serif !important;
+    font-weight: 100 !important;
+    color: $white;
+    text-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1);
+  }
+  h1 {
+    font-family: "Inknut Antiqua" !important;
+    font-weight: bold !important;
+    font-size: 3.4rem;
+    line-height: 3.6rem;
+  }
+  h2 {
+    margin: 0;
+    font-size: 2.2rem;
+  }
+  form {
+    display: grid;
+    gap: 1rem;
+  }
+  input {
+    font-family: revert;
+    font-size: revert;
+  }
+  .all-content-wrapper {
+    max-width: 60rem;
+  }
+  .widget-wrapper {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    margin: 0 auto;
+    max-width: 40rem;
+    text-align: start;
+    width: 40rem;
+  }
+  .or-divider {
+    color: $white;
+    display: flex;
+    font-style: italic;
+    gap: 1rem;
+    justify-self: center;
+    text-align: center;
+    width: 10rem;
+    hr {
+      width: 100%;
+      border: 1.5px solid rgb(255 255 255 / 50%)
+    }
+  }
+  .front-page-container {
+    display: grid;
+    grid-auto-flow: row;
+    gap: 3rem;
+    justify-items: stretch;
+  }
+  .forgot-password-login-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+    align-items: center;
+  }
+  .forgot-password {
+    display: inline-block;
+    color: $blue;
+  }
+  .create-account-button, .reset-password-button {
+    justify-self: right;
+  }
+  input[type="checkbox"] {
+    float: left;
+    margin-right: 0.5rem;
+    margin-top: 0.25rem;
+  }
+  a:link {
+    font-weight: 300;
+    color: $dark_gray;
+  }
+  a:visited {
+    color: $medium_gray;
+  }
+  a:hover {
+    font-weight: 500;
+  }
+  a:active {
+    color: $medium_gray;
+    font-weight: 500;
+  }
+  .fa-gear {
+    float: right;
+  }
+  .fa-external-link {
+    margin-left: 1rem;
+    margin-bottom: 0.5rem;
+  }
+  .pull-right {
+    justify-self: right;
+  }
+}
+
+.os-download-page {
+  table {
+    a {
+      text-transform: none;
+    }
+  }
+}
+
+.featured-sequences-page,
+.os-download-page {
+  text-align: center;
+  .all-content-wrapper {
+    padding-top: 0 !important;
+    min-height: 30rem;
+  }
+  h1 {
+    margin-top: 5rem;
+    font-size: 2rem !important;
+    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1) !important;
+  }
+  p {
+    margin: auto;
+    width: 70%;
+    color: $off_white;
+  }
+  a {
+    white-space: nowrap;
+    font-weight: bold !important;
+    color: $off_white !important;
+    &:hover {
+      color: $white !important;
+    }
+    &:visited {
+      color: $off_white;
+    }
+    &:link {
+      color: $off_white;
+    }
+    &:active {
+      color: $white !important;
+    }
+  }
+  table {
+    font-size: 1.1rem;
+    color: $gray;
+    text-align: left;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    border-radius: 2rem;
+    thead,
+    tr:not(:last-child) {
+      border-bottom: 2px solid $translucent2_white;
+    }
+    th {
+      padding: 1rem 1.5rem;
+    }
+    td {
+      padding: 1rem 1.5rem;
+      white-space: pre;
+      span {
+        display: block;
+        white-space: nowrap;
+      }
+    }
+  }
+  button {
+    cursor: pointer;
+  }
+  .wizard-btn {
+    margin: 1rem;
+    float: none;
+    color: $white;
+    margin-top: 7rem;
+  }
+  .os-download-wizard {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 2rem;
+    backdrop-filter: blur(10px);
+    padding: 2rem;
+    .transparent-button {
+      margin: 1rem;
+      float: none;
+      color: $white;
+      height: 5rem;
+      width: 15rem;
+    }
+    .back {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+      height: unset;
+      width: unset;
+    }
+    .start {
+      height: unset;
+      width: unset;
+    }
+    p {
+      font-size: 1.4rem;
+    }
+    .os-download-wizard-note {
+      font-size: 1.4rem;
+      font-weight: bold;
+    }
+    .os-download-wizard-run {
+      img {
+        width: 100%;
+        border-radius: 1rem;
+      }
+    }
+    .buttons {
+      button {
+        border-radius: 0;
+        padding: 0;
+        border: 3px solid $white;
+        img {
+          width: 100%;
+        }
+        &:hover {
+          border-color: $off_white;
+          .btn-text {
+            background: color.adjust($cyan, $lightness: -10%);
+          }
+        }
+      }
+    }
+    .download-wizard-button {
+      .os-wizard-content-button {
+        border-radius: 8px;
+        .btn-text {
+          background: $cyan;
+          border-radius: 5px 5px 0 0;
+          .btn-title {
+            font-family: "Inknut Antiqua";
+            font-weight: bold;
+            margin-bottom: 0.5rem !important;
+            padding-top: 0.75rem;
+            font-size: 1.7rem;
+          }
+          .os-download-wizard-btn-label {
+            width: 75%;
+            font-size: 1.2rem;
+            padding-bottom: 0.5rem;
+            line-height: 1.5rem;
+          }
+        }
+        img {
+          border-radius: 0 0 5px 5px;
+        }
+        &.white {
+          background: $white !important;
+          border-color: $off_white;
+          .btn-text {
+            background: $off_white;
+            .btn-title {
+              color: $dark_gray;
+            }
+          }
+          &:hover {
+            background: $off_white !important;
+            border-color: $white;
+            .btn-text {
+              background: $white;
+            }
+          }
+        }
+        &.black {
+          background: $white !important;
+          border-color: $dark_gray;
+          .btn-text {
+            background: $dark_gray;
+            .btn-title {
+              color: $white;
+            }
+          }
+          &:hover {
+            background: $off_white !important;
+            border-color: $darker_gray;
+            .btn-text {
+              background: $darker_gray;
+            }
+          }
+        }
+      }
+    }
+    .download-link {
+      justify-items: center;
+      a {
+        text-transform: none;
+        height: unset;
+      }
+    }
+    .buttons-with-image {
+      display: flex;
+      .buttons {
+        margin: auto;
+        margin-right: 0;
+      }
+      img {
+        margin: auto;
+        margin-left: 3rem;
+        width: 12rem;
+        border-radius: 5px;
+        border: 3px solid $lighter_gray;
+      }
+    }
+  }
+}
+
+.static-page {
+  &.os-download-page {
+    .os-download-description {
+      width: 80%;
+    }
+    p {
+      font-size: 1.5rem;
+      line-height: 2rem;
+    }
+    h1 {
+      margin: 0;
+      font-family: "Inknut Antiqua" !important;
+      font-weight: 600 !important;
+    }
+  }
+}
+
+.featured-sequences-page {
+  summary {
+    color: $light_gray;
+    cursor: pointer;
+  }
+  .sequence-description {
+    margin-left: -1.5rem;
+    margin-right: -5rem;
+  }
+  .markdown {
+    p {
+      color: $white !important;
+    }
+  }
+  details {
+    max-width: calc(min(70vw, 370px));
+  }
+  summary {
+    margin-bottom: 0.5rem;
+  }
+  h1,
+  h2 {
+    margin-bottom: 0;
+  }
+  li,
+  p {
+    white-space: pre-wrap;
+  }
+}
diff --git a/frontend/css/status_ticker.scss b/frontend/css/app/status_ticker.scss
similarity index 82%
rename from frontend/css/status_ticker.scss
rename to frontend/css/app/status_ticker.scss
index f8049a0ffb..bf5d8524a0 100644
--- a/frontend/css/status_ticker.scss
+++ b/frontend/css/app/status_ticker.scss
@@ -1,12 +1,15 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .ticker-list {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 3;
-  background: $black;
+  background: $dark_bg;
   opacity: 0.9;
-  min-height: 3.25rem;
+  min-height: 3rem;
   cursor: pointer;
   label {
     cursor: pointer;
@@ -52,14 +55,8 @@
 }
 
 .status-ticker-wrapper {
-  padding: 0.6rem 1rem 0.4rem 1rem;
-  transition: all 0.2s ease;
-  &:hover {
-    background: rgba(255, 255, 255, 0.2);
-  }
+  padding: 0.7rem 1rem;
   .saucer {
-    margin: 0.2rem 0.6rem 0rem 0;
-    float: left;
     width: 1.6rem;
     height: 1.6rem;
     border-radius: 50%;
@@ -70,6 +67,7 @@
 .first-ticker {
   .markdown p {
     font-weight: 600;
+    display: block;
     code {
       background: $dark_gray;
     }
@@ -79,8 +77,6 @@
 .first-ticker {
   height: 3rem;
   overflow: hidden;
-  padding-bottom: 0.5rem;
-  background: $black;
   .status-ticker-created-at {
     font-size: 1.2rem;
     font-weight: 600;
@@ -108,13 +104,6 @@
     -webkit-animation: flash 1.5s ease-in;
     animation: flash 1.5s ease-in;
   }
-  &.prefix {
-    .markdown {
-      p {
-        width: calc(100% - 21rem);
-      }
-    }
-  }
 }
 
 .logs-page-link {
diff --git a/frontend/css/toastr.scss b/frontend/css/app/toastr.scss
similarity index 68%
rename from frontend/css/toastr.scss
rename to frontend/css/app/toastr.scss
index b1d7725589..742de0bebe 100644
--- a/frontend/css/toastr.scss
+++ b/frontend/css/app/toastr.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .toast-container {
   display: flex;
   position: fixed;
@@ -11,7 +14,7 @@
 .toast {
   position: relative;
   width: 100%;
-  box-shadow: 0px 1px 4px #555;
+  box-shadow: 0px 0 1rem $translucent2;
   pointer-events: all;
   padding: 1.8rem;
   cursor: pointer;
@@ -24,7 +27,7 @@
   font-size: 1.2rem;
   opacity: 0;
   border: none;
-  border-radius: 3px;
+  border-radius: 0.5rem;
   -webkit-font-smoothing: antialiased;
   transition: all 0.2s ease;
   &:hover {
@@ -91,6 +94,7 @@
   pointer-events: none;
   font-size: 1.6rem;
   font-weight: bold;
+  font-family: 'Inknut Antiqua', serif;
 }
 
 .toast-message {
@@ -114,6 +118,12 @@
   height: 1.6rem;
   overflow: hidden;
   transform: rotate(180deg);
+  .fb-icon-button {
+    color: $off_white !important;
+    &.disabled {
+      opacity: 0.25;
+    }
+  }
 }
 
 .toast-loader-left,
@@ -169,3 +179,55 @@
     opacity: 1;
   }
 }
+
+.tour-toast {
+  cursor: default !important;
+  .toast-title,
+  .toast-message {
+    color: $white !important;
+    i {
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+    }
+    .extra-content {
+      margin-top: 1rem;
+    }
+  }
+  .toast-loader {
+    display: flex;
+    width: unset;
+    height: unset;
+    transform: none;
+    .previous,
+    .next {
+      &.disabled {
+        pointer-events: none;
+        color: $dark_gray;
+      }
+    }
+  }
+  .toast-message {
+    margin-top: 1.5rem;
+  }
+  .toast-title,
+  .message-contents {
+    transition: height 0.4s, opacity 0.2s;
+  }
+  .message-contents {
+    &.height-hidden {
+      position: absolute;
+      visibility: hidden;
+      padding-right: 2rem;
+    }
+  }
+  .progress-indicator {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 0.5rem;
+    background: $white;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 5px;
+    transition: width 0.4s 0.2s, border-bottom-right-radius 0.4s 0.2s;
+  }
+}
diff --git a/frontend/css/components/go_button.scss b/frontend/css/components/go_button.scss
new file mode 100644
index 0000000000..d31a31c242
--- /dev/null
+++ b/frontend/css/components/go_button.scss
@@ -0,0 +1,80 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.go-button-axes-wrapper {
+  justify-content: left;
+  button {
+    margin: 0;
+    float: none;
+  }
+  .go-button-axes-text {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    p {
+      font-weight: bold;
+      color: $off_white;
+      margin: 0 !important;
+    }
+  }
+  .go-button-axes-dropdown {
+    border-left: 1px solid $dark_gray!important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    line-height: 1.5rem;
+    &.pseudo-disabled {
+      border-left: 1px solid $gray;
+    }
+  }
+}
+
+.go-button-axes-popover {
+  .bp5-popover-content {
+    color: $off_white;
+    background: $dark_gray;
+    .go-axes {
+      display: grid;
+      gap: 0.75rem;
+      button {
+        margin: 0;
+        padding: 0.5rem 1rem;
+        float: none;
+        &.x,
+        &.y,
+        &.z {
+          grid-row: 1;
+          grid-column: span 4;
+        }
+        &.xy,
+        &.xyz {
+          grid-row: 2;
+          grid-column: span 6;
+        }
+      }
+      a,
+      p {
+        display: inline;
+        color: $off_white;
+        font-size: 1.2rem;
+        text-decoration: none !important;
+        font-weight: normal;
+      }
+      a {
+        grid-column: span 12;
+        i {
+          margin-left: 0.5rem;
+        }
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+      input {
+        float: right;
+        box-shadow: none;
+        cursor: pointer;
+      }
+      .save-as-default-wrapper {
+        grid-column: span 12;
+      }
+    }
+  }
+}
diff --git a/frontend/css/image_flipper.scss b/frontend/css/components/image_flipper.scss
similarity index 64%
rename from frontend/css/image_flipper.scss
rename to frontend/css/components/image_flipper.scss
index 1c76aeaba8..6a9684e4ae 100644
--- a/frontend/css/image_flipper.scss
+++ b/frontend/css/components/image_flipper.scss
@@ -1,25 +1,25 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .image-flipper {
   position: relative;
-  margin-top: 1rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
 }
 
 .bp5-overlay {
   .image-flipper {
     z-index: 20;
-    margin: auto;
-    width: fit-content;
-    margin-top: 3%;
+    width: 100%;
+    display: grid;
+    justify-content: center;
+    align-content: center;
     .no-flipper-image-container,
     .flipper-image {
-      height: 80vh;
-      width: 80vw;
       text-align: center;
       .image-flipper-image,
       svg {
-        height: 100%;
-        max-width: unset;
-        max-height: unset;
-        min-height: unset;
+        filter: none;
       }
     }
     .image-flipper-left,
@@ -30,7 +30,7 @@
       }
     }
     .no-flipper-image-container {
-      background: $black;
+      background: var(--main-bg);
     }
     .placeholder {
       opacity: 1 !important;
@@ -41,6 +41,14 @@
   }
 }
 
+body:has(.app.dark) {
+  .image-flipper-image {
+    &.placeholder {
+      filter: invert(1);
+    }
+  }
+}
+
 .desktop-only {
   @media screen and (max-width: 767px) {
     display: none;
@@ -52,25 +60,26 @@
 }
 
 .image-flipper-image {
+  display: block;
   margin: auto;
-  max-width: 100%;
   max-height: 650px;
+  max-width: 100%;
   min-height: 200px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
 }
 
 .image-flipper-left {
-  left: -5px;
+  left: 0;
   background: linear-gradient(to left, transparent, $translucent3);
+  box-shadow: none !important;
   &:hover {
     background: linear-gradient(to left, transparent, $translucent4);
   }
 }
 
 .image-flipper-right {
-  right: -5px;
+  right: 0;
   background: linear-gradient(to right, transparent, $translucent3);
+  box-shadow: none !important;
   &:hover {
     background: linear-gradient(to right, transparent, $translucent4);
   }
@@ -78,11 +87,12 @@
 
 .image-flipper-left,
 .image-flipper-right {
+  bottom: 0;
+  margin: 0;
+  padding: 0;
   position: absolute;
-  top: -5px;
-  bottom: -5px;
+  top: 0;
   width: 4rem;
-  text-align: center;
   i {
     color: $white;
     font-size: 2rem;
@@ -91,9 +101,9 @@
 }
 
 .no-flipper-image-container {
-  background: $panel_light_gray;
   img {
-    opacity: 0.4;
+    border-radius: 3px;
+    overflow: hidden;
   }
   p {
     position: absolute;
@@ -109,17 +119,25 @@
   }
 }
 
+body:has(.app.darl) {
+  .no-flipper-image-container {
+    img {
+      filter: invert(1);
+    }
+  }
+}
+
 .photos-footer {
   display: flex;
   position: relative;
   justify-content: space-between;
-  background: $black;
+  background: var(--secondary-bg);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   height: 3.5rem;
   padding-top: 0.5rem;
   .footer-text {
-    margin-top: -1rem;
+    margin-top: -0.5rem;
   }
   label {
     font-weight: normal;
@@ -131,16 +149,6 @@
   .bp5-popover-wrapper {
     display: inline;
   }
-  i {
-    color: $white;
-  }
-  .gradient {
-    position: absolute;
-    top: -3rem;
-    width: 100%;
-    height: 3rem;
-    background: linear-gradient(to top, $black 0%, transparent 30%);
-  }
 }
 
 .image-show-menu-target {
@@ -167,7 +175,6 @@
   }
   .shown-in-map-details {
     padding: 1rem;
-    background: $lighter_gray;
     &.shown {
       cursor: pointer;
       &:hover {
@@ -274,14 +281,11 @@
     margin-left: 1rem;
     margin-right: 0.5rem;
   }
-  p {
-    color: $off_white !important;
-  }
 }
 
 .image-created-at {
-  color: $white;
   margin-left: 1rem;
+  line-height: 1.25rem;
   span {
     white-space: nowrap;
   }
@@ -292,16 +296,6 @@
 }
 
 .photos {
-  .new-photo-button {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    p {
-      float: left;
-      margin-top: 0.75rem;
-      margin-right: 1rem;
-    }
-  }
   .photo-action-buttons {
     display: flex;
     gap: 1rem;
@@ -337,110 +331,16 @@
   }
 }
 
-.camera-calibration,
-.weed-detector {
-  .farmware-button {
-    position: relative;
-    top: 0rem;
-    z-index: 9;
-    height: 0px;
-    float: right;
-  }
-  .simple-camera-calibration-checkbox {
-    display: inline-block;
-    p {
-      display: inline-block;
-      margin: 0;
-      margin-top: 5rem;
-    }
-    svg {
-      position: absolute;
-      top: 0;
-      background: $black;
-    }
-    input {
-      float: left;
-      margin-right: 1rem;
-    }
-  }
-  .image-workspace {
-    .fb-button.green {
-      margin-top: 1rem;
-    }
-    .bp5-slider {
-      width: 95%;
-      margin-left: 1rem;
-    }
-  }
-  p {
-    margin: 1.5rem;
-    font-size: 1.2rem;
-    font-style: italic;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-    &.input-error-wrapper {
-      display: block;
-    }
-  }
-  .filter-search {
-    .bp5-popover-wrapper {
-      display: inline-block;
-      margin-left: 0;
-    }
-  }
-  .camera-calibration-config {
-    label {
-      display: inline;
-    }
-    .camera-config-number-box {
-      margin-top: 1.5rem;
-      .input {
-        float: right;
-        margin-top: -0.25rem;
-      }
-    }
-    .dropdown-camera-calibration-config {
-      margin-top: 1.5rem;
-      .filter-search {
-        float: right;
-        margin-top: -0.25rem;
-        min-width: 16.5rem;
-      }
-      &.narrow {
-        .filter-search {
-          min-width: 8rem;
-        }
-      }
-    }
-  }
-}
-
-.boolean-camera-calibration-config {
-  input[type=checkbox] {
-    display: block;
-    float: left;
-    margin-right: 1rem;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin: 0.5rem;
-  }
-}
-
 .farmware-button {
-  div {
-    float: right;
-  }
   p {
-    float: right;
-    margin-top: 0.75rem;
-    margin-right: 1rem;
     color: $medium_gray;
   }
 }
 
+.index-indicator-wrapper {
+  position: relative;
+}
+
 .index-indicator {
   position: absolute;
   bottom: 0;
diff --git a/frontend/css/widgets.scss b/frontend/css/components/widgets.scss
similarity index 88%
rename from frontend/css/widgets.scss
rename to frontend/css/components/widgets.scss
index 3ed37a33e9..10f4bbfa1e 100644
--- a/frontend/css/widgets.scss
+++ b/frontend/css/components/widgets.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "sass:color";
+
 /**
  * Styling for the <Widget /> component.
  * Example output (w = widget):
@@ -17,19 +20,22 @@
 
 .widget-wrapper {
   position: relative;
-  box-shadow: 0px 0px 10px $gray;
-  margin-bottom: 3rem;
+  box-shadow: 0px 0px 1rem $translucent2;
+  border-radius: 0.5rem;
+  overflow: hidden;
 }
 
 .widget-header {
-  min-height: 3.3rem;
   background: $dark_gray;
   letter-spacing: .05rem;
-  padding: .75rem 1rem;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  padding: 0 1.25rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 1rem;
+  align-items: center;
+  height: 3.5rem;
   >*:not(h5):not(.title-help-icon):not(.title-help) {
-    margin-left: 1rem;
+    margin: 0;
   }
   .title-help{
     display: inline;
@@ -87,6 +93,7 @@
     display: inline;
     color: $gray;
     font-size: 1.2rem;
+    margin: 0;
     text-transform: uppercase;
   }
   .bp5-popover-wrapper {
@@ -108,11 +115,6 @@
   border-color: $light_gray;
   color: $dark_gray;
   padding: 1.25rem;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  >.row:not(:first-of-type) {
-    margin-top: 1rem;
-  }
 }
 
 .widget-footer {
diff --git a/frontend/css/farm_designer/farm_designer.scss b/frontend/css/farm_designer/farm_designer.scss
index 8b92083898..a9f5649faf 100644
--- a/frontend/css/farm_designer/farm_designer.scss
+++ b/frontend/css/farm_designer/farm_designer.scss
@@ -1,14 +1,16 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .farm-designer {
   position: relative;
   height: 100vh;
   overflow: scroll;
+  scrollbar-width: none;
   .garden-map-legend {
     @media screen and (max-width: $mobile_max_width) {
-      &.panel-open {
-        display: none;
-      }
+      &.panel-open,
       &.short-panel {
-        top: 35rem;
+        display: none;
       }
       &.panel-closed-mobile,
       &.panel-closed {
@@ -21,18 +23,21 @@
 .farm-designer-map {
   display: inline-block;
   min-width: 100%;
-  padding: 11rem 2rem 2rem 2rem; // at zoom = 1.0: 110px 20px 20px 20px
+  padding: 9rem 2rem 2rem 2rem;
   height: 100%;
   overflow: visible;
-  transition: 0.2s ease;
+  transition: 0.3s ease;
   &.panel-open {
-    padding: 11rem 2rem 2rem 46.8rem; // at zoom = 1.0: 110px 20px 20px 468px
+    padding: 9rem 2rem 2rem 47.5rem;
+    @media screen and (max-width: $mobile_max_width) {
+      padding: 18rem 2rem 2rem 47.5rem;
+    }
   }
   &.panel-closed-mobile {
-    padding: 16rem 2rem 2rem 2rem; // at zoom = 1.0: 160px 20px 20px 20px
+    padding: 16rem 1rem 1rem 1rem;
   }
   &.short-panel {
-    padding: 35rem 2rem 2rem 2rem; // at zoom = 1.0: 350px 20px 20px 20px
+    padding: 35rem 1rem 1rem;
   }
   &::-webkit-scrollbar {
     display: none;
@@ -72,131 +77,64 @@
 .plant-catalog-image {
   width: 100%;
   background-position: center center !important;
-  background-size: 158% !important;
+  background-size: cover !important;
   background-color: $translucent;
-  height: 12rem;
+  aspect-ratio: 3 / 2;
   border-radius: 5px;
-}
-
-.crop-search-result-wrapper {
-  max-height: calc(100vh - 19rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-  margin-right: -10px;
-  padding-bottom: inherit;
-  .openfarm-search-results-wrapper {
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: repeat(2, 1fr);
-    margin-left: 2.5rem;
-    margin-right: 2rem;
-  }
-  .plant-catalog-tile {
-    position: relative;
-    cursor: pointer;
-    text-align: center;
-    border-radius: 5px;
-    box-shadow: 0px 4px 7px 2px $translucent;
-    transition: transform 0.2s ease;
-    padding: 0;
-    &:hover {
-      box-shadow: 0px 5px 8px 2px rgba(0, 0, 0, 0.25);
-      transform: translateY(-1px);
-    }
-    label {
-      position: absolute;
-      left: 0;
-      bottom: -5px;
-      right: 0;
-      margin-top: 0 !important;
-      padding: 0.4rem 0.6rem 0.2rem;
-      background: linear-gradient(transparent, $translucent5);
-      border-bottom-left-radius: 5px;
-      border-bottom-right-radius: 5px;
-      color: $white;
-      font-size: 1.2rem !important;
-    }
+  &.fallback-image {
+    background-size: 50% !important;
+    background-color: $translucent15 !important;
   }
 }
 
 .thin-search-wrapper {
-  width: 100%;
-  .thin-search {
-    .spinner-container {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 2rem;
-      height: 2rem;
-      padding: 0;
-      margin-right: 1rem;
+  .spinner-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    margin-right: 1rem;
+  }
+  .text-input-wrapper {
+    align-items: center;
+    border-bottom: 1.5px solid var(--border-color);
+    display: flex;
+    padding: 0 0.75rem;
+    i {
+      font-size: 1.5rem;
     }
-    .text-input-wrapper {
-      position: relative;
-      margin: 1rem;
-      border-bottom: 1px solid $dark_gray;
-      &:before,
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        background: $dark_gray;
-        width: 1px;
-        height: 3px;
-      }
-      &:before {
-        left: 0;
+    .fa-search {
+      cursor: default !important;
+    }
+    .fa-times {
+      color: $medium_dark_red;
+      font-size: 1.3rem;
+      &:hover {
+        color: $red;
       }
-      &:after {
-        right: 0;
+    }
+    .point-sort-menu {
+      width: 110px;
+      label {
+        margin-top: 0;
       }
       i {
-        font-size: 1.5rem;
-      }
-      .fa-search {
-        position: absolute;
-        top: 0.8rem;
-        left: 1rem;
-        cursor: default !important;
-      }
-      .fa-times {
-        position: absolute;
-        bottom: 0;
-        right: 0;
+        cursor: pointer;
         padding: 0.5rem;
-        color: $darkest_red;
-        font-size: 1.3rem;
-        &:hover {
-          color: $medium_dark_red;
-        }
-      }
-      .bp5-popover-wrapper {
-        position: absolute;
-        .bp5-popover-target {
-          width: 3rem;
-        }
-      }
-      .point-sort-menu {
-        width: 110px;
-        label {
-          margin-top: 0;
-        }
-        i {
-          cursor: pointer;
-          padding: 0.5rem;
-          color: $medium_light_gray;
-          &.selected {
-            font-weight: bold;
-            color: $dark_gray;
-          }
+        color: $medium_light_gray;
+        &.selected {
+          font-weight: bold;
+          color: $dark_gray;
         }
       }
     }
     input {
       background: transparent;
       box-shadow: none !important;
-      padding-left: 3rem !important;
       font-size: 1.4rem !important;
+      color: inherit;
       &:active,
       &:focus {
         background: transparent !important;
@@ -210,18 +148,21 @@
 
 .panel-content {
   %panel-item-base {
-    text-align: right;
     font-size: 1rem;
-    padding-right: 1rem;
-    line-height: 3rem;
-    float: right;
   }
-  .plant-search-item,
   .group-search-item {
+    grid-template-columns: 1fr auto!important;
+  }
+  .plant-search-item,
+  .group-search-item,
+  .curve-search-item {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
     cursor: pointer;
     padding: 0.5rem 1rem;
     img {
-      margin-right: 0.5rem;
       height: 3rem;
       width: 3rem;
     }
@@ -239,21 +180,14 @@
   }
   .curve-search-item-name,
   .plant-search-item-name,
-  .group-search-item-name,
   .regimen-search-item-name,
   .saved-garden-search-item-name,
   .weed-search-item-name,
   .point-search-item-name {
     display: inline-block;
     white-space: nowrap;
-    max-width: 60%;
     text-overflow: ellipsis;
     overflow: hidden;
-    vertical-align: middle;
-    margin-left: 1rem;
-  }
-  .group-search-item-name {
-    margin-left: 0;
   }
   .plant-search-item-age {
     @extend %panel-item-base;
@@ -290,25 +224,13 @@
     line-height: 3rem;
     float: right;
   }
-  .regimen-search-item-name,
-  .weed-search-item-name,
-  .point-search-item-name {
-    width: 40%;
-    margin-left: 1.25rem;
-  }
   .tool-search-item,
   .tool-slot-search-item {
-    line-height: 4rem;
+    margin: 0 -1rem;
+    padding: 0 1rem;
     cursor: pointer;
-    .row {
-      margin-left: 0.5rem;
-      margin-right: -25px;
-    }
-    .tool-search-item-icon,
+    .tool-svg,
     .tool-slot-search-item-icon {
-      width: fit-content;
-      padding-left: 10px;
-      padding-right: 0;
       svg {
         vertical-align: middle;
       }
@@ -329,36 +251,32 @@
       line-height: 4rem;
       &.tool-status,
       &.tool-slot-position {
-        float: right;
+        min-width: 10rem;
+        text-align: right;
       }
     }
   }
   .regimen-search-item {
-    position: relative;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
     cursor: pointer;
     height: 3.5rem;
+    padding: 1rem;
     .regimen-search-item-name {
-      font-size: 1.2rem;
-      color: $dark_gray;
-      line-height: 3.5rem;
-      width: 80%;
+      font-size: 1.4rem;
     }
     .regimen-color {
-      display: inline-block;
-      vertical-align: middle;
       .color-picker {
         display: inline;
         .saucer {
-          margin-left: 3rem;
           width: 1.2rem;
           height: 1.2rem;
         }
       }
     }
   }
-  .padding {
-    height: 6rem;
-  }
   &.scrolled {
     box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1);
   }
@@ -616,98 +534,37 @@
   }
 }
 
-.saved-garden-indicator {
-  position: fixed;
-  top: 80px;
-  left: 50%;
-  z-index: 3;
-  padding: 2rem;
-  background: rgba(255, 255, 255, .75);
-  border-radius: 5px;
-  box-shadow: 0px 1px 4px #555;
-  text-align: center;
-  label {
-    display: block;
-  }
-  button {
-    margin: 0.5rem;
-    float: unset;
-  }
-}
-
-.garden-snapshot {
-  button {
-    &.pseudo-disabled {
-      cursor: not-allowed;
-    }
-  }
-  textarea {
-    font-size: 1.2rem;
-  }
-}
-
-.saved-garden-list {
-  .saved-garden-search-item {
-    padding: 0.25rem;
-    button {
-      margin-bottom: 1rem;
-    }
-    .saved-garden-info div {
-      height: 3rem;
-      line-height: 3rem;
-      cursor: pointer;
-      padding-right: 0;
-      span {
-        margin: 0;
-        pointer-events: none;
-        margin-left: 1rem;
-      }
-      p {
-        float: right;
-        line-height: 3rem;
-        text-align: center;
-        margin-right: 1rem;
-      }
-    }
-  }
-}
-
 .garden-map-legend {
   position: fixed;
-  top: 110px;
+  top: 90px;
   right: -155px;
   z-index: 3;
   transition: all 0.4s ease;
   &.active {
-    transform: translateX(-165px);
+    transform: translateX(-175px);
   }
   .content {
     display: flex;
     flex-direction: row-reverse;
+    gap: 1.25rem;
+    .menu-content, .z-display {
+      background-color: var(--main-bg);
+      border-radius: 1rem;
+      box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
+      backdrop-filter: blur(5px);
+    }
     .menu-content {
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
+      display: grid;
       max-width: 155px;
-      padding: 1rem;
-      background: rgba(255, 255, 255, .75);
-      border-radius: 5px;
-      box-shadow: 0px 1px 4px #555;
-      >*+* {
-        margin: auto;
-        margin-top: 0.75rem;
-      }
+      padding: 1.25rem;
+      gap: 0.75rem;
+      justify-items: center;
       .zoom-buttons {
-        display: grid;
-        margin: auto;
-        width: 90%;
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 1rem;
         button {
           margin: auto;
-          grid-row: 1;
-          grid-column: 2;
-          &.zoom-out {
-            grid-column: 1;
-          }
         }
       }
     }
@@ -715,10 +572,6 @@
       position: relative;
       padding: 2rem;
       padding-left: 3rem;
-      margin-right: 1.25rem;
-      background: rgba(255, 255, 255, .75);
-      border-radius: 5px;
-      box-shadow: 0px 1px 4px #555;
       label {
         position: absolute;
         top: 0.5rem;
@@ -777,26 +630,6 @@
       width: 5rem;
     }
   }
-  .caret-menu-button {
-    display: inline;
-    font-weight: bold;
-    font-size: medium;
-    cursor: pointer;
-    span {
-      margin-left: 0.25rem;
-    }
-  }
-  .more-bugs,
-  .select-mode,
-  .map-settings,
-  .move-to-mode {
-    margin: auto;
-    margin-top: 1rem;
-    p {
-      text-align: center;
-      padding-top: 2rem;
-    }
-  }
   .move-to-mode {
     display: none;
     @media screen and (max-width: $mobile_max_width) {
@@ -806,10 +639,11 @@
   .menu-pullout {
     position: absolute;
     left: -4.5rem;
-    color: $white;
+    color: $off_white;
     cursor: pointer;
-    transition: all 0.4s ease;
+    transition: all 0.3s ease;
     text-shadow: 0px 1px 1px #555;
+    font-size: 1.5rem;
     &.active {
       left: -4.5rem;
       transform: rotate(180deg);
@@ -836,24 +670,6 @@
       opacity: 0;
     }
   }
-  .map-rotate-button {
-    text-align: center;
-    .fb-button {
-      float: none;
-    }
-  }
-}
-
-.map-plants-submenu,
-.map-settings-submenu,
-.farmbot-layer-submenu {
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-  }
-  .fb-toggle-button {
-    margin-left: 1rem;
-  }
 }
 
 .farmbot-origin {
@@ -868,7 +684,7 @@
   .quadrants {
     display: flex;
     flex-wrap: wrap;
-    border: 1px solid $dark_gray;
+    border: 1px solid var(--border-color);
   }
   .quadrant {
     display: inline-block;
@@ -876,7 +692,7 @@
     background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 2px, transparent 2px);
     background-size: 4px 4px, 4px 4px, 100px 100px, 100px 100px;
     cursor: pointer;
-    border: 1px solid $dark_gray;
+    border: 1px solid var(--border-color);
     width: 50%;
     height: 24px;
     transition: all 0.2s ease-in-out;
@@ -884,7 +700,7 @@
       background-color: rgba(0, 0, 0, 0.1);
     }
     &.selected {
-      box-shadow: inset 0 0 8px $dark_gray;
+      box-shadow: inset 0 0 8px var(--border-color);
     } // Quadrant 1
     &:nth-child(2) {
       &:before {
@@ -945,48 +761,13 @@
   }
 }
 
-.map-plants-submenu,
-.map-settings-submenu,
-.map-points-submenu {
-  display: flex;
-  flex-direction: column;
-  fieldset {
-    display: flex;
-    margin-top: 0;
-    flex-direction: column;
-    align-items: center;
-  }
-  label {
-    margin-top: 0;
-  }
-  button {
-    margin: auto;
-  }
-  .fb-toggle-button {
-    margin-left: 1rem;
-  }
+.map-size-grid {
+  grid-template-columns: auto 6rem !important;
 }
 
 .image-filter-menu {
-  label {
-    margin-top: 0 !important;
-  }
-  th {
-    text-align: center;
-    label {
-      margin: 0;
-      line-height: unset !important;
-    }
-  }
-  input {
-    background: $white;
-  }
-  .fa-step-backward,
-  .fa-caret-left,
-  .fa-caret-right,
-  .fa-step-forward {
+  .fa {
     font-weight: bold;
-    vertical-align: middle;
   }
   .fa-caret-left,
   .fa-caret-right {
@@ -996,715 +777,31 @@
   .fa-step-forward {
     font-size: 1rem;
   }
-  .fa-step-backward,
-  .fa-caret-left {
-    margin-right: 0.1rem;
-  }
-  .fa-caret-right,
-  .fa-step-forward {
-    margin-left: 0.1rem;
-  }
 }
 
-.image-options {
-  .image-filter-menu {
-    margin-bottom: 1rem;
-  }
-  .non-layer-config-toggle {
-    margin-left: 1rem;
-    margin-right: 1rem;
+@media screen and (min-width: $mobile_max_width) {
+  .farm-designer-panels.panel-closed ~ .three-d-garden .garden-bed-3d-model {
+    animation: panel-hide-shift-3d 0.3s ease forwards;
   }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-  }
-  .fb-toggle-button {
-    margin-left: 1rem;
+  .farm-designer-panels.panel-open ~ .three-d-garden .garden-bed-3d-model {
+    animation: panel-show-shift-3d 0.3s ease forwards;
   }
 }
 
-.sliders {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  margin-bottom: 3rem;
-  margin-top: 1rem;
-  .bp5-slider {
-    margin-left: 3rem;
-    margin-top: 1rem;
-    width: 80%;
-  }
-  &.vertical {
-    .bp5-slider {
-      margin-top: 0;
-    }
-  }
-  .bp5-slider-label {
-    white-space: nowrap;
-    text-align: center;
-    &:empty {
-      display: none;
-    }
-  }
-  .data-slider {
-    pointer-events: none;
-    .bp5-slider-axis,
-    .bp5-slider-track {
-      display: none;
-    }
-    .bp5-slider-label {
-      box-shadow: none;
-    }
-    .bp5-start {
-      top: 0.53rem;
-      width: 0.5px;
-      background: color.adjust($dark_gray, $alpha: -0.75);
-      box-shadow: none;
-      height: 0.55rem;
-      border-radius: 0;
-      &:first-of-type {
-        display: none;
-      }
-    }
-    &.vertical {
-      .bp5-start {
-        top: unset;
-        left: 0.53rem;
-        height: 0.5px;
-        width: 0.55rem;
-        border-radius: 0;
-      }
-    }
-  }
-  .input-slider {
-    position: absolute;
-    top: 0;
-  }
-}
-
-.profile-viewer {
-  position: fixed;
-  bottom: 0;
-  z-index: 2;
-  width: calc(100% - $mobile_max_width);
-  background: #e5e5e5;
-  transition: transform 0.5s ease-out;
-  box-shadow: 0 0 1px rgba(0, 0, 0, .3);
-  transform: translateY(10rem) translateX($mobile_max_width);
-  &.panel-closed-mobile,
-  &.panel-closed {
-    width: 100%;
-    transform: translateY(10rem);
-  }
-  &.none-chosen {
-    transform: translateY(21rem) translateX($mobile_max_width);
-    &.panel-closed-mobile,
-    &.panel-closed {
-      transform: translateY(21rem);
-    }
-  }
-  @media screen and (max-width: $mobile_max_width) {
-    &.panel-open {
-      display: none;
-    }
-  }
-  &.open {
-    transform: translateY(0) translateX($mobile_max_width);
-    &.panel-closed-mobile,
-    &.panel-closed {
-      transform: translateY(0);
-    }
-    .profile-button {
-      i {
-        line-height: 6rem;
-      }
-    }
-  }
-  .profile-button {
-    margin: auto;
-    cursor: pointer;
-    margin-top: -3rem;
-    border-radius: 50%;
-    width: 6rem;
-    height: 6rem;
-    background: $magenta;
-    transition: background-color 0.3s ease-out;
-    text-align: center;
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .3);
-    &:hover {
-      background: color.adjust($magenta, $lightness: 5%);
-    }
-    i {
-      color: $off_white;
-      line-height: 3.25rem;
-      font-size: 2rem;
-      transition: line-height 0.5s ease-out;
-    }
+@keyframes panel-show-shift-3d {
+  0% {
+    transform: translateX(-22.5rem);
   }
-  .profile-content {
-    label {
-      display: block;
-      margin: auto;
-      margin-top: 1rem;
-      margin-bottom: 0.5rem;
-      text-align: center;
-    }
-    .no-profile {
-      height: 12.5rem;
-      text-align: center;
-      margin-top: 1.5rem;
-    }
-    .left-label,
-    .right-label {
-      position: absolute;
-      top: 50%;
-      font-weight: bold;
-    }
-    .left-label {
-      left: 2rem;
-    }
-    .right-label {
-      right: 2rem;
-    }
-    svg {
-      display: block;
-      margin: auto;
-      height: 10rem;
-      width: 90%;
-      border-radius: 5px;
-      padding: 1rem;
-      margin-bottom: 1rem;
-      background: #fafafa;
-      box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-      &.expand {
-        height: unset;
-        max-height: 60vh;
-      }
-    }
-    .profile-options {
-      width: 100%;
-      height: 4rem;
-      text-align: center;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-      background: #f2f2f2;
-      box-shadow: 0px 0px 1px 0px #666666;
-      button {
-        display: inline;
-        float: none;
-        margin-right: 3rem;
-      }
-      label {
-        display: inline;
-        margin-right: 0.5rem;
-        line-height: 2rem;
-        vertical-align: text-top;
-      }
-      input {
-        height: 2rem !important;
-        width: 5rem;
-        margin-right: 3rem;
-      }
-    }
+  100% {
+    transform: translateX(0);
   }
 }
 
-.three-d-garden {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  cursor: grab;
-
-  body {
-    margin: 0;
-  }
-
-  .garden-bed-3d-model {
-    position: relative;
-    height: 100vh;
-    width: 100vw;
-    cursor: grab;
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  .gear {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    width: 1rem;
-    cursor: pointer;
-    background: rgba(255, 255, 255, 0.4);
-    box-shadow: $translucent2 0px 0px 5px;
-    padding: 7px;
-    border-radius: 5px;
-    backdrop-filter: blur(5px);
-    opacity: 0;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    pointer-events: none;
-    user-select: none;
-
-    .settings-bar {
-      display: flex;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      justify-content: center;
-      gap: 1.25rem;
-      padding: 1rem;
-      overflow-x: scroll;
-      background: linear-gradient(0deg, $translucent5, transparent);
-      scrollbar-width: none;
-
-      @media screen and (max-width: 768px) {
-        justify-content: left;
-        pointer-events: all;
-      }
-
-      .setting-section {
-        pointer-events: all;
-      }
-
-      .setting-title {
-        color: $off_white;
-        font-family: 'Inknut Antiqua';
-        text-shadow: 0 0 10px black;
-        line-height: 1.8rem;
-        text-align: center;
-      }
-
-      .row {
-        display: flex;
-        margin: 0;
-        background: rgba(255, 255, 255, 0.6);
-        box-shadow: $translucent2 0px 0px 1rem;
-        border-radius: 2.5rem;
-        height: 3.1rem;
-        padding: 0.3rem;
-        justify-content: space-evenly;
-        backdrop-filter: blur(5px);
-        gap: 0.5rem;
-        &:after,
-        &:before {
-          content: unset;
-          display: unset;
-          clear: unset;
-        }
-      }
-
-      button {
-        padding: 0 0.85rem;
-        border-radius: 2.5rem;
-        font-weight: bold;
-        border: none;
-        background: none;
-        white-space: nowrap;
-        color: $off_black;
-
-        &.outdoor.active,
-        &.lab.active,
-        &.genesis.active,
-        &.standard.active,
-        &.mobile.active {
-          background: rgba(255, 255, 255, 0.6);
-        }
-
-        &.genesis-xl.active {
-          background: linear-gradient(315deg, #22a36d, #4ea3ed);
-          color: $off_white;
-        }
-
-        &.winter.active {
-          background: linear-gradient(-15deg, #152e40, #3e8dc2);
-          color: $off_white;
-        }
-
-        &.spring.active {
-          background: linear-gradient(15deg, #055b08, #49cc78);
-          color: $off_white;
-        }
-
-        &.summer.active {
-          background: linear-gradient(-15deg, #d87f09, #f5e40a);
-        }
-
-        &.fall.active {
-          background: linear-gradient(15deg, #502402, #c69075);
-          color: $off_white
-        }
-
-        &:hover {
-          cursor: pointer;
-          background: $translucent3_white;
-        }
-
-        &.disabled {
-          color: $placeholder_gray;
-
-          &:hover {
-            cursor: not-allowed;
-            background: none;
-          }
-        }
-      }
-    }
-  }
-
-  .tool-tip {
-    position: absolute;
-    left: 0;
-    bottom: 6.5rem;
-    right: 0;
-    margin: auto;
-    width: fit-content;
-    color: $off_white;
-    background: rgba(120, 0, 0, 0.65);
-    padding: 0.75rem 1rem;
-    border-radius: 5px;
-    text-align: center;
-    pointer-events: none;
-    backdrop-filter: blur(5px);
-    box-shadow: $translucent2 0px 0px 5px;
-
-    @media screen and (max-width: 768px) {
-      margin: 0 1rem;
-    }
-  }
-
-  .all-configs {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    width: 22rem;
-    background: $dark_gray;
-    text-align: left;
-    padding: 1rem;
-    border-radius: 5px;
-    max-height: 30rem;
-    overflow-y: scroll;
-
-    .close {
-      position: absolute;
-      top: 0.5rem;
-      right: 1rem;
-      margin: 0;
-      cursor: pointer;
-      font-size: 1rem;
-      padding: 0.5rem 0.75rem;
-      background: none;
-      border-radius: 5px;
-
-      &:hover {
-        background: $medium_gray;
-      }
-    }
-
-    .spacer {
-      margin-top: 1rem;
-    }
-
-    details {
-      color: $off_white;
-
-      label {
-        font-weight: bold;
-        color: $off_white;
-        text-transform: none;
-        font-size: 0.9rem;
-      }
-    }
-
-    summary {
-      margin: -1rem;
-      cursor: pointer;
-      padding: 1rem;
-
-      &:hover {
-        background: $dark_gray;
-      }
-    }
-
-    .config-row {
-      display: grid;
-      grid-template-columns: min-content minmax(30%, 200px) auto;
-      margin-bottom: 0.25rem;
-
-      span {
-        width: 8rem;
-        padding-left: 1rem;
-        color: $gray;
-      }
-
-      input[type="checkbox"] {
-        width: 1.1rem;
-        height: 1.1rem;
-        justify-self: left;
-        cursor: pointer;
-        box-shadow: none;
-      }
-
-      input[type="number"] {
-        width: 100%;
-        max-width: 4rem;
-        height: 1rem;
-        font-size: 0.9rem;
-        box-shadow: none;
-      }
-
-      input[type="radio"] {
-        width: 1.1rem;
-        height: 1.1rem;
-        cursor: pointer;
-        box-shadow: none;
-      }
-
-      .options {
-        width: 100%;
-        justify-content: space-between;
-      }
-
-      input[type="range"] {
-        width: 4rem;
-        margin-left: -2rem;
-        cursor: pointer;
-        box-shadow: none;
-        height: 1rem;
-      }
-    }
-  }
-
-  .promo-info {
-    display: grid;
-    position: absolute;
-    top: 3rem;
-    right: 4rem;
-    color: $off_white;
-    text-align: right;
-    pointer-events: none;
-    text-shadow: 0 0 3.5rem $black, 0 0 1rem $black;
-    gap: 1rem;
-    justify-items: right;
-
-    .title {
-      margin: 0;
-      font-family: 'Inknut Antiqua';
-      font-size: 3.5rem;
-      line-height: 5rem;
-      font-weight: bold;
-    }
-
-    .description {
-      margin: 0;
-      max-width: 40vw;
-
-      p {
-        color: $off_white;
-        font-size: 1.25rem;
-        line-height: 1.7rem;
-        font-weight: bold;
-      }
-
-      .short {
-        display: none;
-      }
-
-      .full {
-        display: inline;
-      }
-    }
-
-    .buy-button {
-      display: flex;
-      pointer-events: all;
-      background: #00a579e0;
-      border-radius: 7px;
-      box-shadow: $translucent2 0px 0px 10px;
-      backdrop-filter: blur(5px);
-      padding: 0.1rem 1.75rem;
-      text-shadow: none;
-      text-transform: uppercase;
-      text-decoration: none;
-      gap: 0.4rem;
-      align-items: center;
-
-      p {
-        margin: 0;
-        color: $off_white;
-        font-size: 1.5rem;
-        line-height: 4rem;
-        font-weight: bold;
-      }
-
-      .genesis-xl {
-        background: linear-gradient(315deg, #22a36d, #4ea3ed);
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
-        color: $off_white;
-        border-radius: 50%;
-        height: 2.5rem;
-        width: 2.5rem;
-        line-height: 2.5rem;
-        text-align: center;
-        font-size: 1.2rem;
-        vertical-align: middle;
-      }
-
-      &:hover {
-        background: #00bb89e5;
-      }
-    }
-  }
-
-  .beacon-info {
-    width: 34rem;
-    background: $white;
-    background: rgba(255, 255, 255, 0.8);
-    box-shadow: $translucent2 0px 0px 10px;
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    backdrop-filter: blur(5px);
-    text-align: left;
-    user-select: none;
-    p {
-      margin-bottom: 0;
-      margin-top: 1rem;
-      font-weight: bold;
-      font-size: 1.25rem;
-      color: $black;
-      line-height: 1.6rem;
-    }
-    a {
-      text-decoration: underline !important;
-      text-underline-offset: 0.1rem;
-      text-underline-position: from-font;
-      font-weight: bold;
-      color: $dark_blue;
-    }
-    iframe {
-      margin-top: 1rem;
-      width: 100%;
-      height: auto;
-      border-radius: 0.35rem;
-      aspect-ratio: 16 / 9;
-    }
-    .header {
-      display: flex;
-      justify-content: space-between;
-      h2 {
-        margin: 0;
-        font-family: 'Inknut Antiqua';
-        line-height: 100%;
-        font-weight: bold;
-      }
-      .exit-button {
-        width: 2rem;
-        height: 2rem;
-        aspect-ratio: 1 / 1;
-        border-radius: 50%;
-        filter: grayscale(100%);
-        font-size: 0.75rem;
-        line-height: 2rem;
-        text-align: center;
-        background: rgba(255, 255, 255, 0.4);
-        box-shadow: $translucent2 0px 0px 0.75rem;
-        &:hover {
-          cursor: pointer;
-          background: rgba(255, 255, 255, 0.6);
-        }
-      }
-    }
+@keyframes panel-hide-shift-3d {
+  0% {
+    transform: translateX(0);
   }
-
-  @media screen and (max-width: 768px) {
-    .beacon-info-wrapper {
-      display: grid;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      align-items: end;
-      transform: none!important;
-      * {
-        transform: none!important;
-      }
-      .beacon-info {
-        width: initial;
-        border-bottom-left-radius: 0px;
-        border-bottom-right-radius: 0px;
-        overflow: scroll;
-        height: 33vh;
-        font-size: 100%;
-
-        .header {
-          h2 {
-            font-size: 1.3rem;
-          }
-        }
-
-        p {
-          font-size: 1rem;
-          line-height: 1.2rem;
-        }
-      }
-    }
-    .promo-info {
-      top: 1rem;
-      right: 1rem;
-      gap: 0.5rem;
-
-      .title {
-        font-size: 1.5rem;
-        line-height: 2rem;
-      }
-
-      .description {
-        max-width: 80vw;
-
-        p {
-          font-size: 1rem;
-          line-height: 1.5rem;
-        }
-
-        .short {
-          display: inline;
-        }
-
-        .full {
-          display: none;
-        }
-      }
-
-      .buy-button {
-        font-size: 0.85rem;
-        line-height: 2.2rem;
-        padding: 0.1rem 0.8rem;
-        border-radius: 5px;
-
-        p {
-          font-size: 0.85rem;
-          line-height: 2rem;
-        }
-
-        .genesis-xl {
-          height: 1.5rem;
-          width: 1.5rem;
-          line-height: 1.5rem;
-          font-size: 0.7rem;
-        }
-      }
-    }
+  100% {
+    transform: translateX(-22.5rem);
   }
 }
diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
index bcfb8cbb6c..62a66c0c04 100644
--- a/frontend/css/farm_designer/farm_designer_panels.scss
+++ b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -1,258 +1,119 @@
-.panel-nav,
+@use "../variables" as *;
+@use "sass:color";
+
 .farm-designer-panels {
   position: fixed;
-  top: 8.9rem;
+  top: 9rem;
   width: 45rem;
-  box-shadow: 0 0 10px $translucent;
+  margin: 1.25rem;
+  margin-top: 0;
+  overflow-y: scroll;
+  border-radius: 1rem;
   @media screen and (max-width: $mobile_max_width) {
-    width: 100%;
+    top: 15rem;
+    width: 100vw;
+    margin: 0;
+  }
+  &.short-panel {
+    max-height: 19rem;
   }
 }
 
 .panel-nav {
+  position: fixed;
+  top: 10rem;
+  width: 100vw;
   display: none;
+  overflow-x: scroll;
+  z-index: 11;
   @media screen and (max-width: $mobile_max_width) {
     display: block;
   }
 }
 
-.panel-top {
-  margin-top: 0;
-  @media screen and (max-width: $mobile_max_width) {
-    margin-top: 5rem;
+.panel-content {
+  padding: 1rem;
+  a {
+    color: inherit;
+    text-decoration: underline !important;
   }
 }
 
-.controls-panel,
-.sensors-panel,
-.photos-panel,
-.messages-panel,
-.help-panel {
+.group-detail-panel {
   .panel-content {
-    padding-top: 1rem;
-    max-height: calc(100vh - 3rem);
-    @media screen and (max-width: $mobile_max_width) {
-      padding-top: 6rem;
-      max-height: calc(100vh - 9rem);
-    }
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 1rem;
   }
 }
 
-.controls-panel,
-.photos-panel {
+.point-inventory-panel,
+.plant-inventory-panel {
   .panel-content {
-    max-height: calc(100vh - 9rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: inherit;
   }
 }
 
-.controls-panel {
+.curve-info-panel,
+.weed-info-panel,
+.point-info-panel,
+.plant-info-panel {
   .panel-content {
-    padding-top: 0;
-    @media screen and (max-width: $mobile_max_width) {
-      padding-top: 4rem;
-    }
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 }
 
-.move {
-  position: relative;
-  padding-bottom: 1rem;
-  padding-top: 1rem;
-  .move {
-    .unavailable,
-    .bot-is-online-wrapper {
-      display: inline-block;
-    }
-  }
-  .move-settings.bp5-popover-wrapper {
-    position: absolute;
-    top: 6rem;
-    right: 1rem;
-    .fa-gear {
-      color: $dark_gray;
-    }
-  }
-  .jog-controls-group {
-    label {
-      margin-top: 0;
-    }
-  }
-  .bot-position-rows {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    label {
-      margin-top: 0;
-      font-size: 1.2rem;
-    }
-    .axis-titles {
-      margin-bottom: 1rem;
-    }
+.weed-info-panel {
+  .panel-title {
+    color: $dark_gray;
   }
 }
 
-.plant-inventory-panel,
-.groups-panel,
-.designer-regimen-list-panel,
-.events-panel,
-.point-inventory-panel,
 .weeds-inventory-panel,
 .zones-inventory-panel,
-.tools-panel,
-.tool-slots-panel-content,
-.designer-farmware-list-panel,
-.settings-panel {
+.groups-panel {
   .panel-content {
-    max-height: calc(100vh - 14rem);
-    @media screen and (max-width: $mobile_max_width) {
-      max-height: calc(100vh - 19rem);
-    }
-  }
-}
-
-@keyframes panel-pullout {
-  0% {
-    transform: translateY(-100%);
-  }
-  100% {
-    transform: translateY(0);
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 }
 
 .farm-designer-panels {
   bottom: 0;
   z-index: 1;
+  animation: panel-show 0.3s ease forwards;
+  pointer-events: none;
   &.panel-closed-mobile,
   &.panel-closed {
-    display: none !important;
-  }
-  &.short-panel {
-    height: 24rem;
-    .location-info-panel {
-      .panel-content {
-        max-height: 19rem;
-      }
-    }
+    animation: panel-hide 0.3s ease forwards;
   }
   .panel-container {
     width: 100%;
-    height: 100%;
+    border-radius: 1rem;
     overflow-x: hidden;
     font-size: 1.6rem;
-    padding-bottom: 6rem;
-    label {
-      font-size: 1.3rem;
-      margin-top: 2rem;
-    }
-  }
-  div {
-    animation: panel-pullout 0s ease;
-  }
-}
-
-.panel-container {
-  overflow: hidden;
-  div[class*="search-item"] {
-    &:hover,
-    &.hovered {
-      transition: background 0.2s ease;
-    }
-  }
-  &.green-panel {
-    background-color: $panel_light_green;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_green, $lightness: -10%);
-      }
-    }
-  }
-  &.cyan-panel {
-    background-color: $light_cyan;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($light_cyan, $lightness: -10%);
-      }
-    }
-  }
-  &.brown-panel {
-    background-color: $panel_light_brown;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_brown, $lightness: -10%);
-      }
-    }
-  }
-  &.magenta-panel {
-    background-color: $light_magenta;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($light_magenta, $lightness: -10%);
-      }
-    }
-  }
-  &.light-gray-panel,
-  &.gray-panel {
-    background-color: $panel_light_gray;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_gray, $lightness: -10%);
-      }
-    }
-  }
-  &.yellow-panel {
-    background-color: $panel_light_yellow;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_yellow, $lightness: -10%);
-      }
-    }
-  }
-  &.blue-panel {
-    background-color: $panel_light_blue;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_blue, $lightness: -10%);
-      }
-    }
-  }
-  &.navy-panel {
-    background-color: $panel_light_navy;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_navy, $lightness: -10%);
-      }
-    }
-  }
-  &.teal-panel {
-    background-color: $panel_light_teal;
+    pointer-events: auto;
+    overflow: hidden;
+    box-shadow: 0 0 1rem $translucent;
+    background-color: var(--main-bg);
+    color: var(--text-color);
     div[class*="search-item"] {
       &:hover,
       &.hovered {
-        background: color.adjust($panel_light_teal, $lightness: -10%);
+        background: $translucent2_white;
       }
     }
-  }
-  &.red-panel {
-    background-color: $panel_light_red;
-    div[class*="search-item"] {
-      &:hover,
-      &.hovered {
-        background: color.adjust($panel_light_red, $lightness: -10%);
-      }
+    label {
+      font-size: 1.3rem;
     }
   }
 }
 
 .panel-nav,
 .panel-header {
-  color: $light_gray;
   &.green-panel {
     background-color: $panel_green;
   }
@@ -266,7 +127,7 @@
     background-color: $magenta;
   }
   &.gray-panel {
-    background-color: $panel_gray;
+    background-color: $translucent3;
   }
   &.light-gray-panel{
     background-color: $panel_medium_light_gray;
@@ -286,24 +147,6 @@
   &.red-panel {
     background-color: $panel_red;
   }
-  &.blue,
-  &.yellow,
-  &.orange,
-  &.purple,
-  &.pink,
-  &.gray {
-    .right-button,
-    .back-arrow,
-    .title {
-      color: $dark_gray;
-    }
-    .right-button,
-    .back-arrow {
-      &:hover {
-        color: $black !important;
-      }
-    }
-  }
 }
 
 .panel-tabs {
@@ -331,8 +174,8 @@
     line-height: 5rem;
     height: 5rem;
     color: $light_gray;
-    padding-left: 0.1rem;
-    padding-right: 0.1rem;
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
     &.active {
       border-bottom: 3px solid $white;
       font-weight: bold;
@@ -355,7 +198,6 @@
 }
 
 .panel-title {
-  height: 50px;
   overflow: hidden;
   .back-arrow {
     float: left;
@@ -363,26 +205,12 @@
     font-size: 1.8rem;
     width: 50px;
     line-height: 50px;
-    &.black-text{
-      color: $medium_gray;
-    }
-    &:hover {
-      &.black-text{
-        color: $darker_gray !important;
-      }
-      &.white-text{
-        color: $white;
-      }
-    }
   }
   .title {
-    float: left;
     font-size: 1.8rem;
     white-space: nowrap;
-    width: 60%;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 50px;
   }
   .right-button {
     position: absolute;
@@ -407,460 +235,54 @@
   }
 }
 
-.white-text{
-  color: $off_white;
-}
-.black-text{
-  color: $black;
-}
-
-.point-inventory-panel,
-.plant-inventory-panel {
-  .panel-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-bottom: inherit;
-  }
-}
-
-.plant-selection-panel {
-  .panel-action-buttons {
-    position: absolute;
-    z-index: 9;
-    height: 16rem;
-    width: 100%;
-    background: $panel_medium_light_gray;
-    padding: 0.5rem;
-    .selection-type {
-      display: flex;
-      label {
-        line-height: 4rem;
-      }
-      .filter-search {
-        position: absolute;
-        right: 1rem;
-        width: 70%;
-        .bp5-button {
-          margin-left: 0.5rem;
-        }
-        i {
-          margin-right: -0.5rem;
-        }
-      }
-    }
-    &.more-select {
-      height: 20rem;
-    }
-    &.more-action {
-      height: 35rem;
-    }
-    &.more-select.more-action {
-      height: 38rem;
-    }
-    .fb-button {
-      margin: 0.5rem;
-      float: left;
-    }
-    label {
-      min-width: -webkit-fill-available;
-      margin-bottom: 0px;
-      margin-left: .5rem;
-      margin-top: 0;
-    }
-    .button-row {
-      float: left;
-      width: 100%;
-      margin-bottom: 1rem;
-      &.group-select {
-        .filter-search {
-          margin-top: 0.5rem;
-        }
-      }
-    }
-    .filter-search {
-      padding-right: 1rem;
-    }
-    .plant-curves-bulk-update,
-    .point-size-bulk-update,
-    .plant-depth-bulk-update,
-    .plant-date-bulk-update,
-    .point-color-bulk-update,
-    .plant-slug-bulk-update,
-    .plant-status-bulk-update {
-      display: inline-block;
-      width: 100%;
-      line-height: 3.5rem;
+.weed-info-panel-content,
+.point-info-panel-content {
+  font-size: 1.4rem;
+  .point-color-input {
+    div[class*=col-] {
+      padding-left: 0.5rem;
     }
-    .plant-curves-bulk-update,
-    .plant-status-bulk-update {
-      .filter-search {
-        display: inline-block;
-        width: 50% !important;
-        margin-top: 0.5rem;
-      }
-      p {
-        display: inline-block;
-        font-size: 1.2rem;
-        vertical-align: top;
-      }
+    .saucer {
+      margin-top: 4.5rem;
     }
-    .plant-depth-bulk-update,
-    .point-size-bulk-update {
-      p {
-        display: inline-block;
-        font-size: 1.2rem;
-        vertical-align: middle;
-      }
+  }
+  .fb-button & .red {
+    display: block;
+    margin-top: 3rem;
+  }
+  p {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem !important;
+    font-size: 1.2rem;
+  }
+  .weed-removal-method-section {
+    .weed-removal-method {
+      display: flex;
       input {
         margin: 0;
-        width: 48%;
-        height: 3rem;
-      }
-    }
-    .plant-date-bulk-update {
-      .input {
-        display: inline-block;
-        width: 48%;
-        input {
-          height: 3rem;
-          padding: 0;
-          padding-left: 1rem;
-          padding-right: 1rem;
-        }
-      }
-    }
-    .point-color-bulk-update {
-      .color-picker {
-        display: inline-block;
-        margin-bottom: -0.5rem;
-      }
-    }
-    .plant-slug-bulk-update {
-      .fa-pencil {
-        margin-left: 0.25rem;
-      }
-      .fb-button {
-        float: none;
-        height: 2rem;
-        line-height: 0;
-        margin-left: 1rem;
-        vertical-align: top;
-      }
-    }
-    .more {
-      cursor: pointer;
-      margin-left: 0.5rem;
-      line-height: 2.5rem;
-      p {
-        display: inline;
-        font-size: 1.4rem;
-        margin-right: 1rem;
+        width: 10%;
+        box-shadow: none;
       }
-    }
-    .more-button {
-      float: right;
-      width: max-content;
-      margin-right: 1rem;
-    }
-    .more-content {
-      margin-top: 0.5rem;
-      max-height: 20.5rem;
-      overflow: scroll;
-      width: 330px;
       label {
-        width: 100%;
-      }
-      .filter-search {
-        display: inline-block;
-        width: 50.75% !important;
-        line-height: 1rem;
-      }
-      p {
-        display: inline-block;
-        width: 150px;
-        line-height: 3.5rem;
+        margin: 0;
+        margin-top: auto;
+        font-size: 1.25rem;
+        font-weight: normal;
       }
     }
   }
-  .panel-content {
-    padding-top: 16rem;
-    padding-right: 0;
-    padding-left: 0;
-    max-height: calc(100vh - 13rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    &.more-select {
-      padding-top: 20rem;
-    }
-    &.more-action {
-      padding-top: 35rem;
-    }
-    &.more-select.more-action {
-      padding-top: 38rem;
-    }
-    .tool-slot-search-item-icon {
-      padding-left: 5px !important;
-    }
-  }
-}
-
-.group-detail-panel,
-.plant-info-panel {
-  .panel-header-icon-group {
-    i {
-      color: $white;
-    }
-  }
-}
-
-.curve-info-panel,
-.weed-info-panel,
-.point-info-panel,
-.plant-info-panel {
-  .panel-title {
-    input {
-      margin: 1rem;
-      width: 75%;
-    }
-  }
-  .panel-content {
-    max-height: calc(100vh - 14rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
-
-.point-creation-panel {
-  .panel-content {
-    max-height: calc(100vh - 17rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-top: 1rem;
-    ul {
-      margin-bottom: 0;
-    }
-    label {
-      margin-top: 0 !important;
-    }
-    .plant-info-field-data {
-      margin-top: 1rem;
-    }
-    p {
-      margin-top: 1rem;
-    }
-    .fb-button {
-      &.save {
-        margin-right: 1.5rem;
-      }
-      &.delete {
-        float: left;
-        margin-top: 1rem;
-      }
-    }
-    .point-color-input {
-      div[class*=col-] {
-        padding-left: 0.5rem;
-      }
-      .saucer {
-        margin-top: 2.75rem;
-      }
-    }
-    .delete-row {
-      margin: 1.5rem;
-    }
-    hr {
-      border-color: $medium_gray;
-    }
-    .grid-and-row-planting {
-      label {
-        color: $dark_gray;
-      }
-      input {
-        box-shadow: 0 0 10px #ddd;
-      }
-      .update-button,
-      .preview-button,
-      .cancel-button,
-      .save-button {
-        text-decoration: none !important;
-        color: $dark_gray;
-        &:hover {
-          color: $black;
-          background: $off_white;
-        }
-      }
-    }
-    .blue {
-      float: none;
-    }
-    .use-current-location {
-      button {
-        .fa {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-}
-
-.weed-info-panel-content,
-.point-info-panel-content {
-  font-size: 1.4rem;
-  .point-color-input {
-    div[class*=col-] {
-      padding-left: 0.5rem;
-    }
-    .saucer {
-      margin-top: 4.5rem;
-    }
-  }
-  .fb-button & .red {
-    display: block;
-    margin-top: 3rem;
-  }
-  p {
-    margin-top: 1rem;
-    margin-bottom: 0.5rem !important;
-    font-size: 1.2rem;
-  }
-  .weed-removal-method-section {
-    .weed-removal-method {
-      display: flex;
-      input {
-        margin: 0;
-        width: 10%;
-        box-shadow: none;
-      }
-      label {
-        margin: 0;
-        margin-top: auto;
-        font-size: 1.25rem;
-        font-weight: normal;
-      }
-    }
-  }
-  .go-button-axes-wrapper {
-    display: inline-block;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    margin-left: 1.5rem;
-  }
-}
-
-.soil-height-checkbox {
-  margin-top: 1rem;
-  input {
-    float: left;
-    width: 2rem !important;
-    box-shadow: none !important;
-    margin-right: 0.5rem;
-    cursor: pointer;
-  }
-  label {
-    margin-top: 0 !important;
-  }
-}
-
-.crop-catalog-panel {
-  .panel-top {
-    margin-top: 0;
-  }
-  .panel-content {
-    padding: 1rem 1rem 6rem;
-    padding-bottom: inherit;
-  }
 }
 
 .panel-top {
+  padding: 1rem;
   &.with-button {
-    display: flex;
-    .fb-button {
-      margin: 1rem;
-      margin-left: 0;
-    }
-    a {
-      margin-top: 0.5rem;
-    }
-    i:not(.fa-stack-2x) {
-      font-size: 1.5rem;
-    }
-  }
-}
-
-.panel-content {
-  padding: 0 1rem;
-  padding-bottom: inherit;
-  a {
-    color: $black;
-    text-decoration: underline !important;
-  }
-}
-
-.edit-farm-event-panel,
-.add-farm-event-panel {
-  .panel-content {
-    max-height: calc(100vh - 14rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  input {
-    background: $white;
-  }
-  .save-btn {
-    margin: 1rem;
-  }
-  .location-form {
-    width: 100% !important;
-  }
-  .bp5-popover-wrapper {
-    display: inline-block;
-    margin-left: 0.5rem;
-    &.input-error-wrapper {
-      display: block;
-    }
-  }
-}
-
-.farm-event-form {
-  .farm-event-repeat-options {
-    input[type=checkbox] {
-      margin-right: 0.5rem;
-      margin-top: 0;
-      vertical-align: middle;
-    }
-    .farm-event-repeat-form {
-      .add-event-repeat-frequency {
-        min-height: 34px;
-      }
-    }
-  }
-  .locals-list {
-    margin-top: 1rem;
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-  .save-btn {
-    position: absolute;
-    top: 0.5rem;
-    right: 0;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+    align-items: center;
   }
 }
 
-.add-farm-event-panel,
-.edit-farm-event-panel {
-  .fa-trash {
-    position: absolute;
-    top: 1.25rem;
-    right: 8rem;
-    color: $white;
-  }
-}
-
-.panel-nav {
-  position: fixed;
-  z-index: 11;
-}
-
 .scroll-indicator {
   position: absolute;
   top: 0;
@@ -880,7 +302,7 @@
     height: 8rem;
     overflow-y: auto;
     overflow-x: hidden;
-    width: 75%;
+    width: calc(100% - 75px);
     font-family: "Cabin", sans-serif;
   }
   .saving-indicator {
@@ -895,6 +317,7 @@
   }
   .crop-drag-info-tile {
     position: absolute;
+    top: 0;
     right: 0;
     margin: 1rem;
     border: 2px solid $white;
@@ -914,12 +337,6 @@
 }
 
 .grid-input {
-  .row {
-    margin-top: 0.5rem;
-    .grid-axis-label {
-      font-weight: bold;
-    }
-  }
   .use-current-location {
     display: inline;
     float: none;
@@ -935,177 +352,16 @@
   }
 }
 
-.crop-info-panel {
-  .panel-header {
-    position: inherit;
-    background-size: 144% !important;
-    background-repeat: no-repeat !important;
-    background-position: top center !important;
-    min-height: 125px;
-    .panel-title {
-      overflow: visible;
-      .title {
-        font-family: "Inknut Antiqua";
-        font-weight: bold;
-      }
-      .bp5-popover-wrapper {
-        position: absolute;
-        right: 0;
-      }
-      .transparent-button {
-        position: absolute;
-        bottom: -9.5rem;
-        right: 1.5rem;
-        margin: 0;
-        color: $white;
-        white-space: nowrap;
-      }
-      .fa-th-large,
-      .fa-plus,
-      .fa-arrows {
-        position: absolute;
-        background: $white;
-        color: $dark_gray;
-        border-radius: 50%;
-        height: 1.5rem;
-        width: 1.5rem;
-        line-height: 1.5rem;
-        text-align: center;
-        font-size: 1rem;
-        padding-left: 0.15rem;
-      }
-      .fa-th-large {
-        top: 6rem;
-        right: 1.25rem;
-      }
-      .fa-plus {
-        top: 3.8rem;
-        right: 0.25rem;
-      }
-      .fa-arrows {
-        top: 1.5rem;
-        right: 1.25rem;
-      }
-    }
-  }
-  .panel-content {
-    max-height: calc(100vh - 19rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 2rem 1rem 6rem;
-    padding-bottom: 12rem;
-    li {
-      margin-bottom: 1rem;
-      p {
-        font-size: 1.25rem;
-      }
-    }
-    .grid-and-row-planting {
-      padding-bottom: 2rem;
-      margin-left: -1rem;
-      margin-right: -1rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      hr {
-        border-color: $medium_gray;
-      }
-      label {
-        color: $dark_gray;
-      }
-      .update-button,
-      .preview-button,
-      .cancel-button,
-      .save-button {
-        text-decoration: none !important;
-        color: $dark_gray;
-        &:hover {
-          color: $black;
-          background: $off_white;
-        }
-      }
-      .use-current-location {
-        margin-top: 1.5rem;
-      }
-    }
-    .companion {
-      display: inline-block;
-      text-decoration: none !important;
-      background: $light_gray;
-      border-radius: 2rem;
-      margin-right: 1rem;
-      margin-bottom: 0.5rem;
-      padding: 0.15rem;
-      padding-left: 0.5rem;
-      &:hover {
-        background: $gray;
-      }
-      p {
-        display: inline;
-        margin-left: 0.25rem;
-        margin-right: 1rem;
-        font-weight: bold;
-        text-transform: none;
-      }
-    }
-  }
-  .edit-on-openfarm {
-    margin-bottom: 1rem;
-    font-size: 1.3rem;
-  }
-  .object-list {
-    li {
-      position: relative;
-      margin-left: 2rem;
-    }
-    li {
-      p,
-      div {
-        display: inline;
-        font-size: 1.3rem;
-        color: $dark_gray;
-      }
-      p {
-        margin-right: 0.25rem;
-        text-transform: uppercase;
-        font-weight: bold;
-      }
-      span {
-        position: absolute;
-        left: -2rem;
-      }
-    }
-  }
-  .plant-stage-selection,
-  .planted-at-selection {
-    display: flex;
-    label {
-      margin-right: 0.5rem;
-      line-height: 1rem;
-      white-space: nowrap;
-    }
-    .filter-search,
-    .input {
-      width: 100%;
-    }
-  }
-}
-
 .weeds-inventory-panel-content,
 .plant-panel-content,
 .points-panel-content {
-  padding: 0;
-  .empty-state {
-    margin-bottom: 4rem;
-  }
+  padding: 0!important;
   .non-empty-state {
     margin-bottom: 1rem;
+    gap: 0;
   }
 }
 
-.edit-point-location {
-  margin-top: 1rem;
-}
-
 .point-name-input {
   label {
     margin-top: 2rem !important;
@@ -1120,146 +376,62 @@ li {
 
 .additional-weed-properties {
   li {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    align-items: center;
     margin-top: 1rem;
   }
 }
 
-.plants-panel-content {
-  li {
-    margin-top: 1rem;
-    p {
-      margin-bottom: 0.5rem !important;
-    }
-  }
-  .plant-info-field-data {
-    .bp5-popover-wrapper {
-      display: inline-block;
-      margin-left: 0.5rem;
-    }
-    .filter-search {
-      .bp5-popover-wrapper {
-        margin-left: 0;
-      }
-    }
-  }
-  input {
-    background: $white;
-  }
-  .fa-pencil {
-    margin-left: 0.5rem;
-  }
-}
-
 .panel-section {
   .delete {
     height: 2rem;
   }
-  .garden-indicator {
-    display: inline;
-    margin-left: 2rem;
-    font-size: 1rem;
-  }
 }
 
 .section-header {
-  display: inline-block;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
   height: 4rem;
-  width: 100%;
-  line-height: 3.75rem;
+  padding: 0 1rem;
   cursor: pointer;
-  padding-left: 1rem;
   &:hover {
-    background: $light_gray;
+    background: $translucent2_white;
   }
   label {
-    margin: 0 !important;
     cursor: pointer;
   }
   .fb-button {
-    line-height: 1rem;
-    margin-top: 0.5rem;
-    margin-right: 1rem;
-    padding: 0.25rem 0.75rem;
-    i {
-      margin: 0 !important;
-      font-size: 1.5rem;
-    }
+    line-height: 1.2rem;
   }
   .fa-caret-up,
   .fa-caret-down {
-    float: right;
-    line-height: 0;
     font-size: 2rem;
-    margin-right: 2rem;
-    margin-top: 2rem !important;
-    color: $dark_gray;
-  }
-}
-
-.add-plant-panel,
-.location-info-panel {
-  padding-bottom: 0 !important;
-}
-
-.add-plant-panel {
-  .panel-header {
-    height: 100%;
   }
 }
 
 .grid-and-row-planting {
+  display: grid;
+  gap: 1rem;
   h3 {
     width: 100%;
     text-align: center;
+    margin: 0;
   }
-  .row {
-    margin-left: 0;
-    margin-right: 0;
-    div[class*=col-] {
-      padding-left: 0;
-      padding-right: 1rem;
-    }
-  }
-  i {
+  .fa-arrows-h, .fa-arrows-v {
     margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-  label {
-    color: $off_white;
-    margin-top: 0.75rem;
   }
   .use-current-location {
-    padding: 0;
-    margin-left: 1rem;
+    display: flex;
+    align-items: center;
     button {
       .fa {
         font-size: 1.5rem;
       }
     }
   }
-  .grid-input {
-    i[class*=fa-arrow] {
-      margin-right: 0.35rem;
-      cursor: default !important;
-    }
-    input {
-      box-shadow: none;
-      &.numPlantsH,
-      &.numPlantsV {
-        -moz-appearance: unset !important;
-      }
-    }
-  }
-  .grid-planting-toggle {
-    margin: 0.5rem;
-    margin-left: 0;
-    label {
-      margin-top: 0.5rem;
-    }
-    button {
-      float: right;
-    }
-  }
   .fb-toggle-button {
     float: none;
     margin-left: 1rem;
@@ -1268,2761 +440,331 @@ li {
   .preview-button,
   .cancel-button,
   .save-button {
-    text-transform: uppercase;
-    font-size: 1rem;
-    border: 1px solid;
-    padding: 0.4rem 1.2rem;
-    font-weight: bold;
-    letter-spacing: 1px;
-    border-radius: 4px;
-    color: $off_white;
-    margin-top: 1.25rem;
-    margin-right: 1.5rem;
-    &:hover { color: $white; }
+    text-decoration: none !important;
   }
 }
 
-.planted-at-selection,
-.plant-stage-selection {
-  label {
-    margin-top: 1rem !important;
-  }
-  .filter-search {
-    position: relative;
+.move-to-form {
+  display: grid;
+  gap: 1rem;
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 0.5rem;
   }
 }
 
-.plant-stage-selection {
-  margin-bottom: 1rem;
+.no-pad {
+  padding: 0;
 }
 
-.move-to-form {
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
+.low-pad {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.factory-reset-options {
+  a {
+    color: $white;
+    text-decoration: none !important;
   }
-  .speed {
-    margin: 2rem;
-    margin-left: -15px;
+  .fa-external-link {
+    margin-left: 0.5rem;
   }
 }
 
-.go-button-axes-wrapper {
-  margin-top: 1rem;
-  button {
-    margin: 0;
-    float: none;
-  }
-  .go-button-axes {
-    display: inline;
+.weed-item-icon,
+.group-item-icon {
+  display: inline-block;
+  position: relative;
+  .weed-icon {
+    position: absolute;
+    top: 11%;
+    left: 14%;
+    width: 70%;
+    height: 70%;
   }
-  .go-button-axes-text {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  &.more-indicator {
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
     p {
-      display: inline-block;
-      position: relative;
-      z-index: 1;
-      margin: 0 !important;
-      font-weight: bold;
-      color: $off_white;
-      height: 0;
-      line-height: 0;
-      font-size: 1.1rem;
-    }
-  }
-  .go-button-axes-dropdown {
-    border-left: 1px solid $dark_gray;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    &.pseudo-disabled {
-      border-left: 1px solid $gray;
+      display: inline;
+      text-align: center;
     }
   }
 }
 
-.go-button-axes-popover {
-  .bp5-popover-arrow {
-    &::before {
-      position: relative;
-      background: $dark_gray;
-    }
-  }
-  .bp5-popover-content {
-    color: $off_white;
-    background: $dark_gray;
-    width: 200px;
-    .go-axes {
-      display: grid;
-      gap: 0.75rem;
-      button {
-        margin: 0;
-        padding: 0.5rem 1rem;
-        float: none;
-        &.x,
-        &.y,
-        &.z {
-          grid-row: 1;
-          grid-column: span 4;
+.panel-header-icon-group {
+  margin-left: 1rem;
+  margin-right: 1.5rem;
+}
+
+.group-detail-panel {
+  .panel-content {
+    .group-criteria {
+      .basic, .plant-criteria-options {
+        display: grid;
+        gap: 1rem;
+      }
+      .plant-stage-criteria,
+      .plant-type-criteria,
+      .radius-criteria,
+      .day-criteria,
+      .location-criteria,
+      .removal-method-criteria,
+      .color-criteria,
+      .point-source-criteria {
+        background: var(--secondary-bg);
+        border-radius: 0.5rem;
+        padding: 1rem;
+        display: grid;
+        gap: 1rem;
+      }
+      .criteria-heading {
+        margin-top: 0;
+      }
+      .alpha-icon {
+        display: inline;
+        float: none !important;
+        margin-left: 1rem;
+        color: $orange;
+        font-size: 1.4rem;
+      }
+      p {
+        &.category {
+          font-size: 1.2rem;
+          font-weight: bold;
+        }
+      }
+      .bp5-popover-wrapper {
+        float: right;
+      }
+      .criteria-checkbox-list {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+      }
+      .point-type-section,
+      .criteria-checkbox-list-item {
+        height: 3rem;
+        border-radius: 3rem;
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+        gap: 1rem;
+        background: $translucent2_white;
+        .fb-checkbox {
+          display: contents;
+        }
+        p {
+          text-transform: uppercase;
         }
-        &.xy,
-        &.xyz {
-          grid-row: 2;
-          grid-column: span 6;
+        input[type="text"] {
+          width: 50%;
+          height: 2rem;
         }
       }
-      a,
-      p {
-        display: inline;
-        color: $off_white;
-        font-size: 1.2rem;
-        text-decoration: none !important;
-        font-weight: normal;
+      .point-type-checkboxes {
+        .point-type-section {
+          .point-type-checkbox {
+            position: relative;
+            height: 2rem;
+            margin-top: 0.75rem;
+            cursor: pointer;
+            .fb-checkbox {
+              display: inline-block;
+              height: 2rem;
+            }
+          }
+          .plant-criteria-options,
+          .weed-criteria-options,
+          .point-criteria-options,
+          .tool-criteria-options {
+            .lt-gt-criteria {
+              margin-bottom: 1rem;
+              .row {
+                margin-left: 0 !important;
+              }
+            }
+          }
+        }
       }
-      a {
-        grid-column: span 12;
-        i {
-          margin-left: 0.5rem;
+      .criteria-radio-presets {
+        input[type="radio"] {
+          width: auto;
+          margin-right: 1rem;
         }
-        &:hover {
-          text-decoration: underline !important;
+        p {
+          display: inline;
+          text-transform: uppercase;
         }
       }
-      input {
-        float: right;
-        width: auto;
-        box-shadow: none;
-        cursor: pointer;
+      .criteria-string,
+      .criteria-pointer-type,
+      .criteria-plant-status,
+      .criteria-slug {
+        margin-top: 1rem;
       }
-      .save-as-default-wrapper {
-        display: inline-block;
-        grid-column: span 12;
-        width: 100%;
+      .number-eq-criteria,
+      .string-eq-criteria {
+        code {
+          display: inline-block;
+          font-size: 1.2rem;
+          font-weight: bold;
+          color: $black;
+        }
+      }
+      .number-eq-criteria,
+      .number-gt-lt-criteria {
+        p {
+          text-align: center;
+          font-size: 1.2rem;
+        }
+      }
+      .advanced {
+        .bp5-popover-wrapper {
+          display: inline-block;
+          float: none;
+          margin-left: 1rem;
+          font-size: 1.4rem;
+        }
+        .filter-search {
+          .bp5-popover-wrapper {
+            margin-left: 0;
+          }
+        }
       }
     }
   }
 }
 
-.location-info-panel {
-  .panel-content {
-    max-height: calc(100vh - 14rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-top: 1rem;
-    .location-actions {
-      p {
-        margin-top: 1rem;
-      }
-    }
-    h1 {
-      text-align: center;
-      font-size: 2rem;
-      margin-top: 4rem;
-      margin-bottom: 0;
-    }
-    .expandable-header {
-      text-transform: uppercase;
-      font-weight: bold;
+.group-member-count-breakdown {
+  margin-bottom: 1rem;
+  .manual-group-member-count,
+  .criteria-group-member-count {
+    margin-bottom: 0.5rem;
+    div {
+      display: inline;
+      padding: 0.25rem;
       font-size: 1.2rem;
     }
-    label {
-      margin-top: 0;
-      &.no-items {
-        display: block;
-      }
-    }
-    button {
-      float: none;
-    }
-    .add-point {
-      margin-top: 2rem;
+    p {
+      display: inline;
+      margin-left: 0.5rem;
     }
-    .point-search-item,
-    .plant-search-item{
-      margin-left: -15px;
-      margin-right: -15px;
-      padding-left: 2rem;
-      padding-right: 2rem;
+    .fb-button {
+      margin: 0;
     }
-    .sensor-history-table {
-      margin-left: -15px;
-      margin-right: -15px;
-      .table-row {
-        height: 4rem;
-        td:first-of-type {
-          padding-left: 2rem;
-        }
-      }
+  }
+}
 
+.lt-gt-criteria,
+.location-criteria {
+  .row {
+    p {
+      text-transform: uppercase;
+      font-size: 1.1rem;
     }
-    .interpolated-soil-height {
-      .title {
-        display: inline;
-        font-weight: bold;
-      }
-      p {
-        display: inline;
-        margin-left: 1rem;
-      }
-    }
-    .photos-footer {
-      margin-top: 1rem;
-      .bp5-popover-wrapper {
-        margin-top: 3px;
-      }
-    }
-    hr {
-      margin: 1rem;
-      margin-bottom: 0.5rem;
+  }
+  .location-selection-warning {
+    i,
+    p {
+      display: inline;
+      margin-right: 1rem;
+      color: $darkest_red;
     }
   }
 }
 
-.tool-slots-panel,
-.tools-panel {
-  .panel-top {
-    display: flex;
-  }
-  .tool-slots-panel-content,
-  .tools-panel-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-    .tool-search-item,
-    .tool-slot-search-item {
-      margin-left: -15px;
-      margin-right: -15px;
-      width: calc(100% + 25px);
-      padding-right: 3.5rem;
-      .filter-search {
-        .bp5-button {
-          min-height: 2.5rem;
-          max-height: 2.5rem;
-          span {
-            line-height: 1.5rem;
-          }
-        }
-        i {
-          top: 0.75rem;
-        }
-      }
-      p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    .mounted-tool {
-      .filter-search {
-        width: 50%;
-        float: right;
-      }
-      .utm-and-mounted-tool-graphic {
-        width: 30%;
-        margin-left: 32%;
-      }
-    }
-    .mounted-tool-header {
-      display: inline;
-      margin-top: 1rem;
-      label {
-        margin: 0;
-      }
-      .bp5-popover-wrapper {
-        display: inline;
-      }
-      .help-icon {
-        margin-left: 1rem;
-        vertical-align: top;
-        font-size: 1.4rem;
-      }
-    }
-    .tools-header,
-    .tool-slots-header {
-      display: flex;
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-      label {
-        margin: 0;
-        line-height: 2.1rem;
-      }
-      a {
-        margin-left: auto;
-      }
-      .fa-plus {
-        font-size: 1.5rem;
-      }
-    }
-    button:not(.bp5-button) {
-      display: block;
-      margin-left: auto;
-      float: none;
-      margin-top: 1rem;
-    }
-    .tool-verification-status {
-      display: flex;
-      margin-top: 1rem;
-      margin-bottom: 2rem;
-      button {
-        margin-top: 0;
-      }
-    }
-    .panel-section {
-      margin-left: -10px;
-      margin-right: -10px;
-    }
-  }
-}
-
-.add-tool-slot-panel,
-.edit-tool-slot-panel,
-.add-tool-panel,
-.edit-tool-panel {
-  .tool-action-btn-group {
-    margin: 1.5rem;
-    float: right;
-    .fb-icon-button,
-    .save-btn {
-      float: right;
-      color: $white;
-      margin-left: 1rem;
-    }
-  }
-}
-
-.add-tool-panel-content,
-.edit-tool-panel-content {
-  max-height: calc(100vh - 14rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-  button {
-    display: block;
-    margin-left: auto;
-    float: none;
-    margin-top: 1rem;
-    &.red {
-      float: left;
-      margin-bottom: 1rem;
-    }
-  }
-  svg {
-    display: block;
-    margin: auto;
-    width: 10rem;
-    height: 10rem;
-    margin-top: 2rem;
-  }
-  .edit-tool,
-  .add-new-tool {
-    margin-bottom: 3rem;
-    .name-error {
-      margin-top: 1.2rem;
-      margin-right: 1rem;
-      color: $dark_red;
-      float: right;
-    }
-    .save-btn {
-      float: right;
-    }
-    details {
-      padding: 2rem;
-      .graphics-input {
-        input {
-          width: 97%;
-        }
-      }
-    }
-  }
-  .add-stock-tools {
-    .filter-search {
-      margin-bottom: 1rem;
-      button {
-        margin-top: 0.2rem;
-      }
-    }
-    ul {
-      font-size: 1.2rem;
-      padding-left: 1rem;
-      li {
-        margin-top: 0.5rem;
-        line-height: 2rem;
-        cursor: pointer;
-        width: 50%;
-        &:hover {
-          font-weight: bold;
-        }
-        .fb-checkbox {
-          display: inline;
-        }
-        p {
-          display: inline;
-          line-height: 2.25rem;
-          font-size: 1.2rem;
-          vertical-align: top;
-          margin-left: 1rem;
-        }
-      }
-    }
-    button {
-      margin-bottom: 2rem;
-      .fa-plus {
-        margin-right: 0.5rem;
-      }
-    }
-  }
-}
-
-.flow-rate-input {
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-  }
-  .fb-button {
-    float: right;
-    margin-top: 1.5rem;
-  }
-}
-
-.edit-tool-slot-panel {
-  .save-error {
-    position: absolute;
-    top: 1.5rem;
-    right: 1rem;
-    color: $darkest_red;
-  }
-}
-
-.add-tool-slot-panel-content,
-.edit-tool-slot-panel-content {
-  max-height: calc(100vh - 14rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-  svg {
-    display: block;
-    margin: auto;
-    width: 10rem;
-    height: 10rem;
-    margin-top: 2rem;
-  }
-  label {
-    margin-top: 0 !important;
-  }
-  .row, fieldset {
-    margin-top: 2rem;
-  }
-  fieldset button {
-    margin: 0;
-  }
-  .direction-icon {
-    margin-left: 1rem;
-  }
-  .help-icon {
-    color: $dark_gray;
-  }
-  .tool-slot-location-input {
-    .axis-inputs {
-      padding-left: 0;
-    }
-    .use-current-location {
-      padding: 0;
-      margin-left: -1rem;
-    }
-    button.blue {
-      margin-top: 0.5rem;
-      margin-right: 0.5rem;
-      height: 2.5rem;
-      .fa {
-        font-size: 1.5rem;
-      }
-    }
-    button.gray {
-      margin-top: 1rem;
-    }
-  }
-  .tool-direction-input,
-  .gantry-mounted-input {
-    label {
-      margin-top: 0;
-    }
-    input[type="checkbox"] {
-      float: left;
-      margin-right: 1rem;
-    }
-  }
-  .fb-button.green {
-    margin-top: 1rem;
-  }
-  .tool-direction-input {
-    margin-top: 0;
-  }
-}
-
-.tool-svg {
-  display: flex;
-  div {
-    margin: auto;
-    text-align: center;
-    p {
-      font-style: italic;
-    }
-  }
-}
-
-.no-pad {
-  padding: 0;
-}
-
-.low-pad {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  &.z-param-input {
-    padding-left: 4.25rem;
-  }
-}
-
-.plant-inventory-panel,
-.settings-panel {
-  .panel-top {
-    .fa-chevron-right,
-    .fa-chevron-down {
-      font-size: 1.25rem !important;
-      padding: 0.1rem;
-    }
-    .fa-gear {
-      color: $dark_gray;
-      margin-right: 1rem;
-      margin-top: 1.5rem;
-    }
-  }
-}
-
-.settings-panel-settings-menu {
-  button {
-    margin-left: 1rem;
-  }
-}
-
-.plants-panel-settings-menu {
-  label {
-    line-height: 3rem;
-    vertical-align: bottom;
-    margin-bottom: 0;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-    line-height: 3rem;
-  }
-}
-
-.settings-panel-content {
-  max-height: calc(100vh - 22rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-bottom: inherit;
-  .expandable-header {
-    margin-top: 1.5rem;
-    margin-bottom: 0;
-  }
-  .section {
-    position: relative;
-    margin-bottom: 0;
-    .hw-warn {
-      position: absolute;
-      top: -0.35rem;
-      right: 2rem;
-      i {
-        font-size: 1.4rem;
-      }
-    }
-  }
-  .section {
-    margin-bottom: 2rem;
-  }
-  .row:first-child {
-    margin-right: 0;
-    margin-top: 1rem;
-  }
-  .row:nth-child(2) {
-    padding-left: 1.5rem;
-    padding-right: 3rem;
-  }
-  .row.zero-side-margins {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .export-data,
-  .change-password {
-    .old-password,
-    .new-password {
-      margin-top: 1.5rem;
-      input {
-        width: 50%;
-        float: right;
-      }
-    }
-    form {
-      margin-left: 2rem;
-    }
-  }
-  .label-headings {
-    label {
-      line-height: 1rem;
-    }
-  }
-  .release-notes-wrapper {
-    margin-top: 0.75rem;
-    float: right !important;
-  }
-  .settings-warning-banner {
-    margin-bottom: 1rem !important;
-    p {
-      display: inline;
-    }
-  }
-  .credentials-change-warning-banner,
-  .settings-warning-banner,
-  .stall-detection-note,
-  .limit-switch-warning {
-    margin: 1rem -15px -1rem -15px;
-    padding: 1rem 1.5rem 1rem 2rem;
-    background: color.adjust($orange, $alpha: -0.6);
-    p {
-      line-height: 1.75rem;
-      font-size: 1.3rem;
-      font-weight: bold;
-    }
-  }
-  .pin-reporting-input-row,
-  .pin-guard-input-row {
-    .row {
-      margin-left: -15px;
-      margin-right: -15px;
-      padding-left: 0;
-      padding-right: 1rem;
-      margin-bottom: 1rem;
-    }
-    button {
-      float: none;
-    }
-  }
-  .pin-bindings {
-    margin-right: 1rem;
-    .row {
-      padding-left: 0;
-      padding-right: 0;
-      margin-left: 1rem;
-      margin-right: 0;
-      margin-top: 1rem;
-    }
-    div[class*=col-] {
-      padding: 0;
-      padding-right: 1rem;
-    }
-    .bindings-list {
-      margin-left: -5px;
-      .binding-action {
-        font-weight: bold;
-        font-size: 1.2rem;
-      }
-    }
-    .pin-binding-input-rows {
-      margin-right: 1rem;
-      margin-left: -15px;
-      label {
-        margin-left: 1rem !important;
-      }
-      .green {
-        float: left;
-        margin-left: 1rem;
-      }
-      .row:last-child {
-        margin-top: 0;
-      }
-    }
-    .stock-pin-bindings-button {
-      display: inline;
-      button {
-        margin: 0;
-        margin-top: 0.5rem;
-      }
-    }
-  }
-  .show-advanced-toggle,
-  .highlight-modified-toggle {
-    margin-right: 4.5rem;
-    margin-top: 1rem;
-  }
-  .fb-button {
-    margin-top: 0.5rem;
-  }
-  label {
-    margin: auto 0 !important;
-    line-height: 1;
-    font-size: 1.2rem !important;
-  }
-  .bp5-popover-wrapper {
-    display: inline-block;
-    margin: auto;
-    float: none;
-  }
-  .help-icon {
-    margin-left: 0.5rem;
-  }
-  .designer-setting {
-    &.disabled {
-      input {
-        background: $gray;
-      }
-      button {
-        background: $medium_light_gray !important;
-      }
-    }
-  }
-}
-
-.non-layer-config-toggle {
-  margin-top: 0.1rem;
-  &.disabled {
-    input {
-      background: $gray !important;
-    }
-    button {
-      background: $medium_light_gray !important;
-      &:hover {
-        background: $medium_light_gray !important;
-      }
-    }
-  }
-}
-
-.map-size-inputs {
-  .row {
-    margin: 0;
-    padding: 0;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-  label {
-    margin-top: 0.5rem;
-  }
-}
-
-.factory-reset-options {
-  a {
-    color: $white;
-    font-weight: bold;
-    text-decoration: none !important;
-  }
-  .fa-external-link {
-    margin-left: 0.5rem;
-  }
-}
-
-.saved-garden-panel-content {
-  padding: 0;
-  padding-bottom: inherit;
-  .non-empty-state {
-    max-height: calc(100vh - 14rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    @media screen and (max-width: $mobile_max_width) {
-      max-height: calc(100vh - 19rem);
-    }
-  }
-  .row {
-    margin: 0;
-    margin-top: 1rem;
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-  hr {
-    width: 100%;
-    padding-top: 1rem;
-  }
-  button {
-    margin-left: 0.5rem;
-    &.wide {
-      margin: 1rem;
-      margin-left: 2rem;
-      width: 88%;
-      float: left;
-    }
-  }
-  input {
-    min-width: 7rem;
-  }
-}
-
-.weed-item-icon,
-.group-item-icon {
-  display: inline-block;
-  position: relative;
-  .weed-icon {
-    position: absolute;
-    top: 13%;
-    left: 12%;
-    width: 70%;
-    height: 70%;
-  }
-  &.more-indicator {
-    height: 20px;
-    width: 20px;
-    cursor: pointer;
-    p {
-      display: inline;
-      text-align: center;
-    }
-  }
-}
-
-.weeds-inventory-panel,
-.zones-inventory-panel,
-.groups-panel {
-  .panel-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
-
-.panel-header-icon-group {
-  display: flex;
-  float: right;
-  padding: 1.5rem;
-}
-
-.group-detail-panel {
-  .panel-content {
-    max-height: calc(100vh - 14rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    .clear-day-criteria,
-    .clear-point-ids,
-    .clear-criteria {
-      margin-top: 0.2rem;
-    }
-    .group-member-display {
-      i[class*=fa-caret-] {
-        float: right;
-        font-size: 2rem;
-      }
-      .point-list-wrapper {
-        padding: 0.5em 0em;
-      }
-    }
-    .group-name-input,
-    .group-member-display,
-    .group-sort-section {
-      margin-top: 1rem;
-      label {
-        margin-top: 0;
-      }
-      .bp5-popover-wrapper {
-        display: inline;
-        margin-left: 1rem;
-      }
-    }
-    .group-delete-btn {
-      float: left;
-      margin-top: 1em;
-    }
-    .group-criteria {
-      margin-top: 1rem;
-      .criteria-heading {
-        margin-top: 0;
-      }
-      .alpha-icon {
-        display: inline;
-        float: none !important;
-        margin-left: 1rem;
-        color: $orange;
-        font-size: 1.4rem;
-      }
-      p {
-        &.category {
-          display: block;
-          padding-top: 1rem;
-          padding-bottom: 1rem;
-          text-transform: none;
-          font-size: 1.2rem;
-          font-weight: bold;
-        }
-      }
-      .bp5-popover-wrapper {
-        float: right;
-      }
-      .fb-button {
-        margin-top: 0.5rem;
-      }
-      .point-type-section,
-      .criteria-checkbox-list-item {
-        .fb-checkbox {
-          display: inline;
-          margin-right: 1rem;
-          vertical-align: top;
-        }
-        p {
-          display: inline;
-          text-transform: uppercase;
-        }
-        input[type="text"] {
-          width: 50%;
-          height: 2rem;
-        }
-      }
-      .point-type-checkboxes {
-        .point-type-section {
-          .point-type-checkbox {
-            position: relative;
-            height: 2rem;
-            margin-top: 0.75rem;
-            cursor: pointer;
-            .fb-checkbox {
-              display: inline-block;
-              height: 2rem;
-            }
-            i[class*=fa-caret-] {
-              position: absolute;
-              right: -0.5rem;
-              width: 3rem;
-              font-size: 2rem;
-              padding-left: 1rem;
-            }
-          }
-          .plant-criteria-options,
-          .weed-criteria-options,
-          .point-criteria-options,
-          .tool-criteria-options {
-            hr {
-              margin: 0.5rem;
-            }
-            .lt-gt-criteria {
-              margin-bottom: 1rem;
-              .row {
-                margin-left: 0 !important;
-              }
-            }
-          }
-        }
-      }
-      .criteria-radio-presets {
-        input[type="radio"] {
-          width: auto;
-          margin-right: 1rem;
-        }
-        p {
-          display: inline;
-          text-transform: uppercase;
-        }
-      }
-      .criteria-string,
-      .criteria-pointer-type,
-      .criteria-plant-status,
-      .criteria-slug {
-        margin-top: 1rem;
-      }
-      .day-criteria {
-        .criteria-checkbox-list-item {
-          margin-bottom: 1rem;
-          p {
-            vertical-align: middle;
-          }
-        }
-        .days-old-text {
-          display: inline;
-          vertical-align: bottom;
-        }
-        input {
-          line-height: 1.75rem;
-        }
-      }
-      .number-eq-criteria,
-      .string-eq-criteria {
-        margin-top: 1rem;
-        .row {
-          margin-top: 1rem;
-        }
-        code {
-          display: inline-block;
-          margin-top: 2rem;
-          font-size: 1.2rem;
-          font-weight: bold;
-          color: $black;
-          background: none;
-        }
-      }
-      .number-eq-criteria,
-      .number-gt-lt-criteria {
-        margin-top: 1rem;
-        .row {
-          margin-top: 1rem;
-        }
-        p {
-          text-align: center;
-          line-height: 2.75rem;
-          font-size: 1.2rem;
-        }
-      }
-      .basic,
-      .advanced {
-        margin-left: 1rem;
-        .filter-search {
-          height: 3rem;
-          margin-bottom: 1rem;
-        }
-        .day-criteria {
-          .row {
-            margin-left: 0;
-          }
-          div[class*=col-] {
-            padding: 0;
-            padding-right: 0.75rem;
-          }
-        }
-      }
-      .advanced {
-        .bp5-popover-wrapper {
-          display: inline-block;
-          float: none;
-          margin-left: 1rem;
-          font-size: 1.4rem;
-        }
-        .filter-search {
-          .bp5-popover-wrapper {
-            margin-left: 0;
-          }
-        }
-        .row {
-          margin-left: 0;
-        }
-        div[class*=col-] {
-          padding: 0;
-        }
-        .col-xs-9 {
-          margin-right: 0.5rem;
-        }
-        .col-xs-1 {
-          margin-left: 0.25rem;
-          margin-right: 0.25rem;
-          margin-top: 0.4rem;
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-.group-member-count-breakdown {
-  margin-bottom: 1rem;
-  .manual-group-member-count,
-  .criteria-group-member-count {
-    margin-bottom: 0.5rem;
-    div {
-      display: inline;
-      padding: 0.25rem;
-      font-size: 1.2rem;
-    }
-    p {
-      display: inline;
-      margin-left: 0.5rem;
-    }
-    .fb-button {
-      margin: 0;
-    }
-  }
-}
-
-.criteria-options-menu {
-  label {
-    margin-right: 1rem;
-  }
-}
-
-.lt-gt-criteria,
-.location-criteria {
-  display: inline-block;
-  position: relative;
-  .row {
-    margin-left: 0;
-    margin-right: -2.5rem;
-    margin-top: 1rem;
-    div[class*=col-] {
-      padding: 0;
-      text-align: center;
-    }
-    p {
-      display: block !important;
-      text-transform: uppercase;
-      font-size: 1.1rem;
-      margin-top: 0.75rem;
-    }
-    label {
-      margin-top: 0.5rem;
-    }
-  }
-  button {
-    margin-top: 2rem !important;
-  }
-  .edit-in-map {
-    position: absolute;
-    top: 0;
-    right: 0;
-    button {
-      margin: 1rem !important;
-      width: 5rem !important;
-      margin-right: 0 !important;
-    }
-    label {
-      margin-top: 1.1rem !important;
-    }
-  }
-  .location-selection-warning {
-    i,
-    p {
-      display: inline;
-      margin-right: 1rem;
-      color: $darkest_red;
-    }
-  }
-}
-
-.weeds-inventory-panel,
-.zones-inventory-panel,
-.point-inventory-panel,
-.groups-panel {
-  .panel-content {
-    padding: 0;
-    padding-bottom: inherit;
-    .points-section-header {
-      cursor: pointer;
-      height: 4rem;
-      line-height: 2.75rem;
-      label {
-        cursor: pointer;
-      }
-      .saucer {
-        display: inline-block;
-        height: 3rem;
-        width: 3rem;
-        vertical-align: middle;
-        margin-right: 0.25rem;
-        margin-left: 1rem;
-      }
-      &:hover {
-        background: $light_gray;
-      }
-      i {
-        margin-top: 0.5rem;
-      }
-    }
-    .section-header {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-      line-height: 2.75rem;
-      .fb-button {
-        margin-top: 0.3rem;
-        margin-right: 0.75rem;
-      }
-      .fa-caret-down,
-      .fa-caret-up {
-        margin-top: 1.5rem !important;
-      }
-    }
-    .points-section-header,
-    .pending-weeds-header,
-    .active-weeds-header,
-    .removed-weeds-header {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-      label {
-        margin: 0;
-        width: 44%;
-        margin-left: 1rem;
-        line-height: 2.1rem;
-      }
-      .fb-toggle-button {
-        margin-right: 2rem;
-        margin-top: 0.6rem;
-        float: right;
-        line-height: 0;
-      }
-    }
-    .section-action-btn-group {
-      float: right;
-      margin-top: 0.3rem;
-      line-height: 1.5rem;
-      .delete {
-        line-height: 1.5rem;
-      }
-    }
-    .points-section {
-      &.open {
-        background: rgba(0, 0, 0, 0.05);
-        margin-bottom: 1rem;
-      }
-      .row {
-        margin-left: -5px;
-        margin-right: 0;
-        label {
-          line-height: 3.5rem;
-          margin-top: 0;
-          margin-bottom: 0;
-        }
-        .input {
-          height: 3rem;
-        }
-        button {
-          margin-top: 0.85rem;
-          float: right;
-        }
-        .bp5-popover-wrapper {
-          display: none;
-        }
-      }
-    }
-    .points-section,
-    .panel-section {
-      .delete {
-        float: right;
-        line-height: revert;
-      }
-    }
-    .no-points,
-    .no-weeds {
-      margin-left: 2rem;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-    .fa-caret-down,
-    .fa-caret-up {
-      float: right;
-      font-size: 2rem;
-      margin-right: 2rem;
-      margin-top: 0;
-      color: $dark_gray;
-    }
-    i {
-      margin: 0.25rem;
-    }
-    button {
-      margin: 0.5rem;
-      float: none;
-    }
-    .approval-buttons {
-      display: inline;
-      button {
-        height: 2.5rem;
-        line-height: 0 !important;
-      }
-      i {
-        padding-right: 0.5rem;
-      }
-    }
-    .active-weeds {
-      .empty-state-graphic {
-        margin-top: 1rem;
-      }
-    }
-  }
-}
-
-.plant-inventory-panel {
-  .section-header {
-    .fb-button {
-      margin-top: 0.75rem;
-    }
-  }
-}
-
-.weeds-inventory-panel {
-  .active-weeds-header {
-    .fb-button {
-      line-height: 1rem;
-      margin-top: 0.5rem;
-      margin-right: 1rem;
-      i {
-        margin: 0 !important;
-        font-size: 1.5rem;
-      }
-    }
-  }
-}
-
-.curve-svg-wrapper {
-  .bp5-popover-target {
-    width: 100%;
-  }
-}
-
-.warning-line-text-popover {
-  border-radius: 5px;
-  .bp5-popover-content {
-    background: $dark_gray;
-    border-radius: 5px;
-  }
-  .bp5-popover-arrow {
-    display: none;
-  }
-  p {
-    color: $white;
-    font-size: 1.3rem;
-    margin-bottom: 0.5rem !important;
-  }
-  .warning-text {
-    max-width: 200px;
-    .top {
-      font-weight: bold;
-    }
-  }
-}
-
-.curve-action-popover {
-  .bp5-popover-content {
-    background: $dark_gray;
-  }
-  .bp5-popover-arrow-fill {
-    fill: $dark_gray;
-  }
-  .curve-action-menu {
-    .transparent-button {
-      position: absolute;
-      right: 0;
-      width: 50%;
-      color: $off_white
-    }
-    label {
-      width: 100%;
-      color: $off_white;
-      margin-top: 0.75rem;
-      margin-right: 1rem;
-    }
-    .filter-search {
-      width: 100%;
-      .bp5-popover-wrapper {
-        width: 120px;
-      }
-      button {
-        box-shadow: none !important;
-      }
-    }
-    input {
-      box-shadow: none;
-      width: 120px;
-    }
-    .curve-menu-row {
-      display: flex;
-      position: relative;
-      height: 3rem;
-      margin-top: 0.5rem;
-      &.last {
-        height: 2rem;
-      }
-    }
-  }
-}
-
-.curve-svg {
-  .data-labels,
-  .y-axis-line,
-  .warning-line {
-    pointer-events: none;
-  }
-}
-
-.curve-info-panel {
-  .panel-title {
-    .white-text {
-      color: $dark_gray;
-      &:hover {
-        color: $dark_gray;
-      }
-    }
-  }
-  .panel-header-icon-group {
-    i {
-      color: $dark_gray;
-    }
-  }
-}
-
-.curve-info-panel-content-wrapper {
-  .bp5-popover-wrapper {
-    float: right;
-    margin-left: 1rem;
-    margin-top: 1rem;
-  }
-  .full-indicator {
-    height: 2rem;
-    text-align: center;
-    color: $darkest_red;
-  }
-  .input-error-wrapper {
-    position: absolute;
-    margin: 0;
-  }
-  table {
-    th {
-      text-transform: uppercase;
-      color: $dark_gray;
-      font-size: 1.3rem;
-    }
-    td,
-    th {
-      background: $lighter_gray;
-      border: 1px solid $light_gray;
-      padding-left: 1rem;
-      p {
-        display: inline;
-        font-size: 1.4rem;
-        color: $dark_gray;
-      }
-      &.active {
-        background: $white;
-      }
-      &.active-input {
-        padding: 0;
-      }
-      .percent-green {
-        color: $green;
-      }
-      .percent-red {
-        color: $red;
-      }
-      input {
-        font-size: 1.4rem;
-        padding-left: 1rem;
-      }
-    }
-    tr {
-      &.hovered {
-        border: 2px solid $gray;
-        border-top-width: 0;
-        border-bottom-width: 0;
-      }
-    }
-  }
-  .row-radio {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    vertical-align: middle;
-    margin-left: 1rem;
-    margin-top: -0.25rem;
-    &.active {
-      &.full {
-        background: revert;
-        border: revert;
-        cursor: pointer;
-      }
-    }
-    &.full {
-      background: $light_gray;
-      border: $gray;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.curves-inventory-panel-content {
-  padding: 0;
-  .curve-search-item {
-    height: 4rem;
-    line-height: 4rem;
-    cursor: pointer;
-    .curve-search-item-info {
-      text-align: right;
-      font-size: 1rem;
-      padding-right: 1rem;
-      line-height: 4rem;
-      float: right;
-    }
-    .curve-search-item-name {
-      width: 40%;
-      margin-left: 1.25rem;
-    }
-  }
-  .section-header {
-    .fb-button {
-      margin-top: 0.75rem;
-    }
-    .fa-caret-up,
-    .fa-caret-down {
-      line-height: 3.75rem;
-      margin-top: 0 !important;
-    }
-  }
-}
-
-.crop-curve-info {
-  .bp5-collapse {
-    padding-top: 0.5rem;
-  }
-  p {
-    line-height: 4rem;
-    font-size: 1.3rem;
-  }
-  label {
-    margin-top: 0 !important;
-  }
-  .fa-external-link {
-    position: absolute;
-    top: 1rem;
-    right: 0;
-  }
-  .active-curve-name {
-    position: relative;
-    height: 4rem;
-    line-height: 3rem;
-    p,
-    .filter-search {
-      display: inline-block;
-      position: absolute;
-      right: 3rem;
-      width: 75%;
-      margin-top: 0.5rem;
-    }
-    p {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    label {
-      line-height: 4rem;
-    }
-  }
-  .curve-svg-wrapper {
-    background: $white;
-    box-shadow: 0 0 10px $light_gray;
-    border-radius: 5px;
-  }
-}
-
-.curve-info-panel-content-wrapper,
-.all-curve-info {
-  svg {
-    text {
-      user-select: none;
-    }
-  }
-}
-
-.curve-icon {
-  margin-left: 1rem;
-  vertical-align: middle;
-}
-
-.curve-usage-display {
-  margin-bottom: 2rem;
-  i[class*=fa-caret-] {
-    float: right;
-    font-size: 2rem;
-  }
-  label {
-    margin-top: 0 !important;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 1rem;
-  }
-  img {
-    cursor: pointer;
-  }
-}
-
-.sensors-panel,
-.controls-panel {
-  .panel-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-    .widget-wrapper {
-      box-shadow: none;
-      .widget-header {
-        background: none;
-        h5 {
-          color: $dark_gray;
-        }
-      }
-      .widget-body {
-        background: none;
-        border: none;
-      }
-      .widget-footer {
-        background: none;
-        * {
-          color: $dark_gray;
-        }
-      }
-    }
-    .title-help-icon:hover {
-      color: $dark_gray !important;
-    }
-    .title-help-text.open {
-      color: $dark_gray !important;
-      font-size: 1.2rem;
-    }
-  }
-}
-
-.controls-panel {
-  .move-settings.bp5-popover-wrapper {
-    padding-top: 2rem;
-  }
-  .index-indicator {
-    background: $dark_gray;
-  }
-}
-
-.sensors-panel {
-  .panel-content {
-    label {
-      margin-top: 0;
-    }
-  }
-}
-
-.farmware-panel,
-.designer-farmware-list-panel,
-.designer-farmware-info-panel,
-.farmware-add-panel {
-  .panel-content {
-    max-height: calc(100vh - 9rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    a {
-      text-decoration: none !important;
-      p {
-        font-size: 1.4rem;
-        font-weight: normal !important;
-        line-height: 2rem;
-      }
-    }
-  }
-}
-
-.designer-farmware-info-panel {
-  .panel-content {
-    position: relative;
-    padding-top: 2rem;
-    padding-bottom: 12rem;
-    button {
-      float: none;
-    }
-    .reset-configs {
-      margin-right: 1rem;
-      margin-top: 2rem;
-    }
-    .farmware-button {
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-    }
-    .farmware-form {
-      margin-top: 1rem;
-    }
-    .farmware-input-group {
-      margin-left: 0;
-    }
-    .advanced-configs {
-      .expandable-header {
-        margin-top: 2rem;
-      }
-    }
-  }
-}
-
-.photos-panel {
-  .panel-content {
-    position: relative;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-bottom: 12rem;
-    label {
-      margin-top: 0 !important;
-    }
-    a,
-    button {
-      margin: 0.5rem;
-    }
-    .filter-search {
-      button {
-        margin: 0;
-      }
-    }
-    fieldset {
-      label {
-        margin-top: 0.7rem;
-      }
-      button {
-        float: left;
-        height: 2rem;
-      }
-    }
-    .expandable-header {
-      margin-top: 2rem;
-    }
-    .filters-enabled-warning {
-      float: right;
-    }
-    .fa-exclamation-triangle {
-      font-size: 1.3rem;
-      color: $orange;
-    }
-    .toggle-label {
-      margin-top: 0 !important;
-      margin-bottom: 1rem;
-    }
-    .fb-toggle-button {
-      margin-top: 0.5rem !important;
-    }
-    .photo-filter-settings {
-      .filter-controls {
-        .banner {
-          display: none;
-        }
-        &.single-image-mode,
-        &.image-layer-disabled {
-          opacity: 0.40;
-          * {
-            pointer-events: none;
-          }
-          .banner {
-            display: inline-block;
-            position: absolute;
-            top: 25%;
-            left: -2.5%;
-            z-index: 10;
-            width: 105%;
-            padding: 0.5rem;
-            background-color: $dark_gray;
-            opacity: 0.90;
-            color: $off_white;
-            font-size: 1.8rem;
-            vertical-align: middle;
-            text-align: center;
-          }
-        }
-      }
-    }
-    .capture-settings {
-      .help-icon {
-        margin-left: 1rem;
-        font-size: 1.2rem;
-      }
-      .row {
-        margin-right: 0;
-        margin-top: 0.5rem;
-      }
-      label {
-        margin: 0;
-        line-height: 3rem;
-        font-style: normal;
-      }
-      .filter-search {
-        margin-right: -1rem;
-      }
-      .bp5-popover-wrapper {
-        display: inline-block;
-      }
-      .fb-toggle-button {
-        margin-top: 2rem;
-      }
-      .image-size-inputs {
-        margin-top: 1rem;
-        .size-inputs {
-          margin-top: 1rem;
-        }
-        .input {
-          margin-left: 0.25rem;
-          margin-right: -0.75rem;
-          input {
-            height: 3rem;
-          }
-        }
-        .resolution-change-warning {
-          i {
-            color: $darkest_red;
-            margin-right: 1rem;
-          }
-          p {
-            display: inline;
-            margin-right: 0.5rem;
-            font-size: 1.2rem;
-          }
-          .click {
-            cursor: pointer;
-            font-weight: bold;
-            &:hover {
-              color: $black;
-            }
-          }
-        }
-      }
-      .update-take-photo {
-        margin-top: 1rem;
-        .version-string {
-          display: inline;
-          margin-left: 1rem;
-        }
-      }
-      .capture-rotate-setting {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      }
-    }
-    .imaging-data-management {
-      label {
-        line-height: 3rem;
-      }
-      .highlight-modified-toggle {
-        label {
-          margin-top: 0.5rem;
-          margin-left: 0.5rem;
-        }
-      }
-    }
-    .farmware-form {
-      button {
-        float: none;
-      }
-    }
-    .farmware-input-group {
-      margin-left: 0;
-    }
-    .farmware-config-fields {
-      margin-left: 1rem;
-      .config-field {
-        margin-top: 1rem;
-      }
-    }
-    .advanced-configs {
-      margin-left: 1rem;
-      .farmware-config-fields {
-        margin-left: 0;
-      }
-      h4 {
-        font-size: 1.5rem;
-        .icon-toggle {
-          font-size: 1.1rem;
-          i {
-            font-size: 0.9rem;
-          }
-        }
-      }
-    }
-  }
-  .title-help {
-    font-size: 1.3rem;
-    .fa-question-circle {
-      position: absolute;
-      top: -3rem;
-      right: 0;
-      font-size: 1.4rem;
-    }
-    a {
-      text-decoration: none !important;
-    }
-    .fa-external-link {
-      margin-left: 1rem;
-    }
-    .update {
-      display: inline;
-      p {
-        display: inline;
-        margin-left: 1rem;
-      }
-      .fa-refresh {
-        display: inline;
-        margin-left: 1rem;
-        color: $dark_gray;
-      }
-    }
-    .title-help-text.open {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.farmware-env-editor {
-  .row {
-    margin-bottom: 1rem;
-    &.no-margin {
-      margin: 0;
-    }
-  }
-  .env-hide-toggle {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-  .env-editor-warning {
-    margin: 0 -15px 2rem -15px;
-    padding: 1rem 1.5rem 1rem 2rem;
-    background: color.adjust($orange, $alpha: -0.6);
-    p {
-      line-height: 1.75rem;
-      font-size: 1.2rem;
-      font-weight: bold;
-    }
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 1rem;
-  }
-}
-
-.env-editor-lua {
-  margin: 0 -15px 0 -15px;
-  padding: 1rem 1.5rem 1rem 2rem;
-  background: color.adjust($blue, $alpha: -0.6);
-  p {
-    line-height: 1.75rem;
-    font-size: 1.2rem;
-    font-weight: bold;
-  }
-}
-
-.designer-sequence-list-panel {
-  .panel-content {
-    height: calc(100vh - 14rem);
-    overflow-y: scroll;
-    overflow-x: hidden;
-    padding-bottom: 6rem;
-    @media screen and (max-width: $mobile_max_width) {
-      max-height: calc(100vh - 19rem);
-    }
-    .panel-top {
-      margin-left: 0 !important;
-    }
-    a {
-      text-decoration: none !important;
-      p {
-        font-size: 1.4rem;
-        font-weight: normal !important;
-        line-height: 2rem;
-      }
-    }
-    .folders-panel {
-      margin-left: -1rem;
-      margin-right: -1rem;
-    }
-  }
-  .fullscreen {
-    white-space: nowrap;
-    height: 3rem;
-    margin-top: 0.75rem;
-    margin-right: 1rem;
-    i {
-      margin-left: 1rem;
-    }
-  }
-}
-
-.group-detail-panel,
-.designer-regimen-editor-panel,
-.designer-sequence-editor-panel {
-  .panel-header {
-    input {
-      position: relative;
-      z-index: 1;
-      margin: 1rem;
-      width: 84%;
-      @media screen and (max-width: $mobile_max_width) {
-        width: 65%;
-      }
-    }
-  }
-}
-
-.designer-sequence-editor-panel {
-  .panel-content {
-    .sequence-editor-content {
-      hr {
-        margin-top: 1rem;
-      }
-      @media screen and (max-width: 767px) {
-        margin-left: 5px;
-        padding-right: 0;
-      }
-    }
-    .add-command-button-container {
-      display: block;
-    }
-    .drag-drop-area {
-      display: none;
-    }
-    label {
-      margin-top: 0;
-    }
-    @media screen and (max-width: 767px) {
-      padding: 0;
-    }
-  }
-}
-
-.weed-info-panel,
-.point-info-panel,
-.designer-regimen-editor-panel,
-.designer-sequence-editor-panel {
-  .green,
-  .red {
-    .panel-title {
-      .fa-paint-brush,
-      .fa-expand,
-      .fa-trash,
-      .fa-clone,
-      .fa-magic,
-      .fa-spinner {
-        color: $white;
-      }
-    }
-  }
-}
-
-.designer-regimen-scheduler-panel {
-  .panel-content {
-    display: inline-block;
-    max-height: calc(100vh - 9rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: 100%;
-  }
-}
-
-.designer-regimen-editor-panel {
-  .title {
-    width: 45%;
-  }
-  .panel-title {
-    input {
-      margin: 1rem;
-      width: 75%;
-    }
-    .fa-clone,
-    .fa-trash,
-    .fa-paint-brush {
-      float: right;
-      margin-top: 1.5rem;
-    }
-    .button-group {
-      margin: 0;
-      float: right;
-      width: unset;
-    }
-    .color-picker {
-      float: right;
-    }
-    .fb-button {
-      margin: 1.5rem;
-    }
-  }
-  .green,
-  .red {
-    .panel-title {
-      .color-picker {
-        .icon-saucer {
-          color: $white;
-        }
-      }
-    }
-  }
-  .panel-content {
-    max-height: calc(100vh - 14rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    label {
-      margin-top: 0;
-    }
-  }
-}
-
-.messages-panel {
-  .panel-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-    label {
-      margin-top: 0;
-    }
-  }
-}
-
-.logs-panel {
-  .panel-content {
-    margin-top: 6rem;
-    max-height: calc(100vh - 9rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
-
-.documentation-panel,
-.support-panel,
-.tours-panel,
-.help-panel {
-  @media screen and (max-width: $mobile_max_width) {
-    .help-panel-header {
-      position: relative;
-      margin-top: 5rem;
-    }
-    .panel-content {
-      padding: 1rem;
-      padding-top: 0;
-    }
-  }
-  .panel-content {
-    max-height: calc(100vh - 12rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-bottom: 12rem;
-    label {
-      margin-top: 0 !important;
-    }
-  }
-}
-
-.documentation-panel {
-  .panel-content {
-    height: 102.5%;
-    padding: 0;
-    overflow: hidden;
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-  }
-}
-
-.help-panel-header {
-  background: $lighter_gray;
-  height: 4rem;
-  padding: 1rem;
-  padding-top: 0.5rem;
-  i {
-    font-size: 2rem;
-    margin-left: 0.25rem;
-    width: 2.25rem;
-  }
-  i,
-  img {
-    margin-right: 1rem;
-    margin-bottom: 0.5rem;
-    vertical-align: middle;
-    filter: brightness(0) opacity(0.75);
-    text-align: center;
-  }
-  a {
-    display: block;
-    font-weight: bold;
-    line-height: 3.5rem;
-  }
-  .fa-chevron-down,
-  .fa-chevron-up {
-    position: absolute;
-    top: 0.25rem;
-    right: 0;
-    padding: 1rem;
-    font-size: 1.25rem;
-    color: $medium_gray;
-  }
-  .bp5-collapse {
-    overflow: visible;
-  }
-  .bp5-collapse-body {
-    position: relative;
-    z-index: 1;
-    margin: -1rem;
-    margin-top: 0;
-    background: $lighter_gray;
-    a {
-      padding: 1rem;
-      line-height: 0;
-      &:hover {
-        background: $light_gray;
-      }
-    }
-  }
-}
-
-.support-panel-content {
-  padding: 2rem;
-  padding-top: 0;
-  h1 {
-    font-size: 1.2rem;
-    font-weight: bold;
-  }
-  .row {
-    margin-bottom: 3rem;
-  }
-  a {
-    &.button {
-      display: block;
-      margin-top: 1rem;
-      text-decoration: none !important;
-      text-align: center;
-      border: 1.5px solid $dark_gray;
-      border-radius: 5px;
-      padding: 0.75rem;
-      line-height: 1.3rem;
-      b {
-        display: block;
-        font-size: 1.1rem;
-        text-transform: uppercase;
-      }
-      i {
-        font-size: 0.9rem;
-        color: $medium_gray;
-        font-weight: normal;
-      }
-      &:hover {
-        background: $lighter_gray;
-      }
-    }
-    &.inline {
-      text-decoration: underline;
-      margin-left: 0.25rem;
-    }
-  }
-}
-
-.feedback {
-  p {
-    color: $dark_gray !important;
-    margin-bottom: 1rem !important;
-    font-weight: normal !important;
-    font-style: italic;
-  }
-  textarea {
-    font-size: 1.1rem;
-    height: 7.5rem;
-  }
-  button {
-    margin-top: 1rem;
-    float: none;
-    &:hover {
-      font-size: 1rem !important;
-    }
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    line-height: 0;
-    vertical-align: bottom;
-    margin-left: 1rem;
-  }
-}
-
-.jobs-panel {
-  .panel-content {
-    display: inline-block;
-    overflow-y: auto;
-    overflow-x: auto;
-    width: 100%;
-    padding: 0;
-  }
-}
-
-.jobs-tab {
-  overflow-y: scroll;
-  max-height: 26rem;
-  &.bp5-popover {
-    margin-top: 1.5rem;
-  }
-  table {
-    p {
-      padding: 1rem;
-    }
-    .job-name {
-      max-width: 20rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    thead {
-      position: sticky;
-      top: 0;
-      z-index: 999;
-      background: $white;
-    }
-    tr {
-      transform: scale(1);
-    }
-    th,
-    td {
-      white-space: nowrap;
-      font-size: 1.2rem;
-      padding: 0.75rem;
-    }
-    th {
-      text-transform: uppercase;
-    }
-    .right-align {
-      text-align: right;
-    }
-    .progress {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 99%;
-      opacity: 0.5;
-      border-radius: 0;
-      pointer-events: none;
-    }
-    .fa-clock-o {
-      cursor: default !important;
-    }
-  }
-}
-
-.jobs-panel-portal {
-  .bp5-popover-content {
-    padding: 0;
-    width: min(500px, 100vw - 1rem);
-    max-height: calc(100vh - 10rem);
-    overflow: hidden;
-    padding-top: 1rem;
-  }
-}
-
-.saved-garden-edit-panel {
-  .buttons {
-    position: absolute;
-    top: 1.25rem;
-    right: 0.5rem;
-    .fa-trash {
-      color: $white;
-    }
-  }
-}
-
-.saved-garden-edit-panel-content {
-  button {
-    margin-left: 0.5rem;
-    margin-top: 1rem;
-  }
-  .point-list-wrapper {
-    margin-top: 2rem;
-  }
-  .row {
-    margin: 0;
-  }
-  textarea {
-    font-size: 1.2rem;
-  }
-}
-
-.desktop-hide {
-  display: none !important;
-  @media screen and (max-width: 1075px) {
-    display: block !important;
-  }
-}
-
-.setup-panel {
-  label {
-    margin-top: 0 !important;
-  }
+.weeds-inventory-panel,
+.zones-inventory-panel,
+.point-inventory-panel,
+.groups-panel {
   .panel-content {
-    max-height: calc(100vh - 9rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    h1 {
-      display: inline-block;
-      cursor: default;
-    }
-    .progress-meter {
-      display: inline;
-      margin-left: 2rem;
-      font-weight: bold;
-      color: $medium_light_gray;
-    }
-    .start-over {
-      margin-top: 2rem;
-    }
-    h1,
-    h2,
-    h3 {
-      margin-bottom: 0;
+    .points-section-header {
       cursor: pointer;
-      .fa-caret-up,
-      .fa-caret-down {
-        font-size: 2.5rem;
-        float: right;
-        line-height: 1rem;
-        margin-right: 1rem;
-        margin-top: 0.25rem;
+      height: 4rem;
+      line-height: 2.75rem;
+      label {
+        cursor: pointer;
       }
       .saucer {
         display: inline-block;
-        float: none;
+        height: 3rem;
+        width: 3rem;
+        vertical-align: middle;
+        margin-right: 0.25rem;
         margin-left: 1rem;
-        margin-top: 0;
-        vertical-align: top;
-      }
-    }
-    .saucer {
-      float: right;
-      margin-right: 0.5rem;
-      margin-top: 0.5rem;
-      height: 1.5rem;
-      width: 1.5rem;
-      i {
-        font-size: 1rem;
-        color: $white;
-        vertical-align: top;
-        width: 1.5rem;
-        line-height: 1.5rem;
-        text-align: center;
-      }
-    }
-    h1 {
-      font-weight: bold;
-      font-size: 2rem;
-      cursor: default;
-    }
-    h2 {
-      font-weight: bold;
-      font-size: 1.4rem;
-      padding: 1rem 1.5rem 1rem 1.5rem;
-    }
-    h3 {
-      font-size: 1.4rem;
-      margin-bottom: 1rem;
-    }
-    .prerequisites {
-      margin-top: 1rem;
-      p {
-        font-size: 1.3rem;
-      }
-    }
-    .prerequisites,
-    .prereq-not-met {
-      font-size: 1.3rem;
-      padding: 1rem;
-      background: $panel_light_red;
-      border: 1px solid $dark_red;
-      border-radius: 5px;
-    }
-    .wizard-header {
-      margin-bottom: 2rem;
-    }
-    .wizard-section {
-      h2 {
-        margin-top: 0;
-      }
-      .bp5-collapse-body {
-        margin-bottom: 2rem;
-      }
-    }
-    .wizard-step {
-      margin-left: -15px;
-      margin-right: -15px;
-      padding-left: 2rem;
-      padding-right: 2rem;
-      background: $lighter_gray;
-      .bp5-collapse-body {
-        margin-bottom: 0;
-      }
-      img {
-        width: 100%;
-        border-radius: 5px;
-        margin-bottom: 1rem;
-      }
-    }
-    .wizard-step-info {
-      display: inline;
-    }
-    .warning-banner {
-      margin: 0 -15px 1rem -15px;
-      padding: 1rem 1.5rem 1rem 2rem;
-      background: color.adjust($orange, $alpha: -0.6);
-      p {
-        line-height: 1.75rem;
-        font-size: 1.3rem;
-        font-weight: bold;
       }
     }
-    h2,
-    .wizard-step-header {
-      margin-left: -15px;
-      margin-right: -15px;
-      background: $panel_light_gray;
-      &:hover {
-        background: $light_gray;
-      }
-    }
-    .wizard-step-header {
-      padding: 0.5rem 1.5rem 0 1.5rem;
-      cursor: pointer;
+    .points-section {
       &.open {
-        background: $lighter_gray;
-        h3 {
-          font-weight: bold;
-        }
-      }
-      p {
-        display: inline;
-        color: $medium_light_gray;
-        margin-left: 1rem;
+        margin-bottom: 1rem;
       }
-    }
-    .wizard-answer {
-      button {
-        margin: 1rem;
-        float: none;
-        padding: 1rem 2rem 1rem 2rem;
+      .row {
+        padding: 0 1rem;
       }
     }
-    iframe {
-      aspect-ratio: 16/9;
-      border-radius: 5px;
-      box-shadow: 0px 0px 7px 0px $translucent;
+    .no-points,
+    .no-weeds {
+      margin-left: 1rem;
+      padding-bottom: 1rem;
     }
-    .wizard-components {
-      margin: auto;
-      width: fit-content;
-      border-radius: 5px;
-      box-shadow: 0 0 7px $translucent;
-      padding: 1rem;
-      background: $panel_light_gray;
-      &.no-border {
-        border: none;
-        width: 100%;
-        padding: 0;
-      }
-      &.no-background {
-        border: none;
-        width: max-content;
-        padding: 0;
-      }
-      &.full-width {
-        width: 100%;
-      }
-      &:empty {
-        display: none;
-      }
-      .widget-wrapper {
-        margin-bottom: 0;
-      }
-      .tool-verification-status {
-        text-align: center;
-        button {
-          margin: 1rem;
-          float: none;
-        }
-      }
-      .connectivity {
-        .diagnosis-indicator {
-          position: absolute;
-          top: -3rem;
-          height: 2rem;
-          width: 2rem;
-          .fa {
-            margin-left: -0.25rem;
-            margin-top: -0.1rem;
-          }
-        }
-        .saucer-connector {
-          display: none;
-        }
-      }
-      .flash-firmware {
-        display: block;
-        float: none;
-      }
-      .tour-start {
-        display: block;
-        margin: auto;
-        float: none;
-        padding: 1rem;
-      }
-      .setting {
-        .no-pad {
-          padding-left: 1.5rem;
-          padding-right: 1.5rem;
-        }
-      }
-      .pin-binding-input-rows {
-        .row {
-          margin-bottom: 0.5rem;
-        }
-        label {
-          margin-left: 1.5rem;
-        }
-      }
-      .flow-rate-input {
-        .fb-button {
-          margin-top: 0;
-        }
-      }
+    .fa-caret-down,
+    .fa-caret-up {
+      margin: 1rem;
     }
-    .wizard-step-question {
-      font-style: italic;
+    button {
+      float: none;
     }
-    .markdown {
-      display: block;
-      p {
-        width: 100%;
-        overflow: visible;
-        color: $dark_gray;
-        font-size: 1.4rem;
-        white-space: pre-wrap;
-        line-height: 2rem;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+    .approval-buttons {
+      i {
+        padding-right: 0.5rem;
       }
     }
-    .troubleshooting {
-      padding-bottom: 1rem;
-      a {
-        float: none;
-        padding: 0;
-        padding-left: 0.25rem;
-      }
-      .feedback {
-        textarea {
-          margin-top: 0.5rem;
-        }
-        p {
-          margin-bottom: 0 !important;
-          padding-bottom: 0 !important;
-        }
+    .pending-weeds {
+      .fa-check {
+        margin: 0 !important;
       }
     }
-    .troubleshooting-tip {
-      margin: 1rem 0;
-      border: 2px solid $medium_light_gray;
-      border-radius: 5px;
-      padding: 1rem;
-      cursor: pointer;
-      background: $panel_light_gray;
-      &:hover {
-        background: $white;
-        box-shadow: 0 1px 5px 0 $translucent;
-      }
-      p {
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-      a {
-        font-size: 1.4rem;
-        text-decoration: underline;
-      }
-      &.selected {
-        border-color: $dark_gray;
-        background: $white;
-        p:first-of-type {
-          font-weight: bold;
-          padding-bottom: 0.5rem;
-        }
-        fieldset {
-          p {
-            font-weight: normal !important;
-          }
-        }
-      }
-      .fb-button {
-        float: none;
-      }
-      .arrow-button {
-        p {
-          font-size: 0.9rem;
-        }
-      }
-      .farmbot-origin {
-        margin-top: 1rem;
-      }
-      .motor-settings {
-        .row {
-          margin-top: 1rem;
-        }
-      }
-      .dropdown-camera-calibration-config,
-      .camera-config-number-box {
-        .bp5-popover-wrapper {
-          display: inline-block;
-          margin-left: 1rem;
+  }
+}
+
+.sensors-panel,
+.controls-panel {
+  .panel-content {
+    .widget-wrapper {
+      box-shadow: none;
+      .widget-header {
+        background: none;
+        h5 {
+          color: $dark_gray;
         }
       }
-      .filter-search {
-        .bp5-popover-wrapper {
-          display: unset;
-          margin-left: unset;
-        }
+      .widget-body {
+        background: none;
+        border: none;
       }
-      .yellow {
-        float: none;
-        &:hover {
-          font-size: 1rem;
+      .widget-footer {
+        background: none;
+        * {
+          color: $dark_gray;
         }
       }
-      iframe {
-        margin-top: 1rem;
-      }
-      .wizard-find-home-btn {
-        float: none;
-      }
-    }
-    .setup-complete {
-      margin-top: 2rem;
-      text-align: center;
-      p,
-      .saucer {
-        display: inline;
-        font-size: 1.5rem;
-        font-weight: bold;
-        margin-left: 1rem;
-        float: none;
-      }
-      .saucer {
-        display: inline-block;
-      }
     }
-  }
-}
-
-.camera-check {
-  text-align: center;
-  p {
-    margin-top: 1rem;
-  }
-  button {
-    float: none;
-  }
-  img {
-    width: 100%;
-    padding: 1rem;
-  }
-}
-
-.farmbot-model-selection {
-  width: 27rem;
-  padding: 1rem;
-  .fb-button {
-    margin: 1rem;
-  }
-  p {
-    margin-top: 0.5rem;
-  }
-  .seed-checkbox {
-    .fb-checkbox {
-      display: inline-block;
-      margin-top: 1rem;
+    .title-help-icon:hover {
+      color: $dark_gray !important;
     }
-    p {
-      display: inline;
-      margin-left: 0.5rem;
-      vertical-align: bottom;
-      line-height: 3rem;
+    .title-help-text.open {
+      color: $dark_gray !important;
+      font-size: 1.2rem;
     }
   }
 }
 
-.peripherals-check {
-  margin: 1rem;
-}
-
-.camera-calibration-card {
-  padding: 1rem;
-  width: 15rem;
-  svg {
-    width: 100%;
-    height: 100%;
-    background: $dark_gray;
+.desktop-hide {
+  display: none !important;
+  @media screen and (max-width: 1075px) {
+    display: block !important;
   }
 }
diff --git a/frontend/css/farm_designer/farm_events.scss b/frontend/css/farm_designer/farm_events.scss
deleted file mode 100644
index ac32557986..0000000000
--- a/frontend/css/farm_designer/farm_events.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.farm-event-panel {
-  .fa-calendar {
-    position: absolute;
-    top: 0.5rem;
-    left: 1rem;
-  }
-  .panel-content {
-    padding: 0 1rem 6rem 0;
-    padding-bottom: inherit;
-  }
-}
-
-.farm-events {
-  max-height: calc(100vh - 15rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-  margin-right: -10px;
-  padding-bottom: inherit;
-  @media screen and (max-width: $mobile_max_width) {
-    max-height: calc(100vh - 20rem);
-  }
-}
-
-.farm-event {
-  display: flex;
-  margin-top: 1rem;
-  margin-right: 10px;
-}
-
-.farm-event-year {
-  text-align: center;
-  margin-top: 1rem;
-  font-size: 1.1rem;
-  font-weight: bold;
-}
-
-.farm-event-date {
-  flex: 1;
-  text-align: center;
-}
-
-.farm-event-date-day {
-  font-size: 2rem;
-}
-
-.farm-event-data {
-  flex: 5;
-  max-width: 83%;
-}
-
-.farm-event-variable {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 125%;
-  font-size: 1rem;
-  line-height: 1.25rem;
-}
-
-.farm-event-data-block {
-  display: flex;
-  position: relative;
-  padding: 0.8rem;
-  font-size: 1.2rem;
-  align-items: center;
-  background: $white;
-  border-bottom: 1px solid $gray;
-  p,
-  span {
-    color: $medium_gray;
-  }
-  .farm-event-data-time {
-    z-index: 1;
-    width: 6rem;
-  }
-  .farm-event-data-executable {
-    z-index: 1;
-    margin-left: 1rem;
-    max-width: 65%;
-    overflow-wrap: anywhere;
-    p {
-      margin-top: 0.2rem;
-      margin-bottom: 0.75rem !important;
-    }
-  }
-  &:hover {
-    i {
-      opacity: 1;
-    }
-  }
-  .edit-link {
-    position: absolute;
-    right: 0.8rem;
-  }
-  .fa-external-link {
-    margin-left: 0.5rem;
-  }
-  i {
-    opacity: 0;
-  }
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    background: $white;
-    opacity: 0.7;
-  }
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 7rem;
-    bottom: 0;
-    width: 1px;
-    background: $gray;
-  }
-}
diff --git a/frontend/css/farm_designer/profile_viewer.scss b/frontend/css/farm_designer/profile_viewer.scss
new file mode 100644
index 0000000000..e74fe4130d
--- /dev/null
+++ b/frontend/css/farm_designer/profile_viewer.scss
@@ -0,0 +1,129 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.profile-viewer {
+  position: fixed;
+  bottom: 0;
+  z-index: 2;
+  width: calc(100% - $mobile_max_width);
+  background: #e5e5e5;
+  transition: transform 0.5s ease-out;
+  box-shadow: 0 0 1px rgba(0, 0, 0, .3);
+  transform: translateY(10rem) translateX($mobile_max_width);
+  &.panel-closed-mobile,
+  &.panel-closed {
+    width: 100%;
+    transform: translateY(10rem);
+  }
+  &.none-chosen {
+    transform: translateY(21rem) translateX($mobile_max_width);
+    &.panel-closed-mobile,
+    &.panel-closed {
+      transform: translateY(21rem);
+    }
+  }
+  @media screen and (max-width: $mobile_max_width) {
+    &.panel-open {
+      display: none;
+    }
+  }
+  &.open {
+    transform: translateY(0) translateX($mobile_max_width);
+    &.panel-closed-mobile,
+    &.panel-closed {
+      transform: translateY(0);
+    }
+    .profile-button {
+      i {
+        line-height: 6rem;
+      }
+    }
+  }
+  .profile-button {
+    margin: auto;
+    cursor: pointer;
+    margin-top: -3rem;
+    border-radius: 50%;
+    width: 6rem;
+    height: 6rem;
+    background: $magenta;
+    transition: background-color 0.3s ease-out;
+    text-align: center;
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .3);
+    &:hover {
+      background: color.adjust($magenta, $lightness: 5%);
+    }
+    i {
+      color: $off_white;
+      line-height: 3.25rem;
+      font-size: 2rem;
+      transition: line-height 0.5s ease-out;
+    }
+  }
+  .profile-content {
+    label {
+      display: block;
+      margin: auto;
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      text-align: center;
+    }
+    .no-profile {
+      height: 12.5rem;
+      text-align: center;
+      margin-top: 1.5rem;
+    }
+    .left-label,
+    .right-label {
+      position: absolute;
+      top: 50%;
+      font-weight: bold;
+    }
+    .left-label {
+      left: 2rem;
+    }
+    .right-label {
+      right: 2rem;
+    }
+    svg {
+      display: block;
+      margin: auto;
+      height: 10rem;
+      width: 90%;
+      border-radius: 5px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      background: #fafafa;
+      box-shadow: 0 0 4px rgba(0, 0, 0, .1);
+      &.expand {
+        height: unset;
+        max-height: 60vh;
+      }
+    }
+    .profile-options {
+      width: 100%;
+      height: 4rem;
+      text-align: center;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      background: #f2f2f2;
+      box-shadow: 0px 0px 1px 0px #666666;
+      button {
+        display: inline;
+        float: none;
+        margin-right: 3rem;
+      }
+      label {
+        display: inline;
+        margin-right: 0.5rem;
+        line-height: 2rem;
+        vertical-align: text-top;
+      }
+      input {
+        height: 2rem !important;
+        width: 5rem;
+        margin-right: 3rem;
+      }
+    }
+  }
+}
diff --git a/frontend/css/farm_designer/three_d_garden.scss b/frontend/css/farm_designer/three_d_garden.scss
new file mode 100644
index 0000000000..4c31e5f76b
--- /dev/null
+++ b/frontend/css/farm_designer/three_d_garden.scss
@@ -0,0 +1,555 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.promo-loading-container {
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -9999999;
+}
+
+.promo-loading-image {
+  height: 100vh;
+}
+
+.promo-loading-text {
+  font-family: 'Inknut Antiqua', sans-serif;
+  font-size: 2rem;
+  font-weight: bold;
+  color: $off_white;
+  text-shadow: 0 0 3.5rem #000, 0 0 1rem #000;
+  text-align: center;
+  margin: 0;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  align-content: center;
+}
+
+.promo {
+  &.three-d-garden {
+    .garden-bed-3d-model {
+      width: 100vw;
+    }
+
+    .overlay {
+      .settings-bar {
+        button {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.three-d-garden {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  cursor: grab;
+
+  body {
+    margin: 0;
+  }
+
+  .garden-bed-3d-model {
+    width: calc(100vw + 45rem);
+    position: relative;
+    height: 100vh;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    @media screen and (max-width: 768px) {
+      width: 100vw;
+    }
+  }
+
+  .gear {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 1rem;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.4);
+    box-shadow: $translucent2 0px 0px 5px;
+    padding: 7px;
+    border-radius: 5px;
+    backdrop-filter: blur(5px);
+    opacity: 0;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+    user-select: none;
+
+    .settings-bar {
+      display: flex;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      justify-content: center;
+      gap: 1.25rem;
+      padding: 1rem;
+      overflow-x: scroll;
+      background: linear-gradient(0deg, $translucent5, transparent);
+      scrollbar-width: none;
+
+      @media screen and (max-width: 768px) {
+        justify-content: left;
+        pointer-events: all;
+      }
+
+      .setting-section {
+        pointer-events: all;
+      }
+
+      .setting-title {
+        color: $off_white;
+        font-family: 'Inknut Antiqua';
+        text-shadow: 0 0 10px black;
+        line-height: 1.8rem;
+        text-align: center;
+        font-size: 1rem;
+      }
+
+      .row {
+        display: flex;
+        margin: 0;
+        background: rgba(255, 255, 255, 0.6);
+        box-shadow: $translucent2 0px 0px 1rem;
+        border-radius: 2.5rem;
+        height: 3.1rem;
+        padding: 0.3rem;
+        justify-content: space-evenly;
+        backdrop-filter: blur(5px);
+        gap: 0.5rem;
+        &:after,
+        &:before {
+          content: unset;
+          display: unset;
+          clear: unset;
+        }
+      }
+
+      button {
+        padding: 0 0.85rem;
+        border-radius: 2.5rem;
+        font-weight: bold;
+        border: none;
+        background: none;
+        white-space: nowrap;
+        color: $off_black;
+
+        &.outdoor.active,
+        &.lab.active,
+        &.genesis.active,
+        &.standard.active,
+        &.mobile.active {
+          background: rgba(255, 255, 255, 0.6);
+        }
+
+        &.genesis-xl.active {
+          background: linear-gradient(315deg, #22a36d, #4ea3ed);
+          color: $off_white;
+        }
+
+        &.winter.active {
+          background: linear-gradient(-15deg, #152e40, #3e8dc2);
+          color: $off_white;
+        }
+
+        &.spring.active {
+          background: linear-gradient(15deg, #055b08, #49cc78);
+          color: $off_white;
+        }
+
+        &.summer.active {
+          background: linear-gradient(-15deg, #d87f09, #f5e40a);
+        }
+
+        &.fall.active {
+          background: linear-gradient(15deg, #502402, #c69075);
+          color: $off_white
+        }
+
+        &:hover {
+          cursor: pointer;
+          background: $translucent3_white;
+        }
+
+        &.disabled {
+          color: $placeholder_gray;
+
+          &:hover {
+            cursor: not-allowed;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
+  .tool-tip {
+    position: absolute;
+    left: 0;
+    bottom: 6.5rem;
+    right: 0;
+    margin: auto;
+    width: fit-content;
+    color: $off_white;
+    background: rgba(120, 0, 0, 0.65);
+    padding: 0.75rem 1rem;
+    border-radius: 5px;
+    text-align: center;
+    pointer-events: none;
+    backdrop-filter: blur(5px);
+    box-shadow: $translucent2 0px 0px 5px;
+
+    @media screen and (max-width: 768px) {
+      margin: 0 1rem;
+    }
+  }
+
+  .all-configs {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 22rem;
+    background: $dark_gray;
+    text-align: left;
+    padding: 1rem;
+    border-radius: 5px;
+    max-height: 30rem;
+    overflow-y: scroll;
+
+    .close {
+      position: absolute;
+      top: 0.5rem;
+      right: 1rem;
+      margin: 0;
+      cursor: pointer;
+      font-size: 1rem;
+      padding: 0.5rem 0.75rem;
+      background: none;
+      border-radius: 5px;
+
+      &:hover {
+        background: $medium_gray;
+      }
+    }
+
+    .spacer {
+      margin-top: 1rem;
+    }
+
+    details {
+      color: $off_white;
+
+      label {
+        font-weight: bold;
+        color: $off_white;
+        text-transform: none;
+        font-size: 0.9rem;
+      }
+    }
+
+    summary {
+      margin: -1rem;
+      cursor: pointer;
+      padding: 1rem;
+
+      &:hover {
+        background: $dark_gray;
+      }
+    }
+
+    .config-row {
+      display: grid;
+      grid-template-columns: min-content minmax(30%, 200px) auto;
+      margin-bottom: 0.25rem;
+
+      span {
+        width: 8rem;
+        padding-left: 1rem;
+        color: $gray;
+      }
+
+      input[type="checkbox"] {
+        width: 1.1rem;
+        height: 1.1rem;
+        justify-self: left;
+        cursor: pointer;
+        box-shadow: none;
+      }
+
+      input[type="number"] {
+        width: 100%;
+        max-width: 4rem;
+        height: 1rem;
+        font-size: 0.9rem;
+        box-shadow: none;
+      }
+
+      input[type="radio"] {
+        width: 1.1rem;
+        height: 1.1rem;
+        cursor: pointer;
+        box-shadow: none;
+      }
+
+      .options {
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      input[type="range"] {
+        width: 4rem;
+        margin-left: -2rem;
+        cursor: pointer;
+        box-shadow: none;
+        height: 1rem;
+      }
+    }
+  }
+
+  .promo-info {
+    display: grid;
+    position: absolute;
+    top: 3rem;
+    right: 4rem;
+    color: $off_white;
+    text-align: right;
+    pointer-events: none;
+    text-shadow: 0 0 3.5rem $black, 0 0 1rem $black;
+    gap: 1rem;
+    justify-items: right;
+
+    .title {
+      margin: 0;
+      font-family: 'Inknut Antiqua';
+      font-size: 3.5rem;
+      line-height: 5rem;
+      font-weight: bold;
+    }
+
+    .description {
+      margin: 0;
+      max-width: 40vw;
+
+      p {
+        color: $off_white;
+        font-size: 1.25rem;
+        line-height: 1.7rem;
+        font-weight: bold;
+      }
+
+      .short {
+        display: none;
+      }
+
+      .full {
+        display: inline;
+      }
+    }
+
+    .buy-button {
+      display: flex;
+      pointer-events: all;
+      background: #00a579e0;
+      border-radius: 7px;
+      box-shadow: $translucent2 0px 0px 10px;
+      backdrop-filter: blur(5px);
+      padding: 0.1rem 1.75rem;
+      text-shadow: none;
+      text-transform: uppercase;
+      text-decoration: none;
+      gap: 0.4rem;
+      align-items: center;
+
+      p {
+        margin: 0;
+        color: $off_white;
+        font-size: 1.5rem;
+        line-height: 4rem;
+        font-weight: bold;
+      }
+
+      .genesis-xl {
+        background: linear-gradient(315deg, #22a36d, #4ea3ed);
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+        color: $off_white;
+        border-radius: 50%;
+        height: 2.5rem;
+        width: 2.5rem;
+        line-height: 2.5rem;
+        text-align: center;
+        font-size: 1.2rem;
+        vertical-align: middle;
+      }
+
+      &:hover {
+        background: #00bb89e5;
+      }
+    }
+  }
+
+  .beacon-info {
+    width: 34rem;
+    background: $white;
+    background: $translucent8_white;
+    color: $black;
+    box-shadow: $translucent2 0px 0px 10px;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    backdrop-filter: blur(5px);
+    text-align: left;
+    user-select: none;
+    p {
+      margin-bottom: 0;
+      margin-top: 1rem;
+      font-weight: bold;
+      font-size: 1.25rem;
+      color: $black;
+      line-height: 1.6rem;
+    }
+    a {
+      text-decoration: underline !important;
+      text-underline-offset: 0.1rem;
+      text-underline-position: from-font;
+      font-weight: bold;
+      color: $dark_blue;
+    }
+    iframe {
+      margin-top: 1rem;
+      width: 100%;
+      height: auto;
+      border-radius: 0.35rem;
+      aspect-ratio: 16 / 9;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      font-size: 1rem;
+      h2 {
+        margin: 0;
+        font-family: 'Inknut Antiqua';
+        line-height: 100%;
+        font-weight: bold;
+      }
+      .exit-button {
+        width: 2rem;
+        height: 2rem;
+        aspect-ratio: 1 / 1;
+        border-radius: 50%;
+        filter: grayscale(100%);
+        font-size: 0.75rem;
+        line-height: 2rem;
+        text-align: center;
+        background: rgba(255, 255, 255, 0.4);
+        box-shadow: $translucent2 0px 0px 0.75rem;
+        &:hover {
+          cursor: pointer;
+          background: rgba(255, 255, 255, 0.6);
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .beacon-info-wrapper {
+      display: grid;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      align-items: end;
+      transform: none!important;
+      * {
+        transform: none!important;
+      }
+      .beacon-info {
+        width: initial;
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+        overflow: scroll;
+        height: 33vh;
+        font-size: 100%;
+
+        .header {
+          h2 {
+            font-size: 1.3rem;
+          }
+        }
+
+        p {
+          font-size: 1rem;
+          line-height: 1.2rem;
+        }
+      }
+    }
+    .promo-info {
+      top: 1rem;
+      right: 1rem;
+      gap: 0.5rem;
+
+      .title {
+        font-size: 1.5rem;
+        line-height: 2rem;
+      }
+
+      .description {
+        max-width: 80vw;
+
+        p {
+          font-size: 1rem;
+          line-height: 1.5rem;
+        }
+
+        .short {
+          display: inline;
+        }
+
+        .full {
+          display: none;
+        }
+      }
+
+      .buy-button {
+        font-size: 0.85rem;
+        line-height: 2.2rem;
+        padding: 0.1rem 0.8rem;
+        border-radius: 5px;
+
+        p {
+          font-size: 0.85rem;
+          line-height: 2rem;
+        }
+
+        .genesis-xl {
+          height: 1.5rem;
+          width: 1.5rem;
+          line-height: 1.5rem;
+          font-size: 0.7rem;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/css/fonts.scss b/frontend/css/fonts.scss
deleted file mode 100644
index d26e931211..0000000000
--- a/frontend/css/fonts.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Google Fonts
-@import url("https://fonts.googleapis.com/css?family=Cabin:400,400italic,700,700italic,100,100italic");
-@import url("https://fonts.googleapis.com/css?family=Inknut+Antiqua:400,400italic,700,700italic,100,100italic");
-@import "colors";
-// Font Variables
-$cabin: 'Cabin',
-Arial,
-Helvetica,
-sans-serif;
-body,
-html {
-  font-family: $cabin;
-  font-weight: 400;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-fieldset {
-  font-family: $cabin;
-  font-weight: 400;
-}
-
-p {
-  font-size: 1.1rem;
-  color: $dark_gray;
-  line-height: 1.4rem;
-  margin-bottom: 0 !important;
-}
diff --git a/frontend/css/global.scss b/frontend/css/global.scss
deleted file mode 100644
index 05c73cecb5..0000000000
--- a/frontend/css/global.scss
+++ /dev/null
@@ -1,3109 +0,0 @@
-/* Styles used throughout the frontend */
-
-body {
-  background: $gray;
-}
-
-.initial-loading-text {
-  position: absolute;
-  top: 385px;
-  z-index: -1;
-  text-align: center;
-  width: 100%;
-  padding-top: 10%;
-  color: $dark_gray;
-}
-
-.widget-body .row:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-.colorpicker-menu {
-  padding: 0;
-  .bp5-popover-arrow-fill {
-    fill: $dark_gray;
-  }
-  .bp5-popover-content {
-    width: 13rem;
-    background: $dark_gray;
-  }
-  .bp5-popover-content,
-  .color-picker-cluster,
-  .color-picker-item-wrapper,
-  .saucer {
-    display: inline-block;
-    padding: 0.4rem;
-  }
-}
-
-.bp5-popover.help {
-  .bp5-popover-arrow {
-    display: none !important;
-  }
-  .bp5-popover-arrow-fill {
-    fill: $dark_gray;
-  }
-  .bp5-popover-content {
-    width: 32rem;
-    color: $white;
-    background: $dark_gray;
-  }
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button,
-input[type=date]::-webkit-inner-spin-button,
-input[type=date]::-webkit-outer-spin-button,
-input[type=time]::-webkit-inner-spin-button,
-input[type=time]::-webkit-outer-spin-button,
-input[type=time] {
-  -webkit-appearance: none;
-  -moz-appearance: textfield;
-  margin: 0;
-  border-radius: 0;
-}
-
-.char-limit {
-  float: right;
-  font-size: 1.4rem;
-  &.over {
-    color: $darkest_red;
-    font-weight: bold;
-  }
-}
-
-.markdown {
-  p {
-    display: inline-block;
-    color: $white;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    width: calc(100% - 14rem);
-    white-space: nowrap;
-    text-transform: none;
-    margin-top: 0.3rem;
-  }
-}
-
-fieldset {
-  button {
-    margin: 0.6rem 0 0 0.6rem;
-  }
-}
-
-.saucer {
-  position: relative;
-  z-index: 2;
-  height: 2rem;
-  width: 2rem;
-  background: $dark_gray;
-  border-radius: 50%;
-  cursor: pointer;
-  &.active {
-    border: 2px solid white;
-  }
-  &.hover {
-    border: 2px solid $dark_gray;
-  }
-  p {
-    font-weight: 900;
-    color: $white;
-    margin-left: 0.7rem;
-    margin-top: 0.3rem;
-  }
-}
-
-.icon-saucer {
-  position: relative;
-  z-index: 2;
-  height: 2rem;
-  width: 2rem;
-  color: $dark_gray;
-  cursor: pointer;
-  &.active {
-    border: 2px solid white;
-  }
-  &.hover {
-    border: 2px solid $dark_gray;
-  }
-}
-
-.saucer-connector {
-  position: absolute;
-  z-index: 1;
-  height: 3rem;
-  width: 1rem;
-  margin-left: 0.5rem;
-  margin-top: -1rem;
-  &.last {
-    margin-top: -9rem;
-    height: 8rem;
-  }
-}
-
-.connector-hover-area {
-  visibility: hidden;
-  stroke: white;
-  pointer-events: all;
-}
-
-.diagnosis-indicator {
-  text-align: center !important;
-  &.nav {
-    display: inline-block;
-    border-color: transparent;
-  }
-  i {
-    display: block;
-    position: absolute;
-    top: 2.5px;
-    left: 2.5px;
-    color: $white;
-    font-size: 11px;
-    &.fa-times {
-      left: 0.35rem;
-    }
-    &.fa-question {
-      left: 0.45rem;
-    }
-  }
-}
-
-.jobs-and-logs {
-  margin-top: 1rem;
-}
-
-.jobs-and-logs,
-.controls-content,
-.connectivity-content {
-  margin-bottom: 0;
-  padding-top: 2rem !important;
-  .tabs {
-    display: flex;
-    position: absolute;
-    top: 1rem;
-    left: 0;
-    z-index: 3;
-    width: 100%;
-    background: $white;
-    padding-bottom: 0.5rem;
-    :first-child {
-      margin-left: 1rem;
-      margin-right: 0.2rem;
-      border-bottom-left-radius: 7px;
-      border-top-left-radius: 7px;
-    }
-    :nth-child(2) {
-      margin-right: 0.2rem;
-    }
-    :last-child {
-      margin-right: 1rem;
-      border-bottom-right-radius: 7px;
-      border-top-right-radius: 7px;
-    }
-    label {
-      margin: 0;
-      padding: 0.5rem;
-      background: $light_gray;
-      color: $medium_gray;
-      width: 50%;
-      text-align: center;
-      margin-top: 0;
-      cursor: pointer;
-      &.selected {
-        background: $medium_gray;
-        color: $off_white;
-      }
-      &:hover {
-        background-color: color.adjust($white, $lightness: -40%);
-        color: $off_white;
-      }
-    }
-  }
-}
-
-.controls-popover-portal {
-  .bp5-transition-container {
-    z-index: 999;
-  }
-  .controls-popover {
-    margin-top: 1.5rem;
-    max-width: 100vw;
-    .bp5-popover-content {
-      padding-bottom: 0;
-    }
-    .controls-content {
-      padding: 1rem;
-      padding-bottom: 0;
-      width: 500px;
-      max-width: calc(100vw - 3rem);
-      overflow-x: hidden;
-      max-height: calc(100vh - 10rem);
-      overflow-y: auto;
-      .row {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-}
-
-.connectivity-popover-portal {
-  .bp5-transition-container {
-    z-index: 999;
-  }
-  .connectivity-popover {
-    margin-top: -1rem;
-    max-width: 100vw;
-    .bp5-popover-content {
-      padding-bottom: 0;
-    }
-    .connectivity {
-      padding: 1rem;
-      padding-bottom: 0;
-      width: 600px;
-      max-width: calc(100vw - 3rem);
-      overflow-x: hidden;
-      max-height: calc(100vh - 10rem);
-      overflow-y: auto;
-      .row {
-        margin-bottom: 1rem;
-      }
-      .connectivity-content {
-        table {
-          font-size: 1.3rem;
-        }
-      }
-      .connectivity-left-column,
-      .connectivity-right-column {
-        padding-bottom: 2rem;
-      }
-      .connectivity-left-column {
-        padding-left: 0;
-      }
-      .connectivity-right-column {
-        margin-top: 1rem;
-      }
-      .connectivity-diagram svg {
-        max-height: 200px !important;
-      }
-      .port-info,
-      .network-info,
-      .fbos-info {
-        @media (max-width:767px) {
-          display: block;
-        }
-      }
-      .network-info {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.connectivity-diagnosis {
-  h4 {
-    margin-left: 3rem;
-  }
-  p {
-    padding-bottom: 1rem;
-  }
-  a {
-    display: block;
-    font-size: 1.2rem;
-  }
-  .blinking {
-    a {
-      display: inline;
-    }
-  }
-  .fa-external-link {
-    margin-right: 0.5rem;
-  }
-}
-
-.camera-connection-indicator,
-.memory-usage-display,
-.chip-temp-display {
-  position: relative;
-  .saucer {
-    position: absolute;
-    top: 2px;
-    right: 0.5rem;
-    height: 1rem;
-    width: 1rem;
-    cursor: default;
-  }
-}
-
-.voltage-display {
-  position: relative;
-  height: 1.4rem;
-  .voltage-saucer {
-    position: absolute;
-    top: 0;
-    right: 0.5rem;
-    height: 1rem;
-    width: 1rem;
-    cursor: default;
-  }
-}
-
-.voltage-display {
-  display: flex;
-  .saucer {
-    height: 1rem;
-    width: 1rem;
-    cursor: default;
-    margin-left: 0.5rem;
-    margin-top: 0.2rem;
-  }
-  .help-icon {
-    margin: 0 0 0.5rem 0.25rem;
-    color: $dark_gray;
-    font-size: 1rem;
-    vertical-align: middle;
-  }
-}
-
-.throttle-display {
-  .throttle-row {
-    display: flex;
-    white-space: nowrap;
-    .saucer {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.wifi-strength-display {
-  position: relative;
-  .percent-bar {
-    position: absolute;
-    top: 2px;
-    right: 0;
-    height: 1rem;
-    width: 25%;
-    clip-path: polygon(0 85%, 100% 0, 100% 100%, 0% 100%);
-    background-color: $light_gray;
-    .percent-bar-fill {
-      height: 100%;
-      background-color: $green;
-    }
-  }
-}
-
-.mac-address {
-  font-size: 1rem;
-  b {
-    font-size: 1.1rem;
-  }
-}
-
-.port-info,
-.network-info,
-.fbos-info {
-  margin: auto;
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-  margin-left: 1rem;
-  background: $white;
-  padding: 1rem;
-  box-shadow: 0px 0px 10px $light_gray;
-  border-radius: 5px;
-  width: 20rem;
-  .ip-address {
-    word-break: break-all;
-  }
-  a {
-    display: block;
-    margin-top: 1rem;
-    font-size: 1.1rem;
-    text-decoration: underline !important;
-    i {
-      margin-right: 0.5rem;
-    }
-  }
-}
-
-@keyframes adjust-width {
-  100% {
-    width: 100.01%;
-  }
-}
-
-.connectivity-diagram {
-  margin: auto;
-  width: 20rem;
-  background: $white;
-  svg {
-    animation: adjust-width 0.01s linear forwards;
-  }
-}
-
-.port-info,
-.qos-display {
-  .saucer {
-    float: right;
-    width: 1rem;
-    height: 1rem;
-    cursor: unset;
-  }
-}
-
-.port-info {
-  i {
-    display: block;
-    font-size: 1.2rem;
-  }
-  .fa {
-    display: inline;
-  }
-}
-
-.last-seen-row {
-  i {
-    margin-right: 0.5rem;
-  }
-}
-
-.farmbot-os-details {
-  max-width: 350px;
-}
-
-.os-release-channel {
-  margin-top: 0.5rem;
-  label {
-    margin: 0;
-    margin-right: 1rem;
-    line-height: 3rem;
-  }
-  .filter-search {
-    display: inline-block;
-    width: 50%;
-    button {
-      margin: 0;
-    }
-  }
-}
-
-.garden-location {
-  .fa-map {
-    margin: 0.5rem;
-    float: right;
-    margin-bottom: 0;
-    color: $medium_gray;
-  }
-  .latitude {
-    padding-right: 0;
-  }
-  .longitude {
-    padding-left: 0;
-  }
-}
-
-.all-content-wrapper {
-  margin: 0 auto;
-  padding: 11rem 3rem 0;
-  width: 100%;
-  max-width: 160rem;
-  animation: page-transition 0.2s ease-in-out;
-}
-
-a {
-  cursor: pointer !important;
-  outline: none !important;
-}
-
-.input-group {
-  width: 100% !important;
-  input[type=checkbox] {
-    box-shadow: none;
-  }
-}
-
-.fa {
-  cursor: pointer !important;
-  &.fa-gear {
-    color: $white;
-    &.dark {
-      color: $dark_gray;
-    }
-  }
-}
-
-.caution-icon {
-  pointer-events: none;
-  margin-left: 1rem;
-}
-
-.drag-drop-area {
-  &.visible {
-    margin: 0.75rem 0;
-    margin-right: 25px;
-    margin-left: 10px;
-    border-style: dashed;
-    border-width: 2px;
-    border-color: $light_gray;
-    color: $gray;
-    font-weight: bold;
-    padding: 1.25rem;
-    background: $off_white;
-    text-align: center;
-    color: $gray;
-    font-weight: bold;
-  }
-}
-
-.expandable-header {
-  cursor: pointer;
-  .icon-toggle {
-    font-size: 1.2rem;
-    font-weight: bold;
-    vertical-align: middle;
-    .fa {
-      font-size: 1rem;
-    }
-  }
-}
-
-.centered-button-div {
-  text-align: center;
-  padding: 0.25rem;
-  .fb-button {
-    float: none !important;
-  }
-  label {
-    padding: 0;
-  }
-}
-
-.single-setting-row {
-  .col-xs-5 {
-    padding-left: 4.75rem;
-    &.centered-button-div {
-      padding-left: 6rem;
-    }
-  }
-}
-
-.fb-toggle-button,
-.mcu-input-box {
-  position: relative;
-  .setting-status-indicator {
-    position: absolute;
-    z-index: 1;
-  }
-  .fa-exclamation-triangle {
-    color: $orange;
-  }
-  .fa-spinner {
-    color: $dark_gray;
-  }
-  .fa-check {
-    color: $green;
-    animation: fade-out 1s 0.4s forwards;
-  }
-  .save-error {
-    .bp5-popover-content {
-      background: $dark_gray;
-      min-width: 200px;
-      p {
-        text-transform: none;
-        color: $off_white;
-      }
-    }
-    .bp5-popover-arrow-fill {
-      fill: $dark_gray;
-    }
-  }
-}
-
-.mcu-input-box {
-  .setting-status-indicator {
-    top: 0.5rem;
-  }
-}
-
-.fb-toggle-button {
-  .setting-status-indicator {
-    top: 0.25rem;
-  }
-}
-
-.mcu-input-box {
-  .setting-status-indicator {
-    right: 0.5rem;
-  }
-}
-
-.fb-toggle-button {
-  &.yellow {
-    .setting-status-indicator {
-      display: none;
-    }
-  }
-  &.green {
-    .setting-status-indicator {
-      right: 0.5rem;
-    }
-  }
-  &.red {
-    .setting-status-indicator {
-      left: 0.5rem;
-    }
-  }
-}
-
-.toggle-group {
-  display: inline-block;
-  width: 100%;
-  label {
-    padding-top: 0.5rem;
-    max-width: 75%;
-  }
-}
-
-.load-progress-bar-wrapper {
-  position: relative;
-  margin: 0.5rem;
-  margin-top: 0;
-  margin-left: 0;
-  width: 90%;
-  height: 1.5rem;
-  border: 1px solid $dark_gray;
-  .load-progress-bar {
-    height: 100%;
-    background: $dark_gray !important;
-    p {
-      position: absolute;
-      color: $gray;
-      font-weight: bold;
-      font-size: 1rem;
-    }
-  }
-}
-
-.firmware-setting-export-menu {
-  button {
-    margin-bottom: 1rem;
-  }
-  ul {
-    font-size: 0.75rem;
-  }
-}
-
-.change-ownership-form {
-  p {
-    padding: 1rem;
-    margin-left: 0.5rem;
-  }
-  .row {
-    margin-bottom: 1rem;
-    &:empty {
-      margin-bottom: 0;
-    }
-  }
-  label {
-    margin-top: 0.5rem;
-  }
-  button {
-    margin-top: 1rem;
-    margin-right: 1rem;
-  }
-}
-
-.pin-bindings {
-  .fa-exclamation-triangle {
-    color: $orange;
-    margin-left: 1rem;
-    margin-top: 0.75rem;
-  }
-  .fa-circle-o-notch,
-  .fa-th-large {
-    position: absolute;
-    top: 0.75rem;
-    left: 0.5rem;
-    color: $dark_gray;
-  }
-  .fb-button {
-    &.green {
-      margin-top: 0.5rem;
-    }
-  }
-  .bindings-list {
-    margin-bottom: 1rem;
-    margin-left: 1rem;
-    font-size: 1.2rem;
-  }
-  .binding-type-dropdown {
-    margin-bottom: 1.5rem;
-  }
-  .stock-pin-bindings-button {
-    button {
-      margin: 1rem;
-      float: left;
-      margin-left: 2rem;
-    }
-    i {
-      margin-right: 0.5rem;
-    }
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    float: none !important;
-    margin-left: 1rem;
-  }
-}
-
-.sensor-history-widget {
-  .sensor-selection,
-  .sensor-history-time-selection,
-  .sensor-history-location-selection {
-    margin-bottom: 1rem !important;
-  }
-  .row {
-    margin-bottom: 0 !important;
-  }
-  label {
-    margin-bottom: 5px;
-  }
-  .bp5-popover-wrapper {
-    float: right;
-  }
-}
-
-.add-sensor-reading-menu {
-  width: 300px;
-  .green {
-    position: absolute;
-    bottom: 1rem;
-    right: 1rem;
-  }
-  .reading-location,
-  .add-reading-value-form {
-    margin-top: 1rem;
-  }
-}
-
-.sensor-selection {
-  margin-bottom: 4rem !important;
-}
-
-.sensor-readings-plot {
-  max-height: 300px;
-  stroke: $black;
-  font-size: 60px;
-  font-weight: 100;
-}
-
-.sensor-history-table {
-  font-size: 1.2rem;
-  th,
-  td {
-    width: 1%;
-  }
-  tr {
-    color: $black;
-    &.previous {
-      color: $medium_gray;
-    }
-    &.selected {
-      background: $gray;
-    }
-  }
-  .sensor-history-table-contents {
-    max-height: 20rem;
-    overflow-y: auto;
-  }
-}
-
-.sensor-history-footer {
-  display: flex;
-  justify-content: space-between;
-  .date {
-    span {
-      white-space: nowrap;
-    }
-    label {
-      margin-right: 0.5rem;
-    }
-  }
-  .location {
-    display: flex;
-    label {
-      margin-left: 1rem;
-      margin-right: 0.5rem;
-    }
-  }
-}
-
-.full-width {
-  width: 100%;
-}
-
-fieldset {
-  border: none;
-  legend {
-    background: transparent;
-  }
-}
-
-.move-tab,
-.peripherals-tab,
-.webcams-tab {
-  margin-top: 1rem;
-}
-
-.webcams-tab {
-  margin-top: 2rem;
-}
-
-.webcam-stream-unavailable {
-  position: relative;
-  width: 100%;
-}
-
-.webcam-stream-unavailable img {
-  width: 100%;
-  max-width: 100%;
-  opacity: 0.40;
-}
-
-.webcam-stream-valid {
-  img, iframe {
-    display: flex;
-    margin: auto;
-    max-height: 650px;
-  }
-  img {
-    max-width: 100%;
-    min-height: 100px;
-  }
-  iframe {
-    width: 100%;
-    border: none;
-    min-height: 300px;
-  }
-}
-
-.webcam-stream-unavailable p {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  transform: translate(-50%, -50%);
-  vertical-align: middle;
-  text-align: center;
-  font-size: 1.5rem;
-}
-
-.webcam-rows {
-  height: 40rem;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding-left: 3rem;
-}
-
-.webcam-buttons {
-  position: relative;
-}
-
-.webcam-buttons,
-.peripherals-buttons {
-  display: flex;
-  margin-top: 1rem;
-  .bp5-popover-wrapper {
-    margin-top: 0.5rem;
-  }
-  p {
-    width: 100%;
-    margin-left: 1rem;
-    margin-top: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  button {
-    margin: 0.25rem;
-    margin-bottom: 1rem;
-  }
-}
-
-h3 {
-  display: inline-block;
-  margin-top: 0;
-  font-size: 2.2rem;
-}
-
-h4 {
-  line-height: 1.1rem;
-  font-size: 1.8rem;
-  color: $darker_gray;
-}
-
-hr {
-  border-top: 1px solid rgba(16, 22, 26, 0.15);
-}
-
-.e-stop {
-  white-space: nowrap;
-  &.yellow {
-    animation: bright-flash 1s infinite alternate;
-  }
-}
-
-.e-stop-btn {
-  float: right;
-  margin-top: 1.5rem;
-  margin-left: 0.5rem;
-  border-radius: 1rem;
-  .e-stop {
-    margin: 0;
-    box-shadow: none !important;
-    height: 2.9rem;
-    font-size: 1.1rem !important;
-    &.pseudo-disabled {
-      box-shadow: none !important;
-    }
-    &:hover {
-      box-shadow: 0 0 10px $translucent5, 0 0 5px inset rgba(255, 255, 255, 0.2) !important;
-      &.red {
-        color: $white;
-      }
-      &.yellow {
-        color: $black;
-      }
-    }
-  }
-  &.hard {
-    border-radius: 5px;
-  }
-}
-
-a {
-  text-decoration: none !important;
-  outline: none !important;
-  cursor: pointer !important;
-  color: $dark_gray;
-  &:link {
-    font-weight: 500;
-    color: $dark_gray;
-  }
-  &:visited {
-    color: $dark_gray;
-  }
-  &:hover {
-    font-weight: bold;
-    color: $dark_gray;
-  }
-  &:active {
-    color: $dark_gray;
-  }
-}
-
-button,
-select,
-summary,
-input {
-  outline: none !important;
-}
-
-input:disabled {
-  background: rgba(0, 0, 0, 0.1) !important;
-}
-
-ul {
-  list-style-type: none !important;
-  padding: 0;
-}
-
-.coming-soon {
-  position: relative;
-  opacity: 0.50;
-  width: 100%;
-  height: 100%;
-}
-
-.coming-soon:after {
-  content: "Coming Soon!";
-  position: absolute;
-  top: 25%;
-  left: 0;
-  background-color: $red;
-  width: 100%;
-  vertical-align: middle;
-  text-align: center;
-  font-size: 2.5rem;
-}
-
-.unavailable {
-  display: inline-block;
-  position: relative;
-  z-index: 10;
-  opacity: 0.40;
-  * {
-    pointer-events: none;
-  }
-  &.banner {
-    &:after {
-      content: "Not available when device is offline.";
-      position: absolute;
-      top: 25%;
-      left: -2.5%;
-      z-index: 10;
-      width: 105%;
-      padding: 0.5rem;
-      background-color: $dark_gray;
-      opacity: 0.90;
-      color: $off_white;
-      font-size: 1.8rem;
-      vertical-align: middle;
-      text-align: center;
-    }
-  }
-}
-
-.button-group {
-  display: inline-block;
-  margin: 1.5rem 0 -1rem;
-  width: 100%;
-  button:not(:first-of-type) {
-    margin-right: 1rem;
-  }
-  .run-btn {
-    margin-right: 0.5rem;
-  }
-  .fb-button {
-    margin: 0;
-  }
-  .settings-menu-button {
-    margin-top: 0.15rem;
-    margin-right: 0.5rem;
-    .bp5-popover-wrapper {
-      margin-left: 0;
-    }
-  }
-  .fa {
-    float: right;
-  }
-  .fa-code {
-    font-weight: bold;
-    color: $gray;
-    &.enabled {
-      color: $dark_gray;
-    }
-  }
-  .inactive {
-    color: $gray;
-  }
-  .fa-eye-slash {
-    color: $gray;
-  }
-  .color-picker {
-    float: right;
-    vertical-align: middle;
-    .saucer {
-      height: 1.5rem;
-      width: 1.5rem;
-    }
-  }
-}
-
-.sequence-description-wrapper,
-.button-group,
-.panel-header-icon-group {
-  .fa-spinner {
-    background: none !important;
-    box-shadow: none !important;
-  }
-}
-
-.fb-button-popover-wrapper {
-  float: right;
-  margin-right: 1rem;
-}
-
-.parameter-assignment-menu {
-  .test-button-div {
-    text-align: center;
-  }
-  .fb-button {
-    float: none;
-  }
-  .locals-list {
-    margin-top: 1rem;
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-}
-
-.parameter-assignment-menu-popover {
-  max-width: 400px;
-}
-
-.note {
-  margin-top: 1rem;
-  font-style: italic;
-  font-size: 1.2rem;
-}
-
-.bot-position-rows {
-  .missed-step-indicator-wrapper {
-    position: absolute;
-    top: -1.5rem;
-    left: 1.5rem;
-    right: 1.5rem;
-    height: 1rem;
-    .missed-step-details {
-      min-width: 9rem;
-      padding-bottom: 1rem;
-      table tr, td {
-        padding: unset;
-      }
-      label, p {
-        color: $white;
-        text-align: right;
-        font-style: normal;
-      }
-    }
-    .bp5-popover-wrapper {
-      .bp5-popover-target {
-        display: block;
-      }
-    }
-    .bp5-popover {
-      .bp5-popover-arrow {
-        svg {
-          transform: rotate(-90deg) translate(1px) !important;
-          .bp5-popover-arrow-fill {
-            fill: $dark_gray;
-          }
-        }
-      }
-      .bp5-popover-content {
-        background: $dark_gray;
-      }
-    }
-    .missed-step-indicator {
-      position: absolute;
-      top: 0.2rem;
-      height: 0.75rem;
-      width: 100%;
-      background: $white;
-      box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-      cursor: pointer;
-      .instant {
-        position: absolute;
-        height: 100%;
-        opacity: 0.5;
-        &.yellow {
-          opacity: 0.75;
-        }
-      }
-      .peak {
-        position: absolute;
-        height: 100%;
-        width: 2px;
-        opacity: 0.5;
-        &.yellow {
-          opacity: 0.75;
-        }
-      }
-    }
-  }
-}
-
-.move-settings-menu {
-  label {
-    margin-top: 7px;
-  }
-  p {
-    margin-top: 0.7rem;
-    font-size: 1.4rem;
-    color: $medium_gray;
-    font-weight: 400;
-  }
-}
-
-.bot-position-rows {
-  label {
-    margin-top: 0 !important;
-  }
-  .axis-titles {
-    margin-bottom: 1rem;
-    .bp5-popover-wrapper {
-      display: inline;
-      float: right;
-    }
-  }
-  p {
-    text-align: center;
-    font-style: italic;
-  }
-  .axis-info {
-    .index-1 {
-      z-index: 1;
-    }
-    .index-2 {
-      z-index: 2;
-    }
-    .index-3 {
-      z-index: 3;
-    }
-  }
-  .fa-ellipsis-v {
-    font-size: 1.2rem;
-    width: 1rem;
-    text-align: center;
-  }
-  .axis-actions {
-    width: 10rem;
-    .fb-button {
-      width: 100%;
-      float: none;
-      margin-bottom: 0.25rem;
-    }
-    a {
-      display: block;
-      padding: 1rem 0.5rem 0.75rem 0.5rem;
-      text-decoration: none !important;
-      font-size: 1.2rem;
-      .fa-external-link {
-        margin-top: 0.25rem;
-        float: right;
-      }
-      &:hover {
-        .fa-external-link {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-
-.fbos-metric-history {
-  .fbos-metric-history-table-wrapper {
-    overflow-y: scroll;
-    height: 25rem;
-    padding-bottom: 1rem;
-    thead {
-      position: sticky;
-      top: 0;
-      z-index: 3;
-      background: $white;
-    }
-    .saucer {
-      margin: 0 auto;
-      height: 1.5rem;
-      width: 1.5rem;
-      cursor: default;
-    }
-  }
-}
-
-.fbos-metric-history-plot-border,
-.motor-position-plot-border {
-  text {
-    text-anchor: middle;
-    dominant-baseline: middle;
-  }
-}
-
-.fbos-metric-history-plot-border {
-  margin: 1rem;
-  width: calc(100% - 2rem) !important;
-  border-radius: 5px;
-  box-shadow: 0 0 10px $light_gray;
-  animation: adjust-width 0.01s linear forwards;
-  text {
-    font-size: 0.6rem;
-  }
-}
-
-.motor-position-plot-border {
-  box-shadow: 0 0 10px $light_gray;
-  border-radius: 5px;
-  text {
-    font-size: 0.4rem;
-  }
-}
-
-.controls-popup,
-.controls-popup-menu-outer {
-  position: fixed;
-  bottom: 3rem;
-  right: 1rem;
-  z-index: 3;
-  background: $dark_gray;
-  border-radius: 3rem;
-  height: 6rem;
-  width: 6rem;
-}
-
-.controls-popup {
-  color: $off_white;
-  @media screen and (max-width: $mobile_max_width) {
-    &.panel-open {
-      display: none;
-    }
-  }
-  img {
-    position: fixed;
-    bottom: 3rem;
-    z-index: 4;
-    width: 6rem;
-    height: 6rem;
-    border-radius: 3rem;
-    padding: 18px 20px;
-    font-size: 2.4rem;
-    transition: all 0.25s ease-in-out;
-    filter: invert(1);
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.2);
-    }
-  }
-  .move-amount-wrapper,
-  .jog-table {
-    display: none;
-  }
-  &.open {
-    img {
-      transform: rotate(-135deg);
-      &:hover {
-        background-color: rgba(0, 0, 0, 0);
-      }
-    }
-    .controls-popup-menu-outer {
-      transition: all 0.1s 0s ease-in-out;
-      width: 36rem;
-      height: 14rem;
-      padding: 0.6rem 5rem 0rem 0rem;
-    }
-    .controls-popup-menu-inner {
-      transition-delay: 0.25s !important;
-      opacity: 1;
-    }
-    .jog-table {
-      display: block;
-      margin: 0;
-      float: right;
-      td {
-        padding: 0;
-      }
-    }
-    .move-amount-wrapper {
-      display: inline-block;
-      width: 100%;
-      box-shadow: none;
-      margin-left: 2rem;
-      padding-top: 0.5rem;
-      .move-amount {
-        width: 18%;
-        height: 2rem;
-      }
-    }
-  }
-  .filter-search {
-    display: inline-block;
-    width: 9rem;
-    padding: 1rem;
-    margin-left: 1rem;
-  }
-  .arrow-button {
-    margin: 5px;
-    box-shadow: none !important;
-    &.pseudo-disabled {
-      box-shadow: none !important;
-    }
-  }
-}
-
-.controls-popup-menu-inner {
-  border-radius: 2rem;
-  transition: all 0.1s 0s ease-in-out;
-  opacity: 0;
-}
-
-.controls-popup-menu-outer {
-  transition: all 0.1s ease-in-out;
-  transition-delay: 0.2s !important;
-}
-
-@keyframes page-transition {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.empty-state-graphic {
-  display: flex;
-  margin: auto;
-  margin-top: 25%;
-  width: 50%;
-}
-
-.empty-state {
-  text-align: center;
-  h5 {
-    font-weight: bold;
-  }
-  &.plants {
-    p,
-    h5,
-    a {
-      color: $panel_green;
-    }
-  }
-  &.curves {
-    .empty-state-graphic {
-      filter: grayscale(1);
-    }
-  }
-  &.gardens {
-    p,
-    h5,
-    a {
-      color: $panel_navy;
-    }
-    .empty-state-graphic {
-      filter: hue-rotate(135deg) brightness(0.5);
-      color: $panel_navy;
-    }
-  }
-  &.events {
-    p,
-    h5,
-    a {
-      color: $panel_yellow;
-    }
-  }
-  &.farmware {
-    p,
-    h5,
-    a {
-      color: $panel_gray;
-    }
-  }
-  &.peripherals {
-    img {
-      margin-top: 0;
-      max-width: 20rem;
-    }
-    p,
-    h5,
-    a {
-      color: $dark_gray;
-    }
-  }
-  &.sensors {
-    img {
-      margin-top: 0;
-      max-width: 20rem;
-      filter: grayscale(1);
-      padding: 1rem;
-    }
-    p,
-    h5,
-    a {
-      color: $dark_gray;
-    }
-  }
-  &.points {
-    p,
-    h5,
-    a {
-      color: $panel_teal;
-    }
-  }
-  &.tools {
-    p,
-    h5,
-    a {
-      color: $panel_gray;
-    }
-  }
-  &.groups {
-    p,
-    h5,
-    a {
-      color: $panel_blue;
-    }
-  }
-  &.weeds {
-    p,
-    h5,
-    a {
-      color: $panel_red;
-    }
-  }
-  &.zones {
-    p,
-    h5,
-    a {
-      color: $panel_brown;
-    }
-  }
-  &.location {
-    img {
-      filter: grayscale(1);
-    }
-    p,
-    h5,
-    a {
-      color: $dark_gray;
-    }
-  }
-}
-
-.farmware-info {
-  margin-top: 1rem;
-}
-
-.farmware-list-items {
-  margin-left: -30px;
-  margin-right: -20px;
-  padding: 0.5rem;
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
-  cursor: pointer;
-  label {
-    cursor: pointer;
-  }
-  &:hover  {
-    background: $medium_light_gray;
-    p {
-      font-weight: bold;
-    }
-  }
-}
-
-.farmware-url {
-  font-size: 1rem;
-  width: 100px;
-  word-wrap: break-word;
-}
-
-.settings-menu-button {
-  float: right;
-  .fa-gear {
-    margin-top: -0.25rem;
-    color: $dark_gray;
-  }
-}
-
-.publish-button {
-  float: right;
-}
-
-.sequence-settings-menu {
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-right: 1rem;
-    margin-left: 1rem;
-  }
-  .fb-button {
-    margin-top: 0;
-  }
-}
-
-.sequence-publish-menu,
-.sequence-share-menu {
-  max-width: 300px;
-  button {
-    display: block;
-    margin: auto;
-    float: none;
-    margin-top: 1rem;
-  }
-}
-
-.sequence-publish-menu {
-  .sequence-publish-message {
-    text-align: left;
-    p {
-      padding-bottom: 1rem;
-      line-height: 1.5rem;
-    }
-    a {
-      display: inline;
-      text-decoration: underline !important;
-    }
-    ul {
-      list-style-type: "- " !important;
-      padding: revert;
-      padding-left: 1rem;
-      color: $dark_gray;
-      font-size: 1.1rem;
-      line-height: 1.5rem;
-    }
-    label {
-      font-size: 1rem;
-      margin-right: 1rem;
-    }
-    input {
-      width: 50%;
-    }
-    .republish-warning {
-      display: flex;
-      margin: 0.75rem -10px 1rem -10px;
-      padding: 1rem 1rem 0 1rem;
-      background: color.adjust($orange, $alpha: -0.6);
-      i {
-        margin-right: 1rem;
-        margin-top: 0.25rem;
-      }
-      p {
-        font-weight: bold;
-        padding-bottom: 0.5rem;
-      }
-    }
-  }
-  button {
-    margin: 0;
-    margin-top: 1rem;
-    .fa-spinner {
-      margin-left: 0.5rem;
-    }
-  }
-}
-
-.sequence-share-menu {
-  text-align: center;
-  a {
-    display: block;
-    white-space: normal;
-    word-wrap: break-word;
-    word-break: break-word;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    &:hover {
-      color: $black;
-      font-weight: normal;
-    }
-  }
-  .versions-table {
-    margin-top: 2rem;
-    text-align: left;
-    .bp5-popover-wrapper {
-      display: inline-block;
-      margin-left: 1rem;
-    }
-    .fb-button.gray {
-      margin: 0;
-      float: right;
-    }
-    .row {
-      margin-top: 0.5rem;
-    }
-    p {
-      width: max-content;
-      padding: 5px;
-      border-radius: 3px;
-      color: $white;
-      background: $panel_blue;
-    }
-    .fa-link {
-      float: right;
-      margin-top: 0.75rem;
-    }
-  }
-  .fb-button.white {
-    color: $darkest_red;
-    text-transform: none;
-    font-weight: normal;
-    background: $white;
-    .fa-spinner {
-      margin-left: 0.5rem;
-    }
-    &:hover {
-      background: $off_white;
-    }
-  }
-}
-
-.logs-page {
-  .row {
-    @media screen and (max-width: 974px) {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-  .bp5-popover-target {
-    float: right;
-  }
-  @media screen and (max-width: 1075px) {
-    padding-left: 15px !important;
-  }
-  @media screen and (max-width: 974px) {
-    padding-left: 0 !important;
-  }
-  .fa-2x {
-    float: right;
-    font-size: 1rem;
-    color: $dark_gray;
-  }
-  .fa-ban {
-    color: $medium_gray;
-  }
-  details {
-    display: inline;
-    margin-top: 1rem;
-  }
-}
-
-.logs-table-wrapper {
-  border: none;
-  .fa-trash {
-    display: none;
-  }
-  tr {
-    vertical-align: top;
-    &:hover {
-      background: #eee;
-      .fa-trash {
-        display: inline;
-        color: $darkest_red;
-        margin-left: 6px;
-        padding: 0.5rem;
-        line-height: 2rem;
-      }
-      .log-verbosity-saucer {
-        display: none;
-      }
-    }
-  }
-  .fa-filter {
-    border: 1px black solid;
-    border-radius: 50%;
-    padding: 0.25rem;
-    width: 2rem;
-    height: 2rem;
-    text-align: center;
-    line-height: 1.3rem;
-    margin-left: 5px;
-  }
-  .markdown {
-    p {
-      margin-top: 0;
-    }
-    a {
-      text-decoration: underline !important;
-      &:hover {
-        font-weight: normal;
-      }
-    }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 0;
-      font-size: 1.4rem;
-      font-weight: bold;
-    }
-  }
-  .notice {
-    font-style: italic;
-    text-align: center;
-    font-size: 1.4rem;
-    padding: 1rem;
-  }
-}
-
-.logs-filter-menu {
-  position: relative;
-  padding-right: 1rem;
-  fieldset {
-    display: flex;
-    label {
-      width: 100%;
-      padding-right: 1rem;
-    }
-  }
-  .lines {
-    padding-bottom: 2rem;
-  }
-  .line {
-    position: absolute;
-    width: 0.5rem;
-    height: 90%;
-    border-right: 1px $light_gray solid;
-    .line-label {
-      position: absolute;
-      background: $white;
-    }
-  }
-}
-
-.logs-filter-menu,
-.logs-settings-menu {
-  label {
-    margin-top: 7px;
-  }
-  .saucer {
-    float: left;
-    margin-right: 10px;
-  }
-  .bp5-popover-wrapper {
-    display: inline-block;
-    margin-left: 1rem;
-    margin-top: 0.5rem;
-  }
-  .log-stream-link {
-    margin-top: 1rem;
-    text-align: center;
-    .fa-external-link {
-      margin-left: 0.5rem;
-    }
-  }
-  .delete-all {
-    text-align: center;
-    button {
-      float: none;
-    }
-  }
-}
-
-.logs-tab {
-  .thin-search-wrapper {
-    display: inline-block;
-    width: 94%;
-    background: $white;
-  }
-  .logs-settings-menu-button {
-    display: inline-block;
-    vertical-align: middle;
-    .fa-gear {
-      color: $dark_gray;
-    }
-  }
-}
-
-.logs-table {
-  display: block;
-  overflow: scroll;
-  max-height: 42rem;
-  background: $white;
-  .log-verbosity-saucer, .saucer {
-    float: left;
-    margin-right: 5px;
-    margin-left: 3px;
-  }
-  button {
-    float: none;
-  }
-  thead {
-    width: 100%;
-  }
-  thead,
-  th {
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    background: $white;
-  }
-  td {
-    color: $dark_gray !important;
-    word-break: break-word;
-    .markdown {
-      p {
-        display: block;
-        color: $dark_gray;
-        font: inherit;
-        font-size: inherit;
-        text-overflow: inherit;
-        overflow: inherit;
-        width: inherit;
-        white-space: inherit;
-      }
-    }
-  }
-  td:nth-child(1),
-  td:nth-child(3),
-  td:nth-child(4) {
-    white-space: nowrap;
-  }
-}
-
-.link-to-logs {
-  margin-top: 2rem;
-  margin-bottom: 4rem;
-  text-align: center;
-  font-style: italic;
-}
-
-.map-size-setting {
-  margin-top: 1rem;
-}
-
-.release-notes-button {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.release-notes {
-  max-width: 250px;
-  h1 {
-    font-weight: 300;
-    font-size: 1.4rem;
-    line-height: 2rem;
-    margin-top: 0;
-  }
-  li {
-    font-weight: 300;
-    font-size: 1.1rem;
-    line-height: 1.75rem;
-    margin-bottom: 1rem;
-  }
-  p {
-    display: block;
-    color: $dark_gray;
-    text-overflow: inherit;
-    overflow: inherit;
-    width: inherit;
-    white-space: inherit;
-  }
-}
-
-.sensors-widget {
-  p {
-    margin-top: 0.75rem;
-  }
-  .sensor-list {
-    min-width: 33rem;
-    .fb-button {
-      white-space: unset;
-    }
-  }
-  .sensor-reading-display {
-    border-style: solid;
-    border-color: $dark_gray;
-    border-width: 0.1px;
-    height: 2rem;
-    width: 100%;
-    margin-top: 0.5rem;
-    &.moisture-sensor {
-      background: linear-gradient(to right, rgba($blue, 0) 20%, $blue 80%, rgba($blue, 0) 85%);
-    }
-    &.digital {
-      .indicator {
-        text-align: center;
-      }
-    }
-    .indicator {
-      position: relative;
-      background: $dark_gray;
-      height: 2rem;
-      span {
-        position: relative;
-        top: -0.1rem;
-        font-size: 1.3rem;
-      }
-    }
-  }
-}
-
-.sensors-widget,
-.webcam-widget,
-.peripherals-widget {
-  .del-button {
-    margin-top: 0.5rem;
-  }
-}
-
-.electronics-box-3d-model {
-  margin-bottom: 1rem;
-  .led-label,
-  .btn-label {
-    display: block;
-    margin: auto;
-    width: max-content;
-    color: $off_white;
-    font-size: 1rem;
-    background: $dark_gray;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.5rem;
-    white-space: normal;
-    max-height: 3.4rem;
-    overflow-y: hidden;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    user-select: none;
-    &.hovered {
-      background: $black;
-    }
-    &.unbound {
-      background: $placeholder_gray;
-    }
-  }
-  .led-label {
-    max-width: 7rem;
-  }
-  .btn-label {
-    max-width: 5.8rem;
-  }
-  .filter-search {
-    max-width: 5.5rem;
-    .fa-caret-down {
-      bottom: -0.5rem;
-      right: 0.25rem;
-      color: $off_white;
-    }
-    button {
-      padding: 0.25rem;
-      background: $dark_gray !important;
-      border-radius: 0.5rem;
-      height: max-content !important;
-      min-height: 0;
-      &:hover {
-        background: $dark_gray !important;
-      }
-    }
-    span {
-      color: $off_white;
-      white-space: normal !important;
-      text-overflow: revert !important;
-      font-weight: 700;
-      font-size: 1rem;
-      text-align: center;
-      margin-right: 0.5rem;
-    }
-  }
-  div {
-    z-index: 0 !important;
-  }
-  canvas {
-    height: 23rem;
-  }
-}
-
-.webcam-widget {
-  .no-flipper-image-container {
-    background: none !important;
-    width: 100% !important;
-    height: auto !important;
-    border-radius: 5px;
-    img {
-      max-width: 100% !important;
-    }
-  }
-  .image-flipper {
-    p,
-    button {
-      color: $dark_gray !important;
-    }
-  }
-}
-
-.peripheral-list {
-  label {
-    margin-top: 0 !important;
-  }
-  .slider-container {
-    padding-left: 0.5rem;
-    padding-right: 1rem;
-    .bp5-slider {
-      min-width: 100%;
-    }
-  }
-}
-
-.peripheral-form,
-.peripheral-list {
-  padding-top: 1rem;
-}
-
-.box-top-2d-wrapper {
-  margin-top: 2rem;
-  .box-top-leds,
-  .box-top-buttons {
-    display: grid;
-    text-align: center;
-  }
-  .box-top-buttons {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-  .box-top-leds {
-    margin: auto;
-    width: 80%;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .fast-blink {
-    animation: fill-blink 0.2s linear infinite;
-  }
-  .slow-blink {
-    animation: fill-blink 2s linear infinite;
-  }
-}
-
-.farmware-step-input-fields {
-  label {
-    padding-top: 1rem;
-  }
-  fieldset {
-    width: 95%;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  button {
-    position: absolute;
-  }
-}
-
-.update-resource-step {
-  &.step-content {
-    .row {
-      margin: 0;
-    }
-  }
-  .update-resource-step-resource {
-    margin-bottom: 1rem;
-  }
-  .update-resource-pair {
-    margin-top: 1rem;
-    margin-right: -2rem;
-    &.first {
-      margin-top: 0;
-    }
-    div[class*=col-] {
-      padding: 0;
-      padding-right: 2rem;
-    }
-    .custom-meta-field {
-      position: relative;
-      input {
-        height: 3rem;
-      }
-      .fa-undo {
-        position: absolute;
-        top: 0.65rem;
-        right: 0.5rem;
-        color: $medium_light_gray;
-        &:hover {
-          color: $dark_gray;
-        }
-      }
-    }
-    .custom-field-warning {
-      display: inline-block;
-      margin-top: 0.5rem;
-      i,
-      p {
-        display: inline;
-        cursor: default !important;
-        margin-right: 0.5rem;
-        color: $darkest_red;
-      }
-      .did-you-mean {
-        cursor: pointer !important;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.farmware-name-manual-input {
-  margin-top: 1rem;
-}
-
-.write-pin-step {
-  .filter-search {
-    margin-bottom: 1rem;
-  }
-  .slider-container {
-    padding-left: 0.5rem;
-    padding-right: 1rem;
-    .bp5-slider {
-      min-width: 100%;
-    }
-  }
-}
-
-.read-pin-step {
-  &.step-content {
-    div[class*=col-] {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-  }
-}
-
-.computed-move-step {
-  &.step-content {
-    padding-left: 2.5rem !important;
-    padding-right: 2.5rem !important;
-    input {
-      height: 3rem;
-      &:disabled {
-        background: $light_gray !important;
-      }
-    }
-    .help-icon {
-      display: inline;
-      margin-left: 0.5rem;
-    }
-    div[class*=col-] {
-      padding: 0;
-    }
-    .row {
-      margin-top: 0.25rem;
-      margin-bottom: 0.25rem;
-    }
-    label {
-      padding-top: 1rem;
-      &.safe-z {
-        padding-top: 0.65rem;
-      }
-    }
-    .expandable-header {
-      text-align: center;
-    }
-    span {
-      color: $dark_gray;
-    }
-    .input {
-      position: relative;
-      border: 3px solid $transparent;
-      &.lua {
-        border-color: $yellow;
-        &:after {
-          content: "lua";
-          position: absolute;
-          top: -0.25rem;
-          right: -0.3rem;
-          color: $dark_gray;
-          background: $yellow;
-          padding: 0.2rem 0.4rem;
-          font-size: 0.65rem;
-          font-weight: bold;
-          text-transform: uppercase;
-        }
-      }
-    }
-    .filter-search,
-    .fb-checkbox {
-      border: 3px solid $transparent;
-    }
-    .bp5-checkbox {
-      padding-top: 0.75rem;
-      margin-left: 0.25rem;
-    }
-  }
-}
-
-.lua-input {
-  .lua-editor {
-    height: 20rem;
-    &.full {
-      height: 40rem;
-    }
-    &.expanded {
-      height: 70vh;
-    }
-  }
-  .char-limit {
-    padding: 0.5rem;
-  }
-  textarea {
-    height: 100% !important;
-    font-family: monospace;
-    pointer-events: revert !important;
-    font-size: 1.4rem;
-    padding: 0 3rem 0 2.6rem;
-    line-height: 1.9rem;
-  }
-}
-
-.modified {
-  box-shadow: 0 0 0px 3px $yellow !important;
-  &.bp5-slider {
-    box-shadow: none !important;
-    .bp5-slider-handle {
-      box-shadow: 0 0 0px 3px $yellow;
-    }
-  }
-}
-
-.modified-start {
-  box-shadow: none !important;
-  .bp5-start {
-    box-shadow: 0 0 0px 3px $yellow;
-  }
-}
-
-.modified-end {
-  box-shadow: none !important;
-  .bp5-end {
-    box-shadow: 0 0 0px 3px $yellow;
-  }
-}
-
-.input {
-  .fa-undo {
-    position: absolute;
-    top: 1rem;
-    right: 0.25rem;
-    font-size: 1rem;
-  }
-}
-
-.checkbox-row {
-  display: flex;
-  margin-top: 1rem;
-  label {
-    padding: 0;
-    line-height: 2rem;
-    margin-bottom: 0;
-  }
-  .fb-checkbox {
-    display: inline;
-    position: relative;
-    margin-right: 1rem;
-  }
-  .bp5-popover-wrapper,
-  .bp5-popover-target {
-    margin-left: 1rem;
-  }
-}
-
-.farmware-input-group {
-  position: relative;
-  margin-left: 3rem;
-  .fa-times-circle,
-  .fa-refresh {
-    position: absolute;
-    top: 0.85rem;
-    color: $light_gray;
-    &:hover {
-      color: $dark_gray;
-    }
-  }
-  .fa-times-circle {
-    right: 1rem;
-  }
-  .fa-refresh {
-    right: 3rem;
-  }
-  &.dropdown {
-    .filter-search {
-      border: 3px solid $transparent;
-    }
-    .fa-times-circle {
-      right: 3rem;
-    }
-    .fa-refresh {
-      right: 5rem;
-    }
-  }
-}
-
-.tour-list {
-  margin: auto;
-  max-width: 300px;
-  margin-top: 1rem;
-  .fb-button {
-    margin: 0;
-  }
-}
-
-.location-form {
-  .row {
-    margin-bottom: 1rem;
-    margin-top: 0.5rem;
-  }
-}
-
-.default-value-form {
-  position: relative;
-}
-
-.custom-coordinate-form {
-  margin-left: -3rem;
-  margin-right: -1rem;
-  .x,
-  .y,
-  .z {
-    padding-left: 2.5rem;
-    margin-right: -0.25rem;
-  }
-}
-
-.error-with-button {
-  margin-top: 1rem;
-  background: $pink;
-  border: 1px solid $red;
-  border-radius: 5px;
-  label,
-  p {
-    margin: 0.5rem;
-    color: $red;
-  }
-  button {
-    margin: 0.5rem !important;
-  }
-}
-
-.status-icon {
-  &.ok {
-    color: $green;
-  }
-  &.no {
-    color: $red;
-  }
-  &.unknown {
-    color: $orange;
-  }
-}
-
-.status-details-target {
-  margin-left: -1rem;
-  margin-top: 0.25rem;
-}
-
-.status-details {
-  max-width: 30rem;
-  button {
-    float: none !important;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-    font-size: 1.3rem;
-  }
-}
-
-.problem-alert {
-  position: relative;
-  margin: 1rem;
-  margin-bottom: 3rem;
-  padding: 2rem;
-  border-radius: 4px;
-  box-shadow: 0px 2px 5px $medium_gray;
-  background: $off_white;
-  .fa-exclamation-triangle,
-  .fa-check-square,
-  .fa-info-circle {
-    position: absolute;
-    top: 2rem;
-    left: 2rem;
-    font-size: 1.6rem;
-    padding-right: 0.5rem;
-  }
-  .fa-exclamation-triangle {
-    color: $orange;
-  }
-  .fa-check-square {
-    color: $green;
-  }
-  .fa-info-circle {
-    color: $blue;
-  }
-  &.bulletin-alert {
-    img, iframe {
-      margin: 1rem auto;
-      width: 100%;
-      border-radius: 5px;
-    }
-  }
-  .problem-alert-title {
-    margin-top: 0.15rem;
-    margin-bottom: 1rem;
-    margin-left: 2rem;
-    margin-right: 2rem;
-    line-height: 1rem;
-    h3 {
-      display: inline;
-      color: $dark_gray;
-      font-size: 1.5rem;
-      font-weight: bold;
-    }
-    p {
-      display: inline;
-      color: $medium_gray;
-      font-size: 1.2rem;
-      white-space: nowrap;
-      margin-left: 0.5rem;
-    }
-  }
-  .fa-times {
-    position: absolute;
-    top: 2rem;
-    right: 2rem;
-    color: $medium_light_gray;
-    &:hover {
-      color: $dark_gray;
-    }
-  }
-  .problem-alert-content {
-    .markdown {
-      p {
-        display: block;
-        color: $dark_gray;
-        text-overflow: inherit;
-        overflow: inherit;
-        width: inherit;
-        white-space: inherit;
-      }
-      ul {
-        list-style-type: disc !important;
-        padding-inline-start: 40px;
-      }
-    }
-    p {
-      margin-bottom: 0.75rem !important;
-      font-size: 1.4rem;
-      line-height: 2rem;
-    }
-    label {
-      margin-top: 0.5rem;
-    }
-    .row {
-      margin-top: 2rem;
-    }
-    .tour-list {
-      margin: 0;
-      label {
-        max-width: 57%;
-      }
-    }
-    .link-button {
-      color: $off_white !important;
-      font-weight: bold !important;
-      float: none;
-      margin-bottom: 2rem;
-    }
-    .fb-button {
-      margin-top: 0.5rem;
-    }
-    a {
-      text-decoration: none !important;
-      outline: none !important;
-      cursor: pointer !important;
-      color: $dark_gray;
-      &:link {
-        font-weight: 500;
-        color: $dark_gray;
-      }
-      &:visited {
-        color: $dark_gray;
-      }
-      &:hover {
-        font-weight: bold;
-        color: $dark_gray;
-      }
-      &:active {
-        color: $dark_gray;
-      }
-    }
-  }
-  .documentation-card {
-    .fa-question {
-      cursor: default !important;
-      margin-left: 0.25rem;
-      margin-right: 0.25rem;
-    }
-  }
-}
-
-.firmware-alerts {
-  max-width: 600px;
-}
-
-.firmware-hardware-choice-table {
-  margin: 2rem;
-  margin-top: 1rem;
-  width: 93%;
-  border: 1px solid $gray;
-  font-size: 1.2rem;
-  th {
-    background: $light_gray;
-    font-weight: normal;
-  }
-  td {
-    background: $off_white;
-    color: $medium_gray;
-  }
-  code {
-    background: $light_gray;
-    color: $dark_gray;
-  }
-}
-
-.firmware-path-selection {
-  .manual-selection {
-    margin: 1rem -15px;
-    p {
-      padding: 0rem 1.5rem 1rem;
-    }
-  }
-}
-
-.move-absolute-form {
-  display: flex;
-  .location-form,
-  .expandable-header {
-    padding-left: 15px;
-  }
-  .expandable-header {
-    padding-right: 15px;
-  }
-  .input-line {
-    flex: auto;
-  }
-  .more-options {
-    min-width: 110px;
-    margin-top: 0.5rem;
-  }
-  .custom-coordinate-form {
-    margin-left: -2.5rem;
-    margin-right: -11.25rem;
-  }
-}
-
-textarea {
-  width: 100%;
-  border: 0;
-  padding: 6px 8px;
-  box-shadow: 0 0 10px #ddd;
-  outline: none!important;
-  resize: vertical;
-}
-
-textarea:focus {
-  box-shadow: 0 0 10px rgba(0,0,0,.2);
-}
-
-.sort-option-bar {
-  cursor: pointer;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-  border: 2px solid color.adjust($panel_light_blue, $lightness: -30%);
-  border-radius: 5px;
-  &:hover, &.selected {
-    .sort-path-info-bar {
-      background: color.adjust($panel_light_blue, $lightness: -40%);
-    }
-  }
-  &:hover {
-    border: 2px solid color.adjust($panel_light_blue, $lightness: -40%);
-  }
-  &.selected {
-    border: 2px solid $medium_gray;
-  }
-  .sort-path-info-bar {
-    background: color.adjust($panel_light_blue, $lightness: -30%);
-    font-size: 1.2rem;
-    padding-left: 0.5rem;
-    white-space: nowrap;
-    line-height: 2.5rem;
-  }
-}
-
-.os-download-page {
-  table {
-    a {
-      text-transform: none;
-    }
-  }
-}
-
-.featured-sequences-page,
-.os-download-page {
-  text-align: center;
-  .all-content-wrapper {
-    padding-top: 0 !important;
-    min-height: 30rem;
-  }
-  h1 {
-    margin-top: 5rem;
-    font-size: 2rem !important;
-    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1) !important;
-  }
-  p {
-    margin: auto;
-    width: 70%;
-    color: $off_white;
-  }
-  a {
-    white-space: nowrap;
-    font-weight: bold !important;
-    color: $off_white !important;
-    &:hover {
-      color: $white !important;
-    }
-    &:visited {
-      color: $off_white;
-    }
-    &:link {
-      color: $off_white;
-    }
-    &:active {
-      color: $white !important;
-    }
-  }
-  table {
-    margin: auto;
-    margin-top: 3rem;
-    width: 93%;
-    font-size: 1.2rem;
-    color: $off_white;
-    text-align: left;
-    thead {
-      border-bottom: 2px solid $off_white;
-    }
-    tr:not(:last-child) {
-      border-bottom: 1px solid $gray;
-    }
-    td {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-      white-space: pre-wrap;
-      span {
-        display: block;
-        white-space: nowrap;
-      }
-    }
-  }
-  button {
-    cursor: pointer;
-  }
-  .wizard-btn {
-    margin: 1rem;
-    float: none;
-    color: $white;
-    margin-top: 7rem;
-  }
-  .os-download-wizard {
-    position: relative;
-    margin-top: 2rem;
-    .transparent-button {
-      margin: 1rem;
-      float: none;
-      color: $white;
-      height: 5rem;
-      width: 15rem;
-    }
-    .back {
-      display: block;
-      position: absolute;
-      top: -1rem;
-      float: left;
-      height: unset;
-      width: unset;
-    }
-    .start {
-      height: unset;
-      width: unset;
-    }
-    p {
-      font-size: 1.4rem;
-      margin-bottom: 1rem !important;
-    }
-    .os-download-wizard-note {
-      font-size: 1.4rem;
-      font-weight: bold;
-    }
-    .buttons {
-      display: flex;
-      button {
-        width: 75%;
-        border-radius: 0;
-        padding: 0;
-        border: 3px solid $white;
-        width: 75%;
-        img {
-          margin: 0;
-          width: 100%;
-          margin-top: -1rem;
-        }
-        &:hover {
-          border-color: $off_white;
-          .btn-text {
-            background: color.adjust($cyan, $lightness: -10%);
-          }
-        }
-      }
-    }
-    .download-wizard-button {
-      .os-wizard-content-button {
-        border-radius: 8px;
-        .btn-text {
-          background: $cyan;
-          border-radius: 5px 5px 0 0;
-          .btn-title {
-            font-family: "Inknut Antiqua";
-            font-weight: bold;
-            margin-bottom: 0.5rem !important;
-            padding-top: 0.75rem;
-            font-size: 1.7rem;
-          }
-          .os-download-wizard-btn-label {
-            width: 75%;
-            font-size: 1.2rem;
-            padding-bottom: 0.5rem;
-            line-height: 1.5rem;
-          }
-        }
-        img {
-          border-radius: 0 0 5px 5px;
-        }
-        &.white {
-          background: $white !important;
-          border-color: $off_white;
-          .btn-text {
-            background: $off_white;
-            .btn-title {
-              color: $dark_gray;
-            }
-          }
-          &:hover {
-            background: $off_white !important;
-            border-color: $white;
-            .btn-text {
-              background: $white;
-            }
-          }
-        }
-        &.black {
-          background: $white !important;
-          border-color: $dark_gray;
-          .btn-text {
-            background: $dark_gray;
-            .btn-title {
-              color: $white;
-            }
-          }
-          &:hover {
-            background: $off_white !important;
-            border-color: $darker_gray;
-            .btn-text {
-              background: $darker_gray;
-            }
-          }
-        }
-      }
-    }
-    .download-link {
-      display: inline-block;
-      a {
-        text-transform: none;
-      }
-    }
-    .buttons-with-image {
-      display: flex;
-      .buttons {
-        margin: auto;
-        margin-right: 0;
-      }
-      img {
-        margin: auto;
-        margin-left: 3rem;
-        width: 12rem;
-        border-radius: 5px;
-        border: 3px solid $lighter_gray;
-      }
-    }
-  }
-}
-
-.static-page {
-  &.os-download-page {
-    .os-download-description {
-      width: 80%;
-    }
-    p {
-      font-size: 1.5rem;
-      line-height: 2rem;
-    }
-    h1 {
-      margin-top: 0;
-      font-family: "Inknut Antiqua" !important;
-      font-weight: 600 !important;
-    }
-  }
-}
-
-.featured-sequences-page {
-  summary {
-    color: $light_gray;
-    cursor: pointer;
-  }
-  .sequence-description {
-    margin-left: -1.5rem;
-    margin-right: -5rem;
-  }
-  .markdown {
-    p {
-      color: $white !important;
-    }
-  }
-  details {
-    max-width: calc(min(70vw, 370px));
-  }
-  summary {
-    margin-bottom: 0.5rem;
-  }
-  h1,
-  h2 {
-    margin-bottom: 0;
-  }
-  li,
-  p {
-    white-space: pre-wrap;
-  }
-}
-
-.setting {
-  position: relative;
-  &.section {
-    .bp5-collapse {
-      padding-top: 1rem;
-    }
-  }
-  &.highlight {
-    background-color: $light_yellow;
-    box-shadow: 0px 0px 7px 4px $light_yellow;
-  }
-  &.unhighlight {
-    transition: background-color 10s linear, box-shadow 10s linear;
-    background-color: transparent;
-    box-shadow: none;
-  }
-  &.advanced {
-    border-left: 3px solid $blue;
-    padding-left: 0.7rem;
-    margin-left: -1rem;
-  }
-  .fa-anchor {
-    position: absolute;
-    top: 1.1rem;
-    left: -0.8rem;
-    color: $gray;
-    font-size: 0.8rem;
-    visibility: hidden;
-    &.hovered {
-      visibility: visible;
-    }
-    &.section {
-      position: absolute !important;
-      top: 0.1rem;
-    }
-  }
-  .landing-page-setting {
-    input {
-      margin-top: 1rem;
-    }
-  }
-  .activity-beep-setting {
-    margin-left: 0;
-    margin-right: 1.5rem !important;
-    .bp5-slider {
-      width: 0;
-      margin-left: 1rem;
-    }
-  }
-}
-
-.beacon-transition {
-  transition: border 1s, border-radius 1s, background 1s;
-}
-
-.beacon {
-  &.hard {
-    box-shadow: 0 0 0 4px $yellow !important;
-  }
-  &.soft {
-    background: #ffe53e52 !important;
-  }
-}
-
-.tour-toast {
-  cursor: default !important;
-  .toast-title,
-  .toast-message {
-    color: $white !important;
-    i {
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-    }
-    .extra-content {
-      margin-top: 1rem;
-    }
-  }
-  .toast-loader {
-    display: flex;
-    width: unset;
-    height: unset;
-    transform: none;
-    .previous,
-    .next,
-    .exit {
-      padding: 0.5rem;
-      &:hover {
-        font-weight: bold;
-      }
-    }
-    .previous,
-    .next {
-      margin-right: 0.5rem;
-      &.disabled {
-        pointer-events: none;
-        color: $dark_gray;
-      }
-    }
-  }
-  .toast-message {
-    margin-top: 1.5rem;
-  }
-  .toast-title,
-  .message-contents {
-    transition: height 0.4s, opacity 0.2s;
-  }
-  .message-contents {
-    &.height-hidden {
-      position: absolute;
-      visibility: hidden;
-      padding-right: 2rem;
-    }
-  }
-  .progress-indicator {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 0.5rem;
-    background: $white;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 5px;
-    transition: width 0.4s 0.2s, border-bottom-right-radius 0.4s 0.2s;
-  }
-}
-
-.widget-body-tooltips {
-  display: flex;
-  padding-right: 0.5rem;
-  .bp5-popover-wrapper {
-    line-height: 3rem;
-  }
-}
-
-.z-param-label {
-  margin-top: 0.2rem;
-  padding-right: 0;
-  label {
-    font-size: 1.2rem !important;
-  }
-}
-
-.read-only-icon {
-  margin: 9px 0px 0px 9px;
-  float: right;
-  box-sizing: inherit;
-  .fa-pencil {
-    color: $white;
-  }
-}
diff --git a/frontend/css/buttons.scss b/frontend/css/global/buttons.scss
similarity index 75%
rename from frontend/css/buttons.scss
rename to frontend/css/global/buttons.scss
index 59712ebe44..8134154e36 100644
--- a/frontend/css/buttons.scss
+++ b/frontend/css/global/buttons.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .fb-button {
   margin: 0.25em 0.5em;
   float: right;
@@ -81,6 +84,14 @@
   &.pink {
     background-color: $pink;
   }
+  &.clear {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1.5px var(--text-color);
+    color: var(--text-color);
+    &:hover {
+      box-shadow: inset 0 0 0 1.5px var(--text-color),0 0 5px var(--secondary-bg),inset 0 0 5px var(--secondary-bg);
+    }
+  }
   &.panel-green {
     background-color: $panel_green;
   }
@@ -132,10 +143,8 @@
 }
 
 .block {
-  height: 3.5rem;
   font-size: 1.2rem;
   color: $dark_gray;
-  text-align: left;
   &.active {
     box-shadow: none !important;
     border: 1px solid $white;
@@ -149,30 +158,12 @@
       background-color: color.adjust($medium_light_gray, $lightness: -5%) !important;
     }
   }
-  &:hover {
-    .block-control {
-      transition: all 0.2s ease-out;
-      opacity: 1;
-    }
-  }
   .step-block {
     display: flex;
     padding: 0;
     box-shadow: none;
     .step-block-drag {
-      margin: auto;
-      width: 100%;
-      padding: 0.2rem 0.8rem;
-      label {
-        display: -webkit-box;
-        margin: 0;
-        width: 90%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-wrap: break-word;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
+      padding: 0.5rem 0.8rem;
     }
   }
   &.quick-del {
@@ -191,18 +182,6 @@
   }
 }
 
-.block-control {
-  position: absolute;
-  top: 30%;
-  right: 0.75rem;
-  transition: all 0.2s ease-out;
-  opacity: 0;
-  float: right;
-  font-size: 1.4rem !important;
-  pointer-events: none;
-
-}
-
 .fb-toggle-button {
   position: relative;
   height: 1.8rem !important;
@@ -213,46 +192,29 @@
   width: 5rem;
   border-bottom: none;
   transition: all 0.4s ease;
-  &.yellow {
+  &.yellow, &.green, &.red {
     &:after {
       content: "";
       position: absolute;
-      top: 0.1rem;
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      height: 1.6rem;
-      width: 1.6rem;
-      background: $white;
+      top: 0.2rem;height: 1.4rem;
+      width: 1.4rem;
+      background: $off_white;
       border-radius: 50%;
-      box-shadow: inset rgba(0, 0, 0, 0.03) 0px 0px 3px 3px;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
     }
-    &:before {
-      content: "";
-      position: absolute;
-      top: 0.1rem;
+  }
+  &.yellow {
+    &:after {
       left: 0;
       right: 0;
       margin: 0 auto;
-      height: 1.6rem;
-      width: 1.6rem;
-      border-radius: 50%;
-      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
     }
   }
   &.green {
     text-align: left;
     padding-left: 0.6rem;
     &:after {
-      content: "";
-      position: absolute;
-      top: 0.1rem;
       right: 0.2rem;
-      height: 1.6rem;
-      width: 1.6rem;
-      background: $white;
-      border-radius: 50%;
-      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
     }
     &:hover {
       background: $green;
@@ -265,15 +227,7 @@
     text-align: right !important;
     padding-right: 0.8rem;
     &:after {
-      content: "";
-      position: absolute;
-      top: 0.1rem;
       left: 0.2rem;
-      height: 1.6rem;
-      width: 1.6rem;
-      background: white;
-      border-radius: 50%;
-      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
     }
     &.dim {
       background: color.adjust($red, $lightness: 10%) !important;
@@ -300,13 +254,6 @@
   }
 }
 
-.front-page-button {
-  margin-top: "1rem";
-  padding: ".5rem 1.6rem";
-  font-size: "1.2rem";
-  border-bottom: "none";
-}
-
 .fb-icon-button {
   width: 2.5rem;
   height: 2.5rem;
@@ -317,10 +264,10 @@
   background: transparent;
   color: $dark_gray;
   text-align: center;
-  &.light {
-    color: $off_white;
+  &.invert {
+    color: var(--text-color);
     &:hover:not(:disabled) {
-      background: rgba(255, 255, 255, 0.12);
+      background: var(--secondary-bg);
     }
     &:disabled {
       color: $off_white;
@@ -339,3 +286,24 @@
     cursor: not-allowed;
   }
 }
+
+.header-button-group {
+  margin-right: 1.5rem;
+}
+
+.button-group {
+  justify-content: right;
+  .fa-code {
+    font-weight: bold;
+    color: $gray;
+    &.enabled {
+      color: $dark_gray;
+    }
+  }
+  .inactive {
+    color: $gray;
+  }
+  .fa-eye-slash {
+    color: $gray;
+  }
+}
diff --git a/frontend/css/global/fonts.scss b/frontend/css/global/fonts.scss
new file mode 100644
index 0000000000..3cf3c01a5c
--- /dev/null
+++ b/frontend/css/global/fonts.scss
@@ -0,0 +1,75 @@
+@use "../variables" as *;
+@use "sass:color";
+
+$cabin: 'Cabin',
+Arial,
+Helvetica,
+sans-serif;
+
+body,
+html {
+  font-family: $cabin;
+  font-weight: 400;
+  font-size: 10px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+fieldset {
+  font-family: $cabin;
+  font-weight: 400;
+}
+
+a {
+  text-decoration: none !important;
+  outline: none !important;
+  cursor: pointer !important;
+  color: inherit;
+  &:link {
+    font-weight: 500;
+    color: inherit;
+  }
+  &:visited {
+    color: inherit;
+  }
+  &:hover {
+    font-weight: bold;
+    color: inherit;
+  }
+  &:active {
+    color: inherit;
+  }
+}
+
+p {
+  font-size: 1.1rem;
+  color: inherit;
+  line-height: 1.4rem;
+  margin-bottom: 0 !important;
+}
+
+h3 {
+  display: inline-block;
+  margin-top: 0;
+  font-size: 2.2rem;
+}
+
+h4 {
+  line-height: 1.1rem;
+  font-size: 1.8rem;
+  color: inherit;
+}
+
+hr {
+  border: 1px solid var(--secondary-bg);
+}
+
+ul {
+  list-style-type: none !important;
+  padding: 0;
+}
diff --git a/frontend/css/global/global.scss b/frontend/css/global/global.scss
new file mode 100644
index 0000000000..d36c845b8c
--- /dev/null
+++ b/frontend/css/global/global.scss
@@ -0,0 +1,468 @@
+@use "../variables" as *;
+@use "sass:color";
+
+body {
+  background: $dark_bg;
+  margin: 0;
+}
+
+.app,
+.bp5-portal {
+  background: var(--main-bg);
+  color: var(--text-color);
+}
+
+.app.dark {
+  background: hsl(135 10% 20% / 1);
+}
+
+.app.light {
+  background: $gray;
+}
+
+.initial-loading-text {
+  position: absolute;
+  top: 385px;
+  z-index: -1;
+  text-align: center;
+  width: 100%;
+  padding-top: 10%;
+  color: $gray;
+}
+
+.char-limit {
+  float: right;
+  font-size: 1.4rem;
+  &.over {
+    color: $darkest_red;
+    font-weight: bold;
+  }
+}
+
+.markdown {
+  p {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-transform: none;
+  }
+}
+
+.controls-popover,
+.jobs-panel,
+.connectivity-popover {
+  .bp5-popover-content {
+    background: var(--main-bg);
+  }
+}
+
+.jobs-and-logs,
+.controls-content,
+.connectivity-content {
+  display: grid;
+  gap: 2rem;
+  color: var(--text-color);
+  .tabs {
+    border-radius: 0.5rem;
+    display: grid;
+    gap: 0.2rem;
+    grid-auto-flow: column;
+    justify-content: center;
+    margin: 0 auto;
+    overflow: hidden;
+    label {
+      padding: 0.5rem 3rem;
+      background: $light_gray;
+      color: $medium_gray;
+      cursor: pointer;
+      &.selected {
+        background: $medium_gray;
+        color: $off_white;
+      }
+      &:hover {
+        background-color: color.adjust($white, $lightness: -40%);
+        color: $off_white;
+      }
+    }
+  }
+}
+
+.all-content-wrapper {
+  margin: 0 auto;
+  padding: 11rem 3rem 0;
+  width: 100%;
+  max-width: 160rem;
+  animation: page-transition 0.2s ease-in-out;
+}
+
+a {
+  cursor: pointer !important;
+  outline: none !important;
+}
+
+.fa {
+  cursor: pointer !important;
+}
+
+.caution-icon {
+  pointer-events: none;
+  margin-left: 1rem;
+}
+
+.drag-drop-area {
+  &.visible {
+    margin: 0.75rem 0;
+    margin-right: 25px;
+    margin-left: 10px;
+    border-style: dashed;
+    border-width: 2px;
+    border-color: $light_gray;
+    color: $gray;
+    font-weight: bold;
+    padding: 1.25rem;
+    background: $off_white;
+    text-align: center;
+    color: $gray;
+    font-weight: bold;
+  }
+}
+
+.expandable-header {
+  cursor: pointer;
+  .icon-toggle {
+    font-size: 1.2rem;
+    font-weight: bold;
+    vertical-align: middle;
+    .fa {
+      font-size: 1rem;
+    }
+  }
+}
+
+.fa-exclamation-triangle {
+  color: $orange;
+}
+
+.fb-toggle-button {
+  .setting-status-indicator {
+    top: 0.25rem;
+  }
+}
+
+.fb-toggle-button {
+  &.yellow {
+    .setting-status-indicator {
+      display: none;
+    }
+  }
+  &.green {
+    .setting-status-indicator {
+      right: 0.4rem;
+    }
+  }
+  &.red {
+    .setting-status-indicator {
+      left: 0.4rem;
+    }
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+.e-stop {
+  white-space: nowrap;
+  &.yellow {
+    animation: bright-flash 1s infinite alternate;
+  }
+}
+
+.e-stop-btn {
+  float: right;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+  border-radius: 1rem;
+  .e-stop {
+    margin: 0;
+    box-shadow: none !important;
+    height: 2.9rem;
+    font-size: 1.1rem !important;
+    &.pseudo-disabled {
+      box-shadow: none !important;
+    }
+    &:hover {
+      box-shadow: 0 0 10px $translucent5, 0 0 5px inset rgba(255, 255, 255, 0.2) !important;
+      &.red {
+        color: $white;
+      }
+      &.yellow {
+        color: $black;
+      }
+    }
+  }
+  &.hard {
+    border-radius: 5px;
+  }
+}
+
+.unavailable {
+  display: inline-block;
+  position: relative;
+  z-index: 10;
+  opacity: 0.40;
+  * {
+    pointer-events: none;
+  }
+  &.banner {
+    &:after {
+      content: "Not available when device is offline.";
+      position: absolute;
+      top: 25%;
+      left: -2.5%;
+      z-index: 10;
+      width: 105%;
+      padding: 0.5rem;
+      background-color: $dark_gray;
+      opacity: 0.90;
+      color: $off_white;
+      font-size: 1.8rem;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+}
+
+.sequence-description-wrapper,
+.button-group,
+.panel-header-icon-group {
+  .fa-spinner {
+    background: none !important;
+    box-shadow: none !important;
+  }
+}
+
+.fb-button-popover-wrapper {
+  float: right;
+}
+
+.parameter-assignment-menu {
+  .test-button-div {
+    text-align: center;
+  }
+  .fb-button {
+    float: none;
+  }
+}
+
+.parameter-assignment-menu-popover {
+  max-width: 400px;
+}
+
+@keyframes page-transition {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.empty-state-graphic {
+  width: 40%;
+  filter: grayscale(1)
+}
+
+.empty-state {
+  margin: 2rem 0;
+  text-align: center;
+  h5 {
+    font-weight: bold;
+  }
+  &.location {
+    img {
+      filter: grayscale(1);
+    }
+  }
+}
+
+.update-resource-step {
+  .update-resource-pair {
+    .custom-meta-field {
+      position: relative;
+      .fa-undo {
+        position: absolute;
+        top: 0.65rem;
+        right: 0.5rem;
+        color: $medium_light_gray;
+        &:hover {
+          color: $dark_gray;
+        }
+      }
+    }
+    .custom-field-warning {
+      i,
+      p {
+        display: inline;
+        cursor: default !important;
+        margin-right: 0.5rem;
+        color: $darkest_red;
+      }
+      .did-you-mean {
+        cursor: pointer !important;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.computed-move-step {
+  &.step-content {
+    display: grid;
+    gap: 1rem;
+    .move-location-grid {
+      grid-template-columns: calc(25% - 1rem) 1fr;
+    }
+    input {
+      &:disabled {
+        background: $light_gray !important;
+      }
+    }
+    .expandable-header {
+      margin: 0;
+    }
+    span {
+      color: $dark_gray;
+    }
+    .input {
+      &.lua {
+        border-color: $yellow;
+        &:after {
+          content: "lua";
+          position: absolute;
+          top: -0.25rem;
+          right: -0.3rem;
+          color: $dark_gray;
+          background: $yellow;
+          padding: 0.2rem 0.4rem;
+          font-size: 0.65rem;
+          font-weight: bold;
+          text-transform: uppercase;
+        }
+      }
+    }
+  }
+}
+
+.checkbox-row {
+  display: flex;
+  margin-top: 1rem;
+  label {
+    padding: 0;
+    line-height: 2rem;
+    margin-bottom: 0;
+  }
+  .fb-checkbox {
+    display: inline;
+    position: relative;
+    margin-right: 1rem;
+  }
+  .bp5-popover-wrapper,
+  .bp5-popover-target {
+    margin-left: 1rem;
+  }
+}
+
+.default-value-form {
+  position: relative;
+}
+
+.status-icon {
+  &.ok {
+    color: $green;
+  }
+  &.no {
+    color: $red;
+  }
+  &.unknown {
+    color: $orange;
+  }
+}
+
+.status-details {
+  max-width: 30rem;
+  button {
+    float: none !important;
+  }
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 0.5rem;
+    font-size: 1.3rem;
+  }
+}
+
+.location-form-content {
+  display: grid;
+  gap: 1rem;
+}
+
+textarea:focus {
+  box-shadow: 0 0 10px rgba(0,0,0,.2);
+}
+
+.sort-option-bar {
+  cursor: pointer;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  border: 2px solid color.adjust($panel_light_blue, $lightness: -30%);
+  border-radius: 5px;
+  &:hover, &.selected {
+    .sort-path-info-bar {
+      background: color.adjust($panel_light_blue, $lightness: -40%);
+    }
+  }
+  &:hover {
+    border: 2px solid color.adjust($panel_light_blue, $lightness: -40%);
+  }
+  &.selected {
+    border: 2px solid $medium_gray;
+  }
+  .sort-path-info-bar {
+    background: color.adjust($panel_light_blue, $lightness: -30%);
+    font-size: 1.2rem;
+    padding-left: 0.5rem;
+    white-space: nowrap;
+    line-height: 2.5rem;
+  }
+}
+
+.beacon-transition {
+  transition: border 1s, border-radius 1s;
+}
+
+.beacon {
+  &.hard {
+    box-shadow: 0 0 0 4px $yellow !important;
+  }
+  &.soft {
+    background: #ffe53e52 !important;
+  }
+}
+
+ul {
+  margin: 0;
+  li {
+    margin: 0;
+  }
+}
+
+*::-webkit-scrollbar {
+  display: none !important;
+  width: 0px !important;
+  background-color: transparent !important;
+}
+
+svg {
+  fill: var(--text-color);
+}
diff --git a/frontend/css/global/imports.scss b/frontend/css/global/imports.scss
new file mode 100644
index 0000000000..72cfc098c1
--- /dev/null
+++ b/frontend/css/global/imports.scss
@@ -0,0 +1,6 @@
+// Google Fonts
+@import url("https://fonts.googleapis.com/css?family=Cabin:400,400italic,700,700italic,100,100italic");
+@import url("https://fonts.googleapis.com/css?family=Inknut+Antiqua:400,400italic,700,700italic,100,100italic");
+// Blueprint
+@import "~/node_modules/@blueprintjs/core/lib/css/blueprint.css";
+@import "~/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css";
diff --git a/frontend/css/inputs.scss b/frontend/css/global/inputs.scss
similarity index 70%
rename from frontend/css/inputs.scss
rename to frontend/css/global/inputs.scss
index 99c42624ad..297f13a72f 100644
--- a/frontend/css/inputs.scss
+++ b/frontend/css/global/inputs.scss
@@ -1,18 +1,46 @@
-// Styles for INPUTS
+@use "../variables" as *;
+@use "sass:color";
+
+button,
+select,
+summary,
+input {
+  outline: none !important;
+}
+
+input {
+  border-radius: 3px;
+  &:disabled {
+    background: $translucent5_white !important;
+    cursor: not-allowed;
+  }
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button,
+input[type=date]::-webkit-inner-spin-button,
+input[type=date]::-webkit-outer-spin-button,
+input[type=time]::-webkit-inner-spin-button,
+input[type=time]::-webkit-outer-spin-button,
+input[type=time] {
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+  margin: 0;
+}
+
 input:not([role="combobox"]) {
   font-size: 1.2rem;
-  color: $dark_gray;
   height: auto;
   width: 100%;
   border: 0;
   padding: 6px 8px;
-  box-shadow: 0px 0px 10px $light_gray;
+  background: $translucent9_white;
   &[type="checkbox"] {
     width: inherit;
   }
   &:focus {
     background-color: $white;
-    box-shadow: 0px 0px 10px $translucent;
+    box-shadow: 0px 0px 10px $translucent1_white;
   }
   &.bulk-day-selector {
     width: 10%;
@@ -48,6 +76,16 @@ input:not([role="combobox"]):not([type="checkbox"]):not([type="radio"]) {
   height: 3rem;
 }
 
+input[type="radio"] {
+  box-shadow: none !important;
+  margin: 0;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  padding: 0;
+}
+
 .input {
   position: relative;
   .bp5-popover-wrapper {
@@ -84,15 +122,15 @@ input:not([role="combobox"]):not([type="checkbox"]):not([type="radio"]) {
 }
 
 .week-row {
-  height: 30.5px;
-  width: 108%;
-  margin-left: -1rem;
+  display: grid;
+  grid-template-columns: 1fr repeat(7, 4.5rem);
+  align-items: center;
 }
 
 select {
   border: none;
   padding: 7px;
-  background: $white;
+  background: $translucent9_white;
   width: 100%;
 }
 
@@ -176,14 +214,15 @@ select {
 
 .fb-checkbox {
   input[type="checkbox"] {
-    position: relative;
-    border-radius: 0;
     -webkit-appearance: none;
-    border: 0.5px solid $gray;
-    width: 2rem;
+    background: $translucent9_white;
+    border-radius: 0;
+    border-radius: 3px;
     height: 2rem;
-    background: $white;
-    margin-top: 0;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+    width: 2rem;
     cursor: pointer;
     &:before {
       content: "";
@@ -192,7 +231,7 @@ select {
       left: 0;
       width: 100%;
       height: 100%;
-      background: $white;
+      background: $translucent9_white;
       opacity: 0.5;
     }
     &:checked:after {
@@ -216,6 +255,7 @@ select {
     padding: 0.6rem 0.3rem;
   }
   &.large {
+    height: 3rem;
     input[type="checkbox"] {
       width: 3rem;
       height: 3rem;
@@ -242,3 +282,47 @@ select {
     }
   }
 }
+
+textarea {
+  border-radius: 0.5rem;
+  width: 100%;
+  border: 0;
+  outline: none!important;
+  resize: vertical;
+  font-size: 1.2rem;
+  padding: 1rem;
+}
+
+.input-group {
+  width: 100% !important;
+  input[type=checkbox] {
+    box-shadow: none;
+  }
+}
+
+fieldset {
+  border: none;
+  legend {
+    background: transparent;
+  }
+}
+
+.modified {
+  box-shadow: 0 0 0px 3px $yellow !important;
+  border-radius: 3px;
+  &.bp5-slider {
+    box-shadow: none !important;
+    .bp5-slider-handle {
+      box-shadow: 0 0 0px 3px $yellow;
+    }
+  }
+}
+
+.input {
+  .fa-undo {
+    position: absolute;
+    top: 1rem;
+    right: 0.25rem;
+    font-size: 1rem;
+  }
+}
diff --git a/frontend/css/global/labels.scss b/frontend/css/global/labels.scss
new file mode 100644
index 0000000000..ba88e89484
--- /dev/null
+++ b/frontend/css/global/labels.scss
@@ -0,0 +1,22 @@
+@use "../variables" as *;
+@use "sass:color";
+
+label {
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  &.day-label {
+    position: absolute;
+    text-align: center;
+    width: 10%;
+    margin-bottom: 0px;
+    line-height: 3rem;
+    border: solid var(--border-color);
+    border-width: 1px;
+  }
+}
+
+input[type=checkbox]:checked+label.day-label {
+  color: var(--main-bg);
+  background: var(--text-color);
+}
diff --git a/frontend/css/global/saucers.scss b/frontend/css/global/saucers.scss
new file mode 100644
index 0000000000..9d5c75b714
--- /dev/null
+++ b/frontend/css/global/saucers.scss
@@ -0,0 +1,70 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.saucer {
+  position: relative;
+  z-index: 2;
+  height: 2rem;
+  width: 2rem;
+  background: $dark_gray;
+  border-radius: 50%;
+  cursor: pointer;
+  &.active {
+    border: 2px solid $dark_gray;
+  }
+  &.hover {
+    border: 2px solid $off_white;
+  }
+  p {
+    font-weight: 900;
+    color: $white;
+    margin-left: 0.7rem;
+    margin-top: 0.3rem;
+  }
+}
+
+.icon-saucer {
+  position: relative;
+  z-index: 2;
+  height: 2rem;
+  width: 2rem;
+  color: $dark_gray;
+  cursor: pointer;
+  &.active {
+    border: 2px solid white;
+  }
+  &.hover {
+    border: 2px solid $dark_gray;
+  }
+}
+
+.saucer-connector {
+  position: absolute;
+  z-index: 1;
+  height: 6rem;
+  width: 1rem;
+  margin-left: 0.5rem;
+  margin-top: -1rem;
+  &.last {
+    margin-top: -9rem;
+    height: 8rem;
+  }
+}
+
+.colorpicker-menu {
+  padding: 0;
+  .bp5-popover-arrow-fill {
+    fill: $dark_gray;
+  }
+  .bp5-popover-content {
+    width: 13rem;
+    background: $dark_gray;
+  }
+  .bp5-popover-content,
+  .color-picker-cluster,
+  .color-picker-item-wrapper,
+  .saucer {
+    display: inline-block;
+    padding: 0.4rem;
+  }
+}
diff --git a/frontend/css/global/sliders.scss b/frontend/css/global/sliders.scss
new file mode 100644
index 0000000000..ef0980b951
--- /dev/null
+++ b/frontend/css/global/sliders.scss
@@ -0,0 +1,61 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.sliders {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  margin-bottom: 3rem;
+  margin-top: 1rem;
+  .bp5-slider {
+    margin-left: 3rem;
+    margin-top: 1rem;
+    width: 80%;
+  }
+  &.vertical {
+    .bp5-slider {
+      margin-top: 0;
+    }
+  }
+  .bp5-slider-label {
+    white-space: nowrap;
+    text-align: center;
+    &:empty {
+      display: none;
+    }
+  }
+  .data-slider {
+    pointer-events: none;
+    .bp5-slider-axis,
+    .bp5-slider-track {
+      display: none;
+    }
+    .bp5-slider-label {
+      box-shadow: none;
+    }
+    .bp5-start {
+      top: 0.53rem;
+      width: 0.5px;
+      background: color.adjust($dark_gray, $alpha: -0.75);
+      box-shadow: none;
+      height: 0.55rem;
+      border-radius: 0;
+      &:first-of-type {
+        display: none;
+      }
+    }
+    &.vertical {
+      .bp5-start {
+        top: unset;
+        left: 0.53rem;
+        height: 0.5px;
+        width: 0.55rem;
+        border-radius: 0;
+      }
+    }
+  }
+  .input-slider {
+    position: absolute;
+    top: 0;
+  }
+}
diff --git a/frontend/css/tables.scss b/frontend/css/global/tables.scss
similarity index 64%
rename from frontend/css/tables.scss
rename to frontend/css/global/tables.scss
index d94e84ecb6..823d644f3a 100644
--- a/frontend/css/tables.scss
+++ b/frontend/css/global/tables.scss
@@ -1,7 +1,12 @@
-// Styles for TABLES
+@use "../variables" as *;
+@use "sass:color";
+
 table {
   width: 100%;
   margin-bottom: 0;
+  border-collapse: collapse;
+  border-radius: 1rem;
+  overflow: hidden;
 }
 
 table.plain tr:nth-of-type(1n) {
diff --git a/frontend/css/tooltips.scss b/frontend/css/global/tooltips.scss
similarity index 93%
rename from frontend/css/tooltips.scss
rename to frontend/css/global/tooltips.scss
index 12d9b390b0..0b30b95ce0 100644
--- a/frontend/css/tooltips.scss
+++ b/frontend/css/global/tooltips.scss
@@ -1,3 +1,10 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.help-icon {
+  font-size: 1.3rem;
+}
+
 .help {
   display: inline;
   margin-left: 2rem;
@@ -28,6 +35,7 @@
 }
 
 .help-text-content {
+  font-size: 1.4rem;
   a {
     color: $off_white;
     &:hover {
diff --git a/frontend/css/labels.scss b/frontend/css/labels.scss
deleted file mode 100644
index 97df079162..0000000000
--- a/frontend/css/labels.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Styles for LABELS
-label {
-  color: $dark_gray;
-  font-size: 1.2rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  &.day-label {
-    position: absolute;
-    text-align: center;
-    width: 10%;
-    margin-bottom: 0px;
-    line-height: 3rem;
-    border: solid $gray;
-    background: $white;
-    border-width: 1px 0.5px;
-    &.left-most {
-      border-left-width: 1px;
-    }
-    &.right-most {
-      border-right-width: 1px;
-    }
-  }
-  &.week-label {
-    width: 25%;
-    text-align: center;
-    vertical-align: middle;
-    margin-top: -1.75rem;
-  }
-}
-
-input[type=checkbox]:checked+label.day-label {
-  color: $off_white;
-  background: $dark_gray;
-}
diff --git a/frontend/css/laptop_splash.scss b/frontend/css/laptop_splash.scss
deleted file mode 100644
index 4673b62d54..0000000000
--- a/frontend/css/laptop_splash.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-.perspective-container {
-  margin-top: 5rem;
-  perspective: 1500px;
-}
-
-.laptop {
-  width: 80%;
-  margin-left: 0px;
-  transform: rotateX(6deg) rotateY(30deg) rotateZ(-6deg);
-  transform-style: preserve-3d;
-  transition-duration: 6s;
-}
-
-@media only screen and (max-width: 600px) {
-  .laptop,
-  .laptop:hover {
-    transform: rotateX(6deg) rotateY(30deg) rotateZ(-6deg) scale3D(.4, .4, .4) translateX(-75%) !important;
-    margin-top: -60%;
-    margin-bottom: -80%;
-  }
-  span.laptop-shine {
-    opacity: 0;
-  }
-}
-
-.laptop:hover {
-  transform: rotateX(6deg) rotateY(25deg) rotateZ(-5deg) translateY(-5px) scale3D(1.03, 1.03, 1.03);
-  transform-style: preserve-3d;
-}
-
-.laptop-screen {
-  padding: 13px 10px 20px;
-  width: 100%;
-  border-radius: 15px;
-  background: white;
-  box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), -16px 20px 40px 0px rgba(0, 0, 0, .15);
-  border-left: 2px solid #ddd;
-}
-
-.laptop-screen video {
-  width: 100%;
-  border-radius: 3px;
-  box-shadow: 0px 0px 4px 2px #eee;
-}
-
-span.laptop-shine {
-  display: none;
-  position: absolute;
-  top: 10px;
-  left: 12px;
-  bottom: 200px;
-  right: 160px;
-  background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 250, .3) 77%, rgba(255, 255, 255, 0) 90%);
-  transition-duration: 6s;
-}
-
-.laptop:hover span.laptop-shine {
-  opacity: 0;
-}
-
-.laptop-keyboard {
-  border-left: 1px solid #ddd;
-  border-top: 2px solid #eee;
-  border-bottom: 12px solid #eee;
-  border-right: 21px solid white;
-  padding-left: 10px;
-  padding-top: 15px;
-  border-radius: 30px;
-  margin-top: -15px;
-  width: 100%;
-  height: 220px;
-  background: white;
-  transform: perspective(1500px) rotateX(70deg);
-  transform-origin: 50% 0;
-  box-shadow: -20px 30px 40px 0px rgba(0, 0, 0, .1);
-}
-
-.laptop-keys {
-  background: linear-gradient(45deg, #cfd7e1, #dce3eb);
-  width: 92%;
-  height: 100px;
-  margin-left: auto;
-  margin-right: auto;
-  opacity: 0.7;
-}
-
-.laptop-trackpad {
-  background: linear-gradient(45deg, #cfd7e1, #dce3eb);
-  width: 200px;
-  height: 70px;
-  margin-top: 10px;
-  margin-left: auto;
-  margin-right: auto;
-  opacity: 0.7;
-}
diff --git a/frontend/css/numbers.scss b/frontend/css/numbers.scss
deleted file mode 100644
index 72eb47e0ca..0000000000
--- a/frontend/css/numbers.scss
+++ /dev/null
@@ -1 +0,0 @@
-$mobile_max_width: 500px;
diff --git a/frontend/css/panels/connectivity.scss b/frontend/css/panels/connectivity.scss
new file mode 100644
index 0000000000..f6e7e7b4ed
--- /dev/null
+++ b/frontend/css/panels/connectivity.scss
@@ -0,0 +1,292 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.connector-hover-area {
+  visibility: hidden;
+  stroke: white;
+  pointer-events: all;
+}
+
+.diagnosis-indicator {
+  text-align: center !important;
+  &.nav {
+    display: inline-block;
+    border-color: transparent;
+  }
+  i {
+    display: block;
+    position: absolute;
+    top: 2.5px;
+    left: 2.5px;
+    color: $white;
+    font-size: 11px;
+    &.fa-times {
+      left: 0.35rem;
+    }
+    &.fa-question {
+      left: 0.45rem;
+    }
+  }
+}
+
+.connectivity-popover-portal {
+  .bp5-transition-container {
+    z-index: 999;
+  }
+  .connectivity-popover {
+    margin-top: -1rem;
+    max-width: 100vw;
+    .connectivity {
+      width: 600px;
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100vh - 10rem);
+      padding: 1rem;
+      .connectivity-content {
+        table {
+          font-size: 1.3rem;
+        }
+      }
+      .connectivity-left-column {
+        display: grid;
+        gap: 1rem;
+      }
+      .connectivity-right-column {
+        display: grid;
+        gap: 1rem;
+      }
+      .connectivity-diagram svg {
+        max-height: 200px !important;
+      }
+      .port-info,
+      .network-info,
+      .fbos-info {
+        @media (max-width:767px) {
+          display: block;
+        }
+      }
+      .network-info {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.diagnosis-section {
+  align-items: start!important;
+}
+
+.connectivity-diagnosis {
+  align-items: start;
+  h4 {
+    margin: 0.4rem 0 1.5rem;
+  }
+  p {
+    padding-bottom: 1rem;
+  }
+  a {
+    display: block;
+    font-size: 1.2rem;
+  }
+  .blinking {
+    a {
+      display: inline;
+    }
+  }
+  .fa-external-link {
+    margin-right: 0.5rem;
+  }
+}
+
+.camera-connection-indicator,
+.memory-usage-display,
+.chip-temp-display {
+  position: relative;
+  .saucer {
+    position: absolute;
+    top: 2px;
+    right: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+    cursor: default;
+  }
+}
+
+.voltage-display {
+  position: relative;
+  height: 1.4rem;
+  .voltage-saucer {
+    position: absolute;
+    top: 0;
+    right: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+    cursor: default;
+  }
+}
+
+.voltage-display {
+  display: flex;
+  .saucer {
+    height: 1rem;
+    width: 1rem;
+    cursor: default;
+    margin-left: 0.5rem;
+    margin-top: 0.2rem;
+  }
+  .help-icon {
+    margin: 0 0 0.5rem 0.25rem;
+    font-size: 1rem;
+    vertical-align: middle;
+  }
+}
+
+.throttle-display {
+  .throttle-row {
+    display: flex;
+    white-space: nowrap;
+    .saucer {
+      margin-right: 1rem;
+    }
+  }
+}
+
+.wifi-strength-display {
+  position: relative;
+  .percent-bar {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    height: 1rem;
+    width: 25%;
+    clip-path: polygon(0 85%, 100% 0, 100% 100%, 0% 100%);
+    background-color: $light_gray;
+    .percent-bar-fill {
+      height: 100%;
+      background-color: $green;
+    }
+  }
+}
+
+.mac-address {
+  font-size: 1rem;
+  b {
+    font-size: 1.1rem;
+  }
+}
+
+.port-info,
+.network-info,
+.fbos-info {
+  background: var(--secondary-bg);
+  padding: 1rem;
+  border-radius: 5px;
+  .ip-address {
+    word-break: break-all;
+  }
+  a {
+    display: block;
+    margin-top: 1rem;
+    font-size: 1.1rem;
+    text-decoration: underline !important;
+    i {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.connectivity-diagram {
+  margin: auto;
+  width: 20rem;
+  fill: $gray;
+}
+
+.port-info,
+.qos-display {
+  .saucer {
+    float: right;
+    width: 1rem;
+    height: 1rem;
+    cursor: unset;
+  }
+}
+
+.port-info {
+  i {
+    display: block;
+    font-size: 1.2rem;
+  }
+  .fa {
+    display: inline;
+  }
+}
+
+.last-seen-row {
+  i {
+    margin-right: 0.5rem;
+  }
+}
+
+.farmbot-os-details {
+  max-width: 350px;
+}
+
+.fbos-metric-history {
+  .fbos-metric-history-table-wrapper {
+    display: block;
+    overflow-y: scroll;
+    max-height: 25rem;
+    margin: 0 -2rem -2rem;
+    table {
+      overflow: unset;
+      thead, th {
+        text-align: left;
+        position: sticky;
+        top: 0;
+        z-index: 3;
+        background: var(--main-bg);
+      }
+      .saucer {
+        margin: 0 auto;
+        height: 1.5rem;
+        width: 1.5rem;
+        cursor: default;
+      }
+    }
+  }
+}
+
+.fbos-metric-history-plot-border {
+  width: 100%;
+  border-radius: 5px;
+  background: var(--secondary-bg);
+  max-height: 30rem;
+  text {
+    font-size: 0.6rem;
+    text-anchor: middle;
+    dominant-baseline: middle;
+  }
+}
+
+.connectivity-grid {
+  grid-template-columns: auto 1fr 1fr 1fr;
+}
+
+.realtime-wrapper {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr;
+  @media screen and (max-width: $mobile_max_width) {
+    grid-template-columns: 1fr;
+    grid-auto-flow: dense;
+  }
+}
+
+.network-wrapper {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1rem;
+  @media screen and (max-width: $mobile_max_width) {
+    grid-template-columns: 1fr !important;
+    grid-auto-flow: dense;
+  }
+}
diff --git a/frontend/css/panels/controls.scss b/frontend/css/panels/controls.scss
new file mode 100644
index 0000000000..5ed17fc032
--- /dev/null
+++ b/frontend/css/panels/controls.scss
@@ -0,0 +1,463 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.controls-popover-portal {
+  .bp5-transition-container {
+    z-index: 999;
+  }
+  .controls-popover {
+    max-width: 100vw;
+    .controls-content {
+      padding: 1rem;
+      width: 500px;
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100vh - 10rem);
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+}
+
+.text-center {
+  text-align: center;
+  width: 100%;
+}
+
+.move {
+  .move {
+    .unavailable,
+    .bot-is-online-wrapper {
+      display: inline-block;
+    }
+  }
+  .move-settings.bp5-popover-wrapper {
+    position: absolute;
+    top: 10rem;
+    right: 2rem;
+  }
+}
+
+.move-amount-wrapper {
+  box-shadow: 0px 0px 1rem $translucent1;
+  height: 2.5rem;
+  border-radius: 7px;
+}
+
+.move-amount {
+  margin: 0;
+  background-color: $white;
+  border-right: 2px solid $off-white;
+  color: $medium_gray;
+  font-weight: bold;
+  height: 2.5rem;
+  padding-top: auto;
+  padding-bottom: auto;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  width: 20%;
+  float: left;
+  &:hover {
+    background-color: color.adjust($white, $lightness: -40%);
+    color: $off_white;
+  }
+  &:nth-child(n+2) {
+    border-left: 0;
+  }
+  &.leftmost {
+    border-bottom-left-radius: 7px;
+    border-top-left-radius: 7px;
+  }
+  &.rightmost {
+    border-bottom-right-radius: 7px;
+    border-top-right-radius: 7px;
+    border-right: 0px none;
+  }
+  &.move-amount-selected {
+    background-color: $medium_gray !important;
+    color: $off_white;
+  }
+}
+
+.no-radius {
+  border-radius: 0;
+}
+
+// JOG CONTROLS
+.jog-table {
+  margin: auto;
+  margin-top: 15px;
+  width: auto;
+  border: 0;
+  .bp5-popover-wrapper {
+    line-height: 0;
+  }
+  .fa-camera {
+    .bp5-popover-wrapper {
+      z-index: 1;
+      width: 4rem;
+      height: 4rem;
+      margin-top: -3rem;
+      margin-left: -1rem;
+      .bp5-popover-target {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.in-progress {
+  background: $gray !important;
+  border-bottom-color: $medium_gray !important;
+}
+
+.progress-percent {
+  width: 3rem;
+  height: 3rem;
+  margin-top: -0.75rem;
+  margin-left: -0.75rem;
+  border-radius: 50%;
+  padding: 0.25rem;
+  p {
+    display: inline-block;
+    position: relative !important;
+    margin: auto !important;
+    color: $dark_gray !important;
+    background: $gray;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    font-size: 0.7rem;
+    font-weight: bold;
+    line-height: 2.25rem;
+    vertical-align: middle;
+  }
+}
+
+.power-btn-popover {
+  label {
+    color: $off_white;
+  }
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 0.5rem;
+    color: $off_white;
+  }
+  .bp5-popover-content {
+    width: 310px;
+    background: $dark_gray;
+  }
+  .bp5-popover-arrow-fill {
+    fill: $dark_gray;
+  }
+  .fa-anchor {
+    display: none;
+  }
+}
+
+.arrow-button {
+  position: relative;
+  margin: 0;
+  background-color: $medium_gray;
+  border-bottom: 2px solid $dark_gray;
+  color: $off_white;
+  font-size: 16px !important;
+  height: 40px;
+  padding: 12px;
+  text-align: center;
+  width: 40px;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 7px 0px;
+  &:hover {
+    background-color: color.adjust($medium_gray, $lightness: -5%);
+  }
+  &:disabled {
+    border-bottom: none;
+    box-shadow: none !important;
+  }
+  p {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    color: $white;
+    margin-top: -2px;
+    padding-left: 1px;
+    font-size: 0.9rem;
+  }
+  &:before {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.movement-progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  background: $medium_gray;
+}
+
+.camera-message,
+.movement-message {
+  .bp5-popover-content {
+    width: unset !important;
+  }
+}
+
+.home-button {
+  i {
+    margin-top: -1rem;
+    font-size: 2rem;
+  }
+  .fa-stack {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    .fa-stack-1x {
+      top: -1rem;
+      left: -1rem;
+      margin-top: 0;
+      font-size: 1rem;
+    }
+    .fa-stack-2x {
+      margin-top: 0;
+      font-size: 2rem;
+    }
+  }
+}
+
+.bot-position-rows {
+  .missed-step-indicator-wrapper {
+    position: absolute;
+    top: -1.5rem;
+    height: 1rem;
+    .missed-step-details {
+      min-width: 9rem;
+      padding-bottom: 1rem;
+      table tr, td {
+        padding: unset;
+      }
+      label, p {
+        color: $white;
+        text-align: right;
+        font-style: normal;
+      }
+    }
+    .bp5-popover-wrapper {
+      .bp5-popover-target {
+        display: block;
+      }
+    }
+    .bp5-popover {
+      .bp5-popover-arrow {
+        svg {
+          transform: rotate(-90deg) translate(1px) !important;
+          .bp5-popover-arrow-fill {
+            fill: $dark_gray;
+          }
+        }
+      }
+      .bp5-popover-content {
+        background: $dark_gray;
+      }
+    }
+    .missed-step-indicator {
+      position: absolute;
+      top: 0.2rem;
+      height: 0.75rem;
+      width: 100%;
+      background: $white;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+      cursor: pointer;
+      .instant {
+        position: absolute;
+        height: 100%;
+        opacity: 0.5;
+        &.yellow {
+          opacity: 0.75;
+        }
+      }
+      .peak {
+        position: absolute;
+        height: 100%;
+        width: 2px;
+        opacity: 0.5;
+        &.yellow {
+          opacity: 0.75;
+        }
+      }
+    }
+  }
+}
+
+.move-settings-menu {
+  label {
+    margin-top: 7px;
+  }
+  p {
+    margin-top: 0.7rem;
+    font-size: 1.4rem;
+    font-weight: 400;
+  }
+}
+
+.bot-position-rows {
+  p {
+    text-align: center;
+    font-style: italic;
+  }
+  .axis-info {
+    .index-1 {
+      z-index: 1;
+    }
+    .index-2 {
+      z-index: 2;
+    }
+    .index-3 {
+      z-index: 3;
+    }
+  }
+  .fa-ellipsis-v {
+    font-size: 1.2rem;
+    width: 1rem;
+    text-align: center;
+  }
+  .axis-actions {
+    width: 10rem;
+    .fb-button {
+      width: 100%;
+      float: none;
+      margin-bottom: 0.25rem;
+    }
+    a {
+      display: block;
+      padding: 1rem 0.5rem 0.75rem 0.5rem;
+      text-decoration: none !important;
+      font-size: 1.2rem;
+      .fa-external-link {
+        margin-top: 0.25rem;
+        float: right;
+      }
+      &:hover {
+        .fa-external-link {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+.motor-position-plot-border {
+  background: var(--secondary-bg);
+  border-radius: 5px;
+  text {
+    font-size: 0.4rem;
+    text-anchor: middle;
+    dominant-baseline: middle;
+  }
+}
+
+.controls-popup,
+.controls-popup-menu-outer {
+  position: fixed;
+  bottom: 3rem;
+  right: 1rem;
+  z-index: 3;
+  background: $dark_gray;
+  border-radius: 3rem;
+  height: 6rem;
+  width: 6rem;
+}
+
+.controls-popup {
+  color: $off_white;
+  @media screen and (max-width: $mobile_max_width) {
+    &.panel-open {
+      display: none;
+    }
+  }
+  img {
+    position: fixed;
+    bottom: 3rem;
+    z-index: 4;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 3rem;
+    padding: 18px 20px;
+    font-size: 2.4rem;
+    transition: all 0.25s ease-in-out;
+    filter: invert(1);
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+  .move-amount-wrapper,
+  .jog-table {
+    display: none;
+  }
+  &.open {
+    img {
+      transform: rotate(-135deg);
+      &:hover {
+        background-color: rgba(0, 0, 0, 0);
+      }
+    }
+    .controls-popup-menu-outer {
+      transition: all 0.1s 0s ease-in-out;
+      width: 36rem;
+      height: 14rem;
+      padding: 0.6rem 5rem 0rem 0rem;
+    }
+    .controls-popup-menu-inner {
+      transition-delay: 0.25s !important;
+      opacity: 1;
+    }
+    .jog-table {
+      display: block;
+      margin: 0;
+      float: right;
+      td {
+        padding: 0;
+      }
+    }
+    .move-amount-wrapper {
+      display: inline-block;
+      width: 100%;
+      box-shadow: none;
+      margin-left: 2rem;
+      padding-top: 0.5rem;
+      .move-amount {
+        width: 18%;
+        height: 2rem;
+      }
+    }
+  }
+  .arrow-button {
+    margin: 5px;
+    box-shadow: none !important;
+    &.pseudo-disabled {
+      box-shadow: none !important;
+    }
+  }
+}
+
+.controls-popup-menu-inner {
+  border-radius: 2rem;
+  transition: all 0.1s 0s ease-in-out;
+  opacity: 0;
+}
+
+.controls-popup-menu-outer {
+  transition: all 0.1s ease-in-out;
+  transition-delay: 0.2s !important;
+}
+
+.move-to-grid {
+  grid-auto-flow: unset !important;
+  grid-template-columns: 1fr 1fr 1fr auto;
+  row-gap: 0.25rem;
+}
diff --git a/frontend/css/panels/curves.scss b/frontend/css/panels/curves.scss
new file mode 100644
index 0000000000..055d403bb9
--- /dev/null
+++ b/frontend/css/panels/curves.scss
@@ -0,0 +1,187 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.curve-svg-wrapper {
+  .bp5-popover-target {
+    width: 100%;
+  }
+}
+
+.warning-line-text-popover {
+  border-radius: 5px;
+  .bp5-popover-content {
+    background: $dark_gray;
+    border-radius: 5px;
+  }
+  .bp5-popover-arrow {
+    display: none;
+  }
+  p {
+    color: $white;
+    font-size: 1.3rem;
+    margin-bottom: 0.5rem !important;
+  }
+  .warning-text {
+    max-width: 200px;
+    .top {
+      font-weight: bold;
+    }
+  }
+}
+
+.curve-action-popover {
+  max-width: 25rem;
+}
+
+.curve-svg {
+  .data-labels,
+  .y-axis-line,
+  .warning-line {
+    pointer-events: none;
+  }
+}
+
+.curve-info-panel-content-wrapper {
+  .full-indicator {
+    height: 2rem;
+    text-align: center;
+    color: $darkest_red;
+  }
+  .input-error-wrapper {
+    position: absolute;
+    margin: 0;
+  }
+  table {
+    th {
+      text-transform: uppercase;
+      color: $dark_gray;
+      font-size: 1.3rem;
+    }
+    td,
+    th {
+      background: $lighter_gray;
+      border: 1px solid $light_gray;
+      padding-left: 1rem;
+      p {
+        display: inline;
+        font-size: 1.4rem;
+        color: $dark_gray;
+      }
+      &.active {
+        background: $white;
+      }
+      &.active-input {
+        padding: 0;
+      }
+      .percent-green {
+        color: $green;
+      }
+      .percent-red {
+        color: $red;
+      }
+      input {
+        font-size: 1.4rem;
+        padding-left: 1rem;
+      }
+    }
+    tr {
+      &.hovered {
+        border: 2px solid $gray;
+        border-top-width: 0;
+        border-bottom-width: 0;
+      }
+    }
+  }
+  .row-radio {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-left: 1rem;
+    margin-top: -0.25rem;
+    &.active {
+      &.full {
+        background: revert;
+        border: revert;
+        cursor: pointer;
+      }
+    }
+    &.full {
+      background: $light_gray;
+      border: $gray;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.curves-inventory-panel-content {
+  padding: 0;
+  cursor: pointer;
+  .curve-search-item-info {
+    font-size: 1rem;
+  }
+  .section-header {
+    .fa-caret-up,
+    .fa-caret-down {
+      line-height: 3.75rem;
+      margin-top: 0 !important;
+    }
+  }
+}
+
+.crop-curve-info {
+  .bp5-collapse {
+    padding-top: 0.5rem;
+  }
+  p {
+    line-height: 4rem;
+    font-size: 1.3rem;
+  }
+  label {
+    margin-top: 0 !important;
+  }
+  .fa-external-link {
+    position: absolute;
+    top: 1rem;
+    right: 0;
+  }
+  .active-curve-name {
+    p {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  .curve-svg-wrapper {
+    background: $white;
+    box-shadow: 0 0 10px $light_gray;
+    border-radius: 5px;
+  }
+}
+
+.curve-info-panel-content-wrapper,
+.all-curve-info {
+  svg {
+    text {
+      user-select: none;
+    }
+  }
+}
+
+.curve-usage-display {
+  margin-bottom: 2rem;
+  i[class*=fa-caret-] {
+    float: right;
+    font-size: 2rem;
+  }
+  label {
+    margin-top: 0 !important;
+  }
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 1rem;
+  }
+  img {
+    cursor: pointer;
+  }
+}
diff --git a/frontend/css/panels/events.scss b/frontend/css/panels/events.scss
new file mode 100644
index 0000000000..f6502f820e
--- /dev/null
+++ b/frontend/css/panels/events.scss
@@ -0,0 +1,75 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.farm-event {
+  align-items: start!important;
+}
+
+.farm-event-calendar-rows {
+  margin-bottom: 2rem;
+}
+
+.farm-event-year {
+  text-align: center;
+  font-size: 2rem;
+  font-family: 'Inknut Antiqua', serif;
+  font-weight: bold;
+}
+
+.farm-event-date {
+  text-align: center;
+}
+
+.farm-event-date-month {
+  font-size: 1.2rem;
+}
+
+.farm-event-date-day {
+  font-size: 1.5rem;
+}
+
+.farm-event-variable {
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  background: $translucent8_white;
+  padding: 0.25rem 0.5rem;
+  display: inline-block;
+  margin: 0.25rem;
+}
+
+.farm-event-data-block {
+  grid-template-columns: 6rem 1fr auto;
+  padding: 0.5rem 1rem;
+  font-size: 1.2rem;
+  align-items: baseline!important;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 0 1rem $translucent1;
+  font-weight: bold;
+  color: $dark_gray;
+  .fa {
+    margin-left: 0.5rem;
+    opacity: 0;
+  }
+  &:hover {
+    i {
+      opacity: 1;
+    }
+  }
+}
+
+.edit-farm-event-panel,
+.add-farm-event-panel {
+  .panel-content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 1rem 1rem 0;
+  }
+  .bp5-popover-wrapper {
+    display: inline-block;
+    margin-left: 0.5rem;
+    &.input-error-wrapper {
+      display: block;
+    }
+  }
+}
diff --git a/frontend/css/panels/farmware.scss b/frontend/css/panels/farmware.scss
new file mode 100644
index 0000000000..6349642152
--- /dev/null
+++ b/frontend/css/panels/farmware.scss
@@ -0,0 +1,140 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.farmware-panel,
+.designer-farmware-list-panel,
+.designer-farmware-info-panel,
+.farmware-add-panel {
+  .panel-content {
+    a {
+      text-decoration: none !important;
+      p {
+        font-size: 1.4rem;
+        font-weight: normal !important;
+        line-height: 2rem;
+      }
+    }
+  }
+}
+
+.designer-farmware-info-panel {
+  .panel-content {
+    position: relative;
+    padding-top: 2rem;
+    padding-bottom: 12rem;
+    button {
+      float: none;
+    }
+    .reset-configs {
+      margin-right: 1rem;
+      margin-top: 2rem;
+    }
+    .farmware-button {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+    }
+    .farmware-form {
+      margin-top: 1rem;
+    }
+    .farmware-input-group {
+      margin-left: 0;
+    }
+  }
+}
+
+.custom-setting-grid {
+  grid-template-columns: 1fr 1fr auto;
+}
+
+.farmware-info {
+  margin-top: 1rem;
+}
+
+.farmware-list-items {
+  margin-left: -30px;
+  margin-right: -20px;
+  padding: 0.5rem;
+  padding-left: 1.5rem;
+  padding-top: 0.75rem;
+  cursor: pointer;
+  label {
+    cursor: pointer;
+  }
+  &:hover  {
+    background: $medium_light_gray;
+    p {
+      font-weight: bold;
+    }
+  }
+}
+
+.farmware-url {
+  font-size: 1rem;
+  width: 100px;
+  word-wrap: break-word;
+}
+
+.farmware-step-input-fields {
+  label {
+    padding-top: 1rem;
+  }
+  fieldset {
+    width: 95%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  button {
+    position: absolute;
+  }
+}
+
+.farmware-name-manual-input {
+  margin-top: 1rem;
+}
+
+.farmware-input-group {
+  position: relative;
+  margin-left: 3rem;
+  .fa-times-circle,
+  .fa-refresh {
+    position: absolute;
+    top: 0.85rem;
+    color: $light_gray;
+    &:hover {
+      color: $dark_gray;
+    }
+  }
+  .fa-times-circle {
+    right: 1rem;
+  }
+  .fa-refresh {
+    right: 3rem;
+  }
+  &.dropdown {
+    .filter-search {
+      border: 3px solid $transparent;
+    }
+    .fa-times-circle {
+      right: 3rem;
+    }
+    .fa-refresh {
+      right: 5rem;
+    }
+  }
+}
+
+.error-with-button {
+  margin-top: 1rem;
+  background: $pink;
+  border: 1px solid $red;
+  border-radius: 5px;
+  label,
+  p {
+    margin: 0.5rem;
+    color: $red;
+  }
+  button {
+    margin: 0.5rem !important;
+  }
+}
diff --git a/frontend/css/panels/gardens.scss b/frontend/css/panels/gardens.scss
new file mode 100644
index 0000000000..97e4cf1798
--- /dev/null
+++ b/frontend/css/panels/gardens.scss
@@ -0,0 +1,65 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.saved-garden-edit-panel-content {
+  display: grid;
+  gap: 1rem;
+}
+
+.saved-garden-grid {
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+}
+
+.saved-garden-indicator {
+  position: fixed;
+  top: 80px;
+  left: 50%;
+  z-index: 3;
+  padding: 1rem 2rem;
+  background: var(--main-bg);
+  border-radius: 5px;
+  box-shadow: 0px 1px 5px $translucent3;
+  text-align: center;
+  label {
+    display: block;
+  }
+  button {
+    margin: 0.5rem;
+    float: unset;
+  }
+}
+
+.saved-garden-list {
+  .saved-garden-search-item {
+    padding: 0.25rem;
+    button {
+      margin-bottom: 1rem;
+    }
+    .saved-garden-info div {
+      height: 3rem;
+      line-height: 3rem;
+      cursor: pointer;
+      padding-right: 0;
+      span {
+        margin: 0;
+        pointer-events: none;
+        margin-left: 1rem;
+      }
+      p {
+        float: right;
+        line-height: 3rem;
+        text-align: center;
+        margin-right: 1rem;
+      }
+    }
+  }
+}
+
+.add-garden-grid {
+  grid-template-columns: auto 1fr;
+}
+
+.add-new-garden-buttons {
+  justify-content: right;
+}
diff --git a/frontend/css/panels/help.scss b/frontend/css/panels/help.scss
new file mode 100644
index 0000000000..b7ac6caad3
--- /dev/null
+++ b/frontend/css/panels/help.scss
@@ -0,0 +1,125 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.documentation-panel {
+  .panel-content {
+    height: 100vh;
+    padding: 0;
+    overflow: hidden;
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+}
+
+body:has(.app.dark) {
+  .help-panel-header {
+    img {
+      filter: invert(0.75);
+    }
+  }
+}
+
+.help-panel-header {
+  height: 4rem;
+  padding: 0.5rem 1rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  i {
+    font-size: 2rem;
+  }
+  a {
+    font-weight: bold;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+  .fa-chevron-down,
+  .fa-chevron-up {
+    padding: 1rem;
+    font-size: 1.25rem;
+  }
+  .bp5-collapse {
+    overflow: visible;
+    grid-column: span 2;
+  }
+  .bp5-collapse-body {
+    position: relative;
+    z-index: 1;
+    margin: -1rem;
+    margin-top: 0;
+    background: var(--main-bg);
+    a {
+      padding: 1rem;
+      line-height: 0;
+      &:hover {
+        background: var(--secondary-bg);
+      }
+    }
+  }
+}
+
+.support-panel-content {
+  padding: 2rem;
+  padding-top: 0;
+  h1 {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+  .row {
+    margin-bottom: 3rem;
+  }
+  a {
+    &.button {
+      display: block;
+      margin-top: 1rem;
+      text-decoration: none !important;
+      text-align: center;
+      border: 1.5px solid $dark_gray;
+      border-radius: 5px;
+      padding: 0.75rem;
+      line-height: 1.3rem;
+      b {
+        display: block;
+        font-size: 1.1rem;
+        text-transform: uppercase;
+      }
+      i {
+        font-size: 0.9rem;
+        color: $medium_gray;
+        font-weight: normal;
+      }
+      &:hover {
+        background: var(--secondary-bg);
+      }
+    }
+    &.inline {
+      text-decoration: underline;
+      margin-left: 0.25rem;
+    }
+  }
+}
+
+.feedback {
+  p {
+    color: $dark_gray !important;
+    margin-bottom: 1rem !important;
+    font-weight: normal !important;
+    font-style: italic;
+  }
+  textarea {
+    height: 7.5rem;
+  }
+  button {
+    float: none;
+  }
+  .bp5-popover-wrapper {
+    margin-left: 1rem;
+  }
+}
+
+.tours-panel-content {
+  min-height: 35rem;
+}
diff --git a/frontend/css/panels/jobs.scss b/frontend/css/panels/jobs.scss
new file mode 100644
index 0000000000..9d79d1d65e
--- /dev/null
+++ b/frontend/css/panels/jobs.scss
@@ -0,0 +1,78 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.jobs-and-logs {
+  margin-top: 1rem;
+}
+
+.jobs-panel {
+  .panel-content {
+    display: inline-block;
+    overflow-y: auto;
+    overflow-x: auto;
+    width: 100%;
+    padding: 0;
+  }
+}
+
+.jobs-tab {
+  overflow-y: scroll;
+  max-height: 26rem;
+  &.bp5-popover {
+    margin-top: 1.5rem;
+  }
+  table {
+    text-align: left;
+    p {
+      padding: 1rem;
+    }
+    .job-name {
+      max-width: 20rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 999;
+      background: var(--main-bg);
+    }
+    tr {
+      transform: scale(1);
+    }
+    th,
+    td {
+      white-space: nowrap;
+      font-size: 1.2rem;
+      padding: 0.75rem;
+    }
+    th {
+      text-transform: uppercase;
+    }
+    .right-align {
+      text-align: right;
+    }
+    .progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 99%;
+      opacity: 0.5;
+      border-radius: 0;
+      pointer-events: none;
+    }
+    .fa-clock-o {
+      cursor: default !important;
+    }
+  }
+}
+
+.jobs-panel-portal {
+  .bp5-popover-content {
+    padding: 0;
+    width: min(500px, 100vw - 1rem);
+    max-height: calc(100vh - 10rem);
+    overflow: hidden;
+    padding-top: 1rem;
+  }
+}
diff --git a/frontend/css/panels/location_info.scss b/frontend/css/panels/location_info.scss
new file mode 100644
index 0000000000..447abb962b
--- /dev/null
+++ b/frontend/css/panels/location_info.scss
@@ -0,0 +1,80 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.location-info-panel {
+  .panel-content {
+    max-height: calc(100vh - 14rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-top: 1rem;
+    padding-bottom: 0 !important;
+    .location-info-content {
+      display: grid;
+      gap: 1rem;
+    }
+    .location-actions {
+      display: grid;
+      gap: 1rem;
+      p {
+        margin-top: 1rem;
+      }
+    }
+    h2 {
+      font-family: 'Inknut Antiqua';
+      font-weight: bold;
+      margin: 0;
+      font-size: 2rem;
+    }
+    .expandable-header {
+      text-transform: uppercase;
+      font-weight: bold;
+      font-size: 1.2rem;
+    }
+    label {
+      margin-top: 0;
+      &.no-items {
+        display: block;
+      }
+    }
+    button {
+      float: none;
+    }
+    .add-point {
+      margin-top: 2rem;
+    }
+    .point-search-item,
+    .plant-search-item{
+      margin-left: -15px;
+      margin-right: -15px;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    .sensor-history-table {
+      margin-left: -15px;
+      margin-right: -15px;
+      .table-row {
+        height: 4rem;
+        td:first-of-type {
+          padding-left: 2rem;
+        }
+      }
+
+    }
+    .interpolated-soil-height {
+      .title {
+        display: inline;
+        font-weight: bold;
+      }
+      p {
+        display: inline;
+        margin-left: 1rem;
+      }
+    }
+    .photos-footer {
+      margin-top: 1rem;
+      .bp5-popover-wrapper {
+        margin-top: 3px;
+      }
+    }
+  }
+}
diff --git a/frontend/css/panels/logs.scss b/frontend/css/panels/logs.scss
new file mode 100644
index 0000000000..13ccdb5744
--- /dev/null
+++ b/frontend/css/panels/logs.scss
@@ -0,0 +1,142 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.logs-table-wrapper {
+  border: none;
+  .fa-trash {
+    display: none;
+  }
+  tr {
+    vertical-align: top;
+    &:hover {
+      background: $translucent2_white;
+      .fa-trash {
+        display: inline;
+        margin-left: 6px;
+        padding: 0.5rem;
+        line-height: 2rem;
+      }
+      .log-verbosity-saucer {
+        display: none;
+      }
+    }
+  }
+  .fa-filter {
+    border: 1px black solid;
+    border-radius: 50%;
+    padding: 0.25rem;
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+    line-height: 1.3rem;
+    margin-left: 5px;
+  }
+  .markdown {
+    p {
+      margin-top: 0;
+    }
+    a {
+      text-decoration: underline !important;
+      &:hover {
+        font-weight: normal;
+      }
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 0;
+      font-size: 1.4rem;
+      font-weight: bold;
+    }
+  }
+  .notice {
+    font-style: italic;
+    text-align: center;
+    font-size: 1.4rem;
+    padding: 1rem;
+  }
+}
+
+.logs-filter-menu {
+  .log-filters-grid {
+    grid-template-columns: 10rem 17rem;
+  }
+  .lines {
+    padding-bottom: 2rem;
+  }
+  .line {
+    position: absolute;
+    width: 0.5rem;
+    height: 86.5%;
+    border-right: 1.5px $light_gray solid;
+    .line-label {
+      position: absolute;
+      background: $white;
+      font-family: monospace;
+    }
+  }
+  .bp5-slider-unlabeled {
+    margin: 0 1rem;
+  }
+}
+
+.logs-tab {
+  .search-row {
+    margin: 0 1rem;
+  }
+}
+
+.logs-table {
+  display: block;
+  overflow: scroll;
+  max-height: 42rem;
+  .log-verbosity-saucer .saucer {
+    text-align: center;
+    margin-left: 6px;
+    p {
+      margin: 0;
+    }
+  }
+  button {
+    float: none;
+  }
+  thead {
+    text-align: left;
+    background: var(--main-bg);
+  }
+  thead,
+  th {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+  }
+  td {
+    word-break: break-word;
+    .markdown {
+      p {
+        display: block;
+        font: inherit;
+        font-size: inherit;
+        text-overflow: inherit;
+        overflow: inherit;
+        width: inherit;
+        white-space: inherit;
+      }
+    }
+  }
+  td:nth-child(1),
+  td:nth-child(3),
+  td:nth-child(4) {
+    white-space: nowrap;
+  }
+}
+
+.link-to-logs {
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+  text-align: center;
+  font-style: italic;
+}
diff --git a/frontend/css/panels/messages.scss b/frontend/css/panels/messages.scss
new file mode 100644
index 0000000000..238429e18b
--- /dev/null
+++ b/frontend/css/panels/messages.scss
@@ -0,0 +1,128 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.problem-alerts {
+  padding: 1rem;
+}
+
+.problem-alert {
+  padding: 1.5rem 2rem;
+  border-radius: 1rem;
+  box-shadow: 0px 2px 8px $translucent2;
+  background: $translucent2_white;
+  display: grid;
+  gap: 0.5rem;
+  .fa-check-square {
+    color: $green;
+  }
+  .fa-info-circle {
+    color: $blue;
+  }
+  &.bulletin-alert {
+    img, iframe {
+      margin: 1rem auto;
+      width: 100%;
+      border-radius: 5px;
+    }
+  }
+  .problem-alert-title {
+    align-items: baseline;
+    h3 {
+      display: inline;
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin: 0;
+      font-family: 'Inknut Antiqua';
+    }
+    p {
+      display: inline;
+      font-size: 1.2rem;
+      white-space: nowrap;
+    }
+  }
+  .problem-alert-content {
+    display: grid;
+    gap: 0.5rem;
+    .markdown {
+      p {
+        display: block;
+        text-overflow: inherit;
+        overflow: inherit;
+        width: inherit;
+        white-space: inherit;
+      }
+      ul {
+        list-style-type: disc !important;
+        padding-inline-start: 40px;
+      }
+    }
+    p {
+      margin-bottom: 0.75rem !important;
+      font-size: 1.4rem;
+      line-height: 2rem;
+    }
+    label {
+      margin-top: 0.5rem;
+    }
+    .row {
+      margin-top: 2rem;
+    }
+    .tour-list {
+      margin: 0;
+      label {
+        max-width: 57%;
+      }
+    }
+    .link-button {
+      color: $off_white !important;
+      font-weight: bold !important;
+      justify-self: left;
+      margin: 0;
+    }
+    a {
+      text-decoration: underline;
+      outline: none !important;
+      cursor: pointer !important;
+      &:link {
+        font-weight: 500;
+      }
+      &:hover {
+        color: $off_white;
+      }
+      &.fb-button {
+        text-decoration: none !important;
+      }
+    }
+  }
+  .documentation-card {
+    .fa-question {
+      cursor: default !important;
+      margin-left: 0.25rem;
+      margin-right: 0.25rem;
+    }
+  }
+}
+
+.firmware-alerts {
+  max-width: 600px;
+}
+
+.firmware-hardware-choice-table {
+  margin: 2rem;
+  margin-top: 1rem;
+  width: 93%;
+  border: 1px solid $gray;
+  font-size: 1.2rem;
+  th {
+    background: $light_gray;
+    font-weight: normal;
+  }
+  td {
+    background: $off_white;
+    color: $medium_gray;
+  }
+  code {
+    background: $light_gray;
+    color: $dark_gray;
+  }
+}
diff --git a/frontend/css/panels/peripherals.scss b/frontend/css/panels/peripherals.scss
new file mode 100644
index 0000000000..e1737d6d5d
--- /dev/null
+++ b/frontend/css/panels/peripherals.scss
@@ -0,0 +1,116 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.electronics-box-3d-model {
+  max-width: calc(100vw - 4rem);
+  width: 100%;
+  .led-label,
+  .btn-label {
+    display: block;
+    margin: auto;
+    width: max-content;
+    color: $off_white;
+    font-size: 1rem;
+    background: $dark_gray;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    white-space: normal;
+    max-height: 3.4rem;
+    overflow-y: hidden;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    user-select: none;
+    &.hovered {
+      background: $black;
+    }
+    &.unbound {
+      background: $placeholder_gray;
+    }
+  }
+  .led-label {
+    max-width: 7rem;
+  }
+  .btn-label {
+    max-width: 5.8rem;
+  }
+  .filter-search {
+    max-width: 5.5rem;
+    .fa-caret-down {
+      bottom: -0.5rem;
+      right: 0.25rem;
+      color: $off_white;
+    }
+    button {
+      padding: 0.25rem;
+      background: $dark_gray !important;
+      border-radius: 0.5rem;
+      height: max-content !important;
+      min-height: 0;
+      &:hover {
+        background: $dark_gray !important;
+      }
+    }
+    span {
+      color: $off_white;
+      white-space: normal !important;
+      text-overflow: revert !important;
+      font-weight: 700;
+      font-size: 1rem;
+      text-align: center;
+      margin-right: 0.5rem;
+    }
+  }
+  div {
+    z-index: 0 !important;
+  }
+  canvas {
+    height: 23rem;
+  }
+}
+
+.peripheral-list {
+  label {
+    margin-top: 0 !important;
+  }
+  .slider-container {
+    padding-left: 0.5rem;
+    padding-right: 1rem;
+    .bp5-slider {
+      min-width: 100%;
+    }
+  }
+}
+
+.peripheral-edit-grid {
+  grid-template-columns: 1fr 20% 20% auto;
+}
+
+.box-top-2d-wrapper {
+  margin-top: 2rem;
+  .box-top-leds,
+  .box-top-buttons {
+    display: grid;
+    text-align: center;
+  }
+  .box-top-buttons {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .box-top-leds {
+    margin: auto;
+    width: 80%;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fast-blink {
+    animation: fill-blink 0.2s linear infinite;
+  }
+  .slow-blink {
+    animation: fill-blink 2s linear infinite;
+  }
+}
+
+.pinned-sequence-list {
+  .help-icon {
+    color: $gray !important;
+  }
+}
diff --git a/frontend/css/panels/photos.scss b/frontend/css/panels/photos.scss
new file mode 100644
index 0000000000..39fc688c85
--- /dev/null
+++ b/frontend/css/panels/photos.scss
@@ -0,0 +1,148 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.photos-panel {
+  .panel-title {
+    margin: 0;
+  }
+  .expandable-header {
+    margin: 0;
+  }
+  .panel-content {
+    display: grid;
+    gap: 1rem;
+    padding: 1.5rem;
+    .filters-enabled-warning {
+      float: right;
+    }
+    .fa-exclamation-triangle {
+      font-size: 1.3rem;
+    }
+    .photo-filter-settings {
+      .filter-controls {
+        .banner {
+          display: none;
+        }
+        &.single-image-mode,
+        &.image-layer-disabled {
+          opacity: 0.40;
+          * {
+            pointer-events: none;
+          }
+          .banner {
+            display: inline-block;
+            position: absolute;
+            top: 25%;
+            left: -2.5%;
+            z-index: 10;
+            width: 105%;
+            padding: 0.5rem;
+            background-color: $dark_gray;
+            opacity: 0.90;
+            color: $off_white;
+            font-size: 1.8rem;
+            vertical-align: middle;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .capture-settings {
+      .image-size-inputs {
+        .resolution-change-warning {
+          i {
+            color: $darkest_red;
+            margin-right: 1rem;
+          }
+          p {
+            display: inline;
+            margin-right: 0.5rem;
+            font-size: 1.2rem;
+          }
+          .click {
+            cursor: pointer;
+            font-weight: bold;
+            &:hover {
+              color: $black;
+            }
+          }
+        }
+      }
+      .update-take-photo {
+        margin-top: 1rem;
+        .version-string {
+          display: inline;
+          margin-left: 1rem;
+        }
+      }
+    }
+    .imaging-data-management {
+      label {
+        line-height: 3rem;
+      }
+      .highlight-modified-toggle {
+        label {
+          margin-top: 0.5rem;
+          margin-left: 0.5rem;
+        }
+      }
+    }
+    .farmware-form {
+      button {
+        float: none;
+      }
+    }
+    .weed-detection-grid .bp5-slider {
+      grid-column: span 2;
+    }
+  }
+  .setting {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+  }
+  .title-help {
+    font-size: 1.3rem;
+    .fa-question-circle {
+      position: absolute;
+      top: -3rem;
+      right: 0;
+      font-size: 1.4rem;
+    }
+    a {
+      text-decoration: none !important;
+    }
+    .fa-external-link {
+      margin-left: 1rem;
+    }
+    .update {
+      display: inline;
+      p {
+        display: inline;
+        margin-left: 1rem;
+      }
+      .fa-refresh {
+        display: inline;
+        margin-left: 1rem;
+        color: $dark_gray;
+      }
+    }
+    .title-help-text.open {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.camera-calibration,
+.weed-detector {
+  svg {
+    background: $black;
+  }
+  p {
+    font-size: 1.2rem;
+    font-style: italic;
+  }
+  .camera-calibration-setting-grid {
+    grid-template-columns: 65% auto;
+  }
+}
diff --git a/frontend/css/panels/plants.scss b/frontend/css/panels/plants.scss
new file mode 100644
index 0000000000..de0a1f7c67
--- /dev/null
+++ b/frontend/css/panels/plants.scss
@@ -0,0 +1,109 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.plants-panel-settings-menu {
+  label {
+    line-height: 3rem;
+    vertical-align: bottom;
+    margin-bottom: 0;
+  }
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 0.5rem;
+    line-height: 3rem;
+  }
+}
+
+.crop-search-result-wrapper {
+  .openfarm-search-results-wrapper {
+    display: grid;
+    gap: 1.5rem 1rem;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .plant-catalog-tile {
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 5px;
+    box-shadow: 0px 4px 7px 2px $translucent;
+    background: var(--secondary-bg);
+    transition: transform 0.2s ease;
+    padding: 0;
+    &:hover {
+      box-shadow: 0px 5px 8px 2px rgba(0, 0, 0, 0.25);
+      transform: translateY(-1px);
+    }
+    label {
+      position: absolute;
+      cursor: pointer;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      padding: 3rem 0.6rem 0.2rem;
+      background: linear-gradient(transparent, $translucent15 50%, $translucent4);
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      color: $white;
+      font-size: 1.2rem !important;
+    }
+  }
+}
+
+.crop-info-panel {
+  .panel-header {
+    position: inherit;
+    background-size: 144% !important;
+    background-repeat: no-repeat !important;
+    background-position: top center !important;
+    min-height: 125px;
+    color: $off_white;
+    .panel-title {
+      overflow: visible;
+      .title {
+        font-family: "Inknut Antiqua";
+        font-weight: bold;
+      }
+      .bp5-popover-wrapper {
+        position: absolute;
+        right: 0;
+      }
+      .plus-grid-btn {
+        position: absolute;
+        bottom: -8.5rem;
+        right: 1.5rem;
+        box-shadow: inset 0 0 0 1.5px $off_white !important;
+        color: $off_white !important;
+      }
+    }
+  }
+  .panel-content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 1rem;
+    .non-empty-state {
+      gap: 1rem;
+    }
+    .crop-companions {
+      display: flex;
+      gap: 0.75rem 1rem;
+      flex-wrap: wrap;
+    }
+    .companion {
+      display: inline-block;
+      text-decoration: none !important;
+      background: var(--secondary-bg);
+      border-radius: 2rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: .25rem .75rem .25rem .5rem;
+      p {
+        font-weight: bold;
+        text-transform: none;
+      }
+    }
+  }
+  .crop-info-field-data {
+    font-size: 1.3rem;
+  }
+}
diff --git a/frontend/css/panels/points.scss b/frontend/css/panels/points.scss
new file mode 100644
index 0000000000..c4519a2641
--- /dev/null
+++ b/frontend/css/panels/points.scss
@@ -0,0 +1,13 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.point-info-panel {
+  .panel-title {
+    color: $dark_gray;
+  }
+  .panel-content {
+    .delete-row {
+      margin: 1.5rem;
+    }
+  }
+}
diff --git a/frontend/css/panels/regimens.scss b/frontend/css/panels/regimens.scss
new file mode 100644
index 0000000000..0453bb7e9f
--- /dev/null
+++ b/frontend/css/panels/regimens.scss
@@ -0,0 +1,99 @@
+@use "../variables" as *;
+@use "sass:color";
+
+// Bulk Scheduler
+.bulk-scheduler {
+  .regimen-days-label {
+    text-align: center;
+  }
+  .week-grid-meta-buttons {
+    text-align: right;
+    justify-content: end;
+  }
+  @media screen and (max-width: 974px) {
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+}
+
+.bulk-scheduler-add {
+  margin: 1.5rem !important;
+}
+
+.schedule-regimen-item {
+  justify-self: center;
+}
+
+.regimen-event {
+  background: $gray;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 0 1rem $translucent2;
+  color: $dark_gray;
+}
+
+.regimen-event-titlebar {
+  padding: 0.5rem 0.75rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.regimen-item-variables {
+  background: $translucent8_white;
+  padding: 1rem;
+}
+
+.regimen-event-variable {
+  align-items: baseline;
+  i {
+    cursor: default !important;
+  }
+}
+
+.designer-regimen-editor-panel-content {
+  padding: 0;
+}
+
+.regimen-editor-content {
+  padding: 0 1rem 1rem;
+  .location-form-content {
+    .row {
+      white-space: nowrap;
+      .trash {
+        display: inline;
+        float: none;
+      }
+    }
+  }
+  .sequence-section-header {
+    &:hover {
+      background: $translucent!important;
+    }
+  }
+}
+
+.designer-regimen-scheduler-panel {
+  .panel-content {
+    display: inline-block;
+    max-height: calc(100vh - 16.5rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+  }
+}
+
+.designer-regimen-editor-panel {
+  .panel-header {
+    color: $dark_gray;
+  }
+  .panel-content {
+    max-height: calc(100vh - 14rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    label {
+      margin-top: 0;
+    }
+  }
+}
diff --git a/frontend/css/panels/select.scss b/frontend/css/panels/select.scss
new file mode 100644
index 0000000000..9a95927d2d
--- /dev/null
+++ b/frontend/css/panels/select.scss
@@ -0,0 +1,17 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.plant-selection-panel {
+  .panel-action-buttons {
+    padding: 1rem;
+    .quick-select {
+      align-items: start;
+    }
+  }
+  .panel-content {
+    padding: 0;
+    .tool-slot-search-item {
+      padding: 0 2rem !important;
+    }
+  }
+}
diff --git a/frontend/css/panels/sensors.scss b/frontend/css/panels/sensors.scss
new file mode 100644
index 0000000000..f6c63c499e
--- /dev/null
+++ b/frontend/css/panels/sensors.scss
@@ -0,0 +1,123 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.add-sensor-reading-menu {
+  width: 25rem;
+  button {
+    margin-left: auto;
+  }
+}
+
+.sensor-readings-plot {
+  max-height: 300px;
+  stroke: var(--text-color);
+  font-size: 60px;
+  font-weight: 100;
+}
+
+.sensor-history-table {
+  text-align: left;
+  font-size: 1.2rem;
+  background: $translucent1_white;
+  border-radius: 0.5rem;
+  th,
+  td {
+    width: 1%;
+  }
+  tr {
+    &.previous {
+      color: $medium_gray;
+    }
+    &.selected {
+      background: $translucent1_white;
+    }
+  }
+  .sensor-history-table-contents {
+    max-height: 20rem;
+    overflow-y: auto;
+  }
+}
+
+.sensor-history-footer {
+  display: flex;
+  justify-content: space-between;
+  .date {
+    span {
+      white-space: nowrap;
+    }
+    label {
+      margin-right: 0.5rem;
+    }
+  }
+  .location {
+    display: flex;
+    label {
+      margin-left: 1rem;
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.sensors-widget {
+  p {
+    margin-top: 0.75rem;
+  }
+  .sensor-reading-display {
+    border-style: solid;
+    border-color: $dark_gray;
+    border-width: 0.1px;
+    height: 2rem;
+    width: 100%;
+    margin-top: 0.5rem;
+    &.moisture-sensor {
+      background: linear-gradient(to right, rgba($blue, 0) 20%, $blue 80%, rgba($blue, 0) 85%);
+    }
+    &.digital {
+      .indicator {
+        text-align: center;
+      }
+    }
+    .indicator {
+      position: relative;
+      background: $dark_gray;
+      height: 2rem;
+      span {
+        position: relative;
+        top: -0.1rem;
+        font-size: 1.3rem;
+      }
+    }
+  }
+}
+
+.sensor-form-grid {
+  grid-template-columns: 2fr 1fr 1fr auto;
+}
+
+.sensors-panel-content {
+  padding: 1.5rem;
+}
+
+.sensors-panel {
+  display: grid;
+  gap: 1rem;
+  .panel-header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+    align-items: center;
+    .panel-title {
+      margin: 0;
+      height: unset;
+    }
+  }
+  .panel-content {
+    label {
+      margin-top: 0;
+    }
+  }
+  .sensor-history-widget {
+    display: grid;
+    gap: 1rem;
+  }
+}
diff --git a/frontend/css/steps.scss b/frontend/css/panels/sequence_steps.scss
similarity index 80%
rename from frontend/css/steps.scss
rename to frontend/css/panels/sequence_steps.scss
index fa49e4a97f..9a3ffb4117 100644
--- a/frontend/css/steps.scss
+++ b/frontend/css/panels/sequence_steps.scss
@@ -1,44 +1,13 @@
+@use "../variables" as *;
+@use "sass:color";
+
 // Styles for ALL STEPS
 .step-wrapper {
-  box-shadow: 0px 0px 10px $gray;
-  border-radius: 3px;
-  .bottom-content {
-    display: flex;
-    fieldset {
-      text-align: right;
-    }
-    .channel-options {
-      flex: 1;
-      margin-top: 2rem;
-    }
-    .channel-fields {
-      flex: 1;
-      input,
-      label {
-        display: inline-block;
-        width: auto;
-        cursor: pointer;
-      }
-      input {
-        margin-left: 1rem;
-        box-shadow: none;
-      }
-      input[type="radio"] {
-        margin-right: 0.25rem;
-        margin-bottom: 0.25rem;
-        margin-top: 0;
-        vertical-align: middle;
-      }
-      form {
-        padding-top: 0.5rem;
-        .options {
-          display: inline;
-          label {
-            margin-left: 0.25rem;
-          }
-        }
-      }
-    }
+  box-shadow: 0px 0px 1rem $translucent1;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  fieldset {
+    text-align: right;
   }
   pre {
     border: none;
@@ -46,6 +15,10 @@
   }
 }
 
+.sequence-step-radio-grid {
+  justify-content: left;
+}
+
 .step-header {
   letter-spacing: .05rem;
   padding: .75rem 1rem;
@@ -61,7 +34,6 @@
   .step-comment {
     display: inline;
     width: 100%;
-    overflow: hidden;
     ::-webkit-input-placeholder {
       color: $dark_gray;
       font-weight: bold;
@@ -86,7 +58,8 @@
   }
   input {
     width: 100%;
-    padding: 0rem;
+    margin-left: -0.5rem;
+    padding-left: 0.5rem;
     background-color: transparent;
     box-shadow: none;
     color: $dark_gray;
@@ -209,32 +182,9 @@
     display: inline-block;
   }
   .prompt-wrapper {
-    margin-top: 1rem;
+    margin: 0.5rem 0;
     textarea {
-      font-size: 1rem;
-      height: 8rem;
-    }
-    .generate-code {
-      display: flex;
-      height: 3rem;
-      .feedback {
-        width: 7rem;
-        margin-top: 0.75rem;
-        transition: opacity 2s ease;
-        i:first-of-type {
-          margin-right: 0.5rem;
-        }
-      }
-      p {
-        display: inline-block;
-        width: 100%;
-        line-height: 1rem;
-        color: $medium_gray;
-        padding: 0.75rem;
-      }
-      button {
-        margin-top: 0.5rem;
-      }
+      height: 10rem;
     }
   }
 }
@@ -316,7 +266,8 @@
   &.assertion-step {
     background: $light_purple;
     .lua-input {
-      margin-bottom: 1rem;
+      border-radius: 0.5rem;
+      overflow: hidden;
     }
   }
   &.lua-step {
@@ -325,21 +276,8 @@
   }
   &.execute-step {
     background: $light_gray;
-    padding-bottom: 1rem;
-    .row {
-      margin: 0;
-    }
     .locals-list {
-      margin-left: -1rem;
-      margin-right: 0;
-    }
-    .location-form:not(:first-of-type) {
-      margin-top: 1rem;
-    }
-    .location-form {
-      .row:not(:first-of-type) {
-        margin-top: 1rem;
-      }
+      margin: 0;
     }
     &.pinned-view {
       .location-form {
@@ -457,3 +395,46 @@
     font-size: 1.3rem;
   }
 }
+
+.lua-input {
+  .lua-editor {
+    height: 20rem;
+    &.full {
+      height: 40rem;
+    }
+    &.expanded {
+      height: 70vh;
+    }
+  }
+  .char-limit {
+    padding: 0.5rem;
+  }
+  textarea {
+    height: 100% !important;
+    font-family: monospace;
+    pointer-events: revert !important;
+    font-size: 1.4rem;
+    padding: 0 3rem 0 2.6rem;
+    line-height: 1.9rem;
+  }
+}
+
+.move-absolute-form {
+  display: flex;
+  .location-form,
+  .expandable-header {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .input-line {
+    flex: auto;
+  }
+  .more-options {
+    min-width: 110px;
+    margin-top: 0.5rem;
+  }
+  .custom-coordinate-form {
+    margin-left: -2.5rem;
+    margin-right: -11.25rem;
+  }
+}
diff --git a/frontend/css/sequences.scss b/frontend/css/panels/sequences.scss
similarity index 73%
rename from frontend/css/sequences.scss
rename to frontend/css/panels/sequences.scss
index cf30bb2897..bea94c7d36 100644
--- a/frontend/css/sequences.scss
+++ b/frontend/css/panels/sequences.scss
@@ -1,16 +1,70 @@
+@use "../variables" as *;
+@use "sass:color";
+
 .sequence-page {
   max-width: unset;
   padding: 8.6rem 0rem 0;
-  background: $dark_gray;
+  .sequences-page-grid {
+    grid-template-columns: 1fr 2fr 1fr;
+    align-items: stretch;
+    gap: 0;
+  }
+}
+
+.designer-sequence-list-panel {
+  .panel-content {
+    max-height: calc(100vh - 16.5rem);
+    overflow-y: scroll;
+    overflow-x: hidden;
+    @media screen and (max-width: $mobile_max_width) {
+      max-height: calc(100vh - 19rem);
+    }
+    a {
+      text-decoration: none !important;
+      p {
+        font-size: 1.4rem;
+        font-weight: normal !important;
+      }
+    }
+    .folders-panel {
+      margin-left: -1rem;
+      margin-right: -1rem;
+    }
+  }
+}
+
+.designer-sequence-editor-panel {
+  .panel-header {
+    color: $dark_gray;
+  }
+  .panel-content {
+    .sequence-editor-content {
+      overflow: hidden;
+      @media screen and (max-width: 767px) {
+        margin-left: 5px;
+        padding-right: 0;
+      }
+    }
+    .add-command-button-container {
+      display: inline;
+    }
+    .drag-drop-area {
+      display: none;
+    }
+    label {
+      margin-top: 0;
+    }
+    @media screen and (max-width: 767px) {
+      padding: 0;
+    }
+  }
 }
 
 .sequence-editor-panel {
-  margin-left: -3.5rem;
-  margin-top: 0.4rem;
-  height: calc(100vh - 8.95rem);
   background: $light_gray;
-  padding: 0 2rem;
-  overflow: hidden;
+  padding: 0 1rem;
+  height: calc(100vh - 8.5rem);
+  overflow: scroll;
   @media screen and (max-width: 767px) {
     display: none;
     &.open {
@@ -24,14 +78,6 @@
   h3 {
     margin-top: 1rem;
   }
-  .sequence-editor-tools {
-    .row {
-      flex: 1;
-    }
-    .button-group {
-      width: unset;
-    }
-  }
   .bp5-popover-target .saucer {
     float: left;
   }
@@ -48,17 +94,12 @@
       margin-bottom: 2.5rem;
       padding-left: 0 !important;
     }
-    .button-group {
-      margin-right: 15px;
-      margin-top: -1rem;
-    }
     .title-help-text {
       padding-left: 15px;
       padding-right: 15px;
     }
   }
   .sequence-editor-content {
-    margin-right: -15px;
     .sequence-description {
       .description-input {
         padding-right: 1rem;
@@ -80,16 +121,7 @@
 .sequence-editor-panel {
   .sequence-section-header {
     &:hover {
-      background: $lighter_gray !important;
-    }
-  }
-}
-
-.designer-sequence-editor-panel,
-.sequence-editor-panel {
-  .assertion-step {
-    .locals-list {
-      margin: 1rem;
+      background: $translucent1!important;
     }
   }
 }
@@ -114,37 +146,14 @@
 
 .sequence-editor-content,
 .regimen-editor-content {
-  margin-right: -10px;
-  margin-left: -10px;
-  .regimen {
-    padding-left: 1rem;
-  }
-  .sequence {
-    margin-bottom: 1rem;
-  }
   @media screen and (max-width: 767px) {
     margin-left: 5px;
     margin-right: 0;
     padding-right: 2rem;
-    .regimen {
-      padding-left: 0;
-    }
-  }
-}
-
-.regimen-editor-content {
-  @media screen and (max-width: 767px) {
-    padding-right: 0;
   }
 }
 
 .sequence-editor-content {
-  hr {
-    margin-right: 15px;
-    margin-bottom: 0;
-    margin-top: 0.5rem;
-    margin-left: 15px;
-  }
   .import-banners {
     margin-bottom: 1rem;
   }
@@ -239,44 +248,22 @@
       }
     }
   }
-  .padding {
-    height: 12rem;
-  }
 }
 
 .sequence-editor-sections {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: calc(100vh - 17.5rem);
-  pre {
-    margin-top: 2rem;
-  }
-  .sequence {
-    pre {
-      margin-top: 0;
-    }
-  }
   .sequence-description {
-    position: relative;
-    width: 100%;
-    padding-right: 3rem;
+    background: var(--secondary-bg);
+    border-radius: 0.5rem;
     textarea {
-      margin-left: 2rem;
-      height: 100%;
-      box-shadow: 0px 0px 10px $gray;
+      height: 10rem;
       padding-bottom: 2rem;
     }
+    .markdown {
+      padding: 1rem;
+    }
     .description-editor-tools {
-      position: absolute;
-      bottom: 0;
-      right: 3.5rem;
-      .fa-pencil {
-        margin-bottom: 1rem;
-      }
       .char-limit {
         font-size: 1rem;
-        line-height: 1.75rem;
-        margin-left: 1rem;
         color: $medium_gray;
         &.over {
           color: $darkest_red;
@@ -286,37 +273,17 @@
   }
 }
 
-.sequence-description-wrapper {
-  position: relative;
-  .fa-magic,
-  .fa-spinner {
-    position: absolute;
-    top: 1rem;
-    right: 6.5rem;
-  }
-  .fa-pencil,
-  .fa-eye {
-    position: absolute;
-    top: 1rem;
-    right: 4rem;
-  }
-}
-
 .sequence-description {
   .markdown {
     display: block;
     min-height: 10rem;
     max-height: 20rem;
     overflow-y: auto;
-    border: 2px solid $gray;
-    padding: 0.5rem;
-    margin-left: 1.5rem;
-    margin-right: -1.5rem;
+    border-radius: 0.5rem;
     p {
       display: revert;
       margin: revert;
       width: 100%;
-      color: $dark_gray;
       overflow: revert;
       white-space: revert;
       text-transform: revert;
@@ -399,50 +366,16 @@
   }
 }
 
-.sequence-description {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $black;
-  }
-}
-
-.sequence-item-help {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $white;
-  }
-}
-
 .designer-sequence-list-panel-content {
   .panel-top {
     display: none;
   }
   .sequence-section-header {
-    margin-left: -15px;
-    margin-right: -10px;
-    padding-right: 0.85rem;
-    .fa-caret-up,
-    .fa-caret-down {
-      margin: 1rem !important;
-      margin-top: 0.5rem !important;
-      margin-left: 1rem !important;
-      margin-right: 1.2rem !important;
-    }
-    &.featured-sequence-header {
-      .fa-caret-up,
-      .fa-caret-down {
-        position: absolute;
-        right: 0.75rem;
-      }
-    }
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr auto;
+    grid-auto-flow: column;
+    align-items: center;
     label {
       margin: 0;
       font-size: 1.3rem;
@@ -458,6 +391,7 @@
   }
   .sequence-list-item {
     &:hover {
+      background: var(--secondary-bg);
       .show-on-hover {
         display: flex !important;
       }
@@ -472,19 +406,6 @@
   }
 }
 
-.folder-icon-wrapper {
-  display: inline;
-  button {
-    height: 2rem;
-    margin-left: 1rem;
-    margin-top: 0.75rem;
-    padding: 0 0.75rem;
-    i {
-      display: block;
-    }
-  }
-}
-
 .farm-event-form-content,
 .regimen-editor-content,
 .designer-sequence-list-panel-content,
@@ -492,11 +413,12 @@
   .sequence-section-header {
     position: relative;
     cursor: pointer;
-    padding-left: 1.5rem;
+    margin: 0 -1rem;
+    padding: 0 1rem;
     height: 4rem;
     line-height: 3.75rem;
     &:hover {
-      background: $light_gray;
+      background: $translucent1!important;
     }
     label {
       cursor: pointer;
@@ -504,85 +426,11 @@
     }
     .fa-caret-up,
     .fa-caret-down {
-      float: right;
-      line-height: 3rem;
       font-size: 2rem;
-      margin-right: 2rem;
-      margin-top: 0.5rem;
-      color: $dark_gray;
-    }
-    .add-variable-btn {
-      position: absolute;
-      right: 4rem;
-      width: 2.8rem;
-      height: 2rem;
-      line-height: 1rem;
-      margin-top: 0.75rem;
-      margin-right: 0.25rem;
-      padding: 0.25rem;
-      .fa-plus {
-        vertical-align: top;
-        padding-top: 0.1rem;
-        padding-left: 0.1rem;
-        font-size: 1.5rem;
-      }
+      margin-right: 0.5rem;
     }
     .bp5-popover-wrapper {
-      position: absolute;
-      top: 0;
-      right: 4rem;
-      .add-variable-btn {
-        position: relative;
-        right: unset;
-        text-align: center;
-      }
-      .bp5-popover-content {
-        background: $off_white;
-        height: 100%;
-        align-content: center;
-        .add-variable-options {
-          text-align: center;
-          line-height: 0;
-        }
-        .fb-button {
-          float: none;
-          height: 2rem;
-        }
-      }
-    }
-  }
-}
-
-.designer-regimen-editor-panel-content {
-  padding: 0;
-}
-
-.regimen-editor-content {
-  margin-left: -1rem;
-  .regimen {
-    margin-left: 2rem;
-    padding-right: 3rem;
-  }
-  .button-group {
-    padding-right: 1rem;
-  }
-  .regimen-editor-tools {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-  .location-form-content {
-    .row {
-      white-space: nowrap;
-      padding-right: 1rem;
-      .trash {
-        display: inline;
-        float: none;
-      }
-    }
-  }
-  .sequence-section-header {
-    &:hover {
-      background: $light_gray !important;
+      display: contents;
     }
   }
 }
@@ -596,57 +444,19 @@
 }
 
 .sequence-editor-tools {
-  display: flex;
-  margin-left: -1rem;
-  margin-right: -1rem !important;
-  padding-right: 2rem;
-  .row {
-    margin-left: 0;
-  }
-  .title,
-  input {
-    flex: 1;
-  }
   input {
     margin: 0.75rem;
-    margin-left: 2.75rem;
   }
   .title {
     padding: 1.25rem;
     font-size: 1.6rem;
     font-weight: bold;
-    margin-left: 1.5rem;
   }
   &.page {
     i {
-      color: $white;
+      color: $dark_gray;
       &.inactive {
-        color: $gray;
-      }
-    }
-    .publish-button {
-      span {
-        margin: 0;
-      }
-    }
-    .color-picker {
-      span,
-      i {
-        margin: 0;
-      }
-    }
-    &.blue,
-    &.yellow,
-    &.orange,
-    &.purple,
-    &.pink,
-    &.gray {
-      i,
-      .title {
-        color: $dark_gray;
-        &.inactive {
-          color: $placeholder_gray;
-        }
+        color: $placeholder_gray;
       }
     }
     &.blue {
@@ -678,23 +488,7 @@
 
 .sequence-editor-tools,
 .regimen-editor-tools {
-  margin-right: 15px;
-  @media screen and (max-width: 767px) {
-    margin-right: 10px;
-  }
-  hr {
-    margin: 0.5rem 0;
-  }
-  .sequence-name {
-    margin-top: 1rem;
-  }
-  &.preview {
-    .filter-search,
-    .input,
-    input {
-      pointer-events: none;
-    }
-  }
+  border-bottom: 1.5px solid $translucent1;
 }
 
 .preview-variables {
@@ -703,34 +497,26 @@
   }
 }
 
-.regimen-editor-tools {
-  .button-group {
-    margin-bottom: 1rem;
-    .save-btn {
-      margin-left: 0.5rem;
-    }
-  }
-}
-
 .locals-list {
-  margin-left: 1.5rem;
-  margin-right: 2rem;
-  .location-form {
-    label {
-      margin-top: 0;
-    }
+  display: grid;
+  gap: 1rem;
+  .location-form, .custom-coordinate-form {
+    background: var(--secondary-bg);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+  .default-value-form, .custom-coordinate-form {
+    margin: 0 3.5rem;
   }
   .location-form-content {
-    .row {
-      display: flex;
-    }
     .bp5-popover-wrapper {
       display: inline-block;
       margin-left: 1rem;
     }
     .variable-icon {
+      width: 2.5rem;
+      text-align: center;
       cursor: default !important;
-      margin-top: 0.5rem;
     }
     p {
       display: inline;
@@ -739,24 +525,15 @@
     .variable-label {
       font-weight: bold;
     }
-    .fa-trash {
-      color: $darkest_red;
-      margin-top: 0.5rem;
-      margin-left: -1rem;
-    }
-    .numeric-variable-input,
-    .text-variable-input {
-      padding-right: 0.5rem;
-      padding-left: 2.5rem;
+    .no-location-coordinate-input-boxes,
+    .no-default-value-form {
+      display: none;
     }
   }
-}
-
-.regimen {
-  width: 100%;
-  height: calc(100vh - 25rem);
-  overflow-y: auto;
-  overflow-x: hidden;
+  .numeric-variable-input,
+  .text-variable-input {
+    margin-right: 3.5rem;
+  }
 }
 
 .license {
@@ -769,9 +546,7 @@
 }
 
 .sequence-steps {
-  margin-right: 30px;
-  margin-left: 10px;
-  margin-top: 10px;
+  margin-right: 2.5rem;
   .sequence-step {
     &.hovered {
       box-shadow: 0px 0px 15px #ff7700;
@@ -791,37 +566,22 @@
 }
 
 .step-button-cluster {
-  margin-right: -15px;
   overflow-y: auto;
   overflow-x: hidden;
   max-height: calc(100vh - 8rem);
-  .text-input-wrapper {
-    input {
-      padding-left: 0.5rem !important;
-    }
-    .fa-times {
-      color: $red !important;
-      &:hover {
-        color: $medium_dark_red !important;
-      }
-    }
+  .commands, .pinned-sequences {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
   }
   .step-button {
     label {
       cursor: pointer;
     }
-    .step-block-wrapper {
-      margin-bottom: 1rem;
-    }
     .clustered {
-      margin: 0.5rem;
       float: left;
-      margin-bottom: 0.25rem;
       box-shadow: none;
-      padding-bottom: 0;
-      label {
-        margin-bottom: 3px;
-      }
+      color: $dark_gray;
       &.gray {
         background: $light_gray !important;
       }
@@ -837,7 +597,6 @@
     background: $dark_gray;
     margin-bottom: 1rem;
     border-radius: 5px;
-    box-shadow: 0px 0px 10px $gray;
     overflow: unset;
     padding: 0.75rem;
     padding-top: 0.5rem;
@@ -846,12 +605,9 @@
       height: 10rem;
       overflow-y: auto;
       overflow-x: hidden;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
     }
     .text-input-wrapper {
-      margin: 0;
-      border-bottom-color: $white !important;
+      border-bottom-color: $translucent8_white !important;
       input {
         color: $white;
       }
@@ -859,14 +615,13 @@
       &:after {
         background: $white !important;
       }
-      .fa-times {
-        color: $red;
-      }
     }
   }
 }
 
 .step-button-cluster-panel {
+  padding: 1rem;
+  background: $dark_gray;
   @media screen and (max-width: 767px) {
     display: none;
     margin-left: 15px;
@@ -875,10 +630,6 @@
       display: block;
     }
   }
-  .row {
-    margin-left: -2.5rem;
-    margin-right: 3rem;
-  }
   h3 {
     margin-top: 1rem;
     margin-left: -1rem;
@@ -931,10 +682,6 @@
       cursor: pointer;
     }
   }
-  i {
-    float: right;
-    margin-top: 0.75rem;
-  }
 }
 
 .folders-panel {
@@ -966,31 +713,25 @@
       font-size: 1.5rem;
       line-height: 1.5rem;
       margin-left: 0.75rem;
-      filter: drop-shadow(0 0 0.2rem  $dark_green);
+      filter: drop-shadow(0 0 0.25rem var(--main-bg));
       text-align: center;
     }
   }
   .folder-button-cluster {
     display: flex;
-    .cluster-icon {
-      padding: 0.5rem;
-      border-radius: 3px;
-      line-height: 2rem !important;
-      color: $off_white;
-      &:hover {
-        background: $medium_gray;
+    .fb-icon-button {
+      .fa-stack-1x {
+        line-height: unset;
+        margin-top: -1.25rem;
       }
       .fa-stack-2x {
         width: unset;
         line-height: unset;
       }
-      .fa-stack-1x {
-        width: unset;
-      }
     }
   }
   ul {
-    margin-bottom: 0;
+    margin: 0;
   }
   .folder-drop-area {
     height: 0;
@@ -1023,18 +764,18 @@
   }
   .folders {
     .folder > div:not(:first-child), ul {
-      margin-left: 1rem;
+      margin-left: 2rem;
     }
     .folder-list-item {
       &.moving {
         .drop-visual {
           position: absolute;
-          width: 75%;
-          height: 75%;
-          margin-top: 0.5rem;
-          margin-left: 3rem;
-          border: 2px dashed $gray;
-          background: $white;
+          top: 0.5rem;
+          bottom: 0.5rem;
+          left: 2.75rem;
+          right: 3rem;
+          border: 1px dashed $gray;
+          border-radius: 3px;
         }
       }
       &.hovered {
@@ -1057,9 +798,7 @@
     position: relative;
     width: 100%;
     height: 3.5rem;
-    border-bottom: 1px solid $light_gray;
     cursor: pointer;
-    background: $lighter_gray;
     border-left: 4px solid transparent;
     &.active {
       border-left: 4px solid $dark_gray;
@@ -1073,19 +812,10 @@
       width: 3rem;
       font-size: 1.1rem;
     }
-    .folder-settings-icon {
-      position: absolute;
-      right: 0;
-      .bp5-popover-target {
-        i {
-          color: $dark_gray;
-        }
-      }
-    }
     .fb-button-popover-wrapper {
       margin-right: 0.25rem;
       button {
-        margin-top: 0.65rem;
+        margin-top: 0.75rem;
       }
     }
     .fa-question-circle,
@@ -1115,7 +845,7 @@
         display: block;
       }
     }
-    i {
+    i:not(.fb-icon-button) {
       margin: 0;
       line-height: 3.5rem;
       width: 3rem;
@@ -1204,7 +934,7 @@
   .folder-list-item {
     padding-left: 0;
     .bp5-popover-wrapper.color-picker {
-      margin-left: 3rem;
+      margin-left: 2.5rem;
     }
     .color-picker {
       .icon-saucer {
@@ -1215,7 +945,7 @@
     }
   }
   .matched {
-    background: color.adjust($yellow, $alpha: -0.5);
+    background: $translucent2_white;
   }
   .non-empty-state {
     width: 100%;
@@ -1239,27 +969,15 @@
     }
     p {
       line-height: 1.75rem;
-      color: $off_white;
-    }
-    .fa-exclamation-triangle {
-      color: $orange;
     }
   }
-  hr {
-    border-color: $medium_gray;
-    margin-left: -1rem;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    width: 106.5%;
-  }
   label {
     display: block;
-    color: $off_white;
   }
   img {
     max-width: 100%;
     border-radius: 5px;
-    border: 2px solid $medium_gray;
+    border: 2px solid var(--border-color);
   }
 }
 
@@ -1270,24 +988,11 @@
   }
 }
 
-.folder-settings-icon,
-.sequence-item-description,
-.sequence-item-action-menu {
-  .bp5-popover-arrow-fill {
-    fill: $dark_gray;
-  }
-  .bp5-popover-content {
-    background: $dark_gray;
-  }
-}
-
 .sequence-item-description {
   .bp5-popover-content {
     max-height: 20rem;
     overflow-y: auto;
     width: 32rem;
-    color: $white;
-    background: $dark_gray;
   }
 }
 
@@ -1301,16 +1006,11 @@
 }
 
 .sequence-list-panel {
-  padding-top: 0.4rem;
-  margin-right: 5px;
   @media screen and (max-width: 1075px) {
     margin-left: 15px;
   }
   .empty-state {
     display: none;
-    .empty-state-graphic {
-      margin-top: 25%;
-    }
   }
   @media screen and (max-width: 767px) {
     margin-left: 15px;
@@ -1322,9 +1022,6 @@
       display: block;
     }
   }
-  .panel-top {
-    margin: 0;
-  }
 }
 
 .designer-regimen-list-panel {
@@ -1337,7 +1034,6 @@
   .panel-content {
     overflow-y: auto;
     overflow-x: hidden;
-    margin-left: -15px;
     padding: 0;
   }
 }
@@ -1379,6 +1075,9 @@
   z-index: 9;
   width: 100%;
   height: 0;
+  button {
+    margin: 0;
+  }
   &.first,
   &.middle,
   &.last {
@@ -1400,7 +1099,6 @@
     .add-command {
       transform: rotate(-45deg);
       margin-top: -1.5rem;
-      margin-right: 1.5rem;
       border-top-left-radius: 0;
       i {
         transform: rotate(45deg);
@@ -1409,22 +1107,26 @@
   }
   &.first {
     .add-command {
-      margin-top: -0.25rem;
-      margin-right: 1.5rem;
       border-top-left-radius: 0;
     }
   }
   &.last {
     .bp5-collapse {
-      margin-left: 1rem;
-      margin-right: 3rem;
+      margin-top: 1rem;
+      margin-right: 2.5rem;
     }
     .add-command {
-      margin-top: -1.75rem;
-      margin-right: 0.5rem;
+      margin-top: -2rem;
       border-bottom-left-radius: 0;
     }
   }
+  &.last {
+    &.open {
+      .add-command {
+        margin-top: -1.5rem;
+      }
+    }
+  }
   &.only {
     position: relative;
     margin: auto;
@@ -1435,7 +1137,7 @@
       padding-right: 3rem;
     }
     .add-command {
-      float: none;
+      display: none;
     }
   }
   @media screen and (max-width: 767px) {
@@ -1446,11 +1148,9 @@
   }
   &.open {
     position: relative;
-    height: 100%;
     .add-command {
       position: absolute;
-      top: 50%;
-      right: -4rem;
+      right: -2.5rem;
       transform: rotate(-45deg);
       i {
         transform: rotate(0);
@@ -1525,3 +1225,128 @@ $border_width: 1.4px;
     }
   }
 }
+
+.sequence-publish-menu,
+.sequence-share-menu {
+  max-width: 300px;
+  button {
+    display: block;
+    margin: auto;
+    float: none;
+    margin-top: 1rem;
+  }
+}
+
+.sequence-publish-menu {
+  .sequence-publish-message {
+    text-align: left;
+    p {
+      padding-bottom: 1rem;
+      line-height: 1.5rem;
+    }
+    a {
+      display: inline;
+      text-decoration: underline !important;
+    }
+    ul {
+      list-style-type: "- " !important;
+      padding: revert;
+      padding-left: 1rem;
+      font-size: 1.1rem;
+      line-height: 1.5rem;
+    }
+    label {
+      font-size: 1rem;
+      margin-right: 1rem;
+    }
+    input {
+      width: 50%;
+    }
+    .republish-warning {
+      display: flex;
+      margin: 0.75rem -10px 1rem -10px;
+      padding: 1rem 1rem 0 1rem;
+      background: color.adjust($orange, $alpha: -0.6);
+      i {
+        margin-right: 1rem;
+        margin-top: 0.25rem;
+      }
+      p {
+        font-weight: bold;
+        padding-bottom: 0.5rem;
+      }
+    }
+  }
+  button {
+    margin: 0;
+    margin-top: 1rem;
+    .fa-spinner {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+.sequence-share-menu {
+  text-align: center;
+  a {
+    display: block;
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    &:hover {
+      color: $black;
+      font-weight: normal;
+    }
+  }
+  .versions-table {
+    margin-top: 2rem;
+    text-align: left;
+    .bp5-popover-wrapper {
+      display: inline-block;
+      margin-left: 1rem;
+    }
+    .fb-button.gray {
+      margin: 0;
+      float: right;
+    }
+    .row {
+      margin-top: 0.5rem;
+    }
+    p {
+      width: max-content;
+      padding: 5px;
+      border-radius: 3px;
+      color: $white;
+      background: $panel_blue;
+    }
+    .fa-link {
+      float: right;
+      margin-top: 0.75rem;
+    }
+  }
+  .fb-button.white {
+    color: $darkest_red;
+    text-transform: none;
+    font-weight: normal;
+    background: $white;
+    .fa-spinner {
+      margin-left: 0.5rem;
+    }
+    &:hover {
+      background: $off_white;
+    }
+  }
+}
+
+.celeryscript {
+  font-size: 1.25rem;
+  margin: 0;
+  background: $dark_gray;
+  color: $off_white;
+  padding: 1rem;
+  font-size: 1.2rem;
+  white-space: pre-wrap;
+}
diff --git a/frontend/css/panels/settings.scss b/frontend/css/panels/settings.scss
new file mode 100644
index 0000000000..7d1cfab18e
--- /dev/null
+++ b/frontend/css/panels/settings.scss
@@ -0,0 +1,261 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.settings-panel-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 1.5rem;
+  display: grid;
+  gap: 2rem;
+  .expandable-header {
+    margin: 0;
+  }
+  .section {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    &.setting {
+      gap: 0.5rem;
+    }
+    .bp5-collapse {
+      grid-column: span 2;
+    }
+    .bp5-collapse-body {
+      display: grid;
+      gap: 1rem;
+    }
+  }
+  .export-data,
+  .change-password {
+    form {
+      margin-left: 2rem;
+    }
+  }
+  .label-headings {
+    label {
+      line-height: 1rem;
+    }
+  }
+  .release-notes-wrapper {
+    float: right !important;
+  }
+  .settings-warning-banner {
+    margin: 0 -2.5rem;
+    padding: 1rem 2.5rem;
+    background: color.adjust($orange, $alpha: -0.6);
+    p {
+      font-size: 1.3rem;
+      font-weight: bold;
+    }
+    &.env-editor-lua {
+      background: color.adjust($blue, $alpha: -0.6);
+    }
+  }
+  .pin-guard-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr auto;
+    grid-auto-flow: column;
+  }
+  .pin-bindings {
+    .stock-pin-bindings-button {
+      display: block;
+      justify-self: right;
+      i {
+        margin-right: 0.5rem;
+      }
+    }
+    .pin-binding-grid {
+      grid-template-columns: 1fr 30% auto;
+    }
+    .binding-action {
+      font-weight: bold;
+      font-size: 1.2rem;
+    }
+  }
+  .fb-button {
+    margin-top: 0.5rem;
+  }
+  label {
+    margin: auto 0 !important;
+    line-height: 1;
+    font-size: 1.2rem !important;
+  }
+  .help-icon {
+    margin-left: 0.5rem;
+  }
+  .designer-setting {
+    &.disabled {
+      input {
+        background: $gray;
+      }
+      button {
+        background: $medium_light_gray !important;
+      }
+    }
+  }
+}
+
+.setting {
+  &[hidden] {
+    display: none !important;
+  }
+  &.highlight {
+    background-color: $translucent2_white;
+    box-shadow: 0px 0px 7px 4px $translucent2_white;
+  }
+  &.unhighlight {
+    transition: background-color 10s linear, box-shadow 10s linear;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  &.advanced {
+    border-left: 3px solid $blue;
+    padding-left: 0.7rem;
+    margin-left: -1rem;
+  }
+  .fa-anchor {
+    font-size: 0.8rem;
+    visibility: hidden;
+    &.hovered {
+      visibility: visible;
+    }
+  }
+  .setting {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    align-items: baseline;
+    .farmbot-os-setting {
+      text-align: left;
+    }
+  }
+}
+
+.load-progress-bar-wrapper {
+  position: relative;
+  margin: 0.5rem;
+  margin-top: 0;
+  margin-left: 0;
+  width: 90%;
+  height: 1.5rem;
+  border: 1px solid $dark_gray;
+  .load-progress-bar {
+    height: 100%;
+    background: $dark_gray !important;
+    p {
+      position: absolute;
+      color: $gray;
+      font-weight: bold;
+      font-size: 1rem;
+    }
+  }
+}
+
+.firmware-setting-export-menu {
+  button {
+    margin-bottom: 1rem;
+  }
+  ul {
+    font-size: 0.75rem;
+  }
+}
+
+.change-ownership-form {
+  p {
+    padding: 1rem;
+    margin-left: 0.5rem;
+  }
+  .row {
+    margin-bottom: 1rem;
+    &:empty {
+      margin-bottom: 0;
+    }
+  }
+  label {
+    margin-top: 0.5rem;
+  }
+  button {
+    margin-top: 1rem;
+    margin-right: 1rem;
+  }
+}
+
+.mcu-input-box {
+  width: 100%;
+}
+
+.fb-toggle-button,
+.mcu-input-box {
+  position: relative;
+  .setting-status-indicator {
+    position: absolute;
+    z-index: 1;
+  }
+  .fa-spinner {
+    color: $dark_gray;
+  }
+  .fa-check {
+    color: $green;
+    animation: fade-out 1s 0.4s forwards;
+  }
+  .save-error {
+    .bp5-popover-content {
+      background: $dark_gray;
+      min-width: 200px;
+      p {
+        text-transform: none;
+        color: $off_white;
+      }
+    }
+    .bp5-popover-arrow-fill {
+      fill: $dark_gray;
+    }
+  }
+}
+
+.mcu-input-box {
+  .setting-status-indicator {
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+.release-notes-button {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.release-notes {
+  max-width: 250px;
+  h1 {
+    font-weight: 300;
+    font-size: 1.4rem;
+    line-height: 2rem;
+    margin-top: 0;
+  }
+  li {
+    font-weight: 300;
+    font-size: 1.1rem;
+    line-height: 1.75rem;
+    margin-bottom: 1rem;
+  }
+  p {
+    display: block;
+    color: $dark_gray;
+    text-overflow: inherit;
+    overflow: inherit;
+    width: inherit;
+    white-space: inherit;
+  }
+}
+
+.timezone-grid {
+  grid-auto-flow: dense!important;
+}
+
+.note {
+  font-style: italic;
+  grid-column: span 2;
+  margin-bottom: 1rem;
+}
diff --git a/frontend/css/panels/setup_wizard.scss b/frontend/css/panels/setup_wizard.scss
new file mode 100644
index 0000000000..006faff2ec
--- /dev/null
+++ b/frontend/css/panels/setup_wizard.scss
@@ -0,0 +1,333 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.setup-panel {
+  .panel-top {
+    padding: 0;
+  }
+  .panel-content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0;
+    .progress-meter {
+      font-weight: bold;
+      color: $medium_gray;
+    }
+    h1,
+    h2,
+    h3 {
+      margin-bottom: 0;
+      cursor: pointer;
+      .fa-caret-up,
+      .fa-caret-down {
+        font-size: 2rem;
+      }
+    }
+    .saucer {
+      height: 1.5rem;
+      width: 1.5rem;
+      i {
+        font-size: 1rem;
+        color: $white;
+        vertical-align: top;
+        width: 1.5rem;
+        line-height: 1.5rem;
+        text-align: center;
+      }
+    }
+    h2 {
+      font-weight: bold;
+      font-size: 1.4rem;
+      padding: 1rem 1.5rem 1rem 1.5rem;
+    }
+    h3 {
+      font-size: 1.4rem;
+    }
+    .prerequisites,
+    .prereq-not-met {
+      font-size: 1.3rem;
+      padding: 1rem;
+      background: var(--secondary-bg);
+      border: 1px solid $dark_red;
+      border-radius: 5px;
+    }
+    .wizard-header {
+      padding: 1.5rem;
+      h1 {
+        font-family: 'Inknut Antiqua', serif;
+        font-weight: bold;
+        font-size: 2rem;
+        margin: 0;
+      }
+    }
+    .wizard-section {
+      h2 {
+        margin-top: 0;
+      }
+      .bp5-collapse-body {
+        margin-bottom: 2rem;
+      }
+    }
+    .wizard-step {
+      .bp5-collapse-body {
+        margin-bottom: 0;
+      }
+      img {
+        width: 100%;
+        border-radius: 5px;
+      }
+    }
+    .warning-banner {
+      margin: 0 -15px 1rem -15px;
+      padding: 1rem 1.5rem 1rem 2rem;
+      background: color.adjust($orange, $alpha: -0.6);
+      p {
+        line-height: 1.75rem;
+        font-size: 1.3rem;
+        font-weight: bold;
+      }
+    }
+    h2,
+    .wizard-step-header {
+      padding: 0.5rem 1.5rem;
+      cursor: pointer;
+      &.open {
+        background: var(--secondary-bg);
+        h3 {
+          font-weight: bold;
+        }
+      }
+      &:hover {
+        background: var(--secondary-bg);
+      }
+    }
+    .wizard-step-content {
+      padding: 0.5rem 1.5rem 2rem;
+      background: var(--secondary-bg);
+      .markdown {
+        display: contents;
+        p {
+          font-size: 1.4rem;
+          white-space: pre-wrap;
+          line-height: 1.8rem;
+          text-align: justify;
+        }
+      }
+    }
+    .wizard-step-q-and-a {
+      background-color: $dark_gray;
+      box-shadow: 0 0 1rem $translucent;
+      border-radius: 1rem;
+      display: grid;
+      gap: 1rem;
+      justify-content: center;
+      padding: 2rem;
+      .wizard-step-question {
+        font-style: italic;
+        text-align: center;
+        &.markdown p {
+          color: $off_white!important;
+          text-align: center;
+          font-size: 1.5rem;
+        }
+      }
+      .wizard-answer {
+        justify-content: center;
+        button {
+          padding: 1rem 2rem;
+        }
+      }
+    }
+    iframe {
+      aspect-ratio: 16/9;
+      border-radius: 5px;
+      box-shadow: 0px 0px 7px 0px $translucent;
+    }
+    .wizard-components {
+      margin: 0 auto;
+      width: fit-content;
+      border-radius: 5px;
+      padding: 1rem 1.5rem;
+      background: var(--secondary-bg);
+      &.no-border {
+        border: none;
+        width: 100%;
+        padding: 0;
+      }
+      &.no-background {
+        border: none;
+        width: max-content;
+        padding: 0;
+      }
+      &.full-width {
+        width: 100%;
+      }
+      &:empty {
+        display: none;
+      }
+      .widget-wrapper {
+        margin-bottom: 0;
+      }
+      .tool-verification-status {
+        text-align: center;
+        button {
+          margin: 1rem;
+          float: none;
+        }
+      }
+      .connectivity {
+        .diagnosis-indicator {
+          height: 2rem;
+          width: 2rem;
+          .fa {
+            margin-left: -0.25rem;
+            margin-top: -0.3rem;
+          }
+        }
+        .saucer-connector {
+          display: none;
+        }
+      }
+      .flash-firmware {
+        display: block;
+        float: none;
+      }
+      .tour-start {
+        display: block;
+        margin: auto;
+        float: none;
+        padding: 1rem;
+      }
+      .setting {
+        .no-pad {
+          padding-left: 1.5rem;
+          padding-right: 1.5rem;
+        }
+      }
+      .flow-rate-input {
+        .fb-button {
+          margin-top: 0;
+        }
+      }
+    }
+    .troubleshooting {
+      a {
+        float: none;
+        padding: 0;
+        padding-left: 0.25rem;
+      }
+    }
+    .troubleshooting-tip {
+      border: 2px solid $medium_light_gray;
+      border-radius: 5px;
+      padding: 1rem;
+      cursor: pointer;
+      background: $panel_light_gray;
+      &:hover {
+        background: $white;
+        box-shadow: 0 1px 5px 0 $translucent;
+      }
+      p {
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+      a {
+        font-size: 1.4rem;
+        text-decoration: underline;
+      }
+      &.selected {
+        border-color: $dark_gray;
+        background: $white;
+        p:first-of-type {
+          font-weight: bold;
+        }
+        fieldset {
+          p {
+            font-weight: normal !important;
+          }
+        }
+      }
+      .fb-button {
+        float: none;
+      }
+      .arrow-button {
+        p {
+          font-size: 0.9rem;
+        }
+      }
+      .farmbot-origin {
+        margin-top: 1rem;
+      }
+      .motor-settings {
+        .row {
+          margin-top: 1rem;
+        }
+      }
+      .filter-search {
+        .bp5-popover-wrapper {
+          display: unset;
+          margin-left: unset;
+        }
+      }
+      .yellow {
+        float: none;
+        &:hover {
+          font-size: 1rem;
+        }
+      }
+      iframe {
+        margin-top: 1rem;
+      }
+      .wizard-find-home-btn {
+        float: none;
+      }
+    }
+    .setup-complete {
+      margin: 2rem;
+      justify-content: center;
+      p {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.camera-check {
+  text-align: center;
+  justify-items: center;
+  img {
+    width: 100%;
+    padding: 1rem;
+  }
+}
+
+.farmbot-model-selection {
+  width: 27rem;
+  .seed-checkbox {
+    .fb-checkbox {
+      display: inline-block;
+      margin-top: 1rem;
+    }
+    p {
+      display: inline;
+      margin-left: 0.5rem;
+      vertical-align: bottom;
+      line-height: 3rem;
+    }
+  }
+}
+
+.peripherals-check {
+  margin: 1rem;
+}
+
+.camera-calibration-card {
+  padding: 1rem;
+  width: 15rem;
+  svg {
+    width: 100%;
+    height: 100%;
+    background: $dark_gray;
+  }
+}
diff --git a/frontend/css/panels/tools.scss b/frontend/css/panels/tools.scss
new file mode 100644
index 0000000000..8662fce24d
--- /dev/null
+++ b/frontend/css/panels/tools.scss
@@ -0,0 +1,209 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.tool-slots-panel,
+.tools-panel {
+  .tool-slots-panel-content,
+  .tools-panel-content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    .tool-search-item,
+    .tool-slot-search-item {
+      .filter-search {
+        .bp5-button {
+          min-height: 2.5rem;
+          max-height: 2.5rem;
+          span {
+            line-height: 1.5rem;
+          }
+        }
+        i {
+          line-height: 2.5rem;
+        }
+      }
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .mounted-tool {
+      .filter-search {
+        width: 50%;
+        float: right;
+      }
+      .utm-and-mounted-tool-graphic {
+        width: 30%;
+        margin-left: 32%;
+      }
+    }
+    .mounted-tool-header {
+      display: inline;
+      margin-top: 1rem;
+      label {
+        margin: 0;
+      }
+      .bp5-popover-wrapper {
+        display: inline;
+      }
+      .help-icon {
+        margin-left: 1rem;
+        vertical-align: top;
+        font-size: 1.4rem;
+      }
+    }
+    button:not(.bp5-button) {
+      display: block;
+      margin-left: auto;
+      float: none;
+      margin-top: 1rem;
+    }
+    .tool-verification-status {
+      display: flex;
+      margin-top: 1rem;
+      margin-bottom: 2rem;
+      button {
+        margin-top: 0;
+      }
+    }
+    .panel-section {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+}
+
+.add-tool-slot-panel,
+.edit-tool-slot-panel,
+.add-tool-panel,
+.edit-tool-panel {
+  .tool-action-btn-group {
+    margin: 1.5rem;
+  }
+}
+
+.add-tool-panel-content,
+.edit-tool-panel-content {
+  max-height: calc(100vh - 14rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  button {
+    display: block;
+    margin-left: auto;
+    float: none;
+    margin-top: 1rem;
+    &.red {
+      float: left;
+      margin-bottom: 1rem;
+    }
+  }
+  svg {
+    display: block;
+    margin: auto;
+    width: 10rem;
+    height: 10rem;
+    margin-top: 2rem;
+  }
+  .edit-tool,
+  .add-new-tool {
+    .name-error {
+      justify-self: right;
+      color: $dark_red;
+    }
+    .save-btn {
+      float: right;
+    }
+    details {
+      padding: 2rem;
+      .graphics-input {
+        input {
+          width: 97%;
+        }
+      }
+    }
+  }
+  .add-stock-tools {
+    .filter-search {
+      margin-bottom: 1rem;
+      button {
+        margin-top: 0.2rem;
+      }
+    }
+    ul {
+      font-size: 1.2rem;
+      li {
+        margin-top: 0.5rem;
+        line-height: 2rem;
+        cursor: pointer;
+        width: 50%;
+        &:hover {
+          font-weight: bold;
+        }
+        .fb-checkbox {
+          display: inline;
+        }
+        p {
+          display: inline;
+          line-height: 2.25rem;
+          font-size: 1.2rem;
+          vertical-align: top;
+          margin-left: 1rem;
+        }
+      }
+    }
+    button {
+      .fa-plus {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+}
+
+.flow-rate-input {
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 0.5rem;
+  }
+  .fb-button {
+    float: right;
+    margin-top: 1.5rem;
+  }
+}
+
+.edit-tool-slot-panel {
+  .save-error {
+    position: absolute;
+    top: 1.5rem;
+    right: 1rem;
+    color: $darkest_red;
+  }
+}
+
+.add-tool-slot-panel-content,
+.edit-tool-slot-panel-content {
+  max-height: calc(100vh - 14rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  svg {
+    display: block;
+    margin: auto;
+    width: 10rem;
+    height: 10rem;
+    margin-top: 2rem;
+  }
+}
+
+.tool-svg {
+  display: flex;
+  div {
+    margin: auto;
+    text-align: center;
+    p {
+      font-style: italic;
+    }
+  }
+}
+
+.tool-slot-location-grid {
+  align-items: end !important;
+}
diff --git a/frontend/css/panels/webcams.scss b/frontend/css/panels/webcams.scss
new file mode 100644
index 0000000000..6ae9cb3d62
--- /dev/null
+++ b/frontend/css/panels/webcams.scss
@@ -0,0 +1,59 @@
+@use "../variables" as *;
+@use "sass:color";
+
+.webcam-stream-unavailable p {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+  vertical-align: middle;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.webcam-widget {
+  .no-flipper-image-container {
+    background: none !important;
+    width: 100% !important;
+    height: auto !important;
+    border-radius: 5px;
+    img {
+      max-width: 100% !important;
+    }
+  }
+  .image-flipper {
+    p,
+    button {
+      color: $white;
+    }
+  }
+}
+
+.webcam-stream-unavailable {
+  position: relative;
+  width: 100%;
+}
+
+.webcam-stream-unavailable img {
+  width: 100%;
+  max-width: 100%;
+  opacity: 0.40;
+}
+
+.webcam-stream-valid {
+  img, iframe {
+    display: flex;
+    margin: auto;
+    max-height: 650px;
+  }
+  img {
+    max-width: 100%;
+    min-height: 100px;
+  }
+  iframe {
+    width: 100%;
+    border: none;
+    min-height: 300px;
+  }
+}
diff --git a/frontend/css/regimens.scss b/frontend/css/regimens.scss
deleted file mode 100644
index 6562e06e8c..0000000000
--- a/frontend/css/regimens.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-// Bulk Scheduler
-.bulk-scheduler {
-  &.page {
-    @media screen and (max-width: 768px) {
-      display: none;
-      margin-bottom: 3rem;
-      &.open {
-        &.inserting-item {
-          display: block;
-        }
-      }
-    }
-  }
-  label {
-    margin-top: 0 !important;
-  }
-  .week-grid {
-    margin-top: 2rem;
-  }
-  .week-grid-meta-buttons {
-    margin-top: 1rem;
-    text-align: right;
-    button {
-      float: none;
-      margin-left: 1rem;
-      margin-bottom: 1rem;
-    }
-  }
-  @media screen and (max-width: 974px) {
-    margin-left: 15px;
-    margin-right: 15px;
-  }
-  .fa-clock-o {
-    margin-left: 0.75rem;
-    color: $dark_gray;
-  }
-  input {
-    background-color: $white !important;
-  }
-}
-
-.bulk-scheduler-add {
-  margin: 1.5rem !important;
-}
-
-.bulk-scheduler-content {
-  margin-top: 1rem;
-}
-
-// Regimen Editor
-.regimen-day {
-  margin: 1.5rem 0;
-  margin-right: 10px;
-}
-
-.regimen-event {
-  position: relative;
-  background: $gray;
-  border-radius: 3px;
-  min-height: 3.5rem;
-  margin-bottom: 1rem;
-  &.blue {
-    .regimen-item-variables {
-      background: $panel_light_blue;
-    }
-  }
-  &.green {
-    .regimen-item-variables {
-      background: $light_green;
-    }
-  }
-  &.yellow {
-    .regimen-item-variables {
-      background: $light_yellow;
-    }
-  }
-  &.orange {
-    .regimen-item-variables {
-      background: $light_orange;
-    }
-  }
-  &.purple {
-    .regimen-item-variables {
-      background: $light_purple;
-    }
-  }
-  &.pink {
-    .regimen-item-variables {
-      background: $light_pink;
-    }
-  }
-  &.gray {
-    .regimen-item-variables {
-      background: $light_gray;
-    }
-  }
-  &.red {
-    .regimen-item-variables {
-      background: $light_red;
-    }
-  }
-}
-
-.regimen-event-titlebar {
-  padding: 0.5rem;
-  padding-left: 1rem;
-}
-
-.regimen-event-title {
-  color: $dark_gray;
-  font-size: 1.2rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  .fa-external-link {
-    margin-left: 0.5rem;
-  }
-}
-
-.regimen-event-time {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
-
-.regimen-item-variables {
-  padding: 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  .variable-icon {
-    margin-right: 1rem;
-  }
-}
-
-.regimen-event-variable {
-  display: block;
-  margin-right: 1.5rem;
-  i {
-    cursor: default !important;
-  }
-}
-
-.regimen-control {
-  position: absolute;
-  right: 1rem;
-}
-
-.regimen-days-label {
-  margin-left: 50%;
-  margin-top: 2rem;
-}
-
-.open-bulk-scheduler-btn-wrapper {
-  margin: auto;
-  width: fit-content;
-  text-align: center;
-  button {
-    float: none;
-    margin-bottom: 1rem;
-  }
-  .open-bulk-scheduler-btn {
-    display: none;
-    @media screen and (max-width: 768px) {
-      display: block;
-      margin: auto;
-      float: none !important;
-    }
-  }
-}
-
-// Regimen List styles in sequences.scss
diff --git a/frontend/css/scrollbar.scss b/frontend/css/scrollbar.scss
deleted file mode 100644
index fd1fc73189..0000000000
--- a/frontend/css/scrollbar.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-*::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-  background-color: $light_gray;
-}
-
-*::-webkit-scrollbar-track {
-  background-color: $light_gray;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: $medium_gray;
-}
diff --git a/frontend/css/static_pages.scss b/frontend/css/static_pages.scss
deleted file mode 100644
index 4f3b8a411c..0000000000
--- a/frontend/css/static_pages.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-.static-page {
-  min-height: 100vh;
-  max-height: 100%;
-  background: linear-gradient(-135deg, #6db1ec, #35a274);
-  padding-top: 4rem;
-  .row {
-    margin: 0 auto;
-  }
-  h1,
-  h2 {
-    font-family: "Cabin", Arial, Helvetica, sans-serif !important;
-    font-weight: 100 !important;
-    color: $white;
-    text-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1);
-  }
-  h1 {
-    font-family: "Inknut Antiqua" !important;
-    font-weight: bold !important;
-    font-size: 3.4rem;
-    line-height: 3.6rem;
-  }
-  h2 {
-    margin-top: 1rem;
-    margin-bottom: 8rem;
-    font-size: 2.2rem;
-    line-height: 2.6rem;
-  }
-  input {
-    margin-bottom: 1rem;
-    font-family: revert;
-    font-size: revert;
-  }
-  .all-content-wrapper {
-    max-width: 50rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  .widget-wrapper {
-    margin-top: 1.5rem;
-    text-align: start;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-  }
-  .inner-width {
-    margin: auto;
-    max-width: 1024px;
-    text-align: center;
-  }
-  .forgot-password {
-    display: inline-block;
-    color: $blue;
-  }
-  .tos {
-    margin-bottom: 1.5rem;
-  }
-  input[type="checkbox"] {
-    float: left;
-    margin-right: 0.5rem;
-    margin-top: 0.25rem;
-  }
-  a:link {
-    font-weight: 300;
-    color: $dark_gray;
-  }
-  a:visited {
-    color: $medium_gray;
-  }
-  a:hover {
-    font-weight: 500;
-  }
-  a:active {
-    color: $medium_gray;
-    font-weight: 500;
-  }
-  .fa-gear {
-    float: right;
-  }
-  .fa-external-link {
-    margin-left: 1rem;
-    margin-bottom: 0.5rem;
-  }
-  img {
-    width: 55%;
-    margin-bottom: 2rem;
-  }
-}
diff --git a/frontend/css/variables.scss b/frontend/css/variables.scss
new file mode 100644
index 0000000000..2e7fa04f28
--- /dev/null
+++ b/frontend/css/variables.scss
@@ -0,0 +1,3 @@
+@forward "variables/colors";
+
+$mobile_max_width: 500px;
diff --git a/frontend/css/colors.scss b/frontend/css/variables/colors.scss
similarity index 62%
rename from frontend/css/colors.scss
rename to frontend/css/variables/colors.scss
index ebe5283ba5..1fdd008b52 100644
--- a/frontend/css/colors.scss
+++ b/frontend/css/variables/colors.scss
@@ -1,4 +1,5 @@
 // COLORS used throughout the web app
+$alpha90: 0.90;
 $transparent: #00000000;
 $translucent: rgba(0, 0, 0, 0.2);
 $translucent1: rgba(0, 0, 0, 0.1);
@@ -7,8 +8,15 @@ $translucent2: rgba(0, 0, 0, 0.2);
 $translucent3: rgba(0, 0, 0, 0.3);
 $translucent4: rgba(0, 0, 0, 0.4);
 $translucent5: rgba(0, 0, 0, 0.5);
+$translucent6: rgba(0, 0, 0, 0.6);
+$translucent7: rgba(0, 0, 0, 0.7);
+$translucent8: rgba(0, 0, 0, 0.8);
 $translucent1_white: rgba(255, 255, 255, 0.1);
+$translucent2_white: rgba(255, 255, 255, 0.2);
 $translucent3_white: rgba(255, 255, 255, 0.3);
+$translucent5_white: rgba(255, 255, 255, 0.5);
+$translucent8_white: rgba(255, 255, 255, 0.8);
+$translucent9_white: rgba(255, 255, 255, 0.9);
 $white: #fff;
 $off_white: #f4f4f4;
 $lighter_gray: #eee;
@@ -19,6 +27,7 @@ $medium_gray: #666;
 $placeholder_gray: #999;
 $dark_gray: #434343;
 $darker_gray: #182026;
+$dark_bg: hsl(135 30% 7% / 1);
 $black: #000;
 $off_black: #222;
 $light_blue: #cdf;
@@ -50,23 +59,40 @@ $red: #e66;
 $dark_red: #f00;
 $medium_dark_red: #c00;
 $darkest_red: #900;
-$panel_green: #35761b;
-$panel_light_green: #f3f9f1;
-$panel_yellow: #e99d18;
-$panel_light_yellow: #fffaf0;
-$panel_gray: #92a7b3;
-$panel_medium_light_gray: #e6e6e6;
-$panel_light_gray: #f9fbfc;
-$panel_blue: #026365;
-$panel_light_blue: #f0f8f8;
-$panel_navy: #334970;
-$panel_light_navy: #f3f5f9;
-$panel_brown: #9e630a;
-$panel_light_brown: #fbf7f0;
-$panel_teal: #1eb287;
-$panel_light_teal: #f1fcf9;
-$panel_red: #ff4f37;
-$panel_light_red: #fff7f6;
+$panel_green: rgb(53, 118, 27, $alpha90);
+$panel_light_green: rgb(243, 249, 241, $alpha90);
+$panel_yellow: rgb(233, 157, 24, $alpha90);
+$panel_light_yellow: rgb(255, 250, 240, $alpha90);
+$panel_gray: rgb(20, 92, 128, 0.3);
+$panel_medium_light_gray: rgb(230, 230, 230, $alpha90);
+$panel_light_gray: rgb(249, 251, 252, $alpha90);
+$panel_blue: rgb(2, 99, 101, $alpha90);
+$panel_light_blue: rgb(240, 248, 248, $alpha90);
+$panel_navy: rgb(51, 73, 112, $alpha90);
+$panel_light_navy: rgb(243, 245, 249, $alpha90);
+$panel_brown: rgb(158, 99, 10, $alpha90);
+$panel_light_brown: rgb(251, 247, 240, $alpha90);
+$panel_teal: rgb(30, 178, 135, $alpha90);
+$panel_light_teal: rgb(241, 252, 249, $alpha90);
+$panel_red: rgb(255, 79, 55, $alpha90);
+$panel_light_red: rgb(255, 247, 246, $alpha90);
+
+body:has(.app.light) {
+  --main-bg: #{$off_white};
+  --secondary-bg: #{$translucent1};
+  --text-color: #{$dark_gray};
+  --border-color: #{$translucent2};
+  --box-shadow: 0 0 5px 2px #{$translucent1};
+}
+
+body:has(.app.dark) {
+  --main-bg: #{$dark_bg};
+  --secondary-bg: #{$translucent1_white};
+  --text-color: #{$gray};
+  --border-color: #{$translucent3_white};
+  --box-shadow: 0 0 5px 2px #{$translucent1_white};
+}
+
 .dark-gray {
   background-color: $dark_gray !important;
 }
diff --git a/frontend/css/widget_move.scss b/frontend/css/widget_move.scss
deleted file mode 100644
index ed054772eb..0000000000
--- a/frontend/css/widget_move.scss
+++ /dev/null
@@ -1,206 +0,0 @@
-// MOVE AMOUNT (mm) selector
-.text-center {
-  text-align: center;
-  width: 100%;
-}
-
-.move-amount-wrapper {
-  box-shadow: 0px 0px 10px $light_gray;
-  height: 2.5rem;
-  border-radius: 7px;
-}
-
-.move-amount {
-  margin: 0;
-  background-color: $white;
-  border-right: 2px solid $off-white;
-  color: $medium_gray;
-  font-weight: bold;
-  height: 2.5rem;
-  padding-top: auto;
-  padding-bottom: auto;
-  padding-left: 0;
-  padding-right: 0;
-  text-align: center;
-  width: 20%;
-  float: left;
-  &:hover {
-    background-color: color.adjust($white, $lightness: -40%);
-    color: $off_white;
-  }
-  &:nth-child(n+2) {
-    border-left: 0;
-  }
-  &.leftmost {
-    border-bottom-left-radius: 7px;
-    border-top-left-radius: 7px;
-  }
-  &.rightmost {
-    border-bottom-right-radius: 7px;
-    border-top-right-radius: 7px;
-    border-right: 0px none;
-  }
-  &.move-amount-selected {
-    background-color: $medium_gray !important;
-    color: $off_white;
-  }
-}
-
-.no-radius {
-  border-radius: 0;
-}
-
-// JOG CONTROLS
-.jog-table {
-  margin: auto;
-  margin-top: 15px;
-  width: auto;
-  border: 0;
-  .bp5-popover-wrapper {
-    line-height: 0;
-  }
-  .fa-camera {
-    .bp5-popover-wrapper {
-      z-index: 1;
-      width: 4rem;
-      height: 4rem;
-      margin-top: -3rem;
-      margin-left: -1rem;
-      .bp5-popover-target {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-
-.in-progress {
-  background: $gray !important;
-  border-bottom-color: $medium_gray !important;
-}
-
-.progress-percent {
-  width: 3rem;
-  height: 3rem;
-  margin-top: -0.75rem;
-  margin-left: -0.75rem;
-  border-radius: 50%;
-  padding: 0.25rem;
-  p {
-    display: inline-block;
-    position: relative !important;
-    margin: auto !important;
-    color: $dark_gray !important;
-    background: $gray;
-    border-radius: 50%;
-    width: 100%;
-    height: 100%;
-    font-size: 0.7rem;
-    font-weight: bold;
-    line-height: 2.25rem;
-    vertical-align: middle;
-  }
-}
-
-.power-btn-popover {
-  label {
-    color: $off_white;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-    color: $off_white;
-  }
-  .bp5-popover-content {
-    width: 310px;
-    background: $dark_gray;
-  }
-  .bp5-popover-arrow-fill {
-    fill: $dark_gray;
-  }
-  .fa-anchor {
-    display: none;
-  }
-}
-
-.arrow-button {
-  position: relative;
-  margin: 0;
-  background-color: $medium_gray;
-  border-bottom: 2px solid $dark_gray;
-  color: $off_white;
-  font-size: 16px !important;
-  height: 40px;
-  padding: 12px;
-  text-align: center;
-  width: 40px;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 7px 0px;
-  &:hover {
-    background-color: color.adjust($medium_gray, $lightness: -5%);
-  }
-  &:disabled {
-    border-bottom: none;
-    box-shadow: none !important;
-  }
-  p {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    color: $white;
-    margin-top: -2px;
-    padding-left: 1px;
-    font-size: 0.9rem;
-  }
-  &:before {
-    position: relative;
-    z-index: 1;
-  }
-}
-
-.movement-progress {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 3px;
-  background: $medium_gray;
-}
-
-.camera-message,
-.movement-message {
-  .bp5-popover-content {
-    width: unset !important;
-  }
-}
-
-.home-button {
-  i {
-    margin-top: -1rem;
-    font-size: 2rem;
-  }
-  .fa-stack {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0.5rem;
-    padding: 0.5rem;
-    .fa-stack-1x {
-      top: -1rem;
-      left: -1rem;
-      margin-top: 0;
-      font-size: 1rem;
-    }
-    .fa-stack-2x {
-      margin-top: 0;
-      font-size: 2rem;
-    }
-  }
-}
-
-// ABSOLUTE MOVES
-input {
-  &.move-input {
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-  }
-}
diff --git a/frontend/curves/__tests__/chart_test.tsx b/frontend/curves/__tests__/chart_test.tsx
index 43bcaac850..50346286c0 100644
--- a/frontend/curves/__tests__/chart_test.tsx
+++ b/frontend/curves/__tests__/chart_test.tsx
@@ -2,13 +2,6 @@ jest.mock("../edit_curve", () => ({
   editCurve: jest.fn(),
 }));
 
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.curves(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 import { mount } from "enzyme";
 import React from "react";
 import { Actions } from "../../constants";
@@ -18,6 +11,7 @@ import { fakeCurve, fakePoint } from "../../__test_support__/fake_state/resource
 import { CurveIcon, CurveSvg, getWarningLinesContent } from "../chart";
 import { editCurve } from "../edit_curve";
 import { CurveIconProps, CurveSvgProps } from "../interfaces";
+import { Path } from "../../internal_urls";
 
 const TEST_DATA = { 1: 0, 10: 10, 50: 500, 100: 1000 };
 
@@ -217,7 +211,7 @@ describe("<CurveSvg />", () => {
   });
 
   it("shows warning lines: height in plants panels", () => {
-    mockPath = Path.mock(Path.cropSearch());
+    location.pathname = Path.mock(Path.cropSearch());
     const p = fakeProps();
     p.curve.body.type = "height";
     p.sourceFbosConfig = () => ({ value: 100, consistent: true });
diff --git a/frontend/curves/__tests__/curves_inventory_test.tsx b/frontend/curves/__tests__/curves_inventory_test.tsx
index 151a50d1b9..03e320cc94 100644
--- a/frontend/curves/__tests__/curves_inventory_test.tsx
+++ b/frontend/curves/__tests__/curves_inventory_test.tsx
@@ -8,7 +8,6 @@ import { mount } from "enzyme";
 import { RawCurves as Curves, mapStateToProps } from "../curves_inventory";
 import { fakeState } from "../../__test_support__/fake_state";
 import { fakeCurve } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { init, save } from "../../api/crud";
 import { SearchField } from "../../ui/search_field";
 import { Path } from "../../internal_urls";
@@ -54,9 +53,11 @@ describe("<Curves> />", () => {
     p.curves = [fakeCurve()];
     p.curves[0].body.id = 1;
     p.curvesPanelState.water = true;
-    const wrapper = mount(<Curves {...p} />);
+    const wrapper = mount<Curves>(<Curves {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     wrapper.find(".curve-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.curves(1));
+    expect(navigate).toHaveBeenCalledWith(Path.curves(1));
   });
 
   it("navigates to unsaved curve", () => {
@@ -64,9 +65,11 @@ describe("<Curves> />", () => {
     p.curves = [fakeCurve()];
     p.curves[0].body.id = 0;
     p.curvesPanelState.water = true;
-    const wrapper = mount(<Curves {...p} />);
+    const wrapper = mount<Curves>(<Curves {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     wrapper.find(".curve-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.curves(0));
+    expect(navigate).toHaveBeenCalledWith(Path.curves(0));
   });
 
   it("filters curves", () => {
@@ -97,13 +100,15 @@ describe("<Curves> />", () => {
     p.curves = [curve];
     p.dispatch = jest.fn(() => Promise.resolve());
     const wrapper = mount<Curves>(<Curves {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     await wrapper.instance().addNew("water")();
     expect(init).toHaveBeenCalledWith("Curve", {
       name: "Water curve 2", type: "water",
       data: { 1: 1, 30: 500, 45: 500, 60: 250 },
     });
     expect(save).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.curves(1));
+    expect(navigate).toHaveBeenCalledWith(Path.curves(1));
   });
 
   it("creates new curve: missing curve", async () => {
@@ -115,13 +120,15 @@ describe("<Curves> />", () => {
     p.curves = [curve];
     p.dispatch = jest.fn(() => Promise.resolve());
     const wrapper = mount<Curves>(<Curves {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     await wrapper.instance().addNew("water")();
     expect(init).toHaveBeenCalledWith("Curve", {
       name: "Water curve 2", type: "water",
       data: { 1: 1, 30: 500, 45: 500, 60: 250 },
     });
     expect(save).toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
   });
 
   it("creates new curve: spread", async () => {
@@ -132,13 +139,15 @@ describe("<Curves> />", () => {
     p.curves = [curve];
     p.dispatch = jest.fn(() => Promise.resolve());
     const wrapper = mount<Curves>(<Curves {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     await wrapper.instance().addNew("spread")();
     expect(init).toHaveBeenCalledWith("Curve", {
       name: "Spread curve 1", type: "spread",
       data: { 1: 1, 30: 300, 45: 300, 60: 150 },
     });
     expect(save).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.curves(1));
+    expect(navigate).toHaveBeenCalledWith(Path.curves(1));
   });
 
   it("handles curve creation error", async () => {
@@ -147,13 +156,15 @@ describe("<Curves> />", () => {
       .mockImplementationOnce(jest.fn())
       .mockImplementationOnce(() => Promise.reject());
     const wrapper = mount<Curves>(<Curves {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     await wrapper.instance().addNew("water")();
     expect(init).toHaveBeenCalledWith("Curve", {
       name: "Water curve 1", type: "water",
       data: { 1: 1, 30: 500, 45: 500, 60: 250 },
     });
     expect(save).toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
   });
 });
 
diff --git a/frontend/curves/__tests__/edit_curve_test.tsx b/frontend/curves/__tests__/edit_curve_test.tsx
index fc2afc0dc9..aeadd4c3a6 100644
--- a/frontend/curves/__tests__/edit_curve_test.tsx
+++ b/frontend/curves/__tests__/edit_curve_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.curves(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({
   overwrite: jest.fn(),
   init: jest.fn(() => ({ payload: { uuid: "uuid" } })),
@@ -31,14 +24,18 @@ import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
 import { destroy, overwrite, init, save } from "../../api/crud";
-import { push } from "../../history";
 import { mockDispatch } from "../../__test_support__/fake_dispatch";
 import { fakeBotSize } from "../../__test_support__/fake_bot_data";
 import { changeBlurableInput } from "../../__test_support__/helpers";
 import { error } from "../../toast/toast";
 import { SpecialStatus } from "farmbot";
+import { Path } from "../../internal_urls";
 
 describe("<EditCurve />", () => {
+  beforeEach(() => {
+    location.pathname = Path.mock(Path.curves(1));
+  });
+
   const fakeProps = (): EditCurveProps => ({
     dispatch: mockDispatch(),
     findCurve: () => undefined,
@@ -50,21 +47,20 @@ describe("<EditCurve />", () => {
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.curves("nope"));
+    location.pathname = Path.mock(Path.curves("nope"));
     const wrapper = mount(<EditCurve {...fakeProps()} />);
-    expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.curves());
+    expect(wrapper.text().toLowerCase()).toContain("redirecting");
+    expect(mockNavigate).toHaveBeenCalledWith(Path.curves());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const wrapper = mount(<EditCurve {...fakeProps()} />);
-    expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).not.toHaveBeenCalled();
+    expect(wrapper.text().toLowerCase()).toContain("redirecting");
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("renders", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => fakeCurve();
     const wrapper = mount(<EditCurve {...p} />);
@@ -74,7 +70,6 @@ describe("<EditCurve />", () => {
   });
 
   it("renders: data full", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.data = {
@@ -152,7 +147,6 @@ describe("<EditCurve />", () => {
   });
 
   it("toggles state", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => fakeCurve();
     const wrapper = mount<EditCurve>(<EditCurve {...p} />);
@@ -162,7 +156,6 @@ describe("<EditCurve />", () => {
   });
 
   it("sets hovered state", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => fakeCurve();
     const wrapper = mount<EditCurve>(<EditCurve {...p} />);
@@ -172,7 +165,6 @@ describe("<EditCurve />", () => {
   });
 
   it("sets maxCount state high", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => fakeCurve();
     const wrapper = mount<EditCurve>(<EditCurve {...p} />);
@@ -182,7 +174,6 @@ describe("<EditCurve />", () => {
   });
 
   it("sets maxCount state low", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => fakeCurve();
     const wrapper = mount<EditCurve>(<EditCurve {...p} />);
@@ -193,7 +184,6 @@ describe("<EditCurve />", () => {
   });
 
   it("sets iconDisplay state", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => fakeCurve();
     const wrapper = mount<EditCurve>(<EditCurve {...p} />);
@@ -203,7 +193,6 @@ describe("<EditCurve />", () => {
   });
 
   it("renders no icons", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     p.findCurve = () => undefined;
     const wrapper = mount<EditCurve>(<EditCurve {...p} />);
@@ -212,7 +201,6 @@ describe("<EditCurve />", () => {
   });
 
   it("renders icons", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.id = 1;
@@ -231,7 +219,6 @@ describe("<EditCurve />", () => {
   });
 
   it("hides icons", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.id = 1;
@@ -247,7 +234,6 @@ describe("<EditCurve />", () => {
   });
 
   it("deletes curve", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     p.findCurve = () => curve;
@@ -257,7 +243,6 @@ describe("<EditCurve />", () => {
   });
 
   it("handles curve in use", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     p.findCurve = () => curve;
@@ -269,7 +254,6 @@ describe("<EditCurve />", () => {
   });
 
   it("renders spread", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.type = "spread";
@@ -280,7 +264,6 @@ describe("<EditCurve />", () => {
   });
 
   it("renders height", () => {
-    mockPath = Path.mock(Path.curves(1));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.type = "height";
@@ -297,23 +280,28 @@ describe("copyCurve()", () => {
     existingCurve.body.name = "Fake copy 1";
     const curves = [existingCurve];
     const curve = fakeCurve();
-    await copyCurve(curves, curve)(jest.fn(() => Promise.resolve()), jest.fn())();
+    const navigate = jest.fn();
+    await copyCurve(curves, curve, navigate)(
+      jest.fn(() => Promise.resolve()),
+      jest.fn(),
+    )();
     expect(init).toHaveBeenCalledWith("Curve", {
       ...curve.body,
       name: "Fake copy 2",
       id: undefined,
     });
     expect(save).toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
   });
 
   it("handles promise rejection", async () => {
     const dispatch = jest.fn()
       .mockImplementationOnce(jest.fn())
       .mockImplementationOnce(() => Promise.reject());
-    await copyCurve([], fakeCurve())(dispatch, jest.fn())();
+    const navigate = jest.fn();
+    await copyCurve([], fakeCurve(), navigate)(dispatch, jest.fn())();
     expect(save).toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
   });
 
   it("copies curve and navigates", async () => {
@@ -325,14 +313,18 @@ describe("copyCurve()", () => {
     curve.body.id = 1;
     const state = fakeState();
     state.resources = buildResourceIndex([curve]);
-    await copyCurve(curves, curve)(jest.fn(() => Promise.resolve()), () => state)();
+    const navigate = jest.fn();
+    await copyCurve(curves, curve, navigate)(
+      jest.fn(() => Promise.resolve()),
+      () => state,
+    )();
     expect(init).toHaveBeenCalledWith("Curve", {
       ...curve.body,
       name: "Fake copy 2",
       id: undefined,
     });
     expect(save).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.curves(1));
+    expect(navigate).toHaveBeenCalledWith(Path.curves(1));
   });
 
   it("copies curve and doesn't navigate", async () => {
@@ -344,14 +336,18 @@ describe("copyCurve()", () => {
     curve.body.id = 1;
     const state = fakeState();
     state.resources = buildResourceIndex([curve]);
-    await copyCurve(curves, curve)(jest.fn(() => Promise.resolve()), () => state)();
+    const navigate = jest.fn();
+    await copyCurve(curves, curve, navigate)(
+      jest.fn(() => Promise.resolve()),
+      () => state,
+    )();
     expect(init).toHaveBeenCalledWith("Curve", {
       ...curve.body,
       name: "Fake copy 2",
       id: undefined,
     });
     expect(save).toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
   });
 });
 
diff --git a/frontend/curves/chart.tsx b/frontend/curves/chart.tsx
index 0e553f5a81..6708c30526 100644
--- a/frontend/curves/chart.tsx
+++ b/frontend/curves/chart.tsx
@@ -146,7 +146,7 @@ const Data = (props: DataProps) => {
         stroke={last || showHoverEffect(day) ? curveColor(curve) : "none"}
         strokeWidth={0.5} strokeDasharray={last ? 0.5 : undefined}
         x={x(fullWidth * 0.75)} y={y}
-        fill={last ? Color.white : undefined}
+        fill={last ? "transparent" : undefined}
         width={fullWidth * 0.75} height={height} />
       <rect id={"hover-bar"}
         onMouseEnter={() => {
@@ -269,16 +269,16 @@ const XAxis = (props: XAxisProps) => {
   const step = maxDay(data) > 100 ? 20 : 10;
   const dayLabels = [1].concat(range(step, lastLabel + 1, step));
   return <g id={"x-axis"}>
-    <g id={"day-labels"} fontSize={5} textAnchor={"middle"} fill={Color.darkGray}>
+    <g id={"day-labels"} fontSize={5} textAnchor={"middle"}>
       {dayLabels.map(day =>
         <text key={day} x={normX(day)} y={yZero + 6}>{day}</text>)}
     </g>
     <line id={"y-axis-vertical-line"}
-      stroke={Color.darkGray} opacity={0.1} strokeWidth={0.3}
+      stroke={Color.gray} opacity={0.1} strokeWidth={0.3}
       x1={0} y1={yZero} x2={0} y2={yMax} />
     <text id={"x-axis-label"}
       fontSize={5} textAnchor={"middle"}
-      fill={Color.darkGray} fontWeight={"bold"}
+      fontWeight={"bold"}
       x={xMax / 2} y={yZero + 14}>
       {t("DAY")}
     </text>
@@ -296,19 +296,19 @@ const YAxis = (props: YAxisProps) => {
         const y = normY(value);
         return <g id={"" + value} key={value}>
           {y > -1 &&
-            <text fontSize={5} textAnchor={"end"} fill={Color.darkGray}
+            <text fontSize={5} textAnchor={"end"}
               x={-2} y={y + 1.5}>
               {value}
             </text>}
           <line className={"y-axis-line"}
-            stroke={Color.darkGray} opacity={0.1} strokeWidth={0.3}
+            stroke={Color.gray} opacity={0.1} strokeWidth={0.3}
             x1={0} y1={y} x2={xMax} y2={y} />
         </g>;
       })}
     </g>
     <text id={"y-axis-label"}
       fontSize={5} textAnchor={"end"}
-      fill={Color.darkGray} fontWeight={"bold"}
+      fontWeight={"bold"}
       x={0} y={-5}>
       {props.curve.body.type == CurveType.water ? t("mL") : t("mm")}
     </text>
diff --git a/frontend/curves/curves_inventory.tsx b/frontend/curves/curves_inventory.tsx
index 467d80dbc5..fe307a5151 100644
--- a/frontend/curves/curves_inventory.tsx
+++ b/frontend/curves/curves_inventory.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { CurvesPanelState, Everything } from "../interfaces";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui/empty_state_wrapper";
@@ -11,7 +11,6 @@ import {
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
 import { selectAllCurves } from "../resources/selectors";
-import { push } from "../history";
 import { init, save } from "../api/crud";
 import { SearchField } from "../ui/search_field";
 import { Path } from "../internal_urls";
@@ -25,6 +24,7 @@ import {
 } from "./templates";
 import { Curve } from "farmbot/dist/resources/api_resources";
 import { CurveIcon } from "./chart";
+import { NavigationContext } from "../routes_helpers";
 
 export const mapStateToProps = (props: Everything): CurvesProps => ({
   dispatch: props.dispatch,
@@ -46,7 +46,13 @@ export class RawCurves extends React.Component<CurvesProps, CurvesState> {
       type: Actions.TOGGLE_CURVES_PANEL_OPTION, payload: section,
     });
 
-  navigate = (id: number) => push(Path.curves(id));
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
+  navigateById = (id: number) => {
+    this.navigate(Path.curves(id));
+  };
 
   addNew = (type: Curve["type"]) => () => {
     let num = 1;
@@ -68,7 +74,7 @@ export class RawCurves extends React.Component<CurvesProps, CurvesState> {
       .then(() => {
         const id = this.props.curves.filter(curve =>
           curve.uuid == action.payload.uuid)[0]?.body.id;
-        id && this.navigate(id);
+        id && this.navigateById(id);
       })
       .catch(() => { });
   };
@@ -77,7 +83,7 @@ export class RawCurves extends React.Component<CurvesProps, CurvesState> {
     <CurveInventoryItem
       key={curve.uuid}
       curve={curve}
-      onClick={() => this.navigate(curve.body.id || 0)} />;
+      onClick={() => this.navigateById(curve.body.id || 0)} />;
 
   render() {
     const { curves } = this.props;
@@ -91,7 +97,6 @@ export class RawCurves extends React.Component<CurvesProps, CurvesState> {
     const heightCurves = filteredCurves
       .filter(curve => curve.body.type == CurveType.height);
     return <DesignerPanel panelName={"curves-inventory"} panel={Panel.Curves}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Curves}>
         <SearchField nameKey={"curves"}
           searchTerm={this.state.searchTerm}
@@ -147,6 +152,8 @@ export class RawCurves extends React.Component<CurvesProps, CurvesState> {
 }
 
 export const Curves = connect(mapStateToProps)(RawCurves);
+// eslint-disable-next-line import/no-default-export
+export default Curves;
 
 const CurveInventoryItem = (props: CurveInventoryItemProps) => {
   return <div
diff --git a/frontend/curves/edit_curve.tsx b/frontend/curves/edit_curve.tsx
index 572832a5fa..0283949283 100644
--- a/frontend/curves/edit_curve.tsx
+++ b/frontend/curves/edit_curve.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import { t } from "../i18next_wrapper";
 import { connect } from "react-redux";
-import { push } from "../history";
 import { SpecialStatus, TaggedCurve } from "farmbot";
 import { round, take } from "lodash";
 import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { Everything } from "../interfaces";
-import { Panel } from "../farm_designer/panel_header";
+import { Panel, PanelColor } from "../farm_designer/panel_header";
 import { selectAllCurves, selectAllPlantPointers } from "../resources/selectors";
 import { destroy, init, overwrite, save } from "../api/crud";
 import { Path } from "../internal_urls";
@@ -26,8 +25,7 @@ import {
   ValueInputProps,
 } from "./interfaces";
 import {
-  curveColor,
-  curvePanelColor, CurveShape, CurveType, CURVE_SHAPE_DDIS, CURVE_TEMPLATES,
+  curveColor, CurveShape, CurveType, CURVE_SHAPE_DDIS, CURVE_TEMPLATES,
   TemplateOption, templateScale, templateShape,
 } from "./templates";
 import { sourceFbosConfigValue } from "../settings/source_config_value";
@@ -42,6 +40,8 @@ import {
   calcMaxCount, MoreIndicatorIcon,
 } from "../point_groups/criteria/component";
 import { GetState } from "../redux/interfaces";
+import { Navigate, NavigateFunction } from "react-router";
+import { NavigationContext } from "../routes_helpers";
 
 const columnTitle = (curve: TaggedCurve) => {
   switch (curve.body.type) {
@@ -129,16 +129,20 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
     </div>;
   };
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   render() {
     const { curve, setHovered } = this;
     const { dispatch } = this.props;
     const { hovered } = this.state;
     const curvesPath = Path.curves();
-    !curve && Path.startsWith(curvesPath) && push(curvesPath);
     return <DesignerPanel panelName={"curve-info"} panel={Panel.Curves}>
+      {!curve && Path.startsWith(curvesPath) && <Navigate to={curvesPath} />}
       <DesignerPanelHeader
         panelName={Panel.Curves}
-        style={{ background: curvePanelColor(curve) }}
+        panelColor={PanelColor.gray}
         titleElement={<ResourceTitle
           key={curve?.body.name}
           resource={curve}
@@ -148,11 +152,14 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
         backTo={curvesPath}>
         <div className={"panel-header-icon-group"}>
           {curve &&
-            <i className={"fa fa-copy fb-icon-button"}
+            <i className={"fa fa-copy fb-icon-button invert"}
               title={t("Copy curve")}
-              onClick={dispatch(copyCurve(this.props.curves, curve))} />}
+              onClick={dispatch(copyCurve(
+                this.props.curves,
+                curve,
+                this.navigate))} />}
           {curve &&
-            <i className={"fa fa-trash fb-icon-button"}
+            <i className={"fa fa-trash fb-icon-button invert"}
               title={t("Delete curve")}
               onClick={() => this.props.resourceUsage[curve.uuid]
                 ? error(t("Curve in use."))
@@ -165,7 +172,7 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
             <Popover
               isOpen={this.state.scale}
               popoverClassName={"curve-action-popover"}
-              target={<button className={"transparent-button"}
+              target={<button className={"fb-button clear"}
                 onClick={this.toggle("scale")}>
                 {t("scale")}
               </button>}
@@ -174,7 +181,7 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
             <Popover
               isOpen={this.state.templates}
               popoverClassName={"curve-action-popover"}
-              target={<button className={"transparent-button"}
+              target={<button className={"fb-button clear"}
                 onClick={this.toggle("templates")}>
                 {t("templates")}
               </button>}
@@ -214,13 +221,15 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
 }
 
 export const EditCurve = connect(mapStateToProps)(RawEditCurve);
+// eslint-disable-next-line import/no-default-export
+export default EditCurve;
 
 export const ScaleMenu = (props: ActionMenuProps) => {
   const { data } = props.curve.body;
   const [maxDayNum, setMaxDay] = React.useState(maxDay(data));
   const [maxValueNum, setMaxValue] = React.useState(maxValue(data));
-  return <div className={"curve-action-menu"}>
-    <div className={"curve-menu-row"}>
+  return <div className={"curve-action-menu grid half-gap"}>
+    <div className={"row grid-2-col"}>
       <label>{t("max value")}</label>
       <input type={"number"}
         defaultValue={maxValueNum}
@@ -229,7 +238,7 @@ export const ScaleMenu = (props: ActionMenuProps) => {
           isFinite(value) && value > 0 && setMaxValue(value);
         }} />
     </div>
-    <div className={"curve-menu-row"}>
+    <div className={"row grid-2-col"}>
       <label>{t("days")}</label>
       <input type={"number"}
         defaultValue={maxDayNum}
@@ -239,8 +248,9 @@ export const ScaleMenu = (props: ActionMenuProps) => {
           isFinite(day) && day > 0 && day < 201 && setMaxDay(day);
         }} />
     </div>
-    <div className={"curve-menu-row last"}>
-      <button className={"transparent-button light"}
+    <div className={"row grid-2-col"}>
+      <div />
+      <button className={"fb-button clear"}
         onClick={() => {
           props.dispatch(editCurve(props.curve, {
             data: scaleData(props.curve.body.data, maxDayNum, maxValueNum)
@@ -274,15 +284,15 @@ export const TemplatesMenu = (props: ActionMenuProps) => {
     setMaxValueState(value);
     setMaxValueCache(value);
   };
-  return <div className={"curve-action-menu"}>
-    <div className={"curve-menu-row"}>
+  return <div className={"curve-action-menu grid half-gap"}>
+    <div className={"row grid-2-col"}>
       <label>{t("shape")}</label>
       <FBSelect key={shape}
         list={Object.values(CURVE_SHAPE_DDIS())}
         selectedItem={CURVE_SHAPE_DDIS()[shape]}
         onChange={ddi => setShape("" + ddi.value)} />
     </div>
-    <div className={"curve-menu-row"}>
+    <div className={"row grid-2-col"}>
       <label>{t("max value")}</label>
       <input type={"number"}
         defaultValue={maxValue}
@@ -291,7 +301,7 @@ export const TemplatesMenu = (props: ActionMenuProps) => {
           isFinite(value) && value > 0 && setMaxValue(value);
         }} />
     </div>
-    <div className={"curve-menu-row"}>
+    <div className={"row grid-2-col"}>
       <label>{t("days")}</label>
       <input type={"number"}
         defaultValue={maxDay}
@@ -301,8 +311,9 @@ export const TemplatesMenu = (props: ActionMenuProps) => {
           isFinite(day) && day > 0 && day < 201 && setMaxDay(day);
         }} />
     </div>
-    <div className={"curve-menu-row last"}>
-      <button className={"transparent-button light"}
+    <div className={"row grid-2-col"}>
+      <div />
+      <button className={"fb-button clear"}
         onClick={() => {
           props.dispatch(editCurve(props.curve, {
             data: scaleData(CURVE_TEMPLATES[shape], maxDay, maxValue,
@@ -317,9 +328,9 @@ export const TemplatesMenu = (props: ActionMenuProps) => {
 };
 
 export const copyCurve =
-  (curves: TaggedCurve[], curve: TaggedCurve) =>
-    (dispatch: Function, getState: GetState) =>
-      () => {
+  (curves: TaggedCurve[], curve: TaggedCurve, navigate: NavigateFunction) =>
+    (dispatch: Function, getState: GetState) => {
+      return () => {
         const existingNames = curves.map(c => c.body.name);
         let i = 1;
         const newName = (count: number) =>
@@ -337,10 +348,11 @@ export const copyCurve =
           .then(() => {
             const id = selectAllCurves(getState().resources.index).filter(curve =>
               curve.uuid == action.payload.uuid)[0]?.body.id;
-            id && push(Path.curves(id));
+            id && navigate(Path.curves(id));
           })
           .catch(() => { });
       };
+    };
 
 export const curveDataTableRow = (props: CurveDataTableRowProps) =>
   ([day, value]: [string, number], index: number) => {
diff --git a/frontend/curves/templates.tsx b/frontend/curves/templates.tsx
index 88537f21f2..3ed8241038 100644
--- a/frontend/curves/templates.tsx
+++ b/frontend/curves/templates.tsx
@@ -2,7 +2,6 @@ import { t } from "i18next";
 import { Color, DropDownItem } from "../ui";
 import { Curve } from "farmbot/dist/resources/api_resources";
 import { TaggedCurve } from "farmbot";
-import { PanelColor } from "../farm_designer/panel_header";
 
 export enum CurveType {
   water = "water",
@@ -10,12 +9,11 @@ export enum CurveType {
   height = "height",
 }
 
-export const curvePanelColor = (curve: TaggedCurve | undefined) => {
-  switch (curve?.body.type) {
+export const curvePanelColor = (curve: TaggedCurve) => {
+  switch (curve.body.type) {
     case CurveType.water: return Color.curveBlue;
     case CurveType.spread: return Color.curveGreen;
     case CurveType.height: return Color.curvePurple;
-    default: return PanelColor.lightGray;
   }
 };
 
diff --git a/frontend/devices/__tests__/actions_test.ts b/frontend/devices/__tests__/actions_test.ts
index ede05d510a..c052270f98 100644
--- a/frontend/devices/__tests__/actions_test.ts
+++ b/frontend/devices/__tests__/actions_test.ts
@@ -30,10 +30,6 @@ jest.mock("../../api/crud", () => ({
   save: jest.fn(),
 }));
 
-jest.mock("../../settings/maybe_highlight", () => ({
-  goToFbosSettings: jest.fn(),
-}));
-
 let mockGet: Promise<{}> = Promise.resolve({});
 jest.mock("axios", () => ({ get: jest.fn(() => mockGet) }));
 
@@ -57,7 +53,7 @@ import { success, error, warning, info } from "../../toast/toast";
 import { edit, save } from "../../api/crud";
 import { DeepPartial } from "../../redux/interfaces";
 import { Farmbot } from "farmbot";
-import { goToFbosSettings } from "../../settings/maybe_highlight";
+import { Path } from "../../internal_urls";
 
 const replaceDeviceWith = async (d: DeepPartial<Farmbot>, cb: Function) => {
   jest.clearAllMocks();
@@ -697,12 +693,12 @@ describe("updateConfig()", () => {
   });
 });
 
-const expectBadVersionCall = () => {
-  expect(goToFbosSettings).toHaveBeenCalled();
+const expectBadVersionCall = (noDismiss = true) => {
   expect(error).toHaveBeenCalledWith(expect.stringContaining("old version"), {
     title: "Please Update",
     noTimer: true,
-    noDismiss: true,
+    redirect: Path.settings("farmbot_os"),
+    noDismiss,
     idPrefix: "EOL",
   });
 };
@@ -715,12 +711,6 @@ describe("badVersion()", () => {
 
   it("warns of old FBOS version: dismiss-able", () => {
     actions.badVersion({ noDismiss: false });
-    expect(goToFbosSettings).toHaveBeenCalled();
-    expect(error).toHaveBeenCalledWith(expect.stringContaining("old version"), {
-      title: "Please Update",
-      noTimer: true,
-      noDismiss: false,
-      idPrefix: "EOL",
-    });
+    expectBadVersionCall(false);
   });
 });
diff --git a/frontend/devices/actions.ts b/frontend/devices/actions.ts
index 180ea48ab8..ed5aa3cb34 100644
--- a/frontend/devices/actions.ts
+++ b/frontend/devices/actions.ts
@@ -20,7 +20,7 @@ import {
   RpcRequestBodyItem,
 } from "farmbot";
 import { oneOf, versionOK, trim } from "../util";
-import { Actions, Content } from "../constants";
+import { Actions, Content, DeviceSetting } from "../constants";
 import { mcuParamValidator } from "./update_interceptor";
 import { edit, save as apiSave } from "../api/crud";
 import { CONFIG_DEFAULTS } from "farmbot/dist/config";
@@ -31,10 +31,10 @@ import { getFirmwareConfig, getFbosConfig } from "../resources/getters";
 import { isObject, isString, get, noop } from "lodash";
 import { t } from "../i18next_wrapper";
 import { ExternalUrl } from "../external_urls";
-import { goToFbosSettings } from "../settings/maybe_highlight";
 import { ToastOptions } from "../toast/interfaces";
 import { forceOnline } from "./must_be_online";
 import { store } from "../redux/store";
+import { linkToSetting } from "../settings/maybe_highlight";
 
 const ON = 1, OFF = 0;
 export type ConfigKey = keyof McuParams;
@@ -504,11 +504,11 @@ export function changeStepSize(integer: number) {
 }
 
 export function badVersion(options: ToastOptions = { noDismiss: true }) {
-  goToFbosSettings();
   error(t(Content.OLD_FBOS_UNSUPPORTED), {
     title: t("Please Update"),
     noTimer: true,
     idPrefix: "EOL",
+    redirect: linkToSetting(DeviceSetting.farmbotOS),
     ...options,
   });
 }
diff --git a/frontend/devices/connectivity/__tests__/connectivity_test.tsx b/frontend/devices/connectivity/__tests__/connectivity_test.tsx
index 3412de8ff9..65b1ebe2c3 100644
--- a/frontend/devices/connectivity/__tests__/connectivity_test.tsx
+++ b/frontend/devices/connectivity/__tests__/connectivity_test.tsx
@@ -167,7 +167,7 @@ describe("<Connectivity />", () => {
     Object.keys(p.flags).map((key: ConnectionName) => p.flags[key] = true);
     p.flags.botFirmware = false;
     const wrapper = mount(<Connectivity {...p} />);
-    expect(wrapper.find(".fix-firmware-buttons").length).toEqual(1);
+    expect(wrapper.find(".fix-firmware-buttons").length).toBeGreaterThan(0);
     clickButton(wrapper, 1, "restart firmware");
   });
 
diff --git a/frontend/devices/connectivity/__tests__/diagnosis_test.tsx b/frontend/devices/connectivity/__tests__/diagnosis_test.tsx
index aca862c431..5c4bbfb889 100644
--- a/frontend/devices/connectivity/__tests__/diagnosis_test.tsx
+++ b/frontend/devices/connectivity/__tests__/diagnosis_test.tsx
@@ -5,6 +5,8 @@ import {
 } from "../diagnosis";
 import { DiagnosticMessages } from "../../../constants";
 import { mount } from "enzyme";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Path } from "../../../internal_urls";
 
 describe("<Diagnosis/>", () => {
   const fakeProps = (): DiagnosisProps => ({
@@ -29,6 +31,13 @@ describe("<Diagnosis/>", () => {
     const el = mount(<Diagnosis {...p} />);
     expect(el.find(".saucer").hasClass("red")).toBeTruthy();
   });
+
+  it("navigates on click", () => {
+    render(<Diagnosis {...fakeProps()} />);
+    const link = screen.getByText("upgrade FarmBot OS");
+    fireEvent.click(link);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.settings("farmbot_os"));
+  });
 });
 
 describe("<DiagnosisSaucer />", () => {
diff --git a/frontend/devices/connectivity/__tests__/diagram_test.tsx b/frontend/devices/connectivity/__tests__/diagram_test.tsx
index 93a65e061a..e371537503 100644
--- a/frontend/devices/connectivity/__tests__/diagram_test.tsx
+++ b/frontend/devices/connectivity/__tests__/diagram_test.tsx
@@ -147,7 +147,7 @@ describe("<Connector/>", () => {
     expect(lines.length).toEqual(3);
     expect(lines.at(0).props())
       .toEqual({
-        id: "connector-border", stroke: Color.white, strokeWidth: 9,
+        id: "connector-border", stroke: Color.darkGray, strokeWidth: 9,
         x1: -25, x2: -50, y1: -55, y2: -20
       });
     expect(lines.at(1).props())
diff --git a/frontend/devices/connectivity/__tests__/fbos_metric_history_table_test.tsx b/frontend/devices/connectivity/__tests__/fbos_metric_history_table_test.tsx
index df3f10c38d..58a28b89ad 100644
--- a/frontend/devices/connectivity/__tests__/fbos_metric_history_table_test.tsx
+++ b/frontend/devices/connectivity/__tests__/fbos_metric_history_table_test.tsx
@@ -59,7 +59,7 @@ describe("<FbosMetricHistoryTable />", () => {
     expect(wrapper.instance().state.hoveredMetric).toEqual("wifi_level_percent");
     wrapper.update();
     const backgroundAfter = wrapper.find("th").last().props().style?.background;
-    expect(backgroundAfter).toEqual("#eee");
+    expect(backgroundAfter).toEqual("rgba(255,255,255,0.2)");
   });
 
   it("sets time hover state", () => {
@@ -73,6 +73,6 @@ describe("<FbosMetricHistoryTable />", () => {
     expect(wrapper.instance().state.hoveredTime).toEqual(2);
     wrapper.update();
     const backgroundAfter = wrapper.find("td").first().props().style?.background;
-    expect(backgroundAfter).toEqual("#eee");
+    expect(backgroundAfter).toEqual("rgba(255,255,255,0.2)");
   });
 });
diff --git a/frontend/devices/connectivity/connectivity.tsx b/frontend/devices/connectivity/connectivity.tsx
index c03c00de6b..99fed2dba9 100644
--- a/frontend/devices/connectivity/connectivity.tsx
+++ b/frontend/devices/connectivity/connectivity.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { BotState } from "../interfaces";
 import { Diagnosis, ConnectionStatusFlags, getDiagnosisCode } from "./diagnosis";
 import { ConnectivityRow, StatusRowProps } from "./connectivity_row";
-import { Row, Col, docLinkClick, Saucer } from "../../ui";
+import { Row, docLinkClick, Saucer } from "../../ui";
 import { ConnectivityDiagram } from "./diagram";
 import {
   ChipTemperatureDisplay, WiFiStrengthDisplay, VoltageDisplay,
@@ -75,7 +75,7 @@ export class Connectivity
     } = informational_settings;
     const { id, fbos_version } = this.props.device.body;
     return <div className={"realtime-wrapper"}>
-      <Col md={12} lg={4} className={"connectivity-left-column"}>
+      <div className={"connectivity-left-column"}>
         <ConnectivityDiagram
           rowData={this.props.rowData}
           hover={this.hover}
@@ -98,8 +98,8 @@ export class Connectivity
           <p><b>{t("Connectivity code")}: </b>{
             getDiagnosisCode(this.props.flags)}</p>
         </div>
-      </Col>
-      <Col md={12} lg={8} className={"connectivity-right-column"}>
+      </div>
+      <div className={"connectivity-right-column"}>
         <ConnectivityRow from={t("from")} to={t("to")} header={true} />
         {this.props.rowData
           .map((statusRowProps, index) =>
@@ -109,29 +109,24 @@ export class Connectivity
                 : undefined}
               hover={this.hover}
               hoveredConnection={this.state.hoveredConnection} />)}
-        <hr style={{ marginLeft: "3rem" }} />
         <Diagnosis statusFlags={this.props.flags} />
         {this.props.flags.userAPI && this.props.flags.userMQTT
           && this.props.flags.botAPI && this.props.flags.botMQTT
           && this.props.apiFirmwareValue
           && !this.props.flags.botFirmware &&
-          <div className={"fix-firmware-buttons"}>
-            <Col xs={6}>
-              <FlashFirmwareBtn
-                apiFirmwareValue={this.props.apiFirmwareValue}
-                botOnline={true} />
-            </Col>
-            <Col xs={6}>
-              <button
-                className={"fb-button yellow"}
-                type={"button"}
-                onClick={() => { restartFirmware(); }}
-                title={t("restart firmware")}>
-                {t("restart firmware")}
-              </button>
-            </Col>
-          </div>}
-      </Col>
+          <Row className={"fix-firmware-buttons"}>
+            <FlashFirmwareBtn
+              apiFirmwareValue={this.props.apiFirmwareValue}
+              botOnline={true} />
+            <button
+              className={"fb-button yellow"}
+              type={"button"}
+              onClick={() => { restartFirmware(); }}
+              title={t("restart firmware")}>
+              {t("restart firmware")}
+            </button>
+          </Row>}
+      </div>
     </div>;
   };
 
@@ -142,42 +137,38 @@ export class Connectivity
       wifi_level, wifi_level_percent, private_ip, node_name, target,
     } = informational_settings;
     const wifi = isWifi(wifi_level, wifi_level_percent);
-    return <div className={"realtime-wrapper"}>
-      <Col md={12} lg={4} lgOffset={2} className={"connectivity-left-column"}>
-        <div className="fbos-info">
-          <label>{t("FarmBot Connection")}</label>
-          <p><b>{t("Connection type")}: </b>{wifi ? "WiFi" : t("Unknown")}</p>
-          <WiFiStrengthDisplay wifiStrength={wifi_level}
-            wifiStrengthPercent={wifi_level_percent} />
-          <MacAddress nodeName={node_name} target={target} wifi={wifi} />
-          <LocalIpAddress address={private_ip} />
-        </div>
-        <QosPanel pings={this.props.pings} dispatch={this.props.dispatch} />
-      </Col>
-      <Col md={12} lg={4} className={"connectivity-right-column"}>
-        <div className="port-info">
-          <label>{t("Ports")}</label>
-          <i>{isMobile() ? t("This phone") : t("This computer")}</i>
-          <PortRow port={"80 - HTTP"} status={flags["userAPI"]} />
-          <PortRow port={"443 - HTTPS"} status={flags["userAPI"]} />
-          <PortRow port={"3002 - WebSockets"} status={flags["userMQTT"]} />
-          <i style={{ marginTop: "1rem" }}>{t("FarmBot")}</i>
-          <PortRow port={"80 - HTTP"} status={flags["botAPI"]} />
-          <PortRow port={"443 - HTTPS"} status={flags["botAPI"]} />
-          <PortRow port={"8883 - MQTT"} status={flags["botMQTT"]} />
-          <a onClick={docLinkClick("for-it-security-professionals")}>
-            <i className="fa fa-external-link" />
-            {t("Learn more about ports")}
-          </a>
-        </div>
-      </Col>
+    return <div className={"network-wrapper grid-3-col"}>
+      <div className="fbos-info">
+        <label>{t("FarmBot Connection")}</label>
+        <p><b>{t("Connection type")}: </b>{wifi ? "WiFi" : t("Unknown")}</p>
+        <WiFiStrengthDisplay wifiStrength={wifi_level}
+          wifiStrengthPercent={wifi_level_percent} />
+        <MacAddress nodeName={node_name} target={target} wifi={wifi} />
+        <LocalIpAddress address={private_ip} />
+      </div>
+      <QosPanel pings={this.props.pings} dispatch={this.props.dispatch} />
+      <div className="port-info">
+        <label>{t("Ports")}</label>
+        <i>{isMobile() ? t("This phone") : t("This computer")}</i>
+        <PortRow port={"80 - HTTP"} status={flags["userAPI"]} />
+        <PortRow port={"443 - HTTPS"} status={flags["userAPI"]} />
+        <PortRow port={"3002 - WebSockets"} status={flags["userMQTT"]} />
+        <i style={{ marginTop: "1rem" }}>{t("FarmBot")}</i>
+        <PortRow port={"80 - HTTP"} status={flags["botAPI"]} />
+        <PortRow port={"443 - HTTPS"} status={flags["botAPI"]} />
+        <PortRow port={"8883 - MQTT"} status={flags["botMQTT"]} />
+        <a onClick={docLinkClick("for-it-security-professionals")}>
+          <i className="fa fa-external-link" />
+          {t("Learn more about ports")}
+        </a>
+      </div>
     </div>;
   };
 
   render() {
     const { realtime, network, history } = this.props.metricPanelState;
     return <div className="connectivity">
-      <Row className={"connectivity-content"}>
+      <div className={"connectivity-content"}>
         <div className={"tabs"}>
           <label className={realtime ? "selected" : ""}
             onClick={this.setPanelState("realtime")}>{t("realtime")}</label>
@@ -190,7 +181,7 @@ export class Connectivity
         {network && <this.Network />}
         {history && <FbosMetricHistoryTable telemetry={this.props.telemetry}
           timeSettings={this.props.timeSettings} />}
-      </Row>
+      </div>
       {firmwareAlerts(this.props.alerts).length > 0 &&
         <Row>
           <FirmwareAlerts
diff --git a/frontend/devices/connectivity/connectivity_row.tsx b/frontend/devices/connectivity/connectivity_row.tsx
index 6118941d77..960b9be5c4 100644
--- a/frontend/devices/connectivity/connectivity_row.tsx
+++ b/frontend/devices/connectivity/connectivity_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { syncText } from "../../nav/sync_text";
 import { SyncStatus } from "farmbot";
@@ -11,7 +11,7 @@ export interface StatusRowProps {
   from: string;
   to: string;
   header?: boolean;
-  connectionMsg?: React.ReactChild;
+  connectionMsg?: React.ReactNode;
   connectionName?: string;
   hover?: Function;
   hoveredConnection?: string | undefined;
@@ -60,31 +60,23 @@ export function ConnectivityRow(props: StatusRowProps) {
     ? t("This phone")
     : t("This computer");
 
-  return <Row>
-    <Col xs={1}>
-      <div className={className}
-        title={syncStatus ? syncText(syncStatus) : getTitle(props.header)}
-        onMouseEnter={hoverOver(connectionName)}
-        onMouseLeave={hoverOver(undefined)}>
-        {!props.header && <i className={`fa ${iconClass}`} />}
-      </div>
-      {!props.header &&
-        <div className={`saucer-connector ${connectorColorClass}`} />}
-    </Col>
-    <Col xs={2}>
-      <p>
-        {props.from == "browser" ? browserFrom : props.from}
-      </p>
-    </Col>
-    <Col xs={2}>
-      <p>
-        {props.to}
-      </p>
-    </Col>
-    <Col xs={7}>
-      <p>
-        {props.header ? t("last message seen ") : props.connectionMsg}
-      </p>
-    </Col>
+  return <Row className="connectivity-grid">
+    <div className={className}
+      title={syncStatus ? syncText(syncStatus) : getTitle(props.header)}
+      onMouseEnter={hoverOver(connectionName)}
+      onMouseLeave={hoverOver(undefined)}>
+      {!props.header && <i className={`fa ${iconClass}`} />}
+    </div>
+    {!props.header &&
+      <div className={`saucer-connector ${connectorColorClass}`} />}
+    <p>
+      {props.from == "browser" ? browserFrom : props.from}
+    </p>
+    <p>
+      {props.to}
+    </p>
+    <p>
+      {props.header ? t("last message seen ") : props.connectionMsg}
+    </p>
   </Row>;
 }
diff --git a/frontend/devices/connectivity/diagnosis.tsx b/frontend/devices/connectivity/diagnosis.tsx
index 5d7b8a9aee..b86b6a0116 100644
--- a/frontend/devices/connectivity/diagnosis.tsx
+++ b/frontend/devices/connectivity/diagnosis.tsx
@@ -1,12 +1,13 @@
 import React from "react";
-import { DiagnosticMessages } from "../../constants";
-import { Col, Row, docLinkClick } from "../../ui";
+import { DeviceSetting, DiagnosticMessages } from "../../constants";
+import { Row, docLinkClick } from "../../ui";
 import { bitArray } from "../../util";
 import { TRUTH_TABLE } from "./truth_table";
 import { t } from "../../i18next_wrapper";
-import { goToFbosSettings } from "../../settings/maybe_highlight";
 import { SyncStatus } from "farmbot";
 import { syncText } from "../../nav/sync_text";
+import { useNavigate } from "react-router";
+import { linkToSetting } from "../../settings/maybe_highlight";
 
 export type ConnectionName =
   | "userAPI"
@@ -49,37 +50,35 @@ export const DiagnosisSaucer = (props: DiagnosisSaucerProps) => {
 export function Diagnosis(props: DiagnosisProps) {
   const diagnosisBoolean = diagnosisStatus(props.statusFlags);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
-  return <div className={"diagnosis-section"}>
+  const navigate = useNavigate();
+  return <Row className="diagnosis-section grid-exp-2">
+    <div hidden={props.hideGraphic}>
+      <DiagnosisSaucer {...props.statusFlags} />
+      <div className={"saucer-connector last " + diagnosisColor} />
+    </div>
     <div className={"connectivity-diagnosis"}>
       <h4>{t("Diagnosis")}</h4>
-    </div>
-    <Row>
-      <Col xs={1} hidden={props.hideGraphic}>
-        <DiagnosisSaucer {...props.statusFlags} />
-        <div className={"saucer-connector last " + diagnosisColor} />
-      </Col>
-      <Col xs={10} className={"connectivity-diagnosis"}>
-        <p className="blinking">
-          {t("Always")}&nbsp;
-          <a className="blinking" onClick={goToFbosSettings}>
-            <u>{t("upgrade FarmBot OS")}</u>
-          </a>
-          &nbsp;{t("before troubleshooting.")}
-        </p>
-        <p>
-          {diagnosisMessage(getDiagnosisCode(props.statusFlags))}
-        </p>
-        <a onClick={docLinkClick("connecting-farmbot-to-the-internet")}>
-          <i className="fa fa-external-link" />
-          {t("Click here to learn more about connectivity codes.")}
-        </a>
-        <a onClick={docLinkClick("for-it-security-professionals")}>
-          <i className="fa fa-external-link" />
-          {t("Click here for document to show to your IT department.")}
+      <p className="blinking">
+        {t("Always")}&nbsp;
+        <a className="blinking"
+          onClick={() => { navigate(linkToSetting(DeviceSetting.farmbotOS)); }}>
+          <u>{t("upgrade FarmBot OS")}</u>
         </a>
-      </Col>
-    </Row>
-  </div>;
+        &nbsp;{t("before troubleshooting.")}
+      </p>
+      <p>
+        {diagnosisMessage(getDiagnosisCode(props.statusFlags))}
+      </p>
+      <a onClick={docLinkClick("connecting-farmbot-to-the-internet")}>
+        <i className="fa fa-external-link" />
+        {t("Click here to learn more about connectivity codes.")}
+      </a>
+      <a onClick={docLinkClick("for-it-security-professionals")}>
+        <i className="fa fa-external-link" />
+        {t("Click here for document to show to your IT department.")}
+      </a>
+    </div>
+  </Row>;
 }
 
 export function getDiagnosisCode(statusFlags: ConnectionStatusFlags) {
diff --git a/frontend/devices/connectivity/diagram.tsx b/frontend/devices/connectivity/diagram.tsx
index e94aa74aa9..f0a58d1de3 100644
--- a/frontend/devices/connectivity/diagram.tsx
+++ b/frontend/devices/connectivity/diagram.tsx
@@ -62,7 +62,7 @@ export function getTextPosition(
 }
 
 export function nodeLabel(
-  label: string, node: DiagramNodes, anchor = "middle"): JSX.Element {
+  label: string, node: DiagramNodes, anchor = "middle"): React.ReactNode {
   const position = getTextPosition(node);
   return <text x={position.x} y={position.y} textAnchor={anchor}>
     {label}
@@ -99,15 +99,15 @@ export function getLineProps(
   return { x1: 0, y1: 0, x2: 0, y2: 0 }; // fallback
 }
 
-export function Connector(props: ConnectorProps): JSX.Element {
+export function Connector(props: ConnectorProps): React.ReactNode {
   const {
     connectionData, from, to, hover, hoveredConnection, customLineProps
   } = props;
   const lineProps = customLineProps ? customLineProps : getLineProps(from, to);
   const hoverIndicatorColor =
     hoveredConnection === connectionData.connectionName
-      ? Color.darkGray
-      : Color.white;
+      ? Color.white
+      : Color.darkGray;
   return <g
     id={connectionData.connectionName + "-connector"}
     strokeLinecap="round">
diff --git a/frontend/devices/connectivity/fbos_metric_history_plot.tsx b/frontend/devices/connectivity/fbos_metric_history_plot.tsx
index 9ac4623f9a..8701ebe8a9 100644
--- a/frontend/devices/connectivity/fbos_metric_history_plot.tsx
+++ b/frontend/devices/connectivity/fbos_metric_history_plot.tsx
@@ -171,7 +171,7 @@ const XAxisLabels = () =>
 /** plot background color and top and bottom lines */
 const PlotBackground = () =>
   <g id="plot_background">
-    <rect fill="white" x={0} y={0} width={"100%"} height={"100%"} />
+    <rect fill="none" x={0} y={0} width={"100%"} height={"100%"} />
     <line x1={0} y1={0} x2={MAX_X} y2={0} strokeWidth={0.25} stroke={"grey"} />
     <line x1={0} y1={MAX_Y} x2={MAX_X} y2={MAX_Y}
       strokeWidth={0.25} stroke={"grey"} />
diff --git a/frontend/devices/connectivity/fbos_metric_history_table.tsx b/frontend/devices/connectivity/fbos_metric_history_table.tsx
index be54100d0d..c3d62fc9c1 100644
--- a/frontend/devices/connectivity/fbos_metric_history_table.tsx
+++ b/frontend/devices/connectivity/fbos_metric_history_table.tsx
@@ -49,7 +49,7 @@ const TableHeaderCell = (props: TableHeaderCellProps) =>
   <th
     style={{
       color: COLORS[props.metricName],
-      background: props.hoveredMetric == props.metricName ? "#eee" : undefined,
+      background: props.hoveredMetric == props.metricName ? "rgba(255,255,255,0.2)" : undefined,
       textAlign: props.rightAlign ? "right" : undefined,
       ...props.style,
     }}
@@ -71,7 +71,7 @@ const TableBodyCell = (props: TableBodyCellProps) => {
   const selected = props.recordSelected || props.hoveredMetric == props.metricName;
   return <td
     style={{
-      background: selected ? "#eee" : undefined,
+      background: selected ? "rgba(255,255,255,0.2)" : undefined,
       textAlign: props.rightAlign ? "right" : undefined,
     }}
     onMouseEnter={props.onHover(props.metricName)}
@@ -118,7 +118,7 @@ export class FbosMetricHistoryTable
     const rightAlignProps = { ...commonProps, rightAlign: true };
     const sortedTelemetry = sortBy(cloneDeep(this.telemetry), "body.created_at")
       .reverse();
-    return <div className={"fbos-metric-history"}>
+    return <div className={"fbos-metric-history grid"}>
       <FbosMetricHistoryPlot {...commonProps} telemetry={this.telemetry} />
       <div className={"fbos-metric-history-table-wrapper"}>
         <table>
@@ -142,7 +142,7 @@ export class FbosMetricHistoryTable
               .map(m => {
                 const recordSelected = this.state.hoveredTime == m.body.created_at;
                 const recordProps = {
-                  style: { background: recordSelected ? "#eee" : undefined },
+                  style: { background: recordSelected ? "rgba(255,255,255,0.2)" : undefined },
                 };
                 const cellProps = { ...commonProps, recordSelected };
                 const rightCellProps = { ...cellProps, rightAlign: true };
diff --git a/frontend/devices/jobs.tsx b/frontend/devices/jobs.tsx
index 0897badcc5..afbfea5d9c 100644
--- a/frontend/devices/jobs.tsx
+++ b/frontend/devices/jobs.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../farm_designer/designer_panel";
-import { Panel, DesignerNavTabs } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { Everything, JobsAndLogsState, TimeSettings } from "../interfaces";
 import {
   BytesProgress, Dictionary, JobProgress, PercentageProgress, TaggedDevice,
@@ -33,7 +33,6 @@ export const mapStateToProps = (props: Everything): JobsPanelProps => ({
 export class RawJobsPanel extends React.Component<JobsPanelProps, {}> {
   render() {
     return <DesignerPanel panelName={"jobs"} panel={Panel.Logs}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Logs} />
       <DesignerPanelContent panelName={"jobs"}>
         <p>{t("Job count")}: {Object.values(this.props.jobs).length}</p>
@@ -44,6 +43,8 @@ export class RawJobsPanel extends React.Component<JobsPanelProps, {}> {
 }
 
 export const JobsPanel = connect(mapStateToProps)(RawJobsPanel);
+// eslint-disable-next-line import/no-default-export
+export default JobsPanel;
 
 export interface JobsAndLogsProps {
   dispatch: Function;
@@ -75,23 +76,21 @@ export class JobsAndLogs
   };
 
   Logs = () => {
-    return <div className={"logs-tab"}>
-      <LogsPanel
-        logs={this.props.logs}
-        timeSettings={this.props.timeSettings}
-        dispatch={this.props.dispatch}
-        sourceFbosConfig={this.props.sourceFbosConfig}
-        getConfigValue={this.props.getConfigValue}
-        bot={this.props.bot}
-        device={this.props.device}
-        fbosVersion={this.props.fbosVersion}
-      />
-    </div>;
+    return <LogsPanel
+      logs={this.props.logs}
+      timeSettings={this.props.timeSettings}
+      dispatch={this.props.dispatch}
+      sourceFbosConfig={this.props.sourceFbosConfig}
+      getConfigValue={this.props.getConfigValue}
+      bot={this.props.bot}
+      device={this.props.device}
+      fbosVersion={this.props.fbosVersion}
+    />;
   };
 
   render() {
     const { jobs, logs } = this.props.jobsPanelState;
-    return <div className={"jobs-and-logs"}>
+    return <div className={"jobs-and-logs grid double-gap"}>
       <div className={"tabs"}>
         <label className={jobs ? "selected" : ""}
           onClick={this.setPanelState("jobs")}>{t("jobs")}</label>
diff --git a/frontend/devices/timezones/__tests__/timezone_selector_test.tsx b/frontend/devices/timezones/__tests__/timezone_selector_test.tsx
index 073f520636..169ae48a65 100644
--- a/frontend/devices/timezones/__tests__/timezone_selector_test.tsx
+++ b/frontend/devices/timezones/__tests__/timezone_selector_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { TimezoneSelector } from "../timezone_selector";
 import { inferTimezone } from "../guess_timezone";
diff --git a/frontend/draggable/actions.ts b/frontend/draggable/actions.ts
index b360126b49..687e05f113 100644
--- a/frontend/draggable/actions.ts
+++ b/frontend/draggable/actions.ts
@@ -2,7 +2,7 @@ import { DataXfer, DataXferIntent, DataXferBase } from "./interfaces";
 import { SequenceBodyItem as Step, uuid as id } from "farmbot";
 import { Everything } from "../interfaces";
 import { ReduxAction } from "../redux/interfaces";
-import * as React from "react";
+import React from "react";
 import { Actions } from "../constants";
 import { UUID } from "../resources/interfaces";
 export const STEP_DATATRANSFER_IDENTIFER = "farmbot/sequence-step";
diff --git a/frontend/error_boundary.tsx b/frontend/error_boundary.tsx
index 05a80d3aac..52cd1c0cd8 100644
--- a/frontend/error_boundary.tsx
+++ b/frontend/error_boundary.tsx
@@ -22,7 +22,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
 
   no = () => this.props.fallback || <Apology />;
 
-  ok = () => this.props.children || <div className={"no-children"} />;
+  ok = () => this.props.children;
 
   render() { return (this.state.hasError ? this.no : this.ok)(); }
 }
diff --git a/frontend/extras/__tests__/fallback_widget_test.tsx b/frontend/extras/__tests__/fallback_widget_test.tsx
index c8bfc0a462..df6eebe707 100644
--- a/frontend/extras/__tests__/fallback_widget_test.tsx
+++ b/frontend/extras/__tests__/fallback_widget_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount, shallow } from "enzyme";
 import { FallbackWidget, FallbackWidgetProps } from "../fallback_widget";
 
@@ -21,6 +21,6 @@ describe("<FallbackWidget />", () => {
     p.helpText = "This is a fake widget.";
     const wrapper = shallow(<FallbackWidget {...p} />);
     expect(wrapper.html())
-      .toContain("<i class=\"fa fa-question-circle help-icon\"");
+      .toContain("<i role=\"tooltip\" class=\"fa fa-question-circle help-icon\"");
   });
 });
diff --git a/frontend/extras/__tests__/spinner_test.tsx b/frontend/extras/__tests__/spinner_test.tsx
index c3b374d65c..a67dbaebeb 100644
--- a/frontend/extras/__tests__/spinner_test.tsx
+++ b/frontend/extras/__tests__/spinner_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Spinner } from "../spinner";
 import { mount } from "enzyme";
 
diff --git a/frontend/extras/fallback_widget.tsx b/frontend/extras/fallback_widget.tsx
index e4c80f9073..cf42973811 100644
--- a/frontend/extras/fallback_widget.tsx
+++ b/frontend/extras/fallback_widget.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Widget, WidgetHeader, WidgetBody } from "../ui";
 import { t } from "../i18next_wrapper";
 
diff --git a/frontend/extras/spinner.tsx b/frontend/extras/spinner.tsx
index 2c28f1a2f3..94bb20408c 100644
--- a/frontend/extras/spinner.tsx
+++ b/frontend/extras/spinner.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 interface SpinnerProps {
   /** Radius of the spinner in pixels. */
diff --git a/frontend/farm_designer/__tests__/designer_panel_test.tsx b/frontend/farm_designer/__tests__/designer_panel_test.tsx
index a47cd95fbb..773c0e3a85 100644
--- a/frontend/farm_designer/__tests__/designer_panel_test.tsx
+++ b/frontend/farm_designer/__tests__/designer_panel_test.tsx
@@ -1,10 +1,9 @@
-import React from "react";
+import React, { act } from "react";
 import { mount } from "enzyme";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelContentProps,
   DesignerPanelHeader, DesignerPanelTop, DesignerPanelTopProps,
 } from "../designer_panel";
-import { act } from "react-dom/test-utils";
 import { SpecialStatus } from "farmbot";
 import { Panel } from "../panel_header";
 
diff --git a/frontend/farm_designer/__tests__/index_test.tsx b/frontend/farm_designer/__tests__/index_test.tsx
index fdd940d4c5..d2f524ff40 100644
--- a/frontend/farm_designer/__tests__/index_test.tsx
+++ b/frontend/farm_designer/__tests__/index_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 jest.mock("../../api/crud", () => ({
   edit: jest.fn(),
   save: jest.fn(),
@@ -39,6 +33,7 @@ import {
   fakeBotLocationData, fakeBotSize,
 } from "../../__test_support__/fake_bot_data";
 import { WebAppConfig } from "farmbot/dist/resources/configs/web_app";
+import { Path } from "../../internal_urls";
 
 describe("<FarmDesigner />", () => {
   const fakeProps = (): FarmDesignerProps => ({
@@ -69,7 +64,7 @@ describe("<FarmDesigner />", () => {
     visualizedSequenceBody: [],
     logs: [],
     deviceTarget: "",
-    sourceFbosConfig: jest.fn(),
+    sourceFbosConfig: () => ({ value: 1, consistent: true }),
     farmwareEnvs: [],
     curves: [],
   });
@@ -103,7 +98,7 @@ describe("<FarmDesigner />", () => {
   });
 
   it("renders nav titles", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const wrapper = mount(<FarmDesigner {...fakeProps()} />);
     expect(wrapper.find(".panel-nav").first().hasClass("hidden"))
       .toBeTruthy();
@@ -114,8 +109,10 @@ describe("<FarmDesigner />", () => {
   });
 
   it("hides panel", () => {
-    mockPath = Path.mock(Path.designer());
-    const wrapper = mount(<FarmDesigner {...fakeProps()} />);
+    location.pathname = Path.mock(Path.plants());
+    const p = fakeProps();
+    p.designer.panelOpen = false;
+    const wrapper = mount(<FarmDesigner {...p} />);
     expect(wrapper.find(".panel-nav").first().hasClass("hidden"))
       .toBeFalsy();
     expect(wrapper.find(".farm-designer-panels").hasClass("panel-open"))
diff --git a/frontend/farm_designer/__tests__/location_info_test.tsx b/frontend/farm_designer/__tests__/location_info_test.tsx
index 15c79d9f77..e29f625331 100644
--- a/frontend/farm_designer/__tests__/location_info_test.tsx
+++ b/frontend/farm_designer/__tests__/location_info_test.tsx
@@ -13,10 +13,10 @@ import {
 } from "../../__test_support__/fake_state/resources";
 import { tagAsSoilHeight } from "../../points/soil_height";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import { ImageFlipper } from "../../photos/images/image_flipper";
 import { Path } from "../../internal_urls";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
+import { mountWithContext } from "../../__test_support__/mount_with_context";
 
 describe("<LocationInfo />", () => {
   const fakeProps = (): LocationInfoProps => ({
@@ -145,7 +145,7 @@ describe("<LocationInfo />", () => {
     const p = fakeProps();
     p.chosenLocation = { x: 1, y: 1, z: 0 };
     p.currentBotLocation = { x: 10, y: 1, z: 0 };
-    const wrapper = mount(<LocationInfo {...p} />);
+    const wrapper = mountWithContext(<LocationInfo {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("9mm from farmbot");
     jest.clearAllMocks();
     wrapper.find(".add-point").simulate("click");
@@ -153,7 +153,7 @@ describe("<LocationInfo />", () => {
       type: Actions.SET_DRAWN_POINT_DATA,
       payload: { cx: 1, cy: 1 }
     });
-    expect(push).toHaveBeenCalledWith(Path.points("add"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.points("add"));
   });
 });
 
diff --git a/frontend/farm_designer/__tests__/move_to_test.tsx b/frontend/farm_designer/__tests__/move_to_test.tsx
index 7b71104ed4..304ac21879 100644
--- a/frontend/farm_designer/__tests__/move_to_test.tsx
+++ b/frontend/farm_designer/__tests__/move_to_test.tsx
@@ -1,11 +1,5 @@
 jest.mock("../../devices/actions", () => ({ move: jest.fn() }));
 
-const mockPath = "";
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../config_storage/actions", () => ({
   setWebAppConfigValue: jest.fn(),
 }));
@@ -17,18 +11,19 @@ jest.mock("../../ui/popover", () => ({
 
 import React from "react";
 import { mount, shallow } from "enzyme";
+import { render, screen, fireEvent } from "@testing-library/react";
 import {
   MoveToForm, MoveToFormProps, MoveModeLink, chooseLocation,
   GoToThisLocationButtonProps, GoToThisLocationButton, movementPercentRemaining,
+  MoveModeLinkProps,
 } from "../move_to";
-import { push } from "../../history";
 import { Actions } from "../../constants";
-import { clickButton } from "../../__test_support__/helpers";
 import { move } from "../../devices/actions";
 import { Path } from "../../internal_urls";
 import { setWebAppConfigValue } from "../../config_storage/actions";
 import { StringSetting } from "../../session_keys";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
+import { mockDispatch } from "../../__test_support__/fake_dispatch";
 
 describe("<MoveToForm />", () => {
   const fakeProps = (): MoveToFormProps => ({
@@ -101,27 +96,69 @@ describe("<MoveToForm />", () => {
 });
 
 describe("<MoveModeLink />", () => {
+  const fakeProps = (): MoveModeLinkProps => ({
+    dispatch: jest.fn(),
+  });
+
   it("enters 'move to' mode", () => {
-    const wrapper = shallow(<MoveModeLink />);
-    clickButton(wrapper, 0, "move mode");
-    expect(push).toHaveBeenCalledWith(Path.location());
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    render(<MoveModeLink {...p} />);
+    const button = screen.getByTitle("open move mode panel");
+    fireEvent.click(button);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.location());
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN,
+      payload: true,
+    });
   });
 });
 
 describe("chooseLocation()", () => {
   it("updates chosen coordinates", () => {
+    location.pathname = Path.mock(Path.location());
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    chooseLocation({ dispatch, gardenCoords: { x: 1, y: 2 } });
+    chooseLocation({ navigate, dispatch, gardenCoords: { x: 1, y: 2 } });
     expect(dispatch).toHaveBeenCalledWith({
       type: Actions.CHOOSE_LOCATION,
-      payload: { x: 1, y: 2, z: 0 }
+      payload: { x: 1, y: 2, z: 0 },
     });
+    expect(navigate).toHaveBeenCalledWith(Path.location({ x: 1, y: 2 }));
   });
 
-  it("doesn't update coordinates", () => {
+  it("doesn't update coordinates or navigate", () => {
+    location.pathname = Path.mock(Path.location());
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    chooseLocation({ dispatch, gardenCoords: undefined });
+    chooseLocation({ navigate, dispatch, gardenCoords: undefined });
     expect(dispatch).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("doesn't navigate: same location", () => {
+    location.pathname = Path.mock(Path.location({ x: 1, y: 2 }));
+    const navigate = jest.fn();
+    const dispatch = jest.fn();
+    chooseLocation({ navigate, dispatch, gardenCoords: { x: 1, y: 2 } });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.CHOOSE_LOCATION,
+      payload: { x: 1, y: 2, z: 0 },
+    });
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("doesn't navigate: not in location panel", () => {
+    location.pathname = Path.mock(Path.plants());
+    const navigate = jest.fn();
+    const dispatch = jest.fn();
+    chooseLocation({ navigate, dispatch, gardenCoords: { x: 1, y: 2 } });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.CHOOSE_LOCATION,
+      payload: { x: 1, y: 2, z: 0 },
+    });
+    expect(navigate).not.toHaveBeenCalled();
   });
 });
 
diff --git a/frontend/farm_designer/__tests__/panel_header_test.tsx b/frontend/farm_designer/__tests__/panel_header_test.tsx
index 59328c26ae..82708ba68f 100644
--- a/frontend/farm_designer/__tests__/panel_header_test.tsx
+++ b/frontend/farm_designer/__tests__/panel_header_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 let mockDev = false;
 jest.mock("../../settings/dev/dev_support", () => ({
   DevSettings: {
@@ -17,50 +11,80 @@ jest.mock("../../redux/store", () => ({ store: { getState: () => mockState } }))
 
 import React from "react";
 import { shallow, mount, ReactWrapper } from "enzyme";
-import { DesignerNavTabs } from "../panel_header";
+import { DesignerNavTabs, DesignerNavTabsProps } from "../panel_header";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 import {
   fakeFarmwareInstallation, fakeWebAppConfig,
 } from "../../__test_support__/fake_state/resources";
+import { Path } from "../../internal_urls";
+import { fakeDesignerState } from "../../__test_support__/fake_designer_state";
+import { Actions } from "../../constants";
+import { mockDispatch } from "../../__test_support__/fake_dispatch";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const expectOnlyOneActiveIcon = (wrapper: ReactWrapper<any>) =>
   expect(wrapper.html().match(/active/)?.length).toEqual(1);
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const expectColor = (wrapper: ReactWrapper<any>, color: string) =>
-  expect(wrapper.find(".panel-nav").hasClass(`${color}-panel`)).toBeTruthy();
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const expectActive = (wrapper: ReactWrapper<any>, slug: string) =>
   expect(wrapper.find(`#${slug}`).first().hasClass("active")).toBeTruthy();
 
 describe("<DesignerNavTabs />", () => {
-  it.each<[string, string, string]>([
-    ["map", Path.designer(), "gray"],
-    ["plants", Path.plants(), "green"],
-    ["plants", Path.plantTemplates(1), "green"],
-    ["tools", Path.toolSlots(), "gray"],
-  ])("shows active %s icon", (slug, path, color) => {
-    mockPath = Path.mock(path);
-    const wrapper = mount(<DesignerNavTabs />);
+  const fakeProps = (): DesignerNavTabsProps => ({
+    dispatch: jest.fn(),
+    designer: fakeDesignerState(),
+    hidden: false,
+  });
+
+  it.each<[string, string]>([
+    ["sequences", Path.sequencePage()],
+    ["plants", Path.plants()],
+    ["plants", Path.plantTemplates(1)],
+    ["tools", Path.toolSlots()],
+  ])("shows active %s icon", (slug, path) => {
+    location.pathname = Path.mock(path);
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    const wrapper = mount(<DesignerNavTabs {...p} />);
     expectOnlyOneActiveIcon(wrapper);
-    expectColor(wrapper, color);
     expectActive(wrapper, slug);
+    wrapper.find("#" + slug).first().simulate("click");
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN, payload: true,
+    });
+  });
+
+  it("closes panel", () => {
+    location.pathname = Path.mock(Path.plants());
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.designer.panelOpen = true;
+    const wrapper = mount(<DesignerNavTabs {...p} />);
+    expectOnlyOneActiveIcon(wrapper);
+    expectActive(wrapper, "plants");
+    wrapper.find("a").first().simulate("click");
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN, payload: false,
+    });
+    p.designer.panelOpen = false;
+    wrapper.setProps(p);
+    expectOnlyOneActiveIcon(wrapper);
+    expect(wrapper.find("a").first().hasClass("active")).toBeTruthy();
   });
 
   it("shows inactive icons for logs page", () => {
-    mockPath = Path.mock(Path.logs());
-    const wrapper = mount(<DesignerNavTabs />);
+    location.pathname = Path.mock(Path.logs());
+    const wrapper = mount(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.find(".active").length).toEqual(0);
   });
 
   it("shows active zones icon", () => {
-    mockPath = Path.mock(Path.zones());
+    location.pathname = Path.mock(Path.zones());
     mockDev = true;
-    const wrapper = mount(<DesignerNavTabs />);
+    const wrapper = mount(<DesignerNavTabs {...fakeProps()} />);
     expectOnlyOneActiveIcon(wrapper);
-    expectColor(wrapper, "brown");
     expectActive(wrapper, "zones");
   });
 
@@ -68,7 +92,7 @@ describe("<DesignerNavTabs />", () => {
     const config = fakeWebAppConfig();
     config.body.hide_sensors = false;
     mockState.resources = buildResourceIndex([config]);
-    const wrapper = mount(<DesignerNavTabs />);
+    const wrapper = mount(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.html()).toContain("sensors");
   });
 
@@ -76,7 +100,7 @@ describe("<DesignerNavTabs />", () => {
     const config = fakeWebAppConfig();
     config.body.hide_sensors = true;
     mockState.resources = buildResourceIndex([config]);
-    const wrapper = mount(<DesignerNavTabs />);
+    const wrapper = mount(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.html()).not.toContain("sensors");
   });
 
@@ -85,7 +109,7 @@ describe("<DesignerNavTabs />", () => {
       value: () => [{}, { scrollWidth: 100, scrollLeft: 0, clientWidth: 75 }],
       configurable: true
     });
-    const wrapper = shallow(<DesignerNavTabs />);
+    const wrapper = shallow(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.html()).toContain("scroll-indicator");
   });
 
@@ -94,7 +118,7 @@ describe("<DesignerNavTabs />", () => {
       value: () => [{}, { scrollWidth: 500, scrollLeft: 0, clientWidth: 750 }],
       configurable: true
     });
-    const wrapper = shallow(<DesignerNavTabs />);
+    const wrapper = shallow(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.html()).not.toContain("scroll-indicator");
   });
 
@@ -103,12 +127,12 @@ describe("<DesignerNavTabs />", () => {
       value: () => [{}, { scrollWidth: 100, scrollLeft: 25, clientWidth: 75 }],
       configurable: true
     });
-    const wrapper = shallow(<DesignerNavTabs />);
+    const wrapper = shallow(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.html()).not.toContain("scroll-indicator");
   });
 
   it("calls onScroll", () => {
-    const wrapper = shallow<DesignerNavTabs>(<DesignerNavTabs />);
+    const wrapper = shallow<DesignerNavTabs>(<DesignerNavTabs {...fakeProps()} />);
     wrapper.setState({ atEnd: false });
     wrapper.find(".panel-tabs").simulate("scroll");
     expect(wrapper.state().atEnd).toEqual(true);
@@ -116,7 +140,7 @@ describe("<DesignerNavTabs />", () => {
 
   it("shows farmware tab", () => {
     mockState.resources = buildResourceIndex([fakeFarmwareInstallation()]);
-    const wrapper = mount(<DesignerNavTabs />);
+    const wrapper = mount(<DesignerNavTabs {...fakeProps()} />);
     expect(wrapper.html()).toContain("farmware");
   });
 });
diff --git a/frontend/farm_designer/__tests__/reducer_test.ts b/frontend/farm_designer/__tests__/reducer_test.ts
index 7c7558d688..e0b6970b1d 100644
--- a/frontend/farm_designer/__tests__/reducer_test.ts
+++ b/frontend/farm_designer/__tests__/reducer_test.ts
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.designer());
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 import { designer } from "../reducer";
 import { Actions } from "../../constants";
 import { ReduxAction } from "../../redux/interfaces";
@@ -19,7 +12,7 @@ import { fakeDesignerState } from "../../__test_support__/fake_designer_state";
 import { PointGroupSortType } from "farmbot/dist/resources/api_resources";
 import { PlantStage, PointType } from "farmbot";
 import { UUID } from "../../resources/interfaces";
-import { push } from "../../history";
+import { Path } from "../../internal_urls";
 
 describe("designer reducer", () => {
   const oldState = fakeDesignerState;
@@ -120,6 +113,24 @@ describe("designer reducer", () => {
     expect(newState.cropPlantedAt).toEqual("2020-01-20T20:00:00.000Z");
   });
 
+  it("sets distance indicator", () => {
+    const action: ReduxAction<string> = {
+      type: Actions.SET_DISTANCE_INDICATOR,
+      payload: "setting",
+    };
+    const newState = designer(oldState(), action);
+    expect(newState.distanceIndicator).toEqual("setting");
+  });
+
+  it("sets panel open state", () => {
+    const action: ReduxAction<boolean> = {
+      type: Actions.SET_PANEL_OPEN,
+      payload: false,
+    };
+    const newState = designer(oldState(), action);
+    expect(newState.panelOpen).toEqual(false);
+  });
+
   it("sets hovered plant list item", () => {
     const action: ReduxAction<string> = {
       type: Actions.HOVER_PLANT_LIST_ITEM,
@@ -175,14 +186,13 @@ describe("designer reducer", () => {
   });
 
   it("sets query upon chosen location", () => {
-    mockPath = Path.mock(Path.location());
+    location.pathname = Path.mock(Path.location());
     const action: ReduxAction<BotPosition> = {
       type: Actions.CHOOSE_LOCATION,
       payload: { x: 0, y: 0, z: 0 },
     };
     const newState = designer(oldState(), action);
     expect(newState.chosenLocation).toEqual({ x: 0, y: 0, z: 0 });
-    expect(push).toHaveBeenCalledWith(Path.location({ x: 0, y: 0 }));
   });
 
   it("sets current point data", () => {
diff --git a/frontend/farm_designer/__tests__/three_d_garden_map_test.tsx b/frontend/farm_designer/__tests__/three_d_garden_map_test.tsx
index 0e95cadd65..87107d89c8 100644
--- a/frontend/farm_designer/__tests__/three_d_garden_map_test.tsx
+++ b/frontend/farm_designer/__tests__/three_d_garden_map_test.tsx
@@ -1,18 +1,82 @@
+jest.mock("../../three_d_garden", () => ({
+  ThreeDGarden: jest.fn(),
+}));
+
 import React from "react";
-import { mount } from "enzyme";
 import { ThreeDGardenMapProps, ThreeDGardenMap } from "../three_d_garden_map";
 import { fakeMapTransformProps } from "../../__test_support__/map_transform_props";
 import { fakeBotSize } from "../../__test_support__/fake_bot_data";
+import { fakeDesignerState } from "../../__test_support__/fake_designer_state";
+import { fakePlant } from "../../__test_support__/fake_state/resources";
+import { render } from "@testing-library/react";
+import { ThreeDGarden } from "../../three_d_garden";
+import { clone } from "lodash";
+import { INITIAL } from "../../three_d_garden/config";
+import { ASSETS } from "../../three_d_garden/constants";
 
 describe("<ThreeDGardenMap />", () => {
   const fakeProps = (): ThreeDGardenMapProps => ({
     mapTransformProps: fakeMapTransformProps(),
     botSize: fakeBotSize(),
     gridOffset: { x: 10, y: 10 },
+    get3DConfigValue: () => 1,
+    sourceFbosConfig: () => ({ value: 0, consistent: true }),
+    designer: fakeDesignerState(),
+    plants: [fakePlant()],
   });
 
-  it("renders", () => {
-    const wrapper = mount(<ThreeDGardenMap {...fakeProps()} />);
-    expect(wrapper.html()).toContain("three-d-garden");
+  it("converts props", () => {
+    const p = fakeProps();
+    const plant0 = fakePlant();
+    plant0.body.name = "Spinach";
+    plant0.body.openfarm_slug = "spinach";
+    const plant1 = fakePlant();
+    plant1.body.name = "Unknown";
+    plant1.body.openfarm_slug = "not-set";
+    p.plants = [plant0, plant1];
+    render(<ThreeDGardenMap {...p} />);
+    const expectedConfig = clone(INITIAL);
+    expectedConfig.bedWallThickness = 1;
+    expectedConfig.bedHeight = 1;
+    expectedConfig.bedLengthOuter = 3160;
+    expectedConfig.bedWidthOuter = 1660;
+    expectedConfig.botSizeX = 3000;
+    expectedConfig.botSizeY = 1500;
+    expectedConfig.ccSupportSize = 1;
+    expectedConfig.beamLength = 1;
+    expectedConfig.columnLength = 1;
+    expectedConfig.zAxisLength = 1;
+    expectedConfig.bedXOffset = 1;
+    expectedConfig.bedYOffset = 1;
+    expectedConfig.bedZOffset = 1;
+    expectedConfig.legSize = 1;
+    expectedConfig.bounds = true;
+    expectedConfig.grid = true;
+    expectedConfig.pan = true;
+    expectedConfig.zoom = true;
+    expectedConfig.soilHeight = 0;
+    expectedConfig.zGantryOffset = 0;
+    expectedConfig.zoomBeacons = false;
+    expect(ThreeDGarden).toHaveBeenCalledWith({
+      config: expectedConfig,
+      plants: [
+        {
+          icon: ASSETS.icons.spinach,
+          label: "Spinach",
+          size: 50,
+          spread: 0,
+          x: 101,
+          y: 201,
+        },
+        {
+          icon: ASSETS.icons.arugula,
+          label: "Unknown",
+          size: 50,
+          spread: 0,
+          x: 101,
+          y: 201,
+        },
+      ],
+    }, {});
   });
 });
diff --git a/frontend/farm_designer/designer_panel.tsx b/frontend/farm_designer/designer_panel.tsx
index 8aeacd1818..325fc3d7f2 100644
--- a/frontend/farm_designer/designer_panel.tsx
+++ b/frontend/farm_designer/designer_panel.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { last, trim } from "lodash";
 import { Link } from "../link";
 import { Panel, TAB_COLOR, PanelColor } from "./panel_header";
@@ -38,10 +38,10 @@ interface DesignerPanelHeaderProps {
   panel?: Panel;
   panelColor?: PanelColor;
   title?: string;
-  titleElement?: JSX.Element;
+  titleElement?: React.ReactNode;
   blackText?: boolean;
   description?: string;
-  descriptionElement?: JSX.Element;
+  descriptionElement?: React.ReactNode;
   backTo?: string;
   onBack?: () => void;
   specialStatus?: SpecialStatus;
@@ -60,18 +60,18 @@ const backToText = (to: string | undefined): string => {
 export const DesignerPanelHeader = (props: DesignerPanelHeaderProps) => {
   const panelColor = props.panel ? TAB_COLOR[props.panel] : props.panelColor;
   const colorClass = props.colorClass || `${panelColor || PanelColor.gray}-panel`;
-  const textColor = props.blackText ? "black" : "white";
+  const navigate = useNavigate();
   return <div className={`panel-header ${colorClass}`}
     style={props.style || {}}>
     <div className="panel-title">
-      <i className={`fa fa-arrow-left back-arrow ${textColor}-text`}
+      <i className={"fa fa-arrow-left back-arrow"}
         title={t("go back") + backToText(props.backTo)}
         onClick={() => {
-          props.backTo ? push(props.backTo) : history.back();
+          props.backTo ? navigate(props.backTo) : history.back();
           props.onBack?.();
         }} />
       {props.title &&
-        <span className={`title ${textColor}-text`}>
+        <span className={"title"}>
           {t(props.title)}
         </span>}
       {props.titleElement}
@@ -87,7 +87,6 @@ export const DesignerPanelHeader = (props: DesignerPanelHeaderProps) => {
       <div className={[
         "panel-header-description",
         `${props.panelName}-description`,
-        `${textColor}-text`,
       ].join(" ")}>
         {props.description && t(props.description)}
         {props.descriptionElement}
@@ -113,14 +112,14 @@ export const DesignerPanelTop = (props: DesignerPanelTopProps) => {
     {props.children}
     {props.onClick &&
       <a>
-        <div className={`fb-button panel-${TAB_COLOR[props.panel]}`}
+        <div className={"fb-button green"}
           onClick={props.onClick}>
           <i className="fa fa-plus" title={props.title} />
         </div>
       </a>}
     {props.linkTo &&
       <Link to={props.linkTo}>
-        <div className={`fb-button panel-${TAB_COLOR[props.panel]}`}>
+        <div className={"fb-button green"}>
           <i className="fa fa-plus" title={props.title} />
         </div>
       </Link>}
@@ -145,6 +144,5 @@ export const DesignerPanelContent = (props: DesignerPanelContentProps) => {
     <ErrorBoundary>
       {props.children}
     </ErrorBoundary>
-    <div className={"padding"}></div>
   </div>;
 };
diff --git a/frontend/farm_designer/index.tsx b/frontend/farm_designer/index.tsx
index ee99d84b99..9b7ca0b59b 100755
--- a/frontend/farm_designer/index.tsx
+++ b/frontend/farm_designer/index.tsx
@@ -5,7 +5,6 @@ import {
   FarmDesignerProps, State, BotOriginQuadrant, isBotOriginQuadrant,
 } from "./interfaces";
 import { mapStateToProps } from "./state_to_props";
-import { Plants } from "../plants/plant_inventory";
 import { GardenMapLegend } from "./map/legend/garden_map_legend";
 import { NumericSetting, BooleanSetting } from "../session_keys";
 import { isUndefined, isFinite, isEqual, filter } from "lodash";
@@ -25,6 +24,9 @@ import { calculateImageAgeInfo } from "../photos/photo_filter_settings/util";
 import { Xyz } from "farmbot";
 import { ProfileViewer } from "./map/profile";
 import { ThreeDGardenMap } from "./three_d_garden_map";
+import { Outlet } from "react-router";
+import { ErrorBoundary } from "../error_boundary";
+import { get3DConfigValueFunction } from "../settings/three_d_settings";
 
 export const getDefaultAxisLength =
   (getConfigValue: GetWebAppConfigValue): Record<Xyz, number> => {
@@ -134,7 +136,7 @@ export class RawFarmDesigner
     };
   }
 
-  get mapPanelClassName() { return mapPanelClassName(); }
+  get mapPanelClassName() { return mapPanelClassName(this.props.designer); }
 
   render() {
     const {
@@ -157,7 +159,7 @@ export class RawFarmDesigner
       y: !!this.props.botMcuParams.movement_stop_at_home_y
     };
 
-    const mapPadding = getMapPadding(getPanelStatus());
+    const mapPadding = getMapPadding(getPanelStatus(this.props.designer));
     const padHeightOffset = mapPadding.top - mapPadding.top / zoom_level;
 
     return <div className="farm-designer">
@@ -188,16 +190,27 @@ export class RawFarmDesigner
         botSize={this.props.botSize}
         imageAgeInfo={calculateImageAgeInfo(this.props.latestImages)} />
 
-      <DesignerNavTabs hidden={![
-        MapPanelStatus.closed,
-        MapPanelStatus.mobileClosed,
-      ].includes(getPanelStatus())} />
+      <DesignerNavTabs
+        designer={this.props.designer}
+        dispatch={this.props.dispatch}
+        hidden={![
+          MapPanelStatus.closed,
+          MapPanelStatus.mobileClosed,
+        ].includes(getPanelStatus(this.props.designer))} />
       <div className={`farm-designer-panels ${this.mapPanelClassName}`}>
-        {this.props.children || React.createElement(Plants)}
+        <ErrorBoundary>
+          <React.Suspense>
+            <Outlet />
+          </React.Suspense>
+        </ErrorBoundary>
       </div>
 
       {this.props.getConfigValue(BooleanSetting.three_d_garden)
         ? <ThreeDGardenMap
+          designer={this.props.designer}
+          plants={this.props.plants}
+          get3DConfigValue={get3DConfigValueFunction(this.props.farmwareEnvs)}
+          sourceFbosConfig={this.props.sourceFbosConfig}
           gridOffset={gridOffset}
           mapTransformProps={this.mapTransformProps}
           botSize={this.props.botSize} />
@@ -273,3 +286,5 @@ export class RawFarmDesigner
 }
 
 export const FarmDesigner = connect(mapStateToProps)(RawFarmDesigner);
+// eslint-disable-next-line import/no-default-export
+export default FarmDesigner;
diff --git a/frontend/farm_designer/interfaces.ts b/frontend/farm_designer/interfaces.ts
index 4078f9f8bc..0c88f25e5f 100644
--- a/frontend/farm_designer/interfaces.ts
+++ b/frontend/farm_designer/interfaces.ts
@@ -41,6 +41,7 @@ import { BooleanConfigKey } from "farmbot/dist/resources/configs/web_app";
 import { MovementState, TimeSettings } from "../interfaces";
 import { ExtendedPointGroupSortType } from "../point_groups/paths";
 import { PeripheralValues } from "./map/layers/farmbot/bot_trail";
+import { NavigateFunction } from "react-router";
 
 /* BotOriginQuadrant diagram
 
@@ -193,6 +194,8 @@ export interface DesignerState {
   cropHeightCurveId: number | undefined;
   cropStage: PlantStage | undefined;
   cropPlantedAt: string | undefined;
+  distanceIndicator: string;
+  panelOpen: boolean;
 }
 
 export type TaggedExecutable = TaggedSequence | TaggedRegimen;
@@ -206,7 +209,7 @@ export interface AddEditFarmEventProps {
   regimensById: Record<string, TaggedRegimen | undefined>;
   sequencesById: Record<string, TaggedSequence | undefined>;
   farmEventsById: Record<string, TaggedFarmEvent | undefined>;
-  getFarmEvent(): TaggedFarmEvent | undefined;
+  getFarmEvent(navigate: NavigateFunction): TaggedFarmEvent | undefined;
   findFarmEventByUuid(uuid: string | undefined): TaggedFarmEvent | undefined;
   handleTime(e: React.SyntheticEvent<HTMLInputElement>, currentISO: string): string;
   dispatch: Function;
diff --git a/frontend/farm_designer/location_info.tsx b/frontend/farm_designer/location_info.tsx
index ec51ccbeba..f0e1534124 100644
--- a/frontend/farm_designer/location_info.tsx
+++ b/frontend/farm_designer/location_info.tsx
@@ -25,7 +25,7 @@ import {
   chooseLocationAction, MoveToForm, unChooseLocationAction, validGoButtonAxes,
 } from "./move_to";
 import { Actions } from "../constants";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { distance } from "../point_groups/paths";
 import { isUndefined, round, sortBy, sum } from "lodash";
 import { PlantInventoryItem } from "../plants/plant_inventory_item";
@@ -44,6 +44,7 @@ import { Collapse } from "@blueprintjs/core";
 import { ImageFlipper } from "../photos/images/image_flipper";
 import { PhotoFooter } from "../photos/images/photos";
 import { Path } from "../internal_urls";
+import { NavigationContext } from "../routes_helpers";
 
 export const mapStateToProps = (props: Everything): LocationInfoProps => ({
   chosenLocation: props.resources.consumers.farm_designer.chosenLocation,
@@ -96,15 +97,19 @@ export class RawLocationInfo extends React.Component<LocationInfoProps, {}> {
       : undefined;
   }
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   componentDidMount() {
     unselectPlant(this.props.dispatch)();
     const x = getUrlQuery("x");
     const y = getUrlQuery("y");
     const z = getUrlQuery("z") || "0";
-    !this.chosenXY && !isUndefined(x) && !isUndefined(y) &&
-      this.props.dispatch(chooseLocationAction({
-        x: parseFloat(x), y: parseFloat(y), z: parseFloat(z)
-      }));
+    if (!this.chosenXY && !isUndefined(x) && !isUndefined(y)) {
+      const loc = { x: parseFloat(x), y: parseFloat(y), z: parseFloat(z) };
+      this.props.dispatch(chooseLocationAction(loc));
+    }
   }
 
   componentWillUnmount() {
@@ -141,7 +146,7 @@ export class RawLocationInfo extends React.Component<LocationInfoProps, {}> {
               botOnline={this.props.botOnline}
               locked={this.props.locked}
               dispatch={this.props.dispatch} />
-            <h1>{t("Nearby")}</h1>
+            <h2>{t("Nearby")}</h2>
             {[
               {
                 title: t("Plants"),
@@ -184,6 +189,8 @@ export class RawLocationInfo extends React.Component<LocationInfoProps, {}> {
 }
 
 export const LocationInfo = connect(mapStateToProps)(RawLocationInfo);
+// eslint-disable-next-line import/no-default-export
+export default LocationInfo;
 
 type Item = TaggedPlantPointer
   | TaggedGenericPointer
@@ -453,8 +460,9 @@ interface LocationActionsProps {
   chosenLocation: BotPosition;
 }
 
-const LocationActions = (props: LocationActionsProps) =>
-  <div className={"location-actions"}>
+const LocationActions = (props: LocationActionsProps) => {
+  const navigate = useNavigate();
+  return <div className={"location-actions"}>
     <MoveToForm
       chosenLocation={props.chosenLocation}
       currentBotLocation={props.currentBotLocation}
@@ -481,8 +489,9 @@ const LocationActions = (props: LocationActionsProps) =>
             cy: props.chosenLocation.y,
           }
         });
-        push(Path.points("add"));
+        navigate(Path.points("add"));
       }}>
       {t("Add point at this location")}
     </button>
   </div>;
+};
diff --git a/frontend/farm_designer/map/__tests__/actions_test.ts b/frontend/farm_designer/map/__tests__/actions_test.ts
index d67f3064e3..cd8366c1a1 100644
--- a/frontend/farm_designer/map/__tests__/actions_test.ts
+++ b/frontend/farm_designer/map/__tests__/actions_test.ts
@@ -1,10 +1,3 @@
-import { FilePath, Path } from "../../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../../api/crud", () => ({ edit: jest.fn() }));
 
 jest.mock("../../../point_groups/actions", () => ({
@@ -29,7 +22,6 @@ import { MovePointToProps, MovePointsProps } from "../../interfaces";
 import { edit } from "../../../api/crud";
 import { Actions } from "../../../constants";
 import { svgToUrl } from "../../../open_farm/icons";
-import { push } from "../../../history";
 import { fakeState } from "../../../__test_support__/fake_state";
 import { GetState } from "../../../redux/interfaces";
 import {
@@ -37,6 +29,7 @@ import {
 } from "../../../__test_support__/resource_index_builder";
 import { overwriteGroup } from "../../../point_groups/actions";
 import { mockDispatch } from "../../../__test_support__/fake_dispatch";
+import { FilePath, Path } from "../../../internal_urls";
 
 describe("movePoints", () => {
   it.each<[string, Record<"x" | "y", number>, Record<"x" | "y", number>]>([
@@ -85,28 +78,31 @@ describe("movePointTo", () => {
 
 describe("closePlantInfo()", () => {
   it("no plant info open", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    closePlantInfo(dispatch)();
-    expect(push).not.toHaveBeenCalled();
+    closePlantInfo(navigate, dispatch)();
+    expect(navigate).not.toHaveBeenCalled();
     expect(dispatch).not.toHaveBeenCalled();
   });
 
   it("plant edit open", () => {
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    closePlantInfo(dispatch)();
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    closePlantInfo(navigate, dispatch)();
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
     expect(dispatch).toHaveBeenCalledWith({
       payload: undefined, type: Actions.SELECT_POINT
     });
   });
 
   it("plant info open", () => {
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    closePlantInfo(dispatch)();
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    closePlantInfo(navigate, dispatch)();
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
     expect(dispatch).toHaveBeenCalledWith({
       payload: undefined, type: Actions.SELECT_POINT
     });
@@ -145,7 +141,7 @@ describe("clickMapPlant", () => {
   });
 
   it("adds a point to current group if group editor is active", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     mockGroup.body.point_ids = [1];
     const state = fakeState();
     const plant = fakePlant();
@@ -162,7 +158,7 @@ describe("clickMapPlant", () => {
   });
 
   it("doesn't add a point to current group", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     mockGroup.body.point_ids = [1];
     const state = fakeState();
     state.resources = buildResourceIndex([]);
@@ -174,7 +170,7 @@ describe("clickMapPlant", () => {
   });
 
   it("removes a point from the current group if group editor is active", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     mockGroup.body.point_ids = [1, 2];
     const state = fakeState();
     const plant = fakePlant();
@@ -191,7 +187,7 @@ describe("clickMapPlant", () => {
   });
 
   it("adds a plant to the current selection if plant select is active", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     const state = fakeState();
     const plant = fakePlant();
     plant.uuid = "Point.fakePlantUuid";
@@ -206,7 +202,7 @@ describe("clickMapPlant", () => {
   });
 
   it("removes a plant to the current selection if plant select is active", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     const state = fakeState();
     const plant = fakePlant();
     plant.uuid = "Point.fakePlantUuid";
@@ -224,26 +220,43 @@ describe("clickMapPlant", () => {
 
 describe("mapPointClickAction()", () => {
   it("navigates", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    mapPointClickAction(dispatch, "uuid", "fake path")();
-    expect(push).toHaveBeenCalledWith("fake path");
-    expect(dispatch).not.toHaveBeenCalled();
+    const outerDispatch = mockDispatch(dispatch, fakeState);
+    mapPointClickAction(navigate, outerDispatch, "uuid", "fake path")();
+    expect(navigate).toHaveBeenCalledWith("fake path");
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN,
+      payload: true,
+    });
   });
 
   it("doesn't navigate: box select", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    mapPointClickAction(dispatch, "uuid", "fake path")();
-    expect(push).not.toHaveBeenCalled();
-    expect(dispatch).toHaveBeenCalled();
+    const outerDispatch = mockDispatch(dispatch, fakeState);
+    mapPointClickAction(navigate, outerDispatch, "uuid", "fake path")();
+    expect(navigate).not.toHaveBeenCalled();
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SELECT_POINT,
+      payload: ["uuid"],
+    });
   });
 
   it("doesn't navigate: group edit", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    mapPointClickAction(dispatch, "uuid", "fake path")();
-    expect(push).not.toHaveBeenCalled();
-    expect(dispatch).toHaveBeenCalled();
+    const outerDispatch = mockDispatch(dispatch, fakeState);
+    mapPointClickAction(navigate, outerDispatch, "uuid", "fake path")();
+    expect(navigate).not.toHaveBeenCalled();
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(dispatch).not.toHaveBeenCalledWith(expect.objectContaining({
+      type: expect.any(String),
+    }));
   });
 });
diff --git a/frontend/farm_designer/map/__tests__/garden_map_test.tsx b/frontend/farm_designer/map/__tests__/garden_map_test.tsx
index 9f06e91852..c59de2d539 100644
--- a/frontend/farm_designer/map/__tests__/garden_map_test.tsx
+++ b/frontend/farm_designer/map/__tests__/garden_map_test.tsx
@@ -52,13 +52,6 @@ jest.mock("../profile", () => ({
   ProfileLine: () => <g />,
 }));
 
-import { Path } from "../../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 let mockGroup: TaggedPointGroup | undefined = undefined;
 jest.mock("../../../point_groups/group_detail", () => ({
   findGroupFromUrl: () => mockGroup,
@@ -87,7 +80,6 @@ import {
   fakePlant, fakePointGroup, fakePoint, fakeSensorReading,
 } from "../../../__test_support__/fake_state/resources";
 import { fakeTimeSettings } from "../../../__test_support__/fake_time_settings";
-import { push } from "../../../history";
 import { TaggedPointGroup } from "farmbot";
 import { fakeMountedToolInfo } from "../../../__test_support__/fake_tool_info";
 import {
@@ -102,6 +94,8 @@ import {
 } from "../../../__test_support__/map_transform_props";
 import { keyboardEvent } from "../../../__test_support__/fake_html_events";
 import { times } from "lodash";
+import { Path } from "../../../internal_urls";
+import { mountWithContext } from "../../../__test_support__/mount_with_context";
 
 const DEFAULT_EVENT = { preventDefault: jest.fn(), pageX: NaN, pageY: NaN };
 
@@ -244,65 +238,65 @@ describe("<GardenMap/>", () => {
   it("starts drag on background: selecting", () => {
     const p = fakeProps();
     p.designer.selectedPoints = ["fakePointUuid"];
-    const wrapper = mount(<GardenMap {...p} />);
+    const wrapper = mountWithContext(<GardenMap {...p} />);
     mockMode = Mode.addPlant;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewSelectionBox).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
     expect(getGardenCoordinates).toHaveBeenCalledWith(
       expect.objectContaining(e));
   });
 
   it("starts drag on background: selecting again", () => {
-    const wrapper = mount(<GardenMap {...fakeProps()} />);
+    const wrapper = mountWithContext(<GardenMap {...fakeProps()} />);
     mockMode = Mode.boxSelect;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewSelectionBox).toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(getGardenCoordinates).toHaveBeenCalledWith(
       expect.objectContaining(e));
   });
 
   it("starts drag on background: does nothing when adding plants", () => {
-    const wrapper = mount(<GardenMap {...fakeProps()} />);
+    const wrapper = mountWithContext(<GardenMap {...fakeProps()} />);
     mockMode = Mode.clickToAdd;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewSelectionBox).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(getGardenCoordinates).not.toHaveBeenCalled();
   });
 
   it("starts drag on background: does nothing when in move mode", () => {
-    const wrapper = mount(<GardenMap {...fakeProps()} />);
+    const wrapper = mountWithContext(<GardenMap {...fakeProps()} />);
     mockMode = Mode.locationInfo;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewSelectionBox).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(getGardenCoordinates).not.toHaveBeenCalled();
   });
 
   it("starts drag on background: does nothing when in profile mode", () => {
-    const wrapper = mount(<GardenMap {...fakeProps()} />);
+    const wrapper = mountWithContext(<GardenMap {...fakeProps()} />);
     mockMode = Mode.profile;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewSelectionBox).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(getGardenCoordinates).not.toHaveBeenCalled();
   });
 
   it("starts drag on background: creating points", () => {
-    const wrapper = mount(<GardenMap {...fakeProps()} />);
+    const wrapper = mountWithContext(<GardenMap {...fakeProps()} />);
     mockMode = Mode.createPoint;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewPoint).toHaveBeenCalled();
     expect(startNewSelectionBox).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(getGardenCoordinates).toHaveBeenCalledWith(
       expect.objectContaining(e));
   });
@@ -310,19 +304,19 @@ describe("<GardenMap/>", () => {
   it("starts drag on background: selecting zone", () => {
     const p = fakeProps();
     p.designer.editGroupAreaInMap = true;
-    const wrapper = mount(<GardenMap {...p} />);
+    const wrapper = mountWithContext(<GardenMap {...p} />);
     mockMode = Mode.editGroup;
     const e = { pageX: 1000, pageY: 2000 };
     wrapper.find(".drop-area-background").simulate("mouseDown", e);
     expect(startNewSelectionBox).toHaveBeenCalledWith(
       expect.objectContaining({ plantActions: false }));
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(getGardenCoordinates).toHaveBeenCalledWith(
       expect.objectContaining(e));
   });
 
   it("starts drag on background: opening location info", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     p.designer.selectedPoints = [];
     p.designer.hoveredPlant = { icon: "", plantUUID: undefined };
@@ -548,8 +542,9 @@ describe("<GardenMap/>", () => {
     wrapper.setState({
       toLocation: { x: 100, y: 100, z: 0 }, previousSelectionBoxArea: 0,
     });
+    wrapper.instance().navigate = jest.fn();
     wrapper.instance().closePanel()();
-    expect(push).toHaveBeenCalledWith(
+    expect(wrapper.instance().navigate).toHaveBeenCalledWith(
       expect.stringContaining(Path.location()));
     expect(closePlantInfo).toHaveBeenCalled();
     expect(wrapper.state().toLocation).toEqual(undefined);
@@ -562,8 +557,9 @@ describe("<GardenMap/>", () => {
     wrapper.setState({
       toLocation: { x: 100, y: 100, z: 0 }, previousSelectionBoxArea: 1000,
     });
+    wrapper.instance().navigate = jest.fn();
     wrapper.instance().closePanel()();
-    expect(push).not.toHaveBeenCalledWith(
+    expect(wrapper.instance().navigate).not.toHaveBeenCalledWith(
       expect.stringContaining(Path.location()));
     expect(closePlantInfo).toHaveBeenCalled();
     expect(wrapper.state().toLocation).toEqual(undefined);
diff --git a/frontend/farm_designer/map/__tests__/sequence_visualization_test.tsx b/frontend/farm_designer/map/__tests__/sequence_visualization_test.tsx
index ee5d148675..ac7af62e0b 100644
--- a/frontend/farm_designer/map/__tests__/sequence_visualization_test.tsx
+++ b/frontend/farm_designer/map/__tests__/sequence_visualization_test.tsx
@@ -1,8 +1,3 @@
-let mockPath = "";
-jest.mock("../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import {
   fakeToolSlot, fakePoint,
 } from "../../../__test_support__/fake_state/resources";
@@ -155,7 +150,7 @@ describe("<SequenceVisualization />", () => {
 
 describe("hoverSequenceStep()", () => {
   it("sets hovered step", () => {
-    mockPath = Path.mock(Path.designerSequences("1"));
+    location.pathname = Path.mock(Path.designerSequences("1"));
     const dispatch = jest.fn();
     hoverSequenceStep("uuid")(dispatch)();
     expect(dispatch).toHaveBeenCalledWith({
@@ -165,7 +160,7 @@ describe("hoverSequenceStep()", () => {
   });
 
   it("doesn't set hovered step", () => {
-    mockPath = Path.mock(Path.sequencePage("1"));
+    location.pathname = Path.mock(Path.sequencePage("1"));
     const dispatch = jest.fn();
     hoverSequenceStep("uuid")(dispatch)();
     expect(dispatch).not.toHaveBeenCalled();
diff --git a/frontend/farm_designer/map/__tests__/util_test.ts b/frontend/farm_designer/map/__tests__/util_test.ts
index 7700fb7df3..70c85b6699 100644
--- a/frontend/farm_designer/map/__tests__/util_test.ts
+++ b/frontend/farm_designer/map/__tests__/util_test.ts
@@ -3,11 +3,6 @@ jest.mock("../../../screen_size", () => ({
   isMobile: () => mockIsMobile,
 }));
 
-let mockPath = "";
-jest.mock("../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import { fakeState } from "../../../__test_support__/fake_state";
 const mockState = fakeState();
 jest.mock("../../../redux/store", () => ({
@@ -31,6 +26,7 @@ import {
   savedGardenOpen,
   scaleIcon,
   defaultSpreadCmDia,
+  GetGardenCoordinatesProps,
 } from "../util";
 import { McuParams, Xyz } from "farmbot";
 import { BotSize, MapTransformProps, Mode } from "../interfaces";
@@ -41,6 +37,7 @@ import {
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 import { Path } from "../../../internal_urls";
 import { BotOriginQuadrant } from "../../interfaces";
+import { fakeDesignerState } from "../../../__test_support__/fake_designer_state";
 
 describe("round()", () => {
   it("rounds a number", () => {
@@ -51,27 +48,31 @@ describe("round()", () => {
 
 describe("mapPanelClassName()", () => {
   it("returns correct panel status: short panel", () => {
+    location.pathname = Path.mock(Path.location());
+    const designer = fakeDesignerState();
     mockIsMobile = true;
-    mockPath = Path.mock(Path.location());
-    expect(mapPanelClassName()).toEqual("short-panel");
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
-    expect(mapPanelClassName()).toEqual("short-panel");
+    expect(mapPanelClassName(designer)).toEqual("short-panel");
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
+    expect(mapPanelClassName(designer)).toEqual("short-panel");
   });
 
   it("returns correct panel status: panel open", () => {
+    location.pathname = Path.mock(Path.location());
+    const designer = fakeDesignerState();
     mockIsMobile = false;
-    mockPath = Path.mock(Path.location());
-    expect(mapPanelClassName()).toEqual("panel-open");
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
-    expect(mapPanelClassName()).toEqual("panel-open");
+    expect(mapPanelClassName(designer)).toEqual("panel-open");
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
+    expect(mapPanelClassName(designer)).toEqual("panel-open");
   });
 
   it("returns correct panel status: panel closed", () => {
+    location.pathname = Path.mock(Path.plants());
+    const designer = fakeDesignerState();
+    designer.panelOpen = false;
     mockIsMobile = false;
-    mockPath = Path.mock(Path.designer());
-    expect(mapPanelClassName()).toEqual("panel-closed");
+    expect(mapPanelClassName(designer)).toEqual("panel-closed");
     mockIsMobile = true;
-    expect(mapPanelClassName()).toEqual("panel-closed-mobile");
+    expect(mapPanelClassName(designer)).toEqual("panel-closed-mobile");
   });
 });
 
@@ -85,7 +86,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.open,
     });
-    expect(result).toEqual({ x: 30, y: 80 });
+    expect(result).toEqual({ x: 30, y: 100 });
   });
 
   it("translates screen coords to garden coords: zoomLvl < 1", () => {
@@ -97,7 +98,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.open,
     });
-    expect(result).toEqual({ x: 2010, y: 840 });
+    expect(result).toEqual({ x: 1990, y: 910 });
   });
 
   it("translates screen coords to garden coords: zoomLvl > 1", () => {
@@ -109,7 +110,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.open,
     });
-    expect(result).toEqual({ x: 420, y: 150 });
+    expect(result).toEqual({ x: 410, y: 170 });
   });
 
   it("translates screen coords to garden coords: other case", () => {
@@ -124,7 +125,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.open,
     });
-    expect(result).toEqual({ x: 70, y: 130 });
+    expect(result).toEqual({ x: 60, y: 110 });
   });
 
   it("translates screen coords to garden coords: swapped X&Y", () => {
@@ -140,7 +141,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.open,
     });
-    expect(result).toEqual({ x: 130, y: 70 });
+    expect(result).toEqual({ x: 110, y: 60 });
   });
 
   it("translates screen coords to garden coords: panel closed", () => {
@@ -152,7 +153,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.closed,
     });
-    expect(result).toEqual({ x: 480, y: 80 });
+    expect(result).toEqual({ x: 490, y: 100 });
   });
 
   it("translates screen coords to garden coords: panel closed mobile", () => {
@@ -164,7 +165,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.mobileClosed,
     });
-    expect(result).toEqual({ x: 480, y: 30 });
+    expect(result).toEqual({ x: 490, y: 30 });
   });
 
   it("translates screen coords to garden coords: short panel", () => {
@@ -176,7 +177,7 @@ describe("translateScreenToGarden()", () => {
       gridOffset: { x: 30, y: 40 },
       panelStatus: MapPanelStatus.short,
     });
-    expect(result).toEqual({ x: 480, y: 40 });
+    expect(result).toEqual({ x: 490, y: 40 });
   });
 });
 
@@ -393,42 +394,42 @@ describe("transformForQuadrant()", () => {
 
 describe("getMode()", () => {
   it("returns correct Mode", () => {
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
     expect(getMode()).toEqual(Mode.clickToAdd);
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
     expect(getMode()).toEqual(Mode.editPlant);
-    mockPath = Path.mock(Path.plantTemplates(1));
+    location.pathname = Path.mock(Path.plantTemplates(1));
     expect(getMode()).toEqual(Mode.editPlant);
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     expect(getMode()).toEqual(Mode.boxSelect);
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     expect(getMode()).toEqual(Mode.clickToAdd);
-    mockPath = Path.mock(Path.location());
+    location.pathname = Path.mock(Path.location());
     expect(getMode()).toEqual(Mode.locationInfo);
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     expect(getMode()).toEqual(Mode.points);
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
     expect(getMode()).toEqual(Mode.createPoint);
-    mockPath = Path.mock(Path.weeds());
+    location.pathname = Path.mock(Path.weeds());
     expect(getMode()).toEqual(Mode.weeds);
-    mockPath = Path.mock(Path.weeds("add"));
+    location.pathname = Path.mock(Path.weeds("add"));
     expect(getMode()).toEqual(Mode.createWeed);
-    mockPath = Path.mock(Path.savedGardens(1));
+    location.pathname = Path.mock(Path.savedGardens(1));
     expect(getMode()).toEqual(Mode.templateView);
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     expect(getMode()).toEqual(Mode.editGroup);
-    mockPath = "";
+    location.pathname = "";
     mockState.resources.consumers.farm_designer.profileOpen = true;
     expect(getMode()).toEqual(Mode.profile);
     mockState.resources.consumers.farm_designer.profileOpen = false;
-    mockPath = "";
+    location.pathname = "";
     expect(getMode()).toEqual(Mode.none);
   });
 });
 
 describe("savedGardenOpen", () => {
   it("is open", () => {
-    mockPath = Path.mock(Path.savedGardens(4));
+    location.pathname = Path.mock(Path.savedGardens(4));
     const result = savedGardenOpen();
     expect(result).toEqual(4);
   });
@@ -445,16 +446,17 @@ describe("getGardenCoordinates()", () => {
     });
   });
 
-  const fakeProps = () => ({
+  const fakeProps = (): GetGardenCoordinatesProps => ({
     mapTransformProps: fakeMapTransformProps(),
     gridOffset: { x: 10, y: 20 },
     pageX: 500,
     pageY: 200,
+    designer: fakeDesignerState(),
   });
 
   it("returns garden coordinates", () => {
     const result = getGardenCoordinates(fakeProps());
-    expect(result).toEqual({ x: 20, y: 70 });
+    expect(result).toEqual({ x: 20, y: 90 });
   });
 
   it("falls back to zoom level", () => {
@@ -462,7 +464,7 @@ describe("getGardenCoordinates()", () => {
       value: () => ({ transform: undefined }), configurable: true
     });
     const result = getGardenCoordinates(fakeProps());
-    expect(result).toEqual({ x: 20, y: 70 });
+    expect(result).toEqual({ x: 20, y: 90 });
   });
 
   it("returns undefined", () => {
@@ -477,34 +479,34 @@ describe("getGardenCoordinates()", () => {
 
 describe("allowInteraction()", () => {
   it("allows interaction", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     expect(allowInteraction()).toBeTruthy();
   });
 
   it("disallows interaction", () => {
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
     expect(allowInteraction()).toBeFalsy();
-    mockPath = Path.mock(Path.location());
+    location.pathname = Path.mock(Path.location());
     expect(allowInteraction()).toBeFalsy();
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
     expect(allowInteraction()).toBeFalsy();
-    mockPath = Path.mock(Path.weeds("add"));
+    location.pathname = Path.mock(Path.weeds("add"));
     expect(allowInteraction()).toBeFalsy();
   });
 });
 
 describe("allowGroupAreaInteraction()", () => {
   it("allows interaction", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     expect(allowGroupAreaInteraction()).toBeTruthy();
   });
 
   it("disallows interaction", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     expect(allowGroupAreaInteraction()).toBeFalsy();
-    mockPath = Path.mock(Path.location());
+    location.pathname = Path.mock(Path.location());
     expect(allowGroupAreaInteraction()).toBeFalsy();
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     expect(allowGroupAreaInteraction()).toBeFalsy();
   });
 });
diff --git a/frontend/farm_designer/map/actions.ts b/frontend/farm_designer/map/actions.ts
index 1ffb0bb754..8b63c1cbdd 100644
--- a/frontend/farm_designer/map/actions.ts
+++ b/frontend/farm_designer/map/actions.ts
@@ -1,7 +1,6 @@
 import { MovePointsProps, DraggableEvent, MovePointToProps } from "../interfaces";
 import { defensiveClone } from "../../util";
 import { edit } from "../../api/crud";
-import { push } from "../../history";
 import { Actions } from "../../constants";
 import { svgToUrl } from "../../open_farm/icons";
 import { Mode } from "../map/interfaces";
@@ -14,6 +13,8 @@ import { ResourceIndex, UUID } from "../../resources/interfaces";
 import { selectAllPointGroups } from "../../resources/selectors";
 import { overwriteGroup } from "../../point_groups/actions";
 import { FilePath, Path } from "../../internal_urls";
+import { NavigateFunction } from "react-router";
+import { setPanelOpen } from "../panel_header";
 
 export const movePoints = (payload: MovePointsProps) => (dispatch: Function) => {
   payload.points.map(point => {
@@ -100,11 +101,14 @@ export const unselectPlant = (dispatch: Function) => () => {
 };
 
 /** Unselect plant and close plant info or select panel if selected and open. */
-export const closePlantInfo = (dispatch: Function) => () => {
+export const closePlantInfo = (
+  navigate: NavigateFunction,
+  dispatch: Function,
+) => () => {
   const mode = getMode();
   if (mode == Mode.editPlant || mode == Mode.boxSelect) {
     unselectPlant(dispatch)();
-    push(Path.plants());
+    navigate(Path.plants());
   }
 };
 
@@ -119,12 +123,17 @@ export const setDragIcon =
   };
 
 export const mapPointClickAction =
-  (dispatch: Function, uuid: UUID, path?: string) => () => {
+  (navigate: NavigateFunction,
+    dispatch: Function,
+    uuid: UUID,
+    path?: string,
+  ) => () => {
     switch (getMode()) {
       case Mode.editGroup:
       case Mode.boxSelect:
         return dispatch(clickMapPlant(uuid, ""));
       default:
-        return path && push(path);
+        dispatch(setPanelOpen(true));
+        return path && navigate(path);
     }
   };
diff --git a/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx b/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx
index 9d4c77ea8c..3d8441dc4c 100644
--- a/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx
+++ b/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx
@@ -1,10 +1,3 @@
-import { Path, FilePath } from "../../../../internal_urls";
-let mockPath = Path.mock(Path.cropSearch());
-jest.mock("../../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 import { mount } from "enzyme";
 import React from "react";
 import { AddPlantIcon, AddPlantIconProps } from "../add_plant_icon";
@@ -15,6 +8,7 @@ import {
   fakeCropLiveSearchResult,
 } from "../../../../__test_support__/fake_crop_search_result";
 import { svgToUrl } from "../../../../open_farm/icons";
+import { FilePath, Path } from "../../../../internal_urls";
 
 describe("<AddPlantIcon />", () => {
   const fakeProps = (): AddPlantIconProps => ({
@@ -37,7 +31,7 @@ describe("<AddPlantIcon />", () => {
   });
 
   it("returns specific icon", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const result = fakeCropLiveSearchResult();
     result.crop.svg_icon = "fake_icon";
diff --git a/frontend/farm_designer/map/active_plant/active_plant_drag_helper.tsx b/frontend/farm_designer/map/active_plant/active_plant_drag_helper.tsx
index 61d4f81b88..a6428f58d4 100644
--- a/frontend/farm_designer/map/active_plant/active_plant_drag_helper.tsx
+++ b/frontend/farm_designer/map/active_plant/active_plant_drag_helper.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ActivePlantDragHelperProps } from "../interfaces";
 import { DragHelpers } from "./drag_helpers";
 
diff --git a/frontend/farm_designer/map/active_plant/drag_helpers.tsx b/frontend/farm_designer/map/active_plant/drag_helpers.tsx
index cba6eb0988..b1612507ce 100644
--- a/frontend/farm_designer/map/active_plant/drag_helpers.tsx
+++ b/frontend/farm_designer/map/active_plant/drag_helpers.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
 import { DragHelpersProps } from "../interfaces";
 import { round, transformXY, getMapSize } from "../util";
 import { BotPosition } from "../../../devices/interfaces";
-import { Color } from "../../../ui/index";
+import { Color } from "../../../ui";
 import { isUndefined } from "lodash";
 
 enum Alignment {
diff --git a/frontend/farm_designer/map/background/__tests__/map_background_test.tsx b/frontend/farm_designer/map/background/__tests__/map_background_test.tsx
index a5a44f6954..6a384a07c1 100644
--- a/frontend/farm_designer/map/background/__tests__/map_background_test.tsx
+++ b/frontend/farm_designer/map/background/__tests__/map_background_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { MapBackground } from "../map_background";
 import { shallow } from "enzyme";
 import { MapBackgroundProps } from "../../interfaces";
diff --git a/frontend/farm_designer/map/background/__tests__/selection_box_actions_test.ts b/frontend/farm_designer/map/background/__tests__/selection_box_actions_test.ts
index c9c71a733d..20789c3819 100644
--- a/frontend/farm_designer/map/background/__tests__/selection_box_actions_test.ts
+++ b/frontend/farm_designer/map/background/__tests__/selection_box_actions_test.ts
@@ -20,7 +20,6 @@ import {
   MaybeUpdateGroupProps,
 } from "../selection_box_actions";
 import { Actions } from "../../../../constants";
-import { push } from "../../../../history";
 import { editGtLtCriteria } from "../../../../point_groups/criteria";
 import { cloneDeep } from "lodash";
 import { overwriteGroup } from "../../../../point_groups/actions";
@@ -60,6 +59,7 @@ describe("resizeBox", () => {
     setMapState: jest.fn(),
     dispatch: jest.fn(),
     plantActions: true,
+    navigate: jest.fn(),
   });
 
   it("resizes selection box without point selection", () => {
@@ -117,7 +117,7 @@ describe("resizeBox", () => {
       type: Actions.SELECT_POINT,
       payload: [plant.uuid]
     });
-    expect(push).toHaveBeenCalledWith(Path.plants("select"));
+    expect(p.navigate).toHaveBeenCalledWith(Path.plants("select"));
   });
 });
 
diff --git a/frontend/farm_designer/map/background/map_background.tsx b/frontend/farm_designer/map/background/map_background.tsx
index 9f022fc8b1..2be55ed905 100644
--- a/frontend/farm_designer/map/background/map_background.tsx
+++ b/frontend/farm_designer/map/background/map_background.tsx
@@ -21,12 +21,12 @@ export function MapBackground(props: MapBackgroundProps) {
     </defs>
 
     <rect id="bed-border"
-      x={0} y={0} width={mapSize.w} height={mapSize.h}
+      x={0} y={0} width={mapSize.w} height={mapSize.h} rx={10}
       fill={bkgdColor} />
     <rect id="bed-interior" x={boardWidth / 2} y={boardWidth / 2}
       width={mapSize.w - boardWidth} height={mapSize.h - boardWidth}
       stroke={edgeColor} strokeWidth={boardWidth}
-      fill={bkgdColor} />
+      fill={bkgdColor} rx={1} />
     <rect id="no-access-perimeter" x={boardWidth} y={boardWidth}
       width={mapSize.w - boardWidth * 2} height={mapSize.h - boardWidth * 2}
       fill="url(#diagonalHatch)" />
diff --git a/frontend/farm_designer/map/background/selection_box_actions.ts b/frontend/farm_designer/map/background/selection_box_actions.ts
index 1c7cdc2c2e..f39a6190ba 100644
--- a/frontend/farm_designer/map/background/selection_box_actions.ts
+++ b/frontend/farm_designer/map/background/selection_box_actions.ts
@@ -2,7 +2,6 @@ import { isNumber, uniq, cloneDeep, isEqual } from "lodash";
 import { TaggedPlant, AxisNumberProperty, Mode } from "../interfaces";
 import { SelectionBoxData } from "./selection_box";
 import { GardenMapState } from "../../interfaces";
-import { push } from "../../../history";
 import { selectPoint } from "../actions";
 import { getMode } from "../util";
 import { editGtLtCriteria } from "../../../point_groups/criteria";
@@ -13,6 +12,7 @@ import { getFilteredPoints } from "../../../plants/select_plants";
 import { GetWebAppConfigValue } from "../../../config_storage/actions";
 import { overwriteGroup } from "../../../point_groups/actions";
 import { Path } from "../../../internal_urls";
+import { NavigateFunction } from "react-router";
 
 /** Return all plants within the selection box. */
 export const getSelected = (
@@ -44,6 +44,7 @@ export interface ResizeSelectionBoxProps {
   setMapState: (x: Partial<GardenMapState>) => void;
   dispatch: Function;
   plantActions: boolean;
+  navigate: NavigateFunction;
 }
 
 /** Resize a selection box. */
@@ -66,7 +67,7 @@ export const resizeBox = (props: ResizeSelectionBoxProps) => {
           });
         const payload = getSelected(points, newSelectionBox);
         if (payload && getMode() === Mode.none) {
-          push(Path.plants("select"));
+          props.navigate(Path.plants("select"));
         }
         props.dispatch(selectPoint(payload));
       }
diff --git a/frontend/farm_designer/map/drawn_point/__tests__/drawn_point_test.tsx b/frontend/farm_designer/map/drawn_point/__tests__/drawn_point_test.tsx
index 2848e9faeb..4551ecd8e4 100644
--- a/frontend/farm_designer/map/drawn_point/__tests__/drawn_point_test.tsx
+++ b/frontend/farm_designer/map/drawn_point/__tests__/drawn_point_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DrawnPoint, DrawnPointProps } from "../drawn_point";
 import {
   fakeMapTransformProps,
diff --git a/frontend/farm_designer/map/drawn_point/__tests__/drawn_weed_test.tsx b/frontend/farm_designer/map/drawn_point/__tests__/drawn_weed_test.tsx
index 530a87ab27..67e24299a1 100644
--- a/frontend/farm_designer/map/drawn_point/__tests__/drawn_weed_test.tsx
+++ b/frontend/farm_designer/map/drawn_point/__tests__/drawn_weed_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DrawnWeed, DrawnWeedProps } from "../drawn_weed";
 import {
   fakeMapTransformProps,
diff --git a/frontend/farm_designer/map/drawn_point/drawn_point.tsx b/frontend/farm_designer/map/drawn_point/drawn_point.tsx
index 88f55f525b..fdcebf6936 100644
--- a/frontend/farm_designer/map/drawn_point/drawn_point.tsx
+++ b/frontend/farm_designer/map/drawn_point/drawn_point.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { MapTransformProps } from "../interfaces";
 import { transformXY } from "../util";
 import { DrawnPointPayl } from "../../interfaces";
diff --git a/frontend/farm_designer/map/drawn_point/drawn_weed.tsx b/frontend/farm_designer/map/drawn_point/drawn_weed.tsx
index cd09c83f8d..1781d7ed44 100644
--- a/frontend/farm_designer/map/drawn_point/drawn_weed.tsx
+++ b/frontend/farm_designer/map/drawn_point/drawn_weed.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { MapTransformProps } from "../interfaces";
 import { transformXY } from "../util";
 import { DrawnWeedPayl } from "../../interfaces";
diff --git a/frontend/farm_designer/map/easter_eggs/bugs.tsx b/frontend/farm_designer/map/easter_eggs/bugs.tsx
index fc06b00d28..98f7359796 100644
--- a/frontend/farm_designer/map/easter_eggs/bugs.tsx
+++ b/frontend/farm_designer/map/easter_eggs/bugs.tsx
@@ -4,7 +4,7 @@ import { MapTransformProps, BotSize } from "../interfaces";
 import { random, range, some, clamp, sample } from "lodash";
 import { getEggStatus, setEggStatus, EggKeys } from "./status";
 import { t } from "../../../i18next_wrapper";
-import { Row, Col, ToggleButton } from "../../../ui";
+import { Row, ToggleButton } from "../../../ui";
 import { BUGS, FilePath, Bug as BugSlug } from "../../../internal_urls";
 import { showByEveryTerm } from "../../../settings";
 
@@ -135,18 +135,12 @@ export const BugsControls = () =>
 
 const Setting = (title: string, key: string, value: string) => {
   const on = localStorage.getItem(key) == value;
-  return <div className={"setting"}>
-    <Row>
-      <Col xs={9}>
-        <label>{title}</label>
-      </Col>
-      <Col xs={3}>
-        <ToggleButton
-          toggleValue={on}
-          toggleAction={() => localStorage.setItem(key, on ? "" : value)} />
-      </Col>
-    </Row>
-  </div>;
+  return <Row className={"setting grid-exp-1"}>
+    <label>{title}</label>
+    <ToggleButton
+      toggleValue={on}
+      toggleAction={() => localStorage.setItem(key, on ? "" : value)} />
+  </Row>;
 };
 
 export const ExtraSettings = (searchTerm: string) => {
diff --git a/frontend/farm_designer/map/garden_map.tsx b/frontend/farm_designer/map/garden_map.tsx
index 6a8750626b..09e9d3ee8f 100644
--- a/frontend/farm_designer/map/garden_map.tsx
+++ b/frontend/farm_designer/map/garden_map.tsx
@@ -36,7 +36,6 @@ import {
 } from "./layers/plants/plant_actions";
 import { chooseLocation } from "../move_to";
 import { GroupOrder } from "./group_order_visual";
-import { push } from "../../history";
 import { ErrorBoundary } from "../../error_boundary";
 import { TaggedPoint, TaggedPointGroup, PointType } from "farmbot";
 import { findGroupFromUrl } from "../../point_groups/group_detail";
@@ -49,6 +48,9 @@ import { chooseProfile, ProfileLine } from "./profile";
 import { betterCompact } from "../../util";
 import { Path } from "../../internal_urls";
 import { AddPlantIcon } from "./active_plant/add_plant_icon";
+import { NavigationContext } from "../../routes_helpers";
+import { NavigateFunction } from "react-router";
+import { setPanelOpen } from "../panel_header";
 
 const BOUND_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 
@@ -60,6 +62,10 @@ export class GardenMap extends
     this.state = {};
   }
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate: NavigateFunction = url => { this.context(url as string); };
+
   componentDidMount = () => {
     document.onkeydown = this.onKeyDown as never;
     document.onkeyup = this.onKeyUp as never;
@@ -136,6 +142,7 @@ export class GardenMap extends
         gridOffset: this.props.gridOffset,
         pageX: e.pageX,
         pageY: e.pageY,
+        designer: this.props.designer,
       });
     };
 
@@ -234,7 +241,7 @@ export class GardenMap extends
             return true;
           }
         };
-        openLocationInfo(e) && push(Path.plants());
+        openLocationInfo(e) && this.navigate(Path.plants());
         startNewSelectionBox({
           gardenCoords: this.getGardenCoordinates(e),
           setMapState: this.setMapState,
@@ -314,7 +321,9 @@ export class GardenMap extends
         break;
       case Mode.locationInfo:
         e.preventDefault();
+        this.props.dispatch(setPanelOpen(true));
         !this.state.toLocation && chooseLocation({
+          navigate: this.navigate,
           gardenCoords: this.getGardenCoordinates(e),
           dispatch: this.props.dispatch
         });
@@ -363,6 +372,7 @@ export class GardenMap extends
         break;
       case Mode.editGroup:
         resizeBox({
+          navigate: this.navigate,
           selectionBox: this.state.selectionBox,
           plants: this.props.plants,
           allPoints: this.props.allPoints,
@@ -380,6 +390,7 @@ export class GardenMap extends
       case Mode.boxSelect:
       default:
         resizeBox({
+          navigate: this.navigate,
           selectionBox: this.state.selectionBox,
           plants: this.props.plants,
           allPoints: this.props.allPoints,
@@ -452,19 +463,19 @@ export class GardenMap extends
       case Mode.boxSelect:
         return this.props.designer.selectedPoints
           ? () => { }
-          : closePlantInfo(this.props.dispatch);
+          : closePlantInfo(this.navigate, this.props.dispatch);
       default:
         return () => {
           const area = this.state.previousSelectionBoxArea;
           const box = area && area > 10;
           if (this.state.toLocation &&
             [Mode.none, Mode.points, Mode.weeds].includes(getMode())) {
-            !box && push(Path.location(this.state.toLocation));
+            !box && this.navigate(Path.location(this.state.toLocation));
           }
           this.setState({
             toLocation: undefined, previousSelectionBoxArea: undefined,
           });
-          closePlantInfo(this.props.dispatch)();
+          closePlantInfo(this.navigate, this.props.dispatch)();
         };
     }
   };
diff --git a/frontend/farm_designer/map/layers/farmbot/__tests__/negative_position_labels_test.tsx b/frontend/farm_designer/map/layers/farmbot/__tests__/negative_position_labels_test.tsx
index 22a0453226..e2d0bb356e 100644
--- a/frontend/farm_designer/map/layers/farmbot/__tests__/negative_position_labels_test.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/__tests__/negative_position_labels_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import {
   NegativePositionLabel, NegativePositionLabelProps,
diff --git a/frontend/farm_designer/map/layers/farmbot/bot_extents.tsx b/frontend/farm_designer/map/layers/farmbot/bot_extents.tsx
index 143079254b..2cb1ae8cff 100644
--- a/frontend/farm_designer/map/layers/farmbot/bot_extents.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/bot_extents.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { transformXY } from "../../util";
 import { BotExtentsProps } from "../../interfaces";
 
diff --git a/frontend/farm_designer/map/layers/farmbot/negative_position_labels.tsx b/frontend/farm_designer/map/layers/farmbot/negative_position_labels.tsx
index 6382c90a3b..e49aac4954 100644
--- a/frontend/farm_designer/map/layers/farmbot/negative_position_labels.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/negative_position_labels.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { BotPosition } from "../../../../devices/interfaces";
 import { MapTransformProps, AxisNumberProperty } from "../../interfaces";
 import { transformXY } from "../../util";
diff --git a/frontend/farm_designer/map/layers/logs/__tests__/logs_layer_test.tsx b/frontend/farm_designer/map/layers/logs/__tests__/logs_layer_test.tsx
index 087f84aa86..c0f67609d1 100644
--- a/frontend/farm_designer/map/layers/logs/__tests__/logs_layer_test.tsx
+++ b/frontend/farm_designer/map/layers/logs/__tests__/logs_layer_test.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { act } from "react-dom/test-utils";
+import React, { act } from "react";
 import { svgMount } from "../../../../../__test_support__/svg_mount";
 import { awayFromHome, LogsLayer, positionDifferent } from "../logs_layer";
 import { LogsLayerProps } from "../interfaces";
diff --git a/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts b/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts
index ef84ef6444..088be097bd 100644
--- a/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts
+++ b/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts
@@ -14,12 +14,6 @@ jest.mock("../../../actions", () => ({
   movePointTo: jest.fn(),
 }));
 
-import { Path } from "../../../../../internal_urls";
-let mockPath = Path.mock(Path.cropSearch("mint"));
-jest.mock("../../../../../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import {
   newPlantKindAndBody, NewPlantKindAndBodyProps,
   maybeSavePlantLocation, MaybeSavePlantLocationProps,
@@ -46,6 +40,7 @@ import { BotOriginQuadrant } from "../../../../interfaces";
 import {
   fakeDesignerState,
 } from "../../../../../__test_support__/fake_designer_state";
+import { Path } from "../../../../../internal_urls";
 
 describe("newPlantKindAndBody()", () => {
   it("returns new PlantTemplate", () => {
@@ -101,6 +96,10 @@ describe("createPlant()", () => {
 });
 
 describe("dropPlant()", () => {
+  beforeEach(() => {
+    location.pathname = Path.mock(Path.cropSearch("mint"));
+  });
+
   const fakeProps = (): DropPlantProps => {
     const designer = fakeDesignerState();
     designer.cropSearchResults = [fakeCropLiveSearchResult()];
@@ -131,7 +130,7 @@ describe("dropPlant()", () => {
 
   it("doesn't drop plant", () => {
     console.log = jest.fn();
-    mockPath = Path.mock(Path.cropSearch()) + "/";
+    location.pathname = Path.mock(Path.cropSearch()) + "/";
     dropPlant(fakeProps());
     expect(initSave).not.toHaveBeenCalled();
     expect(console.log).toHaveBeenCalledWith("Missing slug.");
@@ -139,7 +138,7 @@ describe("dropPlant()", () => {
 
   it("doesn't drop plant: no crop", () => {
     console.log = jest.fn();
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.designer.companionIndex = 1;
     p.designer.cropSearchResults = [];
@@ -202,7 +201,7 @@ describe("dropPlant()", () => {
   });
 
   it("throws error", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     p.gardenCoords = undefined as any;
diff --git a/frontend/farm_designer/map/layers/plants/__tests__/plant_layer_test.tsx b/frontend/farm_designer/map/layers/plants/__tests__/plant_layer_test.tsx
index 5e8e9eec36..21de92d57b 100644
--- a/frontend/farm_designer/map/layers/plants/__tests__/plant_layer_test.tsx
+++ b/frontend/farm_designer/map/layers/plants/__tests__/plant_layer_test.tsx
@@ -1,9 +1,3 @@
-import { FilePath, Path } from "../../../../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/"))
-}));
-
 import React from "react";
 import { PlantLayer } from "../plant_layer";
 import {
@@ -16,6 +10,9 @@ import {
 import { svgMount } from "../../../../../__test_support__/svg_mount";
 import { shallow } from "enzyme";
 import { GardenPlant } from "../garden_plant";
+import { FilePath, Path } from "../../../../../internal_urls";
+import { Actions } from "../../../../../constants";
+import { mockDispatch } from "../../../../../__test_support__/fake_dispatch";
 
 describe("<PlantLayer />", () => {
   const fakeProps = (): PlantLayerProps => ({
@@ -60,7 +57,7 @@ describe("<PlantLayer />", () => {
   });
 
   it("is in clickable mode", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     p.interactions = true;
     p.plants[0].body.id = 1;
@@ -71,7 +68,7 @@ describe("<PlantLayer />", () => {
   });
 
   it("is in non-clickable mode", () => {
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
     const p = fakeProps();
     p.interactions = false;
     p.plants[0].body.id = 1;
@@ -81,7 +78,7 @@ describe("<PlantLayer />", () => {
   });
 
   it("has link to plant", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     p.plants[0].body.id = 5;
     const wrapper = svgMount(<PlantLayer {...p} />);
@@ -89,8 +86,22 @@ describe("<PlantLayer />", () => {
       .toEqual(Path.plants(5));
   });
 
+  it("clicks plant", () => {
+    location.pathname = Path.mock(Path.plants());
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.plants[0].body.id = 5;
+    const wrapper = svgMount(<PlantLayer {...p} />);
+    wrapper.find("Link").first().simulate("click");
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN,
+      payload: true,
+    });
+  });
+
   it("has link to plant template", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     p.plants = [fakePlantTemplate()];
     p.plants[0].body.id = 5;
@@ -100,7 +111,7 @@ describe("<PlantLayer />", () => {
   });
 
   it("has hovered plant", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     const plant = fakePlant();
     p.plants = [plant];
@@ -110,7 +121,7 @@ describe("<PlantLayer />", () => {
   });
 
   it("has plant selected by selection box", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     const plant = fakePlant();
     p.plants = [plant];
@@ -129,7 +140,7 @@ describe("<PlantLayer />", () => {
   });
 
   it("wraps the component in <g> (instead of <Link>", () => {
-    mockPath = Path.mock(Path.groups(15));
+    location.pathname = Path.mock(Path.groups(15));
     const p = fakeProps();
     const wrapper = svgMount(<PlantLayer {...p} />);
     expect(wrapper.find("a").length).toBe(0);
diff --git a/frontend/farm_designer/map/layers/plants/circle.tsx b/frontend/farm_designer/map/layers/plants/circle.tsx
index 06e7eb1da8..9e5b28df6d 100644
--- a/frontend/farm_designer/map/layers/plants/circle.tsx
+++ b/frontend/farm_designer/map/layers/plants/circle.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Color } from "../../../../ui";
 
 export interface CircleProps {
diff --git a/frontend/farm_designer/map/layers/plants/plant_layer.tsx b/frontend/farm_designer/map/layers/plants/plant_layer.tsx
index e3badec076..e4a032bd5b 100644
--- a/frontend/farm_designer/map/layers/plants/plant_layer.tsx
+++ b/frontend/farm_designer/map/layers/plants/plant_layer.tsx
@@ -5,6 +5,7 @@ import { unpackUUID } from "../../../../util";
 import { getMode } from "../../util";
 import { Link } from "../../../../link";
 import { Path } from "../../../../internal_urls";
+import { setPanelOpen } from "../../../panel_header";
 
 export function PlantLayer(props: PlantLayerProps) {
   const {
@@ -59,6 +60,7 @@ export function PlantLayer(props: PlantLayerProps) {
       return (getMode() === Mode.editGroup || getMode() === Mode.boxSelect)
         ? <g {...wrapperProps}>{plant}</g>
         : <Link {...wrapperProps}
+          onClick={() => dispatch(setPanelOpen(true))}
           to={path(p.body.id)}>
           {plant}
         </Link>;
diff --git a/frontend/farm_designer/map/layers/points/__tests__/garden_point_test.tsx b/frontend/farm_designer/map/layers/points/__tests__/garden_point_test.tsx
index 2b77cdbf0e..80ccaff177 100644
--- a/frontend/farm_designer/map/layers/points/__tests__/garden_point_test.tsx
+++ b/frontend/farm_designer/map/layers/points/__tests__/garden_point_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../../../../internal_urls";
-const mockPath = Path.mock(Path.points());
-jest.mock("../../../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import React from "react";
 import { GardenPoint } from "../garden_point";
 import { GardenPointProps } from "../../../interfaces";
@@ -13,7 +6,6 @@ import {
   fakeMapTransformProps,
 } from "../../../../../__test_support__/map_transform_props";
 import { Actions } from "../../../../../constants";
-import { push } from "../../../../../history";
 import { svgMount } from "../../../../../__test_support__/svg_mount";
 import {
   fakeCameraCalibrationData, fakeCameraCalibrationDataFull,
@@ -23,6 +15,7 @@ import { CameraViewArea } from "../../farmbot/bot_figure";
 import { Color } from "../../../../../ui";
 import { tagAsSoilHeight } from "../../../../../points/soil_height";
 import { SpecialStatus } from "farmbot";
+import { Path } from "../../../../../internal_urls";
 
 describe("<GardenPoint/>", () => {
   const fakeProps = (): GardenPointProps => ({
@@ -101,7 +94,7 @@ describe("<GardenPoint/>", () => {
     const p = fakeProps();
     const wrapper = svgMount(<GardenPoint {...p} />);
     wrapper.find("g").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.points(p.point.body.id));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.points(p.point.body.id));
   });
 
   it("shows camera view area", () => {
diff --git a/frontend/farm_designer/map/layers/points/__tests__/point_layer_test.tsx b/frontend/farm_designer/map/layers/points/__tests__/point_layer_test.tsx
index 37dacfcf06..c738eddf5a 100644
--- a/frontend/farm_designer/map/layers/points/__tests__/point_layer_test.tsx
+++ b/frontend/farm_designer/map/layers/points/__tests__/point_layer_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../../../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { PointLayer, PointLayerProps } from "../point_layer";
 import { fakePoint } from "../../../../../__test_support__/fake_state/resources";
@@ -19,6 +13,7 @@ import {
   fakeDesignerState,
 } from "../../../../../__test_support__/fake_designer_state";
 import { tagAsSoilHeight } from "../../../../../points/soil_height";
+import { Path } from "../../../../../internal_urls";
 
 describe("<PointLayer/>", () => {
   const fakeProps = (): PointLayerProps => ({
@@ -55,7 +50,7 @@ describe("<PointLayer/>", () => {
   });
 
   it("allows point mode interaction", () => {
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     const p = fakeProps();
     p.interactions = true;
     const wrapper = svgMount(<PointLayer {...p} />);
diff --git a/frontend/farm_designer/map/layers/points/garden_point.tsx b/frontend/farm_designer/map/layers/points/garden_point.tsx
index ae02f8059c..1e5a28b4fc 100644
--- a/frontend/farm_designer/map/layers/points/garden_point.tsx
+++ b/frontend/farm_designer/map/layers/points/garden_point.tsx
@@ -8,6 +8,7 @@ import { Color } from "../../../../ui";
 import { soilHeightPoint } from "../../../../points/soil_height";
 import { SpecialStatus } from "farmbot";
 import { Path } from "../../../../internal_urls";
+import { useNavigate } from "react-router";
 
 // eslint-disable-next-line complexity
 export const GardenPoint = (props: GardenPointProps) => {
@@ -26,6 +27,7 @@ export const GardenPoint = (props: GardenPointProps) => {
   const color = meta.color || "green";
   const unsaved = point.specialStatus !== SpecialStatus.SAVED;
   const selected = current || hovered;
+  const navigate = useNavigate();
   return <g id={`point-${id}`}
     className={`map-point ${selected ? "is-selected" : ""}`} stroke={color}
     onMouseEnter={iconHover("start")}
@@ -33,7 +35,7 @@ export const GardenPoint = (props: GardenPointProps) => {
     onClick={() => {
       props.dispatch(selectPoint([point.uuid]));
       props.dispatch(setHoveredPlant(undefined));
-      mapPointClickAction(props.dispatch, point.uuid, Path.points(id))();
+      mapPointClickAction(navigate, props.dispatch, point.uuid, Path.points(id))();
     }}>
     <circle id={"point-radius"}
       className={`point-radius ${animate ? "animate" : ""}`}
diff --git a/frontend/farm_designer/map/layers/sensor_readings/__tests__/garden_sensor_reading_test.tsx b/frontend/farm_designer/map/layers/sensor_readings/__tests__/garden_sensor_reading_test.tsx
index 142ef70901..8e3e7bf3fa 100644
--- a/frontend/farm_designer/map/layers/sensor_readings/__tests__/garden_sensor_reading_test.tsx
+++ b/frontend/farm_designer/map/layers/sensor_readings/__tests__/garden_sensor_reading_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import {
   GardenSensorReading, GardenSensorReadingProps,
diff --git a/frontend/farm_designer/map/layers/spread/__tests__/spread_overlap_helper_test.tsx b/frontend/farm_designer/map/layers/spread/__tests__/spread_overlap_helper_test.tsx
index 6f5a6bebba..8c468419d0 100644
--- a/frontend/farm_designer/map/layers/spread/__tests__/spread_overlap_helper_test.tsx
+++ b/frontend/farm_designer/map/layers/spread/__tests__/spread_overlap_helper_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
   SpreadOverlapHelper,
   getDiscreteColor,
@@ -14,6 +14,7 @@ import { fakePlant } from "../../../../../__test_support__/fake_state/resources"
 import {
   fakeMapTransformProps,
 } from "../../../../../__test_support__/map_transform_props";
+import { svgMount } from "../../../../../__test_support__/svg_mount";
 
 describe("<SpreadOverlapHelper/>", () => {
   function fakeProps(): SpreadOverlapHelperProps {
@@ -167,14 +168,14 @@ describe("SpreadOverlapHelper functions", () => {
 
   it("overlapText()", () => {
     const spreadData = { active: 100, inactive: 200 };
-    const svgText = shallow(overlapText(100, 100, 150, spreadData));
+    const svgText = svgMount(overlapText(100, 100, 150, spreadData));
     ["Active: 80%", "Inactive: 40%", "orange"].map(string =>
       expect(svgText.text()).toContain(string));
   });
 
   it("overlapText(): no overlap", () => {
     const spreadData = { active: 100, inactive: 200 };
-    const svgText = shallow(overlapText(100, 100, 0, spreadData));
+    const svgText = svgMount(overlapText(100, 100, 0, spreadData));
     expect(svgText.text()).toEqual("");
   });
 });
diff --git a/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx b/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx
index 2204e8b739..75089b6ac8 100644
--- a/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx
+++ b/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { SpreadOverlapHelperProps } from "../../interfaces";
 import { round, transformXY, defaultSpreadCmDia } from "../../util";
 import { BotPosition } from "../../../../devices/interfaces";
@@ -104,7 +104,7 @@ export function overlapText(
   qy: number,
   overlap: number,
   spreadData: SpreadRadii,
-): JSX.Element {
+): React.ReactNode {
   // Display spread overlap percentages for debugging purposes.
   const activeSpreadDia = spreadData.active * 2;
   const inactiveSpreadDia = spreadData.inactive * 2;
diff --git a/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_layer_test.tsx b/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_layer_test.tsx
index f023bbcaa2..168cf76f96 100644
--- a/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_layer_test.tsx
+++ b/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_layer_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../../../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => { return mockPath.split("/"); })
-}));
-
 import React from "react";
 import { ToolSlotLayer, ToolSlotLayerProps } from "../tool_slot_layer";
 import {
@@ -12,10 +5,10 @@ import {
 } from "../../../../../__test_support__/map_transform_props";
 import { fakeResource } from "../../../../../__test_support__/fake_resource";
 import { shallow } from "enzyme";
-import { push } from "../../../../../history";
 import { ToolSlotPointer } from "farmbot/dist/resources/api_resources";
 import { TaggedToolSlotPointer } from "farmbot";
 import { ToolSlotPoint } from "../tool_slot_point";
+import { Path } from "../../../../../internal_urls";
 
 describe("<ToolSlotLayer/>", () => {
   function fakeProps(): ToolSlotLayerProps {
@@ -56,16 +49,16 @@ describe("<ToolSlotLayer/>", () => {
   });
 
   it("doesn't navigate to tools page", async () => {
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
     const p = fakeProps();
     const wrapper = shallow(<ToolSlotLayer {...p} />);
     const tools = wrapper.find("g").first();
     await tools.simulate("click");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("is in clickable mode", () => {
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
     const p = fakeProps();
     p.interactions = true;
     const wrapper = shallow(<ToolSlotLayer {...p} />);
@@ -74,7 +67,7 @@ describe("<ToolSlotLayer/>", () => {
   });
 
   it("is in non-clickable mode", () => {
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
     const p = fakeProps();
     p.interactions = false;
     const wrapper = shallow(<ToolSlotLayer {...p} />);
diff --git a/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_point_test.tsx b/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_point_test.tsx
index d7d5a33c0c..2fdb9ca1b0 100644
--- a/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_point_test.tsx
+++ b/frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_point_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../../../../internal_urls";
-const mockPath = Path.mock(Path.toolSlots());
-jest.mock("../../../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import React from "react";
 import { ToolSlotPoint, TSPProps } from "../tool_slot_point";
 import {
@@ -14,9 +7,9 @@ import {
   fakeMapTransformProps,
 } from "../../../../../__test_support__/map_transform_props";
 import { svgMount } from "../../../../../__test_support__/svg_mount";
-import { push } from "../../../../../history";
 import { shallow } from "enzyme";
 import { Actions } from "../../../../../constants";
+import { Path } from "../../../../../internal_urls";
 
 describe("<ToolSlotPoint/>", () => {
   const fakeProps = (): TSPProps => ({
@@ -48,7 +41,7 @@ describe("<ToolSlotPoint/>", () => {
     p.slot.toolSlot.body.id = 1;
     const wrapper = svgMount(<ToolSlotPoint {...p} />);
     wrapper.find("g").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.toolSlots(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.toolSlots(1));
   });
 
   it("displays tool name", () => {
diff --git a/frontend/farm_designer/map/layers/tool_slots/tool_label.tsx b/frontend/farm_designer/map/layers/tool_slots/tool_label.tsx
index f280a46738..1b4bcccc3b 100644
--- a/frontend/farm_designer/map/layers/tool_slots/tool_label.tsx
+++ b/frontend/farm_designer/map/layers/tool_slots/tool_label.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Color } from "../../../../ui/index";
+import { Color } from "../../../../ui";
 import { BotOriginQuadrant } from "../../../interfaces";
 import { ToolPulloutDirection } from "farmbot/dist/resources/api_resources";
 
diff --git a/frontend/farm_designer/map/layers/tool_slots/tool_slot_point.tsx b/frontend/farm_designer/map/layers/tool_slots/tool_slot_point.tsx
index ce1f46eb9a..e85312a5fa 100644
--- a/frontend/farm_designer/map/layers/tool_slots/tool_slot_point.tsx
+++ b/frontend/farm_designer/map/layers/tool_slots/tool_slot_point.tsx
@@ -13,6 +13,7 @@ import { reduceToolName } from "../../tool_graphics/all_tools";
 import { Path } from "../../../../internal_urls";
 import { Actions } from "../../../../constants";
 import { Circle } from "../plants/circle";
+import { useNavigate } from "react-router";
 
 export interface TSPProps {
   slot: SlotWithTool;
@@ -54,12 +55,13 @@ export const ToolSlotPoint = (props: TSPProps) => {
       payload: hover ? toolSlot.uuid : undefined
     });
   };
+  const navigate = useNavigate();
   return <g id={"toolslot-" + id}
     onMouseEnter={iconHover("start")}
     onMouseLeave={iconHover("end")}
     onClick={() => {
       props.dispatch(selectPoint([toolSlot.uuid]));
-      mapPointClickAction(props.dispatch, toolSlot.uuid,
+      mapPointClickAction(navigate, props.dispatch, toolSlot.uuid,
         Path.toolSlots(id))();
       props.dispatch(setHoveredPlant(undefined));
     }}>
diff --git a/frontend/farm_designer/map/layers/weeds/__tests__/garden_weed_test.tsx b/frontend/farm_designer/map/layers/weeds/__tests__/garden_weed_test.tsx
index 7c37fec1e1..d0bec4e7cd 100644
--- a/frontend/farm_designer/map/layers/weeds/__tests__/garden_weed_test.tsx
+++ b/frontend/farm_designer/map/layers/weeds/__tests__/garden_weed_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../../../../internal_urls";
-const mockPath = Path.mock(Path.weeds());
-jest.mock("../../../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import React from "react";
 import { GardenWeed } from "../garden_weed";
 import { GardenWeedProps } from "../../../interfaces";
@@ -13,8 +6,8 @@ import {
   fakeMapTransformProps,
 } from "../../../../../__test_support__/map_transform_props";
 import { Actions } from "../../../../../constants";
-import { push } from "../../../../../history";
 import { svgMount } from "../../../../../__test_support__/svg_mount";
+import { Path } from "../../../../../internal_urls";
 
 describe("<GardenWeed />", () => {
   const fakeProps = (): GardenWeedProps => ({
@@ -97,7 +90,7 @@ describe("<GardenWeed />", () => {
     const p = fakeProps();
     const wrapper = svgMount(<GardenWeed {...p} />);
     wrapper.find("g").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.weeds(p.weed.body.id));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.weeds(p.weed.body.id));
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SELECT_POINT,
       payload: [p.weed.uuid],
@@ -126,7 +119,7 @@ describe("<GardenWeed />", () => {
     p.selected = false;
     p.current = false;
     const wrapper = svgMount(<GardenWeed {...p} />);
-    wrapper.find(GardenWeed).setState({ iconHovered: true });
+    wrapper.find(GardenWeed).simulate("mouseEnter");
     expect(wrapper.html()).not.toContain("weed-indicator");
   });
 });
diff --git a/frontend/farm_designer/map/layers/weeds/__tests__/weed_layer_test.tsx b/frontend/farm_designer/map/layers/weeds/__tests__/weed_layer_test.tsx
index 791ac7968d..0320a0771c 100644
--- a/frontend/farm_designer/map/layers/weeds/__tests__/weed_layer_test.tsx
+++ b/frontend/farm_designer/map/layers/weeds/__tests__/weed_layer_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../../../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { WeedLayer, WeedLayerProps } from "../weed_layer";
 import { fakeWeed } from "../../../../../__test_support__/fake_state/resources";
@@ -12,6 +6,7 @@ import {
 } from "../../../../../__test_support__/map_transform_props";
 import { GardenWeed } from "../garden_weed";
 import { svgMount } from "../../../../../__test_support__/svg_mount";
+import { Path } from "../../../../../internal_urls";
 
 describe("<WeedLayer/>", () => {
   const fakeProps = (): WeedLayerProps => ({
@@ -46,7 +41,7 @@ describe("<WeedLayer/>", () => {
   });
 
   it("allows weed mode interaction", () => {
-    mockPath = Path.mock(Path.weeds());
+    location.pathname = Path.mock(Path.weeds());
     const p = fakeProps();
     p.interactions = true;
     const wrapper = svgMount(<WeedLayer {...p} />);
@@ -55,7 +50,7 @@ describe("<WeedLayer/>", () => {
   });
 
   it("is selected", () => {
-    mockPath = Path.mock(Path.weeds());
+    location.pathname = Path.mock(Path.weeds());
     const p = fakeProps();
     const weed = fakeWeed();
     p.weeds = [weed];
diff --git a/frontend/farm_designer/map/layers/weeds/garden_weed.tsx b/frontend/farm_designer/map/layers/weeds/garden_weed.tsx
index f383b2a4e8..d86e540f6a 100644
--- a/frontend/farm_designer/map/layers/weeds/garden_weed.tsx
+++ b/frontend/farm_designer/map/layers/weeds/garden_weed.tsx
@@ -6,95 +6,90 @@ import { Color } from "../../../../ui";
 import { mapPointClickAction, selectPoint, setHoveredPlant } from "../../actions";
 import { Circle } from "../plants/circle";
 import { FilePath, Path } from "../../../../internal_urls";
+import { useNavigate } from "react-router";
 
-interface GardenWeedState {
-  iconHovered: boolean;
-}
+// eslint-disable-next-line complexity
+export const GardenWeed = (props: GardenWeedProps) => {
+  const [iconHovered, setIconHovered] = React.useState(false);
 
-export class GardenWeed
-  extends React.Component<GardenWeedProps, GardenWeedState> {
-  state: GardenWeedState = { iconHovered: false };
-
-  iconHover = (action: "start" | "end") => () => {
+  const iconHover = (action: "start" | "end") => () => {
     const startHover = action === "start";
-    this.setState({ iconHovered: startHover });
-    this.props.dispatch({
+    setIconHovered(startHover);
+    props.dispatch({
       type: Actions.TOGGLE_HOVERED_POINT,
-      payload: startHover ? this.props.weed.uuid : undefined
+      payload: startHover ? props.weed.uuid : undefined
     });
   };
 
-  // eslint-disable-next-line complexity
-  render() {
-    const {
-      weed, mapTransformProps, hovered, current, selected, animate,
-      radiusVisible, dispatch,
-    } = this.props;
-    const { id, x, y, meta, radius } = weed.body;
-    const { qx, qy } = transformXY(x, y, mapTransformProps);
-    const color = meta.color || "red";
-    const stopOpacity = ["gray", "pink", "orange"].includes(color) ? 0.5 : 0.25;
-    const newClass = id ? "" : "new";
-    const className = [
-      "weed-image",
-      newClass,
-      `is-chosen-${current || selected}`,
-      animate ? "animate" : "",
-    ].join(" ");
-    const plantIconSize = scaleIcon(radius);
-    const iconRadius = hovered ? plantIconSize * 1.1 : plantIconSize;
-    return <g id={`weed-${id}`} className={`map-weed ${color}`}
-      onMouseEnter={this.iconHover("start")}
-      onMouseLeave={this.iconHover("end")}
-      onClick={() => {
-        dispatch(selectPoint([weed.uuid]));
-        dispatch(setHoveredPlant(undefined));
-        mapPointClickAction(dispatch, weed.uuid, Path.weeds(id))();
-      }}>
-      <defs>
-        <radialGradient id={`Weed${id}Gradient`}>
-          <stop offset="90%" stopColor={color} stopOpacity={stopOpacity} />
-          <stop offset="100%" stopColor={color} stopOpacity={0} />
-        </radialGradient>
-      </defs>
+  const {
+    weed, mapTransformProps, hovered, current, selected, animate,
+    radiusVisible, dispatch,
+  } = props;
+  const { id, x, y, meta, radius } = weed.body;
+  const { qx, qy } = transformXY(x, y, mapTransformProps);
+  const color = meta.color || "red";
+  const stopOpacity = ["gray", "pink", "orange"].includes(color) ? 0.5 : 0.25;
+  const newClass = id ? "" : "new";
+  const className = [
+    "weed-image",
+    newClass,
+    `is-chosen-${current || selected}`,
+    animate ? "animate" : "",
+  ].join(" ");
+  const plantIconSize = scaleIcon(radius);
+  const iconRadius = hovered ? plantIconSize * 1.1 : plantIconSize;
+  const navigate = useNavigate();
+  return <g id={`weed-${id}`} className={`map-weed ${color}`}
+    onMouseEnter={iconHover("start")}
+    onMouseLeave={iconHover("end")}
+    onClick={() => {
+      dispatch(selectPoint([weed.uuid]));
+      dispatch(setHoveredPlant(undefined));
+      mapPointClickAction(navigate, dispatch, weed.uuid, Path.weeds(id))();
+    }}>
+    <defs>
+      <radialGradient id={`Weed${id}Gradient`}>
+        <stop offset="90%" stopColor={color} stopOpacity={stopOpacity} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </radialGradient>
+    </defs>
 
-      {animate &&
-        <circle
-          className={`soil-cloud ${newClass}`}
-          cx={qx}
-          cy={qy}
-          r={radius}
-          fill={Color.soilCloud}
-          fillOpacity={0} />}
+    {animate &&
+      <circle
+        className={`soil-cloud ${newClass}`}
+        cx={qx}
+        cy={qy}
+        r={radius}
+        fill={Color.soilCloud}
+        fillOpacity={0} />}
 
-      {radiusVisible &&
-        <circle
-          id={"weed-radius"}
-          cx={qx}
-          cy={qy}
-          r={radius}
-          fill={`url(#Weed${id}Gradient)`}
-          opacity={hovered ? 1 : 0.5} />}
+    {radiusVisible &&
+      <circle
+        id={"weed-radius"}
+        cx={qx}
+        cy={qy}
+        r={radius}
+        fill={`url(#Weed${id}Gradient)`}
+        opacity={hovered ? 1 : 0.5} />}
 
-      {(current || selected || (hovered && !this.state.iconHovered)) &&
-        <g id="selected-weed-indicator">
-          <Circle
-            className={`weed-indicator ${animate ? "animate" : ""}`}
-            x={qx}
-            y={qy}
-            r={plantIconSize}
-            selected={true} />
-        </g>}
+    {(current || selected || (hovered && !iconHovered)) &&
+      <g id="selected-weed-indicator">
+        <Circle
+          className={`weed-indicator ${animate ? "animate" : ""}`}
+          x={qx}
+          y={qy}
+          r={plantIconSize}
+          selected={true} />
+      </g>}
 
-      <g id="weed-icon">
-        <image
-          className={className}
-          xlinkHref={FilePath.DEFAULT_WEED_ICON}
-          height={iconRadius * 2}
-          width={iconRadius * 2}
-          x={qx - iconRadius}
-          y={qy - iconRadius} />
-      </g>
-    </g>;
-  }
-}
+    <g id="weed-icon">
+      <image
+        className={className}
+        xlinkHref={FilePath.DEFAULT_WEED_ICON}
+        height={iconRadius * 2}
+        width={iconRadius * 2}
+        x={qx - iconRadius}
+        y={qy - iconRadius} />
+    </g>
+  </g>;
+};
diff --git a/frontend/farm_designer/map/layers/zones/__tests__/zones_test.tsx b/frontend/farm_designer/map/layers/zones/__tests__/zones_test.tsx
index e7c62bfe31..71bdaf9e4a 100644
--- a/frontend/farm_designer/map/layers/zones/__tests__/zones_test.tsx
+++ b/frontend/farm_designer/map/layers/zones/__tests__/zones_test.tsx
@@ -10,7 +10,6 @@ import {
   fakeMapTransformProps,
 } from "../../../../../__test_support__/map_transform_props";
 import { DEFAULT_CRITERIA } from "../../../../../point_groups/criteria/interfaces";
-import { push } from "../../../../../history";
 import { Path } from "../../../../../internal_urls";
 
 const fakeProps = (): ZonesProps => ({
@@ -67,7 +66,7 @@ describe("<Zones0D />", () => {
     p.group.body.criteria.number_eq = { x: [100], y: [200, 300] };
     const wrapper = svgMount(<Zones0D {...p} />);
     wrapper.find("#zones-0D-1").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.groups(1));
   });
 });
 
@@ -123,7 +122,7 @@ describe("<Zones1D />", () => {
     p.group.body.criteria.number_eq = { x: [], y: [200, 300] };
     const wrapper = svgMount(<Zones1D {...p} />);
     wrapper.find("#zones-1D-1").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.groups(1));
   });
 });
 
@@ -166,7 +165,7 @@ describe("<Zones2D />", () => {
     p.group.body.criteria.number_lt = { x: 300, y: 400 };
     const wrapper = svgMount(<Zones2D {...p} />);
     wrapper.find("#zones-2D-1").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.groups(1));
   });
 });
 
diff --git a/frontend/farm_designer/map/layers/zones/zones.tsx b/frontend/farm_designer/map/layers/zones/zones.tsx
index 89245bd5e6..2eb4799b30 100644
--- a/frontend/farm_designer/map/layers/zones/zones.tsx
+++ b/frontend/farm_designer/map/layers/zones/zones.tsx
@@ -4,7 +4,7 @@ import { MapTransformProps, BotSize } from "../../interfaces";
 import { transformXY } from "../../util";
 import { isUndefined } from "lodash";
 import { UUID } from "../../../../resources/interfaces";
-import { push } from "../../../../history";
+import { useNavigate } from "react-router";
 import { Path } from "../../../../internal_urls";
 
 export interface ZonesProps {
@@ -45,9 +45,6 @@ export const getZoneType = (group: TaggedPointGroup): ZoneType => {
   return ZoneType.none;
 };
 
-const openGroup = (id: number | undefined) =>
-  () => push(Path.groups(id));
-
 /** Bounds for area selected by criteria or bot extents. */
 const getBoundary = (props: GetBoundaryProps): Boundary => {
   const { criteria } = props.group.body;
@@ -91,7 +88,11 @@ const zone0D = (props: ZonesProps) =>
 export const Zones0D = (props: ZonesProps) => {
   const current = props.group.uuid == props.currentGroup;
   const { id } = props.group.body;
-  return <g id={`zones-0D-${id}`} onClick={openGroup(id)}
+  const navigate = useNavigate();
+  return <g id={`zones-0D-${id}`}
+    onClick={() => {
+      navigate(Path.groups(id));
+    }}
     className={current ? "current" : ""}>
     {zone0D(props).map((point, i) =>
       <circle key={i} cx={point.x} cy={point.y} r={5} />)}
@@ -133,7 +134,11 @@ const zone1D = (props: ZonesProps) => {
 export const Zones1D = (props: ZonesProps) => {
   const current = props.group.uuid == props.currentGroup;
   const { id } = props.group.body;
-  return <g id={`zones-1D-${id}`} onClick={openGroup(id)}
+  const navigate = useNavigate();
+  return <g id={`zones-1D-${id}`}
+    onClick={() => {
+      navigate(Path.groups(id));
+    }}
     className={current ? "current" : ""}>
     {zone1D(props).map((line, i) =>
       <line key={i} x1={line.x1} y1={line.y1}
@@ -172,7 +177,11 @@ export const Zones2D = (props: ZonesProps) => {
     }
     : {};
   const { id } = props.group.body;
-  return <g id={`zones-2D-${id}`} onClick={openGroup(id)}
+  const navigate = useNavigate();
+  return <g id={`zones-2D-${id}`}
+    onClick={() => {
+      navigate(Path.groups(id));
+    }}
     className={current ? "current" : ""}>
     {!zone.selectsAll &&
       <rect x={zone.x} y={zone.y} width={zone.width} height={zone.height}
diff --git a/frontend/farm_designer/map/layers/zones/zones_layer.tsx b/frontend/farm_designer/map/layers/zones/zones_layer.tsx
index 30d41cb8ac..7d00e1a812 100644
--- a/frontend/farm_designer/map/layers/zones/zones_layer.tsx
+++ b/frontend/farm_designer/map/layers/zones/zones_layer.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TaggedPointGroup } from "farmbot";
 import { MapTransformProps, BotSize } from "../../interfaces";
 import { Zones0D, Zones1D, Zones2D, getZoneType, ZoneType } from "./zones";
diff --git a/frontend/farm_designer/map/legend/garden_map_legend.tsx b/frontend/farm_designer/map/legend/garden_map_legend.tsx
index 212fe96085..2122e3b944 100644
--- a/frontend/farm_designer/map/legend/garden_map_legend.tsx
+++ b/frontend/farm_designer/map/legend/garden_map_legend.tsx
@@ -62,7 +62,7 @@ const NonLayerToggle = (props: NonLayerToggleProps) => {
   const { setting, getConfigValue } = props;
   const value = !!(setting ? getConfigValue(setting) : undefined);
   return <div
-    className={`non-layer-config-toggle ${props.disabled ? "disabled" : ""}`}>
+    className={`row grid-exp-1 align-baseline ${props.disabled ? "disabled" : ""}`}>
     <label>{t(props.label)}</label>
     {props.helpText && <Help text={props.helpText} />}
     {setting && <ToggleButton
@@ -88,7 +88,7 @@ export const PointsSubMenu = (props: SettingsSubMenuProps) =>
   </div>;
 
 export const PlantsSubMenu = (props: SettingsSubMenuProps) =>
-  <div className="map-plants-submenu">
+  <div className="grid">
     <NonLayerToggle {...props}
       setting={BooleanSetting.disable_animations}
       label={DeviceSetting.animations}
@@ -101,7 +101,7 @@ export const PlantsSubMenu = (props: SettingsSubMenuProps) =>
   </div>;
 
 export const FarmbotSubMenu = (props: SettingsSubMenuProps) =>
-  <div className="farmbot-layer-submenu">
+  <div className="grid">
     <NonLayerToggle {...props}
       setting={BooleanSetting.display_trail}
       label={DeviceSetting.trail}
@@ -160,7 +160,7 @@ const LayerToggles = (props: GardenMapLegendProps) => {
       label={DeviceSetting.showPhotos}
       onClick={toggle(BooleanSetting.show_images)}
       submenuTitle={t("filter")}
-      popover={<div className={"image-options"}>
+      popover={<div className={"grid"}>
         <ImageFilterMenu {...subMenuProps}
           timeSettings={props.timeSettings}
           imageAgeInfo={props.imageAgeInfo} />
@@ -209,7 +209,7 @@ const LayerToggles = (props: GardenMapLegendProps) => {
 };
 
 export const MapSettingsContent = (props: SettingsSubMenuProps) =>
-  <div className="map-settings-submenu">
+  <div className="grid">
     <NonLayerToggle {...props}
       setting={BooleanSetting.dynamic_map}
       label={DeviceSetting.dynamicMap}
@@ -260,9 +260,9 @@ export function GardenMapLegend(props: GardenMapLegendProps) {
       <div className="menu-content">
         <ZoomControls zoom={props.zoom} getConfigValue={getConfigValue} />
         <LayerToggles {...props} />
-        <MoveModeLink />
+        <MoveModeLink dispatch={props.dispatch} />
         <MapSettings getConfigValue={getConfigValue} dispatch={props.dispatch} />
-        <SelectModeLink />
+        <SelectModeLink dispatch={props.dispatch} />
         <BugsControls />
         <ZDisplayToggle open={zDisplayOpen} setOpen={setZDisplayOpen} />
       </div>
diff --git a/frontend/farm_designer/map/legend/layer_toggle.tsx b/frontend/farm_designer/map/legend/layer_toggle.tsx
index 174e360daa..caac1d6b7c 100644
--- a/frontend/farm_designer/map/legend/layer_toggle.tsx
+++ b/frontend/farm_designer/map/legend/layer_toggle.tsx
@@ -11,7 +11,7 @@ export interface LayerToggleProps {
   label: DeviceSetting;
   value: boolean | undefined;
   onClick(): void;
-  popover?: JSX.Element | undefined;
+  popover?: React.ReactElement;
   submenuTitle?: string;
 }
 
@@ -34,7 +34,7 @@ export function LayerToggle(props: LayerToggleProps) {
           <Popover
             position={Position.BOTTOM_RIGHT}
             className={"caret-menu-button"}
-            target={<i className={"fa fa-caret-down fb-icon-button"}
+            target={<i className={"fa fa-caret-down fb-icon-button invert"}
               title={t(title)} />}
             content={popover} />}
       </span>
diff --git a/frontend/farm_designer/map/legend/z_display.tsx b/frontend/farm_designer/map/legend/z_display.tsx
index 5970b0e3c6..8f7ed5a947 100644
--- a/frontend/farm_designer/map/legend/z_display.tsx
+++ b/frontend/farm_designer/map/legend/z_display.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { t } from "../../../i18next_wrapper";
 import { ConfigurationName, McuParams, TaggedPoint } from "farmbot";
-import { ToggleButton } from "../../../ui/toggle_button";
 import { BotLocationData, SourceFbosConfig } from "../../../devices/interfaces";
 import { BotSize } from "../interfaces";
-import { MarkedSlider } from "../../../ui";
+import { MarkedSlider, ToggleButton } from "../../../ui";
 import { ceil, round } from "lodash";
 import { soilHeightPoint } from "../../../points/soil_height";
 
diff --git a/frontend/farm_designer/map/profile/__tests__/content_test.tsx b/frontend/farm_designer/map/profile/__tests__/content_test.tsx
index e2933152f1..be44ca4220 100644
--- a/frontend/farm_designer/map/profile/__tests__/content_test.tsx
+++ b/frontend/farm_designer/map/profile/__tests__/content_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../../../internal_urls";
-let mockPath = Path.mock(Path.designer());
-jest.mock("../../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 jest.mock("../../layers/points/interpolation_map", () => ({
   getInterpolationData: () => [{ x: 111, y: 112, z: 113 }],
   fetchInterpolationOptions: () => ({ stepSize: 100 }),
@@ -33,6 +27,7 @@ import { SlotDimensions } from "../../tool_graphics/slot";
 import {
   fakeDesignerState,
 } from "../../../../__test_support__/fake_designer_state";
+import { Path } from "../../../../internal_urls";
 
 describe("<ProfileSvg />", () => {
   const fakeProps = (): ProfileSvgProps => ({
@@ -416,7 +411,7 @@ describe("<ProfileSvg />", () => {
     });
 
   it("renders interpolated soil", () => {
-    mockPath = Path.mock(Path.location());
+    location.pathname = Path.mock(Path.location());
     const p = fakeProps();
     p.expanded = true;
     p.designer.profileAxis = "y";
diff --git a/frontend/farm_designer/map/profile/tools.tsx b/frontend/farm_designer/map/profile/tools.tsx
index 9fb37dad3b..351d492bfb 100644
--- a/frontend/farm_designer/map/profile/tools.tsx
+++ b/frontend/farm_designer/map/profile/tools.tsx
@@ -89,8 +89,7 @@ export const UTMProfile = (props: ProfileUtmProps) => {
         x={profileUtmH - 2} y={profileUtmV - 2}
         width={4} height={4} />}
     <image x={profileUtmH - 25} y={profileUtmV - 35} width={50} height={30}
-      xlinkHref={FilePath.image("farmbot")} opacity={1}
-      style={{ filter: "invert(1)" }} />
+      xlinkHref={FilePath.image("farmbot")} opacity={1} />
     {toolInfo.name
       ? <ToolProfile toolName={toolInfo.name}
         x={profileUtmH - ToolDimensions.radius} y={profileUtmV}
diff --git a/frontend/farm_designer/map/profile/viewer.tsx b/frontend/farm_designer/map/profile/viewer.tsx
index 6ca6e7981d..3dfb535319 100644
--- a/frontend/farm_designer/map/profile/viewer.tsx
+++ b/frontend/farm_designer/map/profile/viewer.tsx
@@ -12,7 +12,7 @@ export const ProfileViewer = (props: ProfileViewerProps) => {
   const { dispatch } = props;
   const { profileOpen, profileFollowBot } = props.designer;
   const axis = props.designer.profileAxis;
-  const panelStatus = getPanelStatus();
+  const panelStatus = getPanelStatus(props.designer);
   const { x, y } = profileFollowBot
     ? props.botLocationData.position
     : props.designer.profilePosition;
diff --git a/frontend/farm_designer/map/util.ts b/frontend/farm_designer/map/util.ts
index 62ec4cd934..cb42aa3923 100644
--- a/frontend/farm_designer/map/util.ts
+++ b/frontend/farm_designer/map/util.ts
@@ -1,4 +1,4 @@
-import { BotOriginQuadrant } from "../interfaces";
+import { BotOriginQuadrant, DesignerState } from "../interfaces";
 import { McuParams, Xyz } from "farmbot";
 import { StepsPerMm } from "../../devices/interfaces";
 import {
@@ -61,8 +61,8 @@ export enum MapPanelStatus {
 }
 
 /** Get farm designer side panel status. */
-export const getPanelStatus = (): MapPanelStatus => {
-  if (Path.equals(Path.designer())) {
+export const getPanelStatus = (designer: DesignerState): MapPanelStatus => {
+  if (!designer.panelOpen) {
     return isMobile() ? MapPanelStatus.mobileClosed : MapPanelStatus.closed;
   }
   const mode = getMode();
@@ -75,8 +75,8 @@ export const getPanelStatus = (): MapPanelStatus => {
 };
 
 /** Get panel status class name for farm designer. */
-export const mapPanelClassName = () => {
-  switch (getPanelStatus()) {
+export const mapPanelClassName = (designer: DesignerState) => {
+  switch (getPanelStatus(designer)) {
     case MapPanelStatus.short: return "short-panel";
     case MapPanelStatus.mobileClosed: return "panel-closed-mobile";
     case MapPanelStatus.closed: return "panel-closed";
@@ -90,12 +90,12 @@ export const mapPanelClassName = () => {
 export const getMapPadding =
   (panelStatus: MapPanelStatus): { left: number, top: number } => {
     switch (panelStatus) {
-      case MapPanelStatus.short: return { left: 20, top: 350 };
-      case MapPanelStatus.mobileClosed: return { left: 20, top: 160 };
-      case MapPanelStatus.closed: return { left: 20, top: 110 };
+      case MapPanelStatus.short: return { left: 10, top: 350 };
+      case MapPanelStatus.mobileClosed: return { left: 10, top: 160 };
+      case MapPanelStatus.closed: return { left: 10, top: 90 };
       case MapPanelStatus.open:
       default:
-        return { left: 468, top: 110 };
+        return { left: 475, top: 90 };
     }
   };
 
@@ -330,13 +330,18 @@ export const savedGardenOpen = () =>
 const getZoomLevelFromMap = (map: Element) =>
   parseFloat((window.getComputedStyle(map).transform || "(1").split("(")[1]);
 
+export interface GetGardenCoordinatesProps {
+  mapTransformProps: MapTransformProps;
+  gridOffset: AxisNumberProperty;
+  pageX: number;
+  pageY: number;
+  designer: DesignerState;
+}
+
 /** Get the garden map coordinate of a cursor or screen interaction. */
-export const getGardenCoordinates = (props: {
-  mapTransformProps: MapTransformProps,
-  gridOffset: AxisNumberProperty,
-  pageX: number,
-  pageY: number,
-}): AxisNumberProperty | undefined => {
+export const getGardenCoordinates = (
+  props: GetGardenCoordinatesProps,
+): AxisNumberProperty | undefined => {
   const el = document.querySelector(".drop-area-svg");
   const map = document.querySelector(".farm-designer-map");
   const page = document.querySelector(".farm-designer");
@@ -348,7 +353,7 @@ export const getGardenCoordinates = (props: {
       mapTransformProps: props.mapTransformProps,
       gridOffset: props.gridOffset,
       zoomLvl,
-      panelStatus: getPanelStatus(),
+      panelStatus: getPanelStatus(props.designer),
     };
     return translateScreenToGarden(params);
   } else {
diff --git a/frontend/farm_designer/map_size_setting.tsx b/frontend/farm_designer/map_size_setting.tsx
index 8aac841557..3b107f52d9 100644
--- a/frontend/farm_designer/map_size_setting.tsx
+++ b/frontend/farm_designer/map_size_setting.tsx
@@ -3,7 +3,7 @@ import {
   GetWebAppConfigValue, setWebAppConfigValue,
 } from "../config_storage/actions";
 import { t } from "../i18next_wrapper";
-import { Row, Col } from "../ui";
+import { Row } from "../ui";
 import { NumericSetting } from "../session_keys";
 import {
   NumberConfigKey as WebAppNumberConfigKey,
@@ -18,19 +18,15 @@ interface LengthInputProps {
 }
 
 const LengthInput = (props: LengthInputProps) =>
-  <Row>
-    <Col xs={4}>
-      <label style={{ float: "right" }}>{t(props.label)}</label>
-    </Col>
-    <Col xs={5}>
-      <input
-        type="number"
-        name={props.setting}
-        className={getModifiedClassName(props.setting)}
-        value={"" + props.value}
-        onChange={e => props.dispatch(setWebAppConfigValue(
-          props.setting, e.currentTarget.value))} />
-    </Col>
+  <Row className="grid-2-col map-size-grid">
+    <label>{t(props.label)}</label>
+    <input
+      type="number"
+      name={props.setting}
+      className={getModifiedClassName(props.setting)}
+      value={"" + props.value}
+      onChange={e => props.dispatch(setWebAppConfigValue(
+        props.setting, e.currentTarget.value))} />
   </Row>;
 
 export interface MapSizeInputsProps {
@@ -39,7 +35,7 @@ export interface MapSizeInputsProps {
 }
 
 export const MapSizeInputs = (props: MapSizeInputsProps) =>
-  <div className="map-size-inputs">
+  <div className="grid">
     <LengthInput
       value={parseInt("" + props.getConfigValue(NumericSetting.map_size_x))}
       label={t("x (mm)")}
diff --git a/frontend/farm_designer/move_to.tsx b/frontend/farm_designer/move_to.tsx
index d53744fa7c..5e22598cdd 100644
--- a/frontend/farm_designer/move_to.tsx
+++ b/frontend/farm_designer/move_to.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Row, Col, Popover } from "../ui";
+import { Row, Popover } from "../ui";
 import { BotPosition } from "../devices/interfaces";
 import { move } from "../devices/actions";
-import { push } from "../history";
+import { NavigateFunction, useNavigate } from "react-router";
 import { AxisInputBox } from "../controls/axis_input_box";
-import { isNumber, sum } from "lodash";
+import { isNumber, isUndefined, sum } from "lodash";
 import { Actions, Content } from "../constants";
 import { AxisNumberProperty } from "./map/interfaces";
 import { t } from "../i18next_wrapper";
@@ -19,6 +19,8 @@ import {
 } from "../config_storage/actions";
 import { StringSetting } from "../session_keys";
 import { MovementState } from "../interfaces";
+import { getUrlQuery } from "../util";
+import { setPanelOpen } from "./panel_header";
 
 export interface MoveToFormProps {
   chosenLocation: BotPosition;
@@ -54,59 +56,42 @@ export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState
     const { x, y } = this.props.chosenLocation;
     const { botOnline, locked } = this.props;
     return <div className={"move-to-form"}>
-      <Row>
-        <Col xs={3}>
-          <label>{t("X AXIS")}</label>
-        </Col>
-        <Col xs={3}>
-          <label>{t("Y AXIS")}</label>
-        </Col>
-        <Col xs={3}>
-          <label>{t("Z AXIS")}</label>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={3}>
-          <input disabled name="x" value={isNumber(x) ? x : "---"} />
-        </Col>
-        <Col xs={3}>
-          <input disabled name="y" value={isNumber(y) ? y : "---"} />
-        </Col>
+      <Row className="move-to-grid">
+        <label>{t("X AXIS")}</label>
+        <label>{t("Y AXIS")}</label>
+        <label>{t("Z AXIS")}</label>
+        <div />
+        <input disabled name="x" value={isNumber(x) ? x : "---"} />
+        <input disabled name="y" value={isNumber(y) ? y : "---"} />
         <AxisInputBox
           onChange={(_, val: number) => this.setState({ z: val })}
           axis={"z"}
           value={this.state.z} />
-        <Col xs={3}>
-          <button
-            onClick={() => {
-              this.props.dispatch(setMovementStateFromPosition(
-                this.props.currentBotLocation, this.vector));
-              move({
-                ...this.vector,
-                speed: this.state.speed,
-                safeZ: this.state.safeZ,
-              });
-            }}
-            className={["fb-button green",
-              (botOnline && !locked) ? "" : "pseudo-disabled",
-            ].join(" ")}
-            title={botOnline
-              ? t("Move to this coordinate")
-              : t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}>
-            {t("GO")}
-          </button>
-        </Col>
+        <button
+          onClick={() => {
+            this.props.dispatch(setMovementStateFromPosition(
+              this.props.currentBotLocation, this.vector));
+            move({
+              ...this.vector,
+              speed: this.state.speed,
+              safeZ: this.state.safeZ,
+            });
+          }}
+          className={["fb-button green",
+            (botOnline && !locked) ? "" : "pseudo-disabled",
+          ].join(" ")}
+          title={botOnline
+            ? t("Move to this coordinate")
+            : t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}>
+          {t("GO")}
+        </button>
       </Row>
-      <Row className={"speed"}>
-        <Col xs={3}>
-          <label>{t("Speed")}</label>
-        </Col>
-        <Col xs={9}>
-          <Slider min={1} max={100} labelValues={[1, 50, 100]}
-            labelRenderer={value => `${value}%`}
-            value={this.state.speed}
-            onChange={speed => this.setState({ speed })} />
-        </Col>
+      <Row className={"speed-grid"}>
+        <label>{t("Speed")}</label>
+        <Slider min={1} max={100} labelValues={[1, 50, 100]}
+          labelRenderer={value => `${value}%`}
+          value={this.state.speed}
+          onChange={speed => this.setState({ speed })} />
       </Row>
       <SafeZCheckbox checked={this.state.safeZ}
         onChange={() => this.setState({ safeZ: !this.state.safeZ })} />
@@ -114,27 +99,39 @@ export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState
   }
 }
 
-export const MoveModeLink = () =>
-  <div className="move-to-mode">
+export interface MoveModeLinkProps {
+  dispatch: Function;
+}
+
+export const MoveModeLink = (props: MoveModeLinkProps) => {
+  const navigate = useNavigate();
+  return <div className="move-to-mode">
     <button
       className="fb-button gray"
       title={t("open move mode panel")}
-      onClick={() => push(Path.location())}>
+      onClick={() => {
+        props.dispatch(setPanelOpen(true));
+        navigate(Path.location());
+      }}>
       {t("move mode")}
     </button>
   </div>;
+};
 
 /** Mark a new bot target location on the map. */
 export const chooseLocation = (props: {
+  navigate: NavigateFunction,
   gardenCoords: AxisNumberProperty | undefined,
   dispatch: Function,
 }) => {
   if (props.gardenCoords) {
-    props.dispatch(chooseLocationAction({
+    const loc = {
       x: Math.max(0, props.gardenCoords.x),
       y: Math.max(0, props.gardenCoords.y),
       z: 0,
-    }));
+    };
+    props.dispatch(chooseLocationAction(loc));
+    navigateToLocation(props.navigate, loc);
   }
 };
 
@@ -181,7 +178,7 @@ export class GoToThisLocationButton
     ].join(" ");
     const defaultDestination = coordinateFromAxes(target, current, defaultAxes);
     const remaining = movementPercentRemaining(current, this.props.movementState);
-    return <div className={"go-button-axes-wrapper"}>
+    return <div className={"go-button-axes-wrapper row no-gap"}>
       <button
         className={classes("go-button-axes-text")}
         title={goText(this.props.defaultAxes)}
@@ -271,6 +268,17 @@ export const unChooseLocationAction = () => ({
   payload: { x: undefined, y: undefined, z: undefined },
 });
 
+const navigateToLocation = (
+  navigate: NavigateFunction,
+  location: BotPosition,
+) => {
+  !isUndefined(location.x) &&
+    Path.getSlug(Path.designer()) === "location" &&
+    parseFloat("" + getUrlQuery("x")) != location.x &&
+    parseFloat("" + getUrlQuery("y")) != location.y &&
+    navigate(Path.location({ x: location.x, y: location.y }));
+};
+
 export const movementPercentRemaining =
   (botPosition: BotPosition, movementState: MovementState) => {
     const { start, distance } = movementState;
diff --git a/frontend/farm_designer/panel_header.tsx b/frontend/farm_designer/panel_header.tsx
index f074614b93..568eabab5e 100644
--- a/frontend/farm_designer/panel_header.tsx
+++ b/frontend/farm_designer/panel_header.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { getPathArray } from "../history";
 import { Link } from "../link";
 import { t } from "../i18next_wrapper";
 import { DevSettings } from "../settings/dev/dev_support";
@@ -10,6 +9,8 @@ import { computeEditorUrlFromState } from "../nav/compute_editor_url_from_state"
 import { compact } from "lodash";
 import { selectAllFarmwareInstallations } from "../resources/selectors";
 import { FilePath, Icon, Path } from "../internal_urls";
+import { Actions } from "../constants";
+import { DesignerState } from "./interfaces";
 
 export enum Panel {
   Map = "Map",
@@ -53,16 +54,16 @@ export enum PanelColor {
 
 export const TAB_COLOR: Record<Panel, PanelColor> = {
   [Panel.Map]: PanelColor.gray,
-  [Panel.Plants]: PanelColor.green,
-  [Panel.Weeds]: PanelColor.red,
-  [Panel.Points]: PanelColor.teal,
-  [Panel.Groups]: PanelColor.blue,
+  [Panel.Plants]: PanelColor.gray,
+  [Panel.Weeds]: PanelColor.gray,
+  [Panel.Points]: PanelColor.gray,
+  [Panel.Groups]: PanelColor.gray,
   [Panel.Curves]: PanelColor.gray,
   [Panel.Sequences]: PanelColor.gray,
   [Panel.Regimens]: PanelColor.gray,
-  [Panel.SavedGardens]: PanelColor.navy,
-  [Panel.FarmEvents]: PanelColor.yellow,
-  [Panel.Zones]: PanelColor.brown,
+  [Panel.SavedGardens]: PanelColor.gray,
+  [Panel.FarmEvents]: PanelColor.gray,
+  [Panel.Zones]: PanelColor.gray,
   [Panel.Controls]: PanelColor.gray,
   [Panel.Sensors]: PanelColor.gray,
   [Panel.Photos]: PanelColor.gray,
@@ -162,8 +163,8 @@ export const PANEL_TITLE = (): Record<Panel, string> => ({
   [Panel.Shop]: t("Shop"),
 });
 
-export const getCurrentPanel = (): Tabs | undefined => {
-  if (getPathArray().join("/") === Path.withApp(Path.designer())) {
+export const getCurrentPanel = (designer: DesignerState): Tabs | undefined => {
+  if (!designer.panelOpen) {
     return Panel.Map;
   } else if (Path.getSlug(Path.app()) == "sequences") {
     return Panel.Sequences;
@@ -191,14 +192,17 @@ export const getPanelPath = (panel: Panel) => {
 
 interface NavTabProps {
   panel: Panel;
+  dispatch: Function;
+  designer: DesignerState;
 }
 
 const NavTab = (props: NavTabProps) =>
-  <Link id={PANEL_SLUG[props.panel] || "map"}
+  <Link id={PANEL_SLUG[props.panel]}
     to={getPanelPath(props.panel)}
     style={{ flex: 0.3 }}
+    onClick={() => props.dispatch(setPanelOpen(true))}
     className={[
-      getCurrentPanel() === props.panel ? "active" : "",
+      getCurrentPanel(props.designer) === props.panel ? "active" : "",
     ].join(" ")}>
     <img width={35} height={30}
       src={TAB_ICON[props.panel]}
@@ -227,8 +231,17 @@ export const showFarmware = () => {
   return installs.length > 0;
 };
 
-interface DesignerNavTabsProps {
-  hidden?: boolean;
+export const setPanelOpen = (state: boolean) =>
+  (dispatch: Function) =>
+    dispatch({
+      type: Actions.SET_PANEL_OPEN,
+      payload: state,
+    });
+
+export interface DesignerNavTabsProps {
+  dispatch: Function;
+  designer: DesignerState;
+  hidden: boolean;
 }
 
 interface DesignerNavTabsState {
@@ -244,28 +257,41 @@ export class DesignerNavTabs
   updateScroll = () => this.setState({ atEnd: !displayScrollIndicator() });
 
   render() {
-    const tab = getCurrentPanel();
     const hidden = this.props.hidden ? "hidden" : "";
-    const color = TAB_COLOR[tab || Panel.Plants];
-    return <div className={`panel-nav ${color}-panel ${hidden}`}>
+    const { dispatch, designer } = this.props;
+    const common = { dispatch, designer };
+    return <div className={`panel-nav ${hidden}`}>
       {!this.state.atEnd && <div className={"scroll-indicator"} />}
       <div className={"panel-tabs"} onScroll={this.updateScroll}>
-        <NavTab panel={Panel.Map} />
-        <NavTab panel={Panel.Plants} />
-        <NavTab panel={Panel.Weeds} />
-        <NavTab panel={Panel.Points} />
-        <NavTab panel={Panel.Curves} />
-        <NavTab panel={Panel.Sequences} />
-        <NavTab panel={Panel.Regimens} />
-        <NavTab panel={Panel.FarmEvents} />
-        {DevSettings.futureFeaturesEnabled() && <NavTab panel={Panel.Zones} />}
-        {showSensors() && <NavTab panel={Panel.Sensors} />}
-        <NavTab panel={Panel.Photos} />
-        {showFarmware() && <NavTab panel={Panel.Farmware} />}
-        <NavTab panel={Panel.Tools} />
-        <NavTab panel={Panel.Messages} />
-        <NavTab panel={Panel.Help} />
-        <NavTab panel={Panel.Settings} />
+        <a id={Panel.Map}
+          style={{ flex: 0.3 }}
+          className={getCurrentPanel(this.props.designer) === Panel.Map
+            ? "active"
+            : ""}
+          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+            e.preventDefault();
+            this.props.dispatch(setPanelOpen(false));
+          }}>
+          <img width={35} height={30}
+            src={FilePath.icon(Icon.map)}
+            title={PANEL_TITLE()[Panel.Map]} />
+        </a>
+        <NavTab {...common} panel={Panel.Plants} />
+        <NavTab {...common} panel={Panel.Weeds} />
+        <NavTab {...common} panel={Panel.Points} />
+        <NavTab {...common} panel={Panel.Curves} />
+        <NavTab {...common} panel={Panel.Sequences} />
+        <NavTab {...common} panel={Panel.Regimens} />
+        <NavTab {...common} panel={Panel.FarmEvents} />
+        {DevSettings.futureFeaturesEnabled() &&
+          <NavTab {...common} panel={Panel.Zones} />}
+        {showSensors() && <NavTab {...common} panel={Panel.Sensors} />}
+        <NavTab {...common} panel={Panel.Photos} />
+        {showFarmware() && <NavTab {...common} panel={Panel.Farmware} />}
+        <NavTab {...common} panel={Panel.Tools} />
+        <NavTab {...common} panel={Panel.Messages} />
+        <NavTab {...common} panel={Panel.Help} />
+        <NavTab {...common} panel={Panel.Settings} />
       </div>
     </div>;
   }
diff --git a/frontend/farm_designer/reducer.ts b/frontend/farm_designer/reducer.ts
index 02e1a2338f..e012b3c386 100644
--- a/frontend/farm_designer/reducer.ts
+++ b/frontend/farm_designer/reducer.ts
@@ -6,15 +6,12 @@ import {
   HoveredPlantPayl,
 } from "./interfaces";
 import { generateReducer } from "../redux/generate_reducer";
-import { cloneDeep, isUndefined } from "lodash";
+import { cloneDeep } from "lodash";
 import { TaggedResource, PointType, PlantStage } from "farmbot";
 import { Actions } from "../constants";
 import { BotPosition } from "../devices/interfaces";
 import { PointGroupSortType } from "farmbot/dist/resources/api_resources";
 import { UUID } from "../resources/interfaces";
-import { push } from "../history";
-import { getUrlQuery } from "../util";
-import { Path } from "../internal_urls";
 
 export const initialState: DesignerState = {
   selectedPoints: undefined,
@@ -66,6 +63,8 @@ export const initialState: DesignerState = {
   cropHeightCurveId: undefined,
   cropStage: undefined,
   cropPlantedAt: undefined,
+  distanceIndicator: "",
+  panelOpen: true,
 };
 
 export const designer = generateReducer<DesignerState>(initialState)
@@ -182,11 +181,6 @@ export const designer = generateReducer<DesignerState>(initialState)
   })
   .add<BotPosition>(Actions.CHOOSE_LOCATION, (s, { payload }) => {
     s.chosenLocation = payload;
-    !isUndefined(payload.x) &&
-      Path.getSlug(Path.designer()) === "location" &&
-      parseFloat("" + getUrlQuery("x")) != payload.x &&
-      parseFloat("" + getUrlQuery("y")) != payload.y &&
-      push(Path.location({ x: payload.x, y: payload.y }));
     return s;
   })
   .add<number | undefined>(Actions.CHOOSE_SAVED_GARDEN, (s, { payload }) => {
@@ -271,6 +265,14 @@ export const designer = generateReducer<DesignerState>(initialState)
     s.soilHeightLabels = !s.soilHeightLabels;
     return s;
   })
+  .add<string>(Actions.SET_DISTANCE_INDICATOR, (s, { payload }) => {
+    s.distanceIndicator = payload;
+    return s;
+  })
+  .add<boolean>(Actions.SET_PANEL_OPEN, (s, { payload }) => {
+    s.panelOpen = payload;
+    return s;
+  })
   .add<boolean>(Actions.SET_PROFILE_OPEN, (s, { payload }) => {
     s.profileOpen = payload;
     return s;
diff --git a/frontend/farm_designer/three_d_garden_map.tsx b/frontend/farm_designer/three_d_garden_map.tsx
index f254a446b0..dd1bae4614 100644
--- a/frontend/farm_designer/three_d_garden_map.tsx
+++ b/frontend/farm_designer/three_d_garden_map.tsx
@@ -1,13 +1,23 @@
 import React from "react";
 import { ThreeDGarden } from "../three_d_garden";
 import { INITIAL } from "../three_d_garden/config";
-import { BotSize, MapTransformProps, AxisNumberProperty } from "./map/interfaces";
-import { clone } from "lodash";
+import {
+  BotSize, MapTransformProps, AxisNumberProperty, TaggedPlant,
+} from "./map/interfaces";
+import { camelCase, clone } from "lodash";
+import { SourceFbosConfig } from "../devices/interfaces";
+import { ConfigurationName } from "farmbot";
+import { DesignerState } from "./interfaces";
+import { ASSETS } from "../three_d_garden/constants";
 
 export interface ThreeDGardenMapProps {
   botSize: BotSize;
   mapTransformProps: MapTransformProps;
   gridOffset: AxisNumberProperty;
+  get3DConfigValue(key: string): number;
+  sourceFbosConfig: SourceFbosConfig;
+  designer: DesignerState;
+  plants: TaggedPlant[];
 }
 
 export const ThreeDGardenMap = (props: ThreeDGardenMapProps) => {
@@ -19,5 +29,42 @@ export const ThreeDGardenMap = (props: ThreeDGardenMapProps) => {
   config.bedLengthOuter = gridSize.x + 160;
   config.zoomBeacons = false;
 
-  return <ThreeDGarden config={config} />;
+  const { designer } = props;
+  config.distanceIndicator = designer.distanceIndicator;
+
+  const fbosConfig = (key: ConfigurationName) =>
+    props.sourceFbosConfig(key).value as number;
+  config.zGantryOffset = fbosConfig("gantry_height");
+  config.soilHeight = Math.abs(fbosConfig("soil_height"));
+
+  const getValue = props.get3DConfigValue;
+  config.bedWallThickness = getValue("bedWallThickness");
+  config.bedHeight = getValue("bedHeight");
+  config.ccSupportSize = getValue("ccSupportSize");
+  config.beamLength = getValue("beamLength");
+  config.columnLength = getValue("columnLength");
+  config.zAxisLength = getValue("zAxisLength");
+  config.bedXOffset = getValue("bedXOffset");
+  config.bedYOffset = getValue("bedYOffset");
+  config.bedZOffset = getValue("bedZOffset");
+  config.legSize = getValue("legSize");
+  config.bounds = !!getValue("bounds");
+  config.grid = !!getValue("grid");
+
+  const plants = props.plants.map(plant => {
+    return {
+      label: plant.body.name,
+      icon: ASSETS.icons[camelCase(plant.body.openfarm_slug)]
+        || ASSETS.icons.arugula,
+      size: plant.body.radius * 2,
+      spread: 0,
+      x: plant.body.x + config.bedXOffset,
+      y: plant.body.y + config.bedYOffset,
+    };
+  });
+
+  config.zoom = true;
+  config.pan = true;
+
+  return <ThreeDGarden config={config} plants={plants} />;
 };
diff --git a/frontend/farm_events/__tests__/add_farm_event_test.tsx b/frontend/farm_events/__tests__/add_farm_event_test.tsx
index 3eca458048..2483154eea 100644
--- a/frontend/farm_events/__tests__/add_farm_event_test.tsx
+++ b/frontend/farm_events/__tests__/add_farm_event_test.tsx
@@ -3,6 +3,26 @@ jest.mock("../../api/crud", () => ({
   init: jest.fn(() => ({ payload: { uuid: "fakeUuid" } })),
 }));
 
+jest.mock("../edit_fe_form", () => ({
+  EditFEForm: () => <div>EditFEForm</div>,
+  FarmEventForm: () => <div />,
+  FarmEventViewModel: {},
+  NEVER: "never",
+}));
+
+const mockSave = jest.fn();
+interface MockRefCurrent {
+  commitViewModel(): void;
+}
+interface MockRef {
+  current: MockRefCurrent | undefined;
+}
+const mockRef: MockRef = { current: { commitViewModel: mockSave } };
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  createRef: () => mockRef,
+}));
+
 jest.mock("../../resources/actions", () => ({ destroyOK: jest.fn() }));
 
 import React from "react";
@@ -23,7 +43,7 @@ import { init, destroy } from "../../api/crud";
 import { DesignerPanelHeader } from "../../farm_designer/designer_panel";
 import { Content } from "../../constants";
 import { error } from "../../toast/toast";
-import { FarmEventForm } from "../edit_fe_form";
+import { SaveBtn } from "../../ui";
 
 describe("<AddFarmEvent />", () => {
   function fakeProps(): AddEditFarmEventProps {
@@ -41,7 +61,7 @@ describe("<AddFarmEvent />", () => {
       repeatOptions: [],
       handleTime: jest.fn(),
       farmEvents: [farmEvent],
-      getFarmEvent: () => farmEvent,
+      getFarmEvent: _ => farmEvent,
       findFarmEventByUuid: () => farmEvent,
       findExecutable: () => sequence,
       timeSettings: fakeTimeSettings(),
@@ -52,19 +72,8 @@ describe("<AddFarmEvent />", () => {
   it("renders", () => {
     const wrapper = mount(<AddFarmEvent {...fakeProps()} />);
     wrapper.setState({ uuid: "FarmEvent" });
-    ["Add Event", "Sequence or Regimen", "fake", "Save"].map(string =>
+    ["Add Event", "Save"].map(string =>
       expect(wrapper.text().toLowerCase()).toContain(string.toLowerCase()));
-    const deleteBtn = wrapper.find(".fa-trash").first();
-    expect(deleteBtn.props().hidden).toBeTruthy();
-  });
-
-  it("renders with no executables", () => {
-    const p = fakeProps();
-    p.findFarmEventByUuid = jest.fn();
-    p.sequencesById = {};
-    p.regimensById = {};
-    const wrapper = mount(<AddFarmEvent {...p} />);
-    expect(wrapper.html()).toContain("fa-exclamation-triangle");
   });
 
   it("changes temporary values", () => {
@@ -171,7 +180,8 @@ describe("<AddFarmEvent />", () => {
     p.sequencesById = {};
     p.regimensById = {};
     const wrapper = shallow(<AddFarmEvent {...p} />);
-    wrapper.find(FarmEventForm).simulate("save");
+    wrapper.find(SaveBtn).simulate("click");
+    expect(mockSave).not.toHaveBeenCalled();
     expect(error).toHaveBeenCalledWith(Content.MISSING_EXECUTABLE);
   });
 
@@ -180,7 +190,29 @@ describe("<AddFarmEvent />", () => {
     p.executableOptions = [{ label: "", value: "1" }];
     p.findFarmEventByUuid = jest.fn();
     const wrapper = shallow(<AddFarmEvent {...p} />);
-    wrapper.find(FarmEventForm).simulate("save");
+    wrapper.find(SaveBtn).simulate("click");
+    expect(mockSave).not.toHaveBeenCalled();
     expect(error).toHaveBeenCalledWith("Please select a sequence or regimen.");
   });
+
+  it("saves", () => {
+    const p = fakeProps();
+    const farmEvent = fakeFarmEvent("Sequence", 1);
+    p.findFarmEventByUuid = () => farmEvent;
+    const wrapper = mount(<AddFarmEvent {...p} />);
+    wrapper.find(".save-btn").simulate("click");
+    expect(mockSave).toHaveBeenCalled();
+    expect(error).not.toHaveBeenCalled();
+  });
+
+  it("handles missing ref", () => {
+    mockRef.current = undefined;
+    const p = fakeProps();
+    const farmEvent = fakeFarmEvent("Sequence", 1);
+    p.findFarmEventByUuid = () => farmEvent;
+    const wrapper = mount(<AddFarmEvent {...p} />);
+    wrapper.find(".save-btn").simulate("click");
+    expect(mockSave).not.toHaveBeenCalled();
+    expect(error).not.toHaveBeenCalled();
+  });
 });
diff --git a/frontend/farm_events/__tests__/edit_farm_event_test.tsx b/frontend/farm_events/__tests__/edit_farm_event_test.tsx
index 2889c5732f..7da27e6e87 100644
--- a/frontend/farm_events/__tests__/edit_farm_event_test.tsx
+++ b/frontend/farm_events/__tests__/edit_farm_event_test.tsx
@@ -1,8 +1,22 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.farmEvents(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
+jest.mock("../../api/crud", () => ({
+  destroy: jest.fn(),
+}));
+
+jest.mock("../edit_fe_form", () => ({
+  EditFEForm: () => <div>EditFEForm</div>,
+}));
+
+const mockSave = jest.fn();
+interface MockRefCurrent {
+  commitViewModel(): void;
+}
+interface MockRef {
+  current: MockRefCurrent | undefined;
+}
+const mockRef: MockRef = { current: { commitViewModel: mockSave } };
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  createRef: () => mockRef,
 }));
 
 import React from "react";
@@ -16,7 +30,9 @@ import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
 import { fakeTimeSettings } from "../../__test_support__/fake_time_settings";
-import { push } from "../../history";
+import { Path } from "../../internal_urls";
+import { destroy } from "../../api/crud";
+import { success } from "../../toast/toast";
 
 describe("<EditFarmEvent />", () => {
   function fakeProps(): AddEditFarmEventProps {
@@ -25,7 +41,7 @@ describe("<EditFarmEvent />", () => {
     const farmEvent = fakeFarmEvent("Sequence", sequence.body.id);
     return {
       deviceTimezone: "",
-      dispatch: jest.fn(),
+      dispatch: jest.fn(() => Promise.resolve()),
       regimensById: {},
       sequencesById: { "1": sequence },
       farmEventsById: { "1": farmEvent },
@@ -33,7 +49,7 @@ describe("<EditFarmEvent />", () => {
       repeatOptions: [],
       handleTime: jest.fn(),
       farmEvents: [],
-      getFarmEvent: () => farmEvent,
+      getFarmEvent: _ => farmEvent,
       findFarmEventByUuid: () => farmEvent,
       findExecutable: () => sequence,
       timeSettings: fakeTimeSettings(),
@@ -43,27 +59,52 @@ describe("<EditFarmEvent />", () => {
 
   it("renders", () => {
     const wrapper = mount(<EditFarmEvent {...fakeProps()} />);
-    ["Sequence or Regimen", "fake", "Save"]
+    ["Edit event", "Save"]
       .map(string => expect(wrapper.text()).toContain(string));
-    const deleteBtn = wrapper.find(".fa-trash").first();
-    expect(deleteBtn.props().hidden).toBeFalsy();
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.farmEvents("nope"));
+    location.pathname = Path.mock(Path.farmEvents("nope"));
     const p = fakeProps();
-    p.getFarmEvent = jest.fn();
+    const navigate = jest.fn();
+    p.getFarmEvent = jest.fn(url => navigate(url));
     const wrapper = mount(<EditFarmEvent {...p} />);
     expect(wrapper.text()).toContain("Redirecting");
-    expect(push).toHaveBeenCalledWith(Path.farmEvents());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.farmEvents());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const p = fakeProps();
     p.getFarmEvent = jest.fn();
     const wrapper = mount(<EditFarmEvent {...p} />);
     expect(wrapper.text()).toContain("Redirecting");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("calls farm event save", () => {
+    const wrapper = mount(<EditFarmEvent {...fakeProps()} />);
+    wrapper.find(".save-btn").simulate("click");
+    expect(mockSave).toHaveBeenCalled();
+  });
+
+  it("handles missing ref", () => {
+    mockRef.current = undefined;
+    const wrapper = mount(<EditFarmEvent {...fakeProps()} />);
+    wrapper.find(".save-btn").simulate("click");
+    expect(mockSave).not.toHaveBeenCalled();
+  });
+
+  it("deletes farm event", async () => {
+    const p = fakeProps();
+    const sequence = fakeSequence();
+    sequence.body.id = 1;
+    const farmEvent = fakeFarmEvent("Sequence", sequence.body.id);
+    p.getFarmEvent = () => farmEvent;
+    const wrapper = mount(<EditFarmEvent {...p} />);
+    await wrapper.find(".fa-trash").simulate("click");
+    expect(destroy).toHaveBeenCalledWith(farmEvent.uuid);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.farmEvents());
+    expect(success).toHaveBeenCalledWith("Deleted event.", { title: "Deleted" });
   });
 });
diff --git a/frontend/farm_events/__tests__/edit_fe_form_test.tsx b/frontend/farm_events/__tests__/edit_fe_form_test.tsx
index 1cdb557b0a..42c8b89ed4 100644
--- a/frontend/farm_events/__tests__/edit_fe_form_test.tsx
+++ b/frontend/farm_events/__tests__/edit_fe_form_test.tsx
@@ -1,7 +1,11 @@
 jest.mock("../../api/crud", () => ({
-  destroy: jest.fn(),
-  overwrite: jest.fn(),
   save: jest.fn(),
+  overwrite: jest.fn(),
+}));
+
+let mockTzMismatch = false;
+jest.mock("../../devices/timezones/guess_timezone", () => ({
+  timezoneMismatch: () => mockTzMismatch,
 }));
 
 import React from "react";
@@ -16,24 +20,19 @@ import {
   recombine,
   destructureFarmEvent,
   offsetTime,
-  FarmEventDeleteButtonProps,
-  FarmEventDeleteButton,
   RepeatForm,
   RepeatFormProps,
   StartTimeForm,
   StartTimeFormProps,
-  FarmEventForm,
 } from "../edit_fe_form";
 import { isString, isFunction } from "lodash";
-import { repeatOptions } from "../map_state_to_props_add_edit";
 import { SpecialStatus, ParameterApplication } from "farmbot";
 import moment from "moment";
-import { push } from "../../history";
 import {
   buildResourceIndex, fakeDevice,
 } from "../../__test_support__/resource_index_builder";
 import { fakeVariableNameSet } from "../../__test_support__/fake_variables";
-import { save, destroy } from "../../api/crud";
+import { save } from "../../api/crud";
 import { fakeTimeSettings } from "../../__test_support__/fake_time_settings";
 import { error, success, warning } from "../../toast/toast";
 import { BlurableInput } from "../../ui";
@@ -54,6 +53,7 @@ describe("<EditFEForm />", () => {
     title: "title",
     timeSettings: fakeTimeSettings(),
     resources: buildResourceIndex([]).index,
+    setSpecialStatus: jest.fn(),
   });
 
   function instance(p: EditFEProps) {
@@ -119,9 +119,10 @@ describe("<EditFEForm />", () => {
     p.farmEvent.body.id = 0;
     p.farmEvent.body.executable_type = "Sequence";
     const i = instance(p);
+    i.navigate = jest.fn();
     i.executableSet({ value: "wow", label: "hey", headingId: "Regimen" });
     expect(error).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(i.navigate).not.toHaveBeenCalled();
   });
 
   it("doesn't allow improper changes to the executable", () => {
@@ -129,10 +130,11 @@ describe("<EditFEForm />", () => {
     p.farmEvent.body.id = 1;
     p.farmEvent.body.executable_type = "Regimen";
     const i = instance(p);
+    i.navigate = jest.fn();
     i.executableSet({ value: "wow", label: "hey", headingId: "Sequence" });
     expect(error).toHaveBeenCalledWith(
       "Cannot change between Sequences and Regimens.");
-    expect(push).toHaveBeenCalledWith(Path.farmEvents());
+    expect(i.navigate).toHaveBeenCalledWith(Path.farmEvents());
   });
 
   it("handles empty dropdown value", () => {
@@ -140,9 +142,10 @@ describe("<EditFEForm />", () => {
     p.farmEvent.body.id = 1;
     p.farmEvent.body.executable_type = "Regimen";
     const i = instance(p);
+    i.navigate = jest.fn();
     i.executableSet({ value: "", label: "hey", headingId: "Sequence" });
     expect(error).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(i.navigate).not.toHaveBeenCalled();
   });
 
   it("gets executable info", () => {
@@ -155,6 +158,34 @@ describe("<EditFEForm />", () => {
     expect(exe.headingId).toBe("Sequence");
   });
 
+  it("shows missing executable warning", () => {
+    const p = fakeProps();
+    p.executableOptions = [{ label: "", value: 0, heading: true }];
+    const wrapper = mount(<EditFEForm {...p} />);
+    expect(wrapper.html()).toContain("fa-exclamation-triangle");
+  });
+
+  it("doesn't show missing executable warning", () => {
+    const p = fakeProps();
+    p.executableOptions = [{ label: "", value: 0, heading: false }];
+    const wrapper = mount(<EditFEForm {...p} />);
+    expect(wrapper.html()).not.toContain("fa-exclamation-triangle");
+  });
+
+  it("doesn't show tz warning", () => {
+    mockTzMismatch = false;
+    const p = fakeProps();
+    const wrapper = mount(<EditFEForm {...p} />);
+    expect(wrapper.html()).not.toContain(Content.FARM_EVENT_TZ_WARNING);
+  });
+
+  it("shows tz warning", () => {
+    mockTzMismatch = true;
+    const p = fakeProps();
+    const wrapper = mount(<EditFEForm {...p} />);
+    expect(wrapper.html()).toContain(Content.FARM_EVENT_TZ_WARNING);
+  });
+
   it("sets a subfield of state.fe", () => {
     const p = fakeProps();
     const i = instance(p);
@@ -164,31 +195,6 @@ describe("<EditFEForm />", () => {
     expect(i.state.fe.executable_id).toEqual("1");
   });
 
-  it("renders the correct save button text when adding", () => {
-    const seq = fakeSequence();
-    const fe = fakeFarmEvent("Sequence", seq.body.id || 0);
-    fe.specialStatus = SpecialStatus.DIRTY;
-    const el = mount(<EditFEForm
-      farmEvent={fe}
-      title=""
-      deviceTimezone="America/Chicago"
-      executableOptions={[
-        {
-          label: "Sequence: Every Node",
-          value: 11,
-          headingId: "Sequence"
-        },
-      ]}
-      findExecutable={jest.fn(() => seq)}
-      dispatch={jest.fn()}
-      repeatOptions={repeatOptions()}
-      timeSettings={fakeTimeSettings()}
-      resources={buildResourceIndex([]).index} />);
-    el.update();
-    const txt = el.text().replace(/\s+/g, " ");
-    expect(txt).toContain("Save");
-  });
-
   it("displays success message on save", async () => {
     const p = fakeProps();
     p.farmEvent.body.executable_type = "Regimen";
@@ -412,10 +418,9 @@ describe("<EditFEForm />", () => {
     const inst = instance(p);
     inst.setState({ fe: { body: [oldVariable] } });
     expect(inst.state.fe.body).toEqual([oldVariable]);
-    expect(inst.state.specialStatusLocal).toEqual(SpecialStatus.SAVED);
     inst.editBodyVariables([oldVariable])(newVariable);
     expect(inst.state.fe.body).toEqual([newVariable]);
-    expect(inst.state.specialStatusLocal).toEqual(SpecialStatus.DIRTY);
+    expect(p.setSpecialStatus).toHaveBeenCalledWith(SpecialStatus.DIRTY);
   });
 
   it("saves an updated variable", () => {
@@ -468,13 +473,6 @@ describe("<EditFEForm />", () => {
     expect(inst.updatedFarmEvent.body).toEqual([oldVariable]);
   });
 
-  it("shows error message upon farm event save", () => {
-    const p = fakeProps();
-    const wrapper = shallow(<EditFEForm {...p} />);
-    wrapper.find(FarmEventForm).simulate("save");
-    expect(error).toHaveBeenCalled();
-  });
-
   it("displays correct variable count", () => {
     const p = fakeProps();
     const sequence = fakeSequence();
@@ -702,20 +700,3 @@ describe("<RepeatForm />", () => {
     expect(p.fieldSet).toHaveBeenCalledWith("timeUnit", "never");
   });
 });
-
-describe("<FarmEventDeleteButton />", () => {
-  const fakeProps = (): FarmEventDeleteButtonProps => ({
-    hidden: false,
-    farmEvent: fakeFarmEvent("Sequence", 1),
-    dispatch: jest.fn(() => Promise.resolve()),
-  });
-
-  it("deletes farm event", async () => {
-    const p = fakeProps();
-    const wrapper = shallow(<FarmEventDeleteButton {...p} />);
-    await wrapper.find("i").simulate("click");
-    expect(destroy).toHaveBeenCalledWith(p.farmEvent.uuid);
-    expect(push).toHaveBeenCalledWith(Path.farmEvents());
-    expect(success).toHaveBeenCalledWith("Deleted event.", { title: "Deleted" });
-  });
-});
diff --git a/frontend/farm_events/__tests__/farm_events_test.tsx b/frontend/farm_events/__tests__/farm_events_test.tsx
index cd3f1da8e8..fabeefbc07 100644
--- a/frontend/farm_events/__tests__/farm_events_test.tsx
+++ b/frontend/farm_events/__tests__/farm_events_test.tsx
@@ -42,7 +42,7 @@ describe("<FarmEvents />", () => {
     const wrapper = mount(<FarmEvents {...p} />);
     expect(wrapper.text()).toContain("Every 4 hours");
     const item = wrapper.find(".farm-event-data-block");
-    expect(item.hasClass("gray")).toBeFalsy();
+    expect(item.hasClass("gray")).toBeTruthy();
     expect(item.find(".farm-event-variable").length).toEqual(2);
     expect(item.find("a").first().props().href)
       .toEqual(Path.sequences("Every_4_hours"));
@@ -67,7 +67,7 @@ describe("<FarmEvents />", () => {
     const wrapper = mount(<FarmEvents {...p} />);
     expect(wrapper.text()).toContain("Every 4 hours");
     const item = wrapper.find(".farm-event-data-block");
-    expect(item.hasClass("gray")).toBeFalsy();
+    expect(item.hasClass("gray")).toBeTruthy();
     expect(item.find(".farm-event-variable").length).toEqual(2);
     expect(item.find("a").first().props().href)
       .toEqual(Path.regimens("Every_4_hours"));
diff --git a/frontend/farm_events/__tests__/map_state_to_props_add_edit_test.ts b/frontend/farm_events/__tests__/map_state_to_props_add_edit_test.ts
index d1977fb992..87c57e0440 100644
--- a/frontend/farm_events/__tests__/map_state_to_props_add_edit_test.ts
+++ b/frontend/farm_events/__tests__/map_state_to_props_add_edit_test.ts
@@ -1,9 +1,3 @@
-let mockPath = "";
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 import { mapStateToPropsAddEdit } from "../map_state_to_props_add_edit";
 import { fakeState } from "../../__test_support__/fake_state";
 import {
@@ -12,7 +6,6 @@ import {
 import {
   fakeSequence, fakeRegimen, fakeFarmEvent,
 } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { inputEvent } from "../../__test_support__/fake_html_events";
 import { Path } from "../../internal_urls";
 
@@ -38,6 +31,12 @@ describe("mapStateToPropsAddEdit()", () => {
       const boom = () => handleTime(e, "2017-05-21T22:00:00.000");
       expect(boom).toThrow("Expected a name attribute from time field.");
     });
+
+    it("handles missing hours and minutes", () => {
+      const e = inputEvent(":", "start_time");
+      const result = handleTime(e, "2017-05-21T22:00:00.000");
+      expect(result).toContain("00:00:00");
+    });
   });
 
   describe("executableOptions()", () => {
@@ -64,9 +63,10 @@ describe("mapStateToPropsAddEdit()", () => {
       const state = fakeState();
       const fe = fakeFarmEvent("Sequence", -1);
       state.resources = buildResourceIndex([fe, fakeDevice()]);
-      mockPath = Path.mock(Path.farmEvents(fe.body.id));
+      location.pathname = Path.mock(Path.farmEvents(fe.body.id));
       const { getFarmEvent } = mapStateToPropsAddEdit(state);
-      expect(getFarmEvent()).toEqual(expect.objectContaining({
+      const navigate = jest.fn();
+      expect(getFarmEvent(navigate)).toEqual(expect.objectContaining({
         kind: "FarmEvent",
         body: expect.objectContaining({ id: fe.body.id })
       }));
@@ -75,10 +75,11 @@ describe("mapStateToPropsAddEdit()", () => {
     it("doesn't find event", () => {
       const state = fakeState();
       state.resources = buildResourceIndex([fakeDevice()]);
-      mockPath = Path.mock(Path.farmEvents(999));
+      location.pathname = Path.mock(Path.farmEvents(999));
       const { getFarmEvent } = mapStateToPropsAddEdit(state);
-      getFarmEvent();
-      expect(push).toHaveBeenCalledWith(Path.farmEvents());
+      const navigate = jest.fn();
+      getFarmEvent(navigate);
+      expect(navigate).toHaveBeenCalledWith(Path.farmEvents());
     });
   });
 
diff --git a/frontend/farm_events/add_farm_event.tsx b/frontend/farm_events/add_farm_event.tsx
index faf103284f..e3f5a1003f 100644
--- a/frontend/farm_events/add_farm_event.tsx
+++ b/frontend/farm_events/add_farm_event.tsx
@@ -21,7 +21,8 @@ import { SpecialStatus } from "farmbot";
 import { destroyOK } from "../resources/actions";
 import { Content } from "../constants";
 import { error } from "../toast/toast";
-import { DropDownItem } from "../ui";
+import { DropDownItem, SaveBtn } from "../ui";
+import { noop } from "lodash";
 
 interface State {
   uuid: string;
@@ -86,6 +87,7 @@ export class RawAddFarmEvent
   render() {
     const farmEvent = this.props.findFarmEventByUuid(this.state.uuid);
     const panelName = "add-farm-event";
+    const ref = React.createRef<EditFEForm>();
     return <DesignerPanel panelName={panelName} panel={Panel.FarmEvents}>
       <DesignerPanelHeader
         panelName={panelName}
@@ -93,10 +95,23 @@ export class RawAddFarmEvent
         title={t("Add event")}
         onBack={(farmEvent && !farmEvent.body.id)
           ? () => this.props.dispatch(destroyOK(farmEvent))
-          : undefined} />
+          : undefined}>
+        <SaveBtn
+          status={SpecialStatus.DIRTY}
+          onClick={() => {
+            if (farmEvent) {
+              ref.current?.commitViewModel();
+            } else {
+              error(this.props.executableOptions
+                .filter(x => !x.heading).length < 1
+                ? t(Content.MISSING_EXECUTABLE)
+                : t("Please select a sequence or regimen."));
+            }
+          }} />
+      </DesignerPanelHeader>
       <DesignerPanelContent panelName={panelName}>
         {farmEvent
-          ? <EditFEForm
+          ? <EditFEForm ref={ref}
             farmEvent={farmEvent}
             deviceTimezone={this.props.deviceTimezone}
             repeatOptions={this.props.repeatOptions}
@@ -104,6 +119,7 @@ export class RawAddFarmEvent
             dispatch={this.props.dispatch}
             findExecutable={this.props.findExecutable}
             title={t("Add event")}
+            setSpecialStatus={noop}
             timeSettings={this.props.timeSettings}
             resources={this.props.resources} />
           : <FarmEventForm
@@ -114,15 +130,12 @@ export class RawAddFarmEvent
             executableOptions={this.props.executableOptions}
             executableSet={this.initFarmEvent}
             executableGet={() => undefined}
-            dispatch={this.props.dispatch}
-            specialStatus={SpecialStatus.DIRTY}
-            onSave={() => error(this.props.executableOptions
-              .filter(x => !x.heading).length < 1
-              ? t(Content.MISSING_EXECUTABLE)
-              : t("Please select a sequence or regimen."))} />}
+            dispatch={this.props.dispatch} />}
       </DesignerPanelContent>
     </DesignerPanel>;
   }
 }
 
 export const AddFarmEvent = connect(mapStateToPropsAddEdit)(RawAddFarmEvent);
+// eslint-disable-next-line import/no-default-export
+export default AddFarmEvent;
diff --git a/frontend/farm_events/edit_farm_event.tsx b/frontend/farm_events/edit_farm_event.tsx
index 06531a9552..c14824cccc 100644
--- a/frontend/farm_events/edit_farm_event.tsx
+++ b/frontend/farm_events/edit_farm_event.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { AddEditFarmEventProps } from "../farm_designer/interfaces";
 import { connect } from "react-redux";
 import { mapStateToPropsAddEdit } from "./map_state_to_props_add_edit";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { EditFEForm } from "./edit_fe_form";
 import { t } from "../i18next_wrapper";
 import { Panel } from "../farm_designer/panel_header";
@@ -10,34 +10,57 @@ import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { Path } from "../internal_urls";
+import { SaveBtn } from "../ui";
+import { SpecialStatus } from "farmbot";
+import { destroy } from "../api/crud";
+import { success } from "../toast/toast";
 
-export class RawEditFarmEvent extends React.Component<AddEditFarmEventProps, {}> {
-  render() {
-    const fe = this.props.getFarmEvent();
-    const eventsPath = Path.farmEvents();
-    !fe && Path.startsWith(eventsPath) && push(eventsPath);
-    const panelName = "edit-farm-event";
-    return <DesignerPanel panelName={panelName} panel={Panel.FarmEvents}>
-      <DesignerPanelHeader
-        panelName={panelName}
-        panel={Panel.FarmEvents}
-        title={t("Edit event")} />
-      <DesignerPanelContent panelName={panelName}>
-        {fe
-          ? <EditFEForm farmEvent={fe}
-            deviceTimezone={this.props.deviceTimezone}
-            repeatOptions={this.props.repeatOptions}
-            executableOptions={this.props.executableOptions}
-            dispatch={this.props.dispatch}
-            findExecutable={this.props.findExecutable}
-            title={t("Edit event")}
-            deleteBtn={true}
-            timeSettings={this.props.timeSettings}
-            resources={this.props.resources} />
-          : <div className={"redirect"}>{t("Redirecting")}...</div>}
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+export const RawEditFarmEvent = (props: AddEditFarmEventProps) => {
+  const navigate = useNavigate();
+  const fe = props.getFarmEvent(navigate);
+  const eventsPath = Path.farmEvents();
+  !fe && Path.startsWith(eventsPath) && navigate(eventsPath);
+  const panelName = "edit-farm-event";
+  const ref = React.createRef<EditFEForm>();
+  const [specialStatus, setSpecialStatus] = React.useState(SpecialStatus.SAVED);
+  return <DesignerPanel panelName={panelName} panel={Panel.FarmEvents}>
+    <DesignerPanelHeader
+      panelName={panelName}
+      panel={Panel.FarmEvents}
+      title={t("Edit event")}>
+      <div className={"panel-header-icon-group"}>
+        {fe &&
+          <i className={"fa fa-trash fb-icon-button invert"}
+            title={t("Delete")}
+            onClick={() =>
+              props.dispatch(destroy(fe.uuid))
+                .then(() => {
+                  navigate(Path.farmEvents());
+                  success(t("Deleted event."), { title: t("Deleted") });
+                })} />}
+        <SaveBtn
+          status={specialStatus}
+          onClick={() => ref.current?.commitViewModel()} />
+      </div>
+    </DesignerPanelHeader>
+    <DesignerPanelContent panelName={panelName}>
+      {fe
+        ? <EditFEForm ref={ref}
+          farmEvent={fe}
+          deviceTimezone={props.deviceTimezone}
+          repeatOptions={props.repeatOptions}
+          executableOptions={props.executableOptions}
+          dispatch={props.dispatch}
+          findExecutable={props.findExecutable}
+          title={t("Edit event")}
+          setSpecialStatus={setSpecialStatus}
+          timeSettings={props.timeSettings}
+          resources={props.resources} />
+        : <div className={"redirect"}>{t("Redirecting")}...</div>}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const EditFarmEvent = connect(mapStateToPropsAddEdit)(RawEditFarmEvent);
+// eslint-disable-next-line import/no-default-export
+export default EditFarmEvent;
diff --git a/frontend/farm_events/edit_fe_form.tsx b/frontend/farm_events/edit_fe_form.tsx
index 0e372073db..c5d5450a7e 100644
--- a/frontend/farm_events/edit_fe_form.tsx
+++ b/frontend/farm_events/edit_fe_form.tsx
@@ -9,14 +9,12 @@ import { ExecutableQuery } from "../farm_designer/interfaces";
 import { formatTimeField, formatDateField } from "./map_state_to_props_add_edit";
 import {
   BlurableInput,
-  Col, Row,
-  SaveBtn,
+  Row,
   FBSelect,
   DropDownItem,
   Help,
 } from "../ui";
-import { destroy, save, overwrite } from "../api/crud";
-import { push } from "../history";
+import { save, overwrite } from "../api/crud";
 import { betterMerge, parseIntInput } from "../util";
 import { maybeWarnAboutMissedTasks } from "./util";
 import { FarmEventRepeatForm } from "./farm_event_repeat_form";
@@ -47,6 +45,7 @@ import { SectionHeader } from "../sequences/sequence_editor_middle_active";
 import { nearOsUpdateTime } from "../regimens/bulk_scheduler/bulk_scheduler";
 import { timeToMs } from "../regimens/bulk_scheduler/utils";
 import { getDeviceAccountSettings } from "../resources/selectors";
+import { NavigationContext } from "../routes_helpers";
 
 export const NEVER: TimeUnit = "never";
 /** Separate each of the form fields into their own interface. Recombined later
@@ -146,9 +145,9 @@ export interface EditFEProps {
   dispatch: Function;
   findExecutable: ExecutableQuery;
   title: string;
-  deleteBtn?: boolean;
   timeSettings: TimeSettings;
   resources: ResourceIndex;
+  setSpecialStatus(specialStatus: SpecialStatus): void;
 }
 
 interface EditFEFormState {
@@ -156,20 +155,18 @@ interface EditFEFormState {
    * Hold a partial FarmEvent locally containing only updates made by the form.
    */
   fe: Partial<FarmEventViewModel>;
-  /**
-   * This form has local state and does not cause any global state changes when
-   * editing.
-   *
-   * Example: Navigating away from the page while editing will discard changes.
-   */
-  specialStatusLocal: SpecialStatus;
   variablesCollapsed: boolean;
 }
 
+/**
+ * This form has local state and does not cause any global state changes when
+ * editing.
+ *
+ * Example: Navigating away from the page while editing will discard changes.
+ */
 export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
   state: EditFEFormState = {
     fe: {},
-    specialStatusLocal: SpecialStatus.SAVED,
     variablesCollapsed: false,
   };
 
@@ -220,7 +217,7 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
     (variable: ParameterApplication) => {
       const body = addOrEditParamApps(bodyVariables, variable);
       this.overwriteStateFEBody(body);
-      this.setState({ specialStatusLocal: SpecialStatus.DIRTY });
+      this.props.setSpecialStatus(SpecialStatus.DIRTY);
     };
 
   LocalsList = () => <LocalsList
@@ -232,6 +229,10 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
     onChange={this.editBodyVariables(this.bodyVariables)}
     allowedVariableNodes={AllowedVariableNodes.variable} />;
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   executableSet = (ddi: DropDownItem) => {
     if (ddi.value) {
       const { id, executable_type } = this.props.farmEvent.body;
@@ -239,7 +240,7 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
       const next_executable_type = executableType(ddi.headingId);
       if (id && prev_executable_type !== next_executable_type) {
         error(t("Cannot change between Sequences and Regimens."));
-        push(Path.farmEvents());
+        this.navigate(Path.farmEvents());
       } else {
         const { uuid } = this.props.findExecutable(
           next_executable_type, parseInt("" + ddi.value));
@@ -249,11 +250,11 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
             executable_type: next_executable_type,
             executable_id: ddi.value.toString(),
           },
-          specialStatusLocal: SpecialStatus.DIRTY,
           variablesCollapsed: this.state.variablesCollapsed,
         };
         this.overwriteStateFEBody(variableList(varData) || []);
         this.setState(betterMerge(this.state, update));
+        this.props.setSpecialStatus(SpecialStatus.DIRTY);
       }
     }
   };
@@ -268,12 +269,11 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
     };
   };
 
-  fieldSet = (key: FarmEventViewModelKey, value: string) =>
+  fieldSet = (key: FarmEventViewModelKey, value: string) => {
     // A merge is required to not overwrite `fe`.
-    this.setState(betterMerge(this.state, {
-      fe: { [key]: value },
-      specialStatusLocal: SpecialStatus.DIRTY
-    }));
+    this.setState(betterMerge(this.state, { fe: { [key]: value } }));
+    this.props.setSpecialStatus(SpecialStatus.DIRTY);
+  };
 
   fieldGet = (key: FarmEventViewModelKey): string =>
     (this.state.fe[key] || this.viewModel[key] || "").toString();
@@ -350,7 +350,7 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
     dispatch(overwrite(this.props.farmEvent, this.updatedFarmEvent));
     dispatch(save(this.props.farmEvent.uuid))
       .then(() => {
-        this.setState({ specialStatusLocal: SpecialStatus.SAVED });
+        this.props.setSpecialStatus(SpecialStatus.SAVED);
         dispatch(maybeWarnAboutMissedTasks(this.props.farmEvent,
           () => alert(t(Content.REGIMEN_TODAY_SKIPPED_ITEM_RISK)), now));
         success(t("The next item in this event will run {{timeFromNow}}.",
@@ -360,11 +360,11 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
             .map(item => nearOsUpdateTime(timeToMs(item.format("HH:mm")),
               getDeviceAccountSettings(this.props.resources).body.ota_hour)));
         warn && warning(Content.WITHIN_HOUR_OF_OS_UPDATE);
-        push(Path.farmEvents());
+        this.navigate(Path.farmEvents());
       })
       .catch(() => {
         error(t("Unable to save event."));
-        this.setState({ specialStatusLocal: SpecialStatus.DIRTY });
+        this.props.setSpecialStatus(SpecialStatus.DIRTY);
       });
   };
 
@@ -372,7 +372,6 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
     this.setState({ variablesCollapsed: !this.state.variablesCollapsed });
 
   render() {
-    const { farmEvent } = this.props;
     const variableCount = Object.values(this.variableData || {})
       .filter(v => v?.celeryNode.kind == "parameter_declaration")
       .length;
@@ -386,10 +385,7 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
           executableOptions={this.props.executableOptions}
           executableSet={this.executableSet}
           executableGet={this.executableGet}
-          dispatch={this.props.dispatch}
-          specialStatus={farmEvent.specialStatus
-            || this.state.specialStatusLocal}
-          onSave={() => this.commitViewModel()}>
+          dispatch={this.props.dispatch}>
           <div className={"farm-event-form-content"}>
             {variableCount > 0 &&
               <SectionHeader title={t("Variables")}
@@ -404,10 +400,6 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
           </div>
         </FarmEventForm>
       </ErrorBoundary>
-      <FarmEventDeleteButton
-        hidden={!this.props.deleteBtn}
-        farmEvent={this.props.farmEvent}
-        dispatch={this.props.dispatch} />
       <TzWarning deviceTimezone={this.props.deviceTimezone} />
     </div>;
   }
@@ -435,27 +427,23 @@ export const StartTimeForm = (props: StartTimeFormProps) => {
       {t("Starts")}
     </label>
     <Row>
-      <Col xs={6}>
-        <BlurableInput
-          type="date"
-          disabled={props.disabled}
-          className="add-event-start-date"
-          name="start_date"
-          value={props.fieldGet("startDate")}
-          error={startDatetimeError}
-          onCommit={e => props.fieldSet("startDate", e.currentTarget.value)} />
-      </Col>
-      <Col xs={6}>
-        <EventTimePicker
-          className="add-event-start-time"
-          name="start_time"
-          timeSettings={props.timeSettings}
-          value={props.fieldGet("startTime")}
-          error={startDatetimeError}
-          onCommit={e => props.fieldSet("startTime", e.currentTarget.value)}
-          disabled={props.disabled || forceMidnight}
-          hidden={forceMidnight} />
-      </Col>
+      <BlurableInput
+        type="date"
+        disabled={props.disabled}
+        className="add-event-start-date"
+        name="start_date"
+        value={props.fieldGet("startDate")}
+        error={startDatetimeError}
+        onCommit={e => props.fieldSet("startDate", e.currentTarget.value)} />
+      <EventTimePicker
+        className="add-event-start-time"
+        name="start_time"
+        timeSettings={props.timeSettings}
+        value={props.fieldGet("startTime")}
+        error={startDatetimeError}
+        onCommit={e => props.fieldSet("startTime", e.currentTarget.value)}
+        disabled={props.disabled || forceMidnight}
+        hidden={forceMidnight} />
     </Row>
   </div>;
 };
@@ -470,7 +458,7 @@ export interface RepeatFormProps {
 
 export const RepeatForm = (props: RepeatFormProps) => {
   const allowRepeat = !props.isRegimen && props.fieldGet("timeUnit") !== NEVER;
-  return <div className="farm-event-repeat-options">
+  return <div className="farm-event-repeat-options grid">
     {!props.isRegimen
       ? <label>
         <input type="checkbox"
@@ -521,22 +509,6 @@ const timeCheck = (
   }
 };
 
-export interface FarmEventDeleteButtonProps {
-  hidden: boolean;
-  farmEvent: TaggedFarmEvent;
-  dispatch: Function;
-}
-
-export const FarmEventDeleteButton = (props: FarmEventDeleteButtonProps) =>
-  <i className={"fa fa-trash fb-icon-button"} hidden={props.hidden}
-    title={t("Delete")}
-    onClick={() =>
-      props.dispatch(destroy(props.farmEvent.uuid))
-        .then(() => {
-          push(Path.farmEvents());
-          success(t("Deleted event."), { title: t("Deleted") });
-        })} />;
-
 interface FarmEventFormProps {
   isRegimen: boolean;
   fieldGet(key: FarmEventViewModelKey): string;
@@ -546,26 +518,26 @@ interface FarmEventFormProps {
   executableSet(ddi: DropDownItem): void;
   executableGet(): DropDownItem | undefined;
   dispatch: Function;
-  specialStatus: SpecialStatus;
-  onSave(): void;
-  children?: React.ReactChild;
+  children?: React.ReactNode;
 }
 
 export const FarmEventForm = (props: FarmEventFormProps) => {
   const { isRegimen, fieldGet, fieldSet, timeSettings } = props;
-  return <div className="farm-event-form">
-    <label>
-      {t("Sequence or Regimen")}
-    </label>
-    {props.executableOptions.filter(x => !x.heading).length < 1 &&
-      <Help
-        text={Content.MISSING_EXECUTABLE}
-        customIcon={"fa-exclamation-triangle"} />}
-    <FBSelect
-      list={props.executableOptions}
-      onChange={props.executableSet}
-      selectedItem={props.executableGet()} />
-    {props.children}
+  return <div className="farm-event-form grid">
+    <div>
+      <label>
+        {t("Sequence or Regimen")}
+      </label>
+      {props.executableOptions.filter(x => !x.heading).length < 1 &&
+        <Help
+          text={Content.MISSING_EXECUTABLE}
+          customIcon={"fa-exclamation-triangle"} />}
+      <FBSelect
+        list={props.executableOptions}
+        onChange={props.executableSet}
+        selectedItem={props.executableGet()} />
+      {props.children}
+    </div>
     <StartTimeForm
       disabled={!props.executableGet()}
       isRegimen={isRegimen}
@@ -578,8 +550,5 @@ export const FarmEventForm = (props: FarmEventFormProps) => {
       fieldGet={fieldGet}
       fieldSet={fieldSet}
       timeSettings={props.timeSettings} />
-    <SaveBtn
-      status={props.specialStatus}
-      onClick={props.onSave} />
   </div>;
 };
diff --git a/frontend/farm_events/event_time_picker.tsx b/frontend/farm_events/event_time_picker.tsx
index 83054cc942..205a117b67 100644
--- a/frontend/farm_events/event_time_picker.tsx
+++ b/frontend/farm_events/event_time_picker.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { BlurableInput } from "../ui/index";
+import { BlurableInput } from "../ui";
 import { TimeSettings } from "../interfaces";
 
 interface EventTimePickerProps {
diff --git a/frontend/farm_events/farm_event_repeat_form.tsx b/frontend/farm_events/farm_event_repeat_form.tsx
index 7ee43f47fb..8610741ffd 100644
--- a/frontend/farm_events/farm_event_repeat_form.tsx
+++ b/frontend/farm_events/farm_event_repeat_form.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import {
-  Row, Col, BlurableInput, FBSelect, DropDownItem,
-} from "../ui/index";
+  Row, BlurableInput, FBSelect, DropDownItem,
+} from "../ui";
 import { repeatOptions } from "./map_state_to_props_add_edit";
 import { keyBy } from "lodash";
 import { FarmEventViewModel } from "./edit_fe_form";
@@ -32,12 +32,12 @@ export function FarmEventRepeatForm(props: FarmEventRepeatFormProps) {
   const { disabled, fieldSet, repeat, endDate, endTime, timeUnit } = props;
   return props.hidden
     ? <div className={"no-repeat-form"} />
-    : <div className="farm-event-repeat-form">
-      <label>
-        {t("Every")}
-      </label>
-      <Row>
-        <Col xs={4}>
+    : <div className="farm-event-repeat-form row">
+      <div className="grid no-gap">
+        <label>
+          {t("Every")}
+        </label>
+        <Row className="grid-exp-2">
           <BlurableInput
             disabled={disabled}
             placeholder="(Number)"
@@ -47,19 +47,17 @@ export function FarmEventRepeatForm(props: FarmEventRepeatFormProps) {
             value={repeat}
             onCommit={e => fieldSet("repeat", e.currentTarget.value)}
             min={1} />
-        </Col>
-        <Col xs={8}>
           <FBSelect
             list={repeatOptions()}
             onChange={ddi => fieldSet("timeUnit", "" + ddi.value)}
             selectedItem={OPTN_LOOKUP()[timeUnit] || OPTN_LOOKUP()["daily"]} />
-        </Col>
-      </Row>
-      <label>
-        {t("Until")}
-      </label>
-      <Row>
-        <Col xs={6}>
+        </Row>
+      </div>
+      <div className="grid no-gap">
+        <label>
+          {t("Until")}
+        </label>
+        <Row className="grid-2-col">
           <BlurableInput
             disabled={disabled}
             type="date"
@@ -68,8 +66,6 @@ export function FarmEventRepeatForm(props: FarmEventRepeatFormProps) {
             value={endDate}
             onCommit={e => fieldSet("endDate", e.currentTarget.value)}
             error={props.dateError} />
-        </Col>
-        <Col xs={6}>
           <EventTimePicker
             disabled={disabled}
             className="add-event-end-time"
@@ -78,7 +74,7 @@ export function FarmEventRepeatForm(props: FarmEventRepeatFormProps) {
             value={endTime}
             onCommit={e => fieldSet("endTime", e.currentTarget.value)}
             error={props.timeError} />
-        </Col>
-      </Row>
+        </Row>
+      </div>
     </div>;
 }
diff --git a/frontend/farm_events/farm_events.tsx b/frontend/farm_events/farm_events.tsx
index 2c06df0b6c..a479fcacaa 100644
--- a/frontend/farm_events/farm_events.tsx
+++ b/frontend/farm_events/farm_events.tsx
@@ -6,7 +6,7 @@ import {
 } from "../farm_designer/interfaces";
 import moment from "moment";
 import { Content } from "../constants";
-import { Panel, DesignerNavTabs } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { Link } from "../link";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
@@ -71,7 +71,7 @@ export class RawFarmEvents
 
         return <div
           className={
-            `farm-event-data-block ${occur.color == "gray" ? "" : occur.color}`}
+            `farm-event-data-block row ${occur.color}`}
           key={`${occur.sortKey}.${index}`}>
           <div className="farm-event-data-time">
             {occur.timeStr}
@@ -96,8 +96,8 @@ export class RawFarmEvents
       .filter(item => !this.searchTerm ||
         some(item.items.map(filterSearch(this.searchTerm))))
       .map(item => {
-        return <div className="farm-event" key={item.sortKey}>
-          <div className="farm-event-date">
+        return <div className="farm-event row grid-exp-2" key={item.sortKey}>
+          <div className="farm-event-date grid no-gap">
             <div className="farm-event-date-month">
               {item.month}
             </div>
@@ -105,7 +105,7 @@ export class RawFarmEvents
               <b>{item.day}</b>
             </div>
           </div>
-          <div className="farm-event-data">
+          <div className="farm-event-data grid half-gap">
             {this.innerRows(item.items)}
           </div>
         </div>;
@@ -116,7 +116,7 @@ export class RawFarmEvents
     const years = uniq(map(this.props.calendarRows, "year"));
     return years.map(year => {
       return <div key={moment(year, "YY").unix()}
-        className="farm-event-calendar-rows">
+        className="farm-event-calendar-rows grid">
         <div className="farm-event-year">
           20{year}
         </div>
@@ -127,15 +127,12 @@ export class RawFarmEvents
 
   render() {
     return <DesignerPanel panelName={"farm-event"} panel={Panel.FarmEvents}>
-      <DesignerNavTabs />
       <DesignerPanelTop
         panel={Panel.FarmEvents}
         linkTo={Path.farmEvents("add")}
         title={t("Add event")}>
         <SearchField nameKey={"events"}
           searchTerm={this.state.searchTerm}
-          customLeftIcon={
-            <i className="fa fa-calendar" onClick={this.resetCalendar} />}
           placeholder={t("Search your events...")}
           onChange={searchTerm => this.setState({ searchTerm })} />
       </DesignerPanelTop>
@@ -156,3 +153,5 @@ export class RawFarmEvents
 }
 
 export const FarmEvents = connect(mapStateToProps)(RawFarmEvents);
+// eslint-disable-next-line import/no-default-export
+export default FarmEvents;
diff --git a/frontend/farm_events/map_state_to_props_add_edit.ts b/frontend/farm_events/map_state_to_props_add_edit.ts
index 70c5a86324..14d1328219 100644
--- a/frontend/farm_events/map_state_to_props_add_edit.ts
+++ b/frontend/farm_events/map_state_to_props_add_edit.ts
@@ -2,7 +2,6 @@ import moment from "moment";
 import { t } from "../i18next_wrapper";
 import { AddEditFarmEventProps } from "../farm_designer/interfaces";
 import { Everything, TimeSettings } from "../interfaces";
-import { push } from "../history";
 import {
   selectAllFarmEvents,
   indexRegimenById,
@@ -25,6 +24,7 @@ import { DropDownItem } from "../ui";
 import { hasId } from "../resources/util";
 import { ExecutableType } from "farmbot/dist/resources/api_resources";
 import { Path } from "../internal_urls";
+import { NavigateFunction } from "react-router";
 
 export const formatTimeField = (input: string, timeSettings: TimeSettings) => {
   const iso = new Date(input).toISOString();
@@ -56,7 +56,7 @@ const handleTime = (
   switch (e.currentTarget.name) {
     case "start_time":
       // Put the current ISO established by the date field into a var
-      const currentStartISO = new Date((currentISO || "").toString())
+      const currentStartISO = new Date(currentISO.toString())
         .toISOString();
 
       // Set the time of the already existing iso string
@@ -68,7 +68,7 @@ const handleTime = (
       return newStartISO;
 
     case "end_time":
-      const currentEndISO = new Date((currentISO || "").toString())
+      const currentEndISO = new Date(currentISO.toString())
         .toISOString();
 
       const newEndISO = "" + moment(currentEndISO)
@@ -110,14 +110,15 @@ export function mapStateToPropsAddEdit(props: Everything): AddEditFarmEventProps
     (uuid: string | undefined): TaggedFarmEvent | undefined =>
       uuid ? farmEvents.filter(x => x.uuid === uuid)[0] : undefined;
 
-  const getFarmEvent = (): TaggedFarmEvent | undefined => {
-    const id = parseInt(Path.getSlug(Path.farmEvents()));
-    if (id && hasId(props.resources.index, "FarmEvent", id)) {
-      return findFarmEventById(props.resources.index, id);
-    } else {
-      push(Path.farmEvents());
-    }
-  };
+  const getFarmEvent =
+    (navigate: NavigateFunction): TaggedFarmEvent | undefined => {
+      const id = parseInt(Path.getSlug(Path.farmEvents()));
+      if (id && hasId(props.resources.index, "FarmEvent", id)) {
+        return findFarmEventById(props.resources.index, id);
+      } else {
+        navigate(Path.farmEvents());
+      }
+    };
 
   const findExecutable = (kind: ExecutableType, id: number):
     TaggedSequence | TaggedRegimen => {
diff --git a/frontend/farm_events/tz_warning.tsx b/frontend/farm_events/tz_warning.tsx
index 2fba6ae799..398bfe2542 100644
--- a/frontend/farm_events/tz_warning.tsx
+++ b/frontend/farm_events/tz_warning.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { timezoneMismatch } from "../devices/timezones/guess_timezone";
 import { Content } from "../constants";
 import { t } from "../i18next_wrapper";
diff --git a/frontend/farmware/__tests__/farmware_info_test.tsx b/frontend/farmware/__tests__/farmware_info_test.tsx
index 9c456c99b7..2a43a94abe 100644
--- a/frontend/farmware/__tests__/farmware_info_test.tsx
+++ b/frontend/farmware/__tests__/farmware_info_test.tsx
@@ -16,7 +16,6 @@ import {
 } from "../../__test_support__/fake_state/resources";
 import { error } from "../../toast/toast";
 import { retryFetchPackageName } from "../actions";
-import { push } from "../../history";
 import { Path } from "../../internal_urls";
 
 describe("<FarmwareInfo />", () => {
@@ -97,7 +96,7 @@ describe("<FarmwareInfo />", () => {
     const wrapper = mount(<FarmwareInfo {...p} />);
     clickButton(wrapper, 1, "Remove");
     expect(destroy).toHaveBeenCalledWith(p.installations[0].uuid);
-    expect(push).toHaveBeenCalledWith(Path.farmware());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.farmware());
   });
 
   it("doesn't remove Farmware from API", () => {
@@ -110,7 +109,7 @@ describe("<FarmwareInfo />", () => {
     const wrapper = mount(<FarmwareInfo {...p} />);
     clickButton(wrapper, 1, "Remove");
     expect(destroy).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("errors during removal of Farmware from API: not found", () => {
diff --git a/frontend/farmware/__tests__/set_active_farmware_by_name_test.ts b/frontend/farmware/__tests__/set_active_farmware_by_name_test.ts
index 1d4d9273cd..5574fad080 100644
--- a/frontend/farmware/__tests__/set_active_farmware_by_name_test.ts
+++ b/frontend/farmware/__tests__/set_active_farmware_by_name_test.ts
@@ -1,30 +1,25 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.farmware("my_farmware"));
-jest.mock("../../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../redux/store", () => ({ store: { dispatch: jest.fn() } }));
 
 import { setActiveFarmwareByName } from "../set_active_farmware_by_name";
 import { store } from "../../redux/store";
 import { Actions } from "../../constants";
+import { Path } from "../../internal_urls";
 
 describe("setActiveFarmwareByName()", () => {
   it("returns early if there is nothing to compare", () => {
-    mockPath = Path.mock(Path.farmware());
+    location.pathname = Path.mock(Path.farmware());
     setActiveFarmwareByName([]);
     expect(store.dispatch).not.toHaveBeenCalled();
   });
 
   it("sometimes can't find a farmware by name", () => {
-    mockPath = Path.mock(Path.farmware("non_farmware"));
+    location.pathname = Path.mock(Path.farmware("non_farmware"));
     setActiveFarmwareByName([]);
     expect(store.dispatch).not.toHaveBeenCalled();
   });
 
   it("finds a farmware by name", () => {
-    mockPath = Path.mock(Path.farmware("my_farmware"));
+    location.pathname = Path.mock(Path.farmware("my_farmware"));
     setActiveFarmwareByName(["my_farmware"]);
     expect(store.dispatch).toHaveBeenCalledWith({
       type: Actions.SELECT_FARMWARE,
@@ -33,7 +28,7 @@ describe("setActiveFarmwareByName()", () => {
   });
 
   it("finds a farmware by name: other match", () => {
-    mockPath = Path.mock(Path.farmware("weed_detector"));
+    location.pathname = Path.mock(Path.farmware("weed_detector"));
     setActiveFarmwareByName(["plant_detection"]);
     expect(store.dispatch).toHaveBeenCalledWith({
       type: Actions.SELECT_FARMWARE,
@@ -42,7 +37,7 @@ describe("setActiveFarmwareByName()", () => {
   });
 
   it("handles undefined farmware names", () => {
-    mockPath = Path.mock(Path.farmware("some_farmware"));
+    location.pathname = Path.mock(Path.farmware("some_farmware"));
     setActiveFarmwareByName([undefined]);
     expect(store.dispatch).not.toHaveBeenCalled();
   });
diff --git a/frontend/farmware/farmware_forms.tsx b/frontend/farmware/farmware_forms.tsx
index 4f13d2502f..7634257e90 100644
--- a/frontend/farmware/farmware_forms.tsx
+++ b/frontend/farmware/farmware_forms.tsx
@@ -89,7 +89,7 @@ export interface ConfigFieldsProps {
 }
 
 /** Return a div that includes all Farmware input fields. */
-export function ConfigFields(props: ConfigFieldsProps): JSX.Element {
+export function ConfigFields(props: ConfigFieldsProps): React.ReactNode {
   const { farmwareName, farmwareConfigs, getValue, userEnv } = props;
   return <div className={"farmware-config-fields"}>
     {farmwareConfigs.map(config => {
diff --git a/frontend/farmware/farmware_info.tsx b/frontend/farmware/farmware_info.tsx
index f86b9b1960..ff858e1059 100644
--- a/frontend/farmware/farmware_info.tsx
+++ b/frontend/farmware/farmware_info.tsx
@@ -6,7 +6,7 @@ import { destroy } from "../api/crud";
 import { error } from "../toast/toast";
 import { isPendingInstallation } from "./state_to_props";
 import { retryFetchPackageName } from "./actions";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { FarmwareManifestInfo } from "./interfaces";
 import { t } from "../i18next_wrapper";
 import { Popover } from "../ui";
@@ -52,7 +52,7 @@ const PendingInstallNameError =
   ({ url, installations }: {
     url: string | undefined,
     installations: TaggedFarmwareInstallation[],
-  }): JSX.Element => {
+  }): React.ReactNode => {
     const installation: TaggedFarmwareInstallation | undefined =
       installations.filter(x => x.body.url === url)[0];
     const packageError = installation?.body.package_error;
@@ -124,7 +124,8 @@ const uninstallFarmware = (props: RemoveFarmwareProps) =>
       firstPartyFarmwareNames.includes(farmwareName);
     if (!isFirstParty || confirm(Content.FIRST_PARTY_WARNING)) {
       removeFromAPI({ url, installations, dispatch });
-      push(Path.farmware());
+      const navigate = useNavigate();
+      navigate(Path.farmware());
     }
   };
 
diff --git a/frontend/farmware/panel/__tests__/add_test.tsx b/frontend/farmware/panel/__tests__/add_test.tsx
index 4b1e68d8dc..47cb5f7ad4 100644
--- a/frontend/farmware/panel/__tests__/add_test.tsx
+++ b/frontend/farmware/panel/__tests__/add_test.tsx
@@ -8,7 +8,6 @@ import {
   mapStateToProps,
 } from "../add";
 import { initSave } from "../../../api/crud";
-import { push } from "../../../history";
 import { fakeState } from "../../../__test_support__/fake_state";
 import { error } from "../../../toast/toast";
 import { Path } from "../../../internal_urls";
@@ -25,31 +24,30 @@ describe("<DesignerFarmwareAdd />", () => {
   });
 
   it("updates url", () => {
-    const wrapper = shallow<DesignerFarmwareAdd>(
-      <DesignerFarmwareAdd {...fakeProps()} />);
-    wrapper.find("input").simulate("change", {
-      currentTarget: { value: "fake url" }
-    });
-    expect(wrapper.state().packageUrl).toEqual("fake url");
+    const wrapper = shallow(<DesignerFarmwareAdd {...fakeProps()} />);
+    wrapper.find("input").simulate("change",
+      { currentTarget: { value: "fake url" } });
+    expect(wrapper.find("input").props().value).toEqual("fake url");
   });
 
   it("adds a new farmware", async () => {
-    const wrapper = mount(<DesignerFarmwareAdd {...fakeProps()} />);
-    wrapper.setState({ packageUrl: "fake url" });
+    const wrapper = shallow(<DesignerFarmwareAdd {...fakeProps()} />);
+    wrapper.find("input").simulate("change",
+      { currentTarget: { value: "fake url" } });
     await wrapper.find("button").simulate("click");
     expect(initSave).toHaveBeenCalledWith("FarmwareInstallation", {
       url: "fake url"
     });
-    expect(push).toHaveBeenCalledWith(Path.farmware());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.farmware());
     expect(error).not.toHaveBeenCalled();
   });
 
   it("doesn't add a new farmware", () => {
-    const wrapper = mount(<DesignerFarmwareAdd {...fakeProps()} />);
-    wrapper.setState({ packageUrl: undefined });
+    const wrapper = shallow(<DesignerFarmwareAdd {...fakeProps()} />);
+    wrapper.find("input").simulate("change", { currentTarget: { value: "" } });
     wrapper.find("button").simulate("click");
     expect(initSave).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(error).toHaveBeenCalledWith("Please enter a URL");
   });
 });
diff --git a/frontend/farmware/panel/__tests__/list_test.tsx b/frontend/farmware/panel/__tests__/list_test.tsx
index 6c2a09c52d..230f215a73 100644
--- a/frontend/farmware/panel/__tests__/list_test.tsx
+++ b/frontend/farmware/panel/__tests__/list_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount, shallow } from "enzyme";
 import {
   RawDesignerFarmwareList as DesignerFarmwareList,
diff --git a/frontend/farmware/panel/add.tsx b/frontend/farmware/panel/add.tsx
index 209171419f..727ca9352a 100644
--- a/frontend/farmware/panel/add.tsx
+++ b/frontend/farmware/panel/add.tsx
@@ -7,7 +7,7 @@ import { Panel } from "../../farm_designer/panel_header";
 import { Everything } from "../../interfaces";
 import { t } from "../../i18next_wrapper";
 import { initSave } from "../../api/crud";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { error } from "../../toast/toast";
 import { Path } from "../../internal_urls";
 
@@ -21,54 +21,49 @@ export const mapStateToProps = (props: Everything): DesignerFarmwareAddProps =>
   };
 };
 
-interface FarmwareAddState {
-  packageUrl: string;
-}
-
-export class RawDesignerFarmwareAdd
-  extends React.Component<DesignerFarmwareAddProps, FarmwareAddState> {
-  state: FarmwareAddState = { packageUrl: "" };
-
-  clearUrl = () => push(Path.farmware());
+export const RawDesignerFarmwareAdd = (props: DesignerFarmwareAddProps) => {
+  const [packageUrl, setPackageUrl] = React.useState("");
+  const navigate = useNavigate();
+  const clearUrl = () => { navigate(Path.farmware()); };
 
-  install = () => {
-    const url = this.state.packageUrl;
+  const install = () => {
+    const url = packageUrl;
     if (url) {
-      this.props.dispatch(initSave("FarmwareInstallation",
+      props.dispatch(initSave("FarmwareInstallation",
         { url, package: undefined, package_error: undefined }))
-        .then(this.clearUrl);
+        .then(clearUrl);
     } else {
       error(t("Please enter a URL"));
     }
   };
 
-  render() {
-    const panelName = "farmware-add";
-    return <DesignerPanel panelName={panelName} panel={Panel.Farmware}>
-      <DesignerPanelHeader
-        panelName={panelName}
-        panel={Panel.Farmware}
-        title={t("Install new Farmware")}
-        backTo={Path.farmware()} />
-      <DesignerPanelContent panelName={panelName}>
-        <label>
-          {t("Farmware manifest URL")}
-        </label>
-        <fieldset>
-          <input type="url" name="url"
-            placeholder={"https://...."}
-            value={this.state.packageUrl || ""}
-            onChange={e => this.setState({ packageUrl: e.currentTarget.value })} />
-          <button
-            className="fb-button green"
-            title={t("install Farmware")}
-            onClick={this.install}>
-            {t("Install")}
-          </button>
-        </fieldset>
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+  const panelName = "farmware-add";
+  return <DesignerPanel panelName={panelName} panel={Panel.Farmware}>
+    <DesignerPanelHeader
+      panelName={panelName}
+      panel={Panel.Farmware}
+      title={t("Install new Farmware")}
+      backTo={Path.farmware()} />
+    <DesignerPanelContent panelName={panelName}>
+      <label>
+        {t("Farmware manifest URL")}
+      </label>
+      <fieldset>
+        <input type="url" name="url"
+          placeholder={"https://...."}
+          value={packageUrl || ""}
+          onChange={e => setPackageUrl(e.currentTarget.value)} />
+        <button
+          className="fb-button green"
+          title={t("install Farmware")}
+          onClick={install}>
+          {t("Install")}
+        </button>
+      </fieldset>
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const DesignerFarmwareAdd = connect(mapStateToProps)(RawDesignerFarmwareAdd);
+// eslint-disable-next-line import/no-default-export
+export default DesignerFarmwareAdd;
diff --git a/frontend/farmware/panel/info.tsx b/frontend/farmware/panel/info.tsx
index 5980d4989e..19d0daa85e 100644
--- a/frontend/farmware/panel/info.tsx
+++ b/frontend/farmware/panel/info.tsx
@@ -110,3 +110,5 @@ export class RawDesignerFarmwareInfo
 
 export const DesignerFarmwareInfo =
   connect(mapStateToProps)(RawDesignerFarmwareInfo);
+// eslint-disable-next-line import/no-default-export
+export default DesignerFarmwareInfo;
diff --git a/frontend/farmware/panel/list.tsx b/frontend/farmware/panel/list.tsx
index fd63576ec9..ef7e390a28 100644
--- a/frontend/farmware/panel/list.tsx
+++ b/frontend/farmware/panel/list.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../../farm_designer/panel_header";
+import { Panel } from "../../farm_designer/panel_header";
 import { Everything } from "../../interfaces";
 import { Farmwares } from "../interfaces";
 import { t } from "../../i18next_wrapper";
@@ -50,7 +50,6 @@ export class RawDesignerFarmwareList
       .filter(fwName => !this.props.firstPartyFarmwareNames.includes(fwName));
     const panelName = "designer-farmware-list";
     return <DesignerPanel panelName={panelName} panel={Panel.Farmware}>
-      <DesignerNavTabs />
       <DesignerPanelTop
         panel={Panel.Farmware}
         linkTo={Path.farmware("add")}
@@ -83,6 +82,8 @@ export class RawDesignerFarmwareList
 
 export const DesignerFarmwareList =
   connect(mapStateToProps)(RawDesignerFarmwareList);
+// eslint-disable-next-line import/no-default-export
+export default DesignerFarmwareList;
 
 export interface FarmwareListItemProps {
   dispatch: Function;
diff --git a/frontend/featured/__tests__/content_test.tsx b/frontend/featured/__tests__/content_test.tsx
deleted file mode 100644
index 5c84969f3d..0000000000
--- a/frontend/featured/__tests__/content_test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-jest.mock("axios", () => ({
-  get: () => Promise.resolve({
-    data: [
-      { id: 1, name: "name", description: "", path: "", color: "gray" },
-    ]
-  }),
-}));
-
-import React from "react";
-import { mount } from "enzyme";
-import { FeaturedSequencePage } from "../content";
-
-describe("<FeaturedSequencePage />", () => {
-  it("renders", async () => {
-    const wrapper = await mount(<FeaturedSequencePage />);
-    expect(wrapper.text().toLowerCase()).toContain("featured");
-    expect(wrapper.text().toLowerCase()).toContain("name");
-  });
-});
diff --git a/frontend/featured/__tests__/index_test.tsx b/frontend/featured/__tests__/index_test.tsx
deleted file mode 100644
index d08530f1df..0000000000
--- a/frontend/featured/__tests__/index_test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-jest.mock("../../util/page", () => ({ entryPoint: jest.fn() }));
-
-import { entryPoint } from "../../util";
-import { FeaturedSequencePage } from "../content";
-
-describe("FeaturedSequencePage loader", () => {
-  it("calls entryPoint", async () => {
-    await import("../index");
-    expect(entryPoint).toHaveBeenCalledWith(FeaturedSequencePage);
-  });
-});
diff --git a/frontend/featured/content.tsx b/frontend/featured/content.tsx
deleted file mode 100644
index bd2b0ca02f..0000000000
--- a/frontend/featured/content.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import axios from "axios";
-import { Color } from "farmbot";
-import React from "react";
-import { API } from "../api";
-import { Content } from "../constants";
-import { t } from "../i18next_wrapper";
-import { Markdown } from "../ui";
-
-export interface FeaturedSequence {
-  id: number;
-  path: string;
-  name: string;
-  description: string;
-  color: Color;
-}
-
-const FeaturedSequenceRow = (content: FeaturedSequence) =>
-  <tr key={content.id}>
-    <td>
-      {content.name}
-      <details>
-        <summary>{t("Description")}</summary>
-        <div className={"sequence-description"}>
-          <Markdown>{content.description || ""}</Markdown>
-        </div>
-      </details>
-    </td>
-    <td style={{ verticalAlign: "top" }}>
-      <a className={"transparent-button light"}
-        href={API.current.baseUrl + content.path}>
-        {t("View")}
-      </a>
-    </td>
-  </tr>;
-
-interface FeaturedSequencePageState {
-  sequences: FeaturedSequence[];
-}
-
-export class FeaturedSequencePage
-  extends React.Component<{}, FeaturedSequencePageState> {
-  state: FeaturedSequencePageState = { sequences: [] };
-
-  componentDidMount() {
-    API.setBaseUrl(API.fetchBrowserLocation());
-    axios.get(API.current.featuredSequencesPath)
-      .then(response => this.setState({ sequences: response.data }));
-  }
-
-  render() {
-    return <div className={"static-page featured-sequences-page"}>
-      <div className={"all-content-wrapper"}>
-        <h1>{t("Featured Shared Sequences")}</h1>
-        <p>{t(Content.FEATURED_SEQUENCES)}</p>
-        <table>
-          <thead>
-            <tr>
-              <th style={{ width: "100%" }}>{t("Name")}</th>
-              <th>{t("Link")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.state.sequences.map(FeaturedSequenceRow)}
-          </tbody>
-        </table>
-      </div>
-    </div>;
-  }
-}
diff --git a/frontend/featured/index.tsx b/frontend/featured/index.tsx
deleted file mode 100644
index 4fea41996c..0000000000
--- a/frontend/featured/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { entryPoint } from "../util";
-import { FeaturedSequencePage } from "./content";
-
-entryPoint(FeaturedSequencePage);
diff --git a/frontend/folders/__tests__/actions_test.ts b/frontend/folders/__tests__/actions_test.ts
index bfd62cb1c2..7b85f647fb 100644
--- a/frontend/folders/__tests__/actions_test.ts
+++ b/frontend/folders/__tests__/actions_test.ts
@@ -34,7 +34,6 @@ import { save, edit, init, initSave, destroy } from "../../api/crud";
 import {
   setActiveSequenceByName,
 } from "../../sequences/set_active_sequence_by_name";
-import { push } from "../../history";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
 import { stepGet } from "../../draggable/actions";
 import { SpecialStatus } from "farmbot";
@@ -98,41 +97,45 @@ describe("setFolderName", () => {
 
 describe("addNewSequenceToFolder", () => {
   it("adds a new sequence", () => {
-    addNewSequenceToFolder();
+    const navigate = jest.fn();
+    addNewSequenceToFolder(navigate);
     expect(setActiveSequenceByName).toHaveBeenCalled();
     expect(init).toHaveBeenCalledWith("Sequence", expect.objectContaining({
       name: "New Sequence 1",
       color: "gray",
       folder_id: undefined,
     }));
-    expect(push).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
+    expect(navigate).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
   });
 
   it("adds a new sequence to a folder", () => {
-    addNewSequenceToFolder({ id: 11 });
+    const navigate = jest.fn();
+    addNewSequenceToFolder(navigate, { id: 11 });
     expect(setActiveSequenceByName).toHaveBeenCalled();
     expect(init).toHaveBeenCalledWith("Sequence", expect.objectContaining({
       name: "New Sequence 1",
       color: "gray",
       folder_id: 11,
     }));
-    expect(push).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
+    expect(navigate).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
   });
 
   it("adds a new sequence to a folder with a color", () => {
-    addNewSequenceToFolder({ id: 11, color: "blue" });
+    const navigate = jest.fn();
+    addNewSequenceToFolder(navigate, { id: 11, color: "blue" });
     expect(setActiveSequenceByName).toHaveBeenCalled();
     expect(init).toHaveBeenCalledWith("Sequence", expect.objectContaining({
       name: "New Sequence 1",
       color: "blue",
       folder_id: 11,
     }));
-    expect(push).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
+    expect(navigate).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
   });
 
   it("exceeds limit", () => {
     mockExceeded = true;
-    addNewSequenceToFolder();
+    const navigate = jest.fn();
+    addNewSequenceToFolder(navigate);
     expect(init).not.toHaveBeenCalled();
   });
 });
diff --git a/frontend/folders/__tests__/component_test.tsx b/frontend/folders/__tests__/component_test.tsx
index 33e3816b23..f7b01cf1a7 100644
--- a/frontend/folders/__tests__/component_test.tsx
+++ b/frontend/folders/__tests__/component_test.tsx
@@ -13,11 +13,6 @@ jest.mock("../actions", () => ({
   setFolderColor: jest.fn(),
 }));
 
-let mockPath = "";
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 jest.mock("@blueprintjs/core", () => ({
   Position: jest.fn(),
   PopoverInteractionKind: jest.fn(),
@@ -296,7 +291,7 @@ describe("<FolderListItem />", () => {
   it("renders: active", () => {
     const p = fakeProps();
     p.sequence.body.name = "sequence";
-    mockPath = Path.mock(Path.sequences("sequence"));
+    location.pathname = Path.mock(Path.sequences("sequence"));
     const wrapper = mount(<FolderListItem {...p} />);
     expect(wrapper.find("li").hasClass("active")).toBeTruthy();
   });
@@ -429,7 +424,7 @@ describe("<FolderListItem />", () => {
     const wrapper = mount(<FolderListItem {...p} />);
     wrapper.find(".fa-ellipsis-v").simulate("click");
     wrapper.find(".fa-copy").simulate("click");
-    expect(copySequence).toHaveBeenCalledWith(p.sequence);
+    expect(copySequence).toHaveBeenCalledWith(expect.any(Function), p.sequence);
   });
 });
 
@@ -441,14 +436,14 @@ describe("<FolderButtonCluster />", () => {
 
   it("renders", () => {
     const wrapper = mount(<FolderButtonCluster {...fakeProps()} />);
-    expect(wrapper.find(".cluster-icon").length).toEqual(4);
+    expect(wrapper.find(".fb-icon-button").length).toEqual(4);
   });
 
   it("deletes folder", () => {
     const p = fakeProps();
     p.node.id = 1;
     const wrapper = mount(<FolderButtonCluster {...p} />);
-    wrapper.find(".cluster-icon").at(0).simulate("click");
+    wrapper.find(".fb-icon-button").at(0).simulate("click");
     expect(deleteFolder).toHaveBeenCalledWith(1);
   });
 
@@ -456,7 +451,7 @@ describe("<FolderButtonCluster />", () => {
     const p = fakeProps();
     p.node.id = 1;
     const wrapper = mount(<FolderButtonCluster {...p} />);
-    wrapper.find(".cluster-icon").at(1).simulate("click");
+    wrapper.find(".fb-icon-button").at(1).simulate("click");
     expect(p.close).toHaveBeenCalled();
     expect(toggleFolderEditState).toHaveBeenCalledWith(1);
   });
@@ -465,7 +460,7 @@ describe("<FolderButtonCluster />", () => {
     const p = fakeProps();
     p.node.id = 1;
     const wrapper = mount(<FolderButtonCluster {...p} />);
-    wrapper.find(".cluster-icon").at(2).simulate("click");
+    wrapper.find(".fb-icon-button").at(2).simulate("click");
     expect(p.close).toHaveBeenCalled();
     expect(createFolder).toHaveBeenCalledWith({
       parent_id: p.node.id,
@@ -477,9 +472,9 @@ describe("<FolderButtonCluster />", () => {
     const p = fakeProps();
     p.node.id = 1;
     const wrapper = mount(<FolderButtonCluster {...p} />);
-    wrapper.find(".cluster-icon").at(3).simulate("click");
+    wrapper.find(".fb-icon-button").at(3).simulate("click");
     expect(p.close).toHaveBeenCalled();
-    expect(addNewSequenceToFolder).toHaveBeenCalledWith({
+    expect(addNewSequenceToFolder).toHaveBeenCalledWith(expect.any(Function), {
       id: 1,
       color: "gray",
     });
@@ -620,7 +615,7 @@ describe("<FolderNameEditor />", () => {
     const wrapper = mount(<FolderNameEditor {...p} />);
     wrapper.find(".fa-ellipsis-v").simulate("click");
     expect(wrapper.find(".fa-ellipsis-v").hasClass("open")).toBeTruthy();
-    wrapper.find(".cluster-icon").last().simulate("click");
+    wrapper.find(".fb-icon-button").last().simulate("click");
     expect(wrapper.find(".fa-ellipsis-v").hasClass("open")).toBeFalsy();
   });
 });
diff --git a/frontend/folders/actions.ts b/frontend/folders/actions.ts
index d11e83e29c..bed3c15a82 100644
--- a/frontend/folders/actions.ts
+++ b/frontend/folders/actions.ts
@@ -6,7 +6,6 @@ import { DeepPartial } from "../redux/interfaces";
 import { findFolderById } from "../resources/selectors_by_id";
 import { Actions } from "../constants";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
 import { urlFriendly } from "../util";
 import { setActiveSequenceByName } from "../sequences/set_active_sequence_by_name";
 import { stepGet, STEP_DATATRANSFER_IDENTIFER } from "../draggable/actions";
@@ -15,6 +14,7 @@ import { maybeGetSequence } from "../resources/selectors";
 import { Path } from "../internal_urls";
 import { UnknownAction } from "redux";
 import { sequenceLimitExceeded } from "../sequences/actions";
+import { NavigateFunction } from "react-router";
 
 export const setFolderColor = (id: number, color: Color) => {
   const d = store.dispatch as Function;
@@ -39,7 +39,10 @@ const DEFAULTS = (): Folder => ({
   parent_id: 0,
 });
 
-export const addNewSequenceToFolder = (config: DeepPartial<Folder> = {}) => {
+export const addNewSequenceToFolder = (
+  navigate: NavigateFunction,
+  config: DeepPartial<Folder> = {},
+) => {
   const ri = store.getState().resources.index;
   if (sequenceLimitExceeded(ri)) {
     return;
@@ -58,7 +61,7 @@ export const addNewSequenceToFolder = (config: DeepPartial<Folder> = {}) => {
     body: [],
   };
   store.dispatch(init("Sequence", newSequence) as unknown as UnknownAction);
-  push(Path.sequences(urlFriendly(newSequence.name)));
+  navigate(Path.sequences(urlFriendly(newSequence.name)));
   setActiveSequenceByName();
 };
 
diff --git a/frontend/folders/component.tsx b/frontend/folders/component.tsx
index 0720861a40..07c5127e8d 100644
--- a/frontend/folders/component.tsx
+++ b/frontend/folders/component.tsx
@@ -53,6 +53,7 @@ import { Path } from "../internal_urls";
 import { copySequence } from "../sequences/actions";
 import { TestButton, isMenuOpen } from "../sequences/test_button";
 import { TaggedSequence } from "farmbot";
+import { useNavigate } from "react-router";
 
 export const FolderListItem = (props: FolderItemProps) => {
   const { sequence, movedSequenceUuid, inUse } = props;
@@ -174,20 +175,22 @@ const InfoRow = (props: InfoRowProps) =>
 export const SequenceButtonCluster =
   (props: SequenceButtonClusterProps) => {
     const { dispatch, getWebAppConfigValue, sequence } = props;
+    const navigate = useNavigate();
     return <div className="folder-button-cluster">
       <i
-        className={"fa fa-trash cluster-icon"}
+        className={"fa fa-trash fb-icon-button invert"}
         title={t("delete sequence")}
         onClick={deleteSequence({
+          navigate,
           sequenceUuid: sequence.uuid,
           getWebAppConfigValue,
           dispatch,
         })} />
       <i
-        className={"fa fa-copy cluster-icon"}
+        className={"fa fa-copy fb-icon-button invert"}
         title={t("copy sequence")}
-        onClick={() => dispatch(copySequence(sequence))} />
-      <i className={"fa fa-arrows-v cluster-icon"}
+        onClick={() => dispatch(copySequence(navigate, sequence))} />
+      <i className={"fa fa-arrows-v fb-icon-button invert"}
         title={t("move sequence")}
         onMouseDown={() => props.startSequenceMove(sequence.uuid)}
         onMouseUp={() => props.toggleSequenceMove(sequence.uuid)} />
@@ -214,15 +217,16 @@ const PlusStack = (props: PlusStackProps) =>
 
 export const FolderButtonCluster =
   ({ node, close }: FolderButtonClusterProps) => {
+    const navigate = useNavigate();
     return <div className={"folder-button-cluster"}>
-      <i className={"fa fa-trash cluster-icon"}
+      <i className={"fa fa-trash fb-icon-button invert"}
         title={t("delete folder")}
         onClick={() => { deleteFolder(node.id); }} />
-      <i className={"fa fa-pencil cluster-icon"}
+      <i className={"fa fa-pencil fb-icon-button invert"}
         title={t("edit folder")}
         onClick={() => { close(); toggleFolderEditState(node.id); }} />
       {node.kind !== "terminal" &&
-        <div className={"stack-wrapper cluster-icon"}
+        <div className={"stack-wrapper fb-icon-button invert"}
           title={t("Create subfolder")}
           onClick={() => {
             close();
@@ -230,11 +234,11 @@ export const FolderButtonCluster =
           }}>
           <PlusStack icon={"fa-folder"} />
         </div>}
-      <div className={"stack-wrapper cluster-icon"}
+      <div className={"stack-wrapper fb-icon-button invert"}
         title={t("add new sequence")}
         onClick={() => {
           close();
-          addNewSequenceToFolder({ id: node.id, color: node.color });
+          addNewSequenceToFolder(navigate, { id: node.id, color: node.color });
         }}>
         <PlusStack icon={"fa-server"} />
       </div>
@@ -471,8 +475,9 @@ export class Folders extends React.Component<FolderProps, FolderState> {
   }
 }
 
-export const FolderPanelTop = (props: FolderPanelTopProps) =>
-  <div className="panel-top with-button">
+export const FolderPanelTop = (props: FolderPanelTopProps) => {
+  const navigate = useNavigate();
+  return <div className="panel-top with-button">
     <SearchField nameKey={"sequences"}
       placeholder={t("Search sequences...")}
       searchTerm={props.searchTerm || ""}
@@ -489,7 +494,8 @@ export const FolderPanelTop = (props: FolderPanelTopProps) =>
     <button
       className="fb-button green"
       title={t("add new sequence")}
-      onClick={() => { addNewSequenceToFolder(); }}>
+      onClick={() => { addNewSequenceToFolder(navigate); }}>
       <PlusStack icon={"fa-server"} />
     </button>
   </div>;
+};
diff --git a/frontend/front_page/__tests__/forgot_password_test.tsx b/frontend/front_page/__tests__/forgot_password_test.tsx
index 6d77b7363c..83a21f7813 100644
--- a/frontend/front_page/__tests__/forgot_password_test.tsx
+++ b/frontend/front_page/__tests__/forgot_password_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ForgotPassword } from "../forgot_password";
 import { shallow } from "enzyme";
 
diff --git a/frontend/front_page/__tests__/front_page_test.tsx b/frontend/front_page/__tests__/front_page_test.tsx
index 83ccfee3ab..bcae095eaa 100644
--- a/frontend/front_page/__tests__/front_page_test.tsx
+++ b/frontend/front_page/__tests__/front_page_test.tsx
@@ -26,8 +26,6 @@ jest.mock("../../api", () => ({
   }
 }));
 
-jest.mock("../laptop_splash", () => ({ LaptopSplash: () => <div /> }));
-
 import React from "react";
 import { mount, shallow } from "enzyme";
 import {
diff --git a/frontend/front_page/__tests__/laptop_splash_test.tsx b/frontend/front_page/__tests__/laptop_splash_test.tsx
deleted file mode 100644
index 00547ecd54..0000000000
--- a/frontend/front_page/__tests__/laptop_splash_test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-import { shallow } from "enzyme";
-import { LaptopSplash } from "../laptop_splash";
-
-describe("<LaptopSplash />", () => {
-  it("renders", () => {
-    const wrapper = shallow(<LaptopSplash className={""} />);
-    expect(wrapper.find("video").length).toEqual(1);
-  });
-});
diff --git a/frontend/front_page/create_account.tsx b/frontend/front_page/create_account.tsx
index b2c70c7c62..cf91c45e36 100644
--- a/frontend/front_page/create_account.tsx
+++ b/frontend/front_page/create_account.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  WidgetBody, Col, Widget, WidgetHeader, Row, BlurableInput, BIProps,
+  WidgetBody, Widget, WidgetHeader, BlurableInput, BIProps,
 } from "../ui";
 import { resendEmail } from "./resend_verification";
 import { success, error } from "../toast/toast";
@@ -21,7 +21,7 @@ type KeySetter = (keyName: RegKeyName, val: string) => void;
 type KeyGetter = (keyName: RegKeyName) => string | undefined;
 
 export interface CreateAccountProps {
-  children?: React.ReactChild
+  children?: React.ReactNode
   submitRegistration(e: React.FormEvent<{}>): void;
   sent: boolean;
   get: KeyGetter;
@@ -39,7 +39,7 @@ export interface FormFieldProps {
 }
 
 export const FormField = (props: FormFieldProps) =>
-  <div className={"account-form-field"}>
+  <div>
     <label> {t(props.label)} </label>
     <BlurableInput
       value={props.value}
@@ -87,13 +87,11 @@ export function MustRegister(props: CreateAccountProps) {
     <form onSubmit={props.submitRegistration}>
       {renderFormFields(props.get, props.set)}
       {props.children}
-      <Row>
-        <button
-          title={t("Create Account")}
-          className="fb-button green front-page-button">
-          {t("Create Account")}
-        </button>
-      </Row>
+      <button
+        title={t("Create Account")}
+        className="fb-button green create-account-button">
+        {t("Create Account")}
+      </button>
     </form>
   </WidgetBody>;
 }
@@ -123,10 +121,10 @@ export function DidRegister(props: CreateAccountProps) {
 
 export function CreateAccount(props: CreateAccountProps) {
   const RelevantForm = props.sent ? DidRegister : MustRegister;
-  return <Col xs={12} sm={5}>
+  return <div>
     <Widget>
       <WidgetHeader title={t("Create An Account")} />
       <RelevantForm {...props} />
     </Widget>
-  </Col>;
+  </div>;
 }
diff --git a/frontend/front_page/forgot_password.tsx b/frontend/front_page/forgot_password.tsx
index d06bad1137..e3afbb1662 100644
--- a/frontend/front_page/forgot_password.tsx
+++ b/frontend/front_page/forgot_password.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  Col, Widget, WidgetHeader, WidgetBody, BlurableInput, Row,
+  Widget, WidgetHeader, WidgetBody, BlurableInput,
 } from "../ui";
 import { t } from "../i18next_wrapper";
 
@@ -19,32 +19,30 @@ export function ForgotPassword(props: ForgotPasswordProps) {
     onEmailChange,
   } = props;
 
-  return <Col xs={12} sm={5} smOffset={1} mdOffset={0}>
-    <Widget>
-      <WidgetHeader title={"Reset Password"}>
-        <button
-          className="fb-button gray"
-          title={t("go back")}
-          onClick={onGoBack}>
-          {t("BACK")}
-        </button>
-      </WidgetHeader>
-      <WidgetBody>
-        <form onSubmit={onSubmit}>
+  return <Widget>
+    <WidgetHeader title={"Reset Password"}>
+      <button
+        className="fb-button gray"
+        title={t("go back")}
+        onClick={onGoBack}>
+        {t("BACK")}
+      </button>
+    </WidgetHeader>
+    <WidgetBody>
+      <form onSubmit={onSubmit}>
+        <div>
           <label>{t("Enter Email")}</label>
           <BlurableInput
             type="email"
             value={email}
             onCommit={onEmailChange} />
-          <Row>
-            <button
-              title={t("Reset Password")}
-              className="fb-button green front-page-button">
-              {t("Reset Password")}
-            </button>
-          </Row>
-        </form>
-      </WidgetBody>
-    </Widget>
-  </Col>;
+        </div>
+        <button
+          title={t("Reset Password")}
+          className="fb-button green reset-password-button">
+          {t("Reset Password")}
+        </button>
+      </form>
+    </WidgetBody>
+  </Widget>;
 }
diff --git a/frontend/front_page/front_page.tsx b/frontend/front_page/front_page.tsx
index 15905d13b7..64d6d10745 100644
--- a/frontend/front_page/front_page.tsx
+++ b/frontend/front_page/front_page.tsx
@@ -6,29 +6,19 @@ import { AxiosErrorResponse, prettyPrintApiErrors } from "../util";
 import { API } from "../api";
 import { Session } from "../session";
 import { FrontPageState, SetterCB } from "./interfaces";
-import { Row, Col } from "../ui";
 import { LoginProps, Login } from "./login";
 import { ForgotPassword, ForgotPasswordProps } from "./forgot_password";
 import { ResendVerification } from "./resend_verification";
 import { CreateAccount } from "./create_account";
 import { Content } from "../constants";
-import { LaptopSplash } from "./laptop_splash";
 import { TermsCheckbox } from "./terms_checkbox";
 import { get } from "lodash";
 import { t } from "../i18next_wrapper";
 import { ToastContainer } from "../toast/fb_toast";
-import { FilePath, Path } from "../internal_urls";
+import { Path } from "../internal_urls";
 
 export const DEFAULT_APP_PAGE = Path.app();
 
-const showFor = (size: string[], extraClass?: string): string => {
-  const ALL_SIZES = ["xs", "sm", "md", "lg", "xl"];
-  const HIDDEN_SIZES = ALL_SIZES.filter(x => !size.includes(x));
-  const classNames = HIDDEN_SIZES.map(x => "hidden-" + x);
-  if (extraClass) { classNames.push(extraClass); }
-  return classNames.join(" ");
-};
-
 export interface PartialFormEvent {
   currentTarget: {
     checked: boolean;
@@ -222,50 +212,25 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
 
   defaultContent() {
     return <div className="static-page">
-      <Row>
-        <Col xs={12}>
-          <h1 className="text-center">
-            {t("Welcome to the")}
-            <br className={showFor(["xs"])} />
-            &nbsp;
-            {t("FarmBot Web App")}
-          </h1>
-        </Col>
-      </Row>
-
-      <div className="inner-width">
-        <Row>
-          <h2 className="text-center">
-            <Col xs={12}>
-              {t("Setup, customize, and control FarmBot from your")}
-              &nbsp;
-              <span className={showFor(["md", "lg", "xl"])}>
-                {t("computer")}
-              </span>
-              <span className={showFor(["sm"])}>
-                {t("tablet")}
-              </span>
-              <span className={showFor(["xs"])}>
-                {t("smartphone")}
-              </span>
-            </Col>
-          </h2>
-        </Row>
-        <LaptopSplash className={showFor(["md", "lg", "xl"], "col-md-7")} />
-        <img
-          className={showFor(["sm"], "col-md-7")}
-          src={FilePath.image("farmbot-tablet", "png")} />
-        <Row>
-          <this.activePanel />
-          <CreateAccount
-            submitRegistration={this.submitRegistration}
-            callback={this.update}
-            sent={!!this.state.registrationSent}
-            get={(key) => this.state[key]}
-            set={(key, val) => this.setState({ [key]: val })}>
-            {this.maybeRenderTos()}
-          </CreateAccount>
-        </Row>
+      <div className="front-page-container">
+        <div className="titles text-center">
+          <h1>{t("The FarmBot Web App")}</h1>
+          <h2>{t("Setup, customize, and control your garden from anywhere")}</h2>
+        </div>
+        <this.activePanel />
+        <div className="or-divider">
+          <hr />
+          <span>{t("OR")}</span>
+          <hr />
+        </div>
+        <CreateAccount
+          submitRegistration={this.submitRegistration}
+          callback={this.update}
+          sent={!!this.state.registrationSent}
+          get={(key) => this.state[key]}
+          set={(key, val) => this.setState({ [key]: val })}>
+          {this.maybeRenderTos()}
+        </CreateAccount>
       </div>
       <ToastContainer />
     </div>;
diff --git a/frontend/front_page/laptop_splash.tsx b/frontend/front_page/laptop_splash.tsx
deleted file mode 100644
index dc81416fa4..0000000000
--- a/frontend/front_page/laptop_splash.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-import { ExternalUrl } from "../external_urls";
-
-export const LaptopSplash = ({ className }: { className: string }) =>
-  <div className={className}>
-    <div className="perspective-container">
-      <div className="laptop">
-        <div className="laptop-screen">
-          <video muted autoPlay loop>
-            <source src={ExternalUrl.Video.desktop} type="video/mp4" />
-          </video>
-          <span className="laptop-shine" />
-        </div>
-        <div className="laptop-keyboard">
-          <div className="laptop-keys">
-          </div>
-          <div className="laptop-trackpad">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>;
diff --git a/frontend/front_page/login.tsx b/frontend/front_page/login.tsx
index edb373861f..bc335c26d1 100644
--- a/frontend/front_page/login.tsx
+++ b/frontend/front_page/login.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18next_wrapper";
-import { Col, Widget, WidgetBody, WidgetHeader, Row } from "../ui";
+import { Widget, WidgetBody, WidgetHeader } from "../ui";
 import { updatePageInfo } from "../util";
 
 export interface LoginProps {
@@ -21,11 +21,11 @@ export class Login extends React.Component<LoginProps, {}> {
       onToggleForgotPassword,
     } = this.props;
     updatePageInfo("login");
-    return <Col xs={12} sm={5} smOffset={1} mdOffset={0}>
-      <Widget>
-        <WidgetHeader title={"Login"} />
-        <WidgetBody>
-          <form onSubmit={onSubmit}>
+    return <Widget>
+      <WidgetHeader title={"Login"} />
+      <WidgetBody>
+        <form onSubmit={onSubmit}>
+          <div>
             <label>
               {t("Email")}
             </label>
@@ -35,6 +35,8 @@ export class Login extends React.Component<LoginProps, {}> {
               value={email || ""}
               autoFocus={true}
               onChange={onEmailChange} />
+          </div>
+          <div>
             <label>
               {t("Password")}
             </label>
@@ -42,20 +44,20 @@ export class Login extends React.Component<LoginProps, {}> {
               type={"password"}
               name={"password"}
               onChange={onLoginPasswordChange} />
+          </div>
+          <div className="forgot-password-login-row">
             <a className="forgot-password"
               title={t("Forgot password?")}
               onClick={onToggleForgotPassword}>
               {t("Forgot password?")}
             </a>
-            <Row>
-              <button className="fb-button green pull-right front-page-button"
-                title={t("Login")}>
-                {t("Login")}
-              </button>
-            </Row>
-          </form>
-        </WidgetBody>
-      </Widget>
-    </Col>;
+            <button className="fb-button green pull-right front-page-button"
+              title={t("Login")}>
+              {t("Login")}
+            </button>
+          </div>
+        </form>
+      </WidgetBody>
+    </Widget>;
   }
 }
diff --git a/frontend/front_page/resend_panel_body.tsx b/frontend/front_page/resend_panel_body.tsx
index 7bf6325dd7..96ea557061 100644
--- a/frontend/front_page/resend_panel_body.tsx
+++ b/frontend/front_page/resend_panel_body.tsx
@@ -1,26 +1,22 @@
-import * as React from "react";
-import { WidgetBody, Row } from "../ui/index";
+import React from "react";
+import { WidgetBody } from "../ui";
 import { t } from "../i18next_wrapper";
 
 export function ResendPanelBody(props: { onClick(): void; }) {
   return <WidgetBody>
     <form>
-      <Row>
-        <p>
-          {t("Please check your email for the verification link.")}
-        </p>
-        <p>
-          {t("You may click the button below to resend the email.")}
-        </p>
-      </Row>
-      <Row>
-        <button onClick={props.onClick}
-          type="button"
-          title={t("Resend Verification Email")}
-          className="fb-button green pull-right front-page-button">
-          {t("Resend Verification Email")}
-        </button>
-      </Row>
+      <p>
+        {t("Please check your email for the verification link.")}
+      </p>
+      <p>
+        {t("You may click the button below to resend the email.")}
+      </p>
+      <button onClick={props.onClick}
+        type="button"
+        title={t("Resend Verification Email")}
+        className="fb-button green pull-right front-page-button">
+        {t("Resend Verification Email")}
+      </button>
     </form>
   </WidgetBody>;
 }
diff --git a/frontend/front_page/resend_verification.tsx b/frontend/front_page/resend_verification.tsx
index fc36ce753f..e4050b9d28 100644
--- a/frontend/front_page/resend_verification.tsx
+++ b/frontend/front_page/resend_verification.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { t } from "../i18next_wrapper";
 import axios, { AxiosResponse } from "axios";
-import { Col, Widget, WidgetHeader } from "../ui";
+import { Widget, WidgetHeader } from "../ui";
 import { API } from "../api";
 import { UnsafeError } from "../interfaces";
 import { ResendPanelBody } from "./resend_panel_body";
@@ -18,22 +18,20 @@ interface ResendVerificationProps {
 export class ResendVerification
   extends React.Component<ResendVerificationProps, {}> {
   render() {
-    return <Col xs={12} sm={5} smOffset={1} mdOffset={0}>
-      <Widget>
-        <WidgetHeader title={t("Account Not Verified")}>
-          <button onClick={this.props.onGoBack}
-            type="button"
-            title={t("go back")}
-            className="fb-button gray pull-right front-page-button">
-            {t("back")}
-          </button>
-        </WidgetHeader>
-        <ResendPanelBody onClick={() => {
-          resendEmail(this.props.email)
-            .then(this.props.ok, this.props.no);
-        }} />
-      </Widget>
-    </Col>;
+    return <Widget>
+      <WidgetHeader title={t("Account Not Verified")}>
+        <button onClick={this.props.onGoBack}
+          type="button"
+          title={t("go back")}
+          className="fb-button gray pull-right front-page-button">
+          {t("back")}
+        </button>
+      </WidgetHeader>
+      <ResendPanelBody onClick={() => {
+        resendEmail(this.props.email)
+          .then(this.props.ok, this.props.no);
+      }} />
+    </Widget>;
   }
 }
 
diff --git a/frontend/hacks.d.ts b/frontend/hacks.d.ts
index e59061c814..5bc9e62cf6 100644
--- a/frontend/hacks.d.ts
+++ b/frontend/hacks.d.ts
@@ -27,3 +27,5 @@ declare namespace jest {
     toBeSameTimeAs: jest.Expect;
   }
 }
+
+declare var mockNavigate: jest.Mock;
diff --git a/frontend/help/__tests__/documentation_test.tsx b/frontend/help/__tests__/documentation_test.tsx
index 39cb7d3f0e..e255ce1fff 100644
--- a/frontend/help/__tests__/documentation_test.tsx
+++ b/frontend/help/__tests__/documentation_test.tsx
@@ -3,14 +3,7 @@ import { mount } from "enzyme";
 import {
   DocumentationPanel,
   DocumentationPanelProps,
-  SoftwareDocsPanel,
-  DeveloperDocsPanel,
-  EducationDocsPanel,
-  ExpressDocsPanel,
-  GenesisDocsPanel,
-  MetaDocsPanel,
 } from "../documentation";
-import { ExternalUrl } from "../../external_urls";
 
 describe("<DocumentationPanel />", () => {
   const fakeProps = (): DocumentationPanelProps => ({
@@ -23,57 +16,3 @@ describe("<DocumentationPanel />", () => {
       .toEqual("fake url");
   });
 });
-
-describe("<SoftwareDocsPanel />", () => {
-  it("renders software docs", () => {
-    const wrapper = mount(<SoftwareDocsPanel />);
-    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.softwareDocs);
-  });
-
-  it("navigates to specific doc page", () => {
-    location.search = "?page=farmware";
-    const wrapper = mount(<SoftwareDocsPanel />);
-    expect(wrapper.find("iframe").props().src)
-      .toEqual(ExternalUrl.softwareDocs + "/farmware");
-  });
-});
-
-describe("<DeveloperDocsPanel />", () => {
-  it("renders developer docs", () => {
-    location.search = "";
-    const wrapper = mount(<DeveloperDocsPanel />);
-    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.developerDocs);
-  });
-});
-
-describe("<GenesisDocsPanel />", () => {
-  it("renders genesis docs", () => {
-    location.search = "";
-    const wrapper = mount(<GenesisDocsPanel />);
-    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.genesisDocs);
-  });
-});
-
-describe("<ExpressDocsPanel />", () => {
-  it("renders express docs", () => {
-    location.search = "";
-    const wrapper = mount(<ExpressDocsPanel />);
-    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.expressDocs);
-  });
-});
-
-describe("<MetaDocsPanel />", () => {
-  it("renders meta docs", () => {
-    location.search = "";
-    const wrapper = mount(<MetaDocsPanel />);
-    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.metaDocs);
-  });
-});
-
-describe("<EducationDocsPanel />", () => {
-  it("renders education docs", () => {
-    location.search = "";
-    const wrapper = mount(<EducationDocsPanel />);
-    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.eduDocs);
-  });
-});
diff --git a/frontend/help/__tests__/header_test.tsx b/frontend/help/__tests__/header_test.tsx
index 391eded72e..fdf5e65f79 100644
--- a/frontend/help/__tests__/header_test.tsx
+++ b/frontend/help/__tests__/header_test.tsx
@@ -3,13 +3,6 @@ jest.mock("../../screen_size", () => ({
   isMobile: () => mockIsMobile,
 }));
 
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.designer());
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../hotkeys", () => ({
   toggleHotkeyHelpOverlay: jest.fn(() => jest.fn()),
 }));
@@ -17,8 +10,8 @@ jest.mock("../../hotkeys", () => ({
 import React from "react";
 import { mount } from "enzyme";
 import { HelpHeader } from "../header";
-import { push } from "../../history";
 import { toggleHotkeyHelpOverlay } from "../../hotkeys";
+import { Path } from "../../internal_urls";
 
 describe("<HelpHeader />", () => {
   beforeEach(() => {
@@ -36,7 +29,7 @@ describe("<HelpHeader />", () => {
     ["take a tour", Path.tours()],
     ["get help", Path.support()],
   ])("renders %s panel", (title, path) => {
-    mockPath = Path.mock(path);
+    location.pathname = Path.mock(path);
     const wrapper = mount(<HelpHeader />);
     expect(wrapper.text().toLowerCase()).toContain(title);
   });
@@ -60,14 +53,14 @@ describe("<HelpHeader />", () => {
     const wrapper = mount(<HelpHeader />);
     wrapper.find(".help-panel-header").simulate("click");
     wrapper.find("a").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.support());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.support());
   });
 
   it("opens hotkeys", () => {
     const wrapper = mount(<HelpHeader />);
     wrapper.find(".help-panel-header").simulate("click");
     wrapper.find("a").last().simulate("click");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(toggleHotkeyHelpOverlay).toHaveBeenCalled();
   });
 });
diff --git a/frontend/help/__tests__/support_test.tsx b/frontend/help/__tests__/support_test.tsx
index f5caf280c3..87d96a9a12 100644
--- a/frontend/help/__tests__/support_test.tsx
+++ b/frontend/help/__tests__/support_test.tsx
@@ -18,7 +18,6 @@ import axios from "axios";
 import { success } from "../../toast/toast";
 import { API } from "../../api";
 import { Help } from "../../ui";
-import { push } from "../../history";
 import {
   buildResourceIndex, fakeDevice,
 } from "../../__test_support__/resource_index_builder";
@@ -77,7 +76,7 @@ describe("<Feedback />", () => {
     const wrapper = shallow(<Feedback keep={true} />);
     const link = mount(wrapper.find(Help).props().links?.[0] || <div />);
     link.find("a").simulate("click");
-    expect(push)
+    expect(mockNavigate)
       .toHaveBeenCalledWith(Path.settings("order_number"));
   });
 });
diff --git a/frontend/help/documentation.tsx b/frontend/help/documentation.tsx
index 1e4333776f..c61e763469 100644
--- a/frontend/help/documentation.tsx
+++ b/frontend/help/documentation.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { ExternalUrl } from "../external_urls";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { Panel, DesignerNavTabs } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { getUrlQuery } from "../util";
 import { HelpHeader } from "./header";
 
@@ -14,28 +13,9 @@ export interface DocumentationPanelProps {
 export const DocumentationPanel = (props: DocumentationPanelProps) => {
   const page = getUrlQuery("page");
   return <DesignerPanel panelName={"documentation"} panel={Panel.Help}>
-    <DesignerNavTabs />
     <HelpHeader />
     <DesignerPanelContent panelName={"documentation"}>
       <iframe src={page ? `${props.url}/${page}` : props.url} />
     </DesignerPanelContent>
   </DesignerPanel>;
 };
-
-export const SoftwareDocsPanel = () =>
-  <DocumentationPanel url={ExternalUrl.softwareDocs} />;
-
-export const DeveloperDocsPanel = () =>
-  <DocumentationPanel url={ExternalUrl.developerDocs} />;
-
-export const GenesisDocsPanel = () =>
-  <DocumentationPanel url={ExternalUrl.genesisDocs} />;
-
-export const ExpressDocsPanel = () =>
-  <DocumentationPanel url={ExternalUrl.expressDocs} />;
-
-export const MetaDocsPanel = () =>
-  <DocumentationPanel url={ExternalUrl.metaDocs} />;
-
-export const EducationDocsPanel = () =>
-  <DocumentationPanel url={ExternalUrl.eduDocs} />;
diff --git a/frontend/help/documentation/__tests__/developer_test.tsx b/frontend/help/documentation/__tests__/developer_test.tsx
new file mode 100644
index 0000000000..4db20546e5
--- /dev/null
+++ b/frontend/help/documentation/__tests__/developer_test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { mount } from "enzyme";
+import { DeveloperDocsPanel } from "../developer";
+import { ExternalUrl } from "../../../external_urls";
+
+describe("<DeveloperDocsPanel />", () => {
+  it("renders developer docs", () => {
+    location.search = "";
+    const wrapper = mount(<DeveloperDocsPanel />);
+    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.developerDocs);
+  });
+});
diff --git a/frontend/help/documentation/__tests__/education_test.tsx b/frontend/help/documentation/__tests__/education_test.tsx
new file mode 100644
index 0000000000..0ef38a4130
--- /dev/null
+++ b/frontend/help/documentation/__tests__/education_test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { mount } from "enzyme";
+import { EducationDocsPanel } from "../education";
+import { ExternalUrl } from "../../../external_urls";
+
+describe("<EducationDocsPanel />", () => {
+  it("renders education docs", () => {
+    location.search = "";
+    const wrapper = mount(<EducationDocsPanel />);
+    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.eduDocs);
+  });
+});
diff --git a/frontend/help/documentation/__tests__/express_test.tsx b/frontend/help/documentation/__tests__/express_test.tsx
new file mode 100644
index 0000000000..9b825601d2
--- /dev/null
+++ b/frontend/help/documentation/__tests__/express_test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { mount } from "enzyme";
+import { ExpressDocsPanel } from "../express";
+import { ExternalUrl } from "../../../external_urls";
+
+describe("<ExpressDocsPanel />", () => {
+  it("renders express docs", () => {
+    location.search = "";
+    const wrapper = mount(<ExpressDocsPanel />);
+    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.expressDocs);
+  });
+});
diff --git a/frontend/help/documentation/__tests__/genesis_test.tsx b/frontend/help/documentation/__tests__/genesis_test.tsx
new file mode 100644
index 0000000000..e96978fd3f
--- /dev/null
+++ b/frontend/help/documentation/__tests__/genesis_test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { mount } from "enzyme";
+import { GenesisDocsPanel } from "../genesis";
+import { ExternalUrl } from "../../../external_urls";
+
+describe("<GenesisDocsPanel />", () => {
+  it("renders genesis docs", () => {
+    location.search = "";
+    const wrapper = mount(<GenesisDocsPanel />);
+    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.genesisDocs);
+  });
+});
diff --git a/frontend/help/documentation/__tests__/meta_test.tsx b/frontend/help/documentation/__tests__/meta_test.tsx
new file mode 100644
index 0000000000..d303132504
--- /dev/null
+++ b/frontend/help/documentation/__tests__/meta_test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { mount } from "enzyme";
+import { MetaDocsPanel } from "../meta";
+import { ExternalUrl } from "../../../external_urls";
+
+describe("<MetaDocsPanel />", () => {
+  it("renders meta docs", () => {
+    location.search = "";
+    const wrapper = mount(<MetaDocsPanel />);
+    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.metaDocs);
+  });
+});
diff --git a/frontend/help/documentation/__tests__/software_test.tsx b/frontend/help/documentation/__tests__/software_test.tsx
new file mode 100644
index 0000000000..2f9428a10b
--- /dev/null
+++ b/frontend/help/documentation/__tests__/software_test.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { mount } from "enzyme";
+import { SoftwareDocsPanel } from "../software";
+import { ExternalUrl } from "../../../external_urls";
+
+describe("<SoftwareDocsPanel />", () => {
+  it("renders software docs", () => {
+    const wrapper = mount(<SoftwareDocsPanel />);
+    expect(wrapper.find("iframe").props().src).toEqual(ExternalUrl.softwareDocs);
+  });
+
+  it("navigates to specific doc page", () => {
+    location.search = "?page=farmware";
+    const wrapper = mount(<SoftwareDocsPanel />);
+    expect(wrapper.find("iframe").props().src)
+      .toEqual(ExternalUrl.softwareDocs + "/farmware");
+  });
+});
diff --git a/frontend/help/documentation/developer.tsx b/frontend/help/documentation/developer.tsx
new file mode 100644
index 0000000000..939abbd227
--- /dev/null
+++ b/frontend/help/documentation/developer.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DocumentationPanel } from "../documentation";
+import { ExternalUrl } from "../../external_urls";
+
+export const DeveloperDocsPanel = () =>
+  <DocumentationPanel url={ExternalUrl.developerDocs} />;
+
+// eslint-disable-next-line import/no-default-export
+export default DeveloperDocsPanel;
diff --git a/frontend/help/documentation/education.tsx b/frontend/help/documentation/education.tsx
new file mode 100644
index 0000000000..f359789955
--- /dev/null
+++ b/frontend/help/documentation/education.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DocumentationPanel } from "../documentation";
+import { ExternalUrl } from "../../external_urls";
+
+export const EducationDocsPanel = () =>
+  <DocumentationPanel url={ExternalUrl.eduDocs} />;
+
+// eslint-disable-next-line import/no-default-export
+export default EducationDocsPanel;
diff --git a/frontend/help/documentation/express.tsx b/frontend/help/documentation/express.tsx
new file mode 100644
index 0000000000..75b79c0d29
--- /dev/null
+++ b/frontend/help/documentation/express.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DocumentationPanel } from "../documentation";
+import { ExternalUrl } from "../../external_urls";
+
+export const ExpressDocsPanel = () =>
+  <DocumentationPanel url={ExternalUrl.expressDocs} />;
+
+// eslint-disable-next-line import/no-default-export
+export default ExpressDocsPanel;
diff --git a/frontend/help/documentation/genesis.tsx b/frontend/help/documentation/genesis.tsx
new file mode 100644
index 0000000000..322be68b93
--- /dev/null
+++ b/frontend/help/documentation/genesis.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DocumentationPanel } from "../documentation";
+import { ExternalUrl } from "../../external_urls";
+
+export const GenesisDocsPanel = () =>
+  <DocumentationPanel url={ExternalUrl.genesisDocs} />;
+
+// eslint-disable-next-line import/no-default-export
+export default GenesisDocsPanel;
diff --git a/frontend/help/documentation/meta.tsx b/frontend/help/documentation/meta.tsx
new file mode 100644
index 0000000000..208eaee5c0
--- /dev/null
+++ b/frontend/help/documentation/meta.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DocumentationPanel } from "../documentation";
+import { ExternalUrl } from "../../external_urls";
+
+export const MetaDocsPanel = () =>
+  <DocumentationPanel url={ExternalUrl.metaDocs} />;
+
+// eslint-disable-next-line import/no-default-export
+export default MetaDocsPanel;
diff --git a/frontend/help/documentation/software.tsx b/frontend/help/documentation/software.tsx
new file mode 100644
index 0000000000..e1fb9cf6fc
--- /dev/null
+++ b/frontend/help/documentation/software.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DocumentationPanel } from "../documentation";
+import { ExternalUrl } from "../../external_urls";
+
+export const SoftwareDocsPanel = () =>
+  <DocumentationPanel url={ExternalUrl.softwareDocs} />;
+
+// eslint-disable-next-line import/no-default-export
+export default SoftwareDocsPanel;
diff --git a/frontend/help/header.tsx b/frontend/help/header.tsx
index 8006dcc8c0..f173722d8c 100644
--- a/frontend/help/header.tsx
+++ b/frontend/help/header.tsx
@@ -1,6 +1,6 @@
 import { Collapse } from "@blueprintjs/core";
 import React from "react";
-import { push } from "../history";
+import { NavigateFunction, useNavigate } from "react-router";
 import { toggleHotkeyHelpOverlay } from "../hotkeys";
 import { t } from "../i18next_wrapper";
 import { FilePath, Icon, Path } from "../internal_urls";
@@ -66,24 +66,27 @@ export const HelpHeader = () => {
   const click = () => setOpen(!isOpen);
   const currentSlug = Path.getSlug(Path.designer());
   const currentPage = PAGES()[currentSlug] || PAGES().help;
+  const navigate = useNavigate();
   return <div className={"help-panel-header"} onClick={click}>
-    {PageLink([currentSlug, currentPage])}
+    {PageLink(navigate)([currentSlug, currentPage])}
     <i className={`fa fa-chevron-${isOpen ? "up" : "down"}`} />
     {isOpen &&
       <Collapse isOpen={isOpen}>
         {Object.entries(PAGES())
           .filter(([slug, _page]) => slug != currentSlug)
           .concat(maybeAddHotkeysMenuItem())
-          .map(PageLink)}
+          .map(PageLink(navigate))}
       </Collapse>}
   </div>;
 };
 
-const PageLink = ([slug, page]: [string, Page]) => {
+const PageLink = (navigate: NavigateFunction) => ([slug, page]: [string, Page]) => {
   const iconSrc = page.icon ? FilePath.icon(page.icon) : page.iconPath;
   return <a key={slug}
     title={page.title}
-    onClick={() => page.onClick ? page.onClick() : push(Path.designer(slug))}>
+    onClick={() => {
+      page.onClick ? page.onClick() : navigate(Path.designer(slug));
+    }}>
     {page.fa_icon
       ? <i className={`fa ${page.fa_icon}`} />
       : <img width={25} height={25} src={iconSrc} />}
diff --git a/frontend/help/support.tsx b/frontend/help/support.tsx
index 2242e38917..62265cf75b 100644
--- a/frontend/help/support.tsx
+++ b/frontend/help/support.tsx
@@ -6,21 +6,20 @@ import { ExternalUrl } from "../external_urls";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { Panel, DesignerNavTabs } from "../farm_designer/panel_header";
-import { push } from "../history";
+import { Panel } from "../farm_designer/panel_header";
+import { useNavigate } from "react-router";
 import { t } from "../i18next_wrapper";
 import { Path } from "../internal_urls";
 import { store } from "../redux/store";
 import { maybeGetDevice } from "../resources/selectors";
 import { DevSettings } from "../settings/dev/dev_support";
 import { success } from "../toast/toast";
-import { Col, Help, Row } from "../ui";
+import { Help, Row } from "../ui";
 import { WizardStepSlug } from "../wizard/data";
 import { HelpHeader } from "./header";
 
 export const SupportPanel = () =>
   <DesignerPanel panelName={"support"} panel={Panel.Help}>
-    <DesignerNavTabs />
     <HelpHeader />
     <DesignerPanelContent panelName={"support"}>
       {DevSettings.futureFeaturesEnabled() &&
@@ -34,28 +33,22 @@ export const SupportPanel = () =>
               {t("Learn more")}
             </a>
           </p>
-          <Row>
-            <Col xs={4}>
-              <a className={"button"}
-                href={"mailto:support@farm.bot"}>
-                <b>{t("email")}</b>
-                <i>{t("24 hour response time")}</i>
-              </a>
-            </Col>
-            <Col xs={4}>
-              <a className={"button"}
-                href={""}>
-                <b>{t("live chat")}</b>
-                <i>{t("M-F 9-5 PST")}</i>
-              </a>
-            </Col>
-            <Col xs={4}>
-              <a className={"button"}
-                href={""}>
-                <b>{t("phone")}</b>
-                <i>{t("M-F 9-5 PST")}</i>
-              </a>
-            </Col>
+          <Row className="grid-3-col">
+            <a className={"button"}
+              href={"mailto:support@farm.bot"}>
+              <b>{t("email")}</b>
+              <i>{t("24 hour response time")}</i>
+            </a>
+            <a className={"button"}
+              href={""}>
+              <b>{t("live chat")}</b>
+              <i>{t("M-F 9-5 PST")}</i>
+            </a>
+            <a className={"button"}
+              href={""}>
+              <b>{t("phone")}</b>
+              <i>{t("M-F 9-5 PST")}</i>
+            </a>
           </Row>
         </div>}
       <div className={"standard-support"}>
@@ -67,14 +60,12 @@ export const SupportPanel = () =>
             {t("Learn more")}
           </a>
         </p>
-        <Row>
-          <Col xs={4}>
-            <a className={"button"}
-              href={"mailto:support@farm.bot"}>
-              <b>{t("email")}</b>
-              <i>{t("72 hour response time")}</i>
-            </a>
-          </Col>
+        <Row className="grid-3-col">
+          <a className={"button"}
+            href={"mailto:support@farm.bot"}>
+            <b>{t("email")}</b>
+            <i>{t("72 hour response time")}</i>
+          </a>
         </Row>
       </div>
       <div className={"community-support"}>
@@ -104,6 +95,7 @@ export const Feedback = (props: FeedbackProps) => {
   const [sent, setSent] = React.useState(false);
   const orderNumber =
     maybeGetDevice(store.getState().resources.index)?.body.fb_order_number;
+  const navigate = useNavigate();
   return <div className={"feedback"}>
     <textarea value={message} onChange={e => {
       setSent(false);
@@ -125,9 +117,12 @@ export const Feedback = (props: FeedbackProps) => {
     </button>
     {!orderNumber && <Help text={Content.MUST_REGISTER} links={[
       <a key={0}
-        onClick={() => push(Path.settings("order_number"))}>
+        onClick={() => { navigate(Path.settings("order_number")); }}>
         &nbsp;{t("Register your ORDER NUMBER")}
         <i className={"fa fa-external-link"} />
       </a>]} />}
   </div>;
 };
+
+// eslint-disable-next-line import/no-default-export
+export default SupportPanel;
diff --git a/frontend/help/tours/__tests__/index_test.tsx b/frontend/help/tours/__tests__/index_test.tsx
index 0e4cf0e351..55b3a98de4 100644
--- a/frontend/help/tours/__tests__/index_test.tsx
+++ b/frontend/help/tours/__tests__/index_test.tsx
@@ -5,8 +5,8 @@ import {
 } from "../index";
 import { fakeHelpState } from "../../../__test_support__/fake_designer_state";
 import { Actions } from "../../../constants";
-import { push } from "../../../history";
 import { TourStepContainerProps } from "../interfaces";
+import { mountWithContext } from "../../../__test_support__/mount_with_context";
 
 describe("<TourStepContainer />", () => {
   const fakeProps = (): TourStepContainerProps => ({
@@ -125,8 +125,9 @@ describe("<TourStepContainer />", () => {
     const p = fakeProps();
     p.helpState.currentTour = "gettingStarted";
     p.helpState.currentTourStep = "intro";
-    mount(<TourStepContainer {...p} />);
-    expect(push).toHaveBeenCalledWith("?tour=gettingStarted?tourStep=intro");
+    mountWithContext(<TourStepContainer {...p} />);
+    expect(mockNavigate).toHaveBeenCalledWith(
+      "?tour=gettingStarted?tourStep=intro");
   });
 
   it("dispatches", () => {
diff --git a/frontend/help/tours/__tests__/panel_test.tsx b/frontend/help/tours/__tests__/panel_test.tsx
index 1b0acf9d98..b461c54400 100644
--- a/frontend/help/tours/__tests__/panel_test.tsx
+++ b/frontend/help/tours/__tests__/panel_test.tsx
@@ -5,7 +5,6 @@ import {
 } from "../panel";
 import { clickButton } from "../../../__test_support__/helpers";
 import { fakeState } from "../../../__test_support__/fake_state";
-import { push } from "../../../history";
 
 describe("<ToursPanel />", () => {
   const fakeProps = (): ToursPanelProps => ({
@@ -15,7 +14,8 @@ describe("<ToursPanel />", () => {
   it("renders tours panel", () => {
     const wrapper = mount(<ToursPanel {...fakeProps()} />);
     clickButton(wrapper, 0, "start tour");
-    expect(push).toHaveBeenCalledWith("?tour=gettingStarted?tourStep=intro");
+    expect(mockNavigate).toHaveBeenCalledWith(
+      "?tour=gettingStarted?tourStep=intro");
   });
 });
 
diff --git a/frontend/help/tours/index.tsx b/frontend/help/tours/index.tsx
index 406be424fa..896b674d9e 100644
--- a/frontend/help/tours/index.tsx
+++ b/frontend/help/tours/index.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { t } from "../../i18next_wrapper";
 import { round } from "lodash";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import { getUrlQuery } from "../../util";
 import { HelpState } from "../reducer";
 import { TourStepContainerProps, TourStepContainerState } from "./interfaces";
 import { TOURS } from "./data";
+import { NavigationContext } from "../../routes_helpers";
 
 export const tourPath = (
   stepUrl: string | undefined,
@@ -24,6 +24,10 @@ export class TourStepContainer
     activeBeacons: [],
   };
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   updateTourState = (
     tour: string | undefined,
     tourStep: string | undefined,
@@ -35,11 +39,14 @@ export class TourStepContainer
     if (tour) {
       const currentStep = TOURS(this.props.firmwareHardware)[tour]?.steps
         .filter(step => step.slug == tourStep)[0];
-      push(tourPath(updateUrl ? currentStep.url : undefined, tour, tourStep));
+      this.navigate(tourPath(
+        updateUrl ? currentStep.url : undefined,
+        tour,
+        tourStep));
       currentStep?.dispatchActions
         && currentStep.dispatchActions.map(action => dispatch(action));
     } else {
-      push(location.pathname);
+      this.navigate(location.pathname);
     }
   };
 
@@ -166,13 +173,13 @@ const TourStepNavigation = (props: TourStepNavigationProps) => {
   const prevStepSlug = getAdjacentTourStepSlug(-1);
   const nextStepSlug = getAdjacentTourStepSlug(1);
   return <div className={"toast-loader"}>
-    <i className={`fa fa-backward previous ${prevStepSlug ? "" : "disabled"}`}
+    <i className={`fa fa-backward fb-icon-button previous ${prevStepSlug ? "" : "disabled"}`}
       title={t("back")}
       onClick={() => updateTourState(urlTourSlug, prevStepSlug)} />
-    <i className={`fa fa-forward next ${nextStepSlug ? "" : "disabled"}`}
+    <i className={`fa fa-forward fb-icon-button next ${nextStepSlug ? "" : "disabled"}`}
       title={t("advance")}
       onClick={() => updateTourState(urlTourSlug, nextStepSlug)} />
-    <i className={"fa fa-times exit"}
+    <i className={"fa fa-times fb-icon-button exit"}
       title={t("quit")}
       onClick={() => updateTourState(undefined, undefined)} />
   </div>;
diff --git a/frontend/help/tours/interfaces.ts b/frontend/help/tours/interfaces.ts
index fc96978996..91e6ca143a 100644
--- a/frontend/help/tours/interfaces.ts
+++ b/frontend/help/tours/interfaces.ts
@@ -34,7 +34,7 @@ export interface TourStep {
   beacons: string[] | undefined;
   activeBeacons?: ActiveBeacons[];
   url: string | undefined;
-  extraContent?: JSX.Element;
+  extraContent?: React.ReactNode;
   dispatchActions?: AnyAction[];
 }
 
diff --git a/frontend/help/tours/list.tsx b/frontend/help/tours/list.tsx
index c3925cc3f6..a27e8daeae 100644
--- a/frontend/help/tours/list.tsx
+++ b/frontend/help/tours/list.tsx
@@ -1,19 +1,20 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
 import { tourPath } from ".";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { TOURS } from "./data";
 import { Actions } from "../../constants";
 import { TourListProps } from "./interfaces";
 
-export const TourList = (props: TourListProps) =>
-  <div className="tour-list">
+export const TourList = (props: TourListProps) => {
+  const navigate = useNavigate();
+  return <div className="tour-list grid half-gap">
     {Object.entries(TOURS()).map(([tourSlug, tour]) => {
       const firstStep = tour.steps[0];
       const click = () => {
         props.dispatch({ type: Actions.SET_TOUR, payload: tourSlug });
         props.dispatch({ type: Actions.SET_TOUR_STEP, payload: firstStep.slug });
-        push(tourPath(firstStep.url, tourSlug, firstStep.slug));
+        navigate(tourPath(firstStep.url, tourSlug, firstStep.slug));
       };
       return <div key={tour.title}>
         <label>{tour.title}</label>
@@ -25,3 +26,4 @@ export const TourList = (props: TourListProps) =>
       </div>;
     })}
   </div>;
+};
diff --git a/frontend/help/tours/panel.tsx b/frontend/help/tours/panel.tsx
index 7ffdaedabb..7f94b98902 100644
--- a/frontend/help/tours/panel.tsx
+++ b/frontend/help/tours/panel.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../../farm_designer/designer_panel";
-import { Panel, DesignerNavTabs } from "../../farm_designer/panel_header";
+import { Panel } from "../../farm_designer/panel_header";
 import { TourList } from "./list";
 import { Everything } from "../../interfaces";
 import { HelpHeader } from "../header";
@@ -19,7 +19,6 @@ export const mapStateToProps = (props: Everything): ToursPanelProps => ({
 export class RawToursPanel extends React.Component<ToursPanelProps, {}> {
   render() {
     return <DesignerPanel panelName={"tours"} panel={Panel.Help}>
-      <DesignerNavTabs />
       <HelpHeader />
       <DesignerPanelContent panelName={"tours"}>
         <TourList dispatch={this.props.dispatch} />
@@ -29,3 +28,5 @@ export class RawToursPanel extends React.Component<ToursPanelProps, {}> {
 }
 
 export const ToursPanel = connect(mapStateToProps)(RawToursPanel);
+// eslint-disable-next-line import/no-default-export
+export default ToursPanel;
diff --git a/frontend/history.ts b/frontend/history.ts
deleted file mode 100644
index 34c8569554..0000000000
--- a/frontend/history.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { navigate } from "takeme";
-
-/** Remove `/app` from URL. */
-const maybeStripAppFromUrl =
-  (url: string) => url.startsWith("/app") ? url.replace("/app", "") : url;
-
-/** Navigate to a URL and add it to browser history. */
-export const push = (url: string) => navigate(maybeStripAppFromUrl(url));
-
-/** Get the current app location path as an array. */
-export function getPathArray() {
-  return location.pathname.split("/");
-}
diff --git a/frontend/hotkeys.tsx b/frontend/hotkeys.tsx
index c847ab6ecb..25b4abdff9 100644
--- a/frontend/hotkeys.tsx
+++ b/frontend/hotkeys.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { getLinks } from "./nav/nav_links";
 import { sync } from "./devices/actions";
-import { push } from "./history";
 import { HotkeyConfig, useHotkeys, HotkeysDialog2 } from "@blueprintjs/core";
 import { unselectPlant } from "./farm_designer/map/actions";
 import { getPanelPath, PANEL_BY_SLUG } from "./farm_designer/panel_header";
@@ -10,6 +9,7 @@ import { store } from "./redux/store";
 import { save } from "./api/crud";
 import { Path } from "./internal_urls";
 import { Actions } from "./constants";
+import { NavigateFunction, useNavigate } from "react-router";
 
 type HotkeyConfigs = Record<HotKey, HotkeyConfig>;
 
@@ -64,7 +64,11 @@ const HOTKEY_BASE_MAP = (): HotkeyConfigs => ({
   },
 });
 
-export const hotkeysWithActions = (dispatch: Function, slug: string) => {
+export const hotkeysWithActions = (
+  navigate: NavigateFunction,
+  dispatch: Function,
+  slug: string,
+) => {
   const links = getLinks();
   const idx = links.indexOf(PANEL_BY_SLUG[slug]);
   const panelPlus = links[idx + 1] || links[0];
@@ -88,25 +92,25 @@ export const hotkeysWithActions = (dispatch: Function, slug: string) => {
     },
     [HotKey.navigateRight]: {
       ...hotkeysBase[HotKey.navigateRight],
-      onKeyDown: () => push(getPanelPath(panelPlus)),
+      onKeyDown: () => { navigate(getPanelPath(panelPlus)); },
     },
     [HotKey.navigateLeft]: {
       ...hotkeysBase[HotKey.navigateLeft],
-      onKeyDown: () => push(getPanelPath(panelMinus)),
+      onKeyDown: () => { navigate(getPanelPath(panelMinus)); },
     },
     [HotKey.addPlant]: {
       ...hotkeysBase[HotKey.addPlant],
-      onKeyDown: () => push(Path.cropSearch()),
+      onKeyDown: () => { navigate(Path.cropSearch()); },
     },
     [HotKey.addEvent]: {
       ...hotkeysBase[HotKey.addEvent],
-      onKeyDown: () => push(Path.farmEvents("add")),
+      onKeyDown: () => { navigate(Path.farmEvents("add")); },
     },
     [HotKey.backToPlantOverview]: {
       ...hotkeysBase[HotKey.backToPlantOverview],
       onKeyDown: () => {
         if (slug != "photos") {
-          push(Path.plants());
+          navigate(Path.plants());
           dispatch(unselectPlant(dispatch));
         }
       },
@@ -120,10 +124,12 @@ export const toggleHotkeyHelpOverlay = (dispatch: Function) => () =>
   dispatch({ type: Actions.TOGGLE_HOTKEY_GUIDE, payload: undefined });
 
 export const HotKeys = (props: HotKeysProps) => {
+  const navigate = useNavigate();
   const slug = Path.getSlug(Path.designer()) || "plants";
-  const hotkeys = React.useMemo(() =>
-    Object.values(hotkeysWithActions(props.dispatch, slug))
-      .map(hotkey => ({ ...hotkey, global: true })), [props.dispatch, slug]);
+  const hotkeys = React.useMemo(
+    () => Object.values(hotkeysWithActions(navigate, props.dispatch, slug))
+      .map(hotkey => ({ ...hotkey, global: true })),
+    [navigate, props.dispatch, slug]);
   const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys,
     { showDialogKeyCombo: undefined });
   return <div className={"hotkeys"}
diff --git a/frontend/interfaces.ts b/frontend/interfaces.ts
index 7334eb8485..c06be7e23f 100644
--- a/frontend/interfaces.ts
+++ b/frontend/interfaces.ts
@@ -48,6 +48,7 @@ export interface SettingsPanelState {
   parameter_management: boolean;
   custom_settings: boolean;
   farm_designer: boolean;
+  three_d: boolean;
   account: boolean;
   other_settings: boolean;
 }
diff --git a/frontend/internal_urls.ts b/frontend/internal_urls.ts
index 1ffe94bb3a..4f8aaace93 100644
--- a/frontend/internal_urls.ts
+++ b/frontend/internal_urls.ts
@@ -1,11 +1,11 @@
 import { isUndefined, last } from "lodash";
-import { getPathArray } from "./history";
 import { t } from "./i18next_wrapper";
 
 export namespace Path {
   const appended = (path: string | number | undefined) => path ? "/" + path : "";
   const highlight = (path: string | undefined) => path ? "?highlight=" + path : "";
   const page = (path: string | undefined) => path ? "?page=" + path : "";
+  export const getPathArray = () => window.location.pathname.split("/");
 
   export const startsWith = (path: string) =>
     getPathArray().join("/").startsWith(withApp(path));
@@ -15,7 +15,6 @@ export namespace Path {
   export const lastChunkEquals = (chunk: string) => chunk == getLastChunk();
   export const lastChunkIsNum = (): boolean => !isNaN(parseInt(getLastChunk()));
 
-  export const route = (path: string) => path.replace("/app", "");
   export const withApp = (path: string) =>
     path.startsWith("/app") ? path : "/app" + path;
   export const mock = withApp;
diff --git a/frontend/link.tsx b/frontend/link.tsx
index b474f38591..5d8866e8f8 100644
--- a/frontend/link.tsx
+++ b/frontend/link.tsx
@@ -1,28 +1,26 @@
 import React from "react";
-import { push } from "./history";
+import { useNavigate } from "react-router";
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
-  children?: React.ReactChild | React.ReactChild[];
+  children?: React.ReactNode | React.ReactNode[];
   style?: React.CSSProperties;
   className?: string;
   disabled?: boolean;
   draggable?: boolean;
 }
 
-export const clickHandler =
-  (props: LinkProps) => (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    const { onClick, to } = props;
-    push(to);
-    onClick?.(e);
-  };
-
-export class Link extends React.Component<LinkProps, {}> {
-  render() {
-    const { props } = this;
-    return props.disabled
-      ? <a {...props} />
-      : <a {...props} href={props.to} onClick={clickHandler(props)} />;
-  }
-}
+export const Link = (props: LinkProps) => {
+  const navigate = useNavigate();
+  return props.disabled
+    ? <a {...props} />
+    : <a {...props}
+      href={props.to}
+      onClick={
+        (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          const { onClick, to } = props;
+          navigate(to);
+          onClick?.(e);
+        }} />;
+};
diff --git a/frontend/loading_plant.tsx b/frontend/loading_plant.tsx
index 57166a083a..8af2fd3e5e 100644
--- a/frontend/loading_plant.tsx
+++ b/frontend/loading_plant.tsx
@@ -76,8 +76,7 @@ export function LoadingPlant({ animate }: { animate: boolean }) {
         y={animate ? 435 : 150}
         x={150}
         fontSize={35}
-        textAnchor="middle"
-        fill={Color.darkGray}>
+        textAnchor="middle">
         {t("Loading...")}
       </text>
     </svg>
diff --git a/frontend/logs/components/filter_menu.tsx b/frontend/logs/components/filter_menu.tsx
index 4a6475abca..fea7ca92fa 100644
--- a/frontend/logs/components/filter_menu.tsx
+++ b/frontend/logs/components/filter_menu.tsx
@@ -43,16 +43,16 @@ export const LogsFilterMenu = (props: LogsFilterMenuProps) => {
   const values = filterStateKeys(props.state)
     .map((key: keyof LogsState) => props.state[key]);
   const [value, setValue] = React.useState(round(mean(values)));
-  return <div className={"logs-filter-menu"}>
+  return <div className={"logs-filter-menu grid"}>
     <div className={"lines"}>
       {range(0, 4).map(i =>
         <div key={i} className={"line"}
-          style={{ left: `${10.5 + i * 5}rem` }}>
+          style={{ left: `${12.5 + i * 5}rem` }}>
           <div className={"line-label"}>{i}</div>
         </div>)}
     </div>
-    <fieldset>
-      <label>
+    <fieldset className="row log-filters-grid">
+      <label className="row grid-exp-2 half-gap">
         <div className={"saucer"} style={{
           background: "white",
           border: "2px black solid",
@@ -66,8 +66,8 @@ export const LogsFilterMenu = (props: LogsFilterMenuProps) => {
     </fieldset>
     {filterStateKeys(props.state).sort(menuSort)
       .map((logType: keyof Filters) =>
-        <fieldset key={logType}>
-          <label>
+        <fieldset key={logType} className="row log-filters-grid">
+          <label className="row grid-exp-2 half-gap">
             <div className={`saucer ${logType}`} />
             {t(startCase(logType))}
           </label>
@@ -76,7 +76,7 @@ export const LogsFilterMenu = (props: LogsFilterMenuProps) => {
             onChange={props.setFilterLevel(logType)}
             value={props.state[logType]} />
         </fieldset>)}
-    <fieldset>
+    <fieldset className="row grid-exp-1">
       <label>
         {t("Current version only")}
       </label>
diff --git a/frontend/logs/components/logs_table.tsx b/frontend/logs/components/logs_table.tsx
index 70b6bb481a..0079b91917 100644
--- a/frontend/logs/components/logs_table.tsx
+++ b/frontend/logs/components/logs_table.tsx
@@ -49,7 +49,7 @@ interface LogVerbositySaucerProps {
 
 const LogVerbositySaucer = (props: LogVerbositySaucerProps) =>
   <div className="log-verbosity-saucer">
-    <div className={`saucer ${props.type}`}>
+    <div className={`row saucer ${props.type}`}>
       <p style={{
         color: ["busy", "info"].includes(props.type) ? "black" : "white"
       }}>
@@ -69,7 +69,7 @@ const LogsRow = (props: LogsRowProps) => {
   const time = formatTime(at, timeSettings, dateFormat);
   return <tr key={uuid} id={"" + id}>
     <td>
-      <i className={"fa fa-trash fb-icon-button"} title={t("delete log")}
+      <i className={"fa fa-trash fb-icon-button invert"} title={t("delete log")}
         onClick={() => dispatch(destroy(uuid))} />
       <LogVerbositySaucer
         uuid={uuid} dispatch={dispatch} verbosity={verbosity} type={type} />
diff --git a/frontend/logs/index.tsx b/frontend/logs/index.tsx
index dc1e1575c4..fcf3d27b4d 100644
--- a/frontend/logs/index.tsx
+++ b/frontend/logs/index.tsx
@@ -16,22 +16,22 @@ import { SearchField } from "../ui/search_field";
 import { forceOnline } from "../devices/must_be_online";
 import { demoAccountLog } from "../nav/ticker_list";
 import { Actions } from "../constants";
-import { push } from "../history";
+import { Navigate } from "react-router";
 import { Path } from "../internal_urls";
 import { mapStateToProps } from "./state_to_props";
 
-export class RawLogs extends React.Component<LogsPanelProps> {
-  render() {
-    this.props.dispatch({ type: Actions.OPEN_POPUP, payload: "jobs" });
-    this.props.dispatch({ type: Actions.SET_JOBS_PANEL_OPTION, payload: "logs" });
-    push(Path.plants());
-    return <Page className="logs-page">
-      <p>Logs have moved to the navigation bar.</p>
-    </Page>;
-  }
-}
+export const RawLogs = (props: LogsPanelProps) => {
+  props.dispatch({ type: Actions.OPEN_POPUP, payload: "jobs" });
+  props.dispatch({ type: Actions.SET_JOBS_PANEL_OPTION, payload: "logs" });
+  return <Page className="logs-page">
+    <Navigate to={Path.plants()} />
+    <p>Logs have moved to the navigation bar.</p>
+  </Page>;
+};
 
 export const Logs = connect(mapStateToProps)(RawLogs);
+// eslint-disable-next-line import/no-default-export
+export default Logs;
 
 export class LogsPanel extends React.Component<LogsProps, Partial<LogsState>> {
 
@@ -98,15 +98,15 @@ export class LogsPanel extends React.Component<LogsProps, Partial<LogsState>> {
 
   render() {
     const { dispatch, bot } = this.props;
-    return <div className={"logs-tab"}>
-      <div className={"search-row"}>
+    return <div className={"logs-tab grid"}>
+      <div className={"search-row row grid-exp-1"}>
         <SearchField nameKey={"logs"}
           placeholder={t("Search logs...")}
           searchTerm={this.state.searchTerm}
           onChange={searchTerm => this.setState({ searchTerm })} />
         <div className={"logs-settings-menu-button"}>
           <Popover position={Position.TOP_RIGHT}
-            target={<i className={"fa fa-gear fb-icon-button"} />}
+            target={<i className={"fa fa-gear fb-icon-button invert"} />}
             content={<LogsSettingsMenu
               markdown={this.state.markdown}
               toggleMarkdown={this.toggleMarkdown}
diff --git a/frontend/messages/__tests__/alerts_test.tsx b/frontend/messages/__tests__/alerts_test.tsx
index 43cbad9ee8..8a18e78392 100644
--- a/frontend/messages/__tests__/alerts_test.tsx
+++ b/frontend/messages/__tests__/alerts_test.tsx
@@ -44,8 +44,10 @@ describe("<Alerts />", () => {
 
   it("renders no alerts", () => {
     const wrapper = mount(<Alerts {...fakeProps()} />);
-    expect(wrapper.html())
-      .toContain("<div class=\"problem-alerts-content\"></div>");
+    expect(wrapper.html()).toContain(
+      "<div class=\"problem-alerts\">"
+      + "<div class=\"problem-alerts-content grid double-gap\"></div>"
+      + "</div>");
   });
 
   it("renders alerts", () => {
diff --git a/frontend/messages/__tests__/cards_test.tsx b/frontend/messages/__tests__/cards_test.tsx
index fd926b0597..6489b93e02 100644
--- a/frontend/messages/__tests__/cards_test.tsx
+++ b/frontend/messages/__tests__/cards_test.tsx
@@ -42,7 +42,6 @@ import { FBSelect } from "../../ui";
 import { destroy } from "../../api/crud";
 import { updateConfig } from "../../devices/actions";
 import { Session } from "../../session";
-import { push } from "../../history";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 import { fakeWizardStepResult } from "../../__test_support__/fake_state/resources";
 import { Path } from "../../internal_urls";
@@ -143,7 +142,7 @@ describe("<AlertCard />", () => {
     const wrapper = mount(<AlertCard {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("wizard");
     wrapper.find("a").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.setup());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.setup());
     expect(wrapper.text().toLowerCase()).toContain("get started");
   });
 
@@ -163,7 +162,7 @@ describe("<AlertCard />", () => {
     const wrapper = mount(<AlertCard {...p} />);
     expect(wrapper.text()).toContain("tour");
     wrapper.find(".link-button").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.tours());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tours());
   });
 
   it("renders welcome card", () => {
diff --git a/frontend/messages/__tests__/messages_page_test.tsx b/frontend/messages/__tests__/messages_page_test.tsx
deleted file mode 100644
index ac72cc2242..0000000000
--- a/frontend/messages/__tests__/messages_page_test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { Messages } from "../messages_page";
-import { push } from "../../history";
-import { Path } from "../../internal_urls";
-
-describe("<Messages />", () => {
-  it("redirects", () => {
-    const wrapper = mount(<Messages />);
-    expect(wrapper.text().toLowerCase()).toContain("redirecting");
-    expect(push).toHaveBeenCalledWith(Path.messages());
-  });
-});
diff --git a/frontend/messages/alerts.tsx b/frontend/messages/alerts.tsx
index 9a4737b688..245196c117 100644
--- a/frontend/messages/alerts.tsx
+++ b/frontend/messages/alerts.tsx
@@ -35,7 +35,7 @@ export const FirmwareAlerts = (props: FirmwareAlertsProps) =>
 
 export const Alerts = (props: AlertsProps) =>
   <div className="problem-alerts">
-    <div className="problem-alerts-content">
+    <div className="problem-alerts-content grid double-gap">
       {sortAlerts(props.alerts)
         .filter(filterIncompleteAlerts)
         .filter(filterAlerts)
diff --git a/frontend/messages/cards.tsx b/frontend/messages/cards.tsx
index 90e2e40194..2cf913befc 100644
--- a/frontend/messages/cards.tsx
+++ b/frontend/messages/cards.tsx
@@ -13,7 +13,7 @@ import { formatTime } from "../util";
 import {
   FlashFirmwareBtn,
 } from "../settings/firmware/firmware_hardware_status";
-import { DropDownItem, Row, Col, FBSelect, docLink, Markdown } from "../ui";
+import { DropDownItem, Row, FBSelect, docLink, Markdown } from "../ui";
 import { Content } from "../constants";
 import { splitProblemTag } from "./alerts";
 import { destroy } from "../api/crud";
@@ -28,7 +28,7 @@ import { ExternalUrl } from "../external_urls";
 import { setupProgressString } from "../wizard/data";
 import { store } from "../redux/store";
 import { selectAllWizardStepResults } from "../resources/selectors_by_kind";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import moment from "moment";
 import { Path } from "../internal_urls";
 import { logout } from "../logout";
@@ -75,16 +75,17 @@ const AlertCardTemplate = (props: AlertCardTemplateProps) => {
   const timeFormat = thisYear ? "MMM D" : "MMM D, YYYY";
   return <div className={
     `problem-alert ${props.className} priority-${props.alert.priority}`}>
-    <div className="problem-alert-title">
+    <div className="problem-alert-title row grid-exp-2">
       <i className={`fa ${props.iconName || "fa-exclamation-triangle"}`} />
       <h3>{t(props.title)}</h3>
       {timeOk(alert.created_at) &&
         <p>
           {formatTime(moment.unix(alert.created_at), timeSettings, timeFormat)}
         </p>}
+      {alert.id && !props.noDismiss &&
+        <i className={"fa fa-times fb-icon-button invert"}
+          onClick={dismissAlert({ id: alert.id, findApiAlertById, dispatch })} />}
     </div>
-    {alert.id && !props.noDismiss && <i className={"fa fa-times fb-icon-button"}
-      onClick={dismissAlert({ id: alert.id, findApiAlertById, dispatch })} />}
     <div className="problem-alert-content">
       <Markdown html={true}>{t(props.message)}</Markdown>
       {props.children}
@@ -232,10 +233,8 @@ const FirmwareMissing = (props: FirmwareMissingProps) =>
     findApiAlertById={props.findApiAlertById}>
     <Row>
       <FirmwareChoiceTable />
-      <Col xs={4}>
+      <div className="row grid-3-col">
         <label>{t("Choose Firmware")}</label>
-      </Col>
-      <Col xs={5}>
         <FBSelect
           key={props.apiFirmwareValue}
           list={getFirmwareChoices()}
@@ -244,12 +243,10 @@ const FirmwareMissing = (props: FirmwareMissingProps) =>
             ? FIRMWARE_CHOICES_DDI[props.apiFirmwareValue]
             : undefined}
           onChange={changeFirmwareHardware(props.dispatch)} />
-      </Col>
-      <Col xs={3} hidden={true}>
         <FlashFirmwareBtn
           apiFirmwareValue={props.apiFirmwareValue}
           botOnline={true} />
-      </Col>
+      </div>
     </Row>
   </AlertCardTemplate>;
 
@@ -303,17 +300,13 @@ class SeedDataMissing
       noDismiss={true}
       findApiAlertById={this.props.findApiAlertById}
       iconName={"fa-check-square"}>
-      <Row>
-        <Col xs={4}>
-          <label>{t("Choose your FarmBot")}</label>
-        </Col>
-        <Col xs={5}>
-          <FBSelect
-            key={this.state.selection}
-            list={SEED_DATA_OPTIONS()}
-            selectedItem={SEED_DATA_OPTIONS_DDI()[this.state.selection]}
-            onChange={seedAccount(this.dismiss)} />
-        </Col>
+      <Row className="grid-2-col">
+        <label>{t("Choose your FarmBot")}</label>
+        <FBSelect
+          key={this.state.selection}
+          list={SEED_DATA_OPTIONS()}
+          selectedItem={SEED_DATA_OPTIONS_DDI()[this.state.selection]}
+          onChange={seedAccount(this.dismiss)} />
       </Row>
     </AlertCardTemplate>;
   }
@@ -321,27 +314,24 @@ class SeedDataMissing
 
 export const ReSeedAccount = () => {
   const [selection, setSelection] = React.useState("");
-  return <Row className={"re-seed"}>
-    <Col xs={7}>
-      <FBSelect
-        key={selection}
-        list={SEED_DATA_OPTIONS().filter(x => x.value != "none")}
-        customNullLabel={t("Select a model")}
-        selectedItem={SEED_DATA_OPTIONS_DDI()[selection]}
-        onChange={ddi => setSelection("" + ddi.value)} />
-    </Col>
-    <Col xs={5}>
-      <button className={"fb-button green"}
-        onClick={() => selection && confirm(t(Content.RE_SEED_ACCOUNT)) &&
-          seedAccount()({ label: "", value: selection })}>
-        {t("re-seed account")}
-      </button>
-    </Col>
+  return <Row className={"re-seed grid-2-col"}>
+    <FBSelect
+      key={selection}
+      list={SEED_DATA_OPTIONS().filter(x => x.value != "none")}
+      customNullLabel={t("Select a model")}
+      selectedItem={SEED_DATA_OPTIONS_DDI()[selection]}
+      onChange={ddi => setSelection("" + ddi.value)} />
+    <button className={"fb-button green"}
+      onClick={() => selection && confirm(t(Content.RE_SEED_ACCOUNT)) &&
+        seedAccount()({ label: "", value: selection })}>
+      {t("re-seed account")}
+    </button>
   </Row>;
 };
 
-const TourNotTaken = (props: TourNotTakenProps) =>
-  <AlertCardTemplate
+const TourNotTaken = (props: TourNotTakenProps) => {
+  const navigate = useNavigate();
+  return <AlertCardTemplate
     alert={props.alert}
     className={"tour-not-taken-alert"}
     title={t("Take a guided tour")}
@@ -351,11 +341,12 @@ const TourNotTaken = (props: TourNotTakenProps) =>
     findApiAlertById={props.findApiAlertById}
     iconName={"fa-info-circle"}>
     <a className="link-button fb-button green"
-      onClick={() => push(Path.tours())}
+      onClick={() => { navigate(Path.tours()); }}
       title={t("View available tours")}>
       {t("View available tours")}
     </a>
   </AlertCardTemplate>;
+};
 
 const UserNotWelcomed = (props: CommonAlertCardProps) =>
   <AlertCardTemplate
@@ -443,6 +434,7 @@ const SetupIncomplete = (props: SetupIncompleteProps) => {
   const buttonText = percentComplete != "0% complete"
     ? t("Continue setup")
     : t("Get Started");
+  const navigate = useNavigate();
   return <AlertCardTemplate
     alert={props.alert}
     className={"setup-alert"}
@@ -454,7 +446,7 @@ const SetupIncomplete = (props: SetupIncompleteProps) => {
     findApiAlertById={props.findApiAlertById}
     iconName={"fa-info-circle"}>
     <a className="link-button fb-button green"
-      onClick={() => push(Path.setup())}
+      onClick={() => { navigate(Path.setup()); }}
       title={buttonText}>
       {buttonText}
     </a>
diff --git a/frontend/messages/messages.tsx b/frontend/messages/messages.tsx
index 1929dde8ed..d431d2023c 100644
--- a/frontend/messages/messages.tsx
+++ b/frontend/messages/messages.tsx
@@ -6,7 +6,7 @@ import { MessagesProps } from "../messages/interfaces";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { Panel, DesignerNavTabs } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { t } from "../i18next_wrapper";
 import { Link } from "../link";
 import { Path } from "../internal_urls";
@@ -16,7 +16,6 @@ export class RawMessagesPanel
 
   render() {
     return <DesignerPanel panelName={"messages"} panel={Panel.Messages}>
-      <DesignerNavTabs />
       <DesignerPanelContent panelName={"messages"}>
         <Alerts alerts={this.props.alerts}
           dispatch={this.props.dispatch}
@@ -35,3 +34,5 @@ export class RawMessagesPanel
 }
 
 export const MessagesPanel = connect(mapStateToProps)(RawMessagesPanel);
+// eslint-disable-next-line import/no-default-export
+export default MessagesPanel;
diff --git a/frontend/messages/messages_page.tsx b/frontend/messages/messages_page.tsx
deleted file mode 100644
index 0a98eee6b8..0000000000
--- a/frontend/messages/messages_page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { Page } from "../ui";
-import { t } from "../i18next_wrapper";
-import { push } from "../history";
-import { Path } from "../internal_urls";
-
-/** Messages page redirect. */
-export class Messages extends React.Component {
-  render() {
-    push(Path.messages());
-    return <Page className="messages-page">
-      <p>{t("This page has moved. Redirecting...")}</p>
-    </Page>;
-  }
-}
diff --git a/frontend/nav/__tests__/additional_menu_test.tsx b/frontend/nav/__tests__/additional_menu_test.tsx
index 9231cc0674..ebbc99d659 100644
--- a/frontend/nav/__tests__/additional_menu_test.tsx
+++ b/frontend/nav/__tests__/additional_menu_test.tsx
@@ -1,12 +1,21 @@
+jest.mock("../../config_storage/actions", () => ({
+  setWebAppConfigValue: jest.fn()
+}));
+
 import React from "react";
 import { mount, shallow } from "enzyme";
 import { AdditionalMenu } from "../additional_menu";
 import { AccountMenuProps } from "../interfaces";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { setWebAppConfigValue } from "../../config_storage/actions";
+import { BooleanSetting } from "../../session_keys";
 
 describe("AdditionalMenu", () => {
   const fakeProps = (): AccountMenuProps => ({
     isStaff: false,
     close: jest.fn(),
+    dispatch: jest.fn(),
+    darkMode: false,
   });
 
   it("renders the account menu", () => {
@@ -40,4 +49,12 @@ describe("AdditionalMenu", () => {
     const wrapper = shallow(<AdditionalMenu {...fakeProps()} />);
     wrapper.find("Link").at(2).simulate("click");
   });
+
+  it("toggles dark mode", () => {
+    render(<AdditionalMenu {...fakeProps()} />);
+    const toggle = screen.getByText("off");
+    fireEvent.click(toggle);
+    expect(setWebAppConfigValue).toHaveBeenCalledWith(
+      BooleanSetting.dark_mode, true);
+  });
 });
diff --git a/frontend/nav/__tests__/index_test.tsx b/frontend/nav/__tests__/index_test.tsx
index 0e3fd7a5fc..3d4c6eadd0 100644
--- a/frontend/nav/__tests__/index_test.tsx
+++ b/frontend/nav/__tests__/index_test.tsx
@@ -27,8 +27,8 @@ import { fakeTimeSettings } from "../../__test_support__/fake_time_settings";
 import { fakePings } from "../../__test_support__/fake_state/pings";
 import { Link } from "../../link";
 import { refresh } from "../../api/crud";
-import { push } from "../../history";
 import {
+  fakeDesignerState,
   fakeHelpState, fakeMenuOpenState,
 } from "../../__test_support__/fake_designer_state";
 import { Path } from "../../internal_urls";
@@ -67,6 +67,7 @@ describe("<NavBar />", () => {
     feeds: [],
     peripherals: [],
     sequences: [],
+    designer: fakeDesignerState(),
   });
 
   it("has correct parent className", () => {
@@ -167,7 +168,7 @@ describe("<NavBar />", () => {
   it("displays setup button", () => {
     const wrapper = mount(<NavBar {...fakeProps()} />);
     wrapper.find(".setup-button").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.setup());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.setup());
     expect(wrapper.text().toLowerCase()).toContain("complete");
   });
 
diff --git a/frontend/nav/__tests__/mobile_menu_test.tsx b/frontend/nav/__tests__/mobile_menu_test.tsx
index 31202f17a0..e23d123071 100644
--- a/frontend/nav/__tests__/mobile_menu_test.tsx
+++ b/frontend/nav/__tests__/mobile_menu_test.tsx
@@ -1,8 +1,10 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import { MobileMenu } from "../mobile_menu";
 import { MobileMenuProps } from "../interfaces";
-import { fakeHelpState } from "../../__test_support__/fake_designer_state";
+import {
+  fakeDesignerState, fakeHelpState,
+} from "../../__test_support__/fake_designer_state";
 
 describe("<MobileMenu />", () => {
   const fakeProps = (): MobileMenuProps => ({
@@ -10,10 +12,13 @@ describe("<MobileMenu />", () => {
     mobileMenuOpen: true,
     alertCount: 1,
     helpState: fakeHelpState(),
+    designer: fakeDesignerState(),
+    dispatch: jest.fn(),
   });
 
   it("renders", () => {
-    const wrapper = shallow(<MobileMenu {...fakeProps()} />);
-    expect(wrapper.find(".mobile-menu").hasClass("active")).toBeTruthy();
+    render(<MobileMenu {...fakeProps()} />);
+    const mobileMenu = screen.getByRole("navigation", { name: "Mobile Panel Menu" });
+    expect(mobileMenu).toHaveClass("mobile-menu active");
   });
 });
diff --git a/frontend/nav/__tests__/nav_links_test.tsx b/frontend/nav/__tests__/nav_links_test.tsx
index 0cecf0af0d..3df43a36a8 100644
--- a/frontend/nav/__tests__/nav_links_test.tsx
+++ b/frontend/nav/__tests__/nav_links_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import { fakeState } from "../../__test_support__/fake_state";
 const mockState = fakeState();
 jest.mock("../../redux/store", () => ({ store: { getState: () => mockState } }));
@@ -16,13 +10,21 @@ import { buildResourceIndex } from "../../__test_support__/resource_index_builde
 import {
   fakeFarmwareInstallation, fakeWebAppConfig,
 } from "../../__test_support__/fake_state/resources";
-import { fakeHelpState } from "../../__test_support__/fake_designer_state";
+import {
+  fakeDesignerState, fakeHelpState,
+
+} from "../../__test_support__/fake_designer_state";
+import { Path } from "../../internal_urls";
+import { Actions } from "../../constants";
+import { mockDispatch } from "../../__test_support__/fake_dispatch";
 
 describe("<NavLinks />", () => {
   const fakeProps = (): NavLinksProps => ({
-    close: jest.fn(),
+    close: jest.fn(() => jest.fn()),
     alertCount: 1,
     helpState: fakeHelpState(),
+    dispatch: jest.fn(),
+    designer: fakeDesignerState(),
   });
 
   it("toggles the mobile nav menu", () => {
@@ -41,6 +43,17 @@ describe("<NavLinks />", () => {
     expect(wrapper.text()).toContain("1");
   });
 
+  it("clicks map icon", () => {
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    const wrapper = mount(<NavLinks {...p} />);
+    wrapper.find("a").first().simulate("click");
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN, payload: false,
+    });
+  });
+
   it("shows beacon", () => {
     const p = fakeProps();
     p.helpState.currentTour = "gettingStarted";
@@ -50,9 +63,9 @@ describe("<NavLinks />", () => {
   });
 
   it("shows active link", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const wrapper = shallow(<NavLinks {...fakeProps()} />);
-    expect(wrapper.find("Link").at(1).hasClass("active")).toBeTruthy();
+    expect(wrapper.find("Link").at(0).hasClass("active")).toBeTruthy();
   });
 
   it("shows sensors link", () => {
diff --git a/frontend/nav/additional_menu.tsx b/frontend/nav/additional_menu.tsx
index 2458c02f09..a91700cd97 100644
--- a/frontend/nav/additional_menu.tsx
+++ b/frontend/nav/additional_menu.tsx
@@ -6,6 +6,9 @@ import { t } from "../i18next_wrapper";
 import { ExternalUrl } from "../external_urls";
 import { FilePath, Icon, Path } from "../internal_urls";
 import { logout } from "../logout";
+import { setWebAppConfigValue } from "../config_storage/actions";
+import { BooleanSetting } from "../session_keys";
+import { ToggleButton } from "../ui";
 
 export const AdditionalMenu = (props: AccountMenuProps) => {
   return <div className="nav-additional-menu">
@@ -40,8 +43,20 @@ export const AdditionalMenu = (props: AccountMenuProps) => {
         {t("Logout and destroy token")}
       </a>
     </div>}
-    <div className="app-version">
-      <label>{t("APP VERSION")}</label>:&nbsp;
+    <div className={"dark-mode-toggle"}>
+      <i className="fa fa-moon-o" />
+      <label>{t("Dark Mode")}</label>
+      <ToggleButton
+        toggleValue={props.darkMode}
+        toggleAction={() => {
+          props.dispatch(setWebAppConfigValue(
+            BooleanSetting.dark_mode, !props.darkMode));
+        }}
+        customText={{ textFalse: t("off"), textTrue: t("on") }} />
+    </div>
+    <div className="app-version row grid-exp-2 no-gap">
+      <img width={12} height={12} src={FilePath.icon(Icon.developer)} />
+      <label>{t("APP VERSION")}</label>
       <a href={ExternalUrl.webAppRepo} target="_blank" rel={"noreferrer"}>
         {shortRevision().slice(0, 8)}
       </a>
diff --git a/frontend/nav/index.tsx b/frontend/nav/index.tsx
index 98521a7297..0363d454cc 100644
--- a/frontend/nav/index.tsx
+++ b/frontend/nav/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { NavBarProps, NavBarState } from "./interfaces";
 import { EStopButton } from "./e_stop_btn";
-import { Row, Col, Popover } from "../ui";
-import { push } from "../history";
+import { Popover } from "../ui";
+import { useNavigate } from "react-router";
 import { updatePageInfo } from "../util";
 import { validBotLocationData } from "../util/location";
 import { NavLinks } from "./nav_links";
@@ -139,7 +139,11 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
             onClick={this.toggle("accountMenuOpen")}>
             {firstName}
           </div>}
-        content={<AdditionalMenu close={this.close} isStaff={this.isStaff} />} />
+        content={<AdditionalMenu
+          close={this.close}
+          dispatch={this.props.dispatch}
+          darkMode={!!this.props.getConfigValue(BooleanSetting.dark_mode)}
+          isStaff={this.isStaff} />} />
     </div>;
   };
 
@@ -187,9 +191,10 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
   SetupButton = () => {
     const firmwareHardware = this.props.apiFirmwareValue;
     const { wizardStepResults, device } = this.props;
+    const navigate = useNavigate();
     return !device.body.setup_completed_at
       ? <a className={"setup-button"}
-        onClick={() => push(Path.setup())}>
+        onClick={() => { navigate(Path.setup()); }}>
         {t("Setup")}
         {!isMobile() &&
           `: ${setupProgressString(wizardStepResults, { firmwareHardware })}`}
@@ -244,12 +249,20 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
       <i className={"fa fa-bars mobile-menu-icon"}
         onClick={this.toggle("mobileMenuOpen")} />
       <span className="mobile-menu-container">
-        <MobileMenu close={this.close} alertCount={this.props.alertCount}
+        <MobileMenu
+          designer={this.props.designer}
+          dispatch={this.props.dispatch}
+          close={this.close}
+          alertCount={this.props.alertCount}
           mobileMenuOpen={this.state.mobileMenuOpen}
           helpState={this.props.helpState} />
       </span>
       <span className="top-menu-container">
-        <NavLinks close={this.close} alertCount={this.props.alertCount}
+        <NavLinks
+          designer={this.props.designer}
+          dispatch={this.props.dispatch}
+          close={this.close}
+          alertCount={this.props.alertCount}
           helpState={this.props.helpState} />
       </span>
     </div>;
@@ -274,29 +287,25 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
         this.isStaff ? "red" : "",
       ].join(" ")}>
         <nav role="navigation">
-          <Row>
-            <Col xs={12}>
-              <div className="nav-bar">
-                <this.TickerList />
-                <div className="nav-group">
-                  <div className="nav-left">
-                    <this.AppNavLinks />
-                  </div>
-                  <div className="nav-right">
-                    <ErrorBoundary>
-                      <this.ReadOnlyStatus />
-                      <this.AccountMenu />
-                      <this.EstopButton />
-                      <this.ConnectionStatus />
-                      <this.SetupButton />
-                      <this.JobsButton />
-                      <this.Coordinates />
-                    </ErrorBoundary>
-                  </div>
-                </div>
+          <div className="nav-bar">
+            <this.TickerList />
+            <div className="nav-group">
+              <div className="nav-left">
+                <this.AppNavLinks />
+              </div>
+              <div className="nav-right">
+                <ErrorBoundary>
+                  <this.ReadOnlyStatus />
+                  <this.AccountMenu />
+                  <this.EstopButton />
+                  <this.ConnectionStatus />
+                  <this.SetupButton />
+                  <this.JobsButton />
+                  <this.Coordinates />
+                </ErrorBoundary>
               </div>
-            </Col>
-          </Row>
+            </div>
+          </div>
         </nav>
       </div>
     </ErrorBoundary>;
diff --git a/frontend/nav/interfaces.ts b/frontend/nav/interfaces.ts
index 3d8620d68b..9b3982bb0a 100644
--- a/frontend/nav/interfaces.ts
+++ b/frontend/nav/interfaces.ts
@@ -17,6 +17,7 @@ import { AppState } from "../reducer";
 import { ResourceIndex } from "../resources/interfaces";
 import { FirmwareConfig } from "farmbot/dist/resources/configs/firmware";
 import { RunButtonMenuOpen } from "../sequences/interfaces";
+import { DesignerState } from "../farm_designer/interfaces";
 
 export interface NavBarProps {
   logs: TaggedLog[];
@@ -44,6 +45,7 @@ export interface NavBarProps {
   feeds: TaggedWebcamFeed[];
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
+  designer: DesignerState;
 }
 
 export interface NavBarState {
@@ -59,6 +61,8 @@ export interface MobileMenuProps {
   mobileMenuOpen: boolean;
   alertCount: number;
   helpState: HelpState;
+  dispatch: Function;
+  designer: DesignerState;
 }
 
 export interface TickerListProps {
@@ -75,11 +79,15 @@ export interface NavLinksProps {
   close: (property: keyof NavBarState) => ToggleEventHandler;
   alertCount: number;
   helpState: HelpState;
+  dispatch: Function;
+  designer: DesignerState;
 }
 
 export interface AccountMenuProps {
   isStaff: boolean;
   close: (property: keyof NavBarState) => ToggleEventHandler;
+  dispatch: Function;
+  darkMode: boolean;
 }
 
 export interface EStopButtonProps {
diff --git a/frontend/nav/mobile_menu.tsx b/frontend/nav/mobile_menu.tsx
index 2bbd6a2ef9..af26d614b9 100644
--- a/frontend/nav/mobile_menu.tsx
+++ b/frontend/nav/mobile_menu.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Overlay, Classes } from "@blueprintjs/core";
+import { Overlay2, Classes } from "@blueprintjs/core";
 import { NavLinks } from "./nav_links";
 import { MobileMenuProps } from "./interfaces";
 
@@ -8,13 +8,19 @@ const classes = [Classes.CARD, Classes.ELEVATION_4, "mobile-menu"];
 export const MobileMenu = (props: MobileMenuProps) => {
   const isActive = props.mobileMenuOpen ? "active" : "inactive";
   return <div className={"mobile-menu-wrapper"}>
-    <Overlay
+    <Overlay2
       isOpen={props.mobileMenuOpen}
       onClose={props.close("mobileMenuOpen")}>
-      <div className={`${classes.join(" ")} ${isActive}`}>
-        <NavLinks close={props.close} alertCount={props.alertCount}
+      <div className={`${classes.join(" ")} ${isActive}`}
+        role={"navigation"}
+        aria-label={"Mobile Panel Menu"}>
+        <NavLinks
+          designer={props.designer}
+          dispatch={props.dispatch}
+          close={props.close}
+          alertCount={props.alertCount}
           helpState={props.helpState} />
       </div>
-    </Overlay>
+    </Overlay2>
   </div>;
 };
diff --git a/frontend/nav/nav_links.tsx b/frontend/nav/nav_links.tsx
index 9083a6cf9d..46b15a01c7 100644
--- a/frontend/nav/nav_links.tsx
+++ b/frontend/nav/nav_links.tsx
@@ -4,12 +4,12 @@ import { Link } from "../link";
 import {
   Panel, showSensors, showFarmware, PANEL_SLUG, TAB_ICON, PANEL_TITLE,
   getPanelPath, getCurrentPanel,
+  setPanelOpen,
 } from "../farm_designer/panel_header";
 import { ExternalUrl } from "../external_urls";
 import { maybeBeacon } from "../help/tours";
 
 export const getLinks = (): Panel[] => [
-  Panel.Map,
   Panel.Plants,
   Panel.Weeds,
   Panel.Points,
@@ -29,16 +29,28 @@ export const getLinks = (): Panel[] => [
 export const NavLinks = (props: NavLinksProps) =>
   <div className={"links"}>
     <div className={"nav-links"}>
+      <a id={"map"}
+        draggable={false}
+        onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          props.close("mobileMenuOpen")(e);
+          props.dispatch(setPanelOpen(false));
+        }}>
+        <NavIconAndText panel={Panel.Map} alertCount={props.alertCount} />
+      </a>
       {getLinks().map(panel =>
         <Link
           to={getPanelPath(panel)}
           className={[
-            getCurrentPanel() === panel ? "active" : "",
+            getCurrentPanel(props.designer) === panel ? "active" : "",
             maybeBeacon(PANEL_SLUG[panel], "soft", props.helpState),
           ].join(" ")}
           key={PANEL_SLUG[panel]}
           draggable={false}
-          onClick={props.close("mobileMenuOpen")}>
+          onClick={e => {
+            props.close("mobileMenuOpen")(e);
+            props.dispatch(setPanelOpen(true));
+          }}>
           <NavIconAndText panel={panel} alertCount={props.alertCount} />
         </Link>)}
       <a className={"shop-link"} key={"shop"}
diff --git a/frontend/nav/ticker_list.tsx b/frontend/nav/ticker_list.tsx
index a1a1a4bd40..e7c1ec3418 100644
--- a/frontend/nav/ticker_list.tsx
+++ b/frontend/nav/ticker_list.tsx
@@ -81,7 +81,7 @@ const TickerLog = (props: TickerLogProps) => {
   const time = created_at
     ? formatTime(moment.unix(created_at), timeSettings, "MMM D")
     : "";
-  return <div className="status-ticker-wrapper">
+  return <div className="status-ticker-wrapper row grid-exp-2">
     <div className={`saucer ${type}`} />
     <label className={`status-ticker-message ${prefix ? "prefix" : ""}`}>
       <Markdown>
diff --git a/frontend/os_download/content.tsx b/frontend/os_download/content.tsx
index a0e213a886..da32ebb7c2 100644
--- a/frontend/os_download/content.tsx
+++ b/frontend/os_download/content.tsx
@@ -241,7 +241,7 @@ const DOWNLOADS = (): Downloads => ({
 });
 
 const DownloadLink = (content: Partial<ReleaseItem>) =>
-  <div className={"download-link"}>
+  <div className={"download-link grid"}>
     <p className={"os-download-wizard-note"}>
       {`${t("Your FarmBot's internal computer is the")} ${content.computer}`}</p>
     <a className="transparent-button light" href={content.imageUrl}>
@@ -251,7 +251,7 @@ const DownloadLink = (content: Partial<ReleaseItem>) =>
 
 interface SimpleButtonProps {
   click(): void;
-  content: string | JSX.Element;
+  content: string | React.ReactNode;
   extraClass?: string;
 }
 
@@ -265,7 +265,7 @@ const SimpleButton = (props: SimpleButtonProps) =>
 
 interface ContentButtonProps {
   click(): void;
-  content: string | JSX.Element;
+  content: string | React.ReactNode;
   extraClass?: string;
   label?: string;
   image?: string;
@@ -335,11 +335,11 @@ class OsDownloadWizard
     }
     if (!this.state.model) {
       return <div className={"os-download-wizard"}>
-        <div className={"os-download-wizard-model"}>
+        <div className={"os-download-wizard-model grid double-gap"}>
           <p className={"os-download-wizard-note"}>
             {t("Which FarmBot model do you have?")}
           </p>
-          <div className={"buttons"}>
+          <div className={"buttons row double-gap"}>
             {MODELS().map(model =>
               <ContentButton key={model.value}
                 click={this.select({ model: model.value })}
@@ -371,7 +371,7 @@ class OsDownloadWizard
           <p className={"os-download-wizard-note"}>
             {t(Content.PI_POWER_CABLE_COLOR_PROMPT)}
           </p>
-          <div className={"buttons"}>
+          <div className={"buttons row grid-2-col double-gap"}>
             {RUNS()[this.state.version].map(run =>
               <ContentButton key={run.value}
                 click={this.select({ run: run.value })}
@@ -386,12 +386,13 @@ class OsDownloadWizard
     if (this.state.version == Version["v1.6"] && this.state.run != Run.second
       && !this.state.pi) {
       return <div className={"os-download-wizard"}>
-        <div className={"os-download-wizard-run"}>
+        <div className={"os-download-wizard-run grid"}>
           <p className={"os-download-wizard-note"}>
             {t(SetupWizardContent.RPI)}
           </p>
-          <img src={FilePath.setupWizardImage("rpi_3_vs_4.jpg")} />
-          <div className={"buttons"}>
+          <img className="pi-image"
+            src={FilePath.setupWizardImage("rpi_3_vs_4.jpg")} />
+          <div className={"buttons row grid-2-col double-gap"}>
             {PIS()[Version["v1.6"]].map(pi =>
               <ContentButton key={pi.value}
                 click={this.select({
@@ -425,9 +426,11 @@ export const OsDownloadPage = () => {
     (document.querySelector("html") as HTMLElement).style.fontSize = "15px";
   }
   return <div className={"static-page os-download-page"}>
-    <div className={"all-content-wrapper"}>
-      <h1>{t("Download FarmBot OS")}</h1>
-      <p className={"os-download-description"}>{t(Content.DOWNLOAD_FBOS)}</p>
+    <div className={"all-content-wrapper grid double-gap"}>
+      <div className="header grid">
+        <h1>{t("Download FarmBot OS")}</h1>
+        <p className={"os-download-description"}>{t(Content.DOWNLOAD_FBOS)}</p>
+      </div>
       <OsDownloadWizard wizard={wizard} setWizard={setWizard} />
       {wizard
         ? <SimpleButton extraClass={"wizard-btn"}
diff --git a/frontend/password_reset/password_reset.tsx b/frontend/password_reset/password_reset.tsx
index 02f0696153..c2b0f5d1a6 100644
--- a/frontend/password_reset/password_reset.tsx
+++ b/frontend/password_reset/password_reset.tsx
@@ -3,7 +3,7 @@ import axios from "axios";
 import { error as log } from "../toast/toast";
 import { prettyPrintApiErrors } from "../util";
 import { API } from "../api";
-import { Widget, WidgetHeader, WidgetBody, Row, Col } from "../ui";
+import { Widget, WidgetHeader, WidgetBody } from "../ui";
 import { Session } from "../session";
 import { t } from "../i18next_wrapper";
 import { ToastContainer } from "../toast/fb_toast";
@@ -68,54 +68,42 @@ export class PasswordReset extends React.Component<{}, State> {
 
   render() {
 
-    const buttonStylesUniqueToOnlyThisPage = {
-      marginTop: "1rem",
-      padding: ".5rem 1.6rem",
-      fontSize: "1.2rem",
-      borderBottom: "none"
-    };
-
     return <div className="static-page">
       <div className="all-content-wrapper">
         <h1 className="text-center">
           {t("Reset your password")}
         </h1>
         <br />
-        <Row>
-          <Col xs={12} sm={6} className="col-sm-push-3">
-            <Widget>
-              <WidgetHeader
-                title={"Reset Password"}
-                helpText={t("Password must be 8 or more characters.")} />
-              <WidgetBody>
-                <form onSubmit={this.submit.bind(this)}>
-                  <label>
-                    {t("New Password")}
-                  </label>
-                  <input
-                    type="password"
-                    onChange={this.set("password").bind(this)} />
-                  <label>
-                    {t("Confirm New Password")}
-                  </label>
-                  <input
-                    type="password"
-                    onChange={this.set("passwordConfirmation").bind(this)} />
-                  <Row>
-                    <Col xs={12}>
-                      <button
-                        className="fb-button green pull-right"
-                        title={t("Reset password")}
-                        style={buttonStylesUniqueToOnlyThisPage}>
-                        {t("Reset")}
-                      </button>
-                    </Col>
-                  </Row>
-                </form>
-              </WidgetBody>
-            </Widget>
-          </Col>
-        </Row>
+        <Widget>
+          <WidgetHeader
+            title={"Reset Password"}
+            helpText={t("Password must be 8 or more characters.")} />
+          <WidgetBody>
+            <form onSubmit={this.submit.bind(this)}>
+              <div>
+                <label>
+                  {t("New Password")}
+                </label>
+                <input
+                  type="password"
+                  onChange={this.set("password").bind(this)} />
+              </div>
+              <div>
+                <label>
+                  {t("Confirm New Password")}
+                </label>
+                <input
+                  type="password"
+                  onChange={this.set("passwordConfirmation").bind(this)} />
+              </div>
+              <button
+                className="fb-button green pull-right"
+                title={t("Reset password")}>
+                {t("Reset")}
+              </button>
+            </form>
+          </WidgetBody>
+        </Widget>
       </div>
       <ToastContainer />
     </div>;
diff --git a/frontend/photos/__tests__/photos_test.tsx b/frontend/photos/__tests__/photos_test.tsx
index 28296d2f56..febffbfc9c 100644
--- a/frontend/photos/__tests__/photos_test.tsx
+++ b/frontend/photos/__tests__/photos_test.tsx
@@ -11,6 +11,10 @@ jest.mock("../../farmware/farmware_info", () => ({
   requestFarmwareUpdate: jest.fn(),
 }));
 
+jest.mock("../../devices/actions", () => ({
+  takePhoto: jest.fn(),
+}));
+
 import React from "react";
 import { mount, shallow } from "enzyme";
 import {
@@ -25,9 +29,14 @@ import { requestFarmwareUpdate } from "../../farmware/farmware_info";
 import { fakeFarmware } from "../../__test_support__/fake_farmwares";
 import { FarmwareName } from "../../sequences/step_tiles/tile_execute_script";
 import { fakeDesignerState } from "../../__test_support__/fake_designer_state";
-import { fakeMovementState } from "../../__test_support__/fake_bot_data";
+import {
+  fakeMovementState, fakePercentJob,
+} from "../../__test_support__/fake_bot_data";
 import { fakePhotosPanelState } from "../../__test_support__/fake_camera_data";
-import { Actions } from "../../constants";
+import { Actions, Content, ToolTips } from "../../constants";
+import { clickButton } from "../../__test_support__/helpers";
+import { takePhoto } from "../../devices/actions";
+import { error } from "../../toast/toast";
 
 describe("<DesignerPhotos />", () => {
   const fakeProps = (): DesignerPhotosProps => ({
@@ -41,7 +50,7 @@ describe("<DesignerPhotos />", () => {
     currentImage: undefined,
     currentImageSize: { width: undefined, height: undefined },
     botToMqttStatus: "up",
-    syncStatus: undefined,
+    syncStatus: "synced",
     saveFarmwareEnv: jest.fn(),
     imageJobs: [],
     versions: {},
@@ -84,6 +93,34 @@ describe("<DesignerPhotos />", () => {
     wrapper.find(ToggleButton).last().simulate("click");
     expect(p.dispatch).toHaveBeenCalled();
   });
+
+  it("takes photo", () => {
+    const wrapper = mount(<DesignerPhotos {...fakeProps()} />);
+    const btn = wrapper.find("button").first();
+    expect(btn.props().title).not.toEqual(Content.NO_CAMERA_SELECTED);
+    clickButton(wrapper, 0, "take photo");
+    expect(takePhoto).toHaveBeenCalled();
+  });
+
+  it("shows disabled take photo button", () => {
+    const p = fakeProps();
+    p.env = { camera: "NONE" };
+    const wrapper = mount(<DesignerPhotos {...p} />);
+    const btn = wrapper.find("button").first();
+    expect(btn.text()).toEqual("Take Photo");
+    expect(btn.props().title).toEqual(Content.NO_CAMERA_SELECTED);
+    btn.simulate("click");
+    expect(error).toHaveBeenCalledWith(
+      ToolTips.SELECT_A_CAMERA, { title: Content.NO_CAMERA_SELECTED });
+    expect(takePhoto).not.toHaveBeenCalled();
+  });
+
+  it("shows image download progress", () => {
+    const p = fakeProps();
+    p.imageJobs = [fakePercentJob({ percent: 15 })];
+    const wrapper = mount(<DesignerPhotos {...p} />);
+    expect(wrapper.text()).toContain("uploading photo...15%");
+  });
 });
 
 describe("<UpdateImagingPackage />", () => {
diff --git a/frontend/photos/camera_calibration/__tests__/index_test.tsx b/frontend/photos/camera_calibration/__tests__/index_test.tsx
index df147da716..a3f5699d94 100644
--- a/frontend/photos/camera_calibration/__tests__/index_test.tsx
+++ b/frontend/photos/camera_calibration/__tests__/index_test.tsx
@@ -44,8 +44,7 @@ describe("<CameraCalibration/>", () => {
     const p = fakeProps();
     p.wDEnv = { CAMERA_CALIBRATION_easy_calibration: SPECIAL_VALUES.FALSE };
     const wrapper = mount(<CameraCalibration {...p} />);
-    ["Color Range",
-      "HUE017947",
+    ["HUE017947",
       "SATURATION025558",
       "VALUE025569",
       "Scan current image",
diff --git a/frontend/photos/camera_calibration/config.tsx b/frontend/photos/camera_calibration/config.tsx
index ac6373dcf7..a3647089e3 100644
--- a/frontend/photos/camera_calibration/config.tsx
+++ b/frontend/photos/camera_calibration/config.tsx
@@ -38,7 +38,7 @@ export class CameraCalibrationConfig
       onChange: this.props.onChange,
     };
     const { calibrationZ } = this.props;
-    return <div className={"camera-calibration-config"}>
+    return <div className={"grid"}>
       {!simple &&
         <div className={"camera-calibration-configs"}>
           <BoolConfig {...commonProps}
@@ -123,11 +123,13 @@ export const BoolConfig = (props: BoolConfigProps) => {
     hidden={props.advanced && !(props.showAdvanced || props.modified)}
     className={props.advanced ? "advanced" : undefined}
     pathPrefix={Path.photos}>
-    <div className="boolean-camera-calibration-config">
-      <label htmlFor={props.configKey}>
-        {t(props.settingName)}
-      </label>
-      {props.helpText && <Help text={props.helpText} links={props.links} />}
+    <div className="row grid-exp-1">
+      <div className="row grid-exp-2 half-gap">
+        <label htmlFor={props.configKey}>
+          {t(props.settingName)}
+        </label>
+        {props.helpText && <Help text={props.helpText} links={props.links} />}
+      </div>
       <input
         type="checkbox"
         name={props.configKey}
@@ -155,11 +157,13 @@ export interface NumberBoxConfigProps {
 
 export const NumberBoxConfig = (props: NumberBoxConfigProps) => {
   return <Highlight settingName={props.settingName} pathPrefix={Path.photos}>
-    <div className={"camera-config-number-box"}>
-      <label htmlFor={props.configKey}>
-        {t(props.settingName)}
-      </label>
-      <Help text={props.helpText} />
+    <div className={"row camera-calibration-setting-grid"}>
+      <div className="row grid-exp-2 half-gap">
+        <label htmlFor={props.configKey}>
+          {t(props.settingName)}
+        </label>
+        <Help text={props.helpText} />
+      </div>
       <BlurableInput type="number"
         id={props.configKey}
         className={getModifiedClassName(props.configKey,
@@ -185,11 +189,13 @@ export interface DropdownConfigProps {
 
 export const DropdownConfig = (props: DropdownConfigProps) =>
   <Highlight settingName={props.settingName} pathPrefix={Path.photos}>
-    <div className={`dropdown-camera-calibration-config ${props.extraClass}`}>
-      <label htmlFor={props.configKey}>
-        {t(props.settingName)}
-      </label>
-      <Help text={props.helpText} />
+    <div className={`camera-calibration-setting-grid row ${props.extraClass}`}>
+      <div className="row grid-exp-2 half-gap">
+        <label htmlFor={props.configKey}>
+          {t(props.settingName)}
+        </label>
+        <Help text={props.helpText} />
+      </div>
       <FBSelect
         extraClass={getModifiedClassName(props.configKey,
           props.wdEnvGet(props.configKey))}
diff --git a/frontend/photos/camera_calibration/index.tsx b/frontend/photos/camera_calibration/index.tsx
index ec3966b2fe..adb6b3ed3c 100644
--- a/frontend/photos/camera_calibration/index.tsx
+++ b/frontend/photos/camera_calibration/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, docLinkClick, Color } from "../../ui";
+import { docLinkClick, Color } from "../../ui";
 import { CameraCalibrationProps } from "./interfaces";
 import { ImageWorkspace, NumericKeyName } from "../image_workspace";
 import { WDENVKey } from "../remote_env/interfaces";
@@ -36,62 +36,58 @@ export class CameraCalibration extends
     const botOnline = isBotOnline(syncStatus, botToMqttStatus);
     const camDisabled = cameraBtnProps(this.props.env, botOnline);
     const easyCalibration = !!wdEnvGet(this.namespace("easy_calibration"));
-    return <div className="camera-calibration">
-      <div className="farmware-button">
-        <MustBeOnline
-          syncStatus={this.props.syncStatus}
-          networkState={this.props.botToMqttStatus}
-          hideBanner={true}>
-          <button
-            className={`fb-button green ${camDisabled.class}`}
-            title={camDisabled.title}
-            onClick={camDisabled.click || calibrate(easyCalibration)}>
-            {t("Calibrate")}
-          </button>
-        </MustBeOnline>
+    return <div className="camera-calibration grid">
+      <div className="grid">
+        <div className={"row grid-exp-1"}>
+          <CalibrationCardSVG grid={easyCalibration} />
+          <MustBeOnline
+            syncStatus={this.props.syncStatus}
+            networkState={this.props.botToMqttStatus}
+            hideBanner={true}>
+            <button
+              className={`fb-button green ${camDisabled.class}`}
+              title={camDisabled.title}
+              onClick={camDisabled.click || calibrate(easyCalibration)}>
+              {t("Calibrate")}
+            </button>
+          </MustBeOnline>
+        </div>
+        <p>{easyCalibration
+          ? t(Content.CAMERA_CALIBRATION_GRID_PATTERN)
+          : t(Content.CAMERA_CALIBRATION_RED_OBJECTS)}</p>
+        <CameraCalibrationMethodConfig
+          wdEnvGet={wdEnvGet}
+          saveEnvVar={this.saveEnvVar} />
       </div>
-      <Row>
-        <Col sm={12}>
-          <div className={"simple-camera-calibration-checkbox"}>
-            <CalibrationCardSVG grid={easyCalibration} />
-            <p>{easyCalibration
-              ? t(Content.CAMERA_CALIBRATION_GRID_PATTERN)
-              : t(Content.CAMERA_CALIBRATION_RED_OBJECTS)}</p>
-            <CameraCalibrationMethodConfig
-              wdEnvGet={wdEnvGet}
-              saveEnvVar={this.saveEnvVar} />
-          </div>
-          {!easyCalibration &&
-            <ImageWorkspace
-              sectionKey={"calibration"}
-              dispatch={this.props.dispatch}
-              advancedSectionOpen={this.props.photosPanelState.calibrationPP}
-              botOnline={isBotOnline(
-                this.props.syncStatus, this.props.botToMqttStatus)}
-              onProcessPhoto={scanImage(easyCalibration)}
-              images={this.props.images}
-              currentImage={this.props.currentImage}
-              onChange={this.change}
-              timeSettings={this.props.timeSettings}
-              showAdvanced={this.props.showAdvanced}
-              iteration={this.props.iteration}
-              morph={this.props.morph}
-              blur={this.props.blur}
-              H_LO={this.props.H_LO}
-              S_LO={this.props.S_LO}
-              V_LO={this.props.V_LO}
-              H_HI={this.props.H_HI}
-              S_HI={this.props.S_HI}
-              V_HI={this.props.V_HI}
-              namespace={this.namespace}
-              invertHue={!!wdEnvGet(this.namespace("invert_hue_selection"))} />}
-          <CameraCalibrationConfig
-            values={this.props.wDEnv}
-            calibrationZ={this.props.env["CAMERA_CALIBRATION_camera_z"]}
-            calibrationImageCenter={getCalibratedImageCenter(this.props.env)}
-            onChange={this.saveEnvVar} />
-        </Col>
-      </Row>
+      {!easyCalibration &&
+        <ImageWorkspace
+          sectionKey={"calibration"}
+          dispatch={this.props.dispatch}
+          advancedSectionOpen={this.props.photosPanelState.calibrationPP}
+          botOnline={isBotOnline(
+            this.props.syncStatus, this.props.botToMqttStatus)}
+          onProcessPhoto={scanImage(easyCalibration)}
+          images={this.props.images}
+          currentImage={this.props.currentImage}
+          onChange={this.change}
+          timeSettings={this.props.timeSettings}
+          showAdvanced={this.props.showAdvanced}
+          iteration={this.props.iteration}
+          morph={this.props.morph}
+          blur={this.props.blur}
+          H_LO={this.props.H_LO}
+          S_LO={this.props.S_LO}
+          V_LO={this.props.V_LO}
+          H_HI={this.props.H_HI}
+          S_HI={this.props.S_HI}
+          V_HI={this.props.V_HI}
+          namespace={this.namespace}
+          invertHue={!!wdEnvGet(this.namespace("invert_hue_selection"))} />}
+      <CameraCalibrationConfig
+        values={this.props.wDEnv}
+        calibrationZ={this.props.env["CAMERA_CALIBRATION_camera_z"]}
+        calibrationImageCenter={getCalibratedImageCenter(this.props.env)}
+        onChange={this.saveEnvVar} />
     </div>;
   }
 }
diff --git a/frontend/photos/capture_settings/camera_selection.tsx b/frontend/photos/capture_settings/camera_selection.tsx
index 5904837ae4..825c736328 100644
--- a/frontend/photos/capture_settings/camera_selection.tsx
+++ b/frontend/photos/capture_settings/camera_selection.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { DropDownItem, Row, Col, FBSelect } from "../../ui";
+import { DropDownItem, Row, FBSelect } from "../../ui";
 import {
   CameraSelectionProps, CameraSelectionState,
 } from "./interfaces";
@@ -79,23 +79,19 @@ export class CameraSelection
 
   render() {
     return <Highlight settingName={DeviceSetting.camera} pathPrefix={Path.photos}>
-      <Row>
-        <Col xs={5}>
-          <label>
-            {t("CAMERA")}
-          </label>
-        </Col>
-        <Col xs={7}>
-          <FBSelect
-            allowEmpty={false}
-            list={CAMERA_CHOICES()}
-            selectedItem={this.selectedCamera()}
-            onChange={ddi =>
-              this.props.dispatch(this.props.saveFarmwareEnv("camera",
-                JSON.stringify(ddi.value)))}
-            extraClass={getModifiedClassNameSpecifyDefault(
-              this.selectedCamera().value, Camera.USB)} />
-        </Col>
+      <Row className="row grid-2-col">
+        <label>
+          {t("CAMERA")}
+        </label>
+        <FBSelect
+          allowEmpty={false}
+          list={CAMERA_CHOICES()}
+          selectedItem={this.selectedCamera()}
+          onChange={ddi =>
+            this.props.dispatch(this.props.saveFarmwareEnv("camera",
+              JSON.stringify(ddi.value)))}
+          extraClass={getModifiedClassNameSpecifyDefault(
+            this.selectedCamera().value, Camera.USB)} />
       </Row>
     </Highlight>;
   }
diff --git a/frontend/photos/capture_settings/capture_size_selection.tsx b/frontend/photos/capture_settings/capture_size_selection.tsx
index 1d32c14b97..976994b098 100644
--- a/frontend/photos/capture_settings/capture_size_selection.tsx
+++ b/frontend/photos/capture_settings/capture_size_selection.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { DeviceSetting, ToolTips } from "../../constants";
 import { t } from "../../i18next_wrapper";
-import { Help, BlurableInput, Row, Col, FBSelect, DropDownItem } from "../../ui";
+import { Help, BlurableInput, Row, FBSelect, DropDownItem } from "../../ui";
 import { CaptureSizeSelectionProps, CaptureSizeSelectionState } from "./interfaces";
 import { Camera, parseCameraSelection } from "./camera_selection";
 import { getModifiedClassNameSpecifyDefault } from "../../settings/default_values";
@@ -64,60 +64,50 @@ export class CaptureSizeSelection
 
     return <Highlight settingName={DeviceSetting.imageResolution}
       pathPrefix={Path.photos}>
-      <div className={"image-size-inputs"}>
-        <Row>
-          <Col xs={5}>
+      <div className={"image-size-inputs grid"}>
+        <Row className="row grid-2-col">
+          <div className="row grid-exp-2 half-gap">
             <label>{t("resolution")}</label>
             <Help text={ToolTips.IMAGE_RESOLUTION} />
-          </Col>
-          <Col xs={7}>
-            <FBSelect
-              key={selectedSize.value}
-              extraClass={getModifiedClassNameSpecifyDefault(
-                selectedSize.value, Size.r640x480)}
-              list={Object.values(SIZE_OPTIONS(parseCameraSelection(env)))
-                .filter(ddi => !!ddi)
-                .map((ddi: DropDownItem) => ddi)}
-              selectedItem={selectedSize}
-              onChange={ddi => {
-                if (ddi.value == Size.custom) {
-                  this.setState({ custom: true });
-                  return;
-                } else {
-                  this.setState({ custom: false });
-                }
-                const size = SIZES[ddi.value as Size];
-                dispatch(saveFarmwareEnv("take_photo_width", "" + size.width));
-                dispatch(saveFarmwareEnv("take_photo_height", "" + size.height));
-              }} />
-          </Col>
+          </div>
+          <FBSelect
+            key={selectedSize.value}
+            extraClass={getModifiedClassNameSpecifyDefault(
+              selectedSize.value, Size.r640x480)}
+            list={Object.values(SIZE_OPTIONS(parseCameraSelection(env)))
+              .filter(ddi => !!ddi)
+              .map((ddi: DropDownItem) => ddi)}
+            selectedItem={selectedSize}
+            onChange={ddi => {
+              if (ddi.value == Size.custom) {
+                this.setState({ custom: true });
+                return;
+              } else {
+                this.setState({ custom: false });
+              }
+              const size = SIZES[ddi.value as Size];
+              dispatch(saveFarmwareEnv("take_photo_width", "" + size.width));
+              dispatch(saveFarmwareEnv("take_photo_height", "" + size.height));
+            }} />
         </Row>
-        <PhotoResolutionSettingChanged {...this.props} />
         {(this.state.custom || selectedSize.value == Size.custom) &&
-          <div className={"size-inputs"}>
-            <Row>
-              <Col xs={4} xsOffset={1}>
-                <label>{t("width")}</label>
-              </Col>
-              <Col xs={7}>
-                <BlurableInput type="number"
-                  value={width}
-                  onCommit={e => dispatch(saveFarmwareEnv(
-                    "take_photo_width", e.currentTarget.value))} />
-              </Col>
+          <div className={"size-inputs grid"}>
+            <Row className="row grid-2-col">
+              <label>{t("width")}</label>
+              <BlurableInput type="number"
+                value={width}
+                onCommit={e => dispatch(saveFarmwareEnv(
+                  "take_photo_width", e.currentTarget.value))} />
             </Row>
-            <Row>
-              <Col xs={4} xsOffset={1}>
-                <label>{t("height")}</label>
-              </Col>
-              <Col xs={7}>
-                <BlurableInput type="number"
-                  value={height}
-                  onCommit={e => dispatch(saveFarmwareEnv(
-                    "take_photo_height", e.currentTarget.value))} />
-              </Col>
+            <Row className="row grid-2-col">
+              <label>{t("height")}</label>
+              <BlurableInput type="number"
+                value={height}
+                onCommit={e => dispatch(saveFarmwareEnv(
+                  "take_photo_height", e.currentTarget.value))} />
             </Row>
           </div>}
+        <PhotoResolutionSettingChanged {...this.props} />
       </div>
     </Highlight>;
   }
diff --git a/frontend/photos/capture_settings/index.tsx b/frontend/photos/capture_settings/index.tsx
index fd0d363ace..029dd1b19e 100644
--- a/frontend/photos/capture_settings/index.tsx
+++ b/frontend/photos/capture_settings/index.tsx
@@ -11,7 +11,7 @@ export class CaptureSettings
   render() {
     const { dispatch, saveFarmwareEnv, env, botOnline } = this.props;
     const common = { dispatch, env, saveFarmwareEnv };
-    return <div className="capture-settings">
+    return <div className="capture-settings grid">
       <CameraSelection {...common} botOnline={botOnline} />
       <CaptureSizeSelection {...common} />
       <RotationSetting {...common} version={this.props.version} />
diff --git a/frontend/photos/capture_settings/rotation_setting.tsx b/frontend/photos/capture_settings/rotation_setting.tsx
index cd2938dd20..bb0406271e 100644
--- a/frontend/photos/capture_settings/rotation_setting.tsx
+++ b/frontend/photos/capture_settings/rotation_setting.tsx
@@ -20,9 +20,11 @@ export const RotationSetting = (props: RotationSettingProps) => {
     : disableRotationEnv?.includes("1");
   return <Highlight settingName={DeviceSetting.rotateDuringCapture}
     pathPrefix={Path.photos}>
-    <div className={"capture-rotate-setting"}>
-      <label>{t("Rotate during capture")}</label>
-      <Help text={ToolTips.ROTATE_IMAGE_AT_CAPTURE} />
+    <div className={"capture-rotate-setting row grid-exp-1"}>
+      <div className="row grid-exp-2 half-gap">
+        <label>{t("Rotate during capture")}</label>
+        <Help text={ToolTips.ROTATE_IMAGE_AT_CAPTURE} />
+      </div>
       <ToggleButton toggleValue={!disableRotation}
         className={getModifiedClassNameDefaultFalse(!disableRotation)}
         toggleAction={() => props.dispatch(props.saveFarmwareEnv(
diff --git a/frontend/photos/data_management/__tests__/env_editor_test.tsx b/frontend/photos/data_management/__tests__/env_editor_test.tsx
index 891fc4f42a..b88202227f 100644
--- a/frontend/photos/data_management/__tests__/env_editor_test.tsx
+++ b/frontend/photos/data_management/__tests__/env_editor_test.tsx
@@ -12,8 +12,7 @@ jest.mock("../../../settings/dev/dev_support", () => ({
   }
 }));
 
-import React from "react";
-import { act } from "react-dom/test-utils";
+import React, { act } from "react";
 import { mount, ReactWrapper } from "enzyme";
 import { EnvEditor } from "../env_editor";
 import { EnvEditorProps } from "../interfaces";
diff --git a/frontend/photos/data_management/env_editor.tsx b/frontend/photos/data_management/env_editor.tsx
index 2624736816..a063197f5b 100644
--- a/frontend/photos/data_management/env_editor.tsx
+++ b/frontend/photos/data_management/env_editor.tsx
@@ -6,16 +6,10 @@ import { destroy, edit, initSave, save } from "../../api/crud";
 import { Content } from "../../constants";
 import { DevSettings } from "../../settings/dev/dev_support";
 import { error } from "../../toast/toast";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { ClearFarmwareData } from "./clear_farmware_data";
 import { EnvEditorProps } from "./interfaces";
 
-enum ColumnWidth {
-  key = 7,
-  value = 4,
-  button = 1,
-}
-
 const HIDDEN_PREFIXES = [
   "LAST_CLIENT_CONNECTED",
   "camera",
@@ -33,36 +27,29 @@ export const EnvEditor = (props: EnvEditorProps) => {
   return <div className={"farmware-env-editor"}>
     <label>{props.title}</label>
     {props.title && <Help text={Content.FARMWARE_ENV_EDITOR_INFO} />}
-    <Row className={"no-margin"} />
-    <Row>
-      <Col xs={ColumnWidth.key}>
-        <input
-          value={newKey}
-          placeholder={t("Setting name (key)")}
-          onChange={e => setNewKey(e.currentTarget.value)} />
-      </Col>
-      <Col xs={ColumnWidth.value}>
-        <input value={newValue}
-          placeholder={t("value")}
-          onChange={e => setNewValue(e.currentTarget.value)} />
-      </Col>
-      <Col xs={ColumnWidth.button}>
-        <button
-          className={"fb-button green"}
-          title={t("add")}
-          onClick={() => {
-            if (!newKey) { return error(t("Key cannot be blank.")); }
-            if (props.farmwareEnvs.map(x => x.body.key).includes(newKey)) {
-              return error(t("Key has already been taken."));
-            }
-            props.dispatch(initSave("FarmwareEnv",
-              { key: newKey, value: newValue }));
-            setNewKey("");
-            setNewValue("");
-          }}>
-          <i className={"fa fa-plus"} />
-        </button>
-      </Col>
+    <Row className="custom-setting-grid">
+      <input
+        value={newKey}
+        placeholder={t("Setting name (key)")}
+        onChange={e => setNewKey(e.currentTarget.value)} />
+      <input value={newValue}
+        placeholder={t("value")}
+        onChange={e => setNewValue(e.currentTarget.value)} />
+      <button
+        className={"fb-button green"}
+        title={t("add")}
+        onClick={() => {
+          if (!newKey) { return error(t("Key cannot be blank.")); }
+          if (props.farmwareEnvs.map(x => x.body.key).includes(newKey)) {
+            return error(t("Key has already been taken."));
+          }
+          props.dispatch(initSave("FarmwareEnv",
+            { key: newKey, value: newValue }));
+          setNewKey("");
+          setNewValue("");
+        }}>
+        <i className={"fa fa-plus"} />
+      </button>
     </Row>
     <hr />
     {sortedFarmware
@@ -99,30 +86,24 @@ const FarmwareEnvRow = (props: FarmwareEnvRowProps) => {
   const { dispatch, farmwareEnv } = props;
   const [key, setKey] = React.useState(farmwareEnv.body.key);
   const [value, setValue] = React.useState("" + farmwareEnv.body.value);
-  return <Row>
-    <Col xs={ColumnWidth.key}>
-      <input value={key}
-        onChange={e => setKey(e.currentTarget.value)}
-        onBlur={() => {
-          dispatch(edit(farmwareEnv, { key }));
-          dispatch(save(farmwareEnv.uuid));
-        }} />
-    </Col>
-    <Col xs={ColumnWidth.value}>
-      <input value={value}
-        onChange={e => setValue(e.currentTarget.value)}
-        onBlur={() => {
-          dispatch(edit(farmwareEnv, { value }));
-          dispatch(save(farmwareEnv.uuid));
-        }} />
-    </Col>
-    <Col xs={ColumnWidth.button}>
-      <button
-        className={"fb-button red"}
-        title={t("delete")}
-        onClick={() => dispatch(destroy(farmwareEnv.uuid))}>
-        <i className={"fa fa-times"} />
-      </button>
-    </Col>
+  return <Row className="custom-setting-grid">
+    <input value={key}
+      onChange={e => setKey(e.currentTarget.value)}
+      onBlur={() => {
+        dispatch(edit(farmwareEnv, { key }));
+        dispatch(save(farmwareEnv.uuid));
+      }} />
+    <input value={value}
+      onChange={e => setValue(e.currentTarget.value)}
+      onBlur={() => {
+        dispatch(edit(farmwareEnv, { value }));
+        dispatch(save(farmwareEnv.uuid));
+      }} />
+    <button
+      className={"fb-button red"}
+      title={t("delete")}
+      onClick={() => dispatch(destroy(farmwareEnv.uuid))}>
+      <i className={"fa fa-times"} />
+    </button>
   </Row>;
 };
diff --git a/frontend/photos/data_management/index.tsx b/frontend/photos/data_management/index.tsx
index 9ecab84295..f2f116c4b1 100644
--- a/frontend/photos/data_management/index.tsx
+++ b/frontend/photos/data_management/index.tsx
@@ -21,16 +21,19 @@ export const ImagingDataManagement = (props: ImagingDataManagementProps) => {
         dispatch={props.dispatch}
         getConfigValue={props.getConfigValue} />
     </Highlight>
-    <fieldset>
-      <label>{t("clear all config data")}</label>
-      <ClearFarmwareData farmwareEnvs={props.farmwareEnvs} />
-    </fieldset>
     <Highlight settingName={DeviceSetting.showAdvancedSettings}
       pathPrefix={Path.photos}>
       <ShowAdvancedToggle
         dispatch={props.dispatch}
         getConfigValue={props.getConfigValue} />
     </Highlight>
+    <Highlight settingName={DeviceSetting.showAdvancedSettings}
+      pathPrefix={Path.photos}>
+      <div className="row grid-exp-1">
+        <label>{t("clear all config data")}</label>
+        <ClearFarmwareData farmwareEnvs={props.farmwareEnvs} />
+      </div>
+    </Highlight>
     {DevSettings.showInternalEnvsEnabled() &&
       <div className={"advanced"}>
         <ExpandableHeader
diff --git a/frontend/photos/data_management/interfaces.ts b/frontend/photos/data_management/interfaces.ts
index 3b0b63fac3..39a33c2cce 100644
--- a/frontend/photos/data_management/interfaces.ts
+++ b/frontend/photos/data_management/interfaces.ts
@@ -20,5 +20,5 @@ export interface EnvEditorProps {
 
 export interface ClearFarmwareDataProps {
   farmwareEnvs: TaggedFarmwareEnv[];
-  children?: React.ReactChild;
+  children?: React.ReactNode;
 }
diff --git a/frontend/photos/data_management/toggle_highlight_modified.tsx b/frontend/photos/data_management/toggle_highlight_modified.tsx
index dcb7fb339a..3348c9ac6f 100644
--- a/frontend/photos/data_management/toggle_highlight_modified.tsx
+++ b/frontend/photos/data_management/toggle_highlight_modified.tsx
@@ -10,7 +10,7 @@ import { getModifiedClassName } from "../../settings/default_values";
 export const ToggleHighlightModified = (props: ToggleHighlightModifiedProps) => {
   const { getConfigValue, dispatch } = props;
   const value = !!getConfigValue(BooleanSetting.highlight_modified_settings);
-  return <div className={"highlight-modified-toggle"}>
+  return <div className={"row grid-exp-1"}>
     <label>{t(DeviceSetting.highlightModifiedSettings)}</label>
     <ToggleButton
       className={getModifiedClassName(BooleanSetting.highlight_modified_settings)}
diff --git a/frontend/photos/image_workspace/__tests__/farmbot_picker_test.tsx b/frontend/photos/image_workspace/__tests__/farmbot_picker_test.tsx
index 2b6bc48a66..e98abfa444 100644
--- a/frontend/photos/image_workspace/__tests__/farmbot_picker_test.tsx
+++ b/frontend/photos/image_workspace/__tests__/farmbot_picker_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import { FarmbotColorPicker, getHueBoxes } from "../farmbot_picker";
 import { FarmbotPickerProps } from "../interfaces";
diff --git a/frontend/photos/image_workspace/__tests__/slider_test.tsx b/frontend/photos/image_workspace/__tests__/slider_test.tsx
index 6f8cc71693..2ab68885ee 100644
--- a/frontend/photos/image_workspace/__tests__/slider_test.tsx
+++ b/frontend/photos/image_workspace/__tests__/slider_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { WeedDetectorSlider, SliderProps } from "../slider";
 import { shallow } from "enzyme";
 
diff --git a/frontend/photos/image_workspace/index.tsx b/frontend/photos/image_workspace/index.tsx
index 0b3dc20d15..ecca866ae5 100644
--- a/frontend/photos/image_workspace/index.tsx
+++ b/frontend/photos/image_workspace/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FarmbotColorPicker } from "./farmbot_picker";
-import { BlurableInput, Row, Col, Help, ExpandableHeader } from "../../ui";
+import { BlurableInput, Row, Help, ExpandableHeader } from "../../ui";
 import { HSV } from "./interfaces";
 import { WeedDetectorSlider } from "./slider";
 import { TaggedImage } from "farmbot";
@@ -109,21 +109,20 @@ export class ImageWorkspace
     const cameraCalibrationEnv = this.props.namespace("H_LO").includes("CAMERA");
     const defaultHLow = this.getDefault(cameraCalibrationEnv ? "H_HI" : "H_LO");
     const defaultHHigh = this.getDefault(cameraCalibrationEnv ? "H_LO" : "H_HI");
-    return <div className="image-workspace">
-      <Row>
-        <Col xs={12} md={6}>
-          <h4>
-            <i>{t("Color Range")}</i>
-          </h4>
+    return <div className="image-workspace grid">
+      <Row className="grid-2-col weed-detection-grid">
+        <div className="grid">
           <Highlight settingName={this.props.sectionKey == "calibration"
             ? DeviceSetting.calibrationHue
             : DeviceSetting.detectionHue} pathPrefix={Path.photos}>
-            <label htmlFor="hue">{t("HUE")}</label>
-            <Help text={t(ToolTips.COLOR_HUE_RANGE, {
-              defaultLow: defaultHLow,
-              defaultHigh: defaultHHigh,
-              defaultColor: cameraCalibrationEnv ? t("red") : t("green"),
-            })} />
+            <div className="row grid-exp-2 half-gap">
+              <label htmlFor="hue">{t("HUE")}</label>
+              <Help text={t(ToolTips.COLOR_HUE_RANGE, {
+                defaultLow: defaultHLow,
+                defaultHigh: defaultHHigh,
+                defaultColor: cameraCalibrationEnv ? t("red") : t("green"),
+              })} />
+            </div>
             <WeedDetectorSlider
               className={[
                 getModifiedClassNameDefaultFalse(
@@ -140,11 +139,13 @@ export class ImageWorkspace
           <Highlight settingName={this.props.sectionKey == "calibration"
             ? DeviceSetting.calibrationSaturation
             : DeviceSetting.detectionSaturation} pathPrefix={Path.photos}>
-            <label htmlFor="saturation">{t("SATURATION")}</label>
-            <Help text={t(ToolTips.COLOR_SATURATION_RANGE, {
-              defaultLow: this.getDefault("S_LO"),
-              defaultHigh: this.getDefault("S_HI"),
-            })} />
+            <div className="row grid-exp-2 half-gap">
+              <label htmlFor="saturation">{t("SATURATION")}</label>
+              <Help text={t(ToolTips.COLOR_SATURATION_RANGE, {
+                defaultLow: this.getDefault("S_LO"),
+                defaultHigh: this.getDefault("S_HI"),
+              })} />
+            </div>
             <WeedDetectorSlider
               className={[
                 getModifiedClassNameDefaultFalse(
@@ -161,11 +162,13 @@ export class ImageWorkspace
           <Highlight settingName={this.props.sectionKey == "calibration"
             ? DeviceSetting.calibrationValue
             : DeviceSetting.detectionValue} pathPrefix={Path.photos}>
-            <label htmlFor="value">{t("VALUE")}</label>
-            <Help text={t(ToolTips.COLOR_VALUE_RANGE, {
-              defaultLow: this.getDefault("V_LO"),
-              defaultHigh: this.getDefault("V_HI"),
-            })} />
+            <div className="row grid-exp-2 half-gap">
+              <label htmlFor="value">{t("VALUE")}</label>
+              <Help text={t(ToolTips.COLOR_VALUE_RANGE, {
+                defaultLow: this.getDefault("V_LO"),
+                defaultHigh: this.getDefault("V_HI"),
+              })} />
+            </div>
             <WeedDetectorSlider
               className={[
                 getModifiedClassNameDefaultFalse(
@@ -179,99 +182,100 @@ export class ImageWorkspace
               lowValue={V_LO}
               highValue={V_HI} />
           </Highlight>
-        </Col>
-        <Col xs={12} md={6}>
-          <FarmbotColorPicker
-            h={[H_LO, H_HI]}
-            s={[S_LO, S_HI]}
-            v={[V_LO, V_HI]}
-            invertHue={this.props.invertHue} />
-        </Col>
+        </div>
+        <FarmbotColorPicker
+          h={[H_LO, H_HI]}
+          s={[S_LO, S_HI]}
+          v={[V_LO, V_HI]}
+          invertHue={this.props.invertHue} />
       </Row>
       {(this.props.showAdvanced || this.anyAdvancedModified) &&
         <Row>
-          <Col xs={12}>
-            <ExpandableHeader
-              expanded={!!this.props.advancedSectionOpen}
-              title={t("Processing Parameters")}
-              onClick={() => this.props.dispatch({
-                type: Actions.TOGGLE_PHOTOS_PANEL_OPTION,
-                payload: this.props.sectionKey == "calibration"
-                  ? "calibrationPP"
-                  : "detectionPP",
-              })} />
-          </Col>
+          <ExpandableHeader
+            expanded={!!this.props.advancedSectionOpen}
+            title={t("Processing Parameters")}
+            onClick={() => this.props.dispatch({
+              type: Actions.TOGGLE_PHOTOS_PANEL_OPTION,
+              payload: this.props.sectionKey == "calibration"
+                ? "calibrationPP"
+                : "detectionPP",
+            })} />
         </Row>}
       {(this.props.showAdvanced || this.anyAdvancedModified) &&
         <Collapse isOpen={this.props.advancedSectionOpen}>
-          <Row>
-            <Col xs={4}>
-              <Highlight
-                settingName={this.props.sectionKey == "calibration"
-                  ? DeviceSetting.calibrationBlur
-                  : DeviceSetting.detectionBlur}
-                className={"advanced"}
-                pathPrefix={Path.photos}>
-                <label>{t("BLUR")}</label>
-                <Help text={t(ToolTips.BLUR, {
-                  defaultBlur: this.getDefault("blur")
-                })} />
+          <Row className="grid-3-col">
+            <Highlight
+              settingName={this.props.sectionKey == "calibration"
+                ? DeviceSetting.calibrationBlur
+                : DeviceSetting.detectionBlur}
+              className={"advanced"}
+              pathPrefix={Path.photos}>
+              <div className="grid no-gap">
+                <div className="row grid-exp-2 half-gap">
+                  <label>{t("BLUR")}</label>
+                  <Help text={t(ToolTips.BLUR, {
+                    defaultBlur: this.getDefault("blur")
+                  })} />
+                </div>
                 <BlurableInput type="number"
                   wrapperClassName={this.getModifiedClass("blur")}
                   min={RANGES.BLUR.LOWEST}
                   max={RANGES.BLUR.HIGHEST}
                   onCommit={this.numericChange("blur")}
                   value={"" + this.props.blur} />
-              </Highlight>
-            </Col>
-            <Col xs={4}>
-              <Highlight
-                settingName={this.props.sectionKey == "calibration"
-                  ? DeviceSetting.calibrationMorph
-                  : DeviceSetting.detectionMorph}
-                pathPrefix={Path.photos}>
-                <label>{t("MORPH")}</label>
-                <Help text={t(ToolTips.MORPH, {
-                  defaultMorph: this.getDefault("morph")
-                })} />
+              </div>
+            </Highlight>
+            <Highlight
+              settingName={this.props.sectionKey == "calibration"
+                ? DeviceSetting.calibrationMorph
+                : DeviceSetting.detectionMorph}
+              pathPrefix={Path.photos}>
+              <div className="grid no-gap">
+                <div className="row grid-exp-2 half-gap">
+                  <label>{t("MORPH")}</label>
+                  <Help text={t(ToolTips.MORPH, {
+                    defaultMorph: this.getDefault("morph")
+                  })} />
+                </div>
                 <BlurableInput type="number"
                   wrapperClassName={this.getModifiedClass("morph")}
                   min={RANGES.MORPH.LOWEST}
                   max={RANGES.MORPH.HIGHEST}
                   onCommit={this.numericChange("morph")}
                   value={"" + this.props.morph} />
-              </Highlight>
-            </Col>
-            <Col xs={4}>
-              <Highlight
-                settingName={this.props.sectionKey == "calibration"
-                  ? DeviceSetting.calibrationIterations
-                  : DeviceSetting.detectionIterations}
-                pathPrefix={Path.photos}>
-                <label>{t("ITERATIONS")}</label>
-                <Help text={t(ToolTips.ITERATIONS, {
-                  defaultIteration: this.getDefault("iteration")
-                })} />
+              </div>
+            </Highlight>
+            <Highlight
+              settingName={this.props.sectionKey == "calibration"
+                ? DeviceSetting.calibrationIterations
+                : DeviceSetting.detectionIterations}
+              pathPrefix={Path.photos}>
+              <div className="grid no-gap">
+                <div className="row grid-exp-2 half-gap">
+                  <label>{t("ITERATIONS")}</label>
+                  <Help text={t(ToolTips.ITERATIONS, {
+                    defaultIteration: this.getDefault("iteration")
+                  })} />
+                </div>
                 <BlurableInput type="number"
                   wrapperClassName={this.getModifiedClass("iteration")}
                   min={RANGES.ITERATION.LOWEST}
                   max={RANGES.ITERATION.HIGHEST}
                   onCommit={this.numericChange("iteration")}
                   value={"" + this.props.iteration} />
-              </Highlight>
-            </Col>
+              </div>
+            </Highlight>
           </Row>
         </Collapse>}
-      <Row>
-        <Col xs={12}>
-          <button
-            className="green fb-button"
-            title={t("Scan this image")}
-            onClick={this.maybeProcessPhoto}
-            disabled={!this.props.botOnline || !this.props.images.length}>
-            {t("Scan current image")}
-          </button>
-        </Col>
+      <Row className="grid-exp-1">
+        <div />
+        <button
+          className="green fb-button"
+          title={t("Scan this image")}
+          onClick={this.maybeProcessPhoto}
+          disabled={!this.props.botOnline || !this.props.images.length}>
+          {t("Scan current image")}
+        </button>
       </Row>
     </div>;
   }
diff --git a/frontend/photos/images/__tests__/photos_test.tsx b/frontend/photos/images/__tests__/photos_test.tsx
index 9e1fa152a7..ec4b801850 100644
--- a/frontend/photos/images/__tests__/photos_test.tsx
+++ b/frontend/photos/images/__tests__/photos_test.tsx
@@ -1,6 +1,5 @@
 jest.mock("../../../devices/actions", () => ({
   move: jest.fn(),
-  takePhoto: jest.fn(),
 }));
 
 jest.mock("../../../api/crud", () => ({ destroy: jest.fn() }));
@@ -16,7 +15,7 @@ import {
 } from "../interfaces";
 import { fakeTimeSettings } from "../../../__test_support__/fake_time_settings";
 import { success, error } from "../../../toast/toast";
-import { Content, ToolTips, Actions } from "../../../constants";
+import { Actions } from "../../../constants";
 import {
   fakeImage, fakeWebAppConfig,
 } from "../../../__test_support__/fake_state/resources";
@@ -26,7 +25,7 @@ import { fakeDesignerState } from "../../../__test_support__/fake_designer_state
 import {
   fakeMovementState, fakePercentJob,
 } from "../../../__test_support__/fake_bot_data";
-import { move, takePhoto } from "../../../devices/actions";
+import { move } from "../../../devices/actions";
 
 describe("<Photos />", () => {
   const fakeProps = (): PhotosProps => ({
@@ -80,27 +79,6 @@ describe("<Photos />", () => {
     expect(wrapper.text()).toContain("yet taken any photos");
   });
 
-  it("takes photo", () => {
-    const wrapper = mount(<Photos {...fakeProps()} />);
-    const btn = wrapper.find("button").first();
-    expect(btn.props().title).not.toEqual(Content.NO_CAMERA_SELECTED);
-    clickButton(wrapper, 0, "take photo");
-    expect(takePhoto).toHaveBeenCalled();
-  });
-
-  it("shows disabled take photo button", () => {
-    const p = fakeProps();
-    p.env = { camera: "NONE" };
-    const wrapper = mount(<Photos {...p} />);
-    const btn = wrapper.find("button").first();
-    expect(btn.text()).toEqual("Take Photo");
-    expect(btn.props().title).toEqual(Content.NO_CAMERA_SELECTED);
-    btn.simulate("click");
-    expect(error).toHaveBeenCalledWith(
-      ToolTips.SELECT_A_CAMERA, { title: Content.NO_CAMERA_SELECTED });
-    expect(takePhoto).not.toHaveBeenCalled();
-  });
-
   it("deletes photo", async () => {
     const p = fakeProps();
     p.dispatch = jest.fn(() => Promise.resolve());
@@ -134,13 +112,6 @@ describe("<Photos />", () => {
     expect(destroy).not.toHaveBeenCalled();
   });
 
-  it("shows image download progress", () => {
-    const p = fakeProps();
-    p.imageJobs = [fakePercentJob({ percent: 15 })];
-    const wrapper = mount(<Photos {...p} />);
-    expect(wrapper.text()).toContain("uploading photo...15%");
-  });
-
   it("doesn't show image download progress", () => {
     const p = fakeProps();
     p.imageJobs = [fakePercentJob({ status: "complete" })];
diff --git a/frontend/photos/images/photos.tsx b/frontend/photos/images/photos.tsx
index 2e504ab294..7e94eeb458 100644
--- a/frontend/photos/images/photos.tsx
+++ b/frontend/photos/images/photos.tsx
@@ -7,21 +7,17 @@ import {
 import {
   PhotosProps, PhotoButtonsProps, PhotoFooterProps, PhotosComponentState,
   MoveToLocationProps,
-  NewPhotoButtonsProps,
 } from "./interfaces";
 import { formatTime } from "../../util";
 import { destroy } from "../../api/crud";
-import { downloadProgress } from "../../settings/fbos_settings/os_update_button";
 import { isNumber, isUndefined, round } from "lodash";
-import { isBotOnline, MustBeOnline } from "../../devices/must_be_online";
+import { isBotOnline } from "../../devices/must_be_online";
 import { t } from "../../i18next_wrapper";
-import { cameraBtnProps } from "../capture_settings/camera_selection";
 import { Overlay } from "@blueprintjs/core";
 import { ImageShowMenu, ImageShowMenuTarget } from "./image_show_menu";
 import { setShownMapImages } from "./actions";
 import { TaggedImage } from "farmbot";
 import { MarkedSlider, Popover } from "../../ui";
-import { takePhoto } from "../../devices/actions";
 import {
   botPositionLabel,
 } from "../../farm_designer/map/layers/farmbot/bot_position_label";
@@ -29,30 +25,6 @@ import {
   GoToThisLocationButton, validGoButtonAxes,
 } from "../../farm_designer/move_to";
 
-const NewPhotoButtons = (props: NewPhotoButtonsProps) => {
-  const imageUploadJobProgress = downloadProgress(props.imageJobs[0]);
-  const { syncStatus, botToMqttStatus } = props;
-  const botOnline = isBotOnline(syncStatus, botToMqttStatus);
-  const camDisabled = cameraBtnProps(props.env, botOnline);
-  return <div className={"new-photo-button"}>
-    <MustBeOnline
-      syncStatus={props.syncStatus}
-      networkState={props.botToMqttStatus}
-      hideBanner={true}>
-      <button
-        className={`fb-button green ${camDisabled.class}`}
-        title={camDisabled.title}
-        onClick={camDisabled.click || props.takePhoto}>
-        {t("Take Photo")}
-      </button>
-    </MustBeOnline>
-    <p>
-      {imageUploadJobProgress &&
-        `${t("uploading photo")}...${imageUploadJobProgress}`}
-    </p>
-  </div>;
-};
-
 export const PhotoButtons = (props: PhotoButtonsProps) => {
   const { imageUrl } = props;
   const { image, dispatch, flags, size } = props;
@@ -63,7 +35,7 @@ export const PhotoButtons = (props: PhotoButtonsProps) => {
         popoverClassName={"image-show-menu-popover"}
         target={<ImageShowMenuTarget {...imageShowMenuProps} flags={flags} />}
         content={<ImageShowMenu {...imageShowMenuProps} flags={flags} />} />}
-    {imageUrl && <i className={"fa fa-trash fb-icon-button"}
+    {imageUrl && <i className={"fa fa-trash fb-icon-button invert"}
       title={t("Delete Photo")}
       onClick={props.deletePhoto} />}
     {imageUrl && <a
@@ -72,14 +44,14 @@ export const PhotoButtons = (props: PhotoButtonsProps) => {
       target={"_blank"}
       rel={"noreferrer"}
       download={true}>
-      <i className={"fa fa-download fb-icon-button"} />
+      <i className={"fa fa-download fb-icon-button invert"} />
     </a>}
     {imageUrl &&
       <i title={t("Toggle crop")}
         className={[
           "fa fa-scissors",
           props.canCrop ? "" : "disabled",
-          "fb-icon-button",
+          "fb-icon-button invert",
         ].join(" ")}
         onClick={props.canCrop ? props.toggleCrop : undefined} />}
     {imageUrl &&
@@ -87,10 +59,10 @@ export const PhotoButtons = (props: PhotoButtonsProps) => {
         className={[
           "fa fa-repeat",
           props.canTransform ? "" : "disabled",
-          "fb-icon-button",
+          "fb-icon-button invert",
         ].join(" ")}
         onClick={props.canTransform ? props.toggleRotation : undefined} />}
-    <i className={"fa fa-arrows-alt desktop-only fb-icon-button"}
+    <i className={"fa fa-arrows-alt desktop-only fb-icon-button invert"}
       title={t("View fullscreen")}
       onClick={props.toggleFullscreen} />
   </div>;
@@ -102,7 +74,6 @@ export const PhotoFooter = (props: PhotoFooterProps) => {
     ? formatTime(moment(image.body.created_at), timeSettings, "MMMM Do, YYYY")
     : "";
   return <div className="photos-footer">
-    <div className={"gradient"} />
     <div className={"footer-text"}>
       <div className={"image-metadata"}>
         {image && <Popover
@@ -202,12 +173,6 @@ export class Photos extends React.Component<PhotosProps, PhotosComponentState> {
 
   render() {
     return <div className="photos">
-      <NewPhotoButtons
-        syncStatus={this.props.syncStatus}
-        botToMqttStatus={this.props.botToMqttStatus}
-        takePhoto={takePhoto}
-        env={this.props.env}
-        imageJobs={this.props.imageJobs} />
       <Overlay isOpen={this.state.fullscreen}
         onClose={this.toggleFullscreen}
         backdropProps={{ style: { background: "#000d" } }}>
diff --git a/frontend/photos/photo_filter_settings/image_filter_menu.tsx b/frontend/photos/photo_filter_settings/image_filter_menu.tsx
index ad8ca5324b..fb1a6e39f6 100644
--- a/frontend/photos/photo_filter_settings/image_filter_menu.tsx
+++ b/frontend/photos/photo_filter_settings/image_filter_menu.tsx
@@ -188,16 +188,16 @@ export class ImageFilterMenu
           <tr>
             <th />
             <th>
-              <i className={"fa fa-step-backward fb-icon-button"}
+              <i className={"fa fa-step-backward fb-icon-button invert"}
                 onClick={this.oldest} />
               {beginDate &&
-                <i className={"fa fa-caret-left fb-icon-button"}
+                <i className={"fa fa-caret-left fb-icon-button invert"}
                   onClick={this.dateStep(-1)} />}
               <label>{t("Date")}</label>
               {beginDate &&
-                <i className={"fa fa-caret-right fb-icon-button"}
+                <i className={"fa fa-caret-right fb-icon-button invert"}
                   onClick={this.dateStep(1)} />}
-              <i className={"fa fa-step-forward fb-icon-button"}
+              <i className={"fa fa-step-forward fb-icon-button invert"}
                 onClick={this.newest} />
             </th>
             <th><label>{t("Time")}</label></th>
diff --git a/frontend/photos/photo_filter_settings/index.tsx b/frontend/photos/photo_filter_settings/index.tsx
index a8dbbc0171..626ca01fca 100644
--- a/frontend/photos/photo_filter_settings/index.tsx
+++ b/frontend/photos/photo_filter_settings/index.tsx
@@ -45,7 +45,7 @@ export const PhotoFilterSettings = (props: PhotoFilterSettingsProps) => {
     photo_filter_begin: "", photo_filter_end: "",
   }));
   const commonToggleProps = { dispatch, layerOff };
-  return <div className={"photo-filter-settings"}>
+  return <div className={"photo-filter-settings grid"}>
     <div className={className}>
       <p className={"banner"}>
         {layerOff
@@ -67,7 +67,7 @@ export const PhotoFilterSettings = (props: PhotoFilterSettingsProps) => {
       <FilterOlderOrNewer {...commonProps} />
     </div>
     <Highlight settingName={DeviceSetting.showPhotos} pathPrefix={Path.photos}>
-      <div className={"toggle-group"}>
+      <div className={"row grid-exp-1"}>
         <label className={"toggle-label"}>{t("show photos in map")}</label>
         <ToggleButton toggleValue={!layerOff}
           className={getModifiedClassName(BooleanSetting.show_images)}
@@ -116,7 +116,7 @@ interface PhotoSettingToggleProps {
 const PhotoSettingToggle = (props: PhotoSettingToggleProps) =>
   <Highlight settingName={props.settingName}
     pathPrefix={Path.photos}>
-    <div className={"toggle-group"}>
+    <div className={"row grid-exp-1"}>
       <label className={"toggle-label"}>
         {t(props.settingName)}
       </label>
diff --git a/frontend/photos/photos.tsx b/frontend/photos/photos.tsx
index 8dc2f2ee8d..29ee87a652 100644
--- a/frontend/photos/photos.tsx
+++ b/frontend/photos/photos.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { envGet } from "./remote_env/selectors";
 import { Photos } from "./images/photos";
 import { CameraCalibration } from "./camera_calibration";
@@ -14,12 +14,12 @@ import { Collapse } from "@blueprintjs/core";
 import { ExpandableHeader, ToolTip } from "../ui";
 import { Actions, ToolTips } from "../constants";
 import { requestFarmwareUpdate } from "../farmware/farmware_info";
-import { isBotOnline } from "../devices/must_be_online";
+import { isBotOnline, MustBeOnline } from "../devices/must_be_online";
 import { CaptureSettings } from "./capture_settings";
 import {
   PhotoFilterSettings, FiltersEnabledWarning,
 } from "./photo_filter_settings";
-import { ImageShowFlags } from "./images/interfaces";
+import { ImageShowFlags, NewPhotoButtonsProps } from "./images/interfaces";
 import { DesignerPhotosProps, PhotosPanelState } from "./interfaces";
 import { mapStateToProps } from "./state_to_props";
 import { ImagingDataManagement } from "./data_management";
@@ -29,6 +29,33 @@ import { FarmwareForm } from "../farmware/farmware_forms";
 import { BooleanSetting } from "../session_keys";
 import { maybeOpenPanel } from "../settings/maybe_highlight";
 import { DevSettings } from "../settings/dev/dev_support";
+import { takePhoto } from "../devices/actions";
+import { cameraBtnProps } from "./capture_settings/camera_selection";
+import { downloadProgress } from "../settings/fbos_settings/os_update_button";
+
+const NewPhotoButtons = (props: NewPhotoButtonsProps) => {
+  const imageUploadJobProgress = downloadProgress(props.imageJobs[0]);
+  const { syncStatus, botToMqttStatus } = props;
+  const botOnline = isBotOnline(syncStatus, botToMqttStatus);
+  const camDisabled = cameraBtnProps(props.env, botOnline);
+  return <div className={"row"}>
+    <p>
+      {imageUploadJobProgress &&
+        `${t("uploading photo")}...${imageUploadJobProgress}`}
+    </p>
+    <MustBeOnline
+      syncStatus={props.syncStatus}
+      networkState={props.botToMqttStatus}
+      hideBanner={true}>
+      <button
+        className={`fb-button green ${camDisabled.class}`}
+        title={camDisabled.title}
+        onClick={camDisabled.click || props.takePhoto}>
+        {t("Take Photo")}
+      </button>
+    </MustBeOnline>
+  </div>;
+};
 
 export class RawDesignerPhotos
   extends React.Component<DesignerPhotosProps> {
@@ -68,9 +95,16 @@ export class RawDesignerPhotos
     };
     const farmwareNames = Object.keys(this.props.farmwares);
     return <DesignerPanel panelName={"photos"} panel={Panel.Photos}>
-      <DesignerNavTabs />
       <DesignerPanelContent panelName={"photos"}>
-        <label>{t("Photos")}</label>
+        <div className="row grid-exp-1">
+          <h2 className="panel-title">{t("Photos")}</h2>
+          <NewPhotoButtons
+            syncStatus={this.props.syncStatus}
+            botToMqttStatus={this.props.botToMqttStatus}
+            takePhoto={takePhoto}
+            env={this.props.env}
+            imageJobs={this.props.imageJobs} />
+        </div>
         <Photos {...common} {...imageCommon}
           currentBotLocation={this.props.currentBotLocation}
           movementState={this.props.movementState}
@@ -179,6 +213,8 @@ export class RawDesignerPhotos
 }
 
 export const DesignerPhotos = connect(mapStateToProps)(RawDesignerPhotos);
+// eslint-disable-next-line import/no-default-export
+export default DesignerPhotos;
 
 export interface UpdateImagingPackageProps {
   farmwareName: string;
diff --git a/frontend/photos/weed_detector/__tests__/index_test.tsx b/frontend/photos/weed_detector/__tests__/index_test.tsx
index fdba7243cc..78a5d3f9d1 100644
--- a/frontend/photos/weed_detector/__tests__/index_test.tsx
+++ b/frontend/photos/weed_detector/__tests__/index_test.tsx
@@ -41,8 +41,7 @@ describe("<WeedDetector />", () => {
 
   it("renders", () => {
     const wrapper = mount(<WeedDetector {...fakeProps()} />);
-    ["Color Range",
-      "HUE01793090",
+    ["HUE01793090",
       "SATURATION025550255",
       "VALUE025550255",
       "Scan current image",
@@ -56,7 +55,7 @@ describe("<WeedDetector />", () => {
     const wrapper = shallow(<WeedDetector {...p} />);
     const btn = wrapper.find("button").first();
     expect(btn.props().title).not.toEqual(Content.NO_CAMERA_SELECTED);
-    clickButton(wrapper, 0, "detect weeds");
+    clickButton(wrapper, 1, "detect weeds");
     expect(detectPlants).toHaveBeenCalledWith(0);
     expect(error).not.toHaveBeenCalled();
   });
@@ -65,7 +64,7 @@ describe("<WeedDetector />", () => {
     const p = fakeProps();
     p.env = { camera: "NONE" };
     const wrapper = shallow(<WeedDetector {...p} />);
-    const btn = wrapper.find("button").first();
+    const btn = wrapper.find("button").at(1);
     expect(btn.props().title).toEqual(Content.NO_CAMERA_SELECTED);
     btn.simulate("click");
     expect(error).toHaveBeenCalledWith(
@@ -76,7 +75,7 @@ describe("<WeedDetector />", () => {
   it("executes clear weeds", () => {
     const wrapper = shallow<WeedDetector>(<WeedDetector {...fakeProps()} />);
     expect(wrapper.instance().state.deletionProgress).toBeUndefined();
-    clickButton(wrapper, 1, "clear weeds");
+    clickButton(wrapper, 0, "clear weeds");
     expect(deletePoints).toHaveBeenCalledWith(
       "weeds", { meta: { created_by: "plant-detection" } }, expect.any(Function));
     expect(wrapper.instance().state.deletionProgress).toEqual("Deleting...");
diff --git a/frontend/photos/weed_detector/index.tsx b/frontend/photos/weed_detector/index.tsx
index 21def0f95b..11e9e27f9b 100644
--- a/frontend/photos/weed_detector/index.tsx
+++ b/frontend/photos/weed_detector/index.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { WeedDetectorState, WeedDetectorProps } from "./interfaces";
-import { Row, Col } from "../../ui";
 import { scanImage, detectPlants } from "./actions";
 import { deletePoints } from "../../api/delete_points";
 import { Progress } from "../../util";
@@ -74,7 +73,14 @@ export class WeedDetector
     const botOnline = isBotOnline(syncStatus, botToMqttStatus);
     const camDisabled = cameraBtnProps(this.props.env, botOnline);
     return <div className="weed-detector">
-      <div className="farmware-button">
+      <div className="row grid-exp-1">
+        <div />
+        <button
+          title={t("clear weeds")}
+          onClick={this.clearWeeds}
+          className="fb-button red">
+          {this.state.deletionProgress || t("CLEAR WEEDS")}
+        </button>
         <MustBeOnline
           syncStatus={this.props.syncStatus}
           networkState={this.props.botToMqttStatus}
@@ -87,73 +93,61 @@ export class WeedDetector
             {t("detect weeds")}
           </button>
         </MustBeOnline>
-        <button
-          title={t("clear weeds")}
-          onClick={this.clearWeeds}
-          className="fb-button red">
-          {this.state.deletionProgress || t("CLEAR WEEDS")}
-        </button>
       </div>
-      <Row>
-        <Col sm={12}>
-          <ImageWorkspace
-            sectionKey={"detection"}
-            dispatch={this.props.dispatch}
-            advancedSectionOpen={this.props.photosPanelState.detectionPP}
-            botOnline={
-              isBotOnline(this.props.syncStatus, this.props.botToMqttStatus)}
-            onProcessPhoto={scanImage(wDEnvGet("CAMERA_CALIBRATION_coord_scale"))}
-            currentImage={this.props.currentImage}
-            images={this.props.images}
-            onChange={this.change}
-            timeSettings={this.props.timeSettings}
-            showAdvanced={this.props.showAdvanced}
-            namespace={this.namespace}
-            iteration={wDEnvGet(this.namespace("iteration"))}
-            morph={wDEnvGet(this.namespace("morph"))}
-            blur={wDEnvGet(this.namespace("blur"))}
-            H_LO={wDEnvGet(this.namespace("H_LO"))}
-            H_HI={wDEnvGet(this.namespace("H_HI"))}
-            S_LO={wDEnvGet(this.namespace("S_LO"))}
-            S_HI={wDEnvGet(this.namespace("S_HI"))}
-            V_LO={wDEnvGet(this.namespace("V_LO"))}
-            V_HI={wDEnvGet(this.namespace("V_HI"))} />
-          <div className={"camera-calibration-config"}>
-            <div className={"camera-calibration-configs"}>
-              <BoolConfig {...this.commonProps}
-                settingName={DeviceSetting.saveDetectedPlants}
-                advanced={true}
-                showAdvanced={this.props.showAdvanced}
-                modified={this.anyAdvancedModified}
-                helpText={t(ToolTips.SAVE_DETECTED_PLANTS, {
-                  defaultSavePlants:
-                    this.getLabeledDefault("save_detected_plants")
-                })}
-                configKey={this.namespace("save_detected_plants")} />
-              <BoolConfig {...this.commonProps}
-                settingName={DeviceSetting.ignoreDetectionsOutOfBounds}
-                helpText={t(ToolTips.USE_BOUNDS, {
-                  defaultUseBounds: this.getLabeledDefault("use_bounds")
-                })}
-                configKey={this.namespace("use_bounds")} />
-              <NumberBoxConfig {...this.commonProps}
-                settingName={DeviceSetting.minimumWeedSize}
-                configKey={this.namespace("min_radius")}
-                scale={2}
-                helpText={t(ToolTips.MIN_RADIUS, {
-                  defaultMinDiameter: this.getDefault("min_radius") * 2
-                })} />
-              <NumberBoxConfig {...this.commonProps}
-                settingName={DeviceSetting.maximumWeedSize}
-                configKey={this.namespace("max_radius")}
-                scale={2}
-                helpText={t(ToolTips.MAX_RADIUS, {
-                  defaultMaxDiameter: this.getDefault("max_radius") * 2
-                })} />
-            </div>
-          </div>
-        </Col>
-      </Row>
+      <ImageWorkspace
+        sectionKey={"detection"}
+        dispatch={this.props.dispatch}
+        advancedSectionOpen={this.props.photosPanelState.detectionPP}
+        botOnline={
+          isBotOnline(this.props.syncStatus, this.props.botToMqttStatus)}
+        onProcessPhoto={scanImage(wDEnvGet("CAMERA_CALIBRATION_coord_scale"))}
+        currentImage={this.props.currentImage}
+        images={this.props.images}
+        onChange={this.change}
+        timeSettings={this.props.timeSettings}
+        showAdvanced={this.props.showAdvanced}
+        namespace={this.namespace}
+        iteration={wDEnvGet(this.namespace("iteration"))}
+        morph={wDEnvGet(this.namespace("morph"))}
+        blur={wDEnvGet(this.namespace("blur"))}
+        H_LO={wDEnvGet(this.namespace("H_LO"))}
+        H_HI={wDEnvGet(this.namespace("H_HI"))}
+        S_LO={wDEnvGet(this.namespace("S_LO"))}
+        S_HI={wDEnvGet(this.namespace("S_HI"))}
+        V_LO={wDEnvGet(this.namespace("V_LO"))}
+        V_HI={wDEnvGet(this.namespace("V_HI"))} />
+      <div className={"grid"}>
+        <BoolConfig {...this.commonProps}
+          settingName={DeviceSetting.saveDetectedPlants}
+          advanced={true}
+          showAdvanced={this.props.showAdvanced}
+          modified={this.anyAdvancedModified}
+          helpText={t(ToolTips.SAVE_DETECTED_PLANTS, {
+            defaultSavePlants:
+              this.getLabeledDefault("save_detected_plants")
+          })}
+          configKey={this.namespace("save_detected_plants")} />
+        <BoolConfig {...this.commonProps}
+          settingName={DeviceSetting.ignoreDetectionsOutOfBounds}
+          helpText={t(ToolTips.USE_BOUNDS, {
+            defaultUseBounds: this.getLabeledDefault("use_bounds")
+          })}
+          configKey={this.namespace("use_bounds")} />
+        <NumberBoxConfig {...this.commonProps}
+          settingName={DeviceSetting.minimumWeedSize}
+          configKey={this.namespace("min_radius")}
+          scale={2}
+          helpText={t(ToolTips.MIN_RADIUS, {
+            defaultMinDiameter: this.getDefault("min_radius") * 2
+          })} />
+        <NumberBoxConfig {...this.commonProps}
+          settingName={DeviceSetting.maximumWeedSize}
+          configKey={this.namespace("max_radius")}
+          scale={2}
+          helpText={t(ToolTips.MAX_RADIUS, {
+            defaultMaxDiameter: this.getDefault("max_radius") * 2
+          })} />
+      </div>
     </div>;
   }
 }
diff --git a/frontend/plants/__tests__/add_plant_test.tsx b/frontend/plants/__tests__/add_plant_test.tsx
index 37597d0c89..e2f54ac919 100644
--- a/frontend/plants/__tests__/add_plant_test.tsx
+++ b/frontend/plants/__tests__/add_plant_test.tsx
@@ -1,9 +1,3 @@
-let mockPath = "";
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { mount } from "enzyme";
 import {
@@ -39,7 +33,7 @@ describe("<AddPlant />", () => {
   };
 
   it("renders", () => {
-    mockPath = Path.mock(Path.cropSearch("mint/add"));
+    location.pathname = Path.mock(Path.cropSearch("mint/add"));
     const p = fakeProps();
     p.dispatch = jest.fn(x => x(jest.fn()));
     const wrapper = mount(<AddPlant {...p} />);
diff --git a/frontend/plants/__tests__/crop_catalog_test.tsx b/frontend/plants/__tests__/crop_catalog_test.tsx
index 9da7dd3d92..1e7623a45d 100644
--- a/frontend/plants/__tests__/crop_catalog_test.tsx
+++ b/frontend/plants/__tests__/crop_catalog_test.tsx
@@ -8,7 +8,6 @@ import {
 import { mount, shallow } from "enzyme";
 import { CropCatalogProps } from "../../farm_designer/interfaces";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import {
   fakeCropLiveSearchResult,
 } from "../../__test_support__/fake_crop_search_result";
@@ -52,7 +51,7 @@ describe("<CropCatalog />", () => {
   it("goes back", () => {
     const wrapper = mount(<CropCatalog {...fakeProps()} />);
     wrapper.find("i").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
   });
 
   it("search term is too short", () => {
diff --git a/frontend/plants/__tests__/crop_info_test.tsx b/frontend/plants/__tests__/crop_info_test.tsx
index 34e5c8792a..2d8b5322fb 100644
--- a/frontend/plants/__tests__/crop_info_test.tsx
+++ b/frontend/plants/__tests__/crop_info_test.tsx
@@ -1,9 +1,3 @@
-let mockPath = "";
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({ initSave: jest.fn(), init: jest.fn() }));
 
 jest.mock("../../farm_designer/map/actions", () => ({
@@ -24,7 +18,6 @@ import {
 import { mount, shallow } from "enzyme";
 import { CropInfoProps } from "../../farm_designer/interfaces";
 import { initSave } from "../../api/crud";
-import { push } from "../../history";
 import {
   fakeCropLiveSearchResult,
 } from "../../__test_support__/fake_crop_search_result";
@@ -67,7 +60,7 @@ describe("<CropInfo />", () => {
   };
 
   it("renders", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.designer.cropSearchResults[0].companions = [];
     const wrapper = mount(<CropInfo {...p} />);
@@ -80,7 +73,7 @@ describe("<CropInfo />", () => {
 
   it("renders openfarm link", () => {
     mockDev = true;
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.designer.cropSearchResults[0].companions = [];
     const wrapper = mount(<CropInfo {...p} />);
@@ -88,18 +81,18 @@ describe("<CropInfo />", () => {
   });
 
   it("returns to crop search", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const wrapper = mount(<CropInfo {...p} />);
     wrapper.find(".back-arrow").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.cropSearch());
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SEARCH_QUERY_CHANGE, payload: "mint",
     });
   });
 
   it("renders stage", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.designer.cropStage = "planted";
     const wrapper = shallow(<CropInfo {...p} />);
@@ -109,7 +102,7 @@ describe("<CropInfo />", () => {
   });
 
   it("updates stage", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const wrapper = shallow(<CropInfo {...p} />);
     wrapper.find("FBSelect").first().simulate("change",
@@ -120,7 +113,7 @@ describe("<CropInfo />", () => {
   });
 
   it("renders planted at", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.designer.cropPlantedAt = "2020-01-20T20:00:00.000Z";
     const wrapper = shallow(<CropInfo {...p} />);
@@ -128,7 +121,7 @@ describe("<CropInfo />", () => {
   });
 
   it("updates planted at", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const wrapper = shallow(<CropInfo {...p} />);
     wrapper.find("BlurableInput").first().simulate("commit",
@@ -139,7 +132,7 @@ describe("<CropInfo />", () => {
   });
 
   it("updates curves", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const wrapper = mount<CropInfo>(<CropInfo {...p} />);
     wrapper.setState({ crop: "strawberry" });
@@ -151,7 +144,7 @@ describe("<CropInfo />", () => {
   });
 
   it("updates current image", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const images = [FilePath.DEFAULT_WEED_ICON];
     const p = fakeProps();
     const cropSearchResult = fakeCropLiveSearchResult();
@@ -166,12 +159,12 @@ describe("<CropInfo />", () => {
   });
 
   it("doesn't change search query", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.designer.cropSearchQuery = "mint";
     const wrapper = mount(<CropInfo {...p} />);
     wrapper.find(".back-arrow").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.cropSearch());
     expect(p.dispatch).not.toHaveBeenCalledWith({
       type: Actions.SEARCH_QUERY_CHANGE, payload: "mint",
     });
@@ -243,7 +236,7 @@ describe("<CropInfo />", () => {
   });
 
   it("navigates to companion plant", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     p.openfarmCropFetch = jest.fn(() => jest.fn());
     p.dispatch = jest.fn(x => {
@@ -257,12 +250,12 @@ describe("<CropInfo />", () => {
     expect(companion.text()).toEqual("Strawberry");
     companion.simulate("click");
     expect(p.openfarmCropFetch).toHaveBeenCalledWith("strawberry");
-    expect(push).toHaveBeenCalledWith(Path.cropSearch("strawberry"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.cropSearch("strawberry"));
   });
 
   it("drags companion plant", () => {
     jest.useFakeTimers();
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const wrapper = mount(<CropInfo {...p} />);
     jest.clearAllMocks();
@@ -283,7 +276,7 @@ describe("<CropInfo />", () => {
   });
 
   it("renders curves", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.type = "water";
@@ -301,7 +294,7 @@ describe("<CropInfo />", () => {
 
 describe("searchForCurrentCrop()", () => {
   it("searches", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const dispatch = jest.fn();
     const fakeOFSearch = jest.fn((_) => jest.fn());
     searchForCurrentCrop(fakeOFSearch)(dispatch);
@@ -312,7 +305,7 @@ describe("searchForCurrentCrop()", () => {
 
 describe("getCropHeaderProps()", () => {
   it("handles missing crop", () => {
-    mockPath = Path.mock(Path.cropSearch());
+    location.pathname = Path.mock(Path.cropSearch());
     const result = getCropHeaderProps({ cropSearchResults: [] });
     expect(result.result.crop.name).toEqual("");
   });
diff --git a/frontend/plants/__tests__/curve_info_test.tsx b/frontend/plants/__tests__/curve_info_test.tsx
index 1e4152e6cf..a46b8d690c 100644
--- a/frontend/plants/__tests__/curve_info_test.tsx
+++ b/frontend/plants/__tests__/curve_info_test.tsx
@@ -1,9 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.cropSearch("mint"));
-jest.mock("../../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import React from "react";
 import { CurveInfo } from "../curve_info";
 import { mount, shallow } from "enzyme";
@@ -15,6 +9,7 @@ import { CurveInfoProps } from "../../curves/interfaces";
 import { CurveType } from "../../curves/templates";
 import { formatPlantInfo } from "../map_state_to_props";
 import { FBSelect } from "../../ui";
+import { Path } from "../../internal_urls";
 
 describe("<CurveInfo />", () => {
   const fakeProps = (): CurveInfoProps => ({
@@ -41,7 +36,7 @@ describe("<CurveInfo />", () => {
   });
 
   it("displays curve with x, y", () => {
-    mockPath = Path.mock(Path.cropSearch("mint"));
+    location.pathname = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
     const curve = fakeCurve();
     curve.body.type = "water";
diff --git a/frontend/plants/__tests__/edit_plant_status_test.tsx b/frontend/plants/__tests__/edit_plant_status_test.tsx
index 65784e6649..cf1491dd60 100644
--- a/frontend/plants/__tests__/edit_plant_status_test.tsx
+++ b/frontend/plants/__tests__/edit_plant_status_test.tsx
@@ -29,7 +29,6 @@ import {
 import { fakeTimeSettings } from "../../__test_support__/fake_time_settings";
 import { Actions } from "../../constants";
 import { Path } from "../../internal_urls";
-import { push } from "../../history";
 import { CurveType } from "../../curves/templates";
 
 describe("<EditPlantStatus />", () => {
@@ -362,7 +361,7 @@ describe("<PlantSlugBulkUpdate />", () => {
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SET_SLUG_BULK, payload: "slug",
     });
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.cropSearch());
   });
 
   it("updates plant slug", () => {
diff --git a/frontend/plants/__tests__/plant_info_test.tsx b/frontend/plants/__tests__/plant_info_test.tsx
index c0f1f760e0..6f0846dd13 100644
--- a/frontend/plants/__tests__/plant_info_test.tsx
+++ b/frontend/plants/__tests__/plant_info_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.plants(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({
   destroy: jest.fn(),
   save: jest.fn(),
@@ -16,13 +9,13 @@ import { RawPlantInfo as PlantInfo } from "../plant_info";
 import { mount, shallow } from "enzyme";
 import { fakePlant } from "../../__test_support__/fake_state/resources";
 import { EditPlantInfoProps } from "../../farm_designer/interfaces";
-import { push } from "../../history";
 import { fakeTimeSettings } from "../../__test_support__/fake_time_settings";
 import { edit, save, destroy } from "../../api/crud";
 import { DesignerPanelHeader } from "../../farm_designer/designer_panel";
 import {
   fakeBotSize, fakeMovementState,
 } from "../../__test_support__/fake_bot_data";
+import { Path } from "../../internal_urls";
 
 describe("<PlantInfo />", () => {
   const fakeProps = (): EditPlantInfoProps => ({
@@ -53,30 +46,30 @@ describe("<PlantInfo />", () => {
   });
 
   it("renders: no plant", () => {
-    mockPath = Path.mock(Path.plants("nope"));
+    location.pathname = Path.mock(Path.plants("nope"));
     const p = fakeProps();
     p.findPlant = () => undefined;
     const wrapper = mount(<PlantInfo {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
   });
 
   it("renders: no plant template", () => {
-    mockPath = Path.mock(Path.plantTemplates("nope"));
+    location.pathname = Path.mock(Path.plantTemplates("nope"));
     const p = fakeProps();
     p.findPlant = () => undefined;
     const wrapper = mount(<PlantInfo {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const p = fakeProps();
     p.findPlant = () => undefined;
     const wrapper = mount(<PlantInfo {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("redirecting...");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("has link to plants", () => {
@@ -88,7 +81,7 @@ describe("<PlantInfo />", () => {
   });
 
   it("gets plant id", () => {
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
     const p = fakeProps();
     p.openedSavedGarden = undefined;
     const wrapper = mount<PlantInfo>(<PlantInfo {...p} />);
@@ -96,7 +89,7 @@ describe("<PlantInfo />", () => {
   });
 
   it("gets template id", () => {
-    mockPath = Path.mock(Path.plantTemplates(2));
+    location.pathname = Path.mock(Path.plantTemplates(2));
     const p = fakeProps();
     p.openedSavedGarden = 1;
     const wrapper = mount<PlantInfo>(<PlantInfo {...p} />);
@@ -104,7 +97,7 @@ describe("<PlantInfo />", () => {
   });
 
   it("handles missing plant id", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     p.openedSavedGarden = undefined;
     const wrapper = mount<PlantInfo>(<PlantInfo {...p} />);
@@ -127,7 +120,7 @@ describe("<PlantInfo />", () => {
   });
 
   it("saves", () => {
-    mockPath = Path.mock(Path.plants(1));
+    location.pathname = Path.mock(Path.plants(1));
     const p = fakeProps();
     const plant = fakePlant();
     plant.body.id = 1;
@@ -138,7 +131,7 @@ describe("<PlantInfo />", () => {
   });
 
   it("doesn't save", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const p = fakeProps();
     const plant = fakePlant();
     plant.body.id = 1;
diff --git a/frontend/plants/__tests__/plant_inventory_item_test.tsx b/frontend/plants/__tests__/plant_inventory_item_test.tsx
index 3761195347..ae41ddf94e 100644
--- a/frontend/plants/__tests__/plant_inventory_item_test.tsx
+++ b/frontend/plants/__tests__/plant_inventory_item_test.tsx
@@ -1,12 +1,5 @@
 jest.mock("../../open_farm/cached_crop", () => ({
-  maybeGetCachedPlantIcon: jest.fn(),
-}));
-
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.plants());
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
+  maybeGetCachedPlantIcon: jest.fn((_, __, x) => x("icon")),
 }));
 
 jest.mock("../../farm_designer/map/actions", () => ({
@@ -24,12 +17,12 @@ import { shallow, mount } from "enzyme";
 import {
   fakePlant, fakePlantTemplate,
 } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { maybeGetCachedPlantIcon } from "../../open_farm/cached_crop";
 import {
   mapPointClickAction, setHoveredPlant, selectPoint,
 } from "../../farm_designer/map/actions";
 import moment from "moment";
+import { Path } from "../../internal_urls";
 
 describe("<PlantInventoryItem />", () => {
   const fakeProps = (): PlantInventoryItemProps => ({
@@ -76,13 +69,13 @@ describe("<PlantInventoryItem />", () => {
   });
 
   it("selects plant", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
     expect(selectPoint).toHaveBeenCalledWith([p.plant.uuid]);
-    expect(push).toHaveBeenCalledWith(Path.plants(p.plant.body.id));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants(p.plant.body.id));
   });
 
   it("handles missing plant id", () => {
@@ -91,46 +84,42 @@ describe("<PlantInventoryItem />", () => {
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(selectPoint).toHaveBeenCalledWith([p.plant.uuid]);
-    expect(push).toHaveBeenCalledWith(Path.plants("ERR_NO_PLANT_ID"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants("ERR_NO_PLANT_ID"));
   });
 
   it("removes item in box select mode", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     const p = fakeProps();
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("click");
-    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+    expect(mapPointClickAction).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.any(Function),
       p.plant.uuid);
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(setHoveredPlant).toHaveBeenCalledWith(undefined, "");
   });
 
   it("selects plant template", () => {
-    mockPath = Path.mock(Path.plants());
+    location.pathname = Path.mock(Path.plants());
     const p = fakeProps();
     p.plant = fakePlantTemplate();
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(selectPoint).toHaveBeenCalledWith([p.plant.uuid]);
-    expect(push).toHaveBeenCalledWith(
+    expect(mockNavigate).toHaveBeenCalledWith(
       Path.savedGardens(`templates/${p.plant.body.id}`));
   });
 
-  it("gets cached icon", () => {
-    const wrapper =
-      mount<PlantInventoryItem>(<PlantInventoryItem {...fakeProps()} />);
+  it("gets and sets cached icon", () => {
+    const p = fakeProps();
+    const wrapper = mount(<PlantInventoryItem {...p} />);
     const img = wrapper.find("img");
     img.simulate("load");
     expect(maybeGetCachedPlantIcon).toHaveBeenCalledWith("strawberry",
       img.instance(), expect.any(Function));
-  });
-
-  it("sets icon", () => {
-    const wrapper =
-      mount<PlantInventoryItem>(<PlantInventoryItem {...fakeProps()} />);
-    expect(wrapper.state().icon).toEqual("");
-    wrapper.instance().updateStateIcon("fake icon");
-    expect(wrapper.state().icon).toEqual("fake icon");
+    wrapper.simulate("mouseEnter");
+    expect(setHoveredPlant).toHaveBeenCalledWith(p.plant.uuid, "icon");
   });
 });
 
diff --git a/frontend/plants/__tests__/plant_inventory_test.tsx b/frontend/plants/__tests__/plant_inventory_test.tsx
index 0e19613ee1..009aa7e4bf 100644
--- a/frontend/plants/__tests__/plant_inventory_test.tsx
+++ b/frontend/plants/__tests__/plant_inventory_test.tsx
@@ -2,11 +2,6 @@ jest.mock("../../open_farm/cached_crop", () => ({
   maybeGetCachedPlantIcon: jest.fn(),
 }));
 
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => Path.mock(Path.plants()).split("/"),
-}));
-
 jest.mock("../../point_groups/actions", () => ({
   createGroup: jest.fn(),
 }));
@@ -38,7 +33,6 @@ import {
 import { fakeState } from "../../__test_support__/fake_state";
 import { SearchField } from "../../ui/search_field";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import { createGroup } from "../../point_groups/actions";
 import { DEFAULT_CRITERIA } from "../../point_groups/criteria/interfaces";
 import { deletePoints } from "../../api/delete_points";
@@ -119,28 +113,33 @@ describe("<PlantInventory />", () => {
 
   it("navigates to group", () => {
     const wrapper = shallow<Plants>(<Plants {...fakeProps()} />);
-    wrapper.instance().navigate(1)();
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    wrapper.instance().navigate = jest.fn();
+    wrapper.instance().navigateById(1)();
+    expect(wrapper.instance().navigate).toHaveBeenCalledWith(Path.groups(1));
   });
 
   it("adds new group", () => {
     const wrapper = shallow(<Plants {...fakeProps()} />);
     wrapper.find(PanelSection).first().props().addNew();
     expect(createGroup).toHaveBeenCalledWith({
-      criteria: { ...DEFAULT_CRITERIA, string_eq: { pointer_type: ["Plant"] } }
+      criteria: { ...DEFAULT_CRITERIA, string_eq: { pointer_type: ["Plant"] } },
+      navigate: expect.anything(),
     });
   });
 
   it("adds new saved garden", () => {
-    const wrapper = shallow(<Plants {...fakeProps()} />);
+    const wrapper = shallow<Plants>(<Plants {...fakeProps()} />);
+    wrapper.instance().navigate = jest.fn();
     wrapper.find(PanelSection).at(1).props().addNew();
-    expect(push).toHaveBeenCalledWith(Path.savedGardens("add"));
+    expect(wrapper.instance().navigate).toHaveBeenCalledWith(
+      Path.savedGardens("add"));
   });
 
   it("adds new plant", () => {
-    const wrapper = shallow(<Plants {...fakeProps()} />);
+    const wrapper = shallow<Plants>(<Plants {...fakeProps()} />);
+    wrapper.instance().navigate = jest.fn();
     wrapper.find(PanelSection).last().props().addNew();
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(wrapper.instance().navigate).toHaveBeenCalledWith(Path.cropSearch());
   });
 
   it("deletes all plants", () => {
@@ -189,13 +188,14 @@ describe("<PlantInventory />", () => {
   it("navigates to crop search", () => {
     const p = fakeProps();
     const wrapper = mount<Plants>(<Plants {...p} />);
+    wrapper.instance().navigate = jest.fn();
     wrapper.setState({ searchTerm: "mint" });
     const noResult = mount(wrapper.instance().noResult);
     noResult.find("a").first().simulate("click");
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SEARCH_QUERY_CHANGE, payload: "mint",
     });
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(wrapper.instance().navigate).toHaveBeenCalledWith(Path.cropSearch());
   });
 });
 
diff --git a/frontend/plants/__tests__/plant_panel_test.tsx b/frontend/plants/__tests__/plant_panel_test.tsx
index a1d2bfc33c..6f8f25e280 100644
--- a/frontend/plants/__tests__/plant_panel_test.tsx
+++ b/frontend/plants/__tests__/plant_panel_test.tsx
@@ -17,7 +17,6 @@ import {
 import { shallow, mount } from "enzyme";
 import { FormattedPlantInfo } from "../map_state_to_props";
 import { clickButton } from "../../__test_support__/helpers";
-import { push } from "../../history";
 import moment from "moment";
 import { fakeTimeSettings } from "../../__test_support__/fake_time_settings";
 import {
@@ -119,7 +118,7 @@ describe("<PlantPanel />", () => {
     p.info.id = 1;
     const wrapper = mount(<PlantPanel {...p} />);
     wrapper.find(".fa-pencil").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.cropSearch());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.cropSearch());
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SET_PLANT_TYPE_CHANGE_ID, payload: 1,
     });
diff --git a/frontend/plants/__tests__/select_plants_test.tsx b/frontend/plants/__tests__/select_plants_test.tsx
index cf9c5ec957..343f5f209d 100644
--- a/frontend/plants/__tests__/select_plants_test.tsx
+++ b/frontend/plants/__tests__/select_plants_test.tsx
@@ -1,9 +1,3 @@
-let mockPath = "";
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/"))
-}));
-
 let mockDestroy = jest.fn(() => Promise.resolve());
 jest.mock("../../api/crud", () => ({ destroy: mockDestroy }));
 
@@ -15,11 +9,13 @@ jest.mock("../../farm_designer/map/layers/plants/plant_actions", () => ({
 
 import React from "react";
 import { mount, shallow } from "enzyme";
+import { render, screen, fireEvent } from "@testing-library/react";
 import {
   RawSelectPlants as SelectPlants, SelectPlantsProps, mapStateToProps,
   getFilteredPoints, GetFilteredPointsProps, validPointTypes, SelectModeLink,
   pointGroupSubset,
   uncategorizedGroupSubset,
+  SelectModeLinkProps,
 } from "../select_plants";
 import {
   fakePlant, fakePoint, fakeWeed, fakeToolSlot, fakeTool,
@@ -37,7 +33,6 @@ import { mockDispatch } from "../../__test_support__/fake_dispatch";
 import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
-import { push } from "../../history";
 import { POINTER_TYPES } from "../../point_groups/criteria/interfaces";
 import { fakeToolTransformProps } from "../../__test_support__/fake_tool_info";
 import { SpecialStatus } from "farmbot";
@@ -47,7 +42,7 @@ import { Path } from "../../internal_urls";
 
 describe("<SelectPlants />", () => {
   beforeEach(() => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
   });
 
   function fakeProps(): SelectPlantsProps {
@@ -211,7 +206,8 @@ describe("<SelectPlants />", () => {
   it("selects all", () => {
     const p = fakeProps();
     const wrapper = mount(<SelectPlants {...p} />);
-    clickButton(wrapper, 2, "select all");
+    const button = wrapper.find('[title="Select all"]');
+    clickButton(button, 0, "select all");
     expect(p.dispatch).toHaveBeenCalledWith(
       { payload: ["plant.1", "plant.2"], type: Actions.SELECT_POINT });
   });
@@ -219,32 +215,12 @@ describe("<SelectPlants />", () => {
   it("selects none", () => {
     const p = fakeProps();
     const wrapper = mount(<SelectPlants {...p} />);
-    clickButton(wrapper, 1, "select none");
+    const button = wrapper.find('[title="Select none"]');
+    clickButton(button, 0, "select none");
     expect(p.dispatch).toHaveBeenCalledWith(
       { payload: undefined, type: Actions.SELECT_POINT });
   });
 
-  it("toggles more selection options", () => {
-    const p = fakeProps();
-    const wrapper = mount<SelectPlants>(<SelectPlants {...p} />);
-    expect(wrapper.state().moreSelections).toEqual(false);
-    expect(wrapper.find(".more-content").first().props().hidden).toBeTruthy();
-    wrapper.find(".more-button").first().simulate("click");
-    expect(wrapper.text().toLowerCase()).toContain("curve");
-    expect(wrapper.state().moreSelections).toEqual(true);
-    expect(wrapper.find(".more-content").first().props().hidden).toBeFalsy();
-  });
-
-  it("toggles more actions", () => {
-    const p = fakeProps();
-    const wrapper = mount<SelectPlants>(<SelectPlants {...p} />);
-    expect(wrapper.state().moreActions).toEqual(false);
-    expect(wrapper.find(".more-content").last().props().hidden).toBeTruthy();
-    wrapper.find(".more-button").last().simulate("click");
-    expect(wrapper.state().moreActions).toEqual(true);
-    expect(wrapper.find(".more-content").last().props().hidden).toBeFalsy();
-  });
-
   it("selects group items", () => {
     const p = fakeProps();
     p.selected = undefined;
@@ -497,9 +473,21 @@ describe("uncategorizedGroupSubset()", () => {
 });
 
 describe("<SelectModeLink />", () => {
+  const fakeProps = (): SelectModeLinkProps => ({
+    dispatch: jest.fn(),
+  });
+
   it("navigates to panel", () => {
-    const wrapper = shallow(<SelectModeLink />);
-    wrapper.find("button").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.plants("select"));
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    render(<SelectModeLink {...p} />);
+    const button = screen.getByTitle("open point select panel");
+    fireEvent.click(button);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants("select"));
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN,
+      payload: true,
+    });
   });
 });
diff --git a/frontend/plants/add_plant.tsx b/frontend/plants/add_plant.tsx
index 84ff2dc78b..49c0b78bab 100644
--- a/frontend/plants/add_plant.tsx
+++ b/frontend/plants/add_plant.tsx
@@ -26,7 +26,7 @@ export const mapStateToProps = (props: Everything): AddPlantProps => ({
 
 interface APDProps {
   svgIcon: string | undefined;
-  children?: React.ReactChild;
+  children?: React.ReactNode;
 }
 
 const AddPlantDescription = ({ svgIcon, children }: APDProps) =>
@@ -90,3 +90,5 @@ export class RawAddPlant extends React.Component<AddPlantProps, {}> {
 }
 
 export const AddPlant = connect(mapStateToProps)(RawAddPlant);
+// eslint-disable-next-line import/no-default-export
+export default AddPlant;
diff --git a/frontend/plants/crop_catalog.tsx b/frontend/plants/crop_catalog.tsx
index 57eb5d555a..8f0f05b665 100644
--- a/frontend/plants/crop_catalog.tsx
+++ b/frontend/plants/crop_catalog.tsx
@@ -120,3 +120,5 @@ export class RawCropCatalog extends React.Component<CropCatalogProps, {}> {
 }
 
 export const CropCatalog = connect(mapStateToProps)(RawCropCatalog);
+// eslint-disable-next-line import/no-default-export
+export default CropCatalog;
diff --git a/frontend/plants/crop_info.tsx b/frontend/plants/crop_info.tsx
index ec7eaf6a66..6edf9b2a86 100644
--- a/frontend/plants/crop_info.tsx
+++ b/frontend/plants/crop_info.tsx
@@ -82,11 +82,11 @@ const shortenTitle = (title: string) => {
 
 /** Basic field: value display for OpenFarm crop properties. */
 const InfoField = (props: InfoFieldProps) =>
-  <li>
+  <li className="row half-gap grid-exp-3 align-baseline">
     <span>{EMOJI[props.title]}</span>
-    <p>
+    <label>
       {t(startCase(shortenTitle(props.title)))}:
-    </p>
+    </label>
     <div className={"crop-info-field-data"}>
       {props.children}
     </div>
@@ -156,7 +156,7 @@ interface CropInfoListProps {
 /** Display crop properties from OpenFarm. */
 const CropInfoList = (props: CropInfoListProps) => {
   return <div className="object-list">
-    <ul>
+    <ul className="grid">
       {chain(props.result.crop)
         .omit(OMITTED_PROPERTIES)
         .toPairs()
@@ -172,33 +172,35 @@ const Companions = (props: CropInfoListProps) => {
   const { result, dispatch, openfarmCropFetch } = props;
   if (result.companions.length == 0) { return <div />; }
   return <InfoField title={"companions"}>
-    {result.companions.map((companion, index) =>
-      <Link key={companion.slug}
-        className={"companion"}
-        onClick={() => {
-          openfarmCropFetch(companion.slug)(dispatch);
-          unselectPlant(dispatch)();
-          props.selectMostUsedCurves(companion.slug);
-        }}
-        onDragStart={() => {
-          dispatch({
-            type: Actions.SET_COMPANION_INDEX,
-            payload: index,
-          });
-        }}
-        onDragEnd={() => {
-          setTimeout(() => dispatch({
-            type: Actions.SET_COMPANION_INDEX,
-            payload: undefined,
-          }), 500);
-        }}
-        to={Path.cropSearch(companion.slug)}>
-        <img
-          src={svgToUrl(companion.svg_icon)}
-          width={20}
-          height={20} />
-        <p>{companion.name}</p>
-      </Link>)}
+    <div className="crop-companions">
+      {result.companions.map((companion, index) =>
+        <Link key={companion.slug}
+          className={"companion"}
+          onClick={() => {
+            openfarmCropFetch(companion.slug)(dispatch);
+            unselectPlant(dispatch)();
+            props.selectMostUsedCurves(companion.slug);
+          }}
+          onDragStart={() => {
+            dispatch({
+              type: Actions.SET_COMPANION_INDEX,
+              payload: index,
+            });
+          }}
+          onDragEnd={() => {
+            setTimeout(() => dispatch({
+              type: Actions.SET_COMPANION_INDEX,
+              payload: undefined,
+            }), 500);
+          }}
+          to={Path.cropSearch(companion.slug)}>
+          <img
+            src={svgToUrl(companion.svg_icon)}
+            width={20}
+            height={20} />
+          <p>{companion.name}</p>
+        </Link>)}
+    </div>
   </InfoField>;
 };
 
@@ -394,7 +396,7 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
           svgIcon={svgToUrl(result.crop.svg_icon)} />
         <Popover portalClassName={"dark-portal"}
           position={Position.BOTTOM_RIGHT}
-          target={<button className={"plus-grid-btn transparent-button light"}>
+          target={<button className={"plus-grid-btn fb-button clear"}>
             + {t("grid")}
           </button>}
           content={<div className={"grid-popup-content"}>
@@ -419,7 +421,7 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
             openfarmCropFetch={this.props.openfarmCropFetch} />
           {DevSettings.futureFeaturesEnabled() &&
             <EditOnOpenFarm slug={result.crop.slug} />}
-          <div className={"plant-stage-selection"}>
+          <div className={"row grid-2-col"}>
             <label className="stage">{t("status")}</label>
             <FBSelect
               list={PLANT_STAGE_LIST()}
@@ -431,7 +433,7 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
                 payload: ddi.value,
               })} />
           </div>
-          <div className={"planted-at-selection"}>
+          <div className={"row grid-2-col"}>
             <label className="planted-at">{t("start date")}</label>
             <BlurableInput
               type="date"
@@ -482,3 +484,5 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
 }
 
 export const CropInfo = connect(mapStateToProps)(RawCropInfo);
+// eslint-disable-next-line import/no-default-export
+export default CropInfo;
diff --git a/frontend/plants/curve_info.tsx b/frontend/plants/curve_info.tsx
index 9210262b7e..777c8b78e6 100644
--- a/frontend/plants/curve_info.tsx
+++ b/frontend/plants/curve_info.tsx
@@ -16,7 +16,7 @@ import { FormattedPlantInfo } from "./map_state_to_props";
 import { DesignerState } from "../farm_designer/interfaces";
 
 export const AllCurveInfo = (props: AllCurveInfoProps) => {
-  return <div className={"all-curve-info"}>
+  return <div className={"all-curve-info grid"}>
     {[CurveType.water, CurveType.spread, CurveType.height].map(curveType => {
       return <CurveInfo key={curveType}
         dispatch={props.dispatch}
@@ -38,7 +38,7 @@ export const CurveInfo = (props: CurveInfoProps) => {
   const { plant, onChange, curve, curves, plants, curveType } = props;
   const [hovered, setHovered] = React.useState<string | undefined>(undefined);
   return <div className={"crop-curve-info"}>
-    <div className={"active-curve-name"}>
+    <div className={"active-curve-name row grid-2-col"}>
       <label>{t(CURVE_TYPES()[props.curveType])}</label>
       <FBSelect key={curve?.uuid}
         list={curvesDropdownList({ curves, curveType, plants, plant })}
diff --git a/frontend/plants/edit_plant_status.tsx b/frontend/plants/edit_plant_status.tsx
index e65e1532a8..7f363bffd6 100644
--- a/frontend/plants/edit_plant_status.tsx
+++ b/frontend/plants/edit_plant_status.tsx
@@ -17,7 +17,7 @@ import { capitalize, mean, round, startCase } from "lodash";
 import { TimeSettings } from "../interfaces";
 import { Link } from "../link";
 import { Path } from "../internal_urls";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { Actions } from "../constants";
 import { CurveType } from "../curves/templates";
 import { curveToDdi, CURVE_KEY_LOOKUP } from "./curve_info";
@@ -92,11 +92,14 @@ const getUpdateByPlantStage = (plant_stage: PlantStage): PlantOptions => {
 /** Select a `plant_stage` for a plant. */
 export function EditPlantStatus(props: EditPlantStatusProps) {
   const { plantStatus, updatePlant, uuid } = props;
-  return <FBSelect
-    list={PLANT_STAGE_LIST()}
-    selectedItem={PLANT_STAGE_DDI_LOOKUP()[plantStatus]}
-    onChange={ddi =>
-      updatePlant(uuid, getUpdateByPlantStage(ddi.value as PlantStage))} />;
+  return <div className="row grid-2-col">
+    <label>{t("Status")}</label>
+    <FBSelect
+      list={PLANT_STAGE_LIST()}
+      selectedItem={PLANT_STAGE_DDI_LOOKUP()[plantStatus]}
+      onChange={ddi =>
+        updatePlant(uuid, getUpdateByPlantStage(ddi.value as PlantStage))} />
+  </div>;
 }
 
 export interface BulkUpdateBaseProps {
@@ -111,7 +114,7 @@ export interface PlantStatusBulkUpdateProps extends BulkUpdateBaseProps {
 
 /** Update `plant_stage` for multiple plants at once. */
 export const PlantStatusBulkUpdate = (props: PlantStatusBulkUpdateProps) =>
-  <div className="plant-status-bulk-update">
+  <div className="plant-status-bulk-update row grid-2-col">
     <p>{t("Update status to")}</p>
     <FBSelect
       key={JSON.stringify(props.selected)}
@@ -151,7 +154,7 @@ export const PlantDateBulkUpdate = (props: PlantDateBulkUpdateProps) => {
     props.selected.includes(point.uuid) && point.kind === "Point" &&
     point.body.pointer_type == "Plant")
     .map((p: TaggedPlantPointer) => p);
-  return <div className={"plant-date-bulk-update"}>
+  return <div className={"plant-date-bulk-update row grid-2-col"}>
     <p>{t("Update start to")}</p>
     <BlurableInput
       type="date"
@@ -181,7 +184,7 @@ export const PointSizeBulkUpdate = (props: BulkUpdateBaseProps) => {
     .map((p: TaggedPlantPointer | TaggedWeedPointer | TaggedGenericPointer) => p);
   const averageSize = round(mean(points.map(p => p.body.radius)));
   const [radius, setRadius] = React.useState("" + (averageSize || 25));
-  return <div className={"point-size-bulk-update"}>
+  return <div className={"point-size-bulk-update row grid-2-col"}>
     <p>{t("Update radius to")}</p>
     <input
       value={radius}
@@ -208,7 +211,7 @@ export const PlantDepthBulkUpdate = (props: BulkUpdateBaseProps) => {
     .map((p: TaggedPlantPointer) => p);
   const averageDepth = round(mean(points.map(p => p.body.depth)));
   const [depth, setDepth] = React.useState("" + (averageDepth || 0));
-  return <div className={"plant-depth-bulk-update"}>
+  return <div className={"plant-depth-bulk-update row grid-2-col"}>
     <p>{t("Update depth to")}</p>
     <input
       value={depth}
@@ -242,7 +245,7 @@ export const PlantCurveBulkUpdate = (props: PlantCurveBulkUpdateProps) => {
     .map((p: TaggedPlantPointer) => p);
   const curveName = CURVE_TYPES()[props.curveType];
   const curveKey = CURVE_KEY_LOOKUP[props.curveType];
-  return <div className={"plant-curve-bulk-update"}>
+  return <div className={"plant-curve-bulk-update row grid-2-col"}>
     <p>{t("Update {{ curveName }} curve to", { curveName })}</p>
     <FBSelect
       key={JSON.stringify(props.selected)}
@@ -269,7 +272,7 @@ export const PlantCurveBulkUpdate = (props: PlantCurveBulkUpdateProps) => {
 
 /** Update curves for multiple points at once. */
 export const PlantCurvesBulkUpdate = (props: PlantCurvesBulkUpdateProps) => {
-  return <div className={"plant-curves-bulk-update"}>
+  return <div className={"plant-curves-bulk-update grid"}>
     {[CurveType.water, CurveType.spread, CurveType.height].map(curveType =>
       <PlantCurveBulkUpdate key={curveType} {...props} curveType={curveType} />)}
   </div>;
@@ -281,7 +284,7 @@ export const PointColorBulkUpdate = (props: BulkUpdateBaseProps) => {
     props.selected.includes(point.uuid) && point.kind === "Point" &&
     point.body.pointer_type != "ToolSlot")
     .map((p: TaggedWeedPointer | TaggedGenericPointer) => p);
-  return <div className={"point-color-bulk-update"}>
+  return <div className={"point-color-bulk-update row grid-2-col"}>
     <p>{t("Update color to")}</p>
     <ColorPicker
       current={"green"}
@@ -308,37 +311,40 @@ export const PlantSlugBulkUpdate = (props: PlantSlugBulkUpdateProps) => {
     point.body.pointer_type == "Plant")
     .map((p: TaggedPlantPointer) => p);
   const slug = props.bulkPlantSlug || plants[0]?.body.openfarm_slug;
-  return <div className={"plant-slug-bulk-update"}>
+  const navigate = useNavigate();
+  return <div className={"plant-slug-bulk-update row grid-2-col"}>
     <p>{t("Update type to")}</p>
-    <Link
-      title={t("View crop info")}
-      to={Path.cropSearch(slug)}>
-      {startCase(slug)}
-    </Link>
-    <i className={"fa fa-pencil fb-icon-button"}
-      onClick={() => {
-        props.dispatch({ type: Actions.SET_SLUG_BULK, payload: slug });
-        push(Path.cropSearch());
-      }} />
-    <button className={"fb-button green"}
-      onClick={() => {
-        if (slug && plants.length > 0 && confirm(
-          t("Change crop type to {{ slug }} for {{ num }} plants?", {
-            slug,
-            num: plants.length,
-          }))) {
-          plants.map(plant => {
-            props.dispatch(edit(plant, {
-              openfarm_slug: slug,
-              name: capitalize(slug).replace(/-/g, " "),
-            }));
-            props.dispatch(save(plant.uuid));
-          });
-          props.dispatch({ type: Actions.SET_SLUG_BULK, payload: undefined });
-        }
-      }}>
-      {t("apply")}
-    </button>
+    <div>
+      <Link
+        title={t("View crop info")}
+        to={Path.cropSearch(slug)}>
+        {startCase(slug)}
+      </Link>
+      <i className={"fa fa-pencil fb-icon-button"}
+        onClick={() => {
+          props.dispatch({ type: Actions.SET_SLUG_BULK, payload: slug });
+          navigate(Path.cropSearch());
+        }} />
+      <button className={"fb-button green"}
+        onClick={() => {
+          if (slug && plants.length > 0 && confirm(
+            t("Change crop type to {{ slug }} for {{ num }} plants?", {
+              slug,
+              num: plants.length,
+            }))) {
+            plants.map(plant => {
+              props.dispatch(edit(plant, {
+                openfarm_slug: slug,
+                name: capitalize(slug).replace(/-/g, " "),
+              }));
+              props.dispatch(save(plant.uuid));
+            });
+            props.dispatch({ type: Actions.SET_SLUG_BULK, payload: undefined });
+          }
+        }}>
+        {t("apply")}
+      </button>
+    </div>
   </div>;
 };
 
diff --git a/frontend/plants/grid/__tests__/plant_grid_test.tsx b/frontend/plants/grid/__tests__/plant_grid_test.tsx
index 329563ede5..4e7e40961e 100644
--- a/frontend/plants/grid/__tests__/plant_grid_test.tsx
+++ b/frontend/plants/grid/__tests__/plant_grid_test.tsx
@@ -200,8 +200,8 @@ describe("<PlantGrid />", () => {
     const p = fakeProps();
     const wrapper = mount<PlantGrid>(<PlantGrid {...p} />);
     expect(wrapper.state().offsetPacking).toBeFalsy();
-    wrapper.find(".grid-planting-toggle").first().find("button")
-      .simulate("click");
+    wrapper.find('[title="toggle packing method"]')
+      .first().simulate("click");
     expect(wrapper.state().offsetPacking).toBeTruthy();
     expect(wrapper.state().grid.spacingH).toEqual(217);
     expect(init).toHaveBeenCalledTimes(6);
@@ -212,8 +212,8 @@ describe("<PlantGrid />", () => {
     const wrapper = mount<PlantGrid>(<PlantGrid {...p} />);
     wrapper.setState({ offsetPacking: true });
     expect(wrapper.state().offsetPacking).toBeTruthy();
-    wrapper.find(".grid-planting-toggle").first().find("button")
-      .simulate("click");
+    wrapper.find('[title="toggle packing method"]')
+      .first().simulate("click");
     expect(wrapper.state().offsetPacking).toBeFalsy();
     expect(wrapper.state().grid.spacingH).toEqual(250);
     expect(init).toHaveBeenCalledTimes(6);
@@ -224,8 +224,8 @@ describe("<PlantGrid />", () => {
     p.openfarm_slug = undefined;
     const wrapper = mount<PlantGrid>(<PlantGrid {...p} />);
     expect(wrapper.state().cameraView).toBeFalsy();
-    wrapper.find(".grid-planting-toggle").at(1).find("button")
-      .simulate("click");
+    wrapper.find('[title="show camera view area"]')
+      .first().simulate("click");
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SHOW_CAMERA_VIEW_POINTS,
       payload: wrapper.state().gridId,
@@ -239,8 +239,8 @@ describe("<PlantGrid />", () => {
     p.openfarm_slug = undefined;
     const wrapper = mount<PlantGrid>(<PlantGrid {...p} />);
     wrapper.setState({ cameraView: true });
-    wrapper.find(".grid-planting-toggle").at(1).find("button")
-      .simulate("click");
+    wrapper.find('[title="show camera view area"]')
+      .first().simulate("click");
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SHOW_CAMERA_VIEW_POINTS,
       payload: undefined,
@@ -253,7 +253,8 @@ describe("<PlantGrid />", () => {
     const p = fakeProps();
     const wrapper = mount<PlantGrid>(<PlantGrid {...p} />);
     wrapper.setState({ autoPreview: true });
-    wrapper.find(".grid-planting-toggle").at(1).find("button").simulate("click");
+    wrapper.find('[title="automatically update preview"]')
+      .first().simulate("click");
     expect(wrapper.state().autoPreview).toBeFalsy();
   });
 
@@ -261,7 +262,8 @@ describe("<PlantGrid />", () => {
     const p = fakeProps();
     const wrapper = mount<PlantGrid>(<PlantGrid {...p} />);
     wrapper.setState({ autoPreview: false });
-    wrapper.find(".grid-planting-toggle").at(1).find("button").simulate("click");
+    wrapper.find('[title="automatically update preview"]')
+      .first().simulate("click");
     expect(wrapper.state().autoPreview).toBeTruthy();
   });
 });
diff --git a/frontend/plants/grid/grid_input.tsx b/frontend/plants/grid/grid_input.tsx
index adb2cc118a..5bc550599c 100644
--- a/frontend/plants/grid/grid_input.tsx
+++ b/frontend/plants/grid/grid_input.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {
   PlantGridKey, GridInputProps, InputCellProps,
 } from "./interfaces";
-import { Col, Row } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { UseCurrentLocation } from "../../tools/tool_slot_edit_components";
 
@@ -26,7 +26,7 @@ export const getLabel = (
 export function InputCell(props: InputCellProps) {
   const { gridKey, onChange, grid, preview } = props;
   const [value, setValue] = React.useState("" + grid[gridKey]);
-  return <Col xs={3}>
+  return <div>
     <input name={gridKey} className={gridKey}
       type={"number"}
       value={value}
@@ -38,7 +38,7 @@ export function InputCell(props: InputCellProps) {
           : preview();
       }}
       onChange={e => setValue(e.currentTarget.value)} />
-  </Col>;
+  </div>;
 }
 
 const pairs: [PlantGridKey, PlantGridKey][] = [
@@ -51,25 +51,26 @@ export function GridInput(props: GridInputProps) {
   const { xy_swap } = props;
   const vertical = "fa-arrows-v";
   const horizontal = "fa-arrows-h";
-  return <div className="grid-input">
-    <Row>
-      <Col xsOffset={6} xs={3} className={"grid-axis-label"}>
-        X
+  return <div className="grid">
+    <Row className="grid-planting-grid">
+      <div></div>
+      <div>
+        <label>X</label>
         <i className={`fa ${xy_swap ? vertical : horizontal}`} />
-      </Col>
-      <Col xs={3} className={"grid-axis-label"}>
-        Y
+      </div>
+      <div>
+        <label>Y</label>
         <i className={`fa ${xy_swap ? horizontal : vertical}`} />
-      </Col>
+      </div>
     </Row>
     {pairs.map(([left, right]) =>
-      <Row key={left + right}>
-        <Col xs={6}>
+      <Row key={left + right} className="grid-planting-grid">
+        <div className="row grid-exp-1">
           <label>{getLabel(left, props.itemType)}</label>
           {left == "startX" &&
             <UseCurrentLocation botPosition={props.botPosition}
               onChange={props.onUseCurrentPosition} />}
-        </Col>
+        </div>
         <InputCell
           itemType={props.itemType}
           xy_swap={props.xy_swap}
diff --git a/frontend/plants/grid/plant_grid.tsx b/frontend/plants/grid/plant_grid.tsx
index 6a1449a54c..09f7bdbea0 100644
--- a/frontend/plants/grid/plant_grid.tsx
+++ b/frontend/plants/grid/plant_grid.tsx
@@ -135,7 +135,7 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
     switch (this.state.status) {
       case "clean":
         return <div className={"preview-grid-button"}>
-          <a className={"preview-button"}
+          <a className={"preview-button fb-button clear invert"}
             title={t("Preview")}
             onClick={this.performPreview(true)}>
             {t("Preview")}
@@ -143,18 +143,18 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
         </div>;
       case "dirty":
         return <div className={"save-or-cancel-grid-button"}>
-          <a className={"cancel-button"}
+          <a className={"cancel-button fb-button clear invert"}
             title={t("Cancel")}
             onClick={this.revertPreview({ setStatus: true })}>
             {t("Cancel")}
           </a>
           {this.outdated && this.dirty
-            ? <a className={"update-button"}
+            ? <a className={"update-button fb-button clear invert"}
               title={t("Update preview")}
               onClick={this.performPreview(true)}>
               {t("Update preview")}
             </a>
-            : <a className={"save-button"}
+            : <a className={"save-button fb-button clear invert"}
               title={t("Save")}
               onClick={this.saveGrid}>
               {t("Save")}
@@ -194,7 +194,7 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
             this.setState({ cameraView: !this.state.cameraView },
               this.performPreview());
           }} />}
-      <div className={"grid-planting-toggle"}>
+      <div className={"row grid-exp-1"}>
         <label>{t("auto-update preview")}</label>
         <ToggleButton
           toggleValue={this.state.autoPreview}
@@ -221,7 +221,7 @@ interface ToggleProps {
 }
 
 const HexPackingToggle = (props: ToggleProps) =>
-  <div className={"grid-planting-toggle"}>
+  <div className={"row grid-exp-1"}>
     <label className="packing-method">{t("hexagonal packing")}</label>
     <ToggleButton
       toggleValue={props.value}
@@ -231,7 +231,7 @@ const HexPackingToggle = (props: ToggleProps) =>
   </div>;
 
 const ToggleCameraViewArea = (props: ToggleProps) =>
-  <div className={"grid-planting-toggle"}>
+  <div className={"row grid-exp-1"}>
     <label>{t("camera view area")}</label>
     <ToggleButton
       toggleValue={props.value}
diff --git a/frontend/plants/openfarm_search_results.tsx b/frontend/plants/openfarm_search_results.tsx
index 720fdebddc..27808411e3 100644
--- a/frontend/plants/openfarm_search_results.tsx
+++ b/frontend/plants/openfarm_search_results.tsx
@@ -34,7 +34,7 @@ export interface SearchResultProps {
 
 export class OpenFarmResults extends React.Component<SearchResultProps, {}> {
 
-  get text(): JSX.Element {
+  get text(): React.ReactNode {
     return <p>{`${t(Content.CROP_NOT_FOUND_INTRO)} `}
       <a href={ExternalUrl.OpenFarm.newCrop} target="_blank" rel={"noreferrer"}>
         {t(Content.CROP_NOT_FOUND_LINK)}
@@ -92,6 +92,9 @@ export class OpenFarmResults extends React.Component<SearchResultProps, {}> {
           const image = crop.main_image_path.startsWith("https")
             ? crop.main_image_path
             : FilePath.DEFAULT_ICON;
+          const fallbackImageClass = crop.main_image_path.startsWith("https")
+            ? ""
+            : " fallback-image";
           return <Link
             key={crop.slug}
             draggable={false}
@@ -102,7 +105,7 @@ export class OpenFarmResults extends React.Component<SearchResultProps, {}> {
                 {crop.name}
               </label>
               <div
-                className={"plant-catalog-image"}
+                className={"plant-catalog-image" + fallbackImageClass}
                 style={{ background: `url(${image}) top center no-repeat` }}
                 draggable={false} />
             </div>
diff --git a/frontend/plants/plant_info.tsx b/frontend/plants/plant_info.tsx
index 2372f5670c..429eb0e27f 100644
--- a/frontend/plants/plant_info.tsx
+++ b/frontend/plants/plant_info.tsx
@@ -10,7 +10,7 @@ import {
 import { t } from "../i18next_wrapper";
 import { EditPlantInfoProps, PlantOptions } from "../farm_designer/interfaces";
 import { isFinite } from "lodash";
-import { push } from "../history";
+import { Navigate } from "react-router";
 import { destroy, edit, save } from "../api/crud";
 import { BooleanSetting } from "../session_keys";
 import { Panel } from "../farm_designer/panel_header";
@@ -47,9 +47,10 @@ export class RawPlantInfo extends React.Component<EditPlantInfoProps, {}> {
   fallback = () => {
     const plantsPath = Path.plants();
     const templatePath = Path.plantTemplates();
-    (Path.startsWith(plantsPath) || Path.startsWith(templatePath))
-      && !Path.startsWith(Path.cropSearch()) && push(plantsPath);
     return <DesignerPanel panelName={"plant-info"} panel={Panel.Plants}>
+      {(Path.startsWith(plantsPath) || Path.startsWith(templatePath))
+        && !Path.startsWith(Path.cropSearch()) &&
+        <Navigate to={plantsPath} />}
       <DesignerPanelHeader
         panelName={"plant-info"}
         panel={Panel.Plants}
@@ -76,7 +77,7 @@ export class RawPlantInfo extends React.Component<EditPlantInfoProps, {}> {
         onBack={unselectPlant(this.props.dispatch)}>
         <div className={"panel-header-icon-group"}>
           <i title={t("delete")}
-            className={"fa fa-trash fb-icon-button"}
+            className={"fa fa-trash fb-icon-button invert"}
             onClick={this.destroy(info.uuid)} />
         </div>
       </DesignerPanelHeader>
@@ -106,3 +107,5 @@ export class RawPlantInfo extends React.Component<EditPlantInfoProps, {}> {
 }
 
 export const PlantInfo = connect(mapStateToProps)(RawPlantInfo);
+// eslint-disable-next-line import/no-default-export
+export default PlantInfo;
diff --git a/frontend/plants/plant_inventory.tsx b/frontend/plants/plant_inventory.tsx
index 7315fac020..edfcbfe53f 100644
--- a/frontend/plants/plant_inventory.tsx
+++ b/frontend/plants/plant_inventory.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { PlantInventoryItem } from "./plant_inventory_item";
 import { Everything, PlantsPanelState } from "../interfaces";
-import { Panel, DesignerNavTabs, TAB_COLOR } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { getPlants } from "../farm_designer/state_to_props";
 import { TaggedPlant } from "../farm_designer/map/interfaces";
 import {
@@ -14,7 +14,6 @@ import {
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
 import { SearchField } from "../ui/search_field";
-import { push } from "../history";
 import {
   selectAllActivePoints,
   selectAllPlantPointers,
@@ -34,10 +33,11 @@ import { deletePoints } from "../api/delete_points";
 import { Path } from "../internal_urls";
 import { WebAppNumberSetting } from "../settings/farm_designer_settings";
 import { NumericSetting } from "../session_keys";
-import { Col, Help, Popover, Row } from "../ui";
+import { Help, Popover, Row } from "../ui";
 import {
   GetWebAppConfigValue, getWebAppConfigValue,
 } from "../config_storage/actions";
+import { NavigationContext } from "../routes_helpers";
 
 export interface PlantInventoryProps {
   plants: TaggedPlant[];
@@ -87,7 +87,7 @@ export class RawPlants
           type: Actions.SEARCH_QUERY_CHANGE,
           payload: this.state.searchTerm,
         });
-        push(Path.cropSearch());
+        this.navigate(Path.cropSearch());
         this.props.dispatch({ type: Actions.SET_SLUG_BULK, payload: undefined });
       }}>
         {t("search all crops?")}
@@ -100,7 +100,13 @@ export class RawPlants
       type: Actions.TOGGLE_PLANTS_PANEL_OPTION, payload: section,
     });
 
-  navigate = (id: number | undefined) => () => push(Path.groups(id));
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
+  navigateById = (id: number | undefined) => () => {
+    this.navigate(Path.groups(id));
+  };
 
   render() {
     const { dispatch, plantsPanelState, plants } = this.props;
@@ -114,7 +120,6 @@ export class RawPlants
     const uncategorizedGroups = uncategorizedGroupSubset(this.props.groups);
     const noSearchResults = this.state.searchTerm && filteredPlants.length == 0;
     return <DesignerPanel panelName={"plant-inventory"} panel={Panel.Plants}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Plants} withButton={true}>
         <SearchField nameKey={"plants"}
           searchTerm={this.state.searchTerm}
@@ -123,17 +128,13 @@ export class RawPlants
         <Popover
           position={Position.BOTTOM}
           popoverClassName={"plants-panel-settings-menu"}
-          target={<i className={"fa fa-gear fb-icon-button"} />}
+          target={<i className={"fa fa-gear fb-icon-button invert"} />}
           content={<Row>
-            <Col xs={9}>
-              <label>{t(DeviceSetting.defaultPlantDepth)}</label>
-              <Help text={Content.DEFAULT_PLANT_DEPTH} />
-            </Col>
-            <Col xs={3}>
-              <WebAppNumberSetting dispatch={dispatch}
-                getConfigValue={this.props.getConfigValue}
-                numberSetting={NumericSetting.default_plant_depth} />
-            </Col>
+            <label>{t(DeviceSetting.defaultPlantDepth)}</label>
+            <Help text={Content.DEFAULT_PLANT_DEPTH} />
+            <WebAppNumberSetting dispatch={dispatch}
+              getConfigValue={this.props.getConfigValue}
+              numberSetting={NumericSetting.default_plant_depth} />
           </Row>} />
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"plant"}>
@@ -146,6 +147,7 @@ export class RawPlants
               ...DEFAULT_CRITERIA,
               string_eq: { pointer_type: ["Plant"] },
             },
+            navigate: this.navigate,
           }))}
           addTitle={t("add new group")}
           addClassName={"plus-group"}
@@ -158,7 +160,7 @@ export class RawPlants
                 allPoints={this.props.allPoints}
                 hovered={false}
                 dispatch={dispatch}
-                onClick={this.navigate(group.body.id)}
+                onClick={this.navigateById(group.body.id)}
               />)}
           </div>
           {uncategorizedGroups.length > 0
@@ -172,7 +174,7 @@ export class RawPlants
                 allPoints={this.props.allPoints}
                 hovered={false}
                 dispatch={dispatch}
-                onClick={this.navigate(group.body.id)}
+                onClick={this.navigateById(group.body.id)}
               />)}
           </div>
         </PanelSection>
@@ -180,7 +182,7 @@ export class RawPlants
           panel={Panel.Plants}
           toggleOpen={this.toggleOpen("savedGardens")}
           itemCount={this.props.savedGardens.length}
-          addNew={() => push(Path.savedGardens("add"))}
+          addNew={() => { this.navigate(Path.savedGardens("add")); }}
           addTitle={t("add new saved garden")}
           addClassName={"plus-saved-garden"}
           title={t("Gardens")}>
@@ -191,14 +193,12 @@ export class RawPlants
           toggleOpen={this.toggleOpen("plants")}
           itemCount={plants.length}
           addNew={() => {
-            push(Path.cropSearch());
+            this.navigate(Path.cropSearch());
             dispatch({ type: Actions.SET_SLUG_BULK, payload: undefined });
           }}
           addTitle={t("add plant")}
           addClassName={"plus-plant"}
           title={t("Plants")}
-          extraHeaderTitle={!!this.props.openedSavedGarden &&
-            <i className={"garden-indicator"}>{t("saved garden")}</i>}
           extraHeaderContent={
             !this.props.openedSavedGarden && plantsPanelState.plants &&
             <button className={"fb-button red delete"}
@@ -237,6 +237,8 @@ export class RawPlants
 }
 
 export const Plants = connect(mapStateToProps)(RawPlants);
+// eslint-disable-next-line import/no-default-export
+export default Plants;
 
 export interface PanelSectionProps {
   panel: Panel;
@@ -247,9 +249,9 @@ export interface PanelSectionProps {
   addNew(): void;
   addTitle: string;
   addClassName: string;
-  children: JSX.Element | JSX.Element[];
-  extraHeaderContent?: JSX.Element | false;
-  extraHeaderTitle?: JSX.Element | false;
+  children: React.ReactNode | React.ReactNode[];
+  extraHeaderContent?: React.ReactNode | false;
+  extraHeaderTitle?: React.ReactNode | false;
 }
 
 export const PanelSection = (props: PanelSectionProps) => {
@@ -259,20 +261,21 @@ export const PanelSection = (props: PanelSectionProps) => {
       onClick={props.toggleOpen}>
       <label>{`${props.title} (${props.itemCount})`}</label>
       {props.extraHeaderTitle}
-      <i className={`fa fa-caret-${isOpen ? "up" : "down"}`} />
-      {isOpen && <div
-        onClick={e => {
-          e.stopPropagation();
-          props.addNew();
-        }}
-        className={[
-          "fb-button",
-          `panel-${TAB_COLOR[props.panel]}`,
-          props.addClassName,
-        ].join(" ")}>
-        <i className={"fa fa-plus"} title={props.addTitle} />
-      </div>}
-      {props.extraHeaderContent}
+      <div className="row">
+        {props.extraHeaderContent}
+        {isOpen && <div
+          onClick={e => {
+            e.stopPropagation();
+            props.addNew();
+          }}
+          className={[
+            "fb-button green",
+            props.addClassName,
+          ].join(" ")}>
+          <i className={"fa fa-plus"} title={props.addTitle} />
+        </div>}
+        <i className={`fa fa-caret-${isOpen ? "up" : "down"}`} />
+      </div>
     </div>
     <Collapse isOpen={isOpen}>
       {props.children}
diff --git a/frontend/plants/plant_inventory_item.tsx b/frontend/plants/plant_inventory_item.tsx
index 5fa52be357..6740382e42 100644
--- a/frontend/plants/plant_inventory_item.tsx
+++ b/frontend/plants/plant_inventory_item.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { push } from "../history";
 import { TaggedPlant, Mode } from "../farm_designer/map/interfaces";
 import { unpackUUID } from "../util";
 import { t } from "../i18next_wrapper";
@@ -11,6 +10,7 @@ import { PlantStageAndAge, plantAgeAndStage } from "./map_state_to_props";
 import { getMode } from "../farm_designer/map/util";
 import { isUndefined, round } from "lodash";
 import { FilePath, Path } from "../internal_urls";
+import { useNavigate } from "react-router";
 
 export interface PlantInventoryItemProps {
   plant: TaggedPlant;
@@ -19,71 +19,63 @@ export interface PlantInventoryItemProps {
   distance?: number;
 }
 
-interface PlantInventoryItemState {
-  icon: string;
-}
-
 // The individual plants that show up in the farm designer sub nav.
-export class PlantInventoryItem extends
-  React.Component<PlantInventoryItemProps, PlantInventoryItemState> {
-  state: PlantInventoryItemState = { icon: "" };
-
-  updateStateIcon = (i: string) => this.setState({ icon: i });
+export const PlantInventoryItem = (props: PlantInventoryItemProps) => {
+  const [iconState, setIconState] = React.useState("");
+  const navigate = useNavigate();
 
-  render() {
-    const { plant, dispatch } = this.props;
-    const plantId = (plant.body.id || "ERR_NO_PLANT_ID").toString();
+  const { plant, dispatch } = props;
+  const plantId = (plant.body.id || "ERR_NO_PLANT_ID").toString();
 
-    const toggle = (action: "enter" | "leave") => {
-      const isEnter = action === "enter";
-      const plantUUID = isEnter ? plant.uuid : undefined;
-      const icon = isEnter ? this.state.icon : "";
-      dispatch(setHoveredPlant(plantUUID, icon));
-    };
+  const toggle = (action: "enter" | "leave") => {
+    const isEnter = action === "enter";
+    const plantUUID = isEnter ? plant.uuid : undefined;
+    const icon = isEnter ? iconState : "";
+    dispatch(setHoveredPlant(plantUUID, icon));
+  };
 
-    const click = () => {
-      if (getMode() == Mode.boxSelect) {
-        mapPointClickAction(dispatch, plant.uuid)();
-        toggle("leave");
-      } else {
-        const path =
-          unpackUUID(plant.uuid).kind === "PlantTemplate"
-            ? Path.plantTemplates
-            : Path.plants;
-        push(path(plantId));
-        dispatch(selectPoint([plant.uuid]));
-      }
-    };
+  const click = () => {
+    if (getMode() == Mode.boxSelect) {
+      mapPointClickAction(navigate, dispatch, plant.uuid)();
+      toggle("leave");
+    } else {
+      const path =
+        unpackUUID(plant.uuid).kind === "PlantTemplate"
+          ? Path.plantTemplates
+          : Path.plants;
+      navigate(path(plantId));
+      dispatch(selectPoint([plant.uuid]));
+    }
+  };
 
-    const onLoad = (e: React.SyntheticEvent<HTMLImageElement>) =>
-      maybeGetCachedPlantIcon(slug, e.currentTarget, this.updateStateIcon);
+  const onLoad = (e: React.SyntheticEvent<HTMLImageElement>) =>
+    maybeGetCachedPlantIcon(slug, e.currentTarget, setIconState);
 
-    // Name given from OpenFarm's API.
-    const label = plant.body.name || "Unknown plant";
-    const slug = plant.body.openfarm_slug;
+  // Name given from OpenFarm's API.
+  const label = plant.body.name || "Unknown plant";
+  const slug = plant.body.openfarm_slug;
 
-    return <div
-      className={`plant-search-item ${this.props.hovered ? "hovered" : ""}`}
-      key={plantId}
-      onMouseEnter={() => toggle("enter")}
-      onMouseLeave={() => toggle("leave")}
-      onClick={click}>
-      <img
-        className="plant-search-item-image"
-        src={FilePath.DEFAULT_ICON}
-        onLoad={onLoad} />
-      <span className="plant-search-item-name">
-        {label}
-      </span>
-      <i className="plant-search-item-age">
-        {!isUndefined(this.props.distance)
-          ? `(${plant.body.x}, ${plant.body.y})
-             ${round(this.props.distance)}mm ${t("away")}`
-          : daysOldText(plantAgeAndStage(plant))}
-      </i>
-    </div>;
-  }
-}
+  return <div
+    className={`plant-search-item ${props.hovered ? "hovered" : ""}`}
+    key={plantId}
+    onMouseEnter={() => toggle("enter")}
+    onMouseLeave={() => toggle("leave")}
+    onClick={click}>
+    <img
+      className="plant-search-item-image"
+      src={FilePath.DEFAULT_ICON}
+      onLoad={onLoad} />
+    <span className="plant-search-item-name">
+      {label}
+    </span>
+    <i className="plant-search-item-age">
+      {!isUndefined(props.distance)
+        ? `(${plant.body.x}, ${plant.body.y})
+             ${round(props.distance)}mm ${t("away")}`
+        : daysOldText(plantAgeAndStage(plant))}
+    </i>
+  </div>;
+};
 
 export const daysOldText = ({ age, stage }: PlantStageAndAge) => {
   if (isUndefined(age)) { return "" + stage; }
diff --git a/frontend/plants/plant_panel.tsx b/frontend/plants/plant_panel.tsx
index a2b510602e..3d6c14e6ea 100644
--- a/frontend/plants/plant_panel.tsx
+++ b/frontend/plants/plant_panel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedPlantInfo } from "./map_state_to_props";
-import { push } from "../history";
-import { BlurableInput, Row, Col, Help } from "../ui";
+import { useNavigate } from "react-router";
+import { BlurableInput, Row, Help } from "../ui";
 import {
   PlantStage, TaggedCurve, TaggedFarmwareEnv, TaggedGenericPointer,
   TaggedPlantPointer, Xyz,
@@ -87,10 +87,12 @@ export const EditPlantLocation = (props: EditPlantLocationProps) => {
   });
   return <Row>
     {["x", "y", "z"].map((axis: Xyz) =>
-      <Col xs={4} key={axis}>
-        <label style={{ marginTop: 0 }}>{t("{{axis}} (mm)", { axis })}</label>
-        {axis == "z" && !isUndefined(soilZ) &&
-          <Help text={`${t("soil height at plant location")}: ${soilZ}mm`} />}
+      <div key={axis}>
+        <div className="row grid-exp-2 half-gap">
+          <label style={{ marginTop: 0 }}>{t("{{axis}} (mm)", { axis })}</label>
+          {axis == "z" && !isUndefined(soilZ) &&
+            <Help text={`${t("soil height at plant location")}: ${soilZ}mm`} />}
+        </div>
         <BlurableInput
           type="number"
           value={plantLocation[axis]}
@@ -98,7 +100,7 @@ export const EditPlantLocation = (props: EditPlantLocationProps) => {
           onCommit={e => updatePlant(uuid, {
             [axis]: parseIntInput(e.currentTarget.value)
           })} />
-      </Col>)}
+      </div>)}
   </Row>;
 };
 
@@ -107,18 +109,16 @@ export interface EditPlantRadiusProps extends EditPlantProperty {
 }
 
 export const EditPlantRadius = (props: EditPlantRadiusProps) =>
-  <Row>
-    <Col xs={6}>
-      <label style={{ marginTop: 0 }}>{t("radius (mm)")}</label>
-      <BlurableInput
-        type="number"
-        name="radius"
-        value={props.radius}
-        min={0}
-        onCommit={e => props.updatePlant(props.uuid, {
-          radius: parseIntInput(e.currentTarget.value)
-        })} />
-    </Col>
+  <Row className="grid-2-col">
+    <label style={{ marginTop: 0 }}>{t("radius (mm)")}</label>
+    <BlurableInput
+      type="number"
+      name="radius"
+      value={props.radius}
+      min={0}
+      onCommit={e => props.updatePlant(props.uuid, {
+        radius: parseIntInput(e.currentTarget.value)
+      })} />
   </Row>;
 
 export interface EditPlantDepthProps extends EditPlantProperty {
@@ -126,23 +126,21 @@ export interface EditPlantDepthProps extends EditPlantProperty {
 }
 
 export const EditPlantDepth = (props: EditPlantDepthProps) =>
-  <Row>
-    <Col xs={6}>
-      <label style={{ marginTop: 0 }}>{t("depth (mm)")}</label>
-      <BlurableInput
-        type="number"
-        name="depth"
-        value={props.depth}
-        min={0}
-        onCommit={e => props.updatePlant(props.uuid, {
-          depth: parseIntInput(e.currentTarget.value)
-        })} />
-    </Col>
+  <Row className="grid-2-col">
+    <label style={{ marginTop: 0 }}>{t("depth (mm)")}</label>
+    <BlurableInput
+      type="number"
+      name="depth"
+      value={props.depth}
+      min={0}
+      onCommit={e => props.updatePlant(props.uuid, {
+        depth: parseIntInput(e.currentTarget.value)
+      })} />
   </Row>;
 
 interface ListItemProps {
   name?: string;
-  children: React.ReactChild | React.ReactChild[];
+  children: React.ReactNode;
 }
 
 export const ListItem = (props: ListItemProps) =>
@@ -163,35 +161,36 @@ export function PlantPanel(props: PlantPanelProps) {
   const { slug, plantedAt, daysOld, uuid, plantStatus } = info;
   const { x, y, z } = info;
   const commonProps = { uuid, updatePlant };
+  const navigate = useNavigate();
   return <DesignerPanelContent panelName={"plants"}>
-    <ul>
+    <ul className="grid">
       <ListItem name={t("Plant Type")}>
         <Link
           title={t("View crop info")}
           to={Path.cropSearch(slug)}>
           {startCase(slug)}
         </Link>
-        <i className={"fa fa-pencil fb-icon-button"}
+        <i className={"fa fa-pencil fb-icon-button invert"}
           onClick={() => {
             dispatch({ type: Actions.SET_PLANT_TYPE_CHANGE_ID, payload: info.id });
             dispatch({ type: Actions.SET_SLUG_BULK, payload: undefined });
-            push(Path.cropSearch());
+            navigate(Path.cropSearch());
           }} />
       </ListItem>
       {(timeSettings && !inSavedGarden) &&
         <Row>
-          <Col xs={7}>
+          <div>
             <ListItem name={t("Started")}>
               <EditDatePlanted {...commonProps}
                 datePlanted={plantedAt}
                 timeSettings={timeSettings} />
             </ListItem>
-          </Col>
-          <Col xs={5}>
+          </div>
+          <div>
             <ListItem name={t("Age")}>
               {daysOldText({ age: daysOld, stage: plantStatus })}
             </ListItem>
-          </Col>
+          </div>
         </Row>}
       <ListItem>
         <EditPlantLocation {...commonProps}
@@ -213,7 +212,7 @@ export function PlantPanel(props: PlantPanelProps) {
       {!isUndefined(info.depth) && <ListItem>
         <EditPlantDepth {...commonProps} depth={info.depth} />
       </ListItem>}
-      <ListItem name={t("Status")}>
+      <ListItem>
         {(!inSavedGarden)
           ? <EditPlantStatus {...commonProps} plantStatus={plantStatus} />
           : t(startCase(plantStatus))}
diff --git a/frontend/plants/select_plants.tsx b/frontend/plants/select_plants.tsx
index 9ae1a123e1..bf527099fd 100644
--- a/frontend/plants/select_plants.tsx
+++ b/frontend/plants/select_plants.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { connect } from "react-redux";
 import { Everything, TimeSettings } from "../interfaces";
 import { PlantInventoryItem } from "./plant_inventory_item";
@@ -15,7 +15,7 @@ import {
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
 import { createGroup } from "../point_groups/actions";
-import { PanelColor } from "../farm_designer/panel_header";
+import { PanelColor, setPanelOpen } from "../farm_designer/panel_header";
 import { error } from "../toast/toast";
 import {
   PlantDateBulkUpdate, PlantSlugBulkUpdate, PlantStatusBulkUpdate,
@@ -59,6 +59,7 @@ import { getFbosConfig } from "../resources/getters";
 import {
   getFwHardwareValue, hasUTM,
 } from "../settings/firmware/firmware_hardware_support";
+import { NavigationContext } from "../routes_helpers";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isPointType = (x: any): x is PointType =>
@@ -147,16 +148,12 @@ export interface SelectPlantsProps {
 
 interface SelectPlantsState {
   group_id: number | undefined;
-  moreSelections: boolean;
-  moreActions: boolean;
 }
 
 export class RawSelectPlants
   extends React.Component<SelectPlantsProps, SelectPlantsState> {
   state: SelectPlantsState = {
     group_id: undefined,
-    moreSelections: false,
-    moreActions: false,
   };
 
   componentDidMount() {
@@ -174,6 +171,10 @@ export class RawSelectPlants
 
   get selected() { return this.props.selected || []; }
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   destroySelected = (plantUUIDs: string[] | undefined) => {
     if (plantUUIDs && plantUUIDs.length > 0 &&
       confirm(t("Are you sure you want to delete {{length}} plants?",
@@ -182,7 +183,7 @@ export class RawSelectPlants
         this.props.dispatch(destroy(uuid, true))
           .then(noop, noop);
       });
-      push(Path.plants());
+      this.navigate(Path.plants());
     }
   };
 
@@ -230,11 +231,8 @@ export class RawSelectPlants
       selected: this.selected,
       dispatch: this.props.dispatch,
     };
-    return <div className={["panel-action-buttons",
-      this.state.moreSelections ? "more-select" : "",
-      this.state.moreActions ? "more-action" : "",
-    ].join(" ")}>
-      <div className={"selection-type"}>
+    return <div className={"panel-action-buttons grid"}>
+      <div className={"row grid-2-col"}>
         <label>{t("selection type")}</label>
         <FBSelect key={this.selectionPointType}
           list={POINTER_TYPE_LIST()}
@@ -246,52 +244,53 @@ export class RawSelectPlants
               ddi.value == "All" ? POINTER_TYPES : validPointTypes([ddi.value])));
           }} />
       </div>
-      <div className="button-row group-select">
-        <button className="fb-button gray"
-          title={t("Select none")}
-          onClick={() => {
-            this.setState({ group_id: undefined });
-            this.props.dispatch(selectPoint(undefined));
-          }}>
-          {t("Select none")}
-        </button>
-        <button className="fb-button gray"
-          title={t("Select all")}
-          onClick={() => {
-            this.setState({ group_id: undefined });
-            this.props.dispatch(selectPoint(this.allPointUuids));
-          }}>
-          {t("Select all")}
-        </button>
-        <More className={"more-select"} isOpen={this.state.moreSelections}
-          customText={{
-            more: t("Select all in group"), less: t("Select all in group"),
-          }}
-          toggleOpen={() =>
-            this.setState({ moreSelections: !this.state.moreSelections })}>
+      <div className="row grid-2-col quick-select">
+        <label>{t("Quick select")}</label>
+        <div className="grid">
           <FBSelect key={`${this.selectionPointType}-${this.state.group_id}`}
             list={Object.values(this.groupDDILookup)}
             selectedItem={this.state.group_id
               ? this.groupDDILookup[this.state.group_id]
               : undefined}
-            customNullLabel={t("Select a group")}
+            customNullLabel={t("Select all in group")}
             onChange={this.selectGroup} />
-        </More>
+          <button className="fb-button gray"
+            title={t("Select all")}
+            onClick={() => {
+              this.setState({ group_id: undefined });
+              this.props.dispatch(selectPoint(this.allPointUuids));
+            }}>
+            {t("Select all")}
+          </button>
+          <button className="fb-button gray"
+            title={t("Select none")}
+            onClick={() => {
+              this.setState({ group_id: undefined });
+              this.props.dispatch(selectPoint(undefined));
+            }}>
+            {t("Select none")}
+          </button>
+        </div>
       </div>
-      <label>{t("SELECTION ACTIONS")}</label>
-      <div className="buttons">
-        <button className="fb-button red"
-          title={t("Delete")}
-          onClick={() => this.destroySelected(this.props.selected)}>
-          {t("Delete")}
-        </button>
-        <button className="fb-button dark-blue"
-          title={t("Create group")}
-          onClick={() => !this.props.gardenOpenId
-            ? this.props.dispatch(createGroup({ pointUuids: this.selected }))
-            : error(t(Content.ERROR_PLANT_TEMPLATE_GROUP))}>
-          {t("Create group")}
-        </button>
+      <div className="selection-actions grid">
+        <div className="row grid-exp-1">
+          <label>{t("SELECTION ACTIONS")}</label>
+          <button className="fb-button red"
+            title={t("Delete")}
+            onClick={() => this.destroySelected(this.props.selected)}>
+            {t("Delete")}
+          </button>
+          <button className="fb-button dark-blue"
+            title={t("Create group")}
+            onClick={() => !this.props.gardenOpenId
+              ? this.props.dispatch(createGroup({
+                pointUuids: this.selected,
+                navigate: this.navigate,
+              }))
+              : error(t(Content.ERROR_PLANT_TEMPLATE_GROUP))}>
+            {t("Create group")}
+          </button>
+        </div>
         {unsavedPoints.length > 1 &&
           <button className={"fb-button green"}
             title={t("Save")}
@@ -301,35 +300,29 @@ export class RawSelectPlants
             })}>
             {t("save")}
           </button>}
-      </div>
-      <div className="button-row bulk-update">
-        <More className={"more-action"} isOpen={this.state.moreActions}
-          toggleOpen={() =>
-            this.setState({ moreActions: !this.state.moreActions })}>
-          {(this.selectionPointType == "Plant" ||
-            this.selectionPointType == "Weed") &&
-            <PlantStatusBulkUpdate {...bulkUpdateProps}
-              pointerType={this.selectionPointType} />}
-          {["Plant"].includes(this.selectionPointType) &&
-            <PlantDateBulkUpdate {...bulkUpdateProps}
-              timeSettings={this.props.timeSettings} />}
-          {["Plant", "Weed", "GenericPointer"]
-            .includes(this.selectionPointType) &&
-            <PointSizeBulkUpdate {...bulkUpdateProps} />}
-          {["Plant"]
-            .includes(this.selectionPointType) &&
-            <PlantDepthBulkUpdate {...bulkUpdateProps} />}
-          {["Plant"].includes(this.selectionPointType) &&
-            <PlantCurvesBulkUpdate {...bulkUpdateProps}
-              curves={this.props.curves} />}
-          {["Weed", "GenericPointer"]
-            .includes(this.selectionPointType) &&
-            <PointColorBulkUpdate {...bulkUpdateProps} />}
-          {["Plant"]
-            .includes(this.selectionPointType) &&
-            <PlantSlugBulkUpdate {...bulkUpdateProps}
-              bulkPlantSlug={this.props.bulkPlantSlug} />}
-        </More>
+        {(this.selectionPointType == "Plant" ||
+          this.selectionPointType == "Weed") &&
+          <PlantStatusBulkUpdate {...bulkUpdateProps}
+            pointerType={this.selectionPointType} />}
+        {["Plant"].includes(this.selectionPointType) &&
+          <PlantDateBulkUpdate {...bulkUpdateProps}
+            timeSettings={this.props.timeSettings} />}
+        {["Plant", "Weed", "GenericPointer"]
+          .includes(this.selectionPointType) &&
+          <PointSizeBulkUpdate {...bulkUpdateProps} />}
+        {["Plant"]
+          .includes(this.selectionPointType) &&
+          <PlantDepthBulkUpdate {...bulkUpdateProps} />}
+        {["Plant"].includes(this.selectionPointType) &&
+          <PlantCurvesBulkUpdate {...bulkUpdateProps}
+            curves={this.props.curves} />}
+        {["Weed", "GenericPointer"]
+          .includes(this.selectionPointType) &&
+          <PointColorBulkUpdate {...bulkUpdateProps} />}
+        {["Plant"]
+          .includes(this.selectionPointType) &&
+          <PlantSlugBulkUpdate {...bulkUpdateProps}
+            bulkPlantSlug={this.props.bulkPlantSlug} />}
       </div>
     </div>;
   };
@@ -371,10 +364,10 @@ export class RawSelectPlants
   render() {
     const { dispatch } = this.props;
     return <DesignerPanel panelName={"plant-selection"}
-      panelColor={PanelColor.lightGray}>
+      panelColor={PanelColor.gray}>
       <DesignerPanelHeader
         panelName={"plant-selection"}
-        panelColor={PanelColor.lightGray}
+        panelColor={PanelColor.gray}
         blackText={true}
         title={t("{{length}} {{name}} selected",
           { length: this.selected.length, name: this.itemName })}
@@ -383,11 +376,7 @@ export class RawSelectPlants
         description={Content.BOX_SELECT_DESCRIPTION} />
       <this.ActionButtons />
 
-      <DesignerPanelContent panelName={"plant-selection"}
-        className={[
-          this.state.moreSelections ? "more-select" : "",
-          this.state.moreActions ? "more-action" : "",
-        ].join(" ")}>
+      <DesignerPanelContent panelName={"plant-selection"}>
         {this.selectedPointData.map(p => {
           if (p.kind == "PlantTemplate" || p.body.pointer_type == "Plant") {
             return <PlantInventoryItem
@@ -429,30 +418,8 @@ export class RawSelectPlants
 }
 
 export const SelectPlants = connect(mapStateToProps)(RawSelectPlants);
-
-interface MoreProps {
-  className: string;
-  isOpen: boolean;
-  toggleOpen(): void;
-  customText?: { more: string, less: string };
-  children: JSX.Element | (JSX.Element | false)[];
-}
-
-const More = (props: MoreProps) => {
-  const more = props.customText?.more || t("More");
-  const less = props.customText?.less || t("Less");
-  return <div className={"more"}>
-    <div className={"more-button"}
-      onClick={props.toggleOpen}>
-      <p>{props.isOpen ? less : more}</p>
-      <i className={`fa fa-caret-${props.isOpen ? "up" : "down"}`}
-        title={props.isOpen ? less : more} />
-    </div>
-    <div className={"more-content"} hidden={!props.isOpen}>
-      {props.children}
-    </div>
-  </div>;
-};
+// eslint-disable-next-line import/no-default-export
+export default SelectPlants;
 
 export interface GetFilteredPointsProps {
   selectionPointType: PointType[] | undefined;
@@ -505,12 +472,21 @@ const getVisibleLayers = (getConfigValue: GetWebAppConfigValue): PointType[] =>
   ];
 };
 
-export const SelectModeLink = () =>
-  <div className="select-mode">
+export interface SelectModeLinkProps {
+  dispatch: Function;
+}
+
+export const SelectModeLink = (props: SelectModeLinkProps) => {
+  const navigate = useNavigate();
+  return <div className="select-mode">
     <button
       className="fb-button gray"
       title={t("open point select panel")}
-      onClick={() => push(Path.plants("select"))}>
+      onClick={() => {
+        props.dispatch(setPanelOpen(true));
+        navigate(Path.plants("select"));
+      }}>
       {t("select")}
     </button>
   </div>;
+};
diff --git a/frontend/point_groups/__tests__/actions_test.ts b/frontend/point_groups/__tests__/actions_test.ts
index cf4780cca7..22b770e9fb 100644
--- a/frontend/point_groups/__tests__/actions_test.ts
+++ b/frontend/point_groups/__tests__/actions_test.ts
@@ -12,9 +12,8 @@ jest.mock("../../resources/selectors", () => ({
   findUuid: jest.fn(),
 }));
 
-import { createGroup, overwriteGroup } from "../actions";
+import { createGroup, CreateGroupProps, overwriteGroup } from "../actions";
 import { init, save, overwrite } from "../../api/crud";
-import { push } from "../../history";
 import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
@@ -29,14 +28,20 @@ import { fakeState } from "../../__test_support__/fake_state";
 import { Path } from "../../internal_urls";
 
 describe("createGroup()", () => {
+  const fakeProps = (): CreateGroupProps => ({
+    navigate: jest.fn(),
+  });
+
   it("creates group", async () => {
+    const p = fakeProps();
     const fakePoints = [fakePoint(), fakePlant(), fakeToolSlot()];
     const resources = buildResourceIndex(fakePoints);
-    const pointUuids = fakePoints.map(x => x.uuid);
+    p.pointUuids = fakePoints.map(x => x.uuid);
+    p.groupName = "Name123";
     const fakeS: DeepPartial<Everything> = { resources };
     const dispatch = jest.fn(() => Promise.resolve());
 
-    const thunk = createGroup({ pointUuids, groupName: "Name123" });
+    const thunk = createGroup(p);
     await thunk(dispatch, () => fakeS as Everything);
     expect(init).toHaveBeenCalledWith("PointGroup", expect.objectContaining({
       name: "Name123",
@@ -45,20 +50,21 @@ describe("createGroup()", () => {
       criteria: DEFAULT_CRITERIA,
     }));
     expect(save).toHaveBeenCalledWith("???");
-    expect(push)
+    expect(p.navigate)
       .toHaveBeenCalledWith(Path.groups(323232332));
   });
 
   it("creates group with default name", async () => {
+    const p = fakeProps();
     mockPointGroup = { body: { id: 0 } };
     const state = fakeState();
     const point = fakePoint();
     point.body.id = 0;
     const fakePoints = [point, fakePlant(), fakeToolSlot()];
     state.resources = buildResourceIndex(fakePoints);
-    const pointUuids = fakePoints.map(x => x.uuid);
-    pointUuids.push("missingFakeUuid");
-    const thunk = createGroup({ pointUuids });
+    p.pointUuids = fakePoints.map(x => x.uuid);
+    p.pointUuids.push("missingFakeUuid");
+    const thunk = createGroup(p);
     await thunk(jest.fn(() => Promise.resolve()), () => state);
     expect(init).toHaveBeenCalledWith("PointGroup", expect.objectContaining({
       name: "Untitled Group",
@@ -67,7 +73,7 @@ describe("createGroup()", () => {
       criteria: DEFAULT_CRITERIA,
     }));
     expect(save).toHaveBeenCalledWith("???");
-    expect(push).toHaveBeenCalledWith(Path.groups());
+    expect(p.navigate).toHaveBeenCalledWith(Path.groups());
   });
 });
 
diff --git a/frontend/point_groups/__tests__/group_detail_test.tsx b/frontend/point_groups/__tests__/group_detail_test.tsx
index 5bd2b01377..13b41a2ec4 100644
--- a/frontend/point_groups/__tests__/group_detail_test.tsx
+++ b/frontend/point_groups/__tests__/group_detail_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.groups(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../group_detail_active", () => ({
   GroupDetailActive: () => <div />,
   GroupSortSelection: () => <div />,
@@ -33,6 +26,7 @@ import {
 } from "../../__test_support__/fake_state/resources";
 import { PointType } from "farmbot";
 import { destroy } from "../../api/crud";
+import { Path } from "../../internal_urls";
 
 describe("<GroupDetail />", () => {
   const fakeProps = (): GroupDetailProps => {
@@ -56,7 +50,7 @@ describe("<GroupDetail />", () => {
   };
 
   it("redirects when group is not found", () => {
-    mockPath = Path.mock(Path.groups(-1));
+    location.pathname = Path.mock(Path.groups(-1));
     history.back = jest.fn();
     const p = fakeProps();
     p.group = undefined;
@@ -66,7 +60,7 @@ describe("<GroupDetail />", () => {
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     history.back = jest.fn();
     const p = fakeProps();
     p.group = undefined;
@@ -75,7 +69,7 @@ describe("<GroupDetail />", () => {
   });
 
   it("renders groups", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     history.back = jest.fn();
     const wrapper = mount(<GroupDetail {...fakeProps()} />);
     expect(wrapper.find(GroupDetailActive).length).toEqual(1);
@@ -88,7 +82,7 @@ describe("<GroupDetail />", () => {
     ["points", "GenericPointer"],
     ["tools", "ToolSlot"],
   ])("renders %s group", (title, pointerType) => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     const p = fakeProps();
     p.group && (p.group.body.criteria.string_eq = { pointer_type: [pointerType] });
     const wrapper = mount(<GroupDetail {...p} />);
@@ -96,7 +90,7 @@ describe("<GroupDetail />", () => {
   });
 
   it("deletes group", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     const wrapper = mount(<GroupDetail {...fakeProps()} />);
     wrapper.find(".fa-trash").first().simulate("click");
     expect(destroy).toHaveBeenCalled();
@@ -105,7 +99,7 @@ describe("<GroupDetail />", () => {
 
 describe("findGroupFromUrl()", () => {
   it("finds group from URL", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     const group = fakePointGroup();
     group.body.id = 1;
     const otherGroup = fakePointGroup();
@@ -114,17 +108,17 @@ describe("findGroupFromUrl()", () => {
   });
 
   it("fails to find group from URL", () => {
-    mockPath = Path.mock(Path.groups(1));
+    location.pathname = Path.mock(Path.groups(1));
     expect(findGroupFromUrl([])).toEqual(undefined);
   });
 
   it("fails to find group from URL: undefined array item", () => {
-    mockPath = Path.mock(Path.groups());
+    location.pathname = Path.mock(Path.groups());
     expect(findGroupFromUrl([])).toEqual(undefined);
   });
 
   it("doesn't try to find a group when at a different URL", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const group = fakePointGroup();
     group.body.id = 1;
     expect(findGroupFromUrl([group])).toEqual(undefined);
diff --git a/frontend/point_groups/__tests__/group_list_panel_test.tsx b/frontend/point_groups/__tests__/group_list_panel_test.tsx
index 3e068068d4..5ae1b0d9bb 100644
--- a/frontend/point_groups/__tests__/group_list_panel_test.tsx
+++ b/frontend/point_groups/__tests__/group_list_panel_test.tsx
@@ -17,7 +17,6 @@ import {
 import { createGroup } from "../actions";
 import { DesignerPanelTop } from "../../farm_designer/designer_panel";
 import { SearchField } from "../../ui/search_field";
-import { push } from "../../history";
 import { Path } from "../../internal_urls";
 
 describe("<GroupListPanel />", () => {
@@ -47,14 +46,17 @@ describe("<GroupListPanel />", () => {
     const p = fakeProps();
     const wrapper = shallow(<GroupListPanel {...p} />);
     wrapper.find(DesignerPanelTop).simulate("click");
-    expect(createGroup).toHaveBeenCalledWith({ pointUuids: [] });
+    expect(createGroup).toHaveBeenCalledWith({
+      pointUuids: [],
+      navigate: expect.any(Function),
+    });
   });
 
   it("changes search term", () => {
     const p = fakeProps();
-    const wrapper = shallow<GroupListPanel>(<GroupListPanel {...p} />);
+    const wrapper = shallow(<GroupListPanel {...p} />);
     wrapper.find(SearchField).simulate("change", "one");
-    expect(wrapper.state().searchTerm).toEqual("one");
+    expect(wrapper.find(SearchField).props().searchTerm).toEqual("one");
   });
 
   it("renders relevant group data as a list", () => {
@@ -71,7 +73,7 @@ describe("<GroupListPanel />", () => {
   it("navigates to group", () => {
     const wrapper = mount(<GroupListPanel {...fakeProps()} />);
     wrapper.find(".group-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.groups(9));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.groups(9));
   });
 
   it("navigates to group: handles missing id", () => {
@@ -79,7 +81,7 @@ describe("<GroupListPanel />", () => {
     p.groups[0].body.id = undefined;
     const wrapper = mount(<GroupListPanel {...p} />);
     wrapper.find(".group-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.groups());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.groups());
   });
 
   it("renders no groups", () => {
diff --git a/frontend/point_groups/__tests__/point_group_item_test.tsx b/frontend/point_groups/__tests__/point_group_item_test.tsx
index 0c4e4120d6..f75293358e 100644
--- a/frontend/point_groups/__tests__/point_group_item_test.tsx
+++ b/frontend/point_groups/__tests__/point_group_item_test.tsx
@@ -8,8 +8,6 @@ jest.mock("../../farm_designer/map/actions", () => ({
 }));
 jest.mock("../actions", () => ({ overwriteGroup: jest.fn() }));
 
-jest.mock("../../history", () => ({ push: jest.fn() }));
-
 import React from "react";
 import {
   PointGroupItem, PointGroupItemProps, genericPointIcon,
@@ -32,7 +30,6 @@ import { overwriteGroup } from "../actions";
 import { mockDispatch } from "../../__test_support__/fake_dispatch";
 import { fakeToolTransformProps } from "../../__test_support__/fake_tool_info";
 import { FilePath, Path } from "../../internal_urls";
-import { push } from "../../history";
 
 describe("<PointGroupItem/>", () => {
   const fakeProps = (): PointGroupItemProps => ({
@@ -234,9 +231,10 @@ describe("<PointGroupItem/>", () => {
     p.dispatch = undefined;
     p.navigate = true;
     const i = new PointGroupItem(p);
+    i.navigate = jest.fn();
     i.click();
     expect(overwriteGroup).not.toHaveBeenCalled();
     expect(setHoveredPlant).not.toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.plants(1));
+    expect(i.navigate).toHaveBeenCalledWith(Path.plants(1));
   });
 });
diff --git a/frontend/point_groups/actions.ts b/frontend/point_groups/actions.ts
index c782fe8c31..54072b3ea2 100644
--- a/frontend/point_groups/actions.ts
+++ b/frontend/point_groups/actions.ts
@@ -1,7 +1,7 @@
 import { betterCompact } from "../util";
 import { PointGroup } from "farmbot/dist/resources/api_resources";
 import { init, save, overwrite } from "../api/crud";
-import { push } from "../history";
+import { NavigateFunction } from "react-router";
 import { GetState } from "../redux/interfaces";
 import { findPointGroup } from "../resources/selectors";
 import { t } from "../i18next_wrapper";
@@ -10,10 +10,11 @@ import { DEFAULT_CRITERIA, PointGroupCriteria } from "./criteria/interfaces";
 import { TaggedPointGroup } from "farmbot";
 import { Path } from "../internal_urls";
 
-interface CreateGroupProps {
+export interface CreateGroupProps {
   pointUuids?: UUID[];
   groupName?: string;
   criteria?: PointGroupCriteria;
+  navigate: NavigateFunction;
 }
 
 export const createGroup = (props: CreateGroupProps) =>
@@ -36,7 +37,7 @@ export const createGroup = (props: CreateGroupProps) =>
       .then(() => {
         const pg = findPointGroup(getState().resources.index, action.payload.uuid);
         const { id } = pg.body;
-        push(Path.groups(id));
+        props.navigate(Path.groups(id));
       });
   };
 
diff --git a/frontend/point_groups/criteria/add.tsx b/frontend/point_groups/criteria/add.tsx
index f30b5b9835..93a09185f9 100644
--- a/frontend/point_groups/criteria/add.tsx
+++ b/frontend/point_groups/criteria/add.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
 import { cloneDeep, uniq } from "lodash";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { editCriteria } from ".";
 import {
   AddEqCriteriaProps,
@@ -28,31 +28,23 @@ export class AddEqCriteria<T extends string | number>
   };
 
   render() {
-    return <div className={`add-${this.props.type}-eq-criteria`}>
-      <Row>
-        <Col xs={4}>
-          <input type="string"
-            placeholder={t("field")}
-            value={this.state.key}
-            onChange={e => this.setState({ key: e.currentTarget.value })} />
-        </Col>
-        <Col xs={1}>
-          {"="}
-        </Col>
-        <Col xs={4}>
-          <input type={this.props.type}
-            name="value"
-            placeholder={t("value")}
-            value={this.state.value}
-            onChange={e => this.setState({ value: e.currentTarget.value })} />
-        </Col>
-        <Col xs={2}>
-          <button className="fb-button green"
-            title={t("add filter")}
-            onClick={this.commit}>
-            <i className="fa fa-plus" />
-          </button>
-        </Col>
+    return <div className={`add-${this.props.type}-eq-criteria grid`}>
+      <Row className="advanced-group-criteria">
+        <input type="string"
+          placeholder={t("field")}
+          value={this.state.key}
+          onChange={e => this.setState({ key: e.currentTarget.value })} />
+        {"="}
+        <input type={this.props.type}
+          name="value"
+          placeholder={t("value")}
+          value={this.state.value}
+          onChange={e => this.setState({ value: e.currentTarget.value })} />
+        <button className="fb-button green"
+          title={t("add filter")}
+          onClick={this.commit}>
+          <i className="fa fa-plus" />
+        </button>
       </Row>
     </div>;
   }
@@ -78,30 +70,22 @@ export class AddNumberCriteria
 
   render() {
     return <div className="add-number-criteria">
-      <Row>
-        <Col xs={4}>
-          <input type="string"
-            name="key"
-            placeholder={t("field")}
-            value={this.state.key}
-            onChange={this.changeKey} />
-        </Col>
-        <Col xs={1}>
-          {this.props.criteriaKey == "number_gt" ? ">" : "<"}
-        </Col>
-        <Col xs={4}>
-          <input type="number"
-            name="value"
-            value={this.state.value}
-            onChange={this.changeValue} />
-        </Col>
-        <Col xs={2}>
-          <button className="fb-button green"
-            title={t("add number filter")}
-            onClick={this.commit}>
-            <i className="fa fa-plus" />
-          </button>
-        </Col>
+      <Row className="advanced-group-criteria">
+        <input type="string"
+          name="key"
+          placeholder={t("field")}
+          value={this.state.key}
+          onChange={this.changeKey} />
+        {this.props.criteriaKey == "number_gt" ? ">" : "<"}
+        <input type="number"
+          name="value"
+          value={this.state.value}
+          onChange={this.changeValue} />
+        <button className="fb-button green"
+          title={t("add number filter")}
+          onClick={this.commit}>
+          <i className="fa fa-plus" />
+        </button>
       </Row>
     </div>;
   }
diff --git a/frontend/point_groups/criteria/component.tsx b/frontend/point_groups/criteria/component.tsx
index f79a1b83bc..30f52b38cb 100644
--- a/frontend/point_groups/criteria/component.tsx
+++ b/frontend/point_groups/criteria/component.tsx
@@ -44,7 +44,7 @@ export class GroupCriteria extends
   }
 
   AdvancedToggleMenu = () =>
-    <div className="criteria-options-menu">
+    <div className="row">
       <label>{t("advanced mode")}</label>
       <ToggleButton
         title={t("toggle advanced view")}
@@ -67,10 +67,12 @@ export class GroupCriteria extends
     };
     const pointTypes = validPointTypes(criteria.string_eq.pointer_type) || [];
     return <div className="group-criteria">
-      <label className="criteria-heading">{t("filters")}</label>
-      <Popover
-        target={<i className={"fa fa-gear dark fb-icon-button"} />}
-        content={<this.AdvancedToggleMenu />} />
+      <div className="row grid-exp-1">
+        <label className="criteria-heading">{t("filters")}</label>
+        <Popover
+          target={<i className={"fa fa-gear fb-icon-button invert"} />}
+          content={<this.AdvancedToggleMenu />} />
+      </div>
       {!this.state.advanced
         ? <div className={"basic"}>
           {pointTypes.length < 1 &&
@@ -84,19 +86,23 @@ export class GroupCriteria extends
           <LocationSelection {...commonProps} botSize={this.props.botSize}
             editGroupAreaInMap={this.props.editGroupAreaInMap} />
         </div>
-        : <div className={"advanced"}>
+        : <div className={"advanced grid"}>
           <DaySelection {...commonProps} {...dayProps} />
-          <label>{t("strings")}</label>
-          <Help text={t(ToolTips.DOT_NOTATION_TIP)} />
+          <div className="row grid-exp-2">
+            <label>{t("strings")}</label>
+            <Help text={t(ToolTips.DOT_NOTATION_TIP)} />
+          </div>
           <EqCriteriaSelection<string> {...commonProps}
             type={"string"} eqCriteria={criteria.string_eq}
             criteriaKey={"string_eq"} />
-          <label>{t("numbers")}</label>
-          <EqCriteriaSelection<number> {...commonProps}
-            type={"number"} eqCriteria={criteria.number_eq}
-            criteriaKey={"number_eq"} />
-          <NumberCriteriaSelection {...commonProps} criteriaKey={"number_lt"} />
-          <NumberCriteriaSelection {...commonProps} criteriaKey={"number_gt"} />
+          <div className="grid">
+            <label>{t("numbers")}</label>
+            <EqCriteriaSelection<number> {...commonProps}
+              type={"number"} eqCriteria={criteria.number_eq}
+              criteriaKey={"number_eq"} />
+            <NumberCriteriaSelection {...commonProps} criteriaKey={"number_lt"} />
+            <NumberCriteriaSelection {...commonProps} criteriaKey={"number_gt"} />
+          </div>
         </div>}
     </div>;
   }
@@ -231,7 +237,7 @@ export const MoreIndicatorIcon = (props: MoreIndicatorIconProps) =>
 /** Select pointer_type string equal criteria,
  *  which determines if any additional criteria is shown. */
 export const PointTypeSelection = (props: PointTypeSelectionProps) =>
-  <div className={"point-type-selection"}>
+  <div className={"row grid-2-col"}>
     <p className={"category"}>{t("Select all")}</p>
     <FBSelect
       key={JSON.stringify(props.group.body)}
diff --git a/frontend/point_groups/criteria/show.tsx b/frontend/point_groups/criteria/show.tsx
index 5c3a3ba092..29e6890de8 100644
--- a/frontend/point_groups/criteria/show.tsx
+++ b/frontend/point_groups/criteria/show.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, FBSelect, DropDownItem, Checkbox } from "../../ui";
+import { Row, FBSelect, DropDownItem, Checkbox, ToggleButton } from "../../ui";
 import {
   AddEqCriteria, editCriteria, AddNumberCriteria,
   editGtLtCriteriaField,
@@ -17,7 +17,6 @@ import {
   DaySelectionProps,
 } from "./interfaces";
 import { t } from "../../i18next_wrapper";
-import { ToggleButton } from "../../ui/toggle_button";
 import { Actions } from "../../constants";
 import { spaceSelected } from "../../farm_designer/map/layers/zones/zones";
 
@@ -26,30 +25,27 @@ export class EqCriteriaSelection<T extends string | number>
   extends React.Component<EqCriteriaSelectionProps<T>> {
   render() {
     const { eqCriteria, criteriaKey, group, dispatch } = this.props;
-    return <div className={`${this.props.type}-eq-criteria`}>
+    return <div className={`${this.props.type}-eq-criteria grid`}>
       <AddEqCriteria<T> group={group} dispatch={dispatch}
         type={this.props.type} eqCriteria={eqCriteria}
         criteriaKey={criteriaKey} />
       {eqCriteria && Object.entries(eqCriteria)
         .map(([key, values]: [string, T[]], keyIndex) =>
           values && values.length > 0 &&
-          <div key={keyIndex}>
+          <div key={keyIndex} className="row advanced-group-criteria">
             <code>{key}</code>
+            <p>=</p>
             {values.map((value, valueIndex) =>
-              <Row key={"" + keyIndex + valueIndex}>
-                <Col xs={9}>
-                  <input name="value"
-                    disabled={true}
-                    value={value} />
-                </Col>
-                <Col xs={2}>
-                  <button className="fb-button red"
-                    title={t("remove filter")}
-                    onClick={() => dispatch(removeEqCriteriaValue(
-                      group, eqCriteria, criteriaKey, key, value))}>
-                    <i className="fa fa-minus" />
-                  </button>
-                </Col>
+              <Row key={"" + keyIndex + valueIndex} className="grid-exp-1">
+                <input name="value"
+                  disabled={true}
+                  value={value} />
+                <button className="fb-button red"
+                  title={t("remove filter")}
+                  onClick={() => dispatch(removeEqCriteriaValue(
+                    group, eqCriteria, criteriaKey, key, value))}>
+                  <i className="fa fa-minus" />
+                </button>
               </Row>)}
           </div>)}
     </div>;
@@ -59,29 +55,21 @@ export class EqCriteriaSelection<T extends string | number>
 /** Add and view > or < number criteria. */
 export const NumberCriteriaSelection = (props: NumberCriteriaProps) => {
   const criteriaField = props.criteria[props.criteriaKey];
-  return <div className={"number-gt-lt-criteria"}>
+  return <div className={"number-gt-lt-criteria grid"}>
     <AddNumberCriteria {...props} />
     {criteriaField && Object.entries(criteriaField)
       .map(([key, value], keyIndex) =>
         <div key={keyIndex}>
-          <Row>
-            <Col xs={4}>
-              <p>{key}</p>
-            </Col>
-            <Col xs={1}>
-              {props.criteriaKey == "number_gt" ? ">" : "<"}
-            </Col>
-            <Col xs={4}>
-              <p>{value}</p>
-            </Col>
-            <Col xs={2}>
-              <button className="fb-button red"
-                title={t("remove number criteria")}
-                onClick={() => props.dispatch(clearCriteriaField(
-                  props.group, [props.criteriaKey], [key]))}>
-                <i className="fa fa-minus" />
-              </button>
-            </Col>
+          <Row className="advanced-group-criteria">
+            <p>{key}</p>
+            {props.criteriaKey == "number_gt" ? ">" : "<"}
+            <p>{value}</p>
+            <button className="fb-button red"
+              title={t("remove number criteria")}
+              onClick={() => props.dispatch(clearCriteriaField(
+                props.group, [props.criteriaKey], [key]))}>
+              <i className="fa fa-minus" />
+            </button>
           </Row>
         </div>)}
   </div>;
@@ -99,55 +87,52 @@ export const DaySelection = (props: DaySelectionProps) => {
   const noDayCriteria = !advanced &&
     dayCriteriaEmpty(dayCriteria) && !props.dayChanged;
   return <div className="day-criteria">
-    {advanced
-      ? <label>{t("Age")}</label>
-      : <p className={"category"}>{t("Age")}</p>}
-    {!advanced &&
-      <div className="criteria-checkbox-list-item">
-        <Checkbox
-          onChange={() => {
-            dispatch(editCriteria(group, { day: { op: "<", days_ago: 0 } }));
-            props.changeDay(false);
-          }}
-          checked={noDayCriteria}
-          disabled={noDayCriteria}
-          title={t("clear age selection")}
-          customDisabledText={t("age selection empty")} />
-        <p>{t("all")}</p>
-      </div>}
-    <Row>
-      <Col xs={5}>
-        <FBSelect key={JSON.stringify(group.body)}
-          list={[
-            DAY_OPERATOR_DDI_LOOKUP()["<"],
-            DAY_OPERATOR_DDI_LOOKUP()[">"]]}
-          selectedItem={noDayCriteria
-            ? { label: t("Select one"), value: "" }
-            : DAY_OPERATOR_DDI_LOOKUP()[dayCriteria.op]}
-          onChange={ddi => {
-            dispatch(editCriteria(group, {
-              day: {
-                days_ago: dayCriteria.days_ago,
-                op: ddi.value as PointGroupCriteria["day"]["op"]
-              }
-            }));
-            props.changeDay(true);
-          }} />
-      </Col>
-      <Col xs={3}>
-        <input type="number" name="days_ago"
-          value={noDayCriteria ? "" : dayCriteria.days_ago}
-          disabled={noDayCriteria}
-          onChange={e => {
-            const { op } = dayCriteria;
-            const days_ago = parseInt(e.currentTarget.value);
-            dispatch(editCriteria(group, { day: { days_ago, op } }));
-            props.changeDay(true);
-          }} />
-      </Col>
-      <Col xs={4}>
-        <p className={"days-old-text"}>{t("days old")}</p>
-      </Col>
+    <div className="row grid-exp-1">
+      {advanced
+        ? <label>{t("Age")}</label>
+        : <p className={"category"}>{t("Age")}</p>}
+      {!advanced &&
+        <div className="all-criteria-checkbox row">
+          <Checkbox
+            onChange={() => {
+              dispatch(editCriteria(group, { day: { op: "<", days_ago: 0 } }));
+              props.changeDay(false);
+            }}
+            checked={noDayCriteria}
+            disabled={noDayCriteria}
+            title={t("clear age selection")}
+            customDisabledText={t("age selection empty")} />
+          <p>{t("ALL")}</p>
+        </div>
+      }
+    </div>
+    <Row className="grid-3-col">
+      <FBSelect key={JSON.stringify(group.body)}
+        list={[
+          DAY_OPERATOR_DDI_LOOKUP()["<"],
+          DAY_OPERATOR_DDI_LOOKUP()[">"]]}
+        selectedItem={noDayCriteria
+          ? { label: t("Select one"), value: "" }
+          : DAY_OPERATOR_DDI_LOOKUP()[dayCriteria.op]}
+        onChange={ddi => {
+          dispatch(editCriteria(group, {
+            day: {
+              days_ago: dayCriteria.days_ago,
+              op: ddi.value as PointGroupCriteria["day"]["op"]
+            }
+          }));
+          props.changeDay(true);
+        }} />
+      <input type="number" name="days_ago"
+        value={noDayCriteria ? "" : dayCriteria.days_ago}
+        disabled={noDayCriteria}
+        onChange={e => {
+          const { op } = dayCriteria;
+          const days_ago = parseInt(e.currentTarget.value);
+          dispatch(editCriteria(group, { day: { days_ago, op } }));
+          props.changeDay(true);
+        }} />
+      <p className={"days-old-text"}>{t("days old")}</p>
     </Row>
   </div>;
 };
@@ -157,42 +142,35 @@ export const NumberLtGtInput = (props: NumberLtGtInputProps) => {
   const { group, dispatch, criteriaKey } = props;
   const gtCriteria = props.group.body.criteria.number_gt;
   const ltCriteria = props.group.body.criteria.number_lt;
-  return <Row>
-    <Col xs={props.inputWidth || 4}>
-      <input key={JSON.stringify(gtCriteria)}
-        type="number"
-        name={`${criteriaKey}-number-gt`}
-        defaultValue={gtCriteria[criteriaKey]}
-        disabled={props.disabled}
-        onBlur={e => dispatch(editGtLtCriteriaField(
-          group, "number_gt", criteriaKey)(e))} />
-    </Col>
-    <Col xs={1}>
+  return <Row className="grid-col-3">
+    <input key={"gt-" + JSON.stringify(gtCriteria)}
+      type="number"
+      name={`${criteriaKey}-number-gt`}
+      defaultValue={gtCriteria[criteriaKey]}
+      disabled={props.disabled}
+      onBlur={e => dispatch(editGtLtCriteriaField(
+        group, "number_gt", criteriaKey)(e))} />
+    <div className="row criteria-operators-grid">
       <p>{"<"}</p>
-    </Col>
-    <Col xs={props.labelWidth || 1}>
       <p>{criteriaKey}</p>
-    </Col>
-    <Col xs={1}>
       <p>{"<"}</p>
-    </Col>
-    <Col xs={props.inputWidth || 4}>
-      <input key={JSON.stringify(ltCriteria)}
-        type="number"
-        name={`${criteriaKey}-number-lt`}
-        defaultValue={ltCriteria[criteriaKey]}
-        disabled={props.disabled}
-        onBlur={e => dispatch(editGtLtCriteriaField(
-          group, "number_lt", criteriaKey)(e))} />
-    </Col>
+    </div>
+    <input key={"lt-" + JSON.stringify(ltCriteria)}
+      type="number"
+      name={`${criteriaKey}-number-lt`}
+      defaultValue={ltCriteria[criteriaKey]}
+      disabled={props.disabled}
+      onBlur={e => dispatch(editGtLtCriteriaField(
+        group, "number_lt", criteriaKey)(e))} />
   </Row>;
 };
 
 /** Form inputs to define a 2D group criteria area. */
 export const LocationSelection = (props: LocationSelectionProps) =>
-  <div className="location-criteria">
-    <p className={"category"}>{t("Location")}</p>
-    <div className={"edit-in-map"}>
+  <div className="location-criteria grid">
+    <div className="row grid-exp-1">
+      <p className={"category"}>{t("Location")}</p>
+      <label>{t("edit in map")}</label>
       <ToggleButton
         title={props.editGroupAreaInMap
           ? t("map boxes will change location filter")
@@ -204,7 +182,6 @@ export const LocationSelection = (props: LocationSelectionProps) =>
             type: Actions.EDIT_GROUP_AREA_IN_MAP,
             payload: !props.editGroupAreaInMap
           })} />
-      <label>{t("edit in map")}</label>
     </div>
     <ClearCategory
       group={props.group}
diff --git a/frontend/point_groups/criteria/subcriteria.tsx b/frontend/point_groups/criteria/subcriteria.tsx
index d6882f0e95..924154047c 100644
--- a/frontend/point_groups/criteria/subcriteria.tsx
+++ b/frontend/point_groups/criteria/subcriteria.tsx
@@ -59,7 +59,7 @@ export const ClearCategory = (props: ClearCategoryProps) => {
   const all =
     !some(criteriaKeys.map(criteriaKey =>
       criteriaHasKey(group.body.criteria, criteriaCategories, criteriaKey)));
-  return <div className="criteria-checkbox-list-item">
+  return <div className="row grid-exp-1">
     <Checkbox
       onChange={() =>
         dispatch(clearCriteriaField(group, criteriaCategories, criteriaKeys))}
@@ -67,7 +67,7 @@ export const ClearCategory = (props: ClearCategoryProps) => {
       disabled={all}
       title={t("clear selections")}
       customDisabledText={t("selections empty")} />
-    <p>{t("all")}</p>
+    <p>{t("ALL")}</p>
   </div>;
 };
 
@@ -105,14 +105,16 @@ const PlantCriteria = (props: PlantSubCriteriaProps) => {
 
 const PlantStage = (props: PointSubCriteriaProps) =>
   <div className={"plant-stage-criteria"}>
-    <p className={"category"}>
-      {props.pointerType == "Plant" ? t("Stage") : t("Status")}
-    </p>
-    <ClearCategory
-      group={props.group}
-      criteriaCategories={["string_eq"]}
-      criteriaKeys={["plant_stage"]}
-      dispatch={props.dispatch} />
+    <div className={"row grid-exp-1"}>
+      <p className={"category"}>
+        {props.pointerType == "Plant" ? t("Stage") : t("Status")}
+      </p>
+      <ClearCategory
+        group={props.group}
+        criteriaCategories={["string_eq"]}
+        criteriaKeys={["plant_stage"]}
+        dispatch={props.dispatch} />
+    </div>
     <CheckboxList<string>
       disabled={props.disabled}
       pointerType={props.pointerType}
@@ -126,12 +128,14 @@ const PlantStage = (props: PointSubCriteriaProps) =>
 
 const RemovalMethod = (props: PointSubCriteriaProps) =>
   <div className={"removal-method-criteria"}>
-    <p className={"category"}>{t("Removal Method")}</p>
-    <ClearCategory
-      group={props.group}
-      criteriaCategories={["string_eq"]}
-      criteriaKeys={["meta.removal_method"]}
-      dispatch={props.dispatch} />
+    <div className={"row grid-exp-1"}>
+      <p className={"category"}>{t("Removal Method")}</p>
+      <ClearCategory
+        group={props.group}
+        criteriaCategories={["string_eq"]}
+        criteriaKeys={["meta.removal_method"]}
+        dispatch={props.dispatch} />
+    </div>
     <CheckboxList
       disabled={props.disabled}
       pointerType={props.pointerType}
@@ -146,12 +150,14 @@ const RemovalMethod = (props: PointSubCriteriaProps) =>
 
 const PlantType = (props: PlantSubCriteriaProps) =>
   <div className={"plant-type-criteria"}>
-    <p className={"category"}>{t("Type")}</p>
-    <ClearCategory
-      group={props.group}
-      criteriaCategories={["string_eq"]}
-      criteriaKeys={["openfarm_slug"]}
-      dispatch={props.dispatch} />
+    <div className={"row grid-exp-1"}>
+      <p className={"category"}>{t("Type")}</p>
+      <ClearCategory
+        group={props.group}
+        criteriaCategories={["string_eq"]}
+        criteriaKeys={["openfarm_slug"]}
+        dispatch={props.dispatch} />
+    </div>
     <CheckboxList<string>
       disabled={props.disabled}
       pointerType={"Plant"}
@@ -169,7 +175,7 @@ const WeedCriteria = (props: SubCriteriaProps) => {
   const { group, dispatch, disabled } = props;
   const pointerType: PointType = "Weed";
   const commonProps = { group, dispatch, disabled, pointerType };
-  return <div className={"weed-criteria-options"}>
+  return <div className={"weed-criteria-options grid"}>
     <PointSource {...commonProps} />
     <PlantStage {...commonProps} />
     <RemovalMethod {...commonProps} />
@@ -191,12 +197,14 @@ const PointCriteria = (props: SubCriteriaProps) => {
 
 const PointSource = (props: PointSubCriteriaProps) =>
   <div className={"point-source-criteria"}>
-    <p className={"category"}>{t("Source")}</p>
-    <ClearCategory
-      group={props.group}
-      criteriaCategories={["string_eq"]}
-      criteriaKeys={["meta.created_by"]}
-      dispatch={props.dispatch} />
+    <div className={"row grid-exp-1"}>
+      <p className={"category"}>{t("Source")}</p>
+      <ClearCategory
+        group={props.group}
+        criteriaCategories={["string_eq"]}
+        criteriaKeys={["meta.created_by"]}
+        dispatch={props.dispatch} />
+    </div>
     <CheckboxList
       disabled={props.disabled}
       pointerType={props.pointerType}
@@ -211,12 +219,14 @@ const PointSource = (props: PointSubCriteriaProps) =>
 
 const Radius = (props: PointSubCriteriaProps) =>
   <div className={"radius-criteria"}>
-    <p className={"category"}>{t("Radius")}</p>
-    <ClearCategory
-      group={props.group}
-      criteriaCategories={["number_gt", "number_lt"]}
-      criteriaKeys={["radius"]}
-      dispatch={props.dispatch} />
+    <div className={"row grid-exp-1"}>
+      <p className={"category"}>{t("Radius")}</p>
+      <ClearCategory
+        group={props.group}
+        criteriaCategories={["number_gt", "number_lt"]}
+        criteriaKeys={["radius"]}
+        dispatch={props.dispatch} />
+    </div>
     <div className={"lt-gt-criteria"}>
       <NumberLtGtInput
         disabled={props.disabled}
@@ -231,12 +241,14 @@ const Radius = (props: PointSubCriteriaProps) =>
 
 const Color = (props: PointSubCriteriaProps) =>
   <div className={"color-criteria"}>
-    <p className={"category"}>{t("Color")}</p>
-    <ClearCategory
-      group={props.group}
-      criteriaCategories={["string_eq"]}
-      criteriaKeys={["meta.color"]}
-      dispatch={props.dispatch} />
+    <div className={"row grid-exp-1"}>
+      <p className={"category"}>{t("Color")}</p>
+      <ClearCategory
+        group={props.group}
+        criteriaCategories={["string_eq"]}
+        criteriaKeys={["meta.color"]}
+        dispatch={props.dispatch} />
+    </div>
     <CheckboxList
       disabled={props.disabled}
       pointerType={props.pointerType}
diff --git a/frontend/point_groups/group_detail.tsx b/frontend/point_groups/group_detail.tsx
index c048299828..70f8e4dcfd 100644
--- a/frontend/point_groups/group_detail.tsx
+++ b/frontend/point_groups/group_detail.tsx
@@ -6,7 +6,6 @@ import {
   selectAllActivePoints, selectAllPlantPointers, selectAllPointGroups,
   selectAllTools,
 } from "../resources/selectors";
-import { getPathArray } from "../history";
 import { GroupDetailActive, GroupSortSelection } from "./group_detail_active";
 import { uniq } from "lodash";
 import { UUID } from "../resources/interfaces";
@@ -45,9 +44,9 @@ export interface GroupDetailProps {
 
 /** Find a group from a URL-provided ID. */
 export const findGroupFromUrl = (groups: TaggedPointGroup[]) => {
-  const urlIncludes = (string: string) => getPathArray().includes(string);
-  if (!urlIncludes("groups") && !urlIncludes("zones")) { return; }
-  const groupId = parseInt(getPathArray().pop() || "?", 10);
+  if (!Path.startsWith(Path.groups()) &&
+    !Path.startsWith(Path.zones())) { return; }
+  const groupId = parseInt(Path.getLastChunk());
   return groups.filter(group => group.body.id === groupId)[0];
 };
 
@@ -115,14 +114,14 @@ export class RawGroupDetail extends React.Component<GroupDetailProps, {}> {
         <div className={"panel-header-icon-group"}>
           {group &&
             <Popover
-              target={<i className={"fa fa-sort fb-icon-button"}
+              target={<i className={"fa fa-sort fb-icon-button invert"}
                 title={t("Sort by")} />}
               content={
                 <GroupSortSelection group={group} dispatch={this.props.dispatch}
                   pointsSelectedByGroup={pointsSelectedByGroup(
                     group, this.props.allPoints)} />} />}
           {group &&
-            <i className={"fa fa-trash fb-icon-button"}
+            <i className={"fa fa-trash fb-icon-button invert"}
               title={t("Delete group")}
               onClick={() => this.props.dispatch(destroy(group.uuid))} />}
         </div>
@@ -136,3 +135,5 @@ export class RawGroupDetail extends React.Component<GroupDetailProps, {}> {
   }
 }
 export const GroupDetail = connect(mapStateToProps)(RawGroupDetail);
+// eslint-disable-next-line import/no-default-export
+export default GroupDetail;
diff --git a/frontend/point_groups/group_detail_active.tsx b/frontend/point_groups/group_detail_active.tsx
index 567d8c4e27..a2ee3484f4 100644
--- a/frontend/point_groups/group_detail_active.tsx
+++ b/frontend/point_groups/group_detail_active.tsx
@@ -105,17 +105,19 @@ interface GroupMemberDisplayProps {
 /** View group point counts and icon list. */
 const GroupMemberDisplay = (props: GroupMemberDisplayProps) => {
   return <div className="group-member-display">
-    <label>
-      {t("GROUP MEMBERS ({{count}})", {
-        count: props.pointsSelectedByGroup.length
-      })}
-    </label>
-    <Help text={ToolTips.CRITERIA_SELECTION_COUNT} />
-    <i onClick={props.toggleIconShow}
-      className={`fa fa-caret-${props.iconDisplay ? "up" : "down"}`}
-      title={props.iconDisplay
-        ? t("hide icons")
-        : t("show icons")} />
+    <div className={"row grid-exp-1"}>
+      <label>
+        {t("GROUP MEMBERS ({{count}})", {
+          count: props.pointsSelectedByGroup.length
+        })}
+      </label>
+      <Help text={ToolTips.CRITERIA_SELECTION_COUNT} />
+      <i onClick={props.toggleIconShow}
+        className={`fa fa-caret-${props.iconDisplay ? "up" : "down"}`}
+        title={props.iconDisplay
+          ? t("hide icons")
+          : t("show icons")} />
+    </div>
     <GroupPointCountBreakdown
       group={props.group}
       dispatch={props.dispatch}
diff --git a/frontend/point_groups/group_inventory_item.tsx b/frontend/point_groups/group_inventory_item.tsx
index 6f9e21105a..94bb091434 100644
--- a/frontend/point_groups/group_inventory_item.tsx
+++ b/frontend/point_groups/group_inventory_item.tsx
@@ -19,12 +19,12 @@ export function GroupInventoryItem(props: GroupInventoryItemProps) {
   const delMode = DevSettings.quickDeleteEnabled();
   return <div
     onClick={delMode ? () => props.dispatch(destroy(group.uuid)) : props.onClick}
-    className={["group-search-item",
+    className={["group-search-item row grid-exp-1",
       props.hovered ? "hovered" : "",
       delMode ? "quick-del" : ""].join(" ")}>
-    <span className="group-search-item-name">
+    <div>
       {group.body.name}
-    </span>
+    </div>
     <ErrorBoundary fallback={<i className="group-item-count">{t("? items")}</i>}>
       <GroupItemCount group={group} allPoints={props.allPoints} />
     </ErrorBoundary>
diff --git a/frontend/point_groups/group_list_panel.tsx b/frontend/point_groups/group_list_panel.tsx
index 4625f265ee..e555cf4d61 100644
--- a/frontend/point_groups/group_list_panel.tsx
+++ b/frontend/point_groups/group_list_panel.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Everything } from "../interfaces";
-import { Panel, DesignerNavTabs } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { t } from "../i18next_wrapper";
 import {
   DesignerPanel, DesignerPanelTop, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { TaggedPointGroup, TaggedPoint } from "farmbot";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { GroupInventoryItem } from "./group_inventory_item";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
@@ -26,10 +26,6 @@ export interface GroupListPanelProps {
   allPoints: TaggedPoint[];
 }
 
-interface State {
-  searchTerm: string;
-}
-
 export function mapStateToProps(props: Everything): GroupListPanelProps {
   return {
     groups: selectAllPointGroups(props.resources.index),
@@ -38,46 +34,47 @@ export function mapStateToProps(props: Everything): GroupListPanelProps {
   };
 }
 
-export class RawGroupListPanel
-  extends React.Component<GroupListPanelProps, State> {
-  state: State = { searchTerm: "" };
+export const RawGroupListPanel = (props: GroupListPanelProps) => {
+  const [searchTerm, setSearchTerm] = React.useState("");
 
-  navigate = (id: number | undefined) => () => push(Path.groups(id));
+  const navigate = useNavigate();
+  const navigateById = (id: number | undefined) => () => {
+    navigate(Path.groups(id));
+  };
 
-  render() {
-    return <DesignerPanel panelName={"groups"} panel={Panel.Groups}>
-      <DesignerNavTabs />
-      <DesignerPanelTop
-        panel={Panel.Groups}
-        onClick={() => this.props.dispatch(createGroup({ pointUuids: [] }))}
-        title={t("Add group")}>
-        <SearchField nameKey={"groups"}
-          searchTerm={this.state.searchTerm}
-          placeholder={t("Search your groups...")}
-          onChange={searchTerm => this.setState({ searchTerm })} />
-      </DesignerPanelTop>
-      <DesignerPanelContent panelName={"groups"}>
-        <EmptyStateWrapper
-          notEmpty={this.props.groups.length > 0}
-          title={t("No groups yet.")}
-          text={t(Content.NO_GROUPS)}
-          colorScheme="groups"
-          graphic={EmptyStateGraphic.groups}>
-          {this.props.groups
-            .filter(p => p.body.name.toLowerCase()
-              .includes(this.state.searchTerm.toLowerCase()))
-            .map(group => <GroupInventoryItem
-              key={group.uuid}
-              group={group}
-              allPoints={this.props.allPoints}
-              hovered={false}
-              dispatch={this.props.dispatch}
-              onClick={this.navigate(group.body.id)}
-            />)}
-        </EmptyStateWrapper>
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+  return <DesignerPanel panelName={"groups"} panel={Panel.Groups}>
+    <DesignerPanelTop
+      panel={Panel.Groups}
+      onClick={() => props.dispatch(createGroup({ pointUuids: [], navigate }))}
+      title={t("Add group")}>
+      <SearchField nameKey={"groups"}
+        searchTerm={searchTerm}
+        placeholder={t("Search your groups...")}
+        onChange={setSearchTerm} />
+    </DesignerPanelTop>
+    <DesignerPanelContent panelName={"groups"}>
+      <EmptyStateWrapper
+        notEmpty={props.groups.length > 0}
+        title={t("No groups yet.")}
+        text={t(Content.NO_GROUPS)}
+        colorScheme="groups"
+        graphic={EmptyStateGraphic.groups}>
+        {props.groups
+          .filter(p => p.body.name.toLowerCase()
+            .includes(searchTerm.toLowerCase()))
+          .map(group => <GroupInventoryItem
+            key={group.uuid}
+            group={group}
+            allPoints={props.allPoints}
+            hovered={false}
+            dispatch={props.dispatch}
+            onClick={navigateById(group.body.id)}
+          />)}
+      </EmptyStateWrapper>
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const GroupListPanel = connect(mapStateToProps)(RawGroupListPanel);
+// eslint-disable-next-line import/no-default-export
+export default GroupListPanel;
diff --git a/frontend/point_groups/point_group_item.tsx b/frontend/point_groups/point_group_item.tsx
index 72b32b8a12..690f4a2285 100644
--- a/frontend/point_groups/point_group_item.tsx
+++ b/frontend/point_groups/point_group_item.tsx
@@ -14,7 +14,7 @@ import { overwriteGroup } from "./actions";
 import { ToolSlotSVG } from "../farm_designer/map/layers/tool_slots/tool_graphics";
 import { ToolTransformProps } from "../tools/interfaces";
 import { FilePath, Path } from "../internal_urls";
-import { push } from "../history";
+import { NavigationContext } from "../routes_helpers";
 
 export interface PointGroupItemProps {
   point: TaggedPoint | TaggedPlantTemplate;
@@ -37,14 +37,14 @@ const removePoint = (group: TaggedPointGroup, pointId: number) =>
   };
 
 export const genericPointIcon = (color: string | undefined) =>
-  `<svg xmlns='http://www.w3.org/2000/svg'
+  `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'
     fill='none' stroke-width='1.5' stroke='${color || "green"}'>
-    <circle cx='15' cy='15' r='12' />
-    <circle cx='15' cy='15' r='2' />
+    <circle cx='25' cy='25' r='18' />
+    <circle cx='25' cy='25' r='2' />
   </svg>`;
 
 export const genericWeedIcon = (color: string | undefined) =>
-  `<svg xmlns='http://www.w3.org/2000/svg'>
+  `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'>
       <defs>
         <radialGradient id='WeedGradient'>
           <stop offset='90%' stop-color='${color || "red"}'
@@ -53,7 +53,7 @@ export const genericWeedIcon = (color: string | undefined) =>
             stop-opacity='0'></stop>
         </radialGradient>
       </defs>
-      <circle id='weed-radius' cx='15' cy='15' r='14'
+      <circle id='weed-radius' cx='25' cy='25' r='25'
         fill='url(#WeedGradient)' opacity='0.5'></circle>
     </svg>`;
 
@@ -70,8 +70,14 @@ export class PointGroupItem
 
   leave = () => this.props.dispatch?.(setHoveredPlant(undefined));
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   click = () => {
-    if (this.props.navigate) { push(Path.plants(this.props.point.body.id)); }
+    if (this.props.navigate) {
+      this.navigate(Path.plants(this.props.point.body.id));
+    }
     if (this.criteriaIcon) {
       return error(t("Cannot remove points selected by filters."));
     }
@@ -133,7 +139,7 @@ export class PointGroupItem
   };
 
   render() {
-    const size = 20;
+    const size = 30;
     return <span
       key={this.key}
       className={"group-item-icon"}
diff --git a/frontend/points/__tests__/create_points_test.tsx b/frontend/points/__tests__/create_points_test.tsx
index be28d36080..d0dd26b243 100644
--- a/frontend/points/__tests__/create_points_test.tsx
+++ b/frontend/points/__tests__/create_points_test.tsx
@@ -1,12 +1,5 @@
 jest.mock("../../api/crud", () => ({ initSave: jest.fn() }));
 
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.points("add"));
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import React from "react";
 import { mount, shallow } from "enzyme";
 import {
@@ -21,6 +14,7 @@ import { fakeState } from "../../__test_support__/fake_state";
 import { DrawnPointPayl } from "../../farm_designer/interfaces";
 import { inputEvent } from "../../__test_support__/fake_html_events";
 import { cloneDeep } from "lodash";
+import { Path } from "../../internal_urls";
 
 const FAKE_POINT: DrawnPointPayl =
   ({ name: "My Point", cx: 13, cy: 22, z: 0, r: 345, color: "red" });
@@ -46,7 +40,7 @@ describe("mapStateToProps", () => {
 
 describe("<CreatePoints />", () => {
   beforeEach(() => {
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
   });
 
   const fakeProps = (): CreatePointsProps => ({
@@ -57,14 +51,14 @@ describe("<CreatePoints />", () => {
   });
 
   it("renders for points", () => {
-    mockPath = Path.mock(Path.designer());
+    location.pathname = Path.mock(Path.designer());
     const wrapper = mount(<CreatePoints {...fakeProps()} />);
     ["add point", "x", "y", "z", "radius"]
       .map(string => expect(wrapper.text().toLowerCase()).toContain(string));
   });
 
   it("renders for weeds", () => {
-    mockPath = Path.mock(Path.weeds("add"));
+    location.pathname = Path.mock(Path.weeds("add"));
     const wrapper = mount(<CreatePoints {...fakeProps()} />);
     ["add weed", "x", "y", "z", "radius"]
       .map(string => expect(wrapper.text().toLowerCase()).toContain(string));
@@ -121,7 +115,7 @@ describe("<CreatePoints />", () => {
   });
 
   it("adds soil height flag", () => {
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
     const p = fakeProps();
     p.drawnPoint = { cx: 0, cy: 0, z: 0, r: 100 };
     const panel = mount<CreatePoints>(<CreatePoints {...p} />);
@@ -138,13 +132,13 @@ describe("<CreatePoints />", () => {
   });
 
   it("creates point with soil height flag", () => {
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
     const p = fakeProps();
     p.drawnPoint = FAKE_POINT;
     const wrapper = mount<CreatePoints>(<CreatePoints {...p} />);
     wrapper.setState({ at_soil_level: true });
     wrapper.update();
-    clickButton(wrapper, 1, "save");
+    clickButton(wrapper, 0, "save");
     expect(initSave).toHaveBeenCalledWith("Point", {
       meta: {
         color: "red", created_by: "farm-designer", type: "point",
@@ -161,13 +155,13 @@ describe("<CreatePoints />", () => {
     ["point", Path.points("add")],
     ["weed", Path.weeds("add")],
   ])("uses current location: %s", (type, path) => {
-    mockPath = Path.mock(path);
+    location.pathname = Path.mock(path);
     const p = fakeProps();
     p.drawnPoint = FAKE_POINT;
     p.botPosition = { x: 1, y: 2, z: 3 };
     const wrapper = mount<CreatePoints>(<CreatePoints {...p} />);
     wrapper.setState({ cx: 10, cy: 20, r: 30 });
-    clickButton(wrapper, 0, "", { icon: "fa-crosshairs" });
+    clickButton(wrapper, 1, "", { icon: "fa-crosshairs" });
     expect(p.dispatch).toHaveBeenCalledWith({
       payload: { color: "red", cx: 1, cy: 2, z: 3, r: 30, name: "My Point" },
       type: type == "point"
@@ -178,20 +172,20 @@ describe("<CreatePoints />", () => {
   });
 
   it("doesn't use current location", () => {
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
     const p = fakeProps();
     p.drawnPoint = FAKE_POINT;
     p.botPosition = { x: undefined, y: undefined, z: undefined };
     const wrapper = mount<CreatePoints>(<CreatePoints {...p} />);
     wrapper.setState({ cx: 10, cy: 20, r: 30 });
     jest.resetAllMocks();
-    clickButton(wrapper, 0, "", { icon: "fa-crosshairs" });
+    clickButton(wrapper, 1, "", { icon: "fa-crosshairs" });
     expect(p.dispatch).not.toHaveBeenCalled();
     expect(wrapper.state()).toEqual({ cx: 10, cy: 20, r: 30 });
   });
 
   it("updates weed name", () => {
-    mockPath = Path.mock(Path.weeds("add"));
+    location.pathname = Path.mock(Path.weeds("add"));
     const p = fakeProps();
     p.drawnPoint = { cx: 0, cy: 0, z: 0, r: 100 };
     const panel = mount<CreatePoints>(<CreatePoints {...p} />);
@@ -207,10 +201,10 @@ describe("<CreatePoints />", () => {
   });
 
   it("creates point", () => {
-    mockPath = Path.mock(Path.points("add"));
+    location.pathname = Path.mock(Path.points("add"));
     const wrapper = mount(<CreatePoints {...fakeProps()} />);
     wrapper.setState({ cx: 10, cy: 20, r: 30 });
-    clickButton(wrapper, 1, "save");
+    clickButton(wrapper, 0, "save");
     expect(initSave).toHaveBeenCalledWith("Point", {
       meta: { color: "green", created_by: "farm-designer", type: "point" },
       name: "Created Point",
@@ -221,10 +215,10 @@ describe("<CreatePoints />", () => {
   });
 
   it("creates weed", () => {
-    mockPath = Path.mock(Path.weeds("add"));
+    location.pathname = Path.mock(Path.weeds("add"));
     const wrapper = mount(<CreatePoints {...fakeProps()} />);
     wrapper.setState({ cx: 10, cy: 20, r: 30 });
-    clickButton(wrapper, 1, "save");
+    clickButton(wrapper, 0, "save");
     expect(initSave).toHaveBeenCalledWith("Point", {
       meta: { color: "red", created_by: "farm-designer", type: "weed" },
       name: "Created Weed",
@@ -248,7 +242,7 @@ describe("<CreatePoints />", () => {
   });
 
   it("changes weed color", () => {
-    mockPath = Path.mock(Path.weeds("add"));
+    location.pathname = Path.mock(Path.weeds("add"));
     const p = fakeProps();
     p.drawnPoint = { cx: 0, cy: 0, z: 0, r: 0 };
     const wrapper = mount<CreatePoints>(<CreatePoints {...p} />);
@@ -267,7 +261,7 @@ describe("<CreatePoints />", () => {
     const wrapper = shallow<CreatePoints>(<CreatePoints {...p} />);
     const PP = wrapper.instance().PointProperties;
     const component = shallow(<PP />);
-    component.find("BlurableInput").at(1).simulate("commit", {
+    component.find("BlurableInput[name='cx']").simulate("commit", {
       currentTarget: { value: "10" }
     });
     expect(p.dispatch).toHaveBeenCalledWith({
diff --git a/frontend/points/__tests__/point_info_test.tsx b/frontend/points/__tests__/point_info_test.tsx
index c85eee0991..c62c385fe0 100644
--- a/frontend/points/__tests__/point_info_test.tsx
+++ b/frontend/points/__tests__/point_info_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.points(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({
   destroy: jest.fn(),
   save: jest.fn(),
@@ -35,9 +28,9 @@ import { clickButton } from "../../__test_support__/helpers";
 import { destroy, edit, save } from "../../api/crud";
 import { DesignerPanelHeader } from "../../farm_designer/designer_panel";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import { move } from "../../devices/actions";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
+import { Path } from "../../internal_urls";
 
 describe("<EditPoint />", () => {
   const fakeProps = (): EditPointProps => ({
@@ -51,21 +44,21 @@ describe("<EditPoint />", () => {
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     const wrapper = mount(<EditPoint {...fakeProps()} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.points());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.points());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const wrapper = mount(<EditPoint {...fakeProps()} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("renders with points", () => {
-    mockPath = Path.mock(Path.points(1));
+    location.pathname = Path.mock(Path.points(1));
     const p = fakeProps();
     const point = fakePoint();
     point.body.name = "Point 1";
@@ -77,7 +70,7 @@ describe("<EditPoint />", () => {
   });
 
   it("doesn't render duplicate values", () => {
-    mockPath = Path.mock(Path.points(1));
+    location.pathname = Path.mock(Path.points(1));
     const p = fakeProps();
     const point = fakePoint();
     point.body.name = "Point 1";
@@ -96,7 +89,7 @@ describe("<EditPoint />", () => {
   });
 
   it("goes back", () => {
-    mockPath = Path.mock(Path.points(1));
+    location.pathname = Path.mock(Path.points(1));
     const p = fakeProps();
     const wrapper = shallow(<EditPoint {...p} />);
     wrapper.find(DesignerPanelHeader).simulate("back");
@@ -106,7 +99,7 @@ describe("<EditPoint />", () => {
   });
 
   it("changes color", () => {
-    mockPath = Path.mock(Path.points(1));
+    location.pathname = Path.mock(Path.points(1));
     const p = fakeProps();
     const wrapper = mount(<EditPoint {...p} />);
     wrapper.find(".color-picker-item-wrapper").first().simulate("click");
@@ -115,7 +108,7 @@ describe("<EditPoint />", () => {
   });
 
   it("saves", () => {
-    mockPath = Path.mock(Path.points(1));
+    location.pathname = Path.mock(Path.points(1));
     const p = fakeProps();
     const point = fakePoint();
     point.body.id = 1;
@@ -126,7 +119,7 @@ describe("<EditPoint />", () => {
   });
 
   it("doesn't save", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const p = fakeProps();
     const point = fakePoint();
     point.body.id = 1;
@@ -137,7 +130,7 @@ describe("<EditPoint />", () => {
   });
 
   it("deletes point", () => {
-    mockPath = Path.mock(Path.points(1));
+    location.pathname = Path.mock(Path.points(1));
     const p = fakeProps();
     const point = fakePoint();
     p.findPoint = () => point;
diff --git a/frontend/points/__tests__/point_inventory_item_test.tsx b/frontend/points/__tests__/point_inventory_item_test.tsx
index 643f636000..de65b78e71 100644
--- a/frontend/points/__tests__/point_inventory_item_test.tsx
+++ b/frontend/points/__tests__/point_inventory_item_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.points());
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../farm_designer/map/actions", () => ({
   mapPointClickAction: jest.fn(() => jest.fn()),
 }));
@@ -24,10 +17,10 @@ import {
   PointInventoryItem, PointInventoryItemProps,
 } from "../point_inventory_item";
 import { fakePoint } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { Actions } from "../../constants";
 import { mapPointClickAction } from "../../farm_designer/map/actions";
 import { destroy } from "../../api/crud";
+import { Path } from "../../internal_urls";
 
 describe("<PointInventoryItem> />", () => {
   const fakeProps = (): PointInventoryItemProps => ({
@@ -54,24 +47,24 @@ describe("<PointInventoryItem> />", () => {
 
   it("deletes point", () => {
     mockDelMode = true;
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     const p = fakeProps();
     p.tpp.body.id = 1;
     const wrapper = shallow(<PointInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(destroy).toHaveBeenCalledWith(p.tpp.uuid, true);
     mockDelMode = false;
   });
 
   it("hovers point in quick delete mode", () => {
     mockDelMode = true;
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     const p = fakeProps();
     p.tpp.body.id = 1;
     p.hovered = false;
-    const wrapper = mount<PointInventoryItem>(<PointInventoryItem {...p} />);
+    const wrapper = mount<typeof PointInventoryItem>(<PointInventoryItem {...p} />);
     expect(wrapper.find(".quick-delete").hasClass("hovered")).toBeFalsy();
     p.hovered = true;
     wrapper.setProps(p);
@@ -80,13 +73,13 @@ describe("<PointInventoryItem> />", () => {
   });
 
   it("navigates to point", () => {
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     const p = fakeProps();
     p.tpp.body.id = 1;
     const wrapper = mount(<PointInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.points(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.points(1));
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_HOVERED_POINT,
       payload: p.tpp.uuid,
@@ -94,13 +87,13 @@ describe("<PointInventoryItem> />", () => {
   });
 
   it("navigates to point without id", () => {
-    mockPath = Path.mock(Path.points());
+    location.pathname = Path.mock(Path.points());
     const p = fakeProps();
     p.tpp.body.id = undefined;
     const wrapper = mount(<PointInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.points("ERR_NO_POINT_ID"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.points("ERR_NO_POINT_ID"));
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_HOVERED_POINT,
       payload: p.tpp.uuid,
@@ -108,13 +101,15 @@ describe("<PointInventoryItem> />", () => {
   });
 
   it("removes item in box select mode", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     const p = fakeProps();
     const wrapper = mount(<PointInventoryItem {...p} />);
     wrapper.simulate("click");
-    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+    expect(mapPointClickAction).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.any(Function),
       p.tpp.uuid);
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_HOVERED_POINT,
       payload: undefined,
diff --git a/frontend/points/__tests__/point_inventory_test.tsx b/frontend/points/__tests__/point_inventory_test.tsx
index 7db05c0c24..f02e5e8504 100644
--- a/frontend/points/__tests__/point_inventory_test.tsx
+++ b/frontend/points/__tests__/point_inventory_test.tsx
@@ -15,7 +15,6 @@ import {
 import {
   fakePoint, fakePointGroup,
 } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { fakeState } from "../../__test_support__/fake_state";
 import {
   buildResourceIndex,
@@ -30,6 +29,7 @@ import { DEFAULT_CRITERIA } from "../../point_groups/criteria/interfaces";
 import { pointsPanelState } from "../../__test_support__/panel_state";
 import { Path } from "../../internal_urls";
 import { deletePoints, deletePointsByIds } from "../../api/delete_points";
+import { mountWithContext } from "../../__test_support__/mount_with_context";
 
 describe("<Points />", () => {
   const fakeProps = (): PointsProps => ({
@@ -81,8 +81,10 @@ describe("<Points />", () => {
 
   it("navigates to group", () => {
     const wrapper = shallow<Points>(<Points {...fakeProps()} />);
-    wrapper.instance().navigate(1)();
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
+    wrapper.instance().navigateById(1)();
+    expect(navigate).toHaveBeenCalledWith(Path.groups(1));
   });
 
   it("adds new group", () => {
@@ -92,23 +94,26 @@ describe("<Points />", () => {
       criteria: {
         ...DEFAULT_CRITERIA,
         string_eq: { pointer_type: ["GenericPointer"] },
-      }
+      },
+      navigate: expect.anything(),
     });
   });
 
   it("adds new point", () => {
-    const wrapper = shallow(<Points {...fakeProps()} />);
+    const wrapper = shallow<Points>(<Points {...fakeProps()} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     wrapper.find(PanelSection).last().props().addNew();
-    expect(push).toHaveBeenCalledWith(Path.points("add"));
+    expect(navigate).toHaveBeenCalledWith(Path.points("add"));
   });
 
   it("navigates to point info", () => {
     const p = fakeProps();
     p.genericPoints = [fakePoint()];
     p.genericPoints[0].body.id = 1;
-    const wrapper = mount(<Points {...p} />);
+    const wrapper = mountWithContext(<Points {...p} />);
     wrapper.find(".point-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.points(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.points(1));
   });
 
   it("changes search term", () => {
diff --git a/frontend/points/create_points.tsx b/frontend/points/create_points.tsx
index 3d6c4375b9..a2732382a3 100644
--- a/frontend/points/create_points.tsx
+++ b/frontend/points/create_points.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { Everything, ResourceColor } from "../interfaces";
 import { initSave } from "../api/crud";
-import { Row, Col, BlurableInput, ColorPicker } from "../ui";
+import { Row, BlurableInput, ColorPicker } from "../ui";
 import { DrawnPointPayl } from "../farm_designer/interfaces";
 import { Actions, Content } from "../constants";
 import {
@@ -17,7 +17,6 @@ import { parseIntInput } from "../util";
 import { validBotLocationData } from "../util/location";
 import { t } from "../i18next_wrapper";
 import { Panel } from "../farm_designer/panel_header";
-import { push } from "../history";
 import { ListItem } from "../plants/plant_panel";
 import { success } from "../toast/toast";
 import { PlantGrid } from "../plants/grid/plant_grid";
@@ -29,6 +28,7 @@ import {
 import { BotPosition } from "../devices/interfaces";
 import { round } from "lodash";
 import { Path } from "../internal_urls";
+import { NavigationContext } from "../routes_helpers";
 
 export function mapStateToProps(props: Everything): CreatePointsProps {
   const { drawnPoint, drawnWeed } = props.resources.consumers.farm_designer;
@@ -210,57 +210,64 @@ export class RawCreatePoints
     this.closePanel();
   };
 
-  closePanel = () => push(Path.designer(this.panel));
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = (url: string) => this.context(url);
+
+  closePanel = () => { this.navigate(Path.designer(this.panel)); };
 
   PointProperties = () =>
-    <ul>
+    <ul className="grid">
       <li>
-        <Row>
+        <Row className="grid-exp-1">
           <div className={"point-name-input"}>
-            <Col xs={10}>
-              <label>{t("Name")}</label>
-              <BlurableInput
-                name="pointName"
-                type="text"
-                onCommit={this.updateValue("name")}
-                value={this.attr("name") || this.defaultName} />
-            </Col>
-          </div>
-          <div className={"point-color-input"}>
-            <Col xs={2}>
-              <ColorPicker
-                current={(this.attr("color") || this.defaultColor) as ResourceColor}
-                onChange={this.changeColor} />
-            </Col>
+            <label>{t("Name")}</label>
+            <BlurableInput
+              name="pointName"
+              type="text"
+              onCommit={this.updateValue("name")}
+              value={this.attr("name") || this.defaultName} />
           </div>
+          <ColorPicker
+            current={(this.attr("color") || this.defaultColor) as ResourceColor}
+            onChange={this.changeColor} />
         </Row>
       </li>
       <ListItem>
-        <Row>
-          <Col xs={3}>
-            <label>{t("X (mm)")}</label>
+        <Row className="add-point-grid">
+          <div>
+            <label>{t("radius (mm)")}</label>
+            <BlurableInput
+              name="r"
+              type="number"
+              onCommit={this.updateValue("r")}
+              value={this.attr("r")}
+              min={0} />
+          </div>
+          <div>
+            <label>{t("X")}</label>
             <BlurableInput
               name="cx"
               type="number"
               onCommit={this.updateValue("cx")}
               value={this.attr("cx", this.props.botPosition.x)} />
-          </Col>
-          <Col xs={3}>
-            <label>{t("Y (mm)")}</label>
+          </div>
+          <div>
+            <label>{t("Y")}</label>
             <BlurableInput
               name="cy"
               type="number"
               onCommit={this.updateValue("cy")}
               value={this.attr("cy", this.props.botPosition.y)} />
-          </Col>
-          <Col xs={3}>
-            <label>{t("Z (mm)")}</label>
+          </div>
+          <div>
+            <label>{t("Z")}</label>
             <BlurableInput
               name="z"
               type="number"
               onCommit={this.updateValue("z")}
               value={this.attr("z", this.props.botPosition.z)} />
-          </Col>
+          </div>
           <UseCurrentLocation botPosition={this.props.botPosition}
             onChange={() => {
               const position = definedPosition(this.props.botPosition);
@@ -277,44 +284,20 @@ export class RawCreatePoints
             }} />
         </Row>
       </ListItem>
-      <ListItem>
-        <Row>
-          <Col xs={6}>
-            <label>{t("radius (mm)")}</label>
-            <BlurableInput
-              name="r"
-              type="number"
-              onCommit={this.updateValue("r")}
-              value={this.attr("r")}
-              min={0} />
-          </Col>
-        </Row>
-      </ListItem>
       {this.panel == "points" &&
         <ListItem>
-          <Row>
-            <Col xs={6} className={"soil-height-checkbox"}>
-              <label>{t("at soil level")}</label>
-              <input
-                name="at_soil_level"
-                type="checkbox"
-                onChange={e =>
-                  this.updateAttr("at_soil_level", e.currentTarget.checked)}
-                checked={!!this.attr("at_soil_level")} />
-            </Col>
+          <Row className="grid-exp-1">
+            <label>{t("at soil level")}</label>
+            <input
+              name="at_soil_level"
+              type="checkbox"
+              onChange={e =>
+                this.updateAttr("at_soil_level", e.currentTarget.checked)}
+              checked={!!this.attr("at_soil_level")} />
           </Row>
         </ListItem>}
     </ul>;
 
-  PointActions = () =>
-    <Row>
-      <button className="fb-button green save"
-        title={t("save")}
-        onClick={this.createPoint}>
-        {t("Save")}
-      </button>
-    </Row>;
-
   render() {
     const panelType = this.panel == "weeds" ? Panel.Weeds : Panel.Points;
     const panelDescription = this.panel == "weeds"
@@ -329,10 +312,15 @@ export class RawCreatePoints
         panel={panelType}
         title={this.panel == "weeds" ? t("Add weed") : t("Add point")}
         backTo={Path.designer(this.panel)}
-        description={panelDescription} />
+        description={panelDescription}>
+        <button className="fb-button green save"
+          title={t("save")}
+          onClick={this.createPoint}>
+          {t("Save")}
+        </button>
+      </DesignerPanelHeader>
       <DesignerPanelContent panelName={"point-creation"}>
         <this.PointProperties />
-        <this.PointActions />
         {panelType == Panel.Points && <hr />}
         {panelType == Panel.Points &&
           <PlantGrid
@@ -350,3 +338,5 @@ export class RawCreatePoints
 }
 
 export const CreatePoints = connect(mapStateToProps)(RawCreatePoints);
+// eslint-disable-next-line import/no-default-export
+export default CreatePoints;
diff --git a/frontend/points/point_edit_actions.tsx b/frontend/points/point_edit_actions.tsx
index b9f8b00b0f..d349c1a0f7 100644
--- a/frontend/points/point_edit_actions.tsx
+++ b/frontend/points/point_edit_actions.tsx
@@ -7,7 +7,7 @@ import {
 } from "farmbot";
 import { ListItem } from "../plants/plant_panel";
 import { round, cloneDeep } from "lodash";
-import { Row, Col, BlurableInput, ColorPicker } from "../ui";
+import { Row, BlurableInput, ColorPicker } from "../ui";
 import { parseIntInput } from "../util";
 import { plantAgeAndStage } from "../plants/map_state_to_props";
 import { EditWeedStatus } from "../plants/edit_plant_status";
@@ -48,7 +48,7 @@ export interface AdditionalWeedPropertiesProps {
 }
 
 export const EditPointProperties = (props: EditPointPropertiesProps) =>
-  <ul>
+  <ul className="grid">
     <ListItem>
       <EditPointLocation
         pointLocation={{
@@ -79,12 +79,12 @@ export const EditPointProperties = (props: EditPointPropertiesProps) =>
 
 export const AdditionalWeedProperties = (props: AdditionalWeedPropertiesProps) =>
   <ul className="additional-weed-properties">
-    <ListItem name={t("Age")}>
-      {daysOldText(plantAgeAndStage(props.point))}
-    </ListItem>
     <ListItem name={t("Status")}>
       <EditWeedStatus weed={props.point} updateWeed={props.updatePoint} />
     </ListItem>
+    <ListItem name={t("Age")}>
+      {daysOldText(plantAgeAndStage(props.point))}
+    </ListItem>
     {Object.entries(props.point.body.meta).map(([key, value]) => {
       switch (key) {
         case "color":
@@ -135,15 +135,13 @@ export interface EditPointNameProps {
 }
 
 export const EditPointName = (props: EditPointNameProps) =>
-  <div className={"point-name-input"}>
-    <Col xs={10}>
-      <label>{t("Name")}</label>
-      <BlurableInput
-        type="text"
-        name="pointName"
-        value={props.name}
-        onCommit={e => props.updatePoint({ name: e.currentTarget.value })} />
-    </Col>
+  <div className={"point-name-input row grid-exp-2"}>
+    <label>{t("Name")}</label>
+    <BlurableInput
+      type="text"
+      name="pointName"
+      value={props.name}
+      onCommit={e => props.updatePoint({ name: e.currentTarget.value })} />
   </div>;
 
 export interface EditPointLocationProps {
@@ -160,7 +158,7 @@ export interface EditPointLocationProps {
 export const EditPointLocation = (props: EditPointLocationProps) =>
   <Row className={"edit-point-location"}>
     {["x", "y", "z"].map((axis: Xyz) =>
-      <Col xs={4} key={axis}>
+      <div key={axis}>
         <label style={{ marginTop: 0 }}>{t("{{axis}} (mm)", { axis })}</label>
         <BlurableInput
           type="number"
@@ -170,7 +168,7 @@ export const EditPointLocation = (props: EditPointLocationProps) =>
           onCommit={e => props.updatePoint({
             [axis]: round(parseIntInput(e.currentTarget.value))
           })} />
-      </Col>)}
+      </div>)}
     <GoToThisLocationButton
       dispatch={props.dispatch}
       locationCoordinate={props.pointLocation}
@@ -187,18 +185,16 @@ export interface EditPointRadiusProps {
 }
 
 export const EditPointRadius = (props: EditPointRadiusProps) =>
-  <Row>
-    <Col xs={6}>
-      <label style={{ marginTop: 0 }}>{t("radius (mm)")}</label>
-      <BlurableInput
-        type="number"
-        name="radius"
-        value={props.radius}
-        min={0}
-        onCommit={e => props.updatePoint({
-          radius: round(parseIntInput(e.currentTarget.value))
-        })} />
-    </Col>
+  <Row className="grid-2-col">
+    <label style={{ marginTop: 0 }}>{t("radius (mm)")}</label>
+    <BlurableInput
+      type="number"
+      name="radius"
+      value={props.radius}
+      min={0}
+      onCommit={e => props.updatePoint({
+        radius: round(parseIntInput(e.currentTarget.value))
+      })} />
   </Row>;
 
 export interface EditPointColorProps {
@@ -208,11 +204,9 @@ export interface EditPointColorProps {
 
 export const EditPointColor = (props: EditPointColorProps) =>
   <div className={"point-color-input"}>
-    <Col xs={2}>
-      <ColorPicker
-        current={(props.color || "green") as ResourceColor}
-        onChange={color => props.updatePoint({ meta: { color } })} />
-    </Col>
+    <ColorPicker
+      current={(props.color || "green") as ResourceColor}
+      onChange={color => props.updatePoint({ meta: { color } })} />
   </div>;
 
 export interface EditPointSoilHeightTagProps {
@@ -221,11 +215,9 @@ export interface EditPointSoilHeightTagProps {
 }
 
 export const EditPointSoilHeightTag = (props: EditPointSoilHeightTagProps) =>
-  <Row>
-    <Col xs={6} className={"soil-height-checkbox"}>
-      <label>{t("at soil level")}</label>
-      <input type="checkbox" name="is_soil_height"
-        onChange={() => props.updatePoint(toggleSoilHeight(props.point))}
-        checked={soilHeightPoint(props.point)} />
-    </Col>
+  <Row className="grid-exp-1">
+    <label>{t("at soil level")}</label>
+    <input type="checkbox" name="is_soil_height"
+      onChange={() => props.updatePoint(toggleSoilHeight(props.point))}
+      checked={soilHeightPoint(props.point)} />
   </Row>;
diff --git a/frontend/points/point_info.tsx b/frontend/points/point_info.tsx
index 8f4e42cf11..e0da900722 100644
--- a/frontend/points/point_info.tsx
+++ b/frontend/points/point_info.tsx
@@ -4,7 +4,7 @@ import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { Panel } from "../farm_designer/panel_header";
 import { Everything, MovementState, ResourceColor } from "../interfaces";
 import { TaggedGenericPointer } from "farmbot";
@@ -46,92 +46,93 @@ export const mapStateToProps = (props: Everything): EditPointProps => ({
   movementState: props.app.movement,
 });
 
-export class RawEditPoint extends React.Component<EditPointProps, {}> {
-  get stringyID() { return Path.getSlug(Path.points()); }
-  get point() {
-    if (this.stringyID) {
-      return this.props.findPoint(parseInt(this.stringyID));
+export const RawEditPoint = (props: EditPointProps) => {
+  const getPoint = () => {
+    const stringyID = Path.getSlug(Path.points());
+    if (stringyID) {
+      return props.findPoint(parseInt(stringyID));
     }
-  }
-  get panelName() { return "point-info"; }
+  };
+  const point = getPoint();
+  const panelName = "point-info";
 
-  render() {
-    const { point } = this;
-    const { dispatch } = this.props;
-    const pointsPath = Path.points();
-    !point && Path.startsWith(pointsPath) && push(pointsPath);
-    const pointColor = point?.body.meta.color || "green";
-    return <DesignerPanel panelName={this.panelName} panel={Panel.Points}>
-      <DesignerPanelHeader
-        panelName={this.panelName}
-        panel={Panel.Points}
-        colorClass={pointColor}
-        titleElement={<ResourceTitle
-          key={point?.body.name}
-          resource={point}
-          save={true}
-          fallback={t("Edit weed")}
-          dispatch={dispatch} />}
-        specialStatus={point?.specialStatus}
-        onSave={() => point?.uuid &&
-          dispatch(save(point.uuid))}
-        backTo={pointsPath}
-        onBack={() => dispatch({
-          type: Actions.TOGGLE_HOVERED_POINT, payload: undefined
-        })}>
-        <div className={"panel-header-icon-group"}>
-          <Popover className={"color-picker"}
-            position={Position.BOTTOM}
-            popoverClassName={"colorpicker-menu gray"}
-            target={<i title={t("select color")}
-              className={"fa fa-paint-brush fb-icon-button"} />}
-            content={<ColorPickerCluster
-              onChange={color =>
-                updatePoint(point, dispatch)({ meta: { color } })}
-              current={pointColor as ResourceColor} />} />
-          {point &&
-            <i title={t("delete")}
-              className={"fa fa-trash fb-icon-button"}
-              onClick={() => dispatch(destroy(point.uuid))} />}
+  const { dispatch } = props;
+  const pointsPath = Path.points();
+  const navigate = useNavigate();
+  !point && Path.startsWith(pointsPath) && navigate(pointsPath);
+  const pointColor = point?.body.meta.color || "green";
+  return <DesignerPanel panelName={panelName} panel={Panel.Points}>
+    <DesignerPanelHeader
+      panelName={panelName}
+      panel={Panel.Points}
+      colorClass={pointColor}
+      titleElement={<ResourceTitle
+        key={point?.body.name}
+        resource={point}
+        save={true}
+        fallback={t("Edit weed")}
+        dispatch={dispatch} />}
+      specialStatus={point?.specialStatus}
+      onSave={() => point?.uuid &&
+        dispatch(save(point.uuid))}
+      backTo={pointsPath}
+      onBack={() => dispatch({
+        type: Actions.TOGGLE_HOVERED_POINT, payload: undefined
+      })}>
+      <div className={"panel-header-icon-group"}>
+        <Popover className={"color-picker"}
+          position={Position.BOTTOM}
+          popoverClassName={"colorpicker-menu gray"}
+          target={<i title={t("select color")}
+            className={"fa fa-paint-brush fb-icon-button"} />}
+          content={<ColorPickerCluster
+            onChange={color =>
+              updatePoint(point, dispatch)({ meta: { color } })}
+            current={pointColor as ResourceColor} />} />
+        {point &&
+          <i title={t("delete")}
+            className={"fa fa-trash fb-icon-button"}
+            onClick={() => dispatch(destroy(point.uuid))} />}
+      </div>
+    </DesignerPanelHeader>
+    <DesignerPanelContent panelName={panelName}>
+      {point
+        ? <div className={"point-panel-content-wrapper"}>
+          <EditPointProperties point={point}
+            botOnline={props.botOnline}
+            dispatch={props.dispatch}
+            arduinoBusy={props.arduinoBusy}
+            currentBotLocation={props.currentBotLocation}
+            movementState={props.movementState}
+            defaultAxes={props.defaultAxes}
+            updatePoint={updatePoint(point, dispatch)} />
+          <ul className="meta">
+            {Object.entries(point.body.meta).map(([key, value]) => {
+              switch (key) {
+                case "color":
+                case "at_soil_level":
+                case "removal_method":
+                case "type":
+                case "gridId":
+                  return <div key={key}
+                    className={`meta-${key}-not-displayed`} />;
+                case "created_by":
+                  return <ListItem name={t("Source")} key={key}>
+                    {lookupPointSource(value)}
+                  </ListItem>;
+                default:
+                  return <ListItem key={key} name={key}>
+                    {value || ""}
+                  </ListItem>;
+              }
+            })}
+          </ul>
         </div>
-      </DesignerPanelHeader>
-      <DesignerPanelContent panelName={this.panelName}>
-        {point
-          ? <div className={"point-panel-content-wrapper"}>
-            <EditPointProperties point={point}
-              botOnline={this.props.botOnline}
-              dispatch={this.props.dispatch}
-              arduinoBusy={this.props.arduinoBusy}
-              currentBotLocation={this.props.currentBotLocation}
-              movementState={this.props.movementState}
-              defaultAxes={this.props.defaultAxes}
-              updatePoint={updatePoint(point, dispatch)} />
-            <ul className="meta">
-              {Object.entries(point.body.meta).map(([key, value]) => {
-                switch (key) {
-                  case "color":
-                  case "at_soil_level":
-                  case "removal_method":
-                  case "type":
-                  case "gridId":
-                    return <div key={key}
-                      className={`meta-${key}-not-displayed`} />;
-                  case "created_by":
-                    return <ListItem name={t("Source")} key={key}>
-                      {lookupPointSource(value)}
-                    </ListItem>;
-                  default:
-                    return <ListItem key={key} name={key}>
-                      {value || ""}
-                    </ListItem>;
-                }
-              })}
-            </ul>
-          </div>
-          : <span>{t("Redirecting")}...</span>}
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+        : <span>{t("Redirecting")}...</span>}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const EditPoint = connect(mapStateToProps)(RawEditPoint);
+// eslint-disable-next-line import/no-default-export
+export default EditPoint;
diff --git a/frontend/points/point_inventory.tsx b/frontend/points/point_inventory.tsx
index 277bb00fc2..72dae8f014 100644
--- a/frontend/points/point_inventory.tsx
+++ b/frontend/points/point_inventory.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { PointInventoryItem } from "./point_inventory_item";
 import { Everything, PointsPanelState } from "../interfaces";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui/empty_state_wrapper";
@@ -37,9 +37,9 @@ import { DEFAULT_CRITERIA } from "../point_groups/criteria/interfaces";
 import { GroupInventoryItem } from "../point_groups/group_inventory_item";
 import { createGroup } from "../point_groups/actions";
 import { pointGroupSubset } from "../plants/select_plants";
-import { push } from "../history";
 import { Path } from "../internal_urls";
 import { deleteAllIds } from "../api/delete_points_handler";
+import { NavigationContext } from "../routes_helpers";
 
 interface PointsSectionProps {
   title: string;
@@ -60,10 +60,10 @@ interface PointsSectionProps {
 const PointsSection = (props: PointsSectionProps) => {
   const { genericPoints, isOpen, dispatch, averageZ, toggleAction } = props;
   return <div className={`points-section ${isOpen ? "open" : ""}`}>
-    <div className={"points-section-header"} onClick={props.toggleOpen}>
+    <div className={"points-section-header row grid-exp-1"}
+      onClick={props.toggleOpen}>
       {props.color && <Saucer color={props.color} />}
       <label>{`${props.title} (${genericPoints.length})`}</label>
-      <i className={`fa fa-caret-${isOpen ? "up" : "down"}`} />
       {isOpen && toggleAction && <ToggleButton
         toggleValue={props.toggleValue}
         customText={{ textFalse: t("off"), textTrue: t("on") }}
@@ -78,6 +78,7 @@ const PointsSection = (props: PointsSectionProps) => {
         }}>
         {t("delete all")}
       </button>}
+      <i className={`fa fa-caret-${isOpen ? "up" : "down"}`} />
     </div>
     <Collapse isOpen={isOpen}>
       {!isUndefined(averageZ) &&
@@ -156,7 +157,13 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
       type: Actions.TOGGLE_POINTS_PANEL_OPTION, payload: section,
     });
 
-  navigate = (id: number | undefined) => () => push(Path.groups(id));
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
+  navigateById = (id: number | undefined) => () => {
+    this.navigate(Path.groups(id));
+  };
 
   render() {
     const { dispatch } = this.props;
@@ -179,7 +186,6 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
       .filter(p => !soilHeightPoint(p))
       .filter(p => !p.body.meta.gridId);
     return <DesignerPanel panelName={"point-inventory"} panel={Panel.Points}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Points}>
         <SearchField nameKey={"points"}
           searchTerm={this.state.searchTerm}
@@ -198,6 +204,7 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
               ...DEFAULT_CRITERIA,
               string_eq: { pointer_type: ["GenericPointer"] },
             },
+            navigate: this.navigate,
           }))}
           addTitle={t("add new group")}
           addClassName={"plus-group"}
@@ -209,14 +216,14 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
               allPoints={this.props.allPoints}
               hovered={false}
               dispatch={dispatch}
-              onClick={this.navigate(group.body.id)}
+              onClick={this.navigateById(group.body.id)}
             />)}
         </PanelSection>
         <PanelSection isOpen={this.props.pointsPanelState.points}
           panel={Panel.Points}
           toggleOpen={this.toggleOpen("points")}
           itemCount={standardPoints.length}
-          addNew={() => push(Path.points("add"))}
+          addNew={() => { this.navigate(Path.points("add")); }}
           addTitle={t("add point")}
           addClassName={"plus-point"}
           extraHeaderContent={this.props.pointsPanelState.points &&
@@ -297,3 +304,5 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
 }
 
 export const Points = connect(mapStateToProps)(RawPoints);
+// eslint-disable-next-line import/no-default-export
+export default Points;
diff --git a/frontend/points/point_inventory_item.tsx b/frontend/points/point_inventory_item.tsx
index bc6b8f12a1..97d8be4299 100644
--- a/frontend/points/point_inventory_item.tsx
+++ b/frontend/points/point_inventory_item.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { TaggedGenericPointer } from "farmbot";
 import { Actions } from "../constants";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { t } from "../i18next_wrapper";
 import { getMode } from "../farm_designer/map/util";
 import { Mode } from "../farm_designer/map/interfaces";
@@ -21,69 +21,66 @@ export interface PointInventoryItemProps {
 }
 
 // The individual points that show up in the farm designer sub nav.
-export class PointInventoryItem extends
-  React.Component<PointInventoryItemProps, {}> {
+export const PointInventoryItem = (props: PointInventoryItemProps) => {
+  const navigate = useNavigate();
+  const point = props.tpp.body;
+  const color = point.meta.color || "green";
+  const { tpp, dispatch, hovered, colorOverride } = props;
+  const pointId = (point.id || "ERR_NO_POINT_ID").toString();
 
-  render() {
-    const point = this.props.tpp.body;
-    const color = point.meta.color || "green";
-    const { tpp, dispatch, hovered, colorOverride } = this.props;
-    const pointId = (point.id || "ERR_NO_POINT_ID").toString();
+  const toggle = (action: "enter" | "leave") => {
+    const isEnter = action === "enter";
+    dispatch({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: isEnter ? tpp.uuid : undefined
+    });
+  };
 
-    const toggle = (action: "enter" | "leave") => {
-      const isEnter = action === "enter";
-      dispatch({
-        type: Actions.TOGGLE_HOVERED_POINT,
-        payload: isEnter ? tpp.uuid : undefined
-      });
-    };
+  const click = () => {
+    if (DevSettings.quickDeleteEnabled()) {
+      dispatch(destroy(tpp.uuid, true));
+      return;
+    }
+    if (getMode() == Mode.boxSelect) {
+      mapPointClickAction(navigate, dispatch, tpp.uuid)();
+      toggle("leave");
+    } else {
+      navigate(Path.points(pointId));
+      dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: tpp.uuid });
+    }
+  };
 
-    const click = () => {
-      if (DevSettings.quickDeleteEnabled()) {
-        dispatch(destroy(tpp.uuid, true));
-        return;
-      }
-      if (getMode() == Mode.boxSelect) {
-        mapPointClickAction(dispatch, tpp.uuid)();
-        toggle("leave");
-      } else {
-        push(Path.points(pointId));
-        dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: tpp.uuid });
-      }
-    };
-
-    const Graphic = () => {
-      if (DevSettings.quickDeleteEnabled()) {
-        return <div className={`quick-delete ${hovered ? "hovered" : ""}`}>X</div>;
-      }
-      return <img
-        className={colorOverride ? "soil-point-graphic" : "point-graphic"}
-        src={svgToUrl(
-          `<svg xmlns='http://www.w3.org/2000/svg'
+  const Graphic = () => {
+    if (DevSettings.quickDeleteEnabled()) {
+      return <div className={`quick-delete ${hovered ? "hovered" : ""}`}>X</div>;
+    }
+    return <img
+      className={colorOverride ? "soil-point-graphic" : "point-graphic"}
+      src={svgToUrl(
+        `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'
            fill='none' stroke-width='1.5' stroke='${color}'>
-           <circle cx='15' cy='15' r='12' fill='${colorOverride || "none"}' />
-           <circle cx='15' cy='15' r='2' />
+           <circle cx='25' cy='25' r='18' fill='${colorOverride || "none"}' />
+           <circle cx='25' cy='25' r='2' />
            </svg>`)}
-        width={32} height={32} />;
-    };
+      width={32} height={32} />;
+  };
 
-    return <div
-      className={`point-search-item ${hovered ? "hovered" : ""}`}
-      key={pointId}
-      onMouseEnter={() => toggle("enter")}
-      onMouseLeave={() => toggle("leave")}
-      onClick={click}>
-      <Graphic />
-      <span className="point-search-item-name">
-        {point.name || t("Untitled point")}
-      </span>
-      <p className="point-search-item-info">
-        <i>{colorOverride
-          ? `(${point.x}, ${point.y}) z${point.z}`
-          : `(${point.x}, ${point.y}) r${point.radius}`}</i>
-        {!isUndefined(this.props.distance) &&
-          <i>{` ${round(this.props.distance)}mm ${t("away")}`}</i>}
-      </p>
-    </div>;
-  }
-}
+  return <div
+    className={`row grid-exp-2 point-search-item ${hovered ? "hovered" : ""}`}
+    key={pointId}
+    onMouseEnter={() => toggle("enter")}
+    onMouseLeave={() => toggle("leave")}
+    onClick={click}>
+    <Graphic />
+    <span className="point-search-item-name">
+      {point.name || t("Untitled point")}
+    </span>
+    <p className="point-search-item-info">
+      <i>{colorOverride
+        ? `(${point.x}, ${point.y}) z${point.z}`
+        : `(${point.x}, ${point.y}) r${point.radius}`}</i>
+      {!isUndefined(props.distance) &&
+        <i>{` ${round(props.distance)}mm ${t("away")}`}</i>}
+    </p>
+  </div>;
+};
diff --git a/frontend/points/soil_height.tsx b/frontend/points/soil_height.tsx
index eeb1f730ce..0791159a92 100644
--- a/frontend/points/soil_height.tsx
+++ b/frontend/points/soil_height.tsx
@@ -6,7 +6,7 @@ import { edit, save } from "../api/crud";
 import { Everything } from "../interfaces";
 import { getFbosConfig } from "../resources/getters";
 import { SourceFbosConfig } from "../devices/interfaces";
-import { Row, Col, BlurableInput } from "../ui";
+import { Row, BlurableInput } from "../ui";
 
 export const MEASURE_SOIL_HEIGHT_NAME = "measure-soil-height";
 
@@ -66,22 +66,16 @@ export interface EditSoilHeightProps {
 
 export const EditSoilHeight = (props: EditSoilHeightProps) => {
   const { sourceFbosConfig } = props;
-  return <Row>
-    {sourceFbosConfig && <Col xs={4}>
-      <label>{t("FarmBot soil z")}</label>
-    </Col>}
-    {sourceFbosConfig && <Col xs={3}>
-      <BlurableInput type="number"
-        onCommit={e =>
-          props.dispatch(setSoilHeight(parseFloat(e.currentTarget.value)))}
-        value={parseFloat("" + sourceFbosConfig("soil_height").value)} />
-    </Col>}
-    <Col xs={sourceFbosConfig ? 5 : 12}>
-      <button className={"fb-button blue"}
-        title={t("use average soil height")}
-        onClick={() => props.dispatch(setSoilHeight(props.averageZ))}>
-        {t("use average z: {{ value }}", { value: props.averageZ })}
-      </button>
-    </Col>
+  return <Row className="grid-exp-1">
+    {sourceFbosConfig && <label>{t("FarmBot soil z")}</label>}
+    {sourceFbosConfig && <BlurableInput type="number"
+      onCommit={e =>
+        props.dispatch(setSoilHeight(parseFloat(e.currentTarget.value)))}
+      value={parseFloat("" + sourceFbosConfig("soil_height").value)} />}
+    <button className={"fb-button gray"}
+      title={t("use average soil height")}
+      onClick={() => props.dispatch(setSoilHeight(props.averageZ))}>
+      {t("use average z: {{ value }}", { value: props.averageZ })}
+    </button>
   </Row>;
 };
diff --git a/frontend/promo/promo.tsx b/frontend/promo/promo.tsx
index 626a7c198c..bac40a5589 100644
--- a/frontend/promo/promo.tsx
+++ b/frontend/promo/promo.tsx
@@ -26,7 +26,7 @@ export const Promo = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // intentionally empty dependency array
 
-  return <div className={"three-d-garden"}>
+  return <div className={"three-d-garden promo"}>
     <div className={"garden-bed-3d-model"}>
       <Canvas shadows={true}>
         <GardenModel {...common} />
diff --git a/frontend/reducer.ts b/frontend/reducer.ts
index 61416cc3b0..81a6a23172 100644
--- a/frontend/reducer.ts
+++ b/frontend/reducer.ts
@@ -50,6 +50,7 @@ export const emptyState = (): AppState => {
       parameter_management: false,
       custom_settings: false,
       farm_designer: false,
+      three_d: false,
       account: false,
       other_settings: false,
     },
@@ -160,6 +161,7 @@ export const appReducer =
         s.settingsPanelState.parameter_management = a.payload;
         s.settingsPanelState.custom_settings = a.payload;
         s.settingsPanelState.farm_designer = a.payload;
+        s.settingsPanelState.three_d = a.payload;
         s.settingsPanelState.account = a.payload;
         s.settingsPanelState.other_settings = a.payload;
         return s;
diff --git a/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts b/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts
index d123ad598b..5fe8ccd3a7 100644
--- a/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts
+++ b/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts
@@ -1,9 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.regimens("my_regimen"));
-jest.mock("../../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../actions", () => ({ selectRegimen: jest.fn() }));
 
 import {
@@ -28,17 +22,18 @@ jest.mock("../../redux/store", () => ({
 import { setActiveRegimenByName } from "../set_active_regimen_by_name";
 import { selectRegimen } from "../actions";
 import { selectAllRegimens } from "../../resources/selectors";
+import { Path } from "../../internal_urls";
 
 describe("setActiveRegimenByName()", () => {
   it("returns early if there is nothing to compare", () => {
-    mockPath = Path.mock(Path.regimens());
+    location.pathname = Path.mock(Path.regimens());
     setActiveRegimenByName();
     expect(selectRegimen).not.toHaveBeenCalled();
   });
 
   it("sometimes can't find a regimen by name", () => {
     const regimen = mockRegimens[0];
-    mockPath = Path.mock(Path.regimens("not_" + regimen.body.name));
+    location.pathname = Path.mock(Path.regimens("not_" + regimen.body.name));
     setActiveRegimenByName();
     expect(selectAllRegimens).toHaveBeenCalled();
     expect(selectRegimen).not.toHaveBeenCalled();
@@ -47,7 +42,7 @@ describe("setActiveRegimenByName()", () => {
   it("finds a regimen by name", () => {
     const regimen = mockRegimens[0];
     jest.clearAllTimers();
-    mockPath = Path.mock(Path.regimens(regimen.body.name));
+    location.pathname = Path.mock(Path.regimens(regimen.body.name));
     setActiveRegimenByName();
     expect(selectRegimen).toHaveBeenCalledWith(regimen.uuid);
   });
diff --git a/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx b/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx
index a5c8268479..601754c283 100644
--- a/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx
+++ b/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { AddButtonProps } from "../interfaces";
 import { AddButton } from "../add_button";
diff --git a/frontend/regimens/bulk_scheduler/__tests__/week_grid_test.tsx b/frontend/regimens/bulk_scheduler/__tests__/week_grid_test.tsx
index 4078f0f40c..3834051c8c 100644
--- a/frontend/regimens/bulk_scheduler/__tests__/week_grid_test.tsx
+++ b/frontend/regimens/bulk_scheduler/__tests__/week_grid_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { WeekGrid } from "../week_grid";
 import { WeekGridProps } from "../interfaces";
diff --git a/frontend/regimens/bulk_scheduler/__tests__/week_row_test.tsx b/frontend/regimens/bulk_scheduler/__tests__/week_row_test.tsx
index bccd9d845b..cf5ad54285 100644
--- a/frontend/regimens/bulk_scheduler/__tests__/week_row_test.tsx
+++ b/frontend/regimens/bulk_scheduler/__tests__/week_row_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { render, mount } from "enzyme";
 import { WeekRow } from "../week_row";
 import { WeekRowProps } from "../interfaces";
diff --git a/frontend/regimens/bulk_scheduler/add_button.tsx b/frontend/regimens/bulk_scheduler/add_button.tsx
index 90b3af84e2..1dce3630c9 100644
--- a/frontend/regimens/bulk_scheduler/add_button.tsx
+++ b/frontend/regimens/bulk_scheduler/add_button.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { AddButtonProps } from "./interfaces";
 import { t } from "../../i18next_wrapper";
 
diff --git a/frontend/regimens/bulk_scheduler/bulk_scheduler.tsx b/frontend/regimens/bulk_scheduler/bulk_scheduler.tsx
index 74a0dcabc1..7cbfc59191 100644
--- a/frontend/regimens/bulk_scheduler/bulk_scheduler.tsx
+++ b/frontend/regimens/bulk_scheduler/bulk_scheduler.tsx
@@ -3,7 +3,7 @@ import { BulkEditorProps } from "./interfaces";
 import { WeekGrid } from "./week_grid";
 import { setTimeOffset, setSequence } from "./actions";
 import {
-  BlurableInput, Row, Col, FBSelect, DropDownItem, NULL_CHOICE,
+  BlurableInput, Row, FBSelect, DropDownItem, NULL_CHOICE,
 } from "../../ui";
 import moment from "moment";
 import { isString, isUndefined } from "lodash";
@@ -40,39 +40,37 @@ export class BulkScheduler extends React.Component<BulkEditorProps, {}> {
   };
 
   SequenceSelectBox = () =>
-    <Col xs={6}>
-      <div className={"sequence-select-box"}>
-        <label>{t("Sequence")}</label>
-        <FBSelect onChange={this.onChange}
-          selectedItem={this.selected()}
-          list={this.all()} />
-      </div>
-    </Col>;
+    <div className="grid half-gap">
+      <label>{t("Sequence")}</label>
+      <FBSelect onChange={this.onChange}
+        selectedItem={this.selected()}
+        list={this.all()} />
+    </div>;
 
   TimeSelection = () =>
-    <Col xs={6}>
-      <div className={"time-selection"}>
+    <div className={"grid no-gap"}>
+      <div className={"row no-gap grid-exp-2"}>
         <label>{t("Time")}</label>
-        <i className="fa fa-clock-o fb-icon-button" onClick={() =>
+        <i className="fa fa-clock-o fb-icon-button invert" onClick={() =>
           this.props.dispatch(setTimeOffset(timeToMs(
             moment().add(3, "minutes").format("HH:mm"))))} />
-        <BlurableInput type="time"
-          value={msToTime(this.props.dailyOffsetMs)}
-          error={nearOsUpdateTime(
-            this.props.dailyOffsetMs,
-            this.props.device.body.ota_hour)
-            ? t(Content.WITHIN_HOUR_OF_OS_UPDATE)
-            : undefined}
-          onCommit={({ currentTarget }) => {
-            this.props.dispatch(setTimeOffset(timeToMs(currentTarget.value)));
-          }} />
       </div>
-    </Col>;
+      <BlurableInput type="time"
+        value={msToTime(this.props.dailyOffsetMs)}
+        error={nearOsUpdateTime(
+          this.props.dailyOffsetMs,
+          this.props.device.body.ota_hour)
+          ? t(Content.WITHIN_HOUR_OF_OS_UPDATE)
+          : undefined}
+        onCommit={({ currentTarget }) => {
+          this.props.dispatch(setTimeOffset(timeToMs(currentTarget.value)));
+        }} />
+    </div>;
 
   render() {
     const { dispatch, weeks } = this.props;
-    return <div className="bulk-scheduler-content">
-      <Row>
+    return <div className="grid double-gap">
+      <Row className="grid-2-col">
         <this.SequenceSelectBox />
         <this.TimeSelection />
       </Row>
diff --git a/frontend/regimens/bulk_scheduler/scheduler.tsx b/frontend/regimens/bulk_scheduler/scheduler.tsx
index fddba35328..665cdb5649 100644
--- a/frontend/regimens/bulk_scheduler/scheduler.tsx
+++ b/frontend/regimens/bulk_scheduler/scheduler.tsx
@@ -68,3 +68,5 @@ export class RawDesignerRegimenScheduler
 
 export const DesignerRegimenScheduler =
   connect(mapStateToProps)(RawDesignerRegimenScheduler);
+// eslint-disable-next-line import/no-default-export
+export default DesignerRegimenScheduler;
diff --git a/frontend/regimens/bulk_scheduler/week_grid.tsx b/frontend/regimens/bulk_scheduler/week_grid.tsx
index 5b03bacbbe..87b76ec0d8 100644
--- a/frontend/regimens/bulk_scheduler/week_grid.tsx
+++ b/frontend/regimens/bulk_scheduler/week_grid.tsx
@@ -1,56 +1,46 @@
-import * as React from "react";
+import React from "react";
 import { WeekRow } from "./week_row";
 import { WeekGridProps } from "./interfaces";
 import { pushWeek, popWeek, deselectDays, selectDays } from "./actions";
-import { Row, Col } from "../../ui/index";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export function WeekGrid({ weeks, dispatch }: WeekGridProps) {
-  return <div className={"week-grid"}>
-    <Row>
-      <Col xs={12}>
-        <label className="regimen-days-label">
-          {t("Days")}
-        </label>
-        {weeks.map(function (week, i) {
-          return <WeekRow key={i} index={i} week={week}
-            dispatch={dispatch} />;
-        })}
-      </Col>
-    </Row>
-    <Row>
-      <Col xs={12}>
-        <div className="week-grid-meta-buttons">
-          <div className={"weed-grid-plus-minus-buttons"}>
-            <button
-              className="green widget-control fb-button"
-              title={t("add week")}
-              onClick={() => dispatch(pushWeek())}>
-              <i className="fa fa-plus" /> {t("Week")}
-            </button>
-            <button
-              className="red widget-control fb-button"
-              title={t("remove week")}
-              onClick={() => dispatch(popWeek())}>
-              <i className="fa fa-minus" /> {t("Week")}
-            </button>
-          </div>
-          <div className={"weed-grid-bulk-select-buttons"}>
-            <button
-              className="gray widget-control fb-button"
-              title={t("deselect all days")}
-              onClick={() => dispatch(deselectDays())}>
-              {t("Deselect all")}
-            </button>
-            <button
-              className="gray widget-control fb-button"
-              title={t("select all days")}
-              onClick={() => dispatch(selectDays())}>
-              {t("Select all")}
-            </button>
-          </div>
-        </div>
-      </Col>
+  return <div className="week-grid grid">
+    <label className="regimen-days-label">
+      {t("Days")}
+    </label>
+    <div>
+      {weeks.map(function (week, i) {
+        return <WeekRow key={i} index={i} week={week}
+          dispatch={dispatch} />;
+      })}
+    </div>
+    <Row className="week-grid-meta-buttons">
+      <button
+        className="green widget-control fb-button"
+        title={t("add week")}
+        onClick={() => dispatch(pushWeek())}>
+        <i className="fa fa-plus" /> {t("Week")}
+      </button>
+      <button
+        className="red widget-control fb-button"
+        title={t("remove week")}
+        onClick={() => dispatch(popWeek())}>
+        <i className="fa fa-minus" /> {t("Week")}
+      </button>
+      <button
+        className="gray widget-control fb-button"
+        title={t("deselect all days")}
+        onClick={() => dispatch(deselectDays())}>
+        {t("Deselect all")}
+      </button>
+      <button
+        className="gray widget-control fb-button"
+        title={t("select all days")}
+        onClick={() => dispatch(selectDays())}>
+        {t("Select all")}
+      </button>
     </Row>
   </div>;
 }
diff --git a/frontend/regimens/bulk_scheduler/week_row.tsx b/frontend/regimens/bulk_scheduler/week_row.tsx
index 3881c91196..550e5b9573 100644
--- a/frontend/regimens/bulk_scheduler/week_row.tsx
+++ b/frontend/regimens/bulk_scheduler/week_row.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { WeekRowProps, DayProps, DAYS } from "./interfaces";
 import { toggleDay } from "./actions";
 import { t } from "../../i18next_wrapper";
diff --git a/frontend/regimens/editor/__tests__/active_editor_test.tsx b/frontend/regimens/editor/__tests__/active_editor_test.tsx
index d1c1fd1d58..371f3953c9 100644
--- a/frontend/regimens/editor/__tests__/active_editor_test.tsx
+++ b/frontend/regimens/editor/__tests__/active_editor_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../../internal_urls";
-const mockPath = Path.mock(Path.regimens("1"));
-jest.mock("../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 import React from "react";
 import { mount } from "enzyme";
 import { ActiveEditor } from "../active_editor";
diff --git a/frontend/regimens/editor/__tests__/copy_button_test.tsx b/frontend/regimens/editor/__tests__/copy_button_test.tsx
index dcb309f2ef..bc857b74b6 100644
--- a/frontend/regimens/editor/__tests__/copy_button_test.tsx
+++ b/frontend/regimens/editor/__tests__/copy_button_test.tsx
@@ -8,7 +8,6 @@ import React from "react";
 import { mount } from "enzyme";
 import { CopyButton } from "../copy_button";
 import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
-import { push } from "../../../history";
 import { setActiveRegimenByName } from "../../set_active_regimen_by_name";
 import { init } from "../../../api/crud";
 import { CopyButtonProps } from "../interfaces";
@@ -32,7 +31,7 @@ describe("<CopyButton />", () => {
     expect(init).toHaveBeenCalledWith("Regimen", {
       color: "red", name: "Foo copy 1", regimen_items, body: []
     });
-    expect(push).toHaveBeenCalledWith(Path.regimens("Foo_copy_1"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.regimens("Foo_copy_1"));
     expect(setActiveRegimenByName).toHaveBeenCalled();
   });
 });
diff --git a/frontend/regimens/editor/__tests__/regimen_edit_components_test.tsx b/frontend/regimens/editor/__tests__/regimen_edit_components_test.tsx
index c9360e8df4..0e135a10f0 100644
--- a/frontend/regimens/editor/__tests__/regimen_edit_components_test.tsx
+++ b/frontend/regimens/editor/__tests__/regimen_edit_components_test.tsx
@@ -4,13 +4,6 @@ jest.mock("../../../api/crud", () => ({
   overwrite: jest.fn(),
 }));
 
-import { Path } from "../../../internal_urls";
-const mockPath = Path.mock(Path.regimens("1"));
-jest.mock("../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 import React from "react";
 import { mount } from "enzyme";
 import {
@@ -22,8 +15,8 @@ import { RegimenProps } from "../../interfaces";
 import { VariableDeclaration } from "farmbot";
 import { clickButton } from "../../../__test_support__/helpers";
 import { destroy, save, overwrite } from "../../../api/crud";
-import { push } from "../../../history";
 import { cloneDeep } from "lodash";
+import { Path } from "../../../internal_urls";
 
 const fakeProps = (): RegimenProps => ({
   regimen: fakeRegimen(),
@@ -83,6 +76,6 @@ describe("<OpenSchedulerButton />", () => {
   it("opens scheduler", () => {
     const wrapper = mount(<OpenSchedulerButton />);
     clickButton(wrapper, 0, "schedule item");
-    expect(push).toHaveBeenCalledWith(Path.regimens("scheduler"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.regimens("scheduler"));
   });
 });
diff --git a/frontend/regimens/editor/active_editor.tsx b/frontend/regimens/editor/active_editor.tsx
index 40bd13a148..b7bda9ed21 100644
--- a/frontend/regimens/editor/active_editor.tsx
+++ b/frontend/regimens/editor/active_editor.tsx
@@ -49,7 +49,7 @@ export class ActiveEditor
   };
 
   render() {
-    return <div className="regimen-editor-content">
+    return <div className="regimen-editor-content grid">
       <div id="regimen-editor-tools" className="regimen-editor-tools">
         <SectionHeader title={t("Variables")}
           count={Object.values(this.props.variableData)
@@ -62,7 +62,6 @@ export class ActiveEditor
             <this.LocalsList />
           </ErrorBoundary>
         </Collapse>
-        <hr />
       </div>
       <OpenSchedulerButton />
       <ErrorBoundary>
diff --git a/frontend/regimens/editor/copy_button.tsx b/frontend/regimens/editor/copy_button.tsx
index 160b04e47f..908480053a 100644
--- a/frontend/regimens/editor/copy_button.tsx
+++ b/frontend/regimens/editor/copy_button.tsx
@@ -3,24 +3,29 @@ import { CopyButtonProps } from "./interfaces";
 import { init } from "../../api/crud";
 import { TaggedRegimen } from "farmbot";
 import { defensiveClone, urlFriendly } from "../../util";
-import { push } from "../../history";
+import { NavigateFunction, useNavigate } from "react-router";
 import { setActiveRegimenByName } from "../set_active_regimen_by_name";
 import { t } from "../../i18next_wrapper";
 import { Path } from "../../internal_urls";
 
-export const CopyButton = ({ dispatch, regimen }: CopyButtonProps) =>
-  <i className={"fa fa-clone fb-icon-button"}
+export const CopyButton = ({ dispatch, regimen }: CopyButtonProps) => {
+  const navigate = useNavigate();
+  return <i className={"fa fa-clone fb-icon-button"}
     title={t("copy")}
-    onClick={() => dispatch(copyRegimen(regimen))} />;
+    onClick={() => dispatch(copyRegimen(navigate, regimen))} />;
+};
 
 let count = 1;
 
-const copyRegimen = (payload: TaggedRegimen) =>
+const copyRegimen = (
+  navigate: NavigateFunction,
+  payload: TaggedRegimen,
+) =>
   (dispatch: Function) => {
     const copy = defensiveClone(payload);
     copy.body.id = undefined;
     copy.body.name = copy.body.name + t(" copy ") + (count++);
     dispatch(init(copy.kind, copy.body));
-    push(Path.regimens(urlFriendly(copy.body.name)));
+    navigate(Path.regimens(urlFriendly(copy.body.name)));
     setActiveRegimenByName();
   };
diff --git a/frontend/regimens/editor/editor.tsx b/frontend/regimens/editor/editor.tsx
index 38c0a75dca..fccb454f9a 100644
--- a/frontend/regimens/editor/editor.tsx
+++ b/frontend/regimens/editor/editor.tsx
@@ -11,15 +11,13 @@ import {
   setActiveRegimenByName,
 } from "../set_active_regimen_by_name";
 import {
-  EmptyStateWrapper, EmptyStateGraphic, Popover, ColorPickerCluster,
+  EmptyStateWrapper, EmptyStateGraphic,
 } from "../../ui";
 import { isTaggedRegimen } from "../../resources/tagged_resources";
 import { Content } from "../../constants";
 import { ActiveEditor } from "./active_editor";
 import { ResourceTitle } from "../../sequences/panel/editor";
 import { Path } from "../../internal_urls";
-import { edit } from "../../api/crud";
-import { Position } from "@blueprintjs/core";
 import { addRegimen } from "../list/add_regimen";
 import { selectAllRegimens } from "../../resources/selectors_by_kind";
 import { RegimenButtonGroup } from "./regimen_edit_components";
@@ -48,14 +46,6 @@ export class RawDesignerRegimenEditor
         backTo={Path.regimens()}>
         {regimen &&
           <RegimenButtonGroup regimen={regimen} dispatch={this.props.dispatch} />}
-        {regimen && <Popover className={"color-picker"}
-          position={Position.BOTTOM}
-          popoverClassName={"colorpicker-menu gray"}
-          target={<i title={t("select color")}
-            className={"fa fa-paint-brush fb-icon-button"} />}
-          content={<ColorPickerCluster
-            onChange={color => this.props.dispatch(edit(regimen, { color }))}
-            current={regimen.body.color} />} />}
         {!regimen && <button
           className={"fb-button green"}
           title={t("add new regimen")}
@@ -83,3 +73,5 @@ export class RawDesignerRegimenEditor
 
 export const DesignerRegimenEditor =
   connect(mapStateToProps)(RawDesignerRegimenEditor);
+// eslint-disable-next-line import/no-default-export
+export default DesignerRegimenEditor;
diff --git a/frontend/regimens/editor/regimen_edit_components.tsx b/frontend/regimens/editor/regimen_edit_components.tsx
index e47d156c13..21904634f3 100644
--- a/frontend/regimens/editor/regimen_edit_components.tsx
+++ b/frontend/regimens/editor/regimen_edit_components.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { RegimenProps } from "../interfaces";
-import { SaveBtn } from "../../ui";
+import { SaveBtn, Popover, ColorPickerCluster } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { VariableNode } from "../../sequences/locals_list/locals_list_support";
 import { ScopeDeclarationBodyItem } from "farmbot";
@@ -8,10 +8,11 @@ import { defensiveClone } from "../../util";
 import {
   addOrEditBodyVariables,
 } from "../../sequences/locals_list/handle_select";
-import { overwrite, save, destroy } from "../../api/crud";
+import { overwrite, save, destroy, edit } from "../../api/crud";
 import { CopyButton } from "./copy_button";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { Path } from "../../internal_urls";
+import { Position } from "@blueprintjs/core";
 
 export const editRegimenVariables = (props: RegimenProps) =>
   (bodyVariables: VariableNode[]) =>
@@ -24,23 +25,34 @@ export const editRegimenVariables = (props: RegimenProps) =>
 
 export const RegimenButtonGroup = (props: RegimenProps) => {
   const { regimen, dispatch } = props;
-  return <div className="button-group">
+  const navigate = useNavigate();
+  return <div className="row panel-header-icon-group">
+    <div className="row no-gap">
+      <Popover className={"color-picker"}
+        position={Position.BOTTOM}
+        popoverClassName={"colorpicker-menu gray"}
+        target={<i title={t("select color")}
+          className={"fa fa-paint-brush fb-icon-button"} />}
+        content={<ColorPickerCluster
+          onChange={color => props.dispatch(edit(regimen, { color }))}
+          current={regimen.body.color} />} />
+      <i className={"fa fa-trash fb-icon-button"}
+        title={t("delete regimen")}
+        onClick={() => dispatch(destroy(regimen.uuid))
+          .then(() => { navigate(Path.regimens()); })} />
+      <CopyButton regimen={regimen} dispatch={dispatch} />
+    </div>
     <SaveBtn
       status={regimen.specialStatus}
       onClick={() => dispatch(save(regimen.uuid))} />
-    <CopyButton regimen={regimen} dispatch={dispatch} />
-    <i className={"fa fa-trash fb-icon-button"}
-      title={t("delete regimen")}
-      onClick={() => dispatch(destroy(regimen.uuid))
-        .then(() => push(Path.regimens()))} />
   </div>;
 };
 
-export const OpenSchedulerButton = () =>
-  <div className={"open-bulk-scheduler-btn-wrapper"}>
-    <button className={"fb-button gray"}
-      title={t("open scheduler panel")}
-      onClick={() => push(Path.regimens("scheduler"))}>
-      {t("Schedule item")}
-    </button>
-  </div>;
+export const OpenSchedulerButton = () => {
+  const navigate = useNavigate();
+  return <button className={"fb-button gray schedule-regimen-item"}
+    title={t("open scheduler panel")}
+    onClick={() => { navigate(Path.regimens("scheduler")); }}>
+    {t("Schedule item")}
+  </button>;
+};
diff --git a/frontend/regimens/editor/regimen_rows.tsx b/frontend/regimens/editor/regimen_rows.tsx
index cf1f0c4891..26a5c9e316 100644
--- a/frontend/regimens/editor/regimen_rows.tsx
+++ b/frontend/regimens/editor/regimen_rows.tsx
@@ -19,13 +19,13 @@ import {
 } from "../../sequences/locals_list/new_variable";
 
 export const RegimenRows = (props: RegimenRowsProps) =>
-  <div className={"regimen"}>
+  <div className={"regimen grid double-gap"}>
     {props.calendar.map(regimenDay(props.dispatch, props.resources))}
   </div>;
 
 const regimenDay = (dispatch: Function, resources: ResourceIndex) =>
   (group: CalendarRow, dayIndex: number) =>
-    <div className="regimen-day" key={dayIndex}>
+    <div className="regimen-day grid" key={dayIndex}>
       <label> {t("Day {{day}}", { day: group.day })} </label>
       {group.items.map(regimenItemRow(dispatch, resources, dayIndex))}
     </div>;
@@ -36,18 +36,18 @@ const regimenItemRow = (
   (row: RegimenItemCalendarRow, itemIndex: number) =>
     <div className={`${row.color} regimen-event`}
       key={`${dayIndex}.${itemIndex}`}>
-      <div className={"regimen-event-titlebar"}>
-        <span className={"regimen-event-title"}>
-          {row.sequenceName}
+      <div className={"regimen-event-titlebar row grid-exp-2"}>
+        <span className="regimen-event-time">{row.hhmm}</span>
+        {row.sequenceName}
+        <div>
           <Link to={Path.sequences(urlFriendly(row.sequenceName))}
             onClick={setActiveSequenceByName}>
             <i className={"fa fa-external-link fb-icon-button"} />
           </Link>
-        </span>
-        <span className="regimen-event-time">{row.hhmm}</span>
-        <i className={"fa fa-trash regimen-control fb-icon-button"}
-          onClick={() =>
-            dispatch(removeRegimenItem(row.item, row.regimen))} />
+          <i className={"fa fa-trash regimen-control fb-icon-button"}
+            onClick={() =>
+              dispatch(removeRegimenItem(row.item, row.regimen))} />
+        </div>
       </div>
       {row.variables.length > 0 &&
         <DisplayVarValue row={row} resources={resources} />}
@@ -61,13 +61,13 @@ const removeRegimenItem = (item: RegimenItem, r: TaggedRegimen) => {
 
 const DisplayVarValue = (props: DisplayVarValueProps) => {
   const { variables, regimen } = props.row;
-  return <div className={"regimen-item-variables"}>
+  return <div className={"regimen-item-variables grid half-gap"}>
     {variables.map(variable => {
       if (variable) {
         const variableNode = reduceVariables(regimen.body.body)[variable];
         if (variableNode) {
           return <span key={variable}
-            className="regimen-event-variable">
+            className="regimen-event-variable row grid-exp-2">
             <VariableIcon variableType={determineVariableType(variableNode)} />
             {withPrefix(variable,
               determineDropdown(variableNode, props.resources).label)}
diff --git a/frontend/regimens/list/__tests__/add_regimen_test.ts b/frontend/regimens/list/__tests__/add_regimen_test.ts
index f205970d46..ffd19bf61a 100644
--- a/frontend/regimens/list/__tests__/add_regimen_test.ts
+++ b/frontend/regimens/list/__tests__/add_regimen_test.ts
@@ -1,18 +1,11 @@
-import { Path } from "../../../internal_urls";
-const mockPath = Path.mock(Path.regimens());
-jest.mock("../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../set_active_regimen_by_name", () => ({
   setActiveRegimenByName: jest.fn()
 }));
 
 import { addRegimen } from "../add_regimen";
 import { Actions } from "../../../constants";
-import { push } from "../../../history";
 import { setActiveRegimenByName } from "../../set_active_regimen_by_name";
+import { Path } from "../../../internal_urls";
 
 describe("addRegimen()", () => {
   it("dispatches a new regimen onclick", () => {
@@ -24,7 +17,7 @@ describe("addRegimen()", () => {
         kind: "Regimen"
       })
     });
-    expect(push).toHaveBeenCalledWith(Path.regimens("New_Regimen_0"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.regimens("New_Regimen_0"));
     expect(setActiveRegimenByName).toHaveBeenCalled();
   });
 });
diff --git a/frontend/regimens/list/__tests__/regimen_list_item_test.tsx b/frontend/regimens/list/__tests__/regimen_list_item_test.tsx
index 202e97cee0..b6ed820f19 100644
--- a/frontend/regimens/list/__tests__/regimen_list_item_test.tsx
+++ b/frontend/regimens/list/__tests__/regimen_list_item_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../../internal_urls";
-let mockPath = Path.mock(Path.regimens());
-jest.mock("../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../actions", () => ({ selectRegimen: jest.fn() }));
 
 jest.mock("../../../api/crud", () => ({
@@ -17,9 +10,9 @@ import { RegimenListItem } from "../regimen_list_item";
 import { render, shallow, mount } from "enzyme";
 import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
 import { SpecialStatus, Color } from "farmbot";
-import { push } from "../../../history";
 import { selectRegimen } from "../../actions";
 import { edit } from "../../../api/crud";
+import { Path } from "../../../internal_urls";
 
 describe("<RegimenListItem/>", () => {
   const fakeProps = (): RegimenListItemProps => ({
@@ -61,7 +54,7 @@ describe("<RegimenListItem/>", () => {
     const wrapper = shallow(<RegimenListItem {...p} />);
     wrapper.simulate("click");
     expect(selectRegimen).toHaveBeenCalledWith(p.regimen.uuid);
-    expect(push).toHaveBeenCalledWith(Path.regimens("foo"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.regimens("foo"));
   });
 
   it("changes color", () => {
@@ -76,7 +69,7 @@ describe("<RegimenListItem/>", () => {
     p.regimen.body.name = "";
     p.regimen.body.color = "" as Color;
     p.regimen.specialStatus = SpecialStatus.DIRTY;
-    mockPath = Path.mock(Path.regimens());
+    location.pathname = Path.mock(Path.regimens());
     const wrapper = mount(<RegimenListItem {...p} />);
     expect(wrapper.text()).toEqual(" *");
     expect(wrapper.find(".saucer").hasClass("gray")).toBeTruthy();
diff --git a/frontend/regimens/list/add_regimen.ts b/frontend/regimens/list/add_regimen.ts
index 45811a0cb3..11f44d48d4 100644
--- a/frontend/regimens/list/add_regimen.ts
+++ b/frontend/regimens/list/add_regimen.ts
@@ -1,4 +1,4 @@
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { TaggedRegimen } from "farmbot";
 import { init } from "../../api/crud";
 import { setActiveRegimenByName } from "../set_active_regimen_by_name";
@@ -16,6 +16,7 @@ const emptyRegimenBody = (regimenCount: number): TaggedRegimen["body"] => ({
 export const addRegimen = (regimenCount: number) => (dispatch: Function) => {
   const newRegimen = emptyRegimenBody(regimenCount);
   dispatch(init("Regimen", newRegimen));
-  push(Path.regimens(urlFriendly(newRegimen.name)));
+  const navigate = useNavigate();
+  navigate(Path.regimens(urlFriendly(newRegimen.name)));
   setActiveRegimenByName();
 };
diff --git a/frontend/regimens/list/list.tsx b/frontend/regimens/list/list.tsx
index b207c1b5a6..37e1d3e532 100644
--- a/frontend/regimens/list/list.tsx
+++ b/frontend/regimens/list/list.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../../farm_designer/panel_header";
+import { Panel } from "../../farm_designer/panel_header";
 import { RegimensListProps, RegimensListState } from "./interfaces";
 import { t } from "../../i18next_wrapper";
 import { SearchField } from "../../ui/search_field";
@@ -29,7 +29,6 @@ export class RawDesignerRegimenList
   render() {
     const panelName = "designer-regimen-list";
     return <DesignerPanel panelName={panelName} panel={Panel.Regimens}>
-      <DesignerNavTabs />
       <DesignerPanelTop
         panel={Panel.Regimens}
         onClick={() =>
@@ -63,3 +62,5 @@ export class RawDesignerRegimenList
 
 export const DesignerRegimenList =
   connect(mapStateToProps)(RawDesignerRegimenList);
+// eslint-disable-next-line import/no-default-export
+export default DesignerRegimenList;
diff --git a/frontend/regimens/list/regimen_list_item.tsx b/frontend/regimens/list/regimen_list_item.tsx
index eb2b42709d..63eb751f90 100644
--- a/frontend/regimens/list/regimen_list_item.tsx
+++ b/frontend/regimens/list/regimen_list_item.tsx
@@ -4,7 +4,7 @@ import { urlFriendly } from "../../util";
 import { selectRegimen } from "../actions";
 import { Content } from "../../constants";
 import { t } from "../../i18next_wrapper";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { Path } from "../../internal_urls";
 import { edit } from "../../api/crud";
 import { ColorPicker } from "../../ui";
@@ -12,10 +12,11 @@ import { ColorPicker } from "../../ui";
 export function RegimenListItem(props: RegimenListItemProps) {
   const { regimen, dispatch, inUse } = props;
   const label = (regimen.body.name || "") + (regimen.specialStatus ? " *" : "");
+  const navigate = useNavigate();
   return <div className={"regimen-search-item"}
     onClick={() => {
       dispatch(selectRegimen(regimen.uuid));
-      push(Path.regimens(urlFriendly(regimen.body.name)));
+      navigate(Path.regimens(urlFriendly(regimen.body.name)));
     }}
     title={t("open regimen")}>
     <div className={"regimen-color"} onClick={e => e.stopPropagation()}>
diff --git a/frontend/route_config.tsx b/frontend/route_config.tsx
index c9cdc3413e..04177f9bd3 100644
--- a/frontend/route_config.tsx
+++ b/frontend/route_config.tsx
@@ -1,616 +1,143 @@
-import { RouteConfig } from "takeme";
-import { Apology } from "./apology";
+import React from "react";
 import { Path } from "./internal_urls";
-import { AnyConnectedComponent, ChangeRoute } from "./routes";
+import { Navigate, RouteObject } from "react-router";
 
-/** 99% of route configurations will use this interface. */
-interface UnboundRouteConfigNoChild<T> {
-  children: false,
-  $: string;
-  getModule: () => Promise<T>;
-  key: keyof T;
-}
+const FarmEvents = React.lazy(() => import("./farm_events/farm_events"));
+const AddFarmEvent = React.lazy(() => import("./farm_events/add_farm_event"));
+const EditFarmEvent = React.lazy(() => import("./farm_events/edit_farm_event"));
+const Plants = React.lazy(() => import("./plants/plant_inventory"));
+const LocationInfo = React.lazy(() => import("./farm_designer/location_info"));
+const SavedGardens = React.lazy(() => import("./saved_gardens/saved_gardens"));
+const SelectPlants = React.lazy(() => import("./plants/select_plants"));
+const Points = React.lazy(() => import("./points/point_inventory"));
+const CreatePoints = React.lazy(() => import("./points/create_points"));
+const EditPoint = React.lazy(() => import("./points/point_info"));
+const Curves = React.lazy(() => import("./curves/curves_inventory"));
+const EditCurve = React.lazy(() => import("./curves/edit_curve"));
+const CropCatalog = React.lazy(() => import("./plants/crop_catalog"));
+const AddPlant = React.lazy(() => import("./plants/add_plant"));
+const CropInfo = React.lazy(() => import("./plants/crop_info"));
+const PlantInfo = React.lazy(() => import("./plants/plant_info"));
+const AddGarden = React.lazy(() => import("./saved_gardens/garden_add"));
+const EditGarden = React.lazy(() => import("./saved_gardens/garden_edit"));
+const DesignerControls = React.lazy(() => import("./controls/controls"));
+const SetupWizard = React.lazy(() => import("./wizard/index"));
+const DesignerSensors = React.lazy(() => import("./sensors/sensors"));
+const DesignerPhotos = React.lazy(() => import("./photos/photos"));
+const DesignerFarmwareList = React.lazy(() => import("./farmware/panel/list"));
+const DesignerFarmwareAdd = React.lazy(() => import("./farmware/panel/add"));
+const DesignerFarmwareInfo = React.lazy(() => import("./farmware/panel/info"));
+const DesignerSequenceList = React.lazy(() => import("./sequences/panel/list"));
+const DesignerSequenceEditor = React.lazy(() => import("./sequences/panel/editor"));
+const DesignerSequencePreview = React.lazy(() => import("./sequences/panel/preview"));
+const DesignerRegimenList = React.lazy(() => import("./regimens/list/list"));
+const DesignerRegimenScheduler = React.lazy(() => import("./regimens/bulk_scheduler/scheduler"));
+const DesignerRegimenEditor = React.lazy(() => import("./regimens/editor/editor"));
+const MessagesPanel = React.lazy(() => import("./messages/messages"));
+const SoftwareDocsPanel = React.lazy(() => import("./help/documentation/software"));
+const DeveloperDocsPanel = React.lazy(() => import("./help/documentation/developer"));
+const GenesisDocsPanel = React.lazy(() => import("./help/documentation/genesis"));
+const ExpressDocsPanel = React.lazy(() => import("./help/documentation/express"));
+const MetaDocsPanel = React.lazy(() => import("./help/documentation/meta"));
+const EducationDocsPanel = React.lazy(() => import("./help/documentation/education"));
+const ToursPanel = React.lazy(() => import("./help/tours/panel"));
+const SupportPanel = React.lazy(() => import("./help/support"));
+const JobsPanel = React.lazy(() => import("./devices/jobs"));
+const DesignerSettings = React.lazy(() => import("./settings"));
+const Tools = React.lazy(() => import("./tools"));
+const AddTool = React.lazy(() => import("./tools/add_tool"));
+const EditTool = React.lazy(() => import("./tools/edit_tool"));
+const AddToolSlot = React.lazy(() => import("./tools/add_tool_slot"));
+const EditToolSlot = React.lazy(() => import("./tools/edit_tool_slot"));
+const GroupListPanel = React.lazy(() => import("./point_groups/group_list_panel"));
+const GroupDetail = React.lazy(() => import("./point_groups/group_detail"));
+const Weeds = React.lazy(() => import("./weeds/weeds_inventory"));
+const EditWeed = React.lazy(() => import("./weeds/weeds_edit"));
+const Zones = React.lazy(() => import("./zones/zones_inventory"));
+const AddZone = React.lazy(() => import("./zones/add_zone"));
+const EditZone = React.lazy(() => import("./zones/edit_zone"));
+const Logs = React.lazy(() => import("./logs"));
+const Sequences = React.lazy(() => import("./sequences/sequences"));
+const FarmDesigner = React.lazy(() => import("./farm_designer"));
+const FourOhFour = React.lazy(() => import("./404"));
 
-/** A few routes (in the FarmDesigner, mainly) need to use child routes.
- * If that's the case, set `children: true` and pass in a `getChild`/`childKey`
- * property.
- */
-interface UnboundRouteConfigChild<T, U> {
-  children: true,
-  $: string;
-  getModule: () => Promise<T>;
-  key: keyof T;
-  getChild: () => Promise<U>;
-  childKey: keyof U;
-}
-
-/** The union of both route config types. */
-export type UnboundRouteConfig<T, U> =
-  UnboundRouteConfigNoChild<T> | UnboundRouteConfigChild<T, U>;
-
-/** This is the preferred way to generate a route in the app.
- *  PROBLEM:
- *   1. We want to lazy load each route's component to shrink the bundle size.
- *   2. We don't have access to `this.setState()` until runtime because `this`
- *      is a mounted component.
- *  SOLUTION:
- *   Write a helper function that creates a route in multiple steps.
- *   1. Pass in an object (UnboundRouteConfig<T, U>) that describes:
- *     * the URL
- *     * The module's file location (dynamic `import()` that returns the module
- *       as a promise)
- *     * The specific module that you want to use for the route.
- *     * (optional) a set of child routes (like the FarmDesigner side panel)
- *   2. Once that information is available, we can create an "unbound route".
- *      An unbound route is a function that has all needed URL / module
- *      information but does NOT yet have a callback to trigger when a route
- *      changes. Such a function is generated later (at runtime, in
- *      componentDidMount) and passed to the "unbound" route to create a "real"
- *      URL route that is needed by the `takeme` routing library.
- *      Workflow:
- *
- *      Determine how to load the route and children =>
- *        Pass that information to route() =>
- *          Pass the resulting UnboundRoute to `takeme` router. =>
- *            DONE.
- */
-function route<T, U>(info: UnboundRouteConfig<T, U>) {
-  return (changeRoute: ChangeRoute): RouteConfig => {
-    const { $ } = info;
-    return {
-      $,
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      enter: async () => {
-        try {
-          const comp = (await info.getModule())[info.key];
-          if (info.children) {
-            const child = (await info.getChild())[info.childKey];
-            changeRoute(comp as unknown as AnyConnectedComponent,
-              info,
-              child as unknown as AnyConnectedComponent);
-          } else {
-            changeRoute(comp as unknown as AnyConnectedComponent, info);
-          }
-        } catch (e) {
-          console.error(e);
-          changeRoute(Apology, info);
-        }
-      }
-    };
-  };
-}
-
-const getModule = () => import("./farm_designer");
-const key = "FarmDesigner";
-
-/** The 404 handler. All unresolved routes end up here. MUST BE LAST ITEM IN
- * ROUTE CONFIG!!! */
-const NOT_FOUND_ROUTES = [
-  route({
-    children: true,
-    $: "*",
-    getModule,
-    key,
-    getChild: () => import("./404"),
-    childKey: "FourOhFour"
-  }),
-  route({
-    children: false,
-    $: "*",
-    getModule: () => import("./404"),
-    key: "FourOhFour"
-  }),
+export const CHILD_ROUTES: RouteObject[] = [
+  { path: Path.farmEvents(), element: <FarmEvents /> },
+  { path: Path.farmEvents("add"), element: <AddFarmEvent /> },
+  { path: Path.farmEvents(":farm_event_id"), element: <EditFarmEvent /> },
+  { path: Path.plants(), element: <Plants /> },
+  { path: Path.location(), element: <LocationInfo /> },
+  { path: Path.plants("gardens"), element: <SavedGardens /> },
+  { path: Path.plants("select"), element: <SelectPlants /> },
+  { path: Path.points(), element: <Points /> },
+  { path: Path.points("add"), element: <CreatePoints /> },
+  { path: Path.points(":point_id"), element: <EditPoint /> },
+  { path: Path.curves(), element: <Curves /> },
+  { path: Path.curves(":curve_id"), element: <EditCurve /> },
+  { path: Path.cropSearch(), element: <CropCatalog /> },
+  { path: Path.cropSearch(":crop/add"), element: <AddPlant /> },
+  { path: Path.cropSearch(":crop"), element: <CropInfo /> },
+  { path: Path.plants(":plant_id"), element: <PlantInfo /> },
+  { path: Path.savedGardens(), element: <SavedGardens /> },
+  { path: Path.plantTemplates(), element: <Plants /> },
+  { path: Path.plantTemplates(":plant_template_id"), element: <PlantInfo /> },
+  { path: Path.savedGardens("add"), element: <AddGarden /> },
+  { path: Path.savedGardens(":saved_garden_id"), element: <EditGarden /> },
+  { path: Path.controls(), element: <DesignerControls /> },
+  { path: Path.setup(), element: <SetupWizard /> },
+  { path: Path.designer("sensors"), element: <DesignerSensors /> },
+  { path: Path.photos(), element: <DesignerPhotos /> },
+  { path: Path.farmware(), element: <DesignerFarmwareList /> },
+  { path: Path.farmware("add"), element: <DesignerFarmwareAdd /> },
+  { path: Path.farmware(":farmware_name"), element: <DesignerFarmwareInfo /> },
+  { path: Path.designerSequences(), element: <DesignerSequenceList /> },
+  { path: Path.designerSequences(":sequence_name"), element: <DesignerSequenceEditor /> },
+  { path: Path.regimens(), element: <DesignerRegimenList /> },
+  { path: Path.regimens("scheduler"), element: <DesignerRegimenScheduler /> },
+  { path: Path.regimens(":regimen_name"), element: <DesignerRegimenEditor /> },
+  { path: Path.messages(), element: <MessagesPanel /> },
+  { path: Path.help(), element: <SoftwareDocsPanel /> },
+  { path: Path.developer(), element: <DeveloperDocsPanel /> },
+  { path: Path.designer("genesis"), element: <GenesisDocsPanel /> },
+  { path: Path.designer("express"), element: <ExpressDocsPanel /> },
+  { path: Path.designer("business"), element: <MetaDocsPanel /> },
+  { path: Path.designer("education"), element: <EducationDocsPanel /> },
+  { path: Path.tours(), element: <ToursPanel /> },
+  { path: Path.support(), element: <SupportPanel /> },
+  { path: Path.designer("jobs"), element: <JobsPanel /> },
+  { path: Path.settings(), element: <DesignerSettings /> },
+  { path: Path.tools(), element: <Tools /> },
+  { path: Path.tools("add"), element: <AddTool /> },
+  { path: Path.tools(":tool_id"), element: <EditTool /> },
+  { path: Path.toolSlots("add"), element: <AddToolSlot /> },
+  { path: Path.toolSlots(":tool_id"), element: <EditToolSlot /> },
+  { path: Path.groups(), element: <GroupListPanel /> },
+  { path: Path.groups(":group_id"), element: <GroupDetail /> },
+  { path: Path.weeds(), element: <Weeds /> },
+  { path: Path.weeds("add"), element: <CreatePoints /> },
+  { path: Path.weeds(":point_id"), element: <EditWeed /> },
+  { path: Path.zones(), element: <Zones /> },
+  { path: Path.zones("add"), element: <AddZone /> },
+  { path: Path.zones(":zone_id"), element: <EditZone /> },
+  { path: "*", element: <FourOhFour /> },
 ];
 
-/** Bind the route to a callback by calling in a function that passes the
-  callback in as the first argument.
- *
- * DO NOT RE-ORDER ITEMS FOR READABILITY--they are order-dependent.
- * Stuff will break if the route order is changed.
- * (e.g., must be ["a", "a/b", "a/b/:c/d", "a/b/:c", "a/:e"],
- *        404 must be last, etc.)
- */
-export const UNBOUND_ROUTES = [
-  route({
-    children: false,
-    $: Path.route(Path.app("controls")),
-    getModule: () => import("./controls/controls_page"),
-    key: "Controls",
-  }),
-  route({
-    children: false,
-    $: Path.route(Path.app("messages")),
-    getModule: () => import("./messages/messages_page"),
-    key: "Messages",
-  }),
-  route({
-    children: false,
-    $: Path.route(Path.logs()),
-    getModule: () => import("./logs"),
-    key: "Logs",
-  }),
-  route({
-    children: false,
-    $: Path.route(Path.sequencePage()) + "(/:sequence)",
-    getModule: () => import("./sequences/sequences"),
-    key: "Sequences",
-  }),
-  route({
-    children: false,
-    $: Path.route(Path.designer()),
-    getModule: () => import("./farm_designer"),
-    key: "FarmDesigner"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.farmEvents()),
-    getModule,
-    key,
-    getChild: () => import("./farm_events/farm_events"),
-    childKey: "FarmEvents"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.farmEvents("add")),
-    getModule,
-    key,
-    getChild: () => import("./farm_events/add_farm_event"),
-    childKey: "AddFarmEvent"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.farmEvents(":farm_event_id")),
-    getModule,
-    key,
-    getChild: () => import("./farm_events/edit_farm_event"),
-    childKey: "EditFarmEvent"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.plants()),
-    getModule,
-    key,
-    getChild: () => import("./plants/plant_inventory"),
-    childKey: "Plants"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.location()),
-    getModule,
-    key,
-    getChild: () => import("./farm_designer/location_info"),
-    childKey: "LocationInfo"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.plants("gardens")),
-    getModule,
-    key,
-    getChild: () => import("./saved_gardens/saved_gardens"),
-    childKey: "SavedGardens"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.plants("select")),
-    getModule,
-    key,
-    getChild: () => import("./plants/select_plants"),
-    childKey: "SelectPlants"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.points()),
-    getModule,
-    key,
-    getChild: () => import("./points/point_inventory"),
-    childKey: "Points"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.points("add")),
-    getModule,
-    key,
-    getChild: () => import("./points/create_points"),
-    childKey: "CreatePoints"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.points(":point_id")),
-    getModule,
-    key,
-    getChild: () => import("./points/point_info"),
-    childKey: "EditPoint"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.curves()),
-    getModule,
-    key,
-    getChild: () => import("./curves/curves_inventory"),
-    childKey: "Curves"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.curves(":curve_id")),
-    getModule,
-    key,
-    getChild: () => import("./curves/edit_curve"),
-    childKey: "EditCurve"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.cropSearch()),
-    getModule,
-    key,
-    getChild: () => import("./plants/crop_catalog"),
-    childKey: "CropCatalog"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.cropSearch(":crop/add")),
-    getModule,
-    key,
-    getChild: () => import("./plants/add_plant"),
-    childKey: "AddPlant"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.cropSearch(":crop")),
-    getModule,
-    key,
-    getChild: () => import("./plants/crop_info"),
-    childKey: "CropInfo"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.plants(":plant_id")),
-    getModule,
-    key,
-    getChild: () => import("./plants/plant_info"),
-    childKey: "PlantInfo"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.savedGardens()),
-    getModule,
-    key,
-    getChild: () => import("./saved_gardens/saved_gardens"),
-    childKey: "SavedGardens"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.plantTemplates()),
-    getModule,
-    key,
-    getChild: () => import("./plants/plant_inventory"),
-    childKey: "Plants"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.plantTemplates(":plant_template_id")),
-    getModule,
-    key,
-    getChild: () => import("./plants/plant_info"),
-    childKey: "PlantInfo"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.savedGardens("add")),
-    getModule,
-    key,
-    getChild: () => import("./saved_gardens/garden_add"),
-    childKey: "AddGarden"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.savedGardens(":saved_garden_id")),
-    getModule,
-    key,
-    getChild: () => import("./saved_gardens/garden_edit"),
-    childKey: "EditGarden"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.controls()),
-    getModule,
-    key,
-    getChild: () => import("./controls/controls"),
-    childKey: "DesignerControls"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.setup()),
-    getModule,
-    key,
-    getChild: () => import("./wizard/index"),
-    childKey: "SetupWizard"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designer("sensors")),
-    getModule,
-    key,
-    getChild: () => import("./sensors/sensors"),
-    childKey: "DesignerSensors"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.photos()),
-    getModule,
-    key,
-    getChild: () => import("./photos/photos"),
-    childKey: "DesignerPhotos"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.farmware()),
-    getModule,
-    key,
-    getChild: () => import("./farmware/panel/list"),
-    childKey: "DesignerFarmwareList"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.farmware("add")),
-    getModule,
-    key,
-    getChild: () => import("./farmware/panel/add"),
-    childKey: "DesignerFarmwareAdd"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.farmware(":farmware_name")),
-    getModule,
-    key,
-    getChild: () => import("./farmware/panel/info"),
-    childKey: "DesignerFarmwareInfo"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designerSequences()),
-    getModule,
-    key,
-    getChild: () => import("./sequences/panel/list"),
-    childKey: "DesignerSequenceList"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designerSequences(":sequence_name")),
-    getModule,
-    key,
-    getChild: () => import("./sequences/panel/editor"),
-    childKey: "DesignerSequenceEditor"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.sequenceVersion()),
-    getModule,
-    key,
-    getChild: () => import("./sequences/panel/preview"),
-    childKey: "DesignerSequencePreview"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.sequenceVersion(":sequence_version_id")),
-    getModule,
-    key,
-    getChild: () => import("./sequences/panel/preview"),
-    childKey: "DesignerSequencePreview"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.regimens()),
-    getModule,
-    key,
-    getChild: () => import("./regimens/list/list"),
-    childKey: "DesignerRegimenList"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.regimens("scheduler")),
-    getModule,
-    key,
-    getChild: () => import("./regimens/bulk_scheduler/scheduler"),
-    childKey: "DesignerRegimenScheduler"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.regimens(":regimen_name")),
-    getModule,
-    key,
-    getChild: () => import("./regimens/editor/editor"),
-    childKey: "DesignerRegimenEditor"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.messages()),
-    getModule,
-    key,
-    getChild: () => import("./messages/messages"),
-    childKey: "MessagesPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.help()),
-    getModule,
-    key,
-    getChild: () => import("./help/documentation"),
-    childKey: "SoftwareDocsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.developer()),
-    getModule,
-    key,
-    getChild: () => import("./help/documentation"),
-    childKey: "DeveloperDocsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designer("genesis")),
-    getModule,
-    key,
-    getChild: () => import("./help/documentation"),
-    childKey: "GenesisDocsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designer("express")),
-    getModule,
-    key,
-    getChild: () => import("./help/documentation"),
-    childKey: "ExpressDocsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designer("business")),
-    getModule,
-    key,
-    getChild: () => import("./help/documentation"),
-    childKey: "MetaDocsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designer("education")),
-    getModule,
-    key,
-    getChild: () => import("./help/documentation"),
-    childKey: "EducationDocsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.tours()),
-    getModule,
-    key,
-    getChild: () => import("./help/tours/panel"),
-    childKey: "ToursPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.support()),
-    getModule,
-    key,
-    getChild: () => import("./help/support"),
-    childKey: "SupportPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.designer("jobs")),
-    getModule,
-    key,
-    getChild: () => import("./devices/jobs"),
-    childKey: "JobsPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.settings()),
-    getModule,
-    key,
-    getChild: () => import("./settings"),
-    childKey: "DesignerSettings"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.tools()),
-    getModule,
-    key,
-    getChild: () => import("./tools"),
-    childKey: "Tools"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.tools("add")),
-    getModule,
-    key,
-    getChild: () => import("./tools/add_tool"),
-    childKey: "AddTool"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.tools(":tool_id")),
-    getModule,
-    key,
-    getChild: () => import("./tools/edit_tool"),
-    childKey: "EditTool"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.toolSlots("add")),
-    getModule,
-    key,
-    getChild: () => import("./tools/add_tool_slot"),
-    childKey: "AddToolSlot"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.toolSlots(":tool_id")),
-    getModule,
-    key,
-    getChild: () => import("./tools/edit_tool_slot"),
-    childKey: "EditToolSlot"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.groups()),
-    getModule,
-    key,
-    getChild: () => import("./point_groups/group_list_panel"),
-    childKey: "GroupListPanel"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.groups(":group_id")),
-    getModule,
-    key,
-    getChild: () => import("./point_groups/group_detail"),
-    childKey: "GroupDetail"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.weeds()),
-    getModule,
-    key,
-    getChild: () => import("./weeds/weeds_inventory"),
-    childKey: "Weeds"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.weeds("add")),
-    getModule,
-    key,
-    getChild: () => import("./points/create_points"),
-    childKey: "CreatePoints"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.weeds(":point_id")),
-    getModule,
-    key,
-    getChild: () => import("./weeds/weeds_edit"),
-    childKey: "EditWeed"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.zones()),
-    getModule,
-    key,
-    getChild: () => import("./zones/zones_inventory"),
-    childKey: "Zones"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.zones("add")),
-    getModule,
-    key,
-    getChild: () => import("./zones/add_zone"),
-    childKey: "AddZone"
-  }),
-  route({
-    children: true,
-    $: Path.route(Path.zones(":zone_id")),
-    getModule,
-    key,
-    getChild: () => import("./zones/edit_zone"),
-    childKey: "EditZone"
-  }),
-].concat(NOT_FOUND_ROUTES);
+export const ROUTE_DATA: RouteObject[] = [
+  { path: Path.app("controls"), element: <Navigate to={Path.controls()} /> },
+  { path: Path.app("messages"), element: <Navigate to={Path.messages()} /> },
+  { path: Path.logs(), element: <Logs /> },
+  { path: Path.sequencePage(":sequence_name"), element: <Sequences /> },
+  {
+    path: Path.sequenceVersion(), element: <FarmDesigner />,
+    children: [{ path: "", element: <DesignerSequencePreview /> }],
+  },
+  {
+    path: Path.sequenceVersion(":sequence_version_id"), element: <FarmDesigner />,
+    children: [{ path: "", element: <DesignerSequencePreview /> }],
+  },
+  {
+    path: Path.designer(), element: <FarmDesigner />,
+    children: CHILD_ROUTES,
+  },
+  { path: "*", element: <FourOhFour /> },
+];
diff --git a/frontend/routes.tsx b/frontend/routes.tsx
index c82f0a0253..89050d8146 100644
--- a/frontend/routes.tsx
+++ b/frontend/routes.tsx
@@ -5,12 +5,13 @@ import { ready } from "./config/actions";
 import { Session } from "./session";
 import { attachToRoot } from "./util";
 import { ErrorBoundary } from "./error_boundary";
-import { Router } from "takeme";
-import { UnboundRouteConfig, UNBOUND_ROUTES } from "./route_config";
-import { App } from "./app";
-import { ConnectedComponent, Provider } from "react-redux";
+import { Route, BrowserRouter, Routes } from "react-router";
+import { ROUTE_DATA } from "./route_config";
+import { Provider } from "react-redux";
 import { HotkeysProvider } from "@blueprintjs/core";
 import { Provider as RollbarProvider } from "@rollbar/react";
+import { NavigationProvider } from "./routes_helpers";
+import { App } from "./app";
 
 interface RootComponentProps { store: Store; }
 
@@ -20,26 +21,8 @@ export const attachAppToDom = () => {
   _store.dispatch(ready() as any);
 };
 
-export type AnyConnectedComponent =
-  ConnectedComponent<React.ComponentType, unknown>;
-
-interface RootComponentState {
-  Route: AnyConnectedComponent | React.FunctionComponent;
-  ChildRoute?: AnyConnectedComponent;
-}
-
-export type ChangeRoute = (
-  Route: AnyConnectedComponent | React.FunctionComponent,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  info?: UnboundRouteConfig<any, any> | undefined,
-  ChildRoute?: AnyConnectedComponent | undefined,
-) => void;
-
 export class RootComponent
-  extends React.Component<RootComponentProps, RootComponentState> {
-  state: RootComponentState = {
-    Route: (_: { children?: React.ReactElement }) => <div>Loading...</div>
-  };
+  extends React.Component<RootComponentProps> {
 
   UNSAFE_componentWillMount() {
     const notLoggedIn = !Session.fetchStoredToken();
@@ -48,20 +31,7 @@ export class RootComponent
     (notLoggedIn && restrictedArea && Session.clear());
   }
 
-  changeRoute: ChangeRoute = (Route, _info, ChildRoute) => {
-    this.setState({ Route, ChildRoute });
-  };
-
-  componentDidMount() {
-    const mainRoutes = UNBOUND_ROUTES.map(bindTo => bindTo(this.changeRoute));
-    new Router(mainRoutes).enableHtml5Routing("/app").init();
-  }
-
   render() {
-    const { ChildRoute } = this.state;
-    const Route = this.state.Route as React.FunctionComponent<{
-      children: React.ReactNode
-    }>;
     const OuterWrapper = ({ children }: { children: React.ReactNode }) =>
       globalConfig.ROLLBAR_CLIENT_TOKEN
         ? <RollbarProvider config={{
@@ -86,14 +56,28 @@ export class RootComponent
       <ErrorBoundary>
         <Provider store={_store}>
           <HotkeysProvider>
-            <App>
-              <Route>
-                {ChildRoute &&
-                  <ErrorBoundary>
-                    <ChildRoute />
-                  </ErrorBoundary>}
-              </Route>
-            </App>
+            <BrowserRouter>
+              <NavigationProvider>
+                <React.Suspense>
+                  <Routes>
+                    <Route
+                      path={"/app"}
+                      element={<App />}>
+                      {ROUTE_DATA.map(appRoute =>
+                        <Route key={appRoute.path}
+                          path={appRoute.path}
+                          element={appRoute.element}>
+                          {appRoute.children &&
+                            appRoute.children.map(designerRoute =>
+                              <Route key={designerRoute.path}
+                                path={designerRoute.path}
+                                element={designerRoute.element} />)}
+                        </Route>)}
+                    </Route>
+                  </Routes>
+                </React.Suspense>
+              </NavigationProvider>
+            </BrowserRouter>
           </HotkeysProvider>
         </Provider>
       </ErrorBoundary>
diff --git a/frontend/routes_helpers.tsx b/frontend/routes_helpers.tsx
new file mode 100644
index 0000000000..794819508c
--- /dev/null
+++ b/frontend/routes_helpers.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { noop } from "lodash";
+import { NavigateFunction, useNavigate } from "react-router";
+
+export const NavigationContext = React.createContext<NavigateFunction>(noop);
+
+export function NavigationProvider(props: { children: React.ReactNode }) {
+  const navigate = useNavigate();
+  return <NavigationContext.Provider value={navigate}>
+    {props.children}
+  </NavigationContext.Provider>;
+}
diff --git a/frontend/saved_gardens/__tests__/actions_test.ts b/frontend/saved_gardens/__tests__/actions_test.ts
index a8b423d36c..7f9dc085d3 100644
--- a/frontend/saved_gardens/__tests__/actions_test.ts
+++ b/frontend/saved_gardens/__tests__/actions_test.ts
@@ -18,7 +18,6 @@ import {
   openSavedGarden, openOrCloseGarden, newSavedGarden, unselectSavedGarden,
   copySavedGarden,
 } from "../actions";
-import { push } from "../../history";
 import { Actions } from "../../constants";
 import { destroy, initSave, initSaveGetId } from "../../api/crud";
 import {
@@ -29,12 +28,14 @@ import { Path } from "../../internal_urls";
 describe("snapshotGarden", () => {
   it("calls the API and lets auto-sync do the rest", () => {
     API.setBaseUrl("example.io");
-    snapshotGarden();
+    const navigate = jest.fn();
+    snapshotGarden(navigate);
     expect(axios.post).toHaveBeenCalledWith(API.current.snapshotPath, {});
   });
 
   it("calls with garden name", () => {
-    snapshotGarden("new saved garden", "notes");
+    const navigate = jest.fn();
+    snapshotGarden(navigate, "new saved garden", "notes");
     expect(axios.post).toHaveBeenCalledWith(
       API.current.snapshotPath, { name: "new saved garden", notes: "notes" });
   });
@@ -43,10 +44,11 @@ describe("snapshotGarden", () => {
 describe("applyGarden", () => {
   it("calls the API and lets auto-sync do the rest", async () => {
     API.setBaseUrl("example.io");
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    await applyGarden(4)(dispatch);
+    await applyGarden(navigate, 4)(dispatch);
     expect(axios.patch).toHaveBeenCalledWith(API.current.applyGardenPath(4));
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
     expect(dispatch).toHaveBeenCalledWith(unselectSavedGarden);
   });
 });
@@ -54,28 +56,31 @@ describe("applyGarden", () => {
 describe("destroySavedGarden", () => {
   it("deletes garden", () => {
     const dispatch = jest.fn((_) => Promise.resolve());
-    destroySavedGarden("SavedGardenUuid")(dispatch);
+    const navigate = jest.fn();
+    destroySavedGarden(navigate, "SavedGardenUuid")(dispatch);
     expect(dispatch).toHaveBeenCalledWith(unselectSavedGarden);
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
     expect(destroy).toHaveBeenCalledWith("SavedGardenUuid");
   });
 });
 
 describe("closeSavedGarden", () => {
   it("closes garden", () => {
+    const navigate = jest.fn();
     const dispatch = jest.fn();
-    closeSavedGarden()(dispatch);
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    closeSavedGarden(navigate)(dispatch);
+    expect(navigate).toHaveBeenCalledWith(Path.plants());
     expect(dispatch).toHaveBeenCalledWith(unselectSavedGarden);
   });
 });
 
 describe("openSavedGarden", () => {
   it("opens garden", () => {
+    const navigate = jest.fn();
     const dispatch = jest.fn();
     const id = 1;
-    openSavedGarden(id)(dispatch);
-    expect(push).toHaveBeenCalledWith(Path.savedGardens(1));
+    openSavedGarden(navigate, id)(dispatch);
+    expect(navigate).toHaveBeenCalledWith(Path.savedGardens(1));
     expect(dispatch).toHaveBeenCalledWith({
       type: Actions.CHOOSE_SAVED_GARDEN,
       payload: id,
@@ -86,34 +91,39 @@ describe("openSavedGarden", () => {
 describe("openOrCloseGarden", () => {
   it("opens garden", () => {
     const props = {
+      navigate: jest.fn(),
       savedGardenId: 1,
       dispatch: jest.fn(),
       gardenIsOpen: false,
     };
     openOrCloseGarden(props)();
-    expect(push).toHaveBeenCalledWith(Path.savedGardens(1));
+    expect(props.navigate).toHaveBeenCalledWith(Path.savedGardens(1));
   });
 
   it("closes garden", () => {
     const props = {
+      navigate: jest.fn(),
       savedGardenId: 1,
       dispatch: jest.fn(),
       gardenIsOpen: true,
     };
     openOrCloseGarden(props)();
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(props.navigate).toHaveBeenCalledWith(Path.plants());
   });
 });
 
 describe("newSavedGarden", () => {
   it("creates a new saved garden", () => {
-    newSavedGarden("my saved garden", "notes")(jest.fn(() => Promise.resolve()));
+    const navigate = jest.fn();
+    newSavedGarden(navigate, "my saved garden", "notes")(
+      jest.fn(() => Promise.resolve()));
     expect(initSave).toHaveBeenCalledWith(
       "SavedGarden", { name: "my saved garden", notes: "notes" });
   });
 
   it("creates a new saved garden with default name", () => {
-    newSavedGarden("", "")(jest.fn(() => Promise.resolve()));
+    const navigate = jest.fn();
+    newSavedGarden(navigate, "", "")(jest.fn(() => Promise.resolve()));
     expect(initSave).toHaveBeenCalledWith(
       "SavedGarden", { name: "Untitled Garden", notes: "" });
   });
@@ -126,6 +136,7 @@ describe("copySavedGarden", () => {
     const fakePT = fakePlantTemplate();
     fakePT.body.saved_garden_id = fakeSG.body.id;
     return {
+      navigate: jest.fn(),
       newSGName: "",
       savedGarden: fakeSG,
       plantTemplates: [fakePT],
diff --git a/frontend/saved_gardens/__tests__/garden_edit_test.tsx b/frontend/saved_gardens/__tests__/garden_edit_test.tsx
index 4cb251e52b..6f45362085 100644
--- a/frontend/saved_gardens/__tests__/garden_edit_test.tsx
+++ b/frontend/saved_gardens/__tests__/garden_edit_test.tsx
@@ -10,13 +10,6 @@ jest.mock("../../api/crud", () => ({
   save: jest.fn(),
 }));
 
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.savedGardens(1));
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { mount, shallow } from "enzyme";
 import { RawEditGarden as EditGarden, mapStateToProps } from "../garden_edit";
@@ -32,7 +25,8 @@ import { fakeState } from "../../__test_support__/fake_state";
 import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
-import { push } from "../../history";
+import { Path } from "../../internal_urls";
+import { times } from "lodash";
 
 describe("<EditGarden />", () => {
   const fakeProps = (): EditGardenProps => ({
@@ -69,7 +63,7 @@ describe("<EditGarden />", () => {
     p.plantPointerCount = 0;
     const wrapper = mount(<EditGarden {...p} />);
     clickButton(wrapper, 0, "apply");
-    expect(applyGarden).toHaveBeenCalledWith(1);
+    expect(applyGarden).toHaveBeenCalledWith(expect.any(Function), 1);
   });
 
   it("plants still in garden", () => {
@@ -87,24 +81,25 @@ describe("<EditGarden />", () => {
     p.savedGarden = fakeSavedGarden();
     const wrapper = mount(<EditGarden {...p} />);
     wrapper.find(".fa-trash").first().simulate("click");
-    expect(destroySavedGarden).toHaveBeenCalledWith(p.savedGarden.uuid);
+    expect(destroySavedGarden).toHaveBeenCalledWith(expect.any(Function),
+      p.savedGarden.uuid);
   });
 
   it("shows garden not found", () => {
-    mockPath = Path.mock(Path.savedGardens("nope"));
+    location.pathname = Path.mock(Path.savedGardens("nope"));
     const wrapper = mount(<EditGarden {...fakeProps()} />);
     expect(wrapper.text()).toContain("not found");
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const wrapper = mount(<EditGarden {...fakeProps()} />);
     expect(wrapper.text()).toContain("not found");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
-  it("show when garden is open", () => {
+  it("shows when garden is open", () => {
     const p = fakeProps();
     p.savedGarden = fakeSavedGarden();
     p.gardenIsOpen = true;
@@ -122,10 +117,13 @@ describe("<EditGarden />", () => {
   });
 
   it("expands", () => {
-    const wrapper = mount<EditGarden>(<EditGarden {...fakeProps()} />);
-    expect(wrapper.state().expand).toEqual(false);
-    wrapper.instance().toggleExpand();
-    expect(wrapper.state().expand).toEqual(true);
+    const p = fakeProps();
+    p.savedGarden = fakeSavedGarden();
+    p.gardenPlants = times(100, fakePlantTemplate);
+    const wrapper = mount(<EditGarden {...p} />);
+    expect(wrapper.find(".group-item-icon").length).toEqual(63);
+    wrapper.find(".more-indicator").simulate("click");
+    expect(wrapper.find(".group-item-icon").length).toEqual(100);
   });
 });
 
@@ -133,7 +131,7 @@ describe("mapStateToProps()", () => {
   it("returns props", () => {
     const sg = fakeSavedGarden();
     sg.body.id = 1;
-    mockPath = Path.mock(Path.savedGardens(1));
+    location.pathname = Path.mock(Path.savedGardens(1));
     const state = fakeState();
     state.resources = buildResourceIndex([sg, fakePlantTemplate()]);
     state.resources.consumers.farm_designer.openedSavedGarden = sg.body.id;
@@ -145,7 +143,7 @@ describe("mapStateToProps()", () => {
   it("doesn't find saved garden", () => {
     const sg = fakeSavedGarden();
     sg.body.id = 1;
-    mockPath = Path.mock(Path.savedGardens());
+    location.pathname = Path.mock(Path.savedGardens());
     const state = fakeState();
     state.resources = buildResourceIndex([sg, fakePlantTemplate()]);
     state.resources.consumers.farm_designer.openedSavedGarden = sg.body.id;
diff --git a/frontend/saved_gardens/__tests__/garden_list_test.tsx b/frontend/saved_gardens/__tests__/garden_list_test.tsx
index 1159894f34..bac03c34f9 100644
--- a/frontend/saved_gardens/__tests__/garden_list_test.tsx
+++ b/frontend/saved_gardens/__tests__/garden_list_test.tsx
@@ -18,7 +18,8 @@ describe("<GardenInfo />", () => {
     const p = fakeProps();
     const wrapper = shallow(<GardenInfo {...p} />);
     wrapper.simulate("click");
-    expect(openSavedGarden).toHaveBeenCalledWith(p.savedGarden.body.id);
+    expect(openSavedGarden).toHaveBeenCalledWith(expect.any(Function),
+      p.savedGarden.body.id);
   });
 });
 
diff --git a/frontend/saved_gardens/__tests__/garden_snapshot_test.tsx b/frontend/saved_gardens/__tests__/garden_snapshot_test.tsx
index 337b59f19e..59b717449b 100644
--- a/frontend/saved_gardens/__tests__/garden_snapshot_test.tsx
+++ b/frontend/saved_gardens/__tests__/garden_snapshot_test.tsx
@@ -25,7 +25,7 @@ describe("<GardenSnapshot />", () => {
   it("saves garden", () => {
     const wrapper = mount(<GardenSnapshot {...fakeProps()} />);
     clickButton(wrapper, 0, "snapshot current garden");
-    expect(snapshotGarden).toHaveBeenCalledWith("", "");
+    expect(snapshotGarden).toHaveBeenCalledWith(expect.any(Function), "", "");
   });
 
   it("copies saved garden", () => {
@@ -35,6 +35,7 @@ describe("<GardenSnapshot />", () => {
     clickButton(wrapper, 0, "snapshot current garden");
     expect(snapshotGarden).not.toHaveBeenCalled();
     expect(copySavedGarden).toHaveBeenCalledWith({
+      navigate: expect.any(Function),
       newSGName: "",
       plantTemplates: [],
       savedGarden: p.currentSavedGarden
@@ -42,26 +43,27 @@ describe("<GardenSnapshot />", () => {
   });
 
   it("changes name", () => {
-    const wrapper = shallow<GardenSnapshot>(<GardenSnapshot {...fakeProps()} />);
+    const wrapper = shallow(<GardenSnapshot {...fakeProps()} />);
     wrapper.find("input").first().simulate("change", {
       currentTarget: { value: "new name" }
     });
-    expect(wrapper.instance().state.gardenName).toEqual("new name");
+    expect(wrapper.find("input").props().value).toEqual("new name");
   });
 
   it("changes notes", () => {
-    const wrapper = shallow<GardenSnapshot>(<GardenSnapshot {...fakeProps()} />);
+    const wrapper = shallow(<GardenSnapshot {...fakeProps()} />);
     wrapper.find("textarea").first().simulate("change", {
       currentTarget: { value: "new notes" }
     });
-    expect(wrapper.instance().state.gardenNotes).toEqual("new notes");
+    expect(wrapper.find("textarea").props().value).toEqual("new notes");
   });
 
   it("creates new garden", () => {
-    const wrapper = shallow<GardenSnapshot>(<GardenSnapshot {...fakeProps()} />);
-    wrapper.setState({ gardenName: "new saved garden" });
+    const wrapper = shallow(<GardenSnapshot {...fakeProps()} />);
+    wrapper.find("input").simulate("change",
+      { currentTarget: { value: "new saved garden" } });
     wrapper.find("button").last().simulate("click");
-    expect(newSavedGarden).toHaveBeenCalledWith("new saved garden", "");
-    expect(wrapper.instance().state.gardenName).toEqual("");
+    expect(newSavedGarden).toHaveBeenCalledWith(expect.any(Function),
+      "new saved garden", "");
   });
 });
diff --git a/frontend/saved_gardens/__tests__/saved_gardens_test.tsx b/frontend/saved_gardens/__tests__/saved_gardens_test.tsx
index 31a88db39a..483e303241 100644
--- a/frontend/saved_gardens/__tests__/saved_gardens_test.tsx
+++ b/frontend/saved_gardens/__tests__/saved_gardens_test.tsx
@@ -17,7 +17,6 @@ import { clickButton } from "../../__test_support__/helpers";
 import {
   fakePlantTemplate, fakeSavedGarden,
 } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { fakeState } from "../../__test_support__/fake_state";
 import {
   buildResourceIndex,
@@ -105,7 +104,7 @@ describe("<SavedGardenHUD />", () => {
     const dispatch = jest.fn();
     const wrapper = mount(<SavedGardenHUD dispatch={dispatch} />);
     clickButton(wrapper, 0, "edit");
-    expect(push).toHaveBeenCalledWith(Path.plants());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
     expect(dispatch).toHaveBeenCalledWith({
       type: Actions.SELECT_POINT,
       payload: undefined
diff --git a/frontend/saved_gardens/actions.ts b/frontend/saved_gardens/actions.ts
index d23124ace7..b624af8d94 100644
--- a/frontend/saved_gardens/actions.ts
+++ b/frontend/saved_gardens/actions.ts
@@ -1,27 +1,29 @@
 import axios from "axios";
 import { API } from "../api";
 import { success, info } from "../toast/toast";
-import { push } from "../history";
 import { Actions } from "../constants";
 import { destroy, initSave, initSaveGetId } from "../api/crud";
 import { TaggedSavedGarden, TaggedPlantTemplate } from "farmbot";
 import { t } from "../i18next_wrapper";
 import { stopTracking } from "../connectivity/data_consistency";
 import { Path } from "../internal_urls";
+import { NavigateFunction } from "react-router";
 
 /** Save all Plant to PlantTemplates in a new SavedGarden. */
 export const snapshotGarden = (
+  navigate: Function,
   gardenName?: string | undefined,
   gardenNotes?: string,
-) =>
-  axios.post<void>(API.current.snapshotPath,
+) => {
+  return axios.post<void>(API.current.snapshotPath,
     gardenName
       ? { name: gardenName, notes: gardenNotes }
       : {})
     .then(() => {
       success(t("Garden Saved."));
-      push(Path.plants());
+      navigate(Path.plants());
     });
+};
 
 export const unselectSavedGarden = {
   type: Actions.CHOOSE_SAVED_GARDEN,
@@ -29,47 +31,59 @@ export const unselectSavedGarden = {
 };
 
 /** Save a SavedGarden's PlantTemplates as Plants. */
-export const applyGarden = (gardenId: number) => (dispatch: Function) => axios
-  .patch<void>(API.current.applyGardenPath(gardenId))
-  .then(data => {
-    stopTracking(data.headers["x-farmbot-rpc-id"] as string);
-    push(Path.plants());
-    dispatch(unselectSavedGarden);
-    const busyToastTitle = t("Please wait");
-    info(t("while your garden is applied."), { title: busyToastTitle });
-  });
+export const applyGarden = (navigate: Function, gardenId: number) =>
+  (dispatch: Function) => axios
+    .patch<void>(API.current.applyGardenPath(gardenId))
+    .then(data => {
+      stopTracking(data.headers["x-farmbot-rpc-id"] as string);
+      navigate(Path.plants());
+      dispatch(unselectSavedGarden);
+      const busyToastTitle = t("Please wait");
+      info(t("while your garden is applied."), { title: busyToastTitle });
+    });
 
-export const destroySavedGarden = (uuid: string) => (dispatch: Function) => {
+export const destroySavedGarden = (
+  navigate: NavigateFunction,
+  uuid: string,
+) => (dispatch: Function) => {
   dispatch(unselectSavedGarden);
-  push(Path.plants());
+  navigate(Path.plants());
   dispatch(destroy(uuid));
 };
 
-export const closeSavedGarden = () => {
-  push(Path.plants());
+export const closeSavedGarden = (navigate: NavigateFunction) => {
+  navigate(Path.plants());
   return (dispatch: Function) =>
     dispatch(unselectSavedGarden);
 };
 
-export const openSavedGarden = (savedGardenId: number | undefined) => {
-  push(Path.savedGardens(savedGardenId));
+export const openSavedGarden = (
+  navigate: NavigateFunction,
+  savedGardenId: number | undefined,
+) => {
+  navigate(Path.savedGardens(savedGardenId));
   return (dispatch: Function) =>
     dispatch({ type: Actions.CHOOSE_SAVED_GARDEN, payload: savedGardenId });
 };
 
 /** Open a SavedGarden if it is closed, otherwise close it. */
 export const openOrCloseGarden = (props: {
+  navigate: NavigateFunction,
   savedGardenId: number | undefined,
   gardenIsOpen: boolean,
   dispatch: Function
 }) =>
   () =>
     !props.gardenIsOpen && props.savedGardenId
-      ? props.dispatch(openSavedGarden(props.savedGardenId))
-      : props.dispatch(closeSavedGarden());
+      ? props.dispatch(openSavedGarden(props.navigate, props.savedGardenId))
+      : props.dispatch(closeSavedGarden(props.navigate));
 
 /** Create a new SavedGarden with the chosen name. */
-export const newSavedGarden = (gardenName: string, gardenNotes: string) =>
+export const newSavedGarden = (
+  navigate: NavigateFunction,
+  gardenName: string,
+  gardenNotes: string,
+) =>
   (dispatch: Function) => {
     dispatch(initSave("SavedGarden", {
       name: gardenName || "Untitled Garden",
@@ -77,7 +91,7 @@ export const newSavedGarden = (gardenName: string, gardenNotes: string) =>
     }))
       .then(() => {
         success(t("Garden Saved."));
-        push(Path.plants());
+        navigate(Path.plants());
       });
   };
 
@@ -94,12 +108,14 @@ const newPTBody =
   });
 
 /** Copy a SavedGarden and all of its PlantTemplates. */
-export const copySavedGarden = ({ newSGName, savedGarden, plantTemplates }: {
+export const copySavedGarden = (props: {
+  navigate: NavigateFunction,
   newSGName: string,
   savedGarden: TaggedSavedGarden,
   plantTemplates: TaggedPlantTemplate[]
 }) =>
   (dispatch: Function) => {
+    const { newSGName, savedGarden, plantTemplates, navigate } = props;
     const sourceSavedGardenId = savedGarden.body.id;
     const gardenName = newSGName || `${savedGarden.body.name} (${t("copy")})`;
     dispatch(initSaveGetId(savedGarden.kind, { name: gardenName }))
@@ -108,6 +124,6 @@ export const copySavedGarden = ({ newSGName, savedGarden, plantTemplates }: {
           .filter(x => x.body.saved_garden_id === sourceSavedGardenId)
           .map(x => dispatch(initSave(x.kind, newPTBody(x, newSGId))));
         success(t("Garden Saved."));
-        push(Path.plants());
+        navigate(Path.plants());
       });
   };
diff --git a/frontend/saved_gardens/garden_add.tsx b/frontend/saved_gardens/garden_add.tsx
index da5da90a49..2988bbaec9 100644
--- a/frontend/saved_gardens/garden_add.tsx
+++ b/frontend/saved_gardens/garden_add.tsx
@@ -9,7 +9,6 @@ import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { Content } from "../constants";
-import { Row } from "../ui";
 import { t } from "../i18next_wrapper";
 import { Panel } from "../farm_designer/panel_header";
 import { Path } from "../internal_urls";
@@ -35,15 +34,15 @@ export class RawAddGarden extends React.Component<GardenSnapshotProps, {}> {
         description={Content.SAVED_GARDENS}
         backTo={Path.plants()} />
       <DesignerPanelContent panelName={"saved-garden"}>
-        <Row>
-          <GardenSnapshot
-            currentSavedGarden={this.props.currentSavedGarden}
-            plantTemplates={this.props.plantTemplates}
-            dispatch={this.props.dispatch} />
-        </Row>
+        <GardenSnapshot
+          currentSavedGarden={this.props.currentSavedGarden}
+          plantTemplates={this.props.plantTemplates}
+          dispatch={this.props.dispatch} />
       </DesignerPanelContent>
     </DesignerPanel>;
   }
 }
 
 export const AddGarden = connect(mapStateToProps)(RawAddGarden);
+// eslint-disable-next-line import/no-default-export
+export default AddGarden;
diff --git a/frontend/saved_gardens/garden_edit.tsx b/frontend/saved_gardens/garden_edit.tsx
index 6de86d1cbe..985058fcc7 100644
--- a/frontend/saved_gardens/garden_edit.tsx
+++ b/frontend/saved_gardens/garden_edit.tsx
@@ -3,7 +3,7 @@ import { GardenViewButtonProps, EditGardenProps } from "./interfaces";
 import { openOrCloseGarden, applyGarden, destroySavedGarden } from "./actions";
 import { error } from "../toast/toast";
 import { trim } from "../util";
-import { BlurableInput, Row } from "../ui";
+import { BlurableInput } from "../ui";
 import { edit, save } from "../api/crud";
 import { connect } from "react-redux";
 import {
@@ -13,7 +13,6 @@ import { Everything } from "../interfaces";
 import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { push } from "../history";
 import { isNumber, take } from "lodash";
 import { ResourceIndex } from "../resources/interfaces";
 import { t } from "../i18next_wrapper";
@@ -23,11 +22,17 @@ import { PointGroupItem } from "../point_groups/point_group_item";
 import {
   calcMaxCount, MoreIndicatorIcon,
 } from "../point_groups/criteria/component";
+import { Navigate, NavigateFunction, useNavigate } from "react-router";
 
 /** Open or close a SavedGarden. */
 const GardenViewButton = (props: GardenViewButtonProps) => {
-  const { dispatch, savedGardenId, gardenIsOpen } = props;
-  const onClick = openOrCloseGarden({ savedGardenId, gardenIsOpen, dispatch });
+  const { navigate, dispatch, savedGardenId, gardenIsOpen } = props;
+  const onClick = openOrCloseGarden({
+    navigate,
+    savedGardenId,
+    gardenIsOpen,
+    dispatch,
+  });
   const btnText = gardenIsOpen
     ? t("exit")
     : t("view");
@@ -41,22 +46,32 @@ const GardenViewButton = (props: GardenViewButtonProps) => {
 
 /** Apply a SavedGarden after checking that the current garden is empty. */
 const ApplyGardenButton =
-  (props: { plantPointerCount: number, gardenId: number, dispatch: Function }) =>
+  (props: {
+    plantPointerCount: number,
+    gardenId: number,
+    dispatch: Function,
+    navigate: NavigateFunction,
+  }) =>
     <button
       className="fb-button green"
       title={t("apply garden")}
       onClick={() => props.plantPointerCount > 0
         ? error(trim(`${t("Please clear current garden first.")}
         (${props.plantPointerCount} ${t("plants")})`))
-        : props.dispatch(applyGarden(props.gardenId))}>
+        : props.dispatch(applyGarden(props.navigate, props.gardenId))}>
       {t("apply")}
     </button>;
 
 const DestroyGardenButton =
-  (props: { dispatch: Function, gardenUuid: string }) =>
-    <i className={"fa fa-trash fb-icon-button"}
+  (props: {
+    navigate: NavigateFunction,
+    dispatch: Function,
+    gardenUuid: string,
+  }) =>
+    <i className={"fa fa-trash fb-icon-button invert"}
       title={t("delete garden")}
-      onClick={() => props.dispatch(destroySavedGarden(props.gardenUuid))} />;
+      onClick={() => props.dispatch(destroySavedGarden(
+        props.navigate, props.gardenUuid))} />;
 
 const findSavedGardenByUrl = (ri: ResourceIndex) => {
   const id = Path.getSlug(Path.savedGardens());
@@ -79,85 +94,78 @@ export const mapStateToProps = (props: Everything): EditGardenProps => {
   };
 };
 
-interface EditGardenState {
-  notes: string;
-  expand: boolean;
-}
+export const RawEditGarden = (props: EditGardenProps) => {
+  const navigate = useNavigate();
+  const [notes, setNotes] = React.useState(props.savedGarden?.body.notes || "");
+  const [expand, setExpand] = React.useState(false);
 
-export class RawEditGarden
-  extends React.Component<EditGardenProps, EditGardenState> {
-  state: EditGardenState = {
-    notes: this.props.savedGarden?.body.notes || "",
-    expand: false,
-  };
-
-  toggleExpand = () => this.setState({ expand: !this.state.expand });
+  const toggleExpand = () => setExpand(!expand);
 
-  render() {
-    const { savedGarden } = this.props;
-    const gardensPath = Path.savedGardens();
-    const plantsPath = Path.plants();
-    !savedGarden && Path.startsWith(gardensPath) && push(plantsPath);
-    const maxCount = this.state.expand ? 1000 : calcMaxCount(3);
-    return <DesignerPanel panelName={"saved-garden-edit"}
-      panel={Panel.SavedGardens}>
-      <DesignerPanelHeader
-        panelName={"saved-garden"}
-        panel={Panel.SavedGardens}
-        title={t("Edit garden")}
-        backTo={plantsPath}>
-        {savedGarden &&
-          <div className={"buttons"}>
-            <ApplyGardenButton
-              dispatch={this.props.dispatch}
-              plantPointerCount={this.props.plantPointerCount}
-              gardenId={savedGarden.body.id || -1} />
-            <DestroyGardenButton
-              dispatch={this.props.dispatch}
-              gardenUuid={savedGarden.uuid} />
-            <GardenViewButton
-              dispatch={this.props.dispatch}
-              savedGardenId={savedGarden.body.id}
-              gardenIsOpen={this.props.gardenIsOpen} />
-          </div>}
-      </DesignerPanelHeader>
-      <DesignerPanelContent panelName={"saved-garden-edit"}>
-        {savedGarden
-          ? <div className={"saved-garden-content"}>
-            <Row>
-              <label>{t("name")}</label>
-              <BlurableInput
-                value={savedGarden.body.name || ""}
-                onCommit={e => {
-                  this.props.dispatch(edit(savedGarden, {
-                    name: e.currentTarget.value
-                  }));
-                  this.props.dispatch(save(savedGarden.uuid));
-                }} />
-            </Row>
-            <Row>
-              <label>{t("notes")}</label>
-              <textarea
-                value={this.state.notes}
-                onChange={e => this.setState({ notes: e.currentTarget.value })}
-                onBlur={() => {
-                  this.props.dispatch(edit(savedGarden, {
-                    notes: this.state.notes
-                  }));
-                  this.props.dispatch(save(savedGarden.uuid));
-                }} />
-            </Row>
+  const { savedGarden } = props;
+  const gardensPath = Path.savedGardens();
+  const plantsPath = Path.plants();
+  const maxCount = expand ? 1000 : calcMaxCount(3);
+  return <DesignerPanel panelName={"saved-garden-edit"}
+    panel={Panel.SavedGardens}>
+    {!savedGarden && Path.startsWith(gardensPath) && <Navigate to={plantsPath} />}
+    <DesignerPanelHeader
+      panelName={"saved-garden"}
+      panel={Panel.SavedGardens}
+      title={t("Edit garden")}
+      backTo={plantsPath}>
+      {savedGarden &&
+        <div className={"buttons"}>
+          <ApplyGardenButton
+            navigate={navigate}
+            dispatch={props.dispatch}
+            plantPointerCount={props.plantPointerCount}
+            gardenId={savedGarden.body.id || -1} />
+          <DestroyGardenButton
+            navigate={navigate}
+            dispatch={props.dispatch}
+            gardenUuid={savedGarden.uuid} />
+          <GardenViewButton
+            navigate={navigate}
+            dispatch={props.dispatch}
+            savedGardenId={savedGarden.body.id}
+            gardenIsOpen={props.gardenIsOpen} />
+        </div>}
+    </DesignerPanelHeader>
+    <DesignerPanelContent panelName={"saved-garden-edit"}>
+      {savedGarden
+        ? <div className={"grid saved-garden-grid"}>
+          <label>{t("name")}</label>
+          <BlurableInput
+            value={savedGarden.body.name || ""}
+            onCommit={e => {
+              props.dispatch(edit(savedGarden, {
+                name: e.currentTarget.value
+              }));
+              props.dispatch(save(savedGarden.uuid));
+            }} />
+          <label>{t("notes")}</label>
+          <textarea
+            value={notes}
+            onChange={e => setNotes(e.currentTarget.value)}
+            onBlur={() => {
+              props.dispatch(edit(savedGarden, {
+                notes: notes
+              }));
+              props.dispatch(save(savedGarden.uuid));
+            }} />
+          <label>{t("plants")}</label>
+          <div className={"point-list-wrapper"}>
+            {take(props.gardenPlants, maxCount).map(point =>
+              <PointGroupItem key={point.uuid} point={point} />)}
+            <MoreIndicatorIcon count={props.gardenPlants.length}
+              maxCount={maxCount} onClick={toggleExpand} />
           </div>
-          : <p>{t("Garden not found.")}</p>}
-        <div className={"point-list-wrapper"}>
-          {take(this.props.gardenPlants, maxCount).map(point =>
-            <PointGroupItem key={point.uuid} point={point} />)}
-          <MoreIndicatorIcon count={this.props.gardenPlants.length}
-            maxCount={maxCount} onClick={this.toggleExpand} />
         </div>
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+        : <p>{t("Garden not found.")}</p>}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const EditGarden = connect(mapStateToProps)(RawEditGarden);
+// eslint-disable-next-line import/no-default-export
+export default EditGarden;
diff --git a/frontend/saved_gardens/garden_list.tsx b/frontend/saved_gardens/garden_list.tsx
index 1ae820717b..7d7a299934 100644
--- a/frontend/saved_gardens/garden_list.tsx
+++ b/frontend/saved_gardens/garden_list.tsx
@@ -1,23 +1,24 @@
 import React from "react";
-import { Col } from "../ui";
 import { isNumber, isString } from "lodash";
 import { openSavedGarden } from "./actions";
 import {
   SavedGardenItemProps, SavedGardenInfoProps, SavedGardenListProps,
 } from "./interfaces";
 import { t } from "../i18next_wrapper";
+import { useNavigate } from "react-router";
 
 /** Name input and PlantTemplate count for a single SavedGarden. */
 export const GardenInfo = (props: SavedGardenInfoProps) => {
   const { savedGarden, dispatch } = props;
+  const navigate = useNavigate();
   return <div className="saved-garden-info"
-    onClick={() => dispatch(openSavedGarden(savedGarden.body.id))}>
-    <Col>
+    onClick={() => dispatch(openSavedGarden(navigate, savedGarden.body.id))}>
+    <div>
       <span className={"saved-garden-search-item-name"}>
         {savedGarden.body.name}
       </span>
       <p><i>{props.plantTemplateCount} {t("plants")}</i></p>
-    </Col>
+    </div>
   </div>;
 };
 
diff --git a/frontend/saved_gardens/garden_snapshot.tsx b/frontend/saved_gardens/garden_snapshot.tsx
index 0992a424d1..05129a138b 100644
--- a/frontend/saved_gardens/garden_snapshot.tsx
+++ b/frontend/saved_gardens/garden_snapshot.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { snapshotGarden, newSavedGarden, copySavedGarden } from "./actions";
 import { TaggedPlantTemplate, TaggedSavedGarden } from "farmbot";
 import { t } from "../i18next_wrapper";
+import { useNavigate } from "react-router";
 
 export interface GardenSnapshotProps {
   currentSavedGarden: TaggedSavedGarden | undefined;
@@ -9,58 +10,60 @@ export interface GardenSnapshotProps {
   dispatch: Function;
 }
 
-interface GardenSnapshotState {
-  gardenName: string;
-  gardenNotes: string;
-}
-
 /** New SavedGarden name input and snapshot/create buttons. */
-export class GardenSnapshot
-  extends React.Component<GardenSnapshotProps, GardenSnapshotState> {
-  state = { gardenName: "", gardenNotes: "" };
+export const GardenSnapshot = (props: GardenSnapshotProps) => {
+  const [gardenName, setGardenName] = React.useState("");
+  const [gardenNotes, setGardenNotes] = React.useState("");
+  const navigate = useNavigate();
 
-  snapshot = () => {
-    const { currentSavedGarden, plantTemplates } = this.props;
+  const snapshot = () => {
+    const { currentSavedGarden, plantTemplates } = props;
     !currentSavedGarden
-      ? snapshotGarden(this.state.gardenName, this.state.gardenNotes)
-      : this.props.dispatch(copySavedGarden({
-        newSGName: this.state.gardenName,
+      ? snapshotGarden(navigate, gardenName, gardenNotes)
+      : props.dispatch(copySavedGarden({
+        navigate,
+        newSGName: gardenName,
         savedGarden: currentSavedGarden,
         plantTemplates
       }));
-    this.setState({ gardenName: "", gardenNotes: "" });
+    setGardenName("");
+    setGardenNotes("");
   };
 
-  new = () => {
-    this.props.dispatch(newSavedGarden(
-      this.state.gardenName,
-      this.state.gardenNotes,
+  const newGarden = () => {
+    props.dispatch(newSavedGarden(
+      navigate,
+      gardenName,
+      gardenNotes,
     ));
-    this.setState({ gardenName: "", gardenNotes: "" });
+    setGardenName("");
+    setGardenNotes("");
   };
 
-  render() {
-    return <div className="garden-snapshot">
+  return <div className="grid">
+    <div className="grid add-garden-grid">
       <label>{t("name")}</label>
       <input name="gardenName"
-        onChange={e => this.setState({ gardenName: e.currentTarget.value })}
-        value={this.state.gardenName} />
+        onChange={e => setGardenName(e.currentTarget.value)}
+        value={gardenName} />
       <label>{t("notes")}</label>
       <textarea name="notes"
-        onChange={e => this.setState({ gardenNotes: e.currentTarget.value })}
-        value={this.state.gardenNotes} />
+        onChange={e => setGardenNotes(e.currentTarget.value)}
+        value={gardenNotes} />
+    </div>
+    <div className="add-new-garden-buttons row">
       <button
-        className={"fb-button gray wide"}
+        className={"fb-button gray"}
         title={t("Snapshot current garden")}
-        onClick={this.snapshot}>
+        onClick={snapshot}>
         {t("Snapshot current garden")}
       </button>
       <button
-        className="fb-button green wide"
+        className="fb-button green"
         title={t("Add new garden")}
-        onClick={this.new}>
+        onClick={newGarden}>
         {t("Add new garden")}
       </button>
-    </div>;
-  }
-}
+    </div>
+  </div>;
+};
diff --git a/frontend/saved_gardens/interfaces.tsx b/frontend/saved_gardens/interfaces.tsx
index c205bfde25..987f4ffecc 100644
--- a/frontend/saved_gardens/interfaces.tsx
+++ b/frontend/saved_gardens/interfaces.tsx
@@ -1,4 +1,5 @@
 import { TaggedSavedGarden, TaggedPlantTemplate } from "farmbot";
+import { NavigateFunction } from "react-router";
 
 export interface SavedGardensProps {
   savedGardens: TaggedSavedGarden[];
@@ -17,6 +18,7 @@ export interface SavedGardensState {
 }
 
 export interface GardenViewButtonProps {
+  navigate: NavigateFunction;
   dispatch: Function;
   savedGardenId: number | undefined;
   gardenIsOpen: boolean;
diff --git a/frontend/saved_gardens/saved_gardens.tsx b/frontend/saved_gardens/saved_gardens.tsx
index 87d3c2d3fe..4fff9bdd9b 100644
--- a/frontend/saved_gardens/saved_gardens.tsx
+++ b/frontend/saved_gardens/saved_gardens.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Everything } from "../interfaces";
 import { connect } from "react-redux";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { unselectPlant } from "../farm_designer/map/actions";
 import {
   selectAllSavedGardens, selectAllPlantTemplates, selectAllPlantPointers,
@@ -12,7 +12,7 @@ import { closeSavedGarden } from "./actions";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { t } from "../i18next_wrapper";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
@@ -39,7 +39,6 @@ export class RawSavedGardens
 
   render() {
     return <DesignerPanel panelName={"saved-garden"} panel={Panel.SavedGardens}>
-      <DesignerNavTabs />
       <DesignerPanelContent panelName={"saved-garden"}>
         <DesignerPanelTop
           panel={Panel.SavedGardens}
@@ -64,22 +63,26 @@ export class RawSavedGardens
 }
 
 /** Sticky an indicator and actions menu when a SavedGarden is open. */
-export const SavedGardenHUD = (props: { dispatch: Function }) =>
-  <div className="saved-garden-indicator">
+export const SavedGardenHUD = (props: { dispatch: Function }) => {
+  const navigate = useNavigate();
+  return <div className="saved-garden-indicator">
     <label>{t("Viewing saved garden")}</label>
     <button className="fb-button green"
       title={t("open plants panel")}
       onClick={() => {
-        push(Path.plants());
+        navigate(Path.plants());
         unselectPlant(props.dispatch)();
       }}>
       {t("Edit")}
     </button>
     <button className="fb-button red"
       title={t("close saved garden")}
-      onClick={() => props.dispatch(closeSavedGarden())}>
+      onClick={() => props.dispatch(closeSavedGarden(navigate))}>
       {t("Exit")}
     </button>
   </div>;
+};
 
 export const SavedGardens = connect(mapStateToProps)(RawSavedGardens);
+// eslint-disable-next-line import/no-default-export
+export default SavedGardens;
diff --git a/frontend/sensors/__tests__/index_test.tsx b/frontend/sensors/__tests__/index_test.tsx
index 097d139164..09fc20149b 100644
--- a/frontend/sensors/__tests__/index_test.tsx
+++ b/frontend/sensors/__tests__/index_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { Sensors } from "../index";
 import { bot } from "../../__test_support__/fake_state/bot";
diff --git a/frontend/sensors/__tests__/sensor_form_test.tsx b/frontend/sensors/__tests__/sensor_form_test.tsx
index cc47ad39c8..1b14200c73 100644
--- a/frontend/sensors/__tests__/sensor_form_test.tsx
+++ b/frontend/sensors/__tests__/sensor_form_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import { SensorForm } from "../sensor_form";
 import { SensorFormProps } from "../interfaces";
diff --git a/frontend/sensors/__tests__/sensors_test.tsx b/frontend/sensors/__tests__/sensors_test.tsx
index 8af44c3f47..4564648a75 100644
--- a/frontend/sensors/__tests__/sensors_test.tsx
+++ b/frontend/sensors/__tests__/sensors_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import {
   RawDesignerSensors as DesignerSensors,
@@ -21,7 +21,7 @@ describe("<DesignerSensors />", () => {
 
   it("renders sensors panel", () => {
     const wrapper = mount(<DesignerSensors {...fakeProps()} />);
-    ["sensors", "sensor history"].map(string =>
+    ["sensors", "history"].map(string =>
       expect(wrapper.text().toLowerCase()).toContain(string));
   });
 });
diff --git a/frontend/sensors/index.tsx b/frontend/sensors/index.tsx
index 00b8b31b90..9588a61c45 100644
--- a/frontend/sensors/index.tsx
+++ b/frontend/sensors/index.tsx
@@ -3,13 +3,12 @@ import { error } from "../toast/toast";
 import { SensorList } from "./sensor_list";
 import { SensorForm } from "./sensor_form";
 import {
-  Widget, WidgetBody, WidgetHeader, SaveBtn, EmptyStateWrapper,
-  EmptyStateGraphic,
+  SaveBtn, EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui";
 import { SensorsProps, SensorState } from "./interfaces";
 import { getArrayStatus } from "../resources/tagged_resources";
 import { saveAll, init } from "../api/crud";
-import { ToolTips, Content } from "../constants";
+import { Content } from "../constants";
 import { uniq } from "lodash";
 import { t } from "../i18next_wrapper";
 
@@ -63,47 +62,48 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
     const editButtonText = isEditing
       ? t("Back")
       : t("Edit");
-    return <Widget className="sensors-widget">
-      <WidgetHeader title={t("Sensors")} helpText={ToolTips.SENSORS}>
-        <button
-          className="fb-button gray"
-          onClick={this.toggle}
-          title={editButtonText}
-          disabled={!!status && isEditing}>
-          {editButtonText}
-        </button>
-        <SaveBtn
-          hidden={!isEditing}
-          status={status}
-          onClick={this.maybeSave} />
-        <button
-          hidden={!isEditing}
-          className="fb-button green"
-          type="button"
-          title={t("add sensors")}
-          onClick={() => this.newSensor()}>
-          <i className="fa fa-plus" />
-        </button>
-        <button
-          hidden={!isEditing || this.props.firmwareHardware == "none"}
-          className="fb-button green"
-          type="button"
-          title={t("add stock sensors")}
-          onClick={this.stockSensors}>
-          <i className="fa fa-plus" style={{ marginRight: "0.5rem" }} />
-          {t("Stock sensors")}
-        </button>
-      </WidgetHeader>
-      <WidgetBody>
-        <EmptyStateWrapper
-          notEmpty={this.props.sensors.length > 0 || isEditing}
-          graphic={EmptyStateGraphic.tools}
-          title={t("No Sensors yet.")}
-          text={Content.NO_SENSORS}
-          colorScheme={"sensors"}>
-          {this.showPins()}
-        </EmptyStateWrapper>
-      </WidgetBody>
-    </Widget>;
+    return <div className="sensors-panel">
+      <div className="panel-header">
+        <h2 className="panel-title">{t("Sensors")}</h2>
+        <div>
+          <button
+            className="fb-button gray"
+            onClick={this.toggle}
+            title={editButtonText}
+            disabled={!!status && isEditing}>
+            {editButtonText}
+          </button>
+          <SaveBtn
+            hidden={!isEditing}
+            status={status}
+            onClick={this.maybeSave} />
+          <button
+            hidden={!isEditing}
+            className="fb-button green"
+            type="button"
+            title={t("add sensors")}
+            onClick={() => this.newSensor()}>
+            <i className="fa fa-plus" />
+          </button>
+          <button
+            hidden={!isEditing || this.props.firmwareHardware == "none"}
+            className="fb-button green"
+            type="button"
+            title={t("add stock sensors")}
+            onClick={this.stockSensors}>
+            <i className="fa fa-plus" style={{ marginRight: "0.5rem" }} />
+            {t("Stock sensors")}
+          </button>
+        </div>
+      </div>
+      <EmptyStateWrapper
+        notEmpty={this.props.sensors.length > 0 || isEditing}
+        graphic={EmptyStateGraphic.tools}
+        title={t("No Sensors yet.")}
+        text={Content.NO_SENSORS}
+        colorScheme={"sensors"}>
+        {this.showPins()}
+      </EmptyStateWrapper>
+    </div>;
   }
 }
diff --git a/frontend/sensors/sensor_form.tsx b/frontend/sensors/sensor_form.tsx
index 8a0867ba91..c6ee0c167b 100644
--- a/frontend/sensors/sensor_form.tsx
+++ b/frontend/sensors/sensor_form.tsx
@@ -1,36 +1,30 @@
-import * as React from "react";
+import React from "react";
 import { SensorFormProps } from "./interfaces";
 import { sortResourcesById } from "../util";
-import { Row, Col } from "../ui";
+import { Row } from "../ui";
 import { DeleteButton } from "../ui/delete_button";
-import { NameInputBox, PinDropdown, ModeDropdown } from "../controls/pin_form_fields";
+import {
+  NameInputBox, PinDropdown, ModeDropdown,
+} from "../controls/pin_form_fields";
 
 export const SensorForm = (props: SensorFormProps) =>
-  <div className="sensor-form">
+  <div className="grid">
     {sortResourcesById(props.sensors).map(sensor =>
-      <Row key={sensor.uuid}>
-        <Col xs={4}>
-          <NameInputBox
-            dispatch={props.dispatch}
-            value={sensor.body.label}
-            resource={sensor} />
-        </Col>
-        <Col xs={3}>
-          <PinDropdown
-            dispatch={props.dispatch}
-            value={sensor.body.pin}
-            resource={sensor} />
-        </Col>
-        <Col xs={3}>
-          <ModeDropdown
-            dispatch={props.dispatch}
-            value={sensor.body.mode}
-            resource={sensor} />
-        </Col>
-        <Col xs={2}>
-          <DeleteButton
-            dispatch={props.dispatch}
-            uuid={sensor.uuid} />
-        </Col>
+      <Row key={sensor.uuid} className="sensor-form-grid">
+        <NameInputBox
+          dispatch={props.dispatch}
+          value={sensor.body.label}
+          resource={sensor} />
+        <PinDropdown
+          dispatch={props.dispatch}
+          value={sensor.body.pin}
+          resource={sensor} />
+        <ModeDropdown
+          dispatch={props.dispatch}
+          value={sensor.body.mode}
+          resource={sensor} />
+        <DeleteButton
+          dispatch={props.dispatch}
+          uuid={sensor.uuid} />
       </Row>)}
   </div>;
diff --git a/frontend/sensors/sensor_list.tsx b/frontend/sensors/sensor_list.tsx
index 8627f23510..13bda3d8b2 100644
--- a/frontend/sensors/sensor_list.tsx
+++ b/frontend/sensors/sensor_list.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { readPin } from "../devices/actions";
 import { SensorListProps } from "./interfaces";
 import { sortResourcesById } from "../util";
-import { Row, Col } from "../ui";
+import { Row } from "../ui";
 import { isNumber } from "lodash";
 import { ALLOWED_PIN_MODES } from "farmbot";
 import { t } from "../i18next_wrapper";
@@ -60,28 +60,20 @@ const SensorReadingDisplay =
   };
 
 export const SensorList = (props: SensorListProps) =>
-  <div className="sensor-list">
+  <div className="grid">
     {sortResourcesById(props.sensors).map(sensor => {
       const { label, mode, pin } = sensor.body;
       const pinNumber = (isNumber(pin) && isFinite(pin)) ? pin : -1;
       const value = (props.pins[pinNumber] || { value: undefined }).value;
-      return <Row key={sensor.uuid}>
-        <Col xs={3}>
-          <label>{label}</label>
-        </Col>
-        <Col xs={1}>
-          <p>{pinNumber}</p>
-        </Col>
-        <Col xs={6}>
-          <SensorReadingDisplay label={label} value={value} mode={mode} />
-        </Col>
-        <Col xs={2}>
-          <ReadSensorButton
-            disabled={!!props.disabled}
-            sensorLabel={label}
-            pinNumber={pinNumber}
-            mode={mode} />
-        </Col>
+      return <Row key={sensor.uuid} className="grid-exp-1">
+        <label>{label}</label>
+        <p>{pinNumber}</p>
+        <SensorReadingDisplay label={label} value={value} mode={mode} />
+        <ReadSensorButton
+          disabled={!!props.disabled}
+          sensorLabel={label}
+          pinNumber={pinNumber}
+          mode={mode} />
       </Row>;
     })}
   </div>;
diff --git a/frontend/sensors/sensor_readings/__tests__/add_reading_test.tsx b/frontend/sensors/sensor_readings/__tests__/add_reading_test.tsx
index 7e37b214fa..dc2d3d25a9 100644
--- a/frontend/sensors/sensor_readings/__tests__/add_reading_test.tsx
+++ b/frontend/sensors/sensor_readings/__tests__/add_reading_test.tsx
@@ -31,7 +31,7 @@ describe("<AddSensorReadingMenu />", () => {
     const wrapper = shallow<AddSensorReadingMenu>(
       <AddSensorReadingMenu {...fakeProps()} />);
     const e = inputEvent("");
-    wrapper.find(BlurableInput).at(0).props().onCommit(e);
+    wrapper.find(BlurableInput).at(1).props().onCommit(e);
     expect(wrapper.state().date).toEqual("");
   });
 
@@ -39,7 +39,7 @@ describe("<AddSensorReadingMenu />", () => {
     const wrapper = shallow<AddSensorReadingMenu>(
       <AddSensorReadingMenu {...fakeProps()} />);
     const e = inputEvent("");
-    wrapper.find(BlurableInput).at(1).props().onCommit(e);
+    wrapper.find(BlurableInput).at(2).props().onCommit(e);
     expect(wrapper.state().time).toEqual("");
   });
 
@@ -67,7 +67,7 @@ describe("<AddSensorReadingMenu />", () => {
   it("changes value", () => {
     const wrapper = shallow<AddSensorReadingMenu>(
       <AddSensorReadingMenu {...fakeProps()} />);
-    wrapper.find("BlurableInput").last().simulate("commit", {
+    wrapper.find("BlurableInput").first().simulate("commit", {
       currentTarget: { value: 1 },
     });
     expect(wrapper.state().value).toEqual(1);
diff --git a/frontend/sensors/sensor_readings/__tests__/location_selection_test.tsx b/frontend/sensors/sensor_readings/__tests__/location_selection_test.tsx
index d5979e46c7..2f186c9ec8 100644
--- a/frontend/sensors/sensor_readings/__tests__/location_selection_test.tsx
+++ b/frontend/sensors/sensor_readings/__tests__/location_selection_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount, shallow } from "enzyme";
 import { LocationSelection, LocationDisplay } from "../location_selection";
 import { LocationSelectionProps } from "../interfaces";
diff --git a/frontend/sensors/sensor_readings/__tests__/sensor_readings_test.tsx b/frontend/sensors/sensor_readings/__tests__/sensor_readings_test.tsx
index d2ff1bd0ed..45d3682d13 100644
--- a/frontend/sensors/sensor_readings/__tests__/sensor_readings_test.tsx
+++ b/frontend/sensors/sensor_readings/__tests__/sensor_readings_test.tsx
@@ -19,7 +19,7 @@ describe("<SensorReadings />", () => {
   it("renders", () => {
     const wrapper = mount(<SensorReadings {...fakeProps()} />);
     const txt = wrapper.text().toLowerCase();
-    ["sensor history", "sensor", "time period", "end date", "deviation"]
+    ["history", "sensor", "time period", "end date", "deviation"]
       .map(string => expect(txt).toContain(string));
   });
 
diff --git a/frontend/sensors/sensor_readings/__tests__/time_period_selection_test.tsx b/frontend/sensors/sensor_readings/__tests__/time_period_selection_test.tsx
index 71fc4a5c72..889427ca3a 100644
--- a/frontend/sensors/sensor_readings/__tests__/time_period_selection_test.tsx
+++ b/frontend/sensors/sensor_readings/__tests__/time_period_selection_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount, shallow } from "enzyme";
 import {
   TimePeriodSelection, getEndDate, DateDisplay,
diff --git a/frontend/sensors/sensor_readings/add_reading.tsx b/frontend/sensors/sensor_readings/add_reading.tsx
index 84e34c8ece..be474c0c09 100644
--- a/frontend/sensors/sensor_readings/add_reading.tsx
+++ b/frontend/sensors/sensor_readings/add_reading.tsx
@@ -9,7 +9,7 @@ import { formatDateField } from "../../farm_events/map_state_to_props_add_edit";
 import { t } from "../../i18next_wrapper";
 import { TimeSettings } from "../../interfaces";
 import { error } from "../../toast/toast";
-import { BlurableInput, Col, Row } from "../../ui";
+import { BlurableInput, Row } from "../../ui";
 import { SensorSelection } from "./sensor_selection";
 
 export interface AddSensorReadingMenuProps {
@@ -44,40 +44,53 @@ export class AddSensorReadingMenu
   };
 
   render() {
-    return <div className={"add-sensor-reading-menu"}>
-      <SensorSelection
-        selectedSensor={this.state.sensor}
-        sensors={this.props.sensors}
-        setSensor={sensor => this.setState({ sensor })} />
-      <div className={"reading-date-time-form"}>
-        <label>
-          {t("When")}
-        </label>
-        <Row>
-          <Col xs={6}>
-            <BlurableInput
-              type={"date"}
-              className={"reading-date"}
-              name={"date"}
-              value={this.state.date}
-              onCommit={e => this.setState({ date: e.currentTarget.value })} />
-          </Col>
-          <Col xs={6}>
-            <BlurableInput
-              type={"time"}
-              className={"reading-time"}
-              name={"time"}
-              value={this.state.time}
-              onCommit={e => this.setState({ time: e.currentTarget.value })} />
-          </Col>
-        </Row>
+    return <div className={"add-sensor-reading-menu grid"}>
+      <div className="row grid-2-col">
+        <SensorSelection
+          selectedSensor={this.state.sensor}
+          sensors={this.props.sensors}
+          setSensor={sensor => this.setState({ sensor })} />
+        <div className={"add-reading-value-form grid no-gap"}>
+          <label>{t("value")}</label>
+          <BlurableInput
+            type={"number"}
+            className={"add-reading-value"}
+            value={this.state.value || 0}
+            onCommit={e => this.setState({
+              value: parseInt(e.currentTarget.value)
+            })} />
+        </div>
+      </div>
+      <div className="row grid-2-col">
+        <div className={"add-reading-value-form grid no-gap"}>
+          <label>
+            {t("Date")}
+          </label>
+          <BlurableInput
+            type={"date"}
+            className={"reading-date"}
+            name={"date"}
+            value={this.state.date}
+            onCommit={e => this.setState({ date: e.currentTarget.value })} />
+        </div>
+        <div className={"add-reading-value-form grid no-gap"}>
+          <label>
+            {t("Time")}
+          </label>
+          <BlurableInput
+            type={"time"}
+            className={"reading-time"}
+            name={"time"}
+            value={this.state.time}
+            onCommit={e => this.setState({ time: e.currentTarget.value })} />
+        </div>
       </div>
       <div className={"reading-location"}>
         <Row>
           {["x", "y", "z"].map(axis =>
-            <Col key={axis + "_heading"} xs={3}>
+            <div key={axis + "_heading"}>
               <label>{axis}</label>
-            </Col>)}
+            </div>)}
         </Row>
         <Row>
           {["x", "y", "z"].map((axis: Xyz) =>
@@ -89,24 +102,6 @@ export class AddSensorReadingMenu
                 this.setState({ ...this.state, [a]: v })} />)}
         </Row>
       </div>
-      <div className={"add-reading-value-form"}>
-        <Row>
-          <Col xs={6}>
-            <label>{t("value")}</label>
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={6}>
-            <BlurableInput
-              type={"number"}
-              className={"add-reading-value"}
-              value={this.state.value || 0}
-              onCommit={e => this.setState({
-                value: parseInt(e.currentTarget.value)
-              })} />
-          </Col>
-        </Row>
-      </div>
       <button className={"fb-button green"}
         onClick={() => {
           if (!this.state.sensor || !this.state.sensor.body.pin) {
diff --git a/frontend/sensors/sensor_readings/graph.tsx b/frontend/sensors/sensor_readings/graph.tsx
index e5c545a9b3..e068f20385 100644
--- a/frontend/sensors/sensor_readings/graph.tsx
+++ b/frontend/sensors/sensor_readings/graph.tsx
@@ -74,7 +74,7 @@ const HorizontalGridlines = (props: PlotProps) =>
           x={-50} y={props.yZero - y}>
           {y}
         </text>
-        <line stroke="gray"
+        <line stroke="#777"
           x1={0} y1={props.yZero - y} x2={props.xMax} y2={props.yZero - y} />
       </g>;
     })}
@@ -114,12 +114,12 @@ const VerticalGridlines = (props: PlotProps) =>
             {createLabel("current")}
           </text>}
         {major && props.showPreviousPeriod &&
-          <text textAnchor="middle" stroke={"gray"}
+          <text textAnchor="middle" stroke={"#777"}
             x={x / props.timeScale}
             y={props.yZero + 200}>
             {createLabel("previous")}
           </text>}
-        <line stroke={major ? "black" : "gray"}
+        <line stroke={major ? "#ccc" : "#777"}
           x1={x / props.timeScale}
           y1={props.yZero}
           x2={x / props.timeScale}
@@ -145,7 +145,7 @@ const DataPoints = ({ plotProps, parentProps }: {
             - (unixMax - read_at.unix()) / plotProps.timeScale;
           const cy = plotProps.yZero - clamp(r.body.value
             * (r.body.mode == 0 && r.body.value <= 1 ? 1023 : 1), 0, 1023);
-          const color = period === "current" ? "black" : "gray";
+          const color = period === "current" ? "#ccc" : "#777";
           const selected = parentProps.hovered === r.uuid;
           return <g id={r.uuid} key={r.uuid}>
             <circle fill={color} stroke={color}
diff --git a/frontend/sensors/sensor_readings/location_selection.tsx b/frontend/sensors/sensor_readings/location_selection.tsx
index 53ec54e1e4..1e763347ff 100644
--- a/frontend/sensors/sensor_readings/location_selection.tsx
+++ b/frontend/sensors/sensor_readings/location_selection.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Row, Col, BlurableInput } from "../../ui";
+import React from "react";
+import { Row, BlurableInput } from "../../ui";
 import { AxisInputBoxGroupState } from "../../controls/interfaces";
 import { AxisInputBox } from "../../controls/axis_input_box";
 import { isNumber } from "lodash";
@@ -11,17 +11,15 @@ import { Xyz } from "farmbot";
 /** Select a location filter for sensor readings. */
 export const LocationSelection =
   ({ xyzLocation, deviation, setDeviation, setLocation }: LocationSelectionProps) =>
-    <div className="sensor-history-location-selection">
-      <Row>
+    <div>
+      <Row className="grid-4-col">
         {["x", "y", "z"].map(axis =>
-          <Col key={axis + "_heading"} xs={3}>
+          <div key={axis + "_heading"}>
             <label>{axis}</label>
-          </Col>)}
-        <Col xs={3}>
-          <label>{t("Deviation")}</label>
-        </Col>
+          </div>)}
+        <label>{t("Deviation")}</label>
       </Row>
-      <Row>
+      <Row className="grid-4-col">
         {["x", "y", "z"].map((axis: Xyz) =>
           <AxisInputBox
             key={axis}
@@ -32,12 +30,10 @@ export const LocationSelection =
               newLocation[a] = v;
               setLocation(newLocation);
             }} />)}
-        <Col xs={3}>
-          <BlurableInput
-            type="number"
-            value={deviation}
-            onCommit={e => setDeviation(parseIntInput(e.currentTarget.value))} />
-        </Col>
+        <BlurableInput
+          type="number"
+          value={deviation}
+          onCommit={e => setDeviation(parseIntInput(e.currentTarget.value))} />
       </Row>
     </div>;
 
diff --git a/frontend/sensors/sensor_readings/sensor_readings.tsx b/frontend/sensors/sensor_readings/sensor_readings.tsx
index 97323929fd..674779e94d 100644
--- a/frontend/sensors/sensor_readings/sensor_readings.tsx
+++ b/frontend/sensors/sensor_readings/sensor_readings.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
-import { Widget, WidgetHeader, WidgetBody, WidgetFooter, Popover } from "../../ui";
+import { Popover } from "../../ui";
 import { SensorReadingsProps, SensorReadingsState } from "./interfaces";
 import { SensorReadingsTable } from "./table";
 import { filterSensorReadings } from "./filter_readings";
@@ -9,7 +9,6 @@ import {
 } from "./time_period_selection";
 import { LocationSelection, LocationDisplay } from "./location_selection";
 import { SensorSelection } from "./sensor_selection";
-import { ToolTips } from "../../constants";
 import { TaggedSensor } from "farmbot";
 import { AxisInputBoxGroupState } from "../../controls/interfaces";
 import { SensorReadingsPlot } from "./graph";
@@ -58,29 +57,30 @@ export class SensorReadings
     const readingsForPeriod =
       filterSensorReadings(this.props.sensorReadings, this.state);
 
-    return <Widget className="sensor-history-widget">
-      <WidgetHeader
-        title={t("Sensor History")}
-        helpText={ToolTips.SENSOR_HISTORY}>
-        <button className="fb-button gray"
-          title={t("clear filters")}
-          onClick={this.clearFilters}>
-          {t("clear filters")}
-        </button>
-        <Popover position={Position.TOP} usePortal={false}
-          isOpen={this.state.addReadingMenuOpen}
-          target={<button className={"fb-button green"}
-            title={t("add sensor reading")}
-            onClick={this.toggleAddReadingMenu}>
-            <i className={"fa fa-plus"} />
-          </button>}
-          content={<AddSensorReadingMenu
-            sensors={this.props.sensors}
-            closeMenu={this.toggleAddReadingMenu}
-            timeSettings={this.props.timeSettings}
-            dispatch={this.props.dispatch} />} />
-      </WidgetHeader>
-      <WidgetBody>
+    return <div className="sensor-history-widget">
+      <div className="panel-header">
+        <h2 className="panel-title">{t("History")}</h2>
+        <div className="row">
+          <button className="fb-button gray"
+            title={t("clear filters")}
+            onClick={this.clearFilters}>
+            {t("clear filters")}
+          </button>
+          <Popover position={Position.TOP} usePortal={false}
+            isOpen={this.state.addReadingMenuOpen}
+            target={<button className={"fb-button green"}
+              title={t("add sensor reading")}
+              onClick={this.toggleAddReadingMenu}>
+              <i className={"fa fa-plus"} />
+            </button>}
+            content={<AddSensorReadingMenu
+              sensors={this.props.sensors}
+              closeMenu={this.toggleAddReadingMenu}
+              timeSettings={this.props.timeSettings}
+              dispatch={this.props.dispatch} />} />
+        </div>
+      </div>
+      <div className="grid">
         <SensorSelection
           selectedSensor={this.state.sensor}
           sensors={this.props.sensors}
@@ -98,7 +98,6 @@ export class SensorReadings
           deviation={this.state.deviation}
           setLocation={this.setLocation}
           setDeviation={this.setDeviation} />
-        <hr />
         <SensorReadingsPlot
           readingsForPeriod={readingsForPeriod}
           endDate={this.state.endDate}
@@ -113,19 +112,17 @@ export class SensorReadings
           timeSettings={this.props.timeSettings}
           hover={this.hover}
           hovered={this.state.hovered} />
-      </WidgetBody>
-      <WidgetFooter>
-        <div className="sensor-history-footer">
-          <DateDisplay
-            endDate={this.state.endDate}
-            showPreviousPeriod={this.state.showPreviousPeriod}
-            timePeriod={this.state.timePeriod}
-            timeSettings={this.props.timeSettings} />
-          <LocationDisplay
-            xyzLocation={this.state.xyzLocation}
-            deviation={this.state.deviation} />
-        </div>
-      </WidgetFooter>
-    </Widget>;
+      </div>
+      <div className="sensor-history-footer">
+        <DateDisplay
+          endDate={this.state.endDate}
+          showPreviousPeriod={this.state.showPreviousPeriod}
+          timePeriod={this.state.timePeriod}
+          timeSettings={this.props.timeSettings} />
+        <LocationDisplay
+          xyzLocation={this.state.xyzLocation}
+          deviation={this.state.deviation} />
+      </div>
+    </div>;
   }
 }
diff --git a/frontend/sensors/sensor_readings/time_period_selection.tsx b/frontend/sensors/sensor_readings/time_period_selection.tsx
index fd4f012760..d505f6749b 100644
--- a/frontend/sensors/sensor_readings/time_period_selection.tsx
+++ b/frontend/sensors/sensor_readings/time_period_selection.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FBSelect, Row, Col, BlurableInput } from "../../ui";
+import { FBSelect, Row, BlurableInput } from "../../ui";
 import moment from "moment";
 import { TaggedSensorReading } from "farmbot";
 import { TimePeriodSelectionProps, DateDisplayProps } from "./interfaces";
@@ -30,55 +30,38 @@ export const getEndDate = (sensorReadings: TaggedSensorReading[]) =>
       .body.read_at).startOf("day").unix()
     : today;
 
-enum ColWidth {
-  period = 3,
-  endDate = 5,
-  showPrevious = 4,
-}
-
 /** Specify a time period by end date and duration. */
 export const TimePeriodSelection = (props: TimePeriodSelectionProps) => {
   const { timePeriod, endDate, showPreviousPeriod,
     setEndDate, setPeriod, togglePrevious } = props;
   return <div className="sensor-history-time-selection">
-    <Row>
-      <Col xs={ColWidth.period}>
-        <label>{t("Time period")}</label>
-      </Col>
-      <Col xs={ColWidth.endDate}>
+    <Row className="grid-3-col">
+      <label>{t("Time period")}</label>
+      <div className="row">
         <label style={{ display: "inline" }}>{t("Period End Date")}</label>
-        <i className={"fa fa-clock-o fb-icon-button"}
-          style={{ marginLeft: "1rem" }}
+        <i className={"fa fa-clock-o fb-icon-button invert"}
           onClick={() => setEndDate(today)} />
-      </Col>
-      <Col xs={ColWidth.showPrevious}>
-        <label>{t("Show Previous Period")}</label>
-      </Col>
+      </div>
+      <label>{t("Show Previous Period")}</label>
     </Row>
-    <Row>
-      <Col xs={ColWidth.period}>
-        <FBSelect
-          key={timePeriod}
-          selectedItem={
-            { label: timePeriodLookup()[timePeriod], value: timePeriod }}
-          onChange={ddi => setPeriod(parseInt("" + ddi.value))}
-          list={timePeriodList()} />
-      </Col>
-      <Col xs={ColWidth.endDate}>
-        <BlurableInput
-          type="date"
-          value={moment.unix(endDate).format(blurableInputDateFormat)}
-          onCommit={e => setEndDate(moment(e.currentTarget.value,
-            blurableInputDateFormat).unix())} />
-      </Col>
-      <Col xs={ColWidth.showPrevious}>
-        <div className="fb-checkbox large">
-          <input type="checkbox"
-            name="previous"
-            checked={showPreviousPeriod}
-            onChange={togglePrevious} />
-        </div>
-      </Col>
+    <Row className="grid-3-col">
+      <FBSelect
+        key={timePeriod}
+        selectedItem={
+          { label: timePeriodLookup()[timePeriod], value: timePeriod }}
+        onChange={ddi => setPeriod(parseInt("" + ddi.value))}
+        list={timePeriodList()} />
+      <BlurableInput
+        type="date"
+        value={moment.unix(endDate).format(blurableInputDateFormat)}
+        onCommit={e => setEndDate(moment(e.currentTarget.value,
+          blurableInputDateFormat).unix())} />
+      <div className="fb-checkbox large">
+        <input type="checkbox"
+          name="previous"
+          checked={showPreviousPeriod}
+          onChange={togglePrevious} />
+      </div>
     </Row>
   </div>;
 };
diff --git a/frontend/sensors/sensors.tsx b/frontend/sensors/sensors.tsx
index bb274ab267..58f1a131b5 100644
--- a/frontend/sensors/sensors.tsx
+++ b/frontend/sensors/sensors.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { uniq } from "lodash";
 import { BotState } from "../devices/interfaces";
 import { TaggedSensor, FirmwareHardware, TaggedSensorReading } from "farmbot";
@@ -54,7 +54,6 @@ export class RawDesignerSensors
 
   render() {
     return <DesignerPanel panelName={"sensors"} panel={Panel.Sensors}>
-      <DesignerNavTabs />
       <DesignerPanelContent panelName={"sensors"}>
         <Sensors
           firmwareHardware={this.props.firmwareHardware}
@@ -74,3 +73,5 @@ export class RawDesignerSensors
 }
 
 export const DesignerSensors = connect(mapStateToProps)(RawDesignerSensors);
+// eslint-disable-next-line import/no-default-export
+export default DesignerSensors;
diff --git a/frontend/sequences/__tests__/actions_test.ts b/frontend/sequences/__tests__/actions_test.ts
index 27bfca4e16..994a2d91fc 100644
--- a/frontend/sequences/__tests__/actions_test.ts
+++ b/frontend/sequences/__tests__/actions_test.ts
@@ -28,7 +28,6 @@ import {
 } from "../actions";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
 import { init, edit, overwrite } from "../../api/crud";
-import { push } from "../../history";
 import { Actions } from "../../constants";
 import { setActiveSequenceByName } from "../set_active_sequence_by_name";
 import { TakePhoto, Wait } from "farmbot";
@@ -45,18 +44,21 @@ describe("copySequence()", () => {
     const sequence = fakeSequence();
     sequence.body.body = [{ kind: "wait", args: { milliseconds: 100 } }];
     const { body } = sequence.body;
-    copySequence(sequence)(jest.fn(), fakeState);
+    const navigate = jest.fn();
+    copySequence(navigate, sequence)(jest.fn(), fakeState);
     expect(init).toHaveBeenCalledWith("Sequence",
       expect.objectContaining({ name: "fake copy 1", body }));
   });
 
   it("updates current path", () => {
-    copySequence(fakeSequence())(jest.fn(), fakeState);
-    expect(push).toHaveBeenCalledWith(Path.sequences("fake_copy_2"));
+    const navigate = jest.fn();
+    copySequence(navigate, fakeSequence())(jest.fn(), fakeState);
+    expect(navigate).toHaveBeenCalledWith(Path.sequences("fake_copy_2"));
   });
 
   it("selects sequence", () => {
-    copySequence(fakeSequence())(jest.fn(), fakeState);
+    const navigate = jest.fn();
+    copySequence(navigate, fakeSequence())(jest.fn(), fakeState);
     expect(setActiveSequenceByName).toHaveBeenCalled();
   });
 
@@ -66,8 +68,9 @@ describe("copySequence()", () => {
     const device = fakeDevice();
     device.body.max_sequence_count = 1;
     state.resources = buildResourceIndex([sequence, device]);
-    copySequence(fakeSequence())(jest.fn(), () => state);
-    expect(push).not.toHaveBeenCalled();
+    const navigate = jest.fn();
+    copySequence(navigate, fakeSequence())(jest.fn(), () => state);
+    expect(navigate).not.toHaveBeenCalled();
     expect(error).toHaveBeenCalledWith(expect.stringContaining(
       "The maximum number of sequences allowed is 1."));
   });
diff --git a/frontend/sequences/__tests__/all_steps_test.tsx b/frontend/sequences/__tests__/all_steps_test.tsx
index b6d7f0661e..4696d73119 100644
--- a/frontend/sequences/__tests__/all_steps_test.tsx
+++ b/frontend/sequences/__tests__/all_steps_test.tsx
@@ -22,7 +22,7 @@ describe("<AllSteps />", () => {
     const p = fakeProps();
     p.sequence.body.body = undefined;
     const wrapper = shallow(<AllSteps {...p} />);
-    expect(wrapper.html()).toEqual("<div class=\"all-steps\"></div>");
+    expect(wrapper.html()).toEqual("<div class=\"grid\"></div>");
   });
 
   it("renders steps", () => {
diff --git a/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx b/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
index c558cd32e0..ba2a2b629f 100644
--- a/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
+++ b/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = "";
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 jest.mock("../../api/crud", () => ({
   destroy: jest.fn(),
   save: jest.fn(),
@@ -60,7 +53,7 @@ jest.mock("../../ui/popover", () => ({
   Popover: ({ target, content }: PopoverProps) => <div>{target}{content}</div>,
 }));
 
-import React from "react";
+import React, { act } from "react";
 import {
   SequenceEditorMiddleActive, onDrop, SequenceName, AddCommandButton,
   SequenceSettingsMenu,
@@ -99,18 +92,17 @@ import { DropAreaProps } from "../../draggable/interfaces";
 import { Actions, Content, DeviceSetting } from "../../constants";
 import { setWebAppConfigValue } from "../../config_storage/actions";
 import { BooleanSetting } from "../../session_keys";
-import { push } from "../../history";
 import { maybeTagStep } from "../../resources/sequence_tagging";
 import { error } from "../../toast/toast";
 import { API } from "../../api";
 import { loadSequenceVersion } from "../panel/preview_support";
-import { act } from "react-dom/test-utils";
 import { VariableType } from "../locals_list/locals_list_support";
 import { generateNewVariableLabel } from "../locals_list/locals_list";
 import { StepButtonCluster } from "../step_button_cluster";
 import { changeEvent } from "../../__test_support__/fake_html_events";
 import { requestAutoGeneration } from "../request_auto_generation";
 import { emptyState } from "../../resources/reducer";
+import { Path } from "../../internal_urls";
 
 describe("<SequenceEditorMiddleActive />", () => {
   API.setBaseUrl("");
@@ -211,9 +203,10 @@ describe("<SequenceEditorMiddleActive />", () => {
     const p = fakeProps();
     p.dispatch = () => Promise.resolve();
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    await clickButton(wrapper, 0, "save");
+    const button = wrapper.find(".save-btn");
+    await clickButton(button, 0, "save");
     expect(save).toHaveBeenCalledWith(expect.stringContaining("Sequence"));
-    expect(push).toHaveBeenCalledWith(Path.sequences("fake"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.sequences("fake"));
   });
 
   it("tests", () => {
@@ -221,7 +214,8 @@ describe("<SequenceEditorMiddleActive />", () => {
     p.syncStatus = "synced";
     p.sequence.specialStatus = SpecialStatus.SAVED;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    clickButton(wrapper, 1, "Run");
+    const button = wrapper.find(".run-btn");
+    clickButton(button, 0, "Run");
     expect(execSequence).toHaveBeenCalledWith(p.sequence.body.id);
   });
 
@@ -248,9 +242,10 @@ describe("<SequenceEditorMiddleActive />", () => {
   it("copies", () => {
     const wrapper = mount(<SequenceEditorMiddleActive {...fakeProps()} />);
     wrapper.find(".fa-copy").simulate("click");
-    expect(copySequence).toHaveBeenCalledWith(expect.objectContaining({
-      uuid: expect.stringContaining("Sequence")
-    }));
+    expect(copySequence).toHaveBeenCalledWith(expect.any(Function),
+      expect.objectContaining({
+        uuid: expect.stringContaining("Sequence")
+      }));
   });
 
   it("has drag area", () => {
@@ -306,7 +301,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("visualizes", () => {
-    mockPath = Path.mock(Path.designerSequences("1"));
+    location.pathname = Path.mock(Path.designerSequences("1"));
     const p = fakeProps();
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
     wrapper.find(".fa-eye-slash").simulate("click");
@@ -317,7 +312,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("un-visualizes", () => {
-    mockPath = Path.mock(Path.designerSequences("1"));
+    location.pathname = Path.mock(Path.designerSequences("1"));
     const p = fakeProps();
     p.visualized = true;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
@@ -329,7 +324,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("pins sequence", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.pinned = false;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
@@ -338,7 +333,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("unpins sequence", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.pinned = true;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
@@ -347,7 +342,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("loads sequence preview", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.sequence_versions = [1, 2, 3];
     mount(<SequenceEditorMiddleActive {...p} />);
@@ -356,7 +351,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("sets sequence preview", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.description = "description";
     const wrapper = mount<SequenceEditorMiddleActive>(
@@ -368,7 +363,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("sets error", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     const wrapper = mount<SequenceEditorMiddleActive>(
       <SequenceEditorMiddleActive {...p} />);
@@ -378,7 +373,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("renders public view", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     const wrapper = mount<SequenceEditorMiddleActive>(
       <SequenceEditorMiddleActive {...p} />);
@@ -391,7 +386,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("renders public view with id", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const sequence = fakeSequence();
     sequence.body.id = 1;
     const p = fakeProps();
@@ -404,7 +399,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("renders celery script view button: enabled", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence = fakeSequence();
     p.sequence.body.sequence_version_id = 1;
@@ -422,7 +417,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("renders celery script view button: disabled", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     const previewSequence = fakeSequence();
     p.getWebAppConfigValue = () => true;
@@ -436,7 +431,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("makes selections", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const wrapper = shallow<SequenceEditorMiddleActive>(
       <SequenceEditorMiddleActive {...fakeProps()} />);
     wrapper.instance().loadSequenceVersion = jest.fn();
@@ -449,7 +444,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("shows warning", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.sequence_version_id = 1;
     p.sequence.body.body = [{ kind: "lua", args: { lua: "" } }];
@@ -459,7 +454,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("doesn't show warning", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.sequence_version_id = 1;
     p.sequence.body.body = [{ kind: "sync", args: {} }];
@@ -469,7 +464,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("edits description", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.description = "description";
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
@@ -482,7 +477,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("handles empty description", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.description = "";
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
@@ -493,7 +488,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("generates description", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     p.sequence.body.description = "";
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
@@ -519,14 +514,14 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("shows add variable options", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
     expect(wrapper.find("Popover").length).toEqual(10);
   });
 
   it("opens add variable menu", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const wrapper = mount<SequenceEditorMiddleActive>(
       <SequenceEditorMiddleActive {...fakeProps()} />);
     expect(wrapper.state().addVariableMenuOpen).toEqual(false);
@@ -537,7 +532,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("adds new variable", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const wrapper = mount<SequenceEditorMiddleActive>(
       <SequenceEditorMiddleActive {...fakeProps()} />);
     wrapper.setState({ addVariableMenuOpen: true });
@@ -558,7 +553,7 @@ describe("<SequenceEditorMiddleActive />", () => {
   });
 
   it("adds new resource variable", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const wrapper = mount<SequenceEditorMiddleActive>(
       <SequenceEditorMiddleActive {...fakeProps()} />);
     wrapper.setState({ addVariableMenuOpen: true });
@@ -596,7 +591,7 @@ describe("<SequenceBtnGroup />", () => {
   });
 
   it("edits color", () => {
-    mockPath = Path.mock(Path.sequencePage("1"));
+    location.pathname = Path.mock(Path.sequencePage("1"));
     const p = fakeProps();
     const wrapper = mount(<SequenceBtnGroup {...p} />);
     wrapper.find(".color-picker-item-wrapper").first().simulate("click");
@@ -696,7 +691,7 @@ describe("<AddCommandButton />", () => {
   });
 
   it("dispatches new step position", () => {
-    mockPath = "";
+    location.pathname = "";
     const p = fakeProps();
     const wrapper = shallow(<AddCommandButton {...p} />);
     wrapper.find("button").simulate("click");
@@ -704,7 +699,7 @@ describe("<AddCommandButton />", () => {
       type: Actions.SET_SEQUENCE_STEP_POSITION,
       payload: 1,
     });
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("closes cluster", () => {
diff --git a/frontend/sequences/__tests__/sequence_select_box_test.tsx b/frontend/sequences/__tests__/sequence_select_box_test.tsx
index 8bb24f5f2a..dd5a6ebaac 100644
--- a/frontend/sequences/__tests__/sequence_select_box_test.tsx
+++ b/frontend/sequences/__tests__/sequence_select_box_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { SequenceSelectBox, SequenceSelectBoxProps } from "../sequence_select_box";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
diff --git a/frontend/sequences/__tests__/sequences_test.tsx b/frontend/sequences/__tests__/sequences_test.tsx
index bf29cfa449..17aecbc332 100644
--- a/frontend/sequences/__tests__/sequences_test.tsx
+++ b/frontend/sequences/__tests__/sequences_test.tsx
@@ -3,11 +3,12 @@ jest.mock("../../screen_size", () => ({
   isMobile: () => mockIsMobile,
 }));
 
-import { Path } from "../../internal_urls";
-let mockPath = "";
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
+jest.mock("axios", () => ({
+  get: () => Promise.resolve({
+    data: [
+      { id: 1, name: "name", description: "", path: "", color: "gray" },
+    ]
+  }),
 }));
 
 import React from "react";
@@ -22,13 +23,16 @@ import { Actions } from "../../constants";
 import {
   fakeHardwareFlags, fakeFarmwareData,
 } from "../../__test_support__/fake_sequence_step_data";
-import { push } from "../../history";
 import { mapStateToFolderProps } from "../../folders/map_state_to_props";
 import { fakeState } from "../../__test_support__/fake_state";
 import { sequencesPanelState } from "../../__test_support__/panel_state";
 import { emptyState } from "../../resources/reducer";
+import { Path } from "../../internal_urls";
+import { API } from "../../api";
 
 describe("<Sequences />", () => {
+  API.setBaseUrl("");
+
   const fakeProps = (): SequencesProps => ({
     dispatch: jest.fn(),
     sequence: fakeSequence(),
@@ -63,21 +67,21 @@ describe("<Sequences />", () => {
   });
 
   it("redirects to mobile interface", () => {
-    mockPath = Path.mock(Path.sequencePage());
+    location.pathname = Path.mock(Path.sequencePage());
     mockIsMobile = true;
     const p = fakeProps();
     p.sequence = undefined;
-    shallow(<Sequences {...p} />);
-    expect(push).toHaveBeenCalledWith(Path.designerSequences());
+    mount(<Sequences {...p} />);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.designerSequences());
   });
 
   it("redirects to mobile interface: sequence selected", () => {
-    mockPath = Path.mock(Path.sequencePage());
+    location.pathname = Path.mock(Path.sequencePage());
     mockIsMobile = true;
     const p = fakeProps();
     p.sequence = fakeSequence();
-    shallow(<Sequences {...p} />);
-    expect(push).toHaveBeenCalledWith(Path.designerSequences("fake"));
+    mount(<Sequences {...p} />);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.designerSequences("fake"));
   });
 });
 
@@ -95,7 +99,7 @@ describe("<SequenceBackButton />", () => {
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SET_SEQUENCE_STEP_POSITION, payload: undefined
     });
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("goes back to sequence list", () => {
@@ -106,6 +110,6 @@ describe("<SequenceBackButton />", () => {
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SELECT_SEQUENCE, payload: undefined
     });
-    expect(push).toHaveBeenCalledWith(Path.sequences());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.sequences());
   });
 });
diff --git a/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts b/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts
index de3eabd6eb..28cb7d6ba8 100644
--- a/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts
+++ b/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts
@@ -1,9 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.designerSequences("my_sequence"));
-jest.mock("../../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../actions", () => ({
   selectSequence: jest.fn(),
 }));
@@ -32,17 +26,19 @@ jest.mock("../test_button", () => ({
 import { setActiveSequenceByName } from "../set_active_sequence_by_name";
 import { selectSequence } from "../actions";
 import { selectAllSequences } from "../../resources/selectors";
+import { Path } from "../../internal_urls";
 
 describe("setActiveSequenceByName()", () => {
   it("returns early if there is nothing to compare", () => {
-    mockPath = Path.mock(Path.designerSequences());
+    location.pathname = Path.mock(Path.designerSequences());
     setActiveSequenceByName();
     expect(selectSequence).not.toHaveBeenCalled();
   });
 
   it("sometimes can't find a sequence by name", () => {
     const sequence = mockSequences[0];
-    mockPath = Path.mock(Path.designerSequences("not_" + sequence.body.name));
+    location.pathname = Path.mock(Path.designerSequences(
+      "not_" + sequence.body.name));
     setActiveSequenceByName();
     expect(selectAllSequences).toHaveBeenCalled();
     expect(selectSequence).not.toHaveBeenCalled();
@@ -51,7 +47,7 @@ describe("setActiveSequenceByName()", () => {
   it("finds a sequence by name", () => {
     const sequence = mockSequences[0];
     jest.clearAllTimers();
-    mockPath = Path.mock(Path.designerSequences(sequence.body.name));
+    location.pathname = Path.mock(Path.designerSequences(sequence.body.name));
     setActiveSequenceByName();
     expect(selectSequence).toHaveBeenCalledWith(sequence.uuid);
   });
diff --git a/frontend/sequences/__tests__/step_button_cluster_test.tsx b/frontend/sequences/__tests__/step_button_cluster_test.tsx
index 2e3b485b05..5ae0f2abc2 100644
--- a/frontend/sequences/__tests__/step_button_cluster_test.tsx
+++ b/frontend/sequences/__tests__/step_button_cluster_test.tsx
@@ -1,19 +1,11 @@
-let mockPath = "";
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 const step_buttons = require("../step_buttons");
 const mockStepClick = jest.fn();
 step_buttons.stepClick = jest.fn(() => mockStepClick);
 
-import React from "react";
+import React, { act } from "react";
 import { mount } from "enzyme";
-import { act } from "react-dom/test-utils";
 import { StepButtonCluster, StepButtonProps } from "../step_button_cluster";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
 import { fakeFarmwareData } from "../../__test_support__/fake_sequence_step_data";
 import { FarmwareName } from "../step_tiles/tile_execute_script";
@@ -71,15 +63,15 @@ describe("<StepButtonCluster />", () => {
   });
 
   it("doesn't navigate", () => {
-    mockPath = Path.mock(Path.sequencePage("1"));
+    location.pathname = Path.mock(Path.sequencePage("1"));
     const p = fakeProps();
     const wrapper = mount(<StepButtonCluster {...p} />);
     wrapper.find(".step-button").last().simulate("click");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("shows pinned sequences", () => {
-    mockPath = Path.mock(Path.sequences("1"));
+    location.pathname = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     const sequence = fakeSequence();
     sequence.body.name = "pinned";
@@ -90,7 +82,7 @@ describe("<StepButtonCluster />", () => {
   });
 
   it("filters out commands", () => {
-    mockPath = Path.mock(Path.designerSequences("1"));
+    location.pathname = Path.mock(Path.designerSequences("1"));
     const p = fakeProps();
     const sequence = fakeSequence();
     sequence.body.name = "pinned";
@@ -117,7 +109,7 @@ describe("<StepButtonCluster />", () => {
   });
 
   it("doesn't add command", () => {
-    mockPath = Path.mock(Path.designerSequences("1"));
+    location.pathname = Path.mock(Path.designerSequences("1"));
     const p = fakeProps();
     p.sequences = undefined;
     p.farmwareData = undefined;
diff --git a/frontend/sequences/__tests__/step_buttons_test.tsx b/frontend/sequences/__tests__/step_buttons_test.tsx
index 00a727c8a7..17e2a329ab 100644
--- a/frontend/sequences/__tests__/step_buttons_test.tsx
+++ b/frontend/sequences/__tests__/step_buttons_test.tsx
@@ -3,11 +3,6 @@ jest.mock("../actions", () => ({
   closeCommandMenu: jest.fn(),
 }));
 
-let mockPath = "";
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { mount } from "enzyme";
 import { StepButtonParams } from "../interfaces";
@@ -47,7 +42,7 @@ describe("<StepButton />", () => {
   });
 
   it("renders in designer", () => {
-    mockPath = Path.mock(Path.designerSequences("1"));
+    location.pathname = Path.mock(Path.designerSequences("1"));
     const wrapper = mount(<StepButton {...fakeProps()} />);
     expect(wrapper.html()).toContain("clustered");
   });
diff --git a/frontend/sequences/actions.ts b/frontend/sequences/actions.ts
index 602101d419..7378b31238 100644
--- a/frontend/sequences/actions.ts
+++ b/frontend/sequences/actions.ts
@@ -6,7 +6,6 @@ import { edit, init, overwrite } from "../api/crud";
 import {
   AxiosErrorResponse, defensiveClone, prettyPrintApiErrors, urlFriendly,
 } from "../util";
-import { push } from "../history";
 import { Actions } from "../constants";
 import { setActiveSequenceByName } from "./set_active_sequence_by_name";
 import { isNumber } from "lodash";
@@ -18,6 +17,7 @@ import { selectAllSequences } from "../resources/selectors_by_kind";
 import { ResourceIndex } from "../resources/interfaces";
 import { getDeviceAccountSettings } from "../resources/selectors";
 import { store } from "../redux/store";
+import { NavigateFunction } from "react-router";
 
 export const sequenceLengthExceeded = (sequence: TaggedSequence): boolean => {
   const device = getDeviceAccountSettings(store.getState().resources.index);
@@ -63,7 +63,10 @@ export const sequenceLimitExceeded = (ri: ResourceIndex): boolean => {
 
 let count = 1;
 
-export const copySequence = (payload: TaggedSequence) =>
+export const copySequence = (
+  navigate: NavigateFunction,
+  payload: TaggedSequence,
+) =>
   (dispatch: Function, getState: GetState) => {
     const ri = getState().resources.index;
     if (sequenceLimitExceeded(ri)) {
@@ -73,7 +76,7 @@ export const copySequence = (payload: TaggedSequence) =>
     copy.body.id = undefined;
     copy.body.name = copy.body.name + t(" copy ") + (count++);
     dispatch(init(copy.kind, copy.body));
-    push(Path.sequences(urlFriendly(copy.body.name)));
+    navigate(Path.sequences(urlFriendly(copy.body.name)));
     setActiveSequenceByName();
   };
 
@@ -90,8 +93,8 @@ export function selectSequence(uuid: string): SelectSequence {
   };
 }
 
-export const unselectSequence = () => {
-  push(Path.sequences());
+export const unselectSequence = (navigate: NavigateFunction) => {
+  navigate(Path.sequences());
   return { type: Actions.SELECT_SEQUENCE, payload: undefined };
 };
 
diff --git a/frontend/sequences/all_steps.tsx b/frontend/sequences/all_steps.tsx
index 74e111b3a4..180874fd61 100644
--- a/frontend/sequences/all_steps.tsx
+++ b/frontend/sequences/all_steps.tsx
@@ -85,6 +85,6 @@ export class AllSteps extends React.Component<AllStepsProps, {}> {
         </div>;
       });
 
-    return <div className="all-steps">{items}</div>;
+    return <div className="grid">{items}</div>;
   }
 }
diff --git a/frontend/sequences/inputs/input_unknown.tsx b/frontend/sequences/inputs/input_unknown.tsx
index af4da5fece..31c9a39a32 100644
--- a/frontend/sequences/inputs/input_unknown.tsx
+++ b/frontend/sequences/inputs/input_unknown.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { StepInputProps } from "../interfaces";
 
 export function InputUnknown({ field }: StepInputProps) {
diff --git a/frontend/sequences/locals_list/__tests__/variable_form_test.tsx b/frontend/sequences/locals_list/__tests__/variable_form_test.tsx
index a074029288..8728b21760 100644
--- a/frontend/sequences/locals_list/__tests__/variable_form_test.tsx
+++ b/frontend/sequences/locals_list/__tests__/variable_form_test.tsx
@@ -168,8 +168,9 @@ describe("<VariableForm />", () => {
     p.hideWrapper = false;
     const wrapper = mount(<VariableForm {...p} />);
     const boxes = wrapper.find(".custom-coordinate-form");
-    expect(boxes.find(".col-xs-5").length).toEqual(1);
-    expect(boxes.find(".col-xs-6").length).toEqual(0);
+    expect(boxes.find(".x").length).toEqual(1);
+    expect(boxes.find(".y").length).toEqual(1);
+    expect(boxes.find(".z").length).toEqual(1);
   });
 
   it("renders default value warning", () => {
@@ -208,36 +209,6 @@ describe("<VariableForm />", () => {
     expect(wrapper.html()).toContain("string-input");
   });
 
-  it("renders narrow number variable input", () => {
-    const p = fakeProps();
-    p.variableType = VariableType.Number;
-    p.variable.celeryNode = {
-      kind: "variable_declaration",
-      args: {
-        label: "label", data_value: { kind: "numeric", args: { number: 0 } }
-      }
-    };
-    p.locationDropdownKey = "";
-    p.removeVariable = jest.fn();
-    const wrapper = shallow(<VariableForm {...p} />);
-    expect(wrapper.html()).toContain("col-xs-5");
-  });
-
-  it("renders narrow text variable input", () => {
-    const p = fakeProps();
-    p.variableType = VariableType.Text;
-    p.variable.celeryNode = {
-      kind: "variable_declaration",
-      args: {
-        label: "label", data_value: { kind: "text", args: { string: "" } }
-      }
-    };
-    p.locationDropdownKey = "";
-    p.removeVariable = jest.fn();
-    const wrapper = shallow(<VariableForm {...p} />);
-    expect(wrapper.html()).toContain("col-xs-5");
-  });
-
   it("doesn't change label", () => {
     const p = fakeProps();
     p.inUse = true;
diff --git a/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx b/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx
index f8fe8391bf..9bad585070 100644
--- a/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx
+++ b/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, BlurableInput } from "../../ui";
+import { Row, BlurableInput } from "../../ui";
 import { OnChange, VariableNode } from "../locals_list/locals_list_support";
 import { defensiveClone } from "../../util/util";
 import { Xyz, Vector3 } from "farmbot";
@@ -40,14 +40,13 @@ export const CoordinateInputBoxes = (props: CoordinateInputBoxesProps) => {
   const editableVariable = defensiveClone(variableNode);
   return (vector && visible)
     ? <Row className={"custom-coordinate-form"}>
-      {!props.hideWrapper && <Col xs={props.narrowLabel ? 5 : 6} />}
       {["x", "y", "z"].map((axis: Xyz) =>
-        <Col xs={props.hideWrapper ? 3 : 2} className={`${axis} no-pad`} key={axis}>
+        <div className={`${axis} no-pad`} key={axis}>
           <BlurableInput type="number"
             onCommit={manuallyEditAxis({ axis, onChange, editableVariable })}
             name={`location-${axis}`}
             value={"" + vector[axis]} />
-        </Col>)}
+        </div>)}
     </Row>
     : <div className={"no-location-coordinate-input-boxes"} />;
 };
diff --git a/frontend/sequences/locals_list/variable_form.tsx b/frontend/sequences/locals_list/variable_form.tsx
index 728581c3b4..f7abab5f91 100644
--- a/frontend/sequences/locals_list/variable_form.tsx
+++ b/frontend/sequences/locals_list/variable_form.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, FBSelect, Color, BlurableInput, Help } from "../../ui";
+import { Row, FBSelect, Color, BlurableInput, Help } from "../../ui";
 import {
   variableFormList, NO_VALUE_SELECTED_DDI, sortVariables, heading, sequences2Ddi,
   LOCATION_PLACEHOLDER_DDI,
@@ -128,46 +128,40 @@ export const VariableForm =
     const narrowLabel = !!removeVariable;
     return <div className={"location-form"}>
       <div className={"location-form-content"}>
-        <Row>
-          {!props.hideWrapper &&
-            <Col xs={1}>
-              {!isDefaultValueForm &&
-                <VariableIcon variableType={variableType} />}
-            </Col>}
-          {!props.hideWrapper &&
-            <Col xs={narrowLabel ? 4 : 5}>
-              {isDefaultValueForm
-                ? <p>{t("Default value")}</p>
-                : <Label label={label} inUse={props.inUse || !removeVariable}
-                  allowedVariableNodes={allowedVariableNodes}
-                  labelOnly={props.labelOnly}
-                  variable={variable} onChange={onChange} />}
-              {isDefaultValueForm &&
-                <Help text={ToolTips.DEFAULT_VALUE} position={Position.TOP_LEFT} />}
-              {isDefaultValueForm && isDefault &&
-                <Help text={ToolTips.USING_DEFAULT_VARIABLE_VALUE}
-                  customIcon={"fa-exclamation-triangle"} onHover={true} />}
-            </Col>}
+        <Row className={isDefaultValueForm ? "grid-exp-2" : "grid-exp-3"}>
+          {!props.hideWrapper && !isDefaultValueForm &&
+            <VariableIcon variableType={variableType} />}
+          <div>
+            {!props.hideWrapper && isDefaultValueForm
+              ? <p>{t("Default value")}</p>
+              : <Label label={label} inUse={props.inUse || !removeVariable}
+                allowedVariableNodes={allowedVariableNodes}
+                labelOnly={props.labelOnly}
+                variable={variable} onChange={onChange} />}
+            {isDefaultValueForm &&
+              <Help text={ToolTips.DEFAULT_VALUE} position={Position.TOP_LEFT} />}
+            {isDefaultValueForm && isDefault &&
+              <Help text={ToolTips.USING_DEFAULT_VARIABLE_VALUE}
+                customIcon={"fa-exclamation-triangle"} onHover={true} />}
+          </div>
           {([VariableType.Location, VariableType.Resource]
             .includes(variableType)
             || !isDefaultValueForm) &&
-            <Col xs={props.hideWrapper ? 12 : 6}>
-              <FBSelect
-                key={props.locationDropdownKey}
-                list={list}
-                selectedItem={dropdown}
-                customNullLabel={isDefaultValueForm
-                  ? LOCATION_PLACEHOLDER_DDI().label
-                  : NO_VALUE_SELECTED_DDI().label}
-                onChange={ddi => {
-                  onChange(convertDDItoVariable({
-                    identifierLabel: label,
-                    allowedVariableNodes,
-                    dropdown: ddi,
-                    variableType,
-                  }), label);
-                }} />
-            </Col>}
+            <FBSelect
+              key={props.locationDropdownKey}
+              list={list}
+              selectedItem={dropdown}
+              customNullLabel={isDefaultValueForm
+                ? LOCATION_PLACEHOLDER_DDI().label
+                : NO_VALUE_SELECTED_DDI().label}
+              onChange={ddi => {
+                onChange(convertDDItoVariable({
+                  identifierLabel: label,
+                  allowedVariableNodes,
+                  dropdown: ddi,
+                  variableType,
+                }), label);
+              }} />}
           {variableType == VariableType.Number && isDefaultValueForm &&
             <NumericInput label={label} variableNode={variable.celeryNode}
               onChange={onChange} isDefaultValueForm={isDefaultValueForm} />}
@@ -175,25 +169,25 @@ export const VariableForm =
             <TextInput label={label} variableNode={variable.celeryNode}
               onChange={onChange} isDefaultValueForm={isDefaultValueForm} />}
           {removeVariable && !isDefaultValueForm &&
-            <Col xs={1} className={"trash"}>
-              <i className={"fa fa-trash fb-icon-button"}
+            <div className={"trash"}>
+              <i className={"fa fa-trash fb-icon-button invert"}
                 style={props.inUse ? { color: Color.gray } : {}}
                 onClick={() => removeVariable(label)} />
-            </Col>}
+            </div>}
         </Row>
         {!isDefaultValueForm && variableType == VariableType.Number &&
           celeryNode.kind != "parameter_declaration" &&
           !usingDefaultValue && celeryNode.args.data_value.kind != "identifier" &&
-          <Row>
-            <Col xs={narrowLabel ? 5 : 6} />
+          <Row className="grid-2-col">
+            <div></div>
             <NumericInput label={label} variableNode={celeryNode}
               onChange={onChange} isDefaultValueForm={isDefaultValueForm} />
           </Row>}
         {!isDefaultValueForm && variableType == VariableType.Text &&
           celeryNode.kind != "parameter_declaration" &&
           !usingDefaultValue && celeryNode.args.data_value.kind != "identifier" &&
-          <Row>
-            <Col xs={narrowLabel ? 5 : 6} />
+          <Row className="grid-2-col">
+            <div></div>
             <TextInput label={label} variableNode={celeryNode}
               onChange={onChange} isDefaultValueForm={isDefaultValueForm} />
           </Row>}
@@ -229,7 +223,7 @@ export const NumericInput = (props: NumericInputProps) => {
   const argsValue = variableNode.kind == "parameter_declaration"
     ? (variableNode.args.default_value as Numeric).args.number
     : (variableNode.args.data_value as Numeric).args.number;
-  return <Col xs={6} className={"numeric-variable-input"}>
+  return <div className={"numeric-variable-input"}>
     <BlurableInput type={isPlaceholder ? "text" : "number"}
       className={"number-input"}
       clearBtn={props.isDefaultValueForm}
@@ -268,7 +262,7 @@ export const NumericInput = (props: NumericInputProps) => {
         props.onChange(editableVariable, props.label);
       }}
       value={isPlaceholder ? t("None") : argsValue} />
-  </Col>;
+  </div>;
 };
 
 export interface TextInputProps {
@@ -285,7 +279,7 @@ export const TextInput = (props: TextInputProps) => {
   const argsValue = variableNode.kind == "parameter_declaration"
     ? (variableNode.args.default_value as Text).args.string
     : (variableNode.args.data_value as Text).args.string;
-  return <Col xs={6} className={"text-variable-input"}>
+  return <div className={"text-variable-input"}>
     <BlurableInput type={"text"}
       className={"string-input"}
       clearBtn={props.isDefaultValueForm}
@@ -324,7 +318,7 @@ export const TextInput = (props: TextInputProps) => {
         props.onChange(editableVariable, props.label);
       }}
       value={isPlaceholder ? t("None") : argsValue} />
-  </Col>;
+  </div>;
 };
 
 export interface LabelProps {
diff --git a/frontend/sequences/panel/__tests__/editor_test.tsx b/frontend/sequences/panel/__tests__/editor_test.tsx
index da0bc27b2b..e44034dfbc 100644
--- a/frontend/sequences/panel/__tests__/editor_test.tsx
+++ b/frontend/sequences/panel/__tests__/editor_test.tsx
@@ -44,7 +44,6 @@ import { fakeState } from "../../../__test_support__/fake_state";
 import {
   setActiveSequenceByName,
 } from "../../set_active_sequence_by_name";
-import { push } from "../../../history";
 import { Path } from "../../../internal_urls";
 import { sequencesPanelState } from "../../../__test_support__/panel_state";
 import { Color } from "farmbot";
@@ -54,6 +53,7 @@ import { API } from "../../../api";
 import { error } from "../../../toast/toast";
 import { addNewSequenceToFolder } from "../../../folders/actions";
 import { emptyState } from "../../../resources/reducer";
+import { mountWithContext } from "../../../__test_support__/mount_with_context";
 
 describe("<DesignerSequenceEditor />", () => {
   API.setBaseUrl("");
@@ -136,9 +136,9 @@ describe("<DesignerSequenceEditor />", () => {
   it("navigates to full page editor", () => {
     mockIsMobile = false;
     const p = fakeProps();
-    const wrapper = mount(<DesignerSequenceEditor {...p} />);
+    const wrapper = mountWithContext(<DesignerSequenceEditor {...p} />);
     wrapper.find(".fa-expand").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.sequencePage("fake"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.sequencePage("fake"));
   });
 });
 
diff --git a/frontend/sequences/panel/__tests__/list_test.tsx b/frontend/sequences/panel/__tests__/list_test.tsx
index 11a7907830..0fef3620bf 100644
--- a/frontend/sequences/panel/__tests__/list_test.tsx
+++ b/frontend/sequences/panel/__tests__/list_test.tsx
@@ -30,13 +30,6 @@ jest.mock("../../../folders/actions", () => ({
   updateSearchTerm: jest.fn(),
 }));
 
-import { Path } from "../../../internal_urls";
-let mockPath = "";
-jest.mock("../../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { mount, shallow } from "enzyme";
 import {
@@ -61,7 +54,8 @@ import { installSequence } from "../../actions";
 import { sequencesPanelState } from "../../../__test_support__/panel_state";
 import { Actions } from "../../../constants";
 import { emptyState } from "../../../resources/reducer";
-import { push } from "../../../history";
+import { Path } from "../../../internal_urls";
+import { mountWithContext } from "../../../__test_support__/mount_with_context";
 
 API.setBaseUrl("");
 
@@ -145,16 +139,16 @@ describe("<DesignerSequenceList />", () => {
   });
 
   it("navigates to sequence page", () => {
-    mockPath = Path.mock(Path.designerSequences());
-    const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
+    location.pathname = Path.mock(Path.designerSequences());
+    const wrapper = mountWithContext(<DesignerSequenceList {...fakeProps()} />);
     clickButton(wrapper, 0, "fullscreen");
-    expect(push).toHaveBeenCalledWith(Path.sequencePage());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.sequencePage());
   });
 
   it("navigates to designer sequence page", () => {
-    mockPath = Path.mock(Path.sequencePage());
-    const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
+    location.pathname = Path.mock(Path.sequencePage());
+    const wrapper = mountWithContext(<DesignerSequenceList {...fakeProps()} />);
     clickButton(wrapper, 0, "collapse");
-    expect(push).toHaveBeenCalledWith(Path.designerSequences());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.designerSequences());
   });
 });
diff --git a/frontend/sequences/panel/__tests__/preview_test.tsx b/frontend/sequences/panel/__tests__/preview_test.tsx
index d5eb45088a..2f621293b8 100644
--- a/frontend/sequences/panel/__tests__/preview_test.tsx
+++ b/frontend/sequences/panel/__tests__/preview_test.tsx
@@ -21,7 +21,6 @@ import {
   buildResourceIndex,
 } from "../../../__test_support__/resource_index_builder";
 import { API } from "../../../api";
-import { push } from "../../../history";
 import { installSequence } from "../../actions";
 import { Path } from "../../../internal_urls";
 import { emptyState } from "../../../resources/reducer";
@@ -53,7 +52,7 @@ describe("<DesignerSequencePreview />", () => {
     expect(importBtn.text()).toEqual("import");
     await importBtn.simulate("click");
     expect(installSequence).toHaveBeenCalledWith(sequence.body.id);
-    expect(push).toHaveBeenCalledWith(Path.designerSequences());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.designerSequences());
   });
 
   it("loads sequence", async () => {
diff --git a/frontend/sequences/panel/editor.tsx b/frontend/sequences/panel/editor.tsx
index 1350350a63..ca5dcdafb2 100644
--- a/frontend/sequences/panel/editor.tsx
+++ b/frontend/sequences/panel/editor.tsx
@@ -18,7 +18,6 @@ import { isTaggedSequence } from "../../resources/tagged_resources";
 import {
   setActiveSequenceByName,
 } from "../set_active_sequence_by_name";
-import { push } from "../../history";
 import { colors, urlFriendly } from "../../util";
 import { edit, save } from "../../api/crud";
 import {
@@ -33,6 +32,7 @@ import { noop } from "lodash";
 import { addNewSequenceToFolder } from "../../folders/actions";
 import { Position } from "@blueprintjs/core";
 import { isMobile } from "../../screen_size";
+import { NavigationContext } from "../../routes_helpers";
 
 interface SequencesState {
   processingTitle: boolean;
@@ -54,6 +54,10 @@ export class RawDesignerSequenceEditor
     return this.state.processingColor || this.state.processingTitle;
   }
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   render() {
     const panelName = "designer-sequence-editor";
     const { sequence } = this.props;
@@ -89,12 +93,13 @@ export class RawDesignerSequenceEditor
           {sequence && !isMobile() &&
             <i className={"fa fa-expand fb-icon-button"}
               title={t("open full-page editor")}
-              onClick={() =>
-                push(Path.sequencePage(urlFriendly(sequence.body.name)))} />}
+              onClick={() => {
+                this.navigate(Path.sequencePage(urlFriendly(sequence.body.name)));
+              }} />}
           {!sequence && <button
             className={"fb-button green"}
             title={t("add new sequence")}
-            onClick={() => addNewSequenceToFolder()}>
+            onClick={() => addNewSequenceToFolder(this.navigate)}>
             <i className="fa fa-plus" />
           </button>}
         </div>
@@ -152,7 +157,7 @@ export const ResourceTitle = (props: ResourceTitleProps) => {
       onChange={e => {
         setNameValue(e.currentTarget.value);
       }} />
-    : <span className={"title white-text"}
+    : <span className={"title"}
       style={props.readOnly ? { pointerEvents: "none" } : {}}
       title={t("click to edit")}
       onClick={() => setIsEditing(true)}>
@@ -220,3 +225,5 @@ export const AutoGenerateButton = (props: AutoGenerateButtonProps) => {
 
 export const DesignerSequenceEditor =
   connect(mapStateToProps)(RawDesignerSequenceEditor);
+// eslint-disable-next-line import/no-default-export
+export default DesignerSequenceEditor;
diff --git a/frontend/sequences/panel/list.tsx b/frontend/sequences/panel/list.tsx
index 3727503b46..ed58faf5cd 100644
--- a/frontend/sequences/panel/list.tsx
+++ b/frontend/sequences/panel/list.tsx
@@ -4,13 +4,12 @@ import { t } from "../../i18next_wrapper";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../../farm_designer/panel_header";
+import { Panel } from "../../farm_designer/panel_header";
 import { Folders } from "../../folders/component";
 import { mapStateToProps } from "../state_to_props";
 import { SequencesProps } from "../interfaces";
 import { publishAction, SectionHeader } from "../sequence_editor_middle_active";
 import { Collapse } from "@blueprintjs/core";
-import { FeaturedSequence } from "../../featured/content";
 import axios from "axios";
 import { API } from "../../api";
 import { ColorPicker, Markdown, Popover } from "../../ui";
@@ -23,8 +22,18 @@ import {
 } from "../../folders/actions";
 import { SequencesPanelState } from "../../interfaces";
 import { Actions } from "../../constants";
-import { push } from "../../history";
 import { isMobile } from "../../screen_size";
+import { NavigationContext } from "../../routes_helpers";
+import { useNavigate } from "react-router";
+import { Color } from "farmbot";
+
+interface FeaturedSequence {
+  id: number;
+  path: string;
+  name: string;
+  description: string;
+  color: Color;
+}
 
 interface DesignerSequenceListState {
   featuredList: FeaturedSequence[];
@@ -54,32 +63,35 @@ export class RawDesignerSequenceList
     this.setState({ toggleDirection: !this.state.toggleDirection });
   };
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   render() {
     const panelName = "designer-sequence-list";
     const panelState = this.props.sequencesPanelState;
     const buttonProps = Path.inDesigner()
       ? {
-        caretDirection: "right",
+        icon: "expand",
         path: Path.sequencePage(),
         text: t("fullscreen"),
       }
       : {
-        caretDirection: "left",
+        icon: "compress",
         path: Path.designerSequences(),
         text: t("collapse"),
       };
     return <DesignerPanel panelName={panelName} panel={Panel.Sequences}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Sequences} withButton={true}>
         <SearchField nameKey={"sequences"}
           searchTerm={this.props.folderData.searchTerm || ""}
           placeholder={t("Search sequences...")}
           onChange={updateSearchTerm} />
         {!isMobile() &&
-          <button className={"transparent-button fullscreen"}
-            onClick={() => push(buttonProps.path)}>
+          <button className={"fb-button clear row half-gap"}
+            onClick={() => { this.navigate(buttonProps.path); }}>
             {buttonProps.text}
-            <i className={`fa fa-caret-square-o-${buttonProps.caretDirection}`} />
+            <i className={`fa fa-${buttonProps.icon}`} />
           </button>}
       </DesignerPanelTop>
       <DesignerPanelContent panelName={panelName}>
@@ -113,20 +125,23 @@ export class RawDesignerSequenceList
 
 export const DesignerSequenceList =
   connect(mapStateToProps)(RawDesignerSequenceList);
+// eslint-disable-next-line import/no-default-export
+export default DesignerSequenceList;
 
 interface SequenceListActionsProps {
   toggleAllFolders(): void;
   toggleDirection: boolean;
 }
 
-const SequenceListActions = (props: SequenceListActionsProps) =>
-  <div className={"folder-icon-wrapper"}>
+const SequenceListActions = (props: SequenceListActionsProps) => {
+  const navigate = useNavigate();
+  return <div className={"row"}>
     <button
       className={"fb-button green"}
       title={t("add new sequence")}
       onClick={e => {
         e.stopPropagation();
-        addNewSequenceToFolder();
+        addNewSequenceToFolder(navigate);
       }}>
       <i className={"fa fa-plus"} />
     </button>
@@ -150,6 +165,7 @@ const SequenceListActions = (props: SequenceListActionsProps) =>
         : "down"}`} />
     </button>
   </div>;
+};
 
 interface FeaturedSequenceListItemProps {
   item: FeaturedSequence;
diff --git a/frontend/sequences/panel/preview.tsx b/frontend/sequences/panel/preview.tsx
index eb172a0571..0081c43100 100644
--- a/frontend/sequences/panel/preview.tsx
+++ b/frontend/sequences/panel/preview.tsx
@@ -76,3 +76,5 @@ export class RawDesignerSequencePreview
 
 export const DesignerSequencePreview =
   connect(mapStateToProps)(RawDesignerSequencePreview);
+// eslint-disable-next-line import/no-default-export
+export default DesignerSequencePreview;
diff --git a/frontend/sequences/panel/preview_support.tsx b/frontend/sequences/panel/preview_support.tsx
index 4d61768c91..8b64876bbf 100644
--- a/frontend/sequences/panel/preview_support.tsx
+++ b/frontend/sequences/panel/preview_support.tsx
@@ -6,7 +6,7 @@ import { Everything } from "../../interfaces";
 import { SpecialStatus, TaggedSequence } from "farmbot";
 import axios from "axios";
 import { API } from "../../api";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { noop } from "lodash";
 import { ErrorBoundary } from "../../error_boundary";
 import { AllSteps } from "../all_steps";
@@ -119,7 +119,9 @@ export const SequencePreviewContent = (props: SequencePreviewContentProps) => {
               resources={props.resources}
               toggle={props.toggleSection("variablesCollapsed")} />}
           {viewSequenceCeleryScript &&
-            <pre>{stringifySequenceData(sequence.body)}</pre>}
+            <pre className="celeryscript">
+              {stringifySequenceData(sequence.body)}
+            </pre>}
           {!viewSequenceCeleryScript &&
             <Steps
               collapsed={props.stepsCollapsed}
@@ -133,7 +135,6 @@ export const SequencePreviewContent = (props: SequencePreviewContentProps) => {
             sequence={sequence}
             dispatch={noop}
             toggle={props.toggleSection("licenseCollapsed")} />
-          <div className={"padding"} />
         </div>
       </div>}
   </EmptyStateWrapper>;
@@ -147,6 +148,7 @@ export const ImportBanner = (props: ImportBannerProps) => {
   const [importing, setImporting] = React.useState(false);
   const { sequence } = props;
   const includesLua = sequence?.body.body?.map(x => x.kind).includes("lua");
+  const navigate = useNavigate();
   return <div className={"import-banner"}>
     <label>{t("viewing a publicly shared sequence")}</label>
     <Help text={Content.IMPORT_SEQUENCE} />
@@ -154,7 +156,7 @@ export const ImportBanner = (props: ImportBannerProps) => {
       <button className={"transparent-button"}
         onClick={() => {
           installSequence(sequence.body.id)()
-            .then(() => push(Path.designerSequences()));
+            .then(() => { navigate(Path.designerSequences()); });
           publishAction(setImporting);
         }}>
         {importing ? t("importing") : t("import")}
diff --git a/frontend/sequences/sequence_editor_middle_active.tsx b/frontend/sequences/sequence_editor_middle_active.tsx
index c8bcfb0ddd..77e87663d6 100644
--- a/frontend/sequences/sequence_editor_middle_active.tsx
+++ b/frontend/sequences/sequence_editor_middle_active.tsx
@@ -12,9 +12,9 @@ import {
   unpublishSequence,
 } from "./actions";
 import { splice, move, stringifySequenceData } from "./step_tiles";
-import { push } from "../history";
+import { NavigateFunction, useNavigate } from "react-router";
 import {
-  BlurableInput, Row, Col, SaveBtn, Help, ToggleButton, Popover,
+  BlurableInput, Row, SaveBtn, Help, ToggleButton, Popover,
   Markdown,
   FBSelect,
   DropDownItem,
@@ -87,7 +87,7 @@ export const SequenceSetting = (props: SequenceSettingProps) => {
   const value = (props.defaultOn && isUndefined(raw_value)) ? true : !!raw_value;
   const proceed = () =>
     (props.confirmation && !value) ? confirm(t(props.confirmation)) : true;
-  return <fieldset>
+  return <fieldset className="row half-gap grid-exp-2">
     <label>
       {t(props.label)}
     </label>
@@ -104,7 +104,7 @@ export const SequenceSettingsMenu =
   (props: SequenceSettingsMenuProps) => {
     const { dispatch, getWebAppConfigValue } = props;
     const commonProps = { dispatch, getWebAppConfigValue };
-    return <div className="sequence-settings-menu">
+    return <div className="grid">
       <SequenceSetting {...commonProps}
         setting={BooleanSetting.confirm_step_deletion}
         label={DeviceSetting.confirmStepDeletion}
@@ -236,15 +236,11 @@ export const SequenceShareMenu = (props: SequenceShareMenuProps) => {
         <i className={`fa ${publishing ? "fa-spinner fa-pulse" : "fa-plus"}`} />
       </button>
       {sequenceVersionList(ids).map(version =>
-        <Row key={version.label}>
-          <Col xs={6}>
-            <p>{version.label}</p>
-          </Col>
-          <Col xs={6}>
-            <Link to={Path.sequenceVersion(version.value)}>
-              <i className={"fa fa-link"} />
-            </Link>
-          </Col>
+        <Row key={version.label} className="grid-2-col">
+          <p>{version.label}</p>
+          <Link to={Path.sequenceVersion(version.value)}>
+            <i className={"fa fa-link"} />
+          </Link>
         </Row>)}
     </div>
     <button className={"fb-button white"}
@@ -272,88 +268,93 @@ export const SequenceBtnGroup = ({
   const [processingTitle, setProcessingTitle] = React.useState(false);
   const [processingColor, setProcessingColor] = React.useState(false);
   const isProcessing = processingColor || processingTitle;
-  return <div className="button-group">
-    <SaveBtn status={sequence.specialStatus}
-      onClick={() => dispatch(save(sequence.uuid)).then(() =>
-        push(Path.sequences(urlFriendly(sequence.body.name))))} />
-    <TestButton component={"editor"}
-      key={JSON.stringify(sequence)}
-      syncStatus={syncStatus}
-      sequence={sequence}
-      resources={resources}
-      menuOpen={sequencesState.menuOpen}
-      dispatch={dispatch} />
-    <div className={"settings-menu-button"}>
+  const navigate = useNavigate();
+  return <div className="button-group row">
+    <div className={"row no-gap"}>
       <Popover position={Position.BOTTOM_RIGHT}
-        target={<i className={"fa fa-gear fb-icon-button"}
+        target={<i className={"fa fa-gear fb-icon-button invert"}
           title={t("settings")} />}
         content={<SequenceSettingsMenu
           dispatch={dispatch}
           getWebAppConfigValue={getWebAppConfigValue} />} />
-    </div>
-    {getWebAppConfigValue(BooleanSetting.view_celery_script) &&
-      <i title={t("toggle celery script view")}
-        className={[
-          "fa fa-code fb-icon-button",
-          viewCeleryScript ? "" : "inactive",
-        ].join(" ")}
-        onClick={toggleViewSequenceCeleryScript} />}
-    <i title={sequence.body.pinned ? t("unpin sequence") : t("pin sequence")}
-      className={[
-        "fa",
-        "fa-thumb-tack",
-        "fb-icon-button",
-        sequence.body.pinned ? "" : "inactive",
-      ].join(" ")}
-      onClick={() => dispatch(pinSequenceToggle(sequence))} />
-    {Path.inDesigner() &&
-      <i
+      {getWebAppConfigValue(BooleanSetting.view_celery_script) &&
+        <i title={t("toggle celery script view")}
+          className={[
+            "fa fa-code fb-icon-button invert",
+            viewCeleryScript ? "" : "inactive",
+          ].join(" ")}
+          onClick={toggleViewSequenceCeleryScript} />}
+      <i title={sequence.body.pinned ? t("unpin sequence") : t("pin sequence")}
         className={[
           "fa",
-          visualized ? "fa-eye" : "fa-eye-slash inactive",
-          "fb-icon-button",
+          "fa-thumb-tack",
+          "fb-icon-button invert",
+          sequence.body.pinned ? "" : "inactive",
         ].join(" ")}
-        title={visualized ? t("unvisualize") : t("visualize")}
-        onClick={() =>
-          dispatch(visualizeInMap(visualized ? undefined : sequence.uuid))} />}
-    <i className={"fa fa-copy fb-icon-button"}
-      title={t("copy sequence")}
-      onClick={() => dispatch(copySequence(sequence))} />
-    <i className={"fa fa-trash fb-icon-button"}
-      title={t("delete sequence")}
-      onClick={deleteSequence({
-        sequenceUuid: sequence.uuid,
-        getWebAppConfigValue,
-        dispatch,
-      })} />
-    <div className={"publish-button"}>
-      <Popover position={Position.BOTTOM_RIGHT}
-        target={<i className={"fa fa-share fb-icon-button"}
-          title={t("share sequence")} />}
-        content={isSequencePublished(sequence)
-          ? <SequenceShareMenu sequence={sequence} />
-          : <SequencePublishMenu sequence={sequence} />} />
+        onClick={() => dispatch(pinSequenceToggle(sequence))} />
+      {Path.inDesigner() &&
+        <i
+          className={[
+            "fa",
+            visualized ? "fa-eye" : "fa-eye-slash inactive",
+            "fb-icon-button invert",
+          ].join(" ")}
+          title={visualized ? t("unvisualize") : t("visualize")}
+          onClick={() =>
+            dispatch(visualizeInMap(visualized ? undefined : sequence.uuid))} />}
+      <i className={"fa fa-copy fb-icon-button invert"}
+        title={t("copy sequence")}
+        onClick={() => dispatch(copySequence(navigate, sequence))} />
+      <i className={"fa fa-trash fb-icon-button invert"}
+        title={t("delete sequence")}
+        onClick={deleteSequence({
+          navigate,
+          sequenceUuid: sequence.uuid,
+          getWebAppConfigValue,
+          dispatch,
+        })} />
+      <div className={"publish-button"}>
+        <Popover position={Position.BOTTOM_RIGHT}
+          target={<i className={"fa fa-share fb-icon-button invert"}
+            title={t("share sequence")} />}
+          content={isSequencePublished(sequence)
+            ? <SequenceShareMenu sequence={sequence} />
+            : <SequencePublishMenu sequence={sequence} />} />
+      </div>
+      {!Path.inDesigner() &&
+        <Popover className={"color-picker"}
+          position={Position.BOTTOM}
+          popoverClassName={"colorpicker-menu gray"}
+          target={<i title={t("select color")}
+            className={"fa fa-paint-brush fb-icon-button invert"} />}
+          content={<ColorPickerCluster
+            onChange={color =>
+              editCurrentSequence(dispatch, sequence, { color })}
+            current={sequence.body.color} />} />}
+      {!Path.inDesigner() && <AutoGenerateButton
+        dispatch={dispatch}
+        sequence={sequence}
+        isProcessing={isProcessing}
+        setTitleProcessing={setProcessingTitle}
+        setColorProcessing={setProcessingColor} />}
+    </div>
+    <div className="row">
+      <TestButton component={"editor"}
+        key={JSON.stringify(sequence)}
+        syncStatus={syncStatus}
+        sequence={sequence}
+        resources={resources}
+        menuOpen={sequencesState.menuOpen}
+        dispatch={dispatch} />
+      <SaveBtn status={sequence.specialStatus}
+        onClick={() => dispatch(save(sequence.uuid)).then(() =>
+          navigate(Path.sequences(urlFriendly(sequence.body.name))))} />
     </div>
-    {!Path.inDesigner() &&
-      <Popover className={"color-picker"}
-        position={Position.BOTTOM}
-        popoverClassName={"colorpicker-menu gray"}
-        target={<i title={t("select color")}
-          className={"fa fa-paint-brush fb-icon-button"} />}
-        content={<ColorPickerCluster
-          onChange={color =>
-            editCurrentSequence(dispatch, sequence, { color })}
-          current={sequence.body.color} />} />}
-    {!Path.inDesigner() && <AutoGenerateButton
-      dispatch={dispatch}
-      sequence={sequence}
-      isProcessing={isProcessing}
-      setTitleProcessing={setProcessingTitle}
-      setColorProcessing={setProcessingColor} />}
   </div>;
 };
 
 interface DeleteSequenceProps {
+  navigate: NavigateFunction;
   getWebAppConfigValue: GetWebAppConfigValue;
   dispatch: Function;
   sequenceUuid: UUID;
@@ -364,7 +365,7 @@ export const deleteSequence = (props: DeleteSequenceProps) => () => {
     BooleanSetting.confirm_sequence_deletion);
   const force = !(confirm ?? true);
   props.dispatch(destroy(props.sequenceUuid, force))
-    .then(() => push(Path.sequences()));
+    .then(() => props.navigate(Path.sequences()));
 };
 
 export const isSequencePublished = (sequence: TaggedSequence) =>
@@ -383,22 +384,19 @@ interface SequenceNameProps {
 export const SequenceName =
   ({ dispatch, sequence }: SequenceNameProps) =>
     <Row>
-      <Col xs={12}>
-        <BlurableInput className={"sequence-name"}
-          value={sequence.body.name}
-          placeholder={t("Sequence Name")}
-          onCommit={e =>
-            dispatch(edit(sequence, { name: e.currentTarget.value }))} />
-      </Col>
+      <BlurableInput className={"sequence-name"}
+        value={sequence.body.name}
+        placeholder={t("Sequence Name")}
+        onCommit={e =>
+          dispatch(edit(sequence, { name: e.currentTarget.value }))} />
     </Row>;
 
 export const SequenceHeader = (props: SequenceHeaderProps) => {
   const { sequence, dispatch } = props;
   const sequenceAndDispatch = { sequence, dispatch };
-  const color = Path.inDesigner() ? "" : sequence.body.color;
   const page = Path.inDesigner() ? "" : "page";
   return <div id="sequence-editor-tools"
-    className={`sequence-editor-tools ${color} ${page}`}>
+    className={`sequence-editor-tools row grid-exp-1 ${page}`}>
     {props.showName &&
       <ResourceTitle
         key={sequence.body.name}
@@ -542,7 +540,6 @@ export class SequenceEditorMiddleActive extends
           toggleViewSequenceCeleryScript={
             this.toggleSection("viewSequenceCeleryScript")}
           showName={this.props.showName} />}
-      {Path.inDesigner() && <hr />}
       {view == "local"
         ? <div className={"sequence-editor-sections"}>
           <Description
@@ -557,12 +554,12 @@ export class SequenceEditorMiddleActive extends
               buttonElement={<Popover position={Position.TOP} usePortal={false}
                 isOpen={this.state.addVariableMenuOpen}
                 target={<button
-                  className={"fb-button gray add-variable-btn"}
+                  className={"fb-button green"}
                   onClick={this.openAddVariableMenu}
                   title={t("Add variable")}>
                   <i className={"fa fa-plus"} />
                 </button>}
-                content={<div className={"add-variable-options"}>
+                content={<div className={"grid"}>
                   <button className={"fb-button gray"}
                     onClick={this.addVariable(variableData, declarations,
                       VariableType.Location)}>
@@ -605,7 +602,9 @@ export class SequenceEditorMiddleActive extends
               </ErrorBoundary>
             </Collapse>}
           {viewSequenceCeleryScript &&
-            <pre>{stringifySequenceData(this.props.sequence.body)}</pre>}
+            <pre className="celeryscript">
+              {stringifySequenceData(this.props.sequence.body)}
+            </pre>}
           {!viewSequenceCeleryScript &&
             <SectionHeader title={t("sequence steps")}
               count={stepCount}
@@ -627,12 +626,10 @@ export class SequenceEditorMiddleActive extends
                       index={Infinity} />
                   </ErrorBoundary>
                   <Row>
-                    <Col xs={12}>
-                      <DropArea isLocked={true}
-                        callback={key => onDrop(dispatch, sequence)(Infinity, key)}>
-                        {t("DRAG COMMAND HERE")}
-                      </DropArea>
-                    </Col>
+                    <DropArea isLocked={true}
+                      callback={key => onDrop(dispatch, sequence)(Infinity, key)}>
+                      {t("DRAG COMMAND HERE")}
+                    </DropArea>
                   </Row>
                 </div>
               </div>
@@ -643,7 +640,6 @@ export class SequenceEditorMiddleActive extends
               sequence={sequence}
               dispatch={dispatch}
               toggle={this.toggleSection("licenseCollapsed")} />}
-          <div className={"padding"} />
         </div>
         : <SequencePreviewContent
           viewCeleryScript={!!this.props.getWebAppConfigValue(
@@ -673,41 +669,45 @@ const Description = (props: DescriptionProps) => {
   return <div className={"sequence-description-wrapper"}>
     <SectionHeader title={t("Description")}
       collapsed={!props.isOpen}
-      toggle={props.toggleOpen} />
-    {props.isOpen &&
-      <i title={t("auto-generate sequence description")}
-        className={[
-          "fa",
-          isProcessing ? "fa-spinner fa-pulse" : "fa-magic",
-          "fb-icon-button",
-        ].join(" ")}
-        onClick={() => {
-          if (!props.sequence.body.id) {
-            error(t("Save sequence first."));
-            return;
-          }
-          setIsProcessing(true);
-          requestAutoGeneration({
-            contextKey: "description",
-            sequenceId: props.sequence.body.id,
-            onUpdate: description => setDescription(description),
-            onSuccess: description => {
-              setIsProcessing(false);
-              props.dispatch(edit(props.sequence, { description }));
-            },
-            onError: () => setIsProcessing(false),
-          });
-        }} />}
-    {props.isOpen &&
-      <i title={t("toggle editor view")}
-        className={[
-          "fa",
-          isEditing ? "fa-eye" : "fa-pencil",
-          "fb-icon-button",
-        ].join(" ")}
-        onClick={() => setIsEditing(!isEditing)} />}
+      toggle={props.toggleOpen}
+      buttonElement={<div className={"description-actions"}>
+        <i title={t("auto-generate sequence description")}
+          className={[
+            "fa",
+            isProcessing ? "fa-spinner fa-pulse" : "fa-magic",
+            "fb-icon-button invert",
+          ].join(" ")}
+          onClick={e => {
+            e.stopPropagation();
+            if (!props.sequence.body.id) {
+              error(t("Save sequence first."));
+              return;
+            }
+            setIsProcessing(true);
+            requestAutoGeneration({
+              contextKey: "description",
+              sequenceId: props.sequence.body.id,
+              onUpdate: description => setDescription(description),
+              onSuccess: description => {
+                setIsProcessing(false);
+                props.dispatch(edit(props.sequence, { description }));
+              },
+              onError: () => setIsProcessing(false),
+            });
+          }} />
+        <i title={t("toggle editor view")}
+          className={[
+            "fa",
+            isEditing ? "fa-eye" : "fa-pencil",
+            "fb-icon-button invert",
+          ].join(" ")}
+          onClick={e => {
+            e.stopPropagation();
+            setIsEditing(!isEditing);
+          }} />
+      </div>} />
     <Collapse isOpen={props.isOpen}>
-      <div className={"sequence-description"}
+      <div className={"sequence-description grid no-gap"}
         key={props.sequence.uuid + props.sequence.body.description}>
         {isEditing
           ? <div className={"description-input"}>
@@ -809,7 +809,7 @@ const PublicCopyToolbar = (props: PublicCopyToolbarProps) => {
     {props.showName && <p>{props.sequencePreview?.body.name}</p>}
     {props.viewCeleryScript &&
       <i title={t("toggle celery script view")}
-        className={["fa fa-code fb-icon-button",
+        className={["fa fa-code fb-icon-button invert",
           props.viewSequenceCeleryScript ? "" : "inactive",
         ].join(" ")}
         onClick={props.toggleViewSequenceCeleryScript} />}
@@ -879,16 +879,16 @@ export interface SectionHeaderProps {
   collapsed: boolean;
   toggle(): void;
   count?: number;
-  buttonElement?: JSX.Element | false;
+  buttonElement?: React.ReactNode | false;
   extraClass?: string;
 }
 
 export const SectionHeader = (props: SectionHeaderProps) =>
-  <div className={`sequence-section-header ${props.extraClass}`}
+  <div className={`sequence-section-header row grid-exp-1 ${props.extraClass}`}
     onClick={props.toggle}>
     <label>{!isUndefined(props.count)
       ? `${t(props.title)} (${props.count})`
       : t(props.title)}</label>
-    <i className={`fa fa-caret-${props.collapsed ? "down" : "up"}`} />
     {!props.collapsed && props.buttonElement}
+    <i className={`fa fa-caret-${props.collapsed ? "down" : "up"}`} />
   </div>;
diff --git a/frontend/sequences/sequences.tsx b/frontend/sequences/sequences.tsx
index 8df50c6d30..0df850eae7 100644
--- a/frontend/sequences/sequences.tsx
+++ b/frontend/sequences/sequences.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { StepButtonCluster } from "./step_button_cluster";
 import { SequenceEditorMiddle } from "./sequence_editor_middle";
-import { Page, Row, Col } from "../ui";
+import { Page, Row } from "../ui";
 import { SequencesProps } from "./interfaces";
 import { mapStateToProps } from "./state_to_props";
 import { isTaggedSequence } from "../resources/tagged_resources";
@@ -12,10 +12,10 @@ import { unselectSequence, closeCommandMenu } from "./actions";
 import { isNumber, noop } from "lodash";
 import { RawDesignerSequenceList } from "./panel/list";
 import { Path } from "../internal_urls";
-import { push } from "../history";
 import { urlFriendly } from "../util";
 import { ErrorBoundary } from "../error_boundary";
 import { isMobile } from "../screen_size";
+import { Navigate, useNavigate } from "react-router";
 
 export interface SequenceBackButtonProps {
   dispatch: Function;
@@ -24,10 +24,11 @@ export interface SequenceBackButtonProps {
 
 export const SequenceBackButton = (props: SequenceBackButtonProps) => {
   const insertingStep = props.className.includes("inserting-step");
+  const navigate = useNavigate();
   return <i
     className={`back-to-sequences fa fa-arrow-left ${props.className}`}
     onClick={() => props.dispatch(
-      insertingStep ? closeCommandMenu() : unselectSequence())}
+      insertingStep ? closeCommandMenu() : unselectSequence(navigate))}
     title={insertingStep ? t("back to sequence") : t("back to sequences")} />;
 };
 
@@ -43,51 +44,49 @@ export class RawSequences extends React.Component<SequencesProps, {}> {
     const sequenceOpen = sequenceSelected ? "open" : "";
     const insertingStep = isNumber(stepIndex) ? "inserting-step" : "";
     const activeClasses = [sequenceOpen, insertingStep].join(" ");
-    isMobile() && !Path.inDesigner() && push(Path.designerSequences(
-      sequenceSelected ? urlFriendly(sequence.body.name) : undefined));
+    const path = Path.designerSequences(sequenceSelected
+      ? urlFriendly(sequence.body.name)
+      : undefined);
     return <Page className="sequence-page">
-      <Row>
-        <Col sm={3}>
-          <div className={`sequence-list-panel ${activeClasses}`}>
+      {isMobile() && !Path.inDesigner() && <Navigate to={path} />}
+      <Row className="sequences-page-grid">
+        <div className={`sequence-list-panel ${activeClasses}`}>
+          <ErrorBoundary>
+            <RawDesignerSequenceList {...this.props} />
+          </ErrorBoundary>
+        </div>
+        <div className={`sequence-editor-panel ${activeClasses}`}>
+          <ErrorBoundary>
+            <SequenceEditorMiddle
+              syncStatus={this.props.syncStatus}
+              dispatch={this.props.dispatch}
+              sequence={this.props.sequence}
+              sequences={this.props.sequences}
+              resources={this.props.resources}
+              hardwareFlags={this.props.hardwareFlags}
+              farmwareData={this.props.farmwareData}
+              getWebAppConfigValue={this.props.getWebAppConfigValue}
+              sequencesState={sequencesState} />
+          </ErrorBoundary>
+        </div>
+        {sequenceSelected &&
+          <div className={`step-button-cluster-panel ${activeClasses}`}>
             <ErrorBoundary>
-              <RawDesignerSequenceList {...this.props} />
-            </ErrorBoundary>
-          </div>
-        </Col>
-        <Col sm={6} lg={6}>
-          <div className={`sequence-editor-panel ${activeClasses}`}>
-            <ErrorBoundary>
-              <SequenceEditorMiddle
-                syncStatus={this.props.syncStatus}
+              <StepButtonCluster
+                close={noop}
+                current={this.props.sequence}
                 dispatch={this.props.dispatch}
-                sequence={this.props.sequence}
+                farmwareData={this.props.farmwareData}
                 sequences={this.props.sequences}
                 resources={this.props.resources}
-                hardwareFlags={this.props.hardwareFlags}
-                farmwareData={this.props.farmwareData}
-                getWebAppConfigValue={this.props.getWebAppConfigValue}
-                sequencesState={sequencesState} />
+                stepIndex={stepIndex} />
             </ErrorBoundary>
-          </div>
-        </Col>
-        <Col sm={3} lg={3}>
-          {sequenceSelected &&
-            <div className={`step-button-cluster-panel ${activeClasses}`}>
-              <ErrorBoundary>
-                <StepButtonCluster
-                  close={noop}
-                  current={this.props.sequence}
-                  dispatch={this.props.dispatch}
-                  farmwareData={this.props.farmwareData}
-                  sequences={this.props.sequences}
-                  resources={this.props.resources}
-                  stepIndex={stepIndex} />
-              </ErrorBoundary>
-            </div>}
-        </Col>
+          </div>}
       </Row>
     </Page>;
   }
 }
 
 export const Sequences = connect(mapStateToProps)(RawSequences);
+// eslint-disable-next-line import/no-default-export
+export default Sequences;
diff --git a/frontend/sequences/step_button_cluster.tsx b/frontend/sequences/step_button_cluster.tsx
index 16da4a4ed3..ffe447b0e6 100644
--- a/frontend/sequences/step_button_cluster.tsx
+++ b/frontend/sequences/step_button_cluster.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { t } from "../i18next_wrapper";
 import { StepButton, stepClick } from "./step_buttons";
 import { equals, scrollToBottom } from "../util";
-import { Col } from "../ui";
 import { Color, SequenceBodyItem, TaggedSequence } from "farmbot";
 import { FarmwareData, MessageType } from "./interfaces";
 import { FarmwareName } from "./step_tiles/tile_execute_script";
@@ -241,7 +240,7 @@ export class StepButtonCluster
     });
     return <div className={Path.inDesigner() ? "" : "row"}>
       <div className={[
-        "step-button-cluster",
+        "step-button-cluster grid half-gap",
         Path.inDesigner() ? "designer-cluster" : "",
       ].join(" ")}>
         <SearchField nameKey={"commands"}
@@ -267,8 +266,6 @@ export class StepButtonCluster
                 label={stepButton.title}
                 color={stepButton.color} />
             </div>)}
-          {!Path.inDesigner() && sequences.length > 0 &&
-            <Col xs={12}><label></label></Col>}
           <div className={"pinned-sequences"}>
             {sequences.map((s, inx) => s.body.id &&
               <div className={[
diff --git a/frontend/sequences/step_buttons.tsx b/frontend/sequences/step_buttons.tsx
index 5ee965dc1d..21adb5d47e 100644
--- a/frontend/sequences/step_buttons.tsx
+++ b/frontend/sequences/step_buttons.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { t } from "../i18next_wrapper";
 import { SequenceBodyItem, TaggedSequence } from "farmbot";
 import { Path } from "../internal_urls";
-import { Col } from "../ui";
 import { error } from "../toast/toast";
 import { StepDragger, NULL_DRAGGER_ID } from "../draggable/step_dragger";
 import { pushStep, closeCommandMenu } from "./actions";
@@ -35,18 +34,17 @@ export function StepButton({ label, step, color, dispatch, current, index }:
       ].join(" ")}
       title={label}
       onClick={stepClick(dispatch, step, current, index)}>
-      <div className="step-block-drag">
+      <div className="step-block-drag row">
         <label>{label}</label>
-        {!Path.inDesigner() && <i className="fa fa-arrows block-control" />}
       </div>
     </button>
   </StepDragger>;
   return Path.inDesigner()
     ? <Dragger />
-    : <Col xs={12} sm={12} lg={6}
+    : <div
       className={"step-block-wrapper"}>
       <div className="block">
         <Dragger />
       </div>
-    </Col>;
+    </div>;
 }
diff --git a/frontend/sequences/step_tiles/__tests__/index_test.tsx b/frontend/sequences/step_tiles/__tests__/index_test.tsx
index c4ecf316ff..d8dc7a340d 100644
--- a/frontend/sequences/step_tiles/__tests__/index_test.tsx
+++ b/frontend/sequences/step_tiles/__tests__/index_test.tsx
@@ -373,7 +373,7 @@ describe("renderCeleryNode()", () => {
     },
     {
       node: { kind: "reboot", args: { package: "farmbot_os" } },
-      expected: "power cycle farmbot's onboard computer."
+      expected: ""
     },
     {
       node: { kind: "check_updates", args: { package: "farmbot_os" } },
diff --git a/frontend/sequences/step_tiles/__tests__/tile_lua_support_test.tsx b/frontend/sequences/step_tiles/__tests__/tile_lua_support_test.tsx
index 9a856128fd..074527c69e 100644
--- a/frontend/sequences/step_tiles/__tests__/tile_lua_support_test.tsx
+++ b/frontend/sequences/step_tiles/__tests__/tile_lua_support_test.tsx
@@ -4,12 +4,6 @@ lodash.debounce = jest.fn(x => x);
 const mockEditStep = jest.fn();
 jest.mock("../../../api/crud", () => ({ editStep: mockEditStep }));
 
-import { Path } from "../../../internal_urls";
-let mockPath = Path.mock(Path.designer());
-jest.mock("../../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 import React from "react";
 import { shallow } from "enzyme";
 import { LuaTextArea, LuaTextAreaProps } from "../tile_lua_support";
@@ -17,6 +11,7 @@ import { Lua } from "farmbot";
 import { Editor } from "@monaco-editor/react";
 import { fakeStepParams } from "../../../__test_support__/fake_sequence_step_data";
 import { StateToggleKey } from "../../step_ui";
+import { Path } from "../../../internal_urls";
 
 describe("<LuaTextArea />", () => {
   const fakeProps = (): LuaTextAreaProps<Lua> => ({
@@ -71,13 +66,13 @@ describe("<LuaTextArea />", () => {
   });
 
   it("renders for designer", () => {
-    mockPath = Path.mock(Path.designer());
+    location.pathname = Path.mock(Path.designer());
     const wrapper = shallow(<LuaTextArea {...fakeProps()} />);
     expect(wrapper.find(".lua-editor").hasClass("full")).toBeFalsy();
   });
 
   it("renders full editor", () => {
-    mockPath = Path.mock(Path.sequencePage());
+    location.pathname = Path.mock(Path.sequencePage());
     const wrapper = shallow(<LuaTextArea {...fakeProps()} />);
     expect(wrapper.find(".lua-editor").hasClass("full")).toBeTruthy();
   });
@@ -90,7 +85,7 @@ describe("<LuaTextArea />", () => {
   });
 
   it("renders expanded", () => {
-    mockPath = Path.mock(Path.sequencePage());
+    location.pathname = Path.mock(Path.sequencePage());
     const p = fakeProps();
     p.stateToggles[StateToggleKey.luaExpanded] =
       { enabled: true, toggle: jest.fn() };
diff --git a/frontend/sequences/step_tiles/__tests__/tile_reboot_test.tsx b/frontend/sequences/step_tiles/__tests__/tile_reboot_test.tsx
index 510f8d9974..5201a415c8 100644
--- a/frontend/sequences/step_tiles/__tests__/tile_reboot_test.tsx
+++ b/frontend/sequences/step_tiles/__tests__/tile_reboot_test.tsx
@@ -11,7 +11,6 @@ import { TileReboot, editTheRebootStep, rebootExecutor } from "../tile_reboot";
 import { StepParams } from "../../interfaces";
 import { editStep } from "../../../api/crud";
 import { Reboot } from "farmbot";
-import { Content } from "../../../constants";
 import { fakeStepParams } from "../../../__test_support__/fake_sequence_step_data";
 
 describe("<TileReboot />", () => {
@@ -26,7 +25,6 @@ describe("<TileReboot />", () => {
 
   it("renders", () => {
     const block = render(<TileReboot {...fakeProps()} />);
-    expect(block.text()).toContain(Content.REBOOT_STEP);
     expect(block.text().toLowerCase()).not.toContain("arduino");
   });
 
diff --git a/frontend/sequences/step_tiles/__tests__/tile_set_servo_angle_test.tsx b/frontend/sequences/step_tiles/__tests__/tile_set_servo_angle_test.tsx
index 54f9482a74..982dfca61a 100644
--- a/frontend/sequences/step_tiles/__tests__/tile_set_servo_angle_test.tsx
+++ b/frontend/sequences/step_tiles/__tests__/tile_set_servo_angle_test.tsx
@@ -32,9 +32,9 @@ describe("<TileSetServoAngle/>", () => {
     expect(inputs.length).toEqual(6);
     expect(labels.length).toEqual(6);
     expect(inputs.first().props().placeholder).toEqual("Control Servo");
-    expect(labels.at(0).text()).toContain("Angle (0-180)");
-    expect(inputs.at(1).props().value).toEqual(stepArgs.pin_value);
-    expect(inputs.at(2).props().value).toEqual("" + stepArgs.pin_number);
+    expect(inputs.at(1).props().value).toEqual("" + stepArgs.pin_number);
+    expect(labels.at(5).text()).toContain("Angle (0-180)");
+    expect(inputs.at(5).props().value).toEqual(stepArgs.pin_value);
   });
 
   it("changes pin number", () => {
diff --git a/frontend/sequences/step_tiles/pin_support/mode.tsx b/frontend/sequences/step_tiles/pin_support/mode.tsx
index 14170a9db6..1907258da1 100644
--- a/frontend/sequences/step_tiles/pin_support/mode.tsx
+++ b/frontend/sequences/step_tiles/pin_support/mode.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { DropDownItem, Col, FBSelect } from "../../../ui";
+import { DropDownItem, FBSelect } from "../../../ui";
 import { SequenceBodyItem, ALLOWED_PIN_MODES, WritePin, ReadPin } from "farmbot";
 import { StepParams } from "../../interfaces";
 import { editStep } from "../../../api/crud";
@@ -7,14 +7,14 @@ import { t } from "../../../i18next_wrapper";
 import { isBoxLed } from "./index";
 
 export function PinModeDropdown(props: StepParams<ReadPin | WritePin>) {
-  return <Col xs={6} md={3}>
+  return <div className="row grid-2-col">
     <label>{t("Mode")}</label>
     <FBSelect
       key={JSON.stringify(props.currentSequence)}
       onChange={ddi => setPinMode(ddi, props)}
       selectedItem={currentModeSelection(props.currentStep)}
       list={getPinModes(props.currentStep)} />
-  </Col>;
+  </div>;
 }
 
 export function setPinMode(ddi: DropDownItem, stepParams: StepParams) {
diff --git a/frontend/sequences/step_tiles/pin_support/pin_and_peripheral_support.tsx b/frontend/sequences/step_tiles/pin_support/pin_and_peripheral_support.tsx
index 437ccb7510..07d96c77ce 100644
--- a/frontend/sequences/step_tiles/pin_support/pin_and_peripheral_support.tsx
+++ b/frontend/sequences/step_tiles/pin_support/pin_and_peripheral_support.tsx
@@ -3,7 +3,7 @@ import {
   selectAllSavedPeripherals, selectAllSavedSensors,
 } from "../../../resources/selectors";
 import { ResourceIndex } from "../../../resources/interfaces";
-import { DropDownItem, Col, FBSelect } from "../../../ui";
+import { DropDownItem, FBSelect } from "../../../ui";
 import { range, isNumber, isString } from "lodash";
 import {
   TaggedPeripheral, TaggedSensor, ResourceName, Nothing, SequenceBodyItem,
@@ -267,13 +267,12 @@ interface PinSelectProps extends StepParams<WritePin | TogglePin | ReadPin> {
   width?: number;
 }
 
-export const PinSelect = (props: PinSelectProps): JSX.Element => {
+export const PinSelect = (props: PinSelectProps): React.ReactNode => {
   const step = props.currentStep;
   const { currentSequence, resources, showPins } = props;
   const { pin_number } = step.args;
-  const width = props.width || 6;
 
-  return <Col xs={width} md={width}>
+  return <div className="row grid-2-col">
     <label>{props.label || t("Peripheral")}</label>
     <FBSelect
       key={JSON.stringify(currentSequence)}
@@ -281,5 +280,5 @@ export const PinSelect = (props: PinSelectProps): JSX.Element => {
       customNullLabel={props.placeholder || t("Select a peripheral")}
       onChange={setArgsDotPinNumber(props)}
       list={pinsAsDropdowns(step.kind)(resources, !!showPins)} />
-  </Col>;
+  </div>;
 };
diff --git a/frontend/sequences/step_tiles/pin_support/value.tsx b/frontend/sequences/step_tiles/pin_support/value.tsx
index 527492e3c0..c0b7828f25 100644
--- a/frontend/sequences/step_tiles/pin_support/value.tsx
+++ b/frontend/sequences/step_tiles/pin_support/value.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { DropDownItem, Col, FBSelect } from "../../../ui";
+import { DropDownItem, FBSelect } from "../../../ui";
 import { isNumber } from "lodash";
 import { WritePin } from "farmbot";
 import { StepParams } from "../../interfaces";
@@ -11,11 +11,11 @@ export interface PinValueFieldProps extends StepParams {
   currentStep: WritePin;
 }
 
-export const PinValueField = (props: PinValueFieldProps): JSX.Element => {
+export const PinValueField = (props: PinValueFieldProps): React.ReactNode => {
   const { currentStep, currentSequence } = props;
   const analogMode = !(currentStep.args.pin_mode === 0);
   const analogValue = currentStep.args.pin_value > 1;
-  return <Col xs={12} md={3}>
+  return <div className="row grid-2-col">
     <label>{t("set to")}</label>
     {analogMode || analogValue
       /** Analog pin mode: display slider for pin value. */
@@ -33,7 +33,7 @@ export const PinValueField = (props: PinValueFieldProps): JSX.Element => {
         onChange={ddi => setPinValueFromDdi(ddi, props)}
         selectedItem={currentValueSelection(currentStep)}
         list={PIN_VALUES()} />}
-  </Col>;
+  </div>;
 };
 
 export function setPinValue(value: number, stepParams: StepParams) {
diff --git a/frontend/sequences/step_tiles/tile_assertion.tsx b/frontend/sequences/step_tiles/tile_assertion.tsx
index 639b8cfff3..e2405ca4c0 100644
--- a/frontend/sequences/step_tiles/tile_assertion.tsx
+++ b/frontend/sequences/step_tiles/tile_assertion.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
 import { StepParams } from "../interfaces";
-import { Row, Col, devDocLinkClick } from "../../ui";
+import { Row, devDocLinkClick } from "../../ui";
 import { StateToggleKey, StepWrapper } from "../step_ui";
 import { TypePart } from "./tile_assertion/type_part";
 import { SequencePart } from "./tile_assertion/sequence_part";
@@ -29,22 +29,16 @@ export const TileAssertion = (props: StepParams<Assertion>) => {
         <i className="fa fa-external-link" />
       </a>]}
     stateToggles={stateToggles}>
-    <Row>
-      <Col xs={12}>
-        <LuaTextArea<Assertion> {...props} stateToggles={stateToggles} />
-      </Col>
-    </Row>
-    <Row>
-      <Col xs={6}>
+    <div className="grid">
+      <LuaTextArea<Assertion> {...props} stateToggles={stateToggles} />
+      <Row className="grid-2-col">
         <TypePart key={JSON.stringify(props.currentSequence)}
           {...props} />
-      </Col>
-      {props.currentStep.args.assertion_type.includes("recover") &&
-        <Col xs={6}>
+        {props.currentStep.args.assertion_type.includes("recover") &&
           <SequencePart key={JSON.stringify(props.currentSequence)}
-            {...props} />
-        </Col>}
-    </Row>
-    <VariablesPart {...props} />
+            {...props} />}
+      </Row>
+      <VariablesPart {...props} />
+    </div>
   </StepWrapper>;
 };
diff --git a/frontend/sequences/step_tiles/tile_assertion/variables_part.tsx b/frontend/sequences/step_tiles/tile_assertion/variables_part.tsx
index fc0b21ea7b..da9afe4a0c 100644
--- a/frontend/sequences/step_tiles/tile_assertion/variables_part.tsx
+++ b/frontend/sequences/step_tiles/tile_assertion/variables_part.tsx
@@ -3,7 +3,7 @@ import { overwrite } from "../../../api/crud";
 import { Assertion, ParameterApplication } from "farmbot/dist/corpus";
 import { StepParams } from "../../interfaces";
 import { findSequenceById } from "../../../resources/selectors";
-import { Col, Row } from "../../../ui";
+import { Row } from "../../../ui";
 import { LocalsList } from "../../locals_list/locals_list";
 import { addOrEditParamApps } from "../../locals_list/variable_support";
 import { AllowedVariableNodes } from "../../locals_list/locals_list_support";
@@ -23,24 +23,22 @@ export const VariablesPart = (props: StepParams<Assertion>) => {
     : undefined;
   return calledSequenceVariableData
     ? <Row>
-      <Col xs={12}>
-        <LocalsList
-          bodyVariables={_then.body}
-          variableData={calledSequenceVariableData}
-          sequenceUuid={props.currentSequence.uuid}
-          resources={props.resources}
-          onChange={(variable: ParameterApplication) => {
-            _then.body = addOrEditParamApps(_then.body || [], variable);
-            const update = defensiveClone(props.currentStep);
-            const nextSequence = defensiveClone(props.currentSequence).body;
-            update.args._then = _then;
-            nextSequence.body = nextSequence.body || [];
-            nextSequence.body[props.index] = update;
-            props.dispatch(overwrite(props.currentSequence, nextSequence));
-          }}
-          locationDropdownKey={JSON.stringify(props.currentSequence)}
-          allowedVariableNodes={AllowedVariableNodes.identifier} />
-      </Col>
+      <LocalsList
+        bodyVariables={_then.body}
+        variableData={calledSequenceVariableData}
+        sequenceUuid={props.currentSequence.uuid}
+        resources={props.resources}
+        onChange={(variable: ParameterApplication) => {
+          _then.body = addOrEditParamApps(_then.body || [], variable);
+          const update = defensiveClone(props.currentStep);
+          const nextSequence = defensiveClone(props.currentSequence).body;
+          update.args._then = _then;
+          nextSequence.body = nextSequence.body || [];
+          nextSequence.body[props.index] = update;
+          props.dispatch(overwrite(props.currentSequence, nextSequence));
+        }}
+        locationDropdownKey={JSON.stringify(props.currentSequence)}
+        allowedVariableNodes={AllowedVariableNodes.identifier} />
     </Row>
     : <div className={"no-variables"} />;
 };
diff --git a/frontend/sequences/step_tiles/tile_computed_move/addition.tsx b/frontend/sequences/step_tiles/tile_computed_move/addition.tsx
index 6b85b97526..19d86396b3 100644
--- a/frontend/sequences/step_tiles/tile_computed_move/addition.tsx
+++ b/frontend/sequences/step_tiles/tile_computed_move/addition.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Move, Xyz, AxisAddition, Random } from "farmbot";
-import { Row, Col, BlurableInput } from "../../../ui";
+import { Row, BlurableInput } from "../../../ui";
 import { t } from "../../../i18next_wrapper";
 import { VarianceInputRowProps, OffsetInputRowProps } from "./interfaces";
 import { MoveStepInput } from "./input";
@@ -43,20 +43,18 @@ export const getOffsetNode = (
 };
 
 export const OffsetInputRow = (props: OffsetInputRowProps) =>
-  <Row>
-    <Col xs={3}>
-      <label>
-        {t("offset")}
-      </label>
-    </Col>
+  <Row className="grid-4-col">
+    <label>
+      {t("offset")}
+    </label>
     {["x", "y", "z"].map((axis: Xyz) =>
-      <Col xs={3} key={axis}>
+      <div key={axis}>
         <MoveStepInput field={"offset"} axis={axis}
           value={props.offset[axis]}
           disabled={props.disabledAxes[axis]}
           onCommit={props.onCommit}
           setValue={props.setAxisState("offset", axis, 0)} />
-      </Col>)}
+      </div>)}
   </Row>;
 
 export const getVarianceState = (step: Move, axis: Xyz) => {
@@ -81,14 +79,12 @@ export const getVarianceNode = (
 };
 
 export const VarianceInputRow = (props: VarianceInputRowProps) =>
-  <Row>
-    <Col xs={3}>
-      <label>
-        {t("Variance")}
-      </label>
-    </Col>
+  <Row className="grid-4-col">
+    <label>
+      {t("Variance")}
+    </label>
     {["x", "y", "z"].map((axis: Xyz) =>
-      <Col xs={3} key={axis}>
+      <div key={axis}>
         <BlurableInput
           type={"number"}
           name={"variance.x"}
@@ -96,5 +92,5 @@ export const VarianceInputRow = (props: VarianceInputRowProps) =>
           min={0}
           disabled={props.disabledAxes[axis]}
           onCommit={props.onCommit("variance", axis)} />
-      </Col>)}
+      </div>)}
   </Row>;
diff --git a/frontend/sequences/step_tiles/tile_computed_move/component.tsx b/frontend/sequences/step_tiles/tile_computed_move/component.tsx
index b72b23d77b..f9d26f2c9e 100644
--- a/frontend/sequences/step_tiles/tile_computed_move/component.tsx
+++ b/frontend/sequences/step_tiles/tile_computed_move/component.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { StepWrapper } from "../../step_ui";
-import { Row, Col, ExpandableHeader } from "../../../ui";
+import { Row, ExpandableHeader } from "../../../ui";
 import { ToolTips } from "../../../constants";
 import { t } from "../../../i18next_wrapper";
 import { Move, Xyz } from "farmbot";
@@ -245,11 +245,9 @@ export class ComputedMove
   toggleMore = () => this.setState({ more: !this.state.more });
 
   LocationInputRow = () =>
-    <Row>
-      <Col xs={3}>
-        <label>{t("Location")}</label>
-      </Col>
-      <Col xs={8}>
+    <Row className="move-location-grid">
+      <label>{t("Location")}</label>
+      <div className="row grid-exp-1">
         <LocationSelection
           locationNode={this.state.location}
           locationSelection={this.state.locationSelection}
@@ -257,13 +255,11 @@ export class ComputedMove
           onChange={this.setLocationState}
           sequence={this.props.currentSequence}
           sequenceUuid={this.props.currentSequence.uuid} />
-      </Col>
-      <Col xs={1} className={"no-pad"}>
         <ExpandableHeader
           expanded={this.state.more}
           title={""}
           onClick={this.toggleMore} />
-      </Col>
+      </div>
     </Row>;
 
   OverwriteInputRow = () =>
@@ -278,7 +274,7 @@ export class ComputedMove
         onCommit={this.commit}
         setAxisState={this.setAxisState}
         setAxisOverwriteState={this.setAxisOverwriteState} />
-      : <div className={"overwrite-row-hidden"} />;
+      : undefined;
 
   OffsetInputRow = () =>
     (this.state.locationSelection == "offset"
@@ -289,7 +285,7 @@ export class ComputedMove
         disabledAxes={this.disabledAxes}
         onCommit={this.commit}
         setAxisState={this.setAxisState} />
-      : <div className={"offset-row-hidden"} />;
+      : undefined;
 
   VarianceInputRow = () =>
     (some(this.varianceNodes) || this.state.more)
@@ -297,7 +293,7 @@ export class ComputedMove
         variance={this.state.variance}
         disabledAxes={this.disabledAxes}
         onCommit={this.commit} />
-      : <div className={"variance-row-hidden"} />;
+      : undefined;
 
   SpeedInputRow = () =>
     (some(this.speedNodes) || this.state.more)
@@ -306,13 +302,13 @@ export class ComputedMove
         disabledAxes={this.disabledAxes}
         onCommit={this.commit}
         setAxisState={this.setAxisState} />
-      : <div className={"speed-row-hidden"} />;
+      : undefined;
 
   SafeZCheckbox = () =>
     (this.state.safeZ || this.state.more)
       ? <SafeZCheckbox checked={this.state.safeZ}
         onChange={this.toggleSafeZ} />
-      : <div className={"safe-z-checkbox-hidden"} />;
+      : undefined;
 
   render() {
     return <StepWrapper {...this.props}
diff --git a/frontend/sequences/step_tiles/tile_computed_move/overwrite.tsx b/frontend/sequences/step_tiles/tile_computed_move/overwrite.tsx
index 535e65253a..5d47d0e4cb 100644
--- a/frontend/sequences/step_tiles/tile_computed_move/overwrite.tsx
+++ b/frontend/sequences/step_tiles/tile_computed_move/overwrite.tsx
@@ -4,7 +4,7 @@ import { t } from "../../../i18next_wrapper";
 import { Xyz, Move, AxisOverwrite } from "farmbot";
 import { Axis } from "../../../devices/interfaces";
 import { isUndefined } from "lodash";
-import { Col, FBSelect, Row } from "../../../ui";
+import { FBSelect, Row } from "../../../ui";
 import { MoveStepInput } from "./input";
 import { LOCATION_NODES } from "./location";
 
@@ -71,16 +71,14 @@ export const getOverwriteNode = (
 };
 
 export const OverwriteInputRow = (props: OverwriteInputRowProps) =>
-  <Row>
-    <Col xs={3}>
-      <label>
-        {props.locationSelection == "custom"
-          ? t("X, Y, Z (mm)")
-          : t("override")}
-      </label>
-    </Col>
+  <Row className="grid-4-col">
+    <label>
+      {props.locationSelection == "custom"
+        ? t("X, Y, Z (mm)")
+        : t("override")}
+    </label>
     {["x", "y", "z"].map((axis: Xyz) =>
-      <Col xs={3} key={axis}>
+      <div key={axis}>
         {showDropdown(props.selection[axis])
           ? <FBSelect
             key={props.selection[axis]}
@@ -94,7 +92,7 @@ export const OverwriteInputRow = (props: OverwriteInputRowProps) =>
             onClear={() =>
               props.setAxisOverwriteState(axis, AxisSelection.none)}
             setValue={props.setAxisState("overwrite", axis, 0)} />}
-      </Col>)}
+      </div>)}
   </Row>;
 
 export const OVERWRITE_OPTION_LOOKUP = () => ({
diff --git a/frontend/sequences/step_tiles/tile_computed_move/safe_z.tsx b/frontend/sequences/step_tiles/tile_computed_move/safe_z.tsx
index ab4e31d058..ffb0a45efc 100644
--- a/frontend/sequences/step_tiles/tile_computed_move/safe_z.tsx
+++ b/frontend/sequences/step_tiles/tile_computed_move/safe_z.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, Help } from "../../../ui";
+import { Row, Help } from "../../../ui";
 import { t } from "../../../i18next_wrapper";
 import { ToolTips } from "../../../constants";
 import { Checkbox } from "@blueprintjs/core";
@@ -7,16 +7,14 @@ import { Move, SafeZ } from "farmbot";
 import { SafeZCheckboxProps } from "./interfaces";
 
 export const SafeZCheckbox = (props: SafeZCheckboxProps) =>
-  <Row>
-    <Col xs={3}>
+  <Row className="grid-4-col">
+    <div className="row half-gap grid-exp-2">
       <label className={"safe-z"}>{t("Safe Z")}</label>
       <Help text={ToolTips.SAFE_Z} customClass={"help-icon"} />
-    </Col>
-    <Col xs={3}>
-      <Checkbox title={t("toggle safe z")}
-        checked={props.checked}
-        onChange={props.onChange} />
-    </Col>
+    </div>
+    <Checkbox title={t("toggle safe z")}
+      checked={props.checked}
+      onChange={props.onChange} />
   </Row>;
 
 export const getSafeZState = (step: Move) => {
diff --git a/frontend/sequences/step_tiles/tile_computed_move/speed.tsx b/frontend/sequences/step_tiles/tile_computed_move/speed.tsx
index 0921ec8853..ed513df84c 100644
--- a/frontend/sequences/step_tiles/tile_computed_move/speed.tsx
+++ b/frontend/sequences/step_tiles/tile_computed_move/speed.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Xyz, SpeedOverwrite, Move } from "farmbot";
 import { SpeedInputRowProps } from "./interfaces";
-import { Row, Col } from "../../../ui";
+import { Row } from "../../../ui";
 import { t } from "../../../i18next_wrapper";
 import { MoveStepInput } from "./input";
 import { isUndefined } from "lodash";
@@ -41,18 +41,16 @@ export const getSpeedNode = (
 };
 
 export const SpeedInputRow = (props: SpeedInputRowProps) =>
-  <Row>
-    <Col xs={3}>
-      <label>
-        {t("Speed (%)")}
-      </label>
-    </Col>
+  <Row className="grid-4-col">
+    <label>
+      {t("Speed (%)")}
+    </label>
     {["x", "y", "z"].map((axis: Xyz) =>
-      <Col xs={3} key={axis}>
+      <div key={axis}>
         <MoveStepInput field={"speed"} axis={axis}
           value={props.speed[axis]}
           onCommit={props.onCommit} min={1} max={100}
           disabled={props.disabledAxes[axis]} defaultValue={100}
           setValue={props.setAxisState("speed", axis, 100)} />
-      </Col>)}
+      </div>)}
   </Row>;
diff --git a/frontend/sequences/step_tiles/tile_emergency_stop.tsx b/frontend/sequences/step_tiles/tile_emergency_stop.tsx
index 230340efe4..d828466e56 100644
--- a/frontend/sequences/step_tiles/tile_emergency_stop.tsx
+++ b/frontend/sequences/step_tiles/tile_emergency_stop.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StepParams } from "../interfaces";
 import { ToolTips, Content } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Col, Row } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export const TileEmergencyStop = (props: StepParams) =>
@@ -10,10 +10,8 @@ export const TileEmergencyStop = (props: StepParams) =>
     className={"emergency-stop-step"}
     helpText={ToolTips.EMERGENCY_LOCK}>
     <Row>
-      <Col xs={12}>
-        <p>
-          {t(Content.ESTOP_STEP)}
-        </p>
-      </Col>
+      <p>
+        {t(Content.ESTOP_STEP)}
+      </p>
     </Row>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_execute.tsx b/frontend/sequences/step_tiles/tile_execute.tsx
index 32092616b3..3a0cd30000 100644
--- a/frontend/sequences/step_tiles/tile_execute.tsx
+++ b/frontend/sequences/step_tiles/tile_execute.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { StepParams } from "../interfaces";
-import { Row, Col, DropDownItem } from "../../ui";
+import { Row, DropDownItem } from "../../ui";
 import { Execute, ParameterApplication } from "farmbot";
 import { editStep } from "../../api/crud";
 import { ToolTips } from "../../constants";
@@ -79,25 +79,21 @@ export class TileExecute
       enableMarkdown={!!callee?.body.description}>
       {!sequence_id &&
         <Row>
-          <Col>
-            <SequenceSelectBox
-              onChange={this.changeSelection}
-              resources={resources}
-              sequenceId={sequence_id} />
-          </Col>
+          <SequenceSelectBox
+            onChange={this.changeSelection}
+            resources={resources}
+            sequenceId={sequence_id} />
         </Row>}
       {hasVariables &&
         <Row>
-          <Col>
-            <LocalsList
-              bodyVariables={currentStep.body}
-              variableData={calledSequenceVariableData}
-              sequenceUuid={currentSequence.uuid}
-              resources={resources}
-              onChange={assignVariable(this.props)(currentStep.body || [])}
-              locationDropdownKey={JSON.stringify(currentSequence)}
-              allowedVariableNodes={AllowedVariableNodes.identifier} />
-          </Col>
+          <LocalsList
+            bodyVariables={currentStep.body}
+            variableData={calledSequenceVariableData}
+            sequenceUuid={currentSequence.uuid}
+            resources={resources}
+            onChange={assignVariable(this.props)(currentStep.body || [])}
+            locationDropdownKey={JSON.stringify(currentSequence)}
+            allowedVariableNodes={AllowedVariableNodes.identifier} />
         </Row>}
     </StepWrapper>;
   }
diff --git a/frontend/sequences/step_tiles/tile_execute_script.tsx b/frontend/sequences/step_tiles/tile_execute_script.tsx
index 9a2dfff293..0b61633e01 100644
--- a/frontend/sequences/step_tiles/tile_execute_script.tsx
+++ b/frontend/sequences/step_tiles/tile_execute_script.tsx
@@ -3,7 +3,7 @@ import { StepParams, FarmwareData } from "../interfaces";
 import { ToolTips, Content } from "../../constants";
 import { StepInputBox } from "../inputs/step_input_box";
 import { StepWrapper, StepWarning } from "../step_ui";
-import { Row, Col, FBSelect, DropDownItem } from "../../ui";
+import { Row, FBSelect, DropDownItem } from "../../ui";
 import { editStep } from "../../api/crud";
 import { ExecuteScript, FarmwareConfig } from "farmbot";
 import { FarmwareInputs, farmwareList } from "./tile_execute_script_support";
@@ -82,7 +82,7 @@ export const DefaultFarmwareStep = (props: StepParams<ExecuteScript>) => {
       : [];
   };
 
-  return <Col xs={12}>
+  return <div>
     <label>{t("Package Name")}</label>
     <FBSelect
       key={JSON.stringify(currentSequence)}
@@ -106,7 +106,7 @@ export const DefaultFarmwareStep = (props: StepParams<ExecuteScript>) => {
       defaultConfigs={currentFarmwareConfigDefaults(farmwareName)}
       currentStep={currentStep}
       updateStep={updateStep} />
-  </Col>;
+  </div>;
 };
 
 const FarmwareStepContents = (props: StepParams<ExecuteScript>) => {
@@ -118,24 +118,20 @@ const FarmwareStepContents = (props: StepParams<ExecuteScript>) => {
 };
 
 const DetectWeedsStep = () =>
-  <Col xs={12}>
-    <p>
-      {`${t("Results are viewable from the")} `}
-      <Link to={Path.photos()}>
-        {t("photos panel")}
-      </Link>.
-    </p>
-  </Col>;
+  <p>
+    {`${t("Results are viewable from the")} `}
+    <Link to={Path.photos()}>
+      {t("photos panel")}
+    </Link>.
+  </p>;
 
 const MeasureSoilHeightStep = () =>
-  <Col xs={12}>
-    <p>
-      {`${t("Results are viewable in the")} `}
-      <Link to={Path.points()}>
-        {t("points panel")}
-      </Link>.
-    </p>
-  </Col>;
+  <p>
+    {`${t("Results are viewable in the")} `}
+    <Link to={Path.points()}>
+      {t("points panel")}
+    </Link>.
+  </p>;
 
 interface CameraRequiredStepWarningsProps {
   farmwareName: string;
diff --git a/frontend/sequences/step_tiles/tile_execute_script_support.tsx b/frontend/sequences/step_tiles/tile_execute_script_support.tsx
index b14140ba83..a1e2e04a53 100644
--- a/frontend/sequences/step_tiles/tile_execute_script_support.tsx
+++ b/frontend/sequences/step_tiles/tile_execute_script_support.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FarmwareData } from "../interfaces";
-import { DropDownItem, BlurableInput, Help } from "../../ui/index";
+import { DropDownItem, BlurableInput, Help } from "../../ui";
 import { without, isNumber } from "lodash";
 import { ExecuteScript, Pair, FarmwareConfig } from "farmbot";
 import { getConfigEnvName } from "../../farmware/farmware_forms";
diff --git a/frontend/sequences/step_tiles/tile_firmware_action.tsx b/frontend/sequences/step_tiles/tile_firmware_action.tsx
index bba1c65263..cd7502d179 100644
--- a/frontend/sequences/step_tiles/tile_firmware_action.tsx
+++ b/frontend/sequences/step_tiles/tile_firmware_action.tsx
@@ -3,7 +3,7 @@ import { StepInputBox } from "../inputs/step_input_box";
 import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export const TileFirmwareAction = (props: StepParams) =>
@@ -11,14 +11,12 @@ export const TileFirmwareAction = (props: StepParams) =>
     className={"firmware-action-step"}
     helpText={ToolTips.FIRMWARE_ACTION}>
     <Row>
-      <Col xs={12}>
-        <label>{t("System")}</label>
-        <StepInputBox field={"package"}
-          dispatch={props.dispatch}
-          step={props.currentStep}
-          sequence={props.currentSequence}
-          index={props.index}
-          fieldOverride={true} />
-      </Col>
+      <label>{t("System")}</label>
+      <StepInputBox field={"package"}
+        dispatch={props.dispatch}
+        step={props.currentStep}
+        sequence={props.currentSequence}
+        index={props.index}
+        fieldOverride={true} />
     </Row>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_if/if.tsx b/frontend/sequences/step_tiles/tile_if/if.tsx
index 8dc83935e7..53397a4612 100644
--- a/frontend/sequences/step_tiles/tile_if/if.tsx
+++ b/frontend/sequences/step_tiles/tile_if/if.tsx
@@ -3,7 +3,7 @@ import { LHSOptions, operatorOptions } from "./index";
 import { StepInputBox } from "../../inputs/step_input_box";
 import { defensiveClone } from "../../../util";
 import { overwrite } from "../../../api/crud";
-import { Col, Row, FBSelect, DropDownItem } from "../../../ui";
+import { Row, FBSelect, DropDownItem } from "../../../ui";
 import { ALLOWED_OPS, If } from "farmbot";
 import { updateLhs } from "./update_lhs";
 import { displayLhs } from "./display_lhs";
@@ -40,30 +40,30 @@ export function If_(props: StepParams<If>) {
   const { op } = currentStep.args;
   const lhsOptions = LHSOptions(resources, !!props.showPins);
 
-  return <Row>
-    <Col xs={4}>
+  return <Row className="grid-3-col">
+    <div>
       <label>{t("Variable")}</label>
       <FBSelect
         key={JSON.stringify(sequence)}
         list={lhsOptions}
         onChange={updateLhs(props)}
         selectedItem={displayLhs({ currentStep, resources, lhsOptions })} />
-    </Col>
-    <Col xs={4}>
+    </div>
+    <div>
       <label>{t("Operator")}</label>
       <FBSelect
         key={JSON.stringify(sequence)}
         list={operatorOptions()}
         onChange={updateOp(props)}
         selectedItem={{ label: label_ops()[op] || op, value: op }} />
-    </Col>
-    <Col xs={4} hidden={op === IS_UNDEFINED}>
+    </div>
+    <div hidden={op === IS_UNDEFINED}>
       <label>{t("Value")}</label>
       <StepInputBox dispatch={props.dispatch}
         step={currentStep}
         sequence={sequence}
         index={props.index}
         field="rhs" />
-    </Col>
+    </div>
   </Row>;
 }
diff --git a/frontend/sequences/step_tiles/tile_if/then_else.tsx b/frontend/sequences/step_tiles/tile_if/then_else.tsx
index e1ce854299..1ddf8181f8 100644
--- a/frontend/sequences/step_tiles/tile_if/then_else.tsx
+++ b/frontend/sequences/step_tiles/tile_if/then_else.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ThenElseParams, seqDropDown, IfBlockDropDownHandler } from "./index";
-import { Col, FBSelect } from "../../../ui";
+import { FBSelect } from "../../../ui";
 import { LocalsList } from "../../locals_list/locals_list";
 import { AllowedVariableNodes } from "../../locals_list/locals_list_support";
 import { t } from "../../../i18next_wrapper";
@@ -10,7 +10,7 @@ export function ThenElse(props: ThenElseParams) {
     onChange, selectedItem, calledSequenceVariableData, assignVariable
   } = IfBlockDropDownHandler(props);
   const { body } = props.currentStep.args[props.thenElseKey];
-  return <Col xs={12}>
+  return <div>
     <div className="execute-row">
       <label>{props.thenElseKey === "_then" ? t("Then Execute") : t("Else Execute")}
       </label>
@@ -22,15 +22,13 @@ export function ThenElse(props: ThenElseParams) {
       onChange={onChange}
       selectedItem={selectedItem()} />
     {!!calledSequenceVariableData &&
-      <Col xs={12}>
-        <LocalsList
-          bodyVariables={body}
-          variableData={calledSequenceVariableData}
-          sequenceUuid={props.currentSequence.uuid}
-          resources={props.resources}
-          onChange={assignVariable(body || [])}
-          locationDropdownKey={JSON.stringify(props.currentSequence)}
-          allowedVariableNodes={AllowedVariableNodes.identifier} />
-      </Col>}
-  </Col>;
+      <LocalsList
+        bodyVariables={body}
+        variableData={calledSequenceVariableData}
+        sequenceUuid={props.currentSequence.uuid}
+        resources={props.resources}
+        onChange={assignVariable(body || [])}
+        locationDropdownKey={JSON.stringify(props.currentSequence)}
+        allowedVariableNodes={AllowedVariableNodes.identifier} />}
+  </div>;
 }
diff --git a/frontend/sequences/step_tiles/tile_lua.tsx b/frontend/sequences/step_tiles/tile_lua.tsx
index 81e0e32c02..5207463155 100644
--- a/frontend/sequences/step_tiles/tile_lua.tsx
+++ b/frontend/sequences/step_tiles/tile_lua.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
 import { StepParams } from "../interfaces";
-import { Row, Col, devDocLinkClick } from "../../ui";
+import { Row, devDocLinkClick } from "../../ui";
 import { StateToggleKey, StepWrapper } from "../step_ui";
 import { Lua } from "farmbot/dist/corpus";
 import { ToolTips } from "../../constants";
@@ -27,9 +27,7 @@ export const TileLua = (props: StepParams<Lua>) => {
       </a>]}
     stateToggles={stateToggles}>
     <Row>
-      <Col xs={12}>
-        <LuaTextArea<Lua> {...props} stateToggles={stateToggles} />
-      </Col>
+      <LuaTextArea<Lua> {...props} stateToggles={stateToggles} />
     </Row>
   </StepWrapper>;
 };
diff --git a/frontend/sequences/step_tiles/tile_mark_as/__tests__/field_warning_test.tsx b/frontend/sequences/step_tiles/tile_mark_as/__tests__/field_warning_test.tsx
index 619006e630..4dc7d43200 100644
--- a/frontend/sequences/step_tiles/tile_mark_as/__tests__/field_warning_test.tsx
+++ b/frontend/sequences/step_tiles/tile_mark_as/__tests__/field_warning_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { CustomFieldWarning } from "../field_warning";
 import { CustomFieldWarningProps } from "../interfaces";
diff --git a/frontend/sequences/step_tiles/tile_mark_as/component.tsx b/frontend/sequences/step_tiles/tile_mark_as/component.tsx
index b0d0176248..8faf79179d 100644
--- a/frontend/sequences/step_tiles/tile_mark_as/component.tsx
+++ b/frontend/sequences/step_tiles/tile_mark_as/component.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { editStep } from "../../../api/crud";
-import { Row, Col } from "../../../ui";
+import { Row } from "../../../ui";
 import { StepWrapper } from "../../step_ui";
 import { ToolTips } from "../../../constants";
 import { UpdateResource, Resource, Identifier } from "farmbot";
@@ -99,34 +99,28 @@ export class MarkAs
       className={"update-resource-step"}
       helpText={ToolTips.MARK_AS}>
       <Row>
-        <Col>
-          <ResourceSelection {...commonProps}
-            sequenceUuid={this.props.currentSequence.uuid}
-            updateResource={this.updateResource} />
-        </Col>
+        <ResourceSelection {...commonProps}
+          sequenceUuid={this.props.currentSequence.uuid}
+          updateResource={this.updateResource} />
       </Row>
       {this.state.fieldsAndValues.map((fieldAndValue, index) => {
         const isPlantedAtRow = index > 0
           && fieldAndValue.field == "planted_at"
           && fieldAndValue.value == UPDATE_RESOURCE_DDIS().NOW.value;
         return <Row key={index}>
-          <div className={`update-resource-pair ${index == 0 ? "first" : ""}`}>
-            <Col xs={6}>
-              <FieldSelection {...commonProps}
-                field={fieldAndValue.field}
-                disabled={isPlantedAtRow}
-                update={this.updateFieldOrValue(index)} />
-            </Col>
-            <Col xs={6}>
-              <ValueSelection {...commonProps}
-                field={fieldAndValue.field}
-                value={fieldAndValue.value}
-                update={this.updateFieldOrValue(index)}
-                add={this.updateFieldOrValue(
-                  this.state.fieldsAndValues.length)}
-                disabled={isPlantedAtRow}
-                commitSelection={this.commitSelection} />
-            </Col>
+          <div className={`update-resource-pair grid ${index == 0 ? "first" : ""}`}>
+            <FieldSelection {...commonProps}
+              field={fieldAndValue.field}
+              disabled={isPlantedAtRow}
+              update={this.updateFieldOrValue(index)} />
+            <ValueSelection {...commonProps}
+              field={fieldAndValue.field}
+              value={fieldAndValue.value}
+              update={this.updateFieldOrValue(index)}
+              add={this.updateFieldOrValue(
+                this.state.fieldsAndValues.length)}
+              disabled={isPlantedAtRow}
+              commitSelection={this.commitSelection} />
             <CustomFieldWarning
               resource={this.state.resource}
               field={fieldAndValue.field}
diff --git a/frontend/sequences/step_tiles/tile_mark_as/field_selection.tsx b/frontend/sequences/step_tiles/tile_mark_as/field_selection.tsx
index 4efe1005eb..c4a5c63803 100644
--- a/frontend/sequences/step_tiles/tile_mark_as/field_selection.tsx
+++ b/frontend/sequences/step_tiles/tile_mark_as/field_selection.tsx
@@ -8,7 +8,7 @@ import {
 } from "./interfaces";
 
 export const FieldSelection = (props: FieldSelectionProps) =>
-  <div className={"update-resource-step-field"}>
+  <div className={"row grid-2-col"}>
     <label>{t("property")}</label>
     {(isCustomMetaField(props.field) && !isUndefined(props.field))
       ? <CustomMetaField {...props} field={props.field} />
diff --git a/frontend/sequences/step_tiles/tile_mark_as/field_warning.tsx b/frontend/sequences/step_tiles/tile_mark_as/field_warning.tsx
index ffd38f1204..8714802426 100644
--- a/frontend/sequences/step_tiles/tile_mark_as/field_warning.tsx
+++ b/frontend/sequences/step_tiles/tile_mark_as/field_warning.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { t } from "../../../i18next_wrapper";
 import {
   PlantPointer, ToolSlotPointer, WeedPointer, GenericPointer,
diff --git a/frontend/sequences/step_tiles/tile_mark_as/resource_selection.tsx b/frontend/sequences/step_tiles/tile_mark_as/resource_selection.tsx
index 1cec825b49..38322fdefc 100644
--- a/frontend/sequences/step_tiles/tile_mark_as/resource_selection.tsx
+++ b/frontend/sequences/step_tiles/tile_mark_as/resource_selection.tsx
@@ -27,7 +27,7 @@ import {
 export const ResourceSelection = (props: ResourceSelectionProps) => {
   const selected = getSelectedResource(
     props.resource, props.resources, props.sequenceUuid);
-  return <div className={"update-resource-step-resource"}>
+  return <div className={"row grid-2-col"}>
     <label>{t("Mark")}</label>
     <FBSelect
       key={selected.value}
diff --git a/frontend/sequences/step_tiles/tile_mark_as/value_selection.tsx b/frontend/sequences/step_tiles/tile_mark_as/value_selection.tsx
index 8622ec0b7d..4a424ae514 100644
--- a/frontend/sequences/step_tiles/tile_mark_as/value_selection.tsx
+++ b/frontend/sequences/step_tiles/tile_mark_as/value_selection.tsx
@@ -18,7 +18,7 @@ import {
 import { DevSettings } from "../../../settings/dev/dev_support";
 
 export const ValueSelection = (props: ValueSelectionProps) =>
-  <div className={"update-resource-step-value"}>
+  <div className={"row grid-2-col"}>
     <label onClick={() => DevSettings.futureFeaturesEnabled() && props.add({})}>
       {t("as")}
     </label>
diff --git a/frontend/sequences/step_tiles/tile_move_absolute.tsx b/frontend/sequences/step_tiles/tile_move_absolute.tsx
index aa8b377b58..0d12e70b0f 100644
--- a/frontend/sequences/step_tiles/tile_move_absolute.tsx
+++ b/frontend/sequences/step_tiles/tile_move_absolute.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { StepParams, MoveAbsState } from "../interfaces";
 import { MoveAbsolute, Vector3, ParameterApplication, Xyz } from "farmbot";
-import { Row, Col, BlurableInput } from "../../ui";
+import { Row, BlurableInput } from "../../ui";
 import { defensiveClone, betterMerge } from "../../util";
 import { overwrite } from "../../api/crud";
 import { ToolTips } from "../../constants";
@@ -108,7 +108,7 @@ export class TileMoveAbsolute
       variableType={VariableType.Location} />;
 
   SpeedInput = () =>
-    <Col xs={3}>
+    <div>
       <label>
         {t("Speed (%)")}
       </label>
@@ -118,10 +118,10 @@ export class TileMoveAbsolute
         index={this.props.index}
         dispatch={this.props.dispatch}
         sequence={this.props.currentSequence} />
-    </Col>;
+    </div>;
 
   OffsetInput = (axis: Xyz) =>
-    <Col xs={3} key={axis}>
+    <div key={axis}>
       <label>
         {t("{{axis}}-Offset", { axis })}
       </label>
@@ -130,10 +130,10 @@ export class TileMoveAbsolute
         onCommit={this.updateInputValue(axis, "offset")}
         name={`offset-${axis}`}
         value={(this.args.offset.args[axis] || 0).toString()} />
-    </Col>;
+    </div>;
 
   OptionsForm = () =>
-    <Row>
+    <Row className="grid-4-col">
       {["x", "y", "z"].map(this.OffsetInput)}
       <this.SpeedInput />
     </Row>;
diff --git a/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx b/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx
index e3fdd8be2e..db5f89feb3 100644
--- a/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx
+++ b/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx
@@ -71,7 +71,7 @@ const settingConflicts = (
 };
 
 export const MoveAbsoluteWarning =
-  (props: MoveAbsoluteWarningProps): JSX.Element => {
+  (props: MoveAbsoluteWarningProps): React.ReactNode => {
 
     const conflicts = settingConflicts(props.coordinate, props.hardwareFlags);
 
diff --git a/frontend/sequences/step_tiles/tile_move_home.tsx b/frontend/sequences/step_tiles/tile_move_home.tsx
index d4ebe1d9f2..6255b1e10a 100644
--- a/frontend/sequences/step_tiles/tile_move_home.tsx
+++ b/frontend/sequences/step_tiles/tile_move_home.tsx
@@ -4,7 +4,7 @@ import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
 import { AxisStepRadio } from "../step_ui/step_radio";
 import { StepInputBox } from "../inputs/step_input_box";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { Home } from "farmbot";
 
@@ -18,13 +18,11 @@ export const TileMoveHome = (props: StepParams<Home>) =>
       dispatch={props.dispatch}
       index={props.index} />
     <Row>
-      <Col xs={12}>
-        <label>{t("Speed")}</label>
-        <StepInputBox field={"speed"}
-          dispatch={props.dispatch}
-          step={props.currentStep}
-          sequence={props.currentSequence}
-          index={props.index} />
-      </Col>
+      <label>{t("Speed")}</label>
+      <StepInputBox field={"speed"}
+        dispatch={props.dispatch}
+        step={props.currentStep}
+        sequence={props.currentSequence}
+        index={props.index} />
     </Row>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_move_relative.tsx b/frontend/sequences/step_tiles/tile_move_relative.tsx
index 6e9a1d3520..34b12b05e9 100644
--- a/frontend/sequences/step_tiles/tile_move_relative.tsx
+++ b/frontend/sequences/step_tiles/tile_move_relative.tsx
@@ -3,7 +3,7 @@ import { StepInputBox } from "../inputs/step_input_box";
 import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export const TileMoveRelative = (props: StepParams) => {
@@ -11,39 +11,39 @@ export const TileMoveRelative = (props: StepParams) => {
   return <StepWrapper {...props}
     className={"move-relative-step"}
     helpText={ToolTips.MOVE_RELATIVE}>
-    <Row>
-      <Col xs={6} md={3}>
+    <Row className="grid-4-col">
+      <div>
         <label>{t("X (mm)")}</label>
         <StepInputBox dispatch={dispatch}
           step={currentStep}
           sequence={currentSequence}
           index={index}
           field="x" />
-      </Col>
-      <Col xs={6} md={3}>
+      </div>
+      <div>
         <label>{t("Y (mm)")}</label>
         <StepInputBox dispatch={dispatch}
           step={currentStep}
           sequence={currentSequence}
           index={index}
           field="y" />
-      </Col>
-      <Col xs={6} md={3}>
+      </div>
+      <div>
         <label>{t("Z (mm)")}</label>
         <StepInputBox dispatch={dispatch}
           step={currentStep}
           sequence={currentSequence}
           index={index}
           field="z" />
-      </Col>
-      <Col xs={6} md={3}>
+      </div>
+      <div>
         <label>{t("Speed (%)")}</label>
         <StepInputBox dispatch={dispatch}
           step={currentStep}
           sequence={currentSequence}
           index={index}
           field="speed" />
-      </Col>
+      </div>
     </Row>
   </StepWrapper>;
 };
diff --git a/frontend/sequences/step_tiles/tile_read_pin.tsx b/frontend/sequences/step_tiles/tile_read_pin.tsx
index 89ad4d1554..b34b9fc803 100644
--- a/frontend/sequences/step_tiles/tile_read_pin.tsx
+++ b/frontend/sequences/step_tiles/tile_read_pin.tsx
@@ -3,7 +3,6 @@ import { StepInputBox } from "../inputs/step_input_box";
 import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Row, Col } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { PinModeDropdown, PinSelect } from "./pin_support";
 import { ReadPin } from "farmbot";
@@ -12,18 +11,18 @@ export const TileReadPin = (props: StepParams<ReadPin>) =>
   <StepWrapper {...props}
     className={"read-pin-step"}
     helpText={ToolTips.READ_PIN}>
-    <Row>
+    <div className="grid">
       <PinSelect {...props}
         label={t("sensor or peripheral")}
         placeholder={t("Select a sensor")} />
       <PinModeDropdown {...props} />
-      <Col xs={6} md={3}>
+      <div className="row grid-2-col">
         <label>{t("Data Label")}</label>
         <StepInputBox field={"label"}
           dispatch={props.dispatch}
           index={props.index}
           step={props.currentStep}
           sequence={props.currentSequence} />
-      </Col>
-    </Row>
+      </div>
+    </div>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_reboot.tsx b/frontend/sequences/step_tiles/tile_reboot.tsx
index 77d2815941..b996204f54 100644
--- a/frontend/sequences/step_tiles/tile_reboot.tsx
+++ b/frontend/sequences/step_tiles/tile_reboot.tsx
@@ -36,9 +36,6 @@ export const TileReboot = (props: StepParams<Reboot>) =>
   <StepWrapper {...props}
     className={"reboot-step"}
     helpText={Content.RESTART_FARMBOT}>
-    <p>
-      {t(Content.REBOOT_STEP)}
-    </p>
     {DevSettings.futureFeaturesEnabled() &&
       <StepRadio
         choices={Object.keys(PACKAGE_CHOICES()) as ALLOWED_PACKAGES[]}
diff --git a/frontend/sequences/step_tiles/tile_send_message.tsx b/frontend/sequences/step_tiles/tile_send_message.tsx
index 6085809d85..3465ab697f 100644
--- a/frontend/sequences/step_tiles/tile_send_message.tsx
+++ b/frontend/sequences/step_tiles/tile_send_message.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FBSelect, DropDownItem, Row, Col } from "../../ui";
+import { FBSelect, DropDownItem } from "../../ui";
 import { StepInputBox } from "../inputs/step_input_box";
 import { SendMessage } from "farmbot";
 import { ChannelName, isMessageType, StepParams } from "../interfaces";
@@ -73,43 +73,45 @@ export class TileSendMessage
     return <StepWrapper {...this.props}
       className={"send-message-step"}
       helpText={t(ToolTips.SEND_MESSAGE)}>
-      <Row>
-        <Col xs={12}>
-          <label>{t("Message")}</label>
-          <InputLengthIndicator field={"message"}
-            value={this.state.message} />
+      <div className="grid">
+        <div className="grid half-gap">
+          <div className="row grid-exp-1">
+            <label>{t("Message")}</label>
+            <InputLengthIndicator field={"message"}
+              value={this.state.message} />
+          </div>
           <StepInputBox dispatch={dispatch}
             step={currentStep}
             sequence={currentSequence}
             index={index}
             keyCallback={this.updateMessage}
             field="message" />
-          <div className="bottom-content">
-            <div className="channel-options">
-              <label>{t("type")}</label>
-              <FBSelect
-                onChange={this.setMsgType}
-                selectedItem={this.currentSelection}
-                list={MESSAGE_STATUSES()} />
-            </div>
-            <div className="channel-fields">
-              {EACH_CHANNEL().map((chan, inx) => {
-                return <fieldset key={inx}>
-                  <label htmlFor={chan.name}>
-                    {chan.label}
-                  </label>
-                  <input type="checkbox" name={chan.name}
-                    id={chan.name}
-                    onChange={this.toggle(chan.name)}
-                    checked={
-                      this.hasChannel(chan.name) || chan.alwaysOn}
-                    disabled={chan.alwaysOn} />
-                </fieldset>;
-              })}
-            </div>
+        </div>
+        <div className="row align-baseline">
+          <div className="grid half-gap">
+            <label>{t("type")}</label>
+            <FBSelect
+              onChange={this.setMsgType}
+              selectedItem={this.currentSelection}
+              list={MESSAGE_STATUSES()} />
+          </div>
+          <div>
+            {EACH_CHANNEL().map((chan, inx) => {
+              return <fieldset key={inx}>
+                <label htmlFor={chan.name}>
+                  {chan.label}
+                </label>
+                <input type="checkbox" name={chan.name}
+                  id={chan.name}
+                  onChange={this.toggle(chan.name)}
+                  checked={
+                    this.hasChannel(chan.name) || chan.alwaysOn}
+                  disabled={chan.alwaysOn} />
+              </fieldset>;
+            })}
           </div>
-        </Col>
-      </Row>
+        </div>
+      </div>
     </StepWrapper>;
   }
 }
diff --git a/frontend/sequences/step_tiles/tile_set_servo_angle.tsx b/frontend/sequences/step_tiles/tile_set_servo_angle.tsx
index f88a4c8da1..d3be971a18 100644
--- a/frontend/sequences/step_tiles/tile_set_servo_angle.tsx
+++ b/frontend/sequences/step_tiles/tile_set_servo_angle.tsx
@@ -3,7 +3,6 @@ import { StepInputBox } from "../inputs/step_input_box";
 import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Row, Col } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { SetServoAngle, TaggedSequence } from "farmbot";
 import { editStep } from "../../api/crud";
@@ -52,8 +51,12 @@ export const TileSetServoAngle = (props: StepParams<SetServoAngle>) =>
   <StepWrapper {...props}
     className={"set-servo-angle-step"}
     helpText={ToolTips.SET_SERVO_ANGLE}>
-    <Row>
-      <Col lg={4} xs={6}>
+    <div className="grid">
+      <div className="row grid-2-col">
+        <label>{t("Servo pin")}</label>
+        <ServoPinSelection {...props} />
+      </div>
+      <div className="row grid-2-col">
         <label>
           {t("Angle (0-180)")}
         </label>
@@ -63,10 +66,6 @@ export const TileSetServoAngle = (props: StepParams<SetServoAngle>) =>
           step={props.currentStep}
           sequence={props.currentSequence}
           index={props.index} />
-      </Col>
-      <Col lg={8} xs={6}>
-        <label>{t("Servo pin")}</label>
-        <ServoPinSelection {...props} />
-      </Col>
-    </Row>
+      </div>
+    </div>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_take_photo.tsx b/frontend/sequences/step_tiles/tile_take_photo.tsx
index 3e76a3ea17..5b2bcb57ab 100644
--- a/frontend/sequences/step_tiles/tile_take_photo.tsx
+++ b/frontend/sequences/step_tiles/tile_take_photo.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StepParams } from "../interfaces";
 import { ToolTips, Content } from "../../constants";
 import { StepWrapper, StepWarning } from "../step_ui";
-import { Col, Row } from "../../ui";
+import { Row } from "../../ui";
 import { Link } from "../../link";
 import { t } from "../../i18next_wrapper";
 import { Path } from "../../internal_urls";
@@ -17,13 +17,11 @@ export const TileTakePhoto = (props: StepParams) =>
         titleBase={t(Content.NO_CAMERA_SELECTED)}
         warning={t(ToolTips.SELECT_A_CAMERA)} />}>
     <Row>
-      <Col xs={12}>
-        <p>
-          {`${t("Photos are viewable from the")} `}
-          <Link to={Path.photos()}>
-            {t("photos panel")}
-          </Link>.
-        </p>
-      </Col>
+      <p>
+        {`${t("Photos are viewable from the")} `}
+        <Link to={Path.photos()}>
+          {t("photos panel")}
+        </Link>.
+      </p>
     </Row>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_unknown.tsx b/frontend/sequences/step_tiles/tile_unknown.tsx
index 804f7f74cb..6e8b108fc7 100644
--- a/frontend/sequences/step_tiles/tile_unknown.tsx
+++ b/frontend/sequences/step_tiles/tile_unknown.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Col, Row } from "../../ui";
+import { Row } from "../../ui";
 import { StepInputBox } from "../inputs/step_input_box";
 import { LegalArgString } from "farmbot";
 import { t } from "../../i18next_wrapper";
@@ -12,19 +12,17 @@ export const TileUnknown = (props: StepParams) =>
     className={"unknown-step"}
     helpText={ToolTips.UNKNOWN_STEP}>
     <Row>
-      <Col xs={12}>
-        <p>{t(ToolTips.UNKNOWN_STEP)}</p>
-        <code>{JSON.stringify(props.currentStep)}</code>
-        {Object.keys(props.currentStep.args).sort().map(arg =>
-          <div key={arg}>
-            <label>{arg}</label>
-            <StepInputBox field={arg as LegalArgString}
-              dispatch={props.dispatch}
-              step={props.currentStep}
-              sequence={props.currentSequence}
-              index={props.index}
-              fieldOverride={true} />
-          </div>)}
-      </Col>
+      <p>{t(ToolTips.UNKNOWN_STEP)}</p>
+      <code>{JSON.stringify(props.currentStep)}</code>
+      {Object.keys(props.currentStep.args).sort().map(arg =>
+        <div key={arg}>
+          <label>{arg}</label>
+          <StepInputBox field={arg as LegalArgString}
+            dispatch={props.dispatch}
+            step={props.currentStep}
+            sequence={props.currentSequence}
+            index={props.index}
+            fieldOverride={true} />
+        </div>)}
     </Row>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_wait.tsx b/frontend/sequences/step_tiles/tile_wait.tsx
index 866b8743e7..57c96e32bb 100644
--- a/frontend/sequences/step_tiles/tile_wait.tsx
+++ b/frontend/sequences/step_tiles/tile_wait.tsx
@@ -3,21 +3,18 @@ import { StepInputBox } from "../inputs/step_input_box";
 import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper } from "../step_ui";
-import { Row, Col } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export const TileWait = (props: StepParams) =>
   <StepWrapper {...props}
     className={"wait-step"}
     helpText={ToolTips.WAIT}>
-    <Row>
-      <Col xs={6}>
-        <label>{t("Time in milliseconds")}</label>
-        <StepInputBox field={"milliseconds"}
-          dispatch={props.dispatch}
-          step={props.currentStep}
-          sequence={props.currentSequence}
-          index={props.index} />
-      </Col>
-    </Row>
+    <div className="row grid-2-col">
+      <label>{t("Time in milliseconds")}</label>
+      <StepInputBox field={"milliseconds"}
+        dispatch={props.dispatch}
+        step={props.currentStep}
+        sequence={props.currentSequence}
+        index={props.index} />
+    </div>
   </StepWrapper>;
diff --git a/frontend/sequences/step_tiles/tile_write_pin.tsx b/frontend/sequences/step_tiles/tile_write_pin.tsx
index 632979f9e7..992ff38a2b 100644
--- a/frontend/sequences/step_tiles/tile_write_pin.tsx
+++ b/frontend/sequences/step_tiles/tile_write_pin.tsx
@@ -3,16 +3,15 @@ import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { PinSelect, PinModeDropdown, PinValueField } from "./pin_support";
 import { StepWrapper } from "../step_ui";
-import { Row } from "../../ui";
 import { WritePin } from "farmbot";
 
 export const TileWritePin = (props: StepParams<WritePin>) =>
   <StepWrapper {...props}
     className={"write-pin-step"}
     helpText={ToolTips.WRITE_PIN}>
-    <Row>
+    <div className="grid">
       <PinSelect {...props} />
       <PinModeDropdown {...props} />
       <PinValueField {...props} />
-    </Row>
+    </div>
   </StepWrapper>;
diff --git a/frontend/sequences/step_ui/__tests__/step_header_test.tsx b/frontend/sequences/step_ui/__tests__/step_header_test.tsx
index 3e6e377624..11d51855da 100644
--- a/frontend/sequences/step_ui/__tests__/step_header_test.tsx
+++ b/frontend/sequences/step_ui/__tests__/step_header_test.tsx
@@ -35,7 +35,7 @@ describe("<StepHeader />", () => {
 
   it("renders", () => {
     const wrapper = mount(<StepHeader {...fakeProps()} />);
-    const div = wrapper.find("div").at(2);
+    const div = wrapper.find("div").at(1);
     expect(div.hasClass("step-header")).toBeTruthy();
     expect(div.hasClass("step-class")).toBeTruthy();
   });
diff --git a/frontend/sequences/step_ui/__tests__/step_icon_group_test.tsx b/frontend/sequences/step_ui/__tests__/step_icon_group_test.tsx
index 7179a9b23c..1822beb90c 100644
--- a/frontend/sequences/step_ui/__tests__/step_icon_group_test.tsx
+++ b/frontend/sequences/step_ui/__tests__/step_icon_group_test.tsx
@@ -9,7 +9,6 @@ import { mount, shallow } from "enzyme";
 import { StepIconGroup, StepIconBarProps } from "../step_icon_group";
 import { fakeSequence } from "../../../__test_support__/fake_state/resources";
 import { splice, remove, move } from "../../step_tiles";
-import { push } from "../../../history";
 import { Path } from "../../../internal_urls";
 import { emptyState } from "../../../resources/reducer";
 import { StateToggleKey } from "../step_wrapper";
@@ -131,6 +130,6 @@ describe("<StepIconGroup />", () => {
     p.executeSequenceName = "My Sequence";
     const wrapper = mount(<StepIconGroup {...p} />);
     wrapper.find(".fa-external-link").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.sequences("My_Sequence"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.sequences("My_Sequence"));
   });
 });
diff --git a/frontend/sequences/step_ui/step_header.tsx b/frontend/sequences/step_ui/step_header.tsx
index 5b0bc15649..fd2628dd6d 100644
--- a/frontend/sequences/step_ui/step_header.tsx
+++ b/frontend/sequences/step_ui/step_header.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { TaggedSequence, SequenceBodyItem, Lua } from "farmbot";
 import { StepTitleBar } from "../step_tiles/step_title_bar";
 import { StepIconGroup } from "./step_icon_group";
@@ -83,7 +83,7 @@ export class StepHeader
     } = this.state;
     const aiPrompt = promptText || PLACEHOLDER_PROMPTS[placeholderIndex];
     const key = `lua_code_${this.props.index}`;
-    return <div className={"prompt-wrapper"}>
+    return <div className={"prompt-wrapper grid"}>
       <textarea className={"prompt"}
         onMouseEnter={this.toggle("enter")}
         onMouseLeave={this.toggle("leave")}
@@ -91,9 +91,9 @@ export class StepHeader
         placeholder={PLACEHOLDER_PROMPTS[placeholderIndex]}
         onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
           this.setState({ promptText: e.currentTarget.value })} />
-      <div className={"generate-code"}>
+      <div className={"row grid-exp-1"}>
         <p>{t("Always review and test auto-generated code")}</p>
-        <div className={"feedback"} style={{
+        <div className={"row"} style={{
           opacity: showFeedback ? 1 : 0,
           pointerEvents: showFeedback ? "unset" : "none",
         }}>
@@ -157,40 +157,38 @@ export class StepHeader
       executeSequence,
     } = this.props;
     return <Row>
-      <Col sm={12}>
-        <div className={`step-header ${className} ${executeSequence?.color}`}
-          draggable={this.state.draggable}>
-          <div className={"step-header-flex"}>
-            <StepTitleBar
-              index={index}
-              dispatch={dispatch}
-              readOnly={readOnly}
-              step={currentStep}
-              sequence={currentSequence}
-              pinnedSequenceName={executeSequence?.name}
-              toggleDraggable={this.toggle} />
-            {this.props.children}
-            <StepIconGroup
-              index={index}
-              dispatch={dispatch}
-              readOnly={readOnly}
-              step={currentStep}
-              sequence={currentSequence}
-              executeSequenceName={executeSequence?.name}
-              helpText={t(this.props.helpText)}
-              enableMarkdown={this.props.enableMarkdown}
-              links={this.props.links}
-              viewRaw={this.props.viewRaw}
-              toggleViewRaw={this.props.toggleViewRaw}
-              stateToggles={this.props.stateToggles}
-              isProcessing={this.state.isProcessing}
-              togglePrompt={this.togglePrompt}
-              sequencesState={this.props.sequencesState}
-              confirmStepDeletion={this.props.confirmStepDeletion} />
-          </div>
-          {this.state.promptOpen && <this.AutoLuaPrompt />}
+      <div className={`step-header ${className} ${executeSequence?.color}`}
+        draggable={this.state.draggable}>
+        <div className={"step-header-flex"}>
+          <StepTitleBar
+            index={index}
+            dispatch={dispatch}
+            readOnly={readOnly}
+            step={currentStep}
+            sequence={currentSequence}
+            pinnedSequenceName={executeSequence?.name}
+            toggleDraggable={this.toggle} />
+          {this.props.children}
+          <StepIconGroup
+            index={index}
+            dispatch={dispatch}
+            readOnly={readOnly}
+            step={currentStep}
+            sequence={currentSequence}
+            executeSequenceName={executeSequence?.name}
+            helpText={t(this.props.helpText)}
+            enableMarkdown={this.props.enableMarkdown}
+            links={this.props.links}
+            viewRaw={this.props.viewRaw}
+            toggleViewRaw={this.props.toggleViewRaw}
+            stateToggles={this.props.stateToggles}
+            isProcessing={this.state.isProcessing}
+            togglePrompt={this.togglePrompt}
+            sequencesState={this.props.sequencesState}
+            confirmStepDeletion={this.props.confirmStepDeletion} />
         </div>
-      </Col>
+        {this.state.promptOpen && <this.AutoLuaPrompt />}
+      </div>
     </Row>;
   }
 }
diff --git a/frontend/sequences/step_ui/step_icon_group.tsx b/frontend/sequences/step_ui/step_icon_group.tsx
index 36bb88e14a..1bcc22d561 100644
--- a/frontend/sequences/step_ui/step_icon_group.tsx
+++ b/frontend/sequences/step_ui/step_icon_group.tsx
@@ -3,7 +3,7 @@ import { Help } from "../../ui/help";
 import { Position } from "@blueprintjs/core";
 import { SequenceBodyItem, TaggedSequence } from "farmbot";
 import { splice, remove, move } from "../step_tiles";
-import { push } from "../../history";
+import { useNavigate } from "react-router";
 import { urlFriendly } from "../../util";
 import { setActiveSequenceByName } from "../set_active_sequence_by_name";
 import { t } from "../../i18next_wrapper";
@@ -56,8 +56,9 @@ export function StepIconGroup(props: StepIconBarProps) {
     const to = Math.max(index + delta, 0);
     dispatch(move({ step, sequence, from: index, to }));
   };
+  const navigate = useNavigate();
   const onSequenceLinkNav = (sequenceName: string) => () => {
-    push(Path.sequences(urlFriendly(sequenceName)));
+    navigate(Path.sequences(urlFriendly(sequenceName)));
     setActiveSequenceByName();
   };
   const monaco = props.stateToggles?.[StateToggleKey.monacoEditor];
diff --git a/frontend/sequences/step_ui/step_radio.tsx b/frontend/sequences/step_ui/step_radio.tsx
index 94e17a5790..3a68f9f0b3 100644
--- a/frontend/sequences/step_ui/step_radio.tsx
+++ b/frontend/sequences/step_ui/step_radio.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import {
   TaggedSequence, ALLOWED_AXIS, FindHome, Home, Calibrate, Zero,
@@ -15,22 +15,16 @@ export interface StepRadioProps<T extends string> {
 
 export const StepRadio = <T extends string>(props: StepRadioProps<T>) =>
   <Row>
-    <Col xs={12}>
-      <div className={"bottom-content"}>
-        <div className={"channel-fields"}>
-          <form>
-            {props.choices.map((choice, i) =>
-              <div className={"options"} key={i}>
-                <input type={"radio"} name={choice}
-                  value={choice}
-                  onChange={() => props.onChange(choice)}
-                  checked={props.currentChoice === choice} />
-                <label>{t(props.choiceLabelLookup[choice])}</label>
-              </div>)}
-          </form>
-        </div>
-      </div>
-    </Col>
+    <form className="row sequence-step-radio-grid double-gap">
+      {props.choices.map((choice, i) =>
+        <div className={"row half-gap grid-exp-2"} key={i}>
+          <input type={"radio"} name={choice}
+            value={choice}
+            onChange={() => props.onChange(choice)}
+            checked={props.currentChoice === choice} />
+          <label>{t(props.choiceLabelLookup[choice])}</label>
+        </div>)}
+    </form>
   </Row>;
 
 type AxisStep = FindHome | Home | Calibrate | Zero;
diff --git a/frontend/sequences/step_ui/step_wrapper.tsx b/frontend/sequences/step_ui/step_wrapper.tsx
index daf8faa2ef..158a3c0930 100644
--- a/frontend/sequences/step_ui/step_wrapper.tsx
+++ b/frontend/sequences/step_ui/step_wrapper.tsx
@@ -3,7 +3,7 @@ import { ErrorBoundary } from "../../error_boundary";
 import { TaggedSequence, SequenceBodyItem } from "farmbot";
 import { SequenceReducerState, StepState } from "../interfaces";
 import { stringifySequenceData } from "../step_tiles";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { StepHeader } from "./step_header";
 import { getWebAppConfigValueFromResources } from "../../config_storage/actions";
 import { ResourceIndex } from "../../resources/interfaces";
@@ -90,17 +90,17 @@ export class StepWrapper extends React.Component<StepWrapperProps, StepState> {
         {this.props.warning}
       </StepHeader>
       {this.viewRaw
-        ? <pre>{stringifySequenceData(this.props.currentStep)}</pre>
+        ? <pre className="celeryscript">
+          {stringifySequenceData(this.props.currentStep)}
+        </pre>
         : <Row>
-          <Col sm={12}>
-            <div className={[
-              "step-content", this.props.className, executeSequence?.color,
-            ].join(" ")}>
-              <ErrorBoundary key={this.state.updateKey}>
-                {this.props.children}
-              </ErrorBoundary>
-            </div>
-          </Col>
+          <div className={[
+            "step-content", this.props.className, executeSequence?.color,
+          ].join(" ")}>
+            <ErrorBoundary key={this.state.updateKey}>
+              {this.props.children}
+            </ErrorBoundary>
+          </div>
         </Row>}
     </div>;
   }
diff --git a/frontend/session_keys.ts b/frontend/session_keys.ts
index ad503516bc..b0a683b422 100644
--- a/frontend/session_keys.ts
+++ b/frontend/session_keys.ts
@@ -4,7 +4,9 @@ import {
   StringConfigKey as WebAppStringConfigKey,
 } from "farmbot/dist/resources/configs/web_app";
 
-type WebAppBooleanConfigKeyAll = WebAppBooleanConfigKey | "three_d_garden";
+type WebAppBooleanConfigKeyAll = WebAppBooleanConfigKey
+  | "three_d_garden"
+  | "dark_mode";
 type WebAppNumberConfigKeyAll = WebAppNumberConfigKey;
 type WebAppStringConfigKeyAll = WebAppStringConfigKey;
 
@@ -70,6 +72,7 @@ export const BooleanSetting: BooleanSettings = {
   time_format_seconds: "time_format_seconds",
   disable_emergency_unlock_confirmation: "disable_emergency_unlock_confirmation",
   user_interface_read_only_mode: "user_interface_read_only_mode",
+  dark_mode: "dark_mode" as WebAppBooleanConfigKey,
 
   /** Farmware settings */
   show_first_party_farmware: "show_first_party_farmware",
diff --git a/frontend/settings/__tests__/index_test.tsx b/frontend/settings/__tests__/index_test.tsx
index 4396148495..129ad925e3 100644
--- a/frontend/settings/__tests__/index_test.tsx
+++ b/frontend/settings/__tests__/index_test.tsx
@@ -6,7 +6,7 @@ jest.mock("../../config_storage/actions", () => ({
 let mockHighlightName = "";
 jest.mock("../../settings/maybe_highlight", () => ({
   maybeOpenPanel: jest.fn(),
-  Highlight: (p: { children: React.ReactChild }) => <div>{p.children}</div>,
+  Highlight: (p: { children: React.ReactNode }) => <div>{p.children}</div>,
   getHighlightName: jest.fn(() => mockHighlightName),
 }));
 
@@ -36,7 +36,6 @@ import {
   fakeUser, fakeWebAppConfig,
 } from "../../__test_support__/fake_state/resources";
 import { API } from "../../api";
-import { push } from "../../history";
 
 const getSetting =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -69,6 +68,7 @@ describe("<DesignerSettings />", () => {
     farmwareEnvs: [],
     wizardStepResults: [],
     settingsPanelState: fakePanelState,
+    distanceIndicator: "",
   });
 
   it("renders settings", () => {
@@ -118,7 +118,9 @@ describe("<DesignerSettings />", () => {
     location.search = "?search=search";
     location.pathname = "path";
     const p = fakeProps();
-    const wrapper = shallow(<DesignerSettings {...p} />);
+    const wrapper = shallow<DesignerSettings>(<DesignerSettings {...p} />);
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
     wrapper.find(SearchField).simulate("change", "setting");
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.BULK_TOGGLE_SETTINGS_PANEL,
@@ -128,7 +130,7 @@ describe("<DesignerSettings />", () => {
       type: Actions.SET_SETTINGS_SEARCH_TERM,
       payload: "setting",
     });
-    expect(push).toHaveBeenCalledWith("path");
+    expect(navigate).toHaveBeenCalledWith("path");
   });
 
   it("fetches firmware_hardware", () => {
@@ -221,6 +223,13 @@ describe("<DesignerSettings />", () => {
     expect(wrapper.text().toLowerCase()).toContain("interpolation");
   });
 
+  it("renders 3D settings", () => {
+    const p = fakeProps();
+    p.searchTerm = "3d";
+    const wrapper = mount(<DesignerSettings {...p} />);
+    expect(wrapper.text().toLowerCase()).toContain("3d");
+  });
+
   it("renders dev settings", () => {
     const p = fakeProps();
     p.searchTerm = "developer";
diff --git a/frontend/settings/__tests__/maybe_highlight_test.tsx b/frontend/settings/__tests__/maybe_highlight_test.tsx
index 663c94b240..663b0c1511 100644
--- a/frontend/settings/__tests__/maybe_highlight_test.tsx
+++ b/frontend/settings/__tests__/maybe_highlight_test.tsx
@@ -13,12 +13,11 @@ import React from "react";
 import { mount, shallow } from "enzyme";
 import {
   Highlight, HighlightProps, maybeHighlight, maybeOpenPanel, highlight,
-  goToFbosSettings,
 } from "../maybe_highlight";
 import { Actions, DeviceSetting } from "../../constants";
 import { toggleControlPanel, bulkToggleControlPanel } from "../toggle_section";
-import { push } from "../../history";
 import { Path } from "../../internal_urls";
+import { mountWithContext } from "../../__test_support__/mount_with_context";
 
 describe("<Highlight />", () => {
   const fakeProps = (): HighlightProps => ({
@@ -122,9 +121,9 @@ describe("<Highlight />", () => {
   });
 
   it("adds anchor link to url bar", () => {
-    const wrapper = mount(<Highlight {...fakeProps()} />);
+    const wrapper = mountWithContext(<Highlight {...fakeProps()} />);
     wrapper.find("i").last().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.settings("motors"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.settings("motors"));
   });
 
   it("doesn't show anchor for non-setting sections", () => {
@@ -217,11 +216,3 @@ describe("maybeOpenPanel()", () => {
     });
   });
 });
-
-describe("goToFbosSettings()", () => {
-  it("renders correct path", () => {
-    goToFbosSettings();
-    expect(push).toHaveBeenCalledWith(
-      Path.settings("farmbot_os"));
-  });
-});
diff --git a/frontend/settings/__tests__/other_settings_test.tsx b/frontend/settings/__tests__/other_settings_test.tsx
index 03cdf67902..d01fd21544 100644
--- a/frontend/settings/__tests__/other_settings_test.tsx
+++ b/frontend/settings/__tests__/other_settings_test.tsx
@@ -6,7 +6,7 @@ jest.mock("../../devices/actions", () => ({
   updateConfig: jest.fn(),
 }));
 
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import {
   LogLevelSetting, LogLevelSettingProps, LogEnableSettingProps,
diff --git a/frontend/settings/__tests__/three_d_settings_test.tsx b/frontend/settings/__tests__/three_d_settings_test.tsx
new file mode 100644
index 0000000000..2a28a92ffc
--- /dev/null
+++ b/frontend/settings/__tests__/three_d_settings_test.tsx
@@ -0,0 +1,104 @@
+jest.mock("../../api/crud", () => ({
+  initSave: jest.fn(),
+  edit: jest.fn(),
+  save: jest.fn(),
+}));
+
+import React from "react";
+import { namespace3D, ThreeDSettings } from "../three_d_settings";
+import { ThreeDSettingsProps } from "../interfaces";
+import { settingsPanelState } from "../../__test_support__/panel_state";
+import { Actions } from "../../constants";
+import { changeBlurableInputRTL } from "../../__test_support__/helpers";
+import { edit, initSave, save } from "../../api/crud";
+import { fakeFarmwareEnv } from "../../__test_support__/fake_state/resources";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("<ThreeDSettings />", () => {
+  const fakeProps = (): ThreeDSettingsProps => {
+    const state = settingsPanelState();
+    state.three_d = true;
+    return {
+      dispatch: jest.fn(),
+      settingsPanelState: state,
+      farmwareEnvs: [],
+      distanceIndicator: "",
+    };
+  };
+
+  it("toggles visual on", () => {
+    const p = fakeProps();
+    render(<ThreeDSettings {...p} />);
+    const helpIcon = screen.getAllByRole("tooltip")[0];
+    fireEvent.click(helpIcon);
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_DISTANCE_INDICATOR,
+      payload: "bedWallThickness",
+    });
+  });
+
+  it("toggles visual off", () => {
+    const p = fakeProps();
+    p.distanceIndicator = "bedWallThickness";
+    render(<ThreeDSettings {...p} />);
+    const helpIcon = screen.getAllByRole("tooltip")[0];
+    fireEvent.click(helpIcon);
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_DISTANCE_INDICATOR,
+      payload: "",
+    });
+  });
+
+  it("creates env", () => {
+    const p = fakeProps();
+    render(<ThreeDSettings {...p} />);
+    const input = screen.getByDisplayValue("40");
+    changeBlurableInputRTL(input, "100");
+    expect(initSave).toHaveBeenCalledWith("FarmwareEnv", {
+      key: namespace3D("bedWallThickness"),
+      value: "100",
+    });
+    expect(edit).not.toHaveBeenCalled();
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it("edits env", () => {
+    const p = fakeProps();
+    const fakeEnv = fakeFarmwareEnv();
+    fakeEnv.body.key = namespace3D("bedWallThickness");
+    fakeEnv.body.value = "40";
+    p.farmwareEnvs = [fakeEnv];
+    render(<ThreeDSettings {...p} />);
+    const input = screen.getByDisplayValue("40");
+    changeBlurableInputRTL(input, "100");
+    expect(initSave).not.toHaveBeenCalled();
+    expect(edit).toHaveBeenCalledWith(fakeEnv, { value: "100" });
+    expect(save).toHaveBeenCalledWith(fakeEnv.uuid);
+  });
+
+  it("toggles setting on", () => {
+    render(<ThreeDSettings {...fakeProps()} />);
+    const toggle = screen.getAllByText("no")[1];
+    fireEvent.click(toggle);
+    expect(initSave).toHaveBeenCalledWith("FarmwareEnv", {
+      key: namespace3D("grid"),
+      value: "1",
+    });
+    expect(edit).not.toHaveBeenCalled();
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it("toggles setting off", () => {
+    const p = fakeProps();
+    const fakeEnv = fakeFarmwareEnv();
+    fakeEnv.body.key = namespace3D("grid");
+    fakeEnv.body.value = "1";
+    p.farmwareEnvs = [fakeEnv];
+    render(<ThreeDSettings {...p} />);
+    const toggle = screen.getByText("yes");
+    fireEvent.click(toggle);
+    expect(initSave).not.toHaveBeenCalled();
+    expect(edit).toHaveBeenCalledWith(fakeEnv, { value: "0" });
+    expect(save).toHaveBeenCalledWith(fakeEnv.uuid);
+  });
+});
diff --git a/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx b/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx
index b942df2c53..e3ffd6dd40 100644
--- a/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx
+++ b/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DangerousDeleteWidget } from "../dangerous_delete_widget";
 import { mount, shallow } from "enzyme";
 import { DangerousDeleteProps } from "../interfaces";
diff --git a/frontend/settings/account/account_settings.tsx b/frontend/settings/account/account_settings.tsx
index c29c3db47a..3d1cb614d4 100644
--- a/frontend/settings/account/account_settings.tsx
+++ b/frontend/settings/account/account_settings.tsx
@@ -4,7 +4,7 @@ import { DeviceSetting, Content } from "../../constants";
 import { Header } from "../hardware_settings/header";
 import { Collapse, Slider } from "@blueprintjs/core";
 import { t } from "../../i18next_wrapper";
-import { BlurableInput, Col, FBSelect, Help, Row, ToggleButton } from "../../ui";
+import { BlurableInput, FBSelect, Help, Row, ToggleButton } from "../../ui";
 import { edit, save } from "../../api/crud";
 import { SettingDescriptionProps } from "../interfaces";
 import { BooleanSetting, NumericSetting, StringSetting } from "../../session_keys";
@@ -34,7 +34,7 @@ export const AccountSettings = (props: AccountSettingsProps) =>
       dispatch={props.dispatch} />
     <Collapse isOpen={!!props.settingsPanelState.account}>
       <Highlight settingName={DeviceSetting.accountName}>
-        <Row className={"zero-side-margins"}>
+        <Row className="grid-2-col">
           <label>
             {t(DeviceSetting.accountName)}
           </label>
@@ -50,12 +50,12 @@ export const AccountSettings = (props: AccountSettingsProps) =>
         </Row>
       </Highlight>
       <Highlight settingName={DeviceSetting.accountEmail}>
-        <div className={"credentials-change-warning-banner"}>
+        <div className={"settings-warning-banner"}>
           <p>{t(Content.ACCOUNT_EMAIL_CHANGE)}</p>
         </div>
       </Highlight>
       <Highlight settingName={DeviceSetting.accountEmail}>
-        <Row className={"zero-side-margins"}>
+        <Row className="grid-2-col">
           <label>
             {t(DeviceSetting.accountEmail)}
           </label>
@@ -75,24 +75,20 @@ export const AccountSettings = (props: AccountSettingsProps) =>
         <ChangePassword />
       </Highlight>
       <Highlight settingName={DeviceSetting.language}>
-        <Row>
-          <Col xs={3}>
-            <label>
-              {t(DeviceSetting.language)}
-            </label>
-          </Col>
-          <Col xs={9}>
-            <BlurableInput
-              type="text"
-              name="language"
-              value={props.user.body.language || ""}
-              onCommit={e => {
-                props.dispatch(edit(
-                  props.user,
-                  { language: e.currentTarget.value }));
-                props.dispatch(save(props.user.uuid));
-              }} />
-          </Col>
+        <Row className="grid-2-col">
+          <label>
+            {t(DeviceSetting.language)}
+          </label>
+          <BlurableInput
+            type="text"
+            name="language"
+            value={props.user.body.language || ""}
+            onCommit={e => {
+              props.dispatch(edit(
+                props.user,
+                { language: e.currentTarget.value }));
+              props.dispatch(save(props.user.uuid));
+            }} />
         </Row>
       </Highlight>
       {APP_SETTINGS().map(setting => <Setting key={setting.title}
@@ -116,7 +112,7 @@ export const AccountSettings = (props: AccountSettingsProps) =>
           onClick={deleteUser} />
       </Highlight>
       <Highlight settingName={DeviceSetting.exportAccountData}>
-        <Row className={"export-data zero-side-margins"}>
+        <Row className={"export-data"}>
           <label>
             {t(DeviceSetting.exportAccountData)}
           </label>
@@ -183,6 +179,11 @@ const APP_SETTINGS = (): SettingDescriptionProps[] => ([
     description: Content.USER_INTERFACE_READ_ONLY_MODE,
     setting: BooleanSetting.user_interface_read_only_mode,
   },
+  {
+    title: DeviceSetting.darkMode,
+    description: Content.DARK_MODE,
+    setting: BooleanSetting.dark_mode,
+  },
 ]);
 
 export interface ActivityBeepSettingProps {
@@ -222,12 +223,12 @@ export const LandingPageSetting = (props: LandingPageSettingProps) => {
     StringSetting.landing_page, page));
   const [page, setPage] = React.useState(value);
   return <Highlight settingName={DeviceSetting.landingPage}>
-    <Row className={"landing-page-setting"}>
-      <Col xs={5}>
+    <Row className={"grid-2-col align-baseline"}>
+      <div className="row grid-exp-2">
         <label>{t(DeviceSetting.landingPage)}</label>
         <Help text={Content.LANDING_PAGE} />
-      </Col>
-      <Col xs={7}>
+      </div>
+      <div className="grid">
         <FBSelect
           key={value}
           list={Object.entries(PAGE_SLUGS())
@@ -242,7 +243,7 @@ export const LandingPageSetting = (props: LandingPageSettingProps) => {
           <input value={page}
             onBlur={() => change(page)}
             onChange={e => setPage(e.currentTarget.value)} />}
-      </Col>
+      </div>
     </Row>
   </Highlight>;
 };
diff --git a/frontend/settings/account/change_password.tsx b/frontend/settings/account/change_password.tsx
index 5880524702..836fc79f5c 100644
--- a/frontend/settings/account/change_password.tsx
+++ b/frontend/settings/account/change_password.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { SaveBtn, Row } from "../../ui";
+import { SaveBtn } from "../../ui";
 import { SpecialStatus } from "farmbot";
 import axios from "axios";
 import { API } from "../../api/index";
@@ -86,37 +86,33 @@ export class ChangePassword extends React.Component<{}, ChangePWState> {
   };
 
   render() {
-    return <Row className={"change-password zero-side-margins"}>
-      <label>
-        {t(DeviceSetting.changePassword)}
-      </label>
-      <SaveBtn onClick={this.save} status={this.state.status} />
-      <form>
-        <div className={"old-password"}>
-          <label>
-            {t("Old Password")}
-          </label>
-          <BlurablePassword
-            onCommit={this.set("password")}
-            name="password" />
-        </div>
-        <div className={"new-password"}>
-          <label>
-            {t("New Password")}
-          </label>
-          <BlurablePassword
-            onCommit={this.set("new_password")}
-            name="new_password" />
-        </div>
-        <div className={"new-password"}>
-          <label>
-            {t("Confirm New Password")}
-          </label>
-          <BlurablePassword
-            onCommit={this.set("new_password_confirmation")}
-            name={"new_password_confirmation"} />
-        </div>
+    return <div className={"change-password grid"}>
+      <div className="row grid-exp-1">
+        <label>
+          {t(DeviceSetting.changePassword)}
+        </label>
+        <SaveBtn onClick={this.save} status={this.state.status} />
+      </div>
+      <form className="grid grid-2-col">
+        <label>
+          {t("Old Password")}
+        </label>
+        <BlurablePassword
+          onCommit={this.set("password")}
+          name="password" />
+        <label>
+          {t("New Password")}
+        </label>
+        <BlurablePassword
+          onCommit={this.set("new_password")}
+          name="new_password" />
+        <label>
+          {t("Confirm New Password")}
+        </label>
+        <BlurablePassword
+          onCommit={this.set("new_password_confirmation")}
+          name={"new_password_confirmation"} />
       </form>
-    </Row>;
+    </div>;
   }
 }
diff --git a/frontend/settings/account/dangerous_delete_widget.tsx b/frontend/settings/account/dangerous_delete_widget.tsx
index 393b4b43fd..8c216c87be 100644
--- a/frontend/settings/account/dangerous_delete_widget.tsx
+++ b/frontend/settings/account/dangerous_delete_widget.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Col, Row } from "../../ui";
+import { Row } from "../../ui";
 import { DangerousDeleteProps, DeletionRequest } from "./interfaces";
 import { BlurablePassword } from "../../ui/blurable_password";
 import { t } from "../../i18next_wrapper";
@@ -17,39 +17,36 @@ export class DangerousDeleteWidget extends
     this.props.dispatch(this.props.onClick({ password: this.state.password }));
 
   render() {
-    return <Row className={"zero-side-margins"}>
+    return <div className="grid">
       <label>
         {t(this.props.title)}
       </label>
-      <p>
-        {t(this.props.warning)}
-        <br /><br />
-        {t(this.props.confirmation)}
-        <br /><br />
-      </p>
+      <div className="settings-warning-banner">
+        <p>
+          {t(this.props.warning)}
+          <br /><br />
+          {t(this.props.confirmation)}
+        </p>
+      </div>
       <form>
-        <Row>
-          <Col xs={12}>
+        <Row className="grid-exp-1">
+          <div className="grid half-gap">
             <label>
               {t("Enter Password")}
             </label>
-          </Col>
-          <Col xs={8}>
             <BlurablePassword
               onCommit={e =>
                 this.setState({ password: e.currentTarget.value })} />
-          </Col>
-          <Col xs={4}>
-            <button
-              onClick={this.onClick}
-              className="red fb-button"
-              title={t(this.props.title)}
-              type="button">
-              {t(this.props.title)}
-            </button>
-          </Col>
+          </div>
+          <button
+            onClick={this.onClick}
+            className="red fb-button"
+            title={t(this.props.title)}
+            type="button">
+            {t(this.props.title)}
+          </button>
         </Row>
       </form>
-    </Row>;
+    </div>;
   }
 }
diff --git a/frontend/settings/custom_settings.tsx b/frontend/settings/custom_settings.tsx
index b7676c28be..15bbf99f68 100644
--- a/frontend/settings/custom_settings.tsx
+++ b/frontend/settings/custom_settings.tsx
@@ -17,7 +17,7 @@ export const CustomSettings = (props: CustomSettingsProps) =>
       dispatch={props.dispatch}
       expanded={props.settingsPanelState.custom_settings} />
     <Collapse isOpen={!!props.settingsPanelState.custom_settings}>
-      <div className={"env-editor-lua"}>
+      <div className={"settings-warning-banner env-editor-lua"}>
         <p>
           {t(Content.FARMWARE_ENV_EDITOR_LUA)}
           {" "}
diff --git a/frontend/settings/default_values.ts b/frontend/settings/default_values.ts
index e92f4a2c96..e0d23b71a5 100644
--- a/frontend/settings/default_values.ts
+++ b/frontend/settings/default_values.ts
@@ -88,6 +88,7 @@ const DEFAULT_WEB_APP_CONFIG_VALUES: Record<Key, Value> = {
   highlight_modified_settings: true,
   show_advanced_settings: false,
   ["three_d_garden" as Key]: false,
+  ["dark_mode" as Key]: false,
 };
 
 const DEFAULT_EXPRESS_WEB_APP_CONFIG_VALUES =
diff --git a/frontend/settings/dev/dev_settings.tsx b/frontend/settings/dev/dev_settings.tsx
index b1be47eeb2..15fb22cfde 100644
--- a/frontend/settings/dev/dev_settings.tsx
+++ b/frontend/settings/dev/dev_settings.tsx
@@ -1,77 +1,59 @@
 import React from "react";
-import { Row, Col, BlurableInput, ToggleButton } from "../../ui";
+import { Row, BlurableInput, ToggleButton } from "../../ui";
 import { DevSettings } from "./dev_support";
 
 export const DevWidgetFERow = () =>
-  <Row>
-    <Col xs={8}>
-      <label>
-        {"Enable unstable FE features"}
-      </label>
-    </Col>
-    <Col xs={4}>
-      <ToggleButton
-        toggleValue={DevSettings.futureFeaturesEnabled()}
-        toggleAction={DevSettings.futureFeaturesEnabled()
-          ? DevSettings.disableFutureFeatures
-          : DevSettings.enableFutureFeatures} />
-    </Col>
+  <Row className="grid-exp-1">
+    <label>
+      {"Enable unstable FE features"}
+    </label>
+    <ToggleButton
+      toggleValue={DevSettings.futureFeaturesEnabled()}
+      toggleAction={DevSettings.futureFeaturesEnabled()
+        ? DevSettings.disableFutureFeatures
+        : DevSettings.enableFutureFeatures} />
   </Row>;
 
 export const DevWidgetFBOSRow = () => {
-  return <Row>
-    <Col xs={6}>
-      <label>
-        {"Change FBOS version"}
-      </label>
-    </Col>
-    <Col xs={1}>
+  return <Row className="grid-2-col">
+    <label>
+      {"Change FBOS version"}
+    </label>
+    <div className="row grid-exp-3">
       <button className="fb-button red fa fa-times"
         onClick={DevSettings.resetFbosVersionOverride} />
-    </Col>
-    <Col xs={1}>
       <button className="fb-button green fa fa-angle-double-up"
         onClick={DevSettings.setMaxFbosVersionOverride} />
-    </Col>
-    <Col xs={4}>
       <BlurableInput type="text"
         value={DevSettings.overriddenFbosVersion() || ""}
         onCommit={e =>
           DevSettings.setFbosVersionOverride(e.currentTarget.value)} />
-    </Col>
+    </div>
   </Row>;
 };
 
 export const DevWidgetDelModeRow = () =>
-  <Row>
-    <Col xs={8}>
-      <label>
-        {"Enable quick delete mode"}
-      </label>
-    </Col>
-    <Col xs={4}>
-      <ToggleButton
-        toggleValue={DevSettings.quickDeleteEnabled()}
-        toggleAction={DevSettings.quickDeleteEnabled()
-          ? DevSettings.disableQuickDelete
-          : DevSettings.enableQuickDelete} />
-    </Col>
+  <Row className="grid-exp-1">
+    <label>
+      {"Enable quick delete mode"}
+    </label>
+    <ToggleButton
+      toggleValue={DevSettings.quickDeleteEnabled()}
+      toggleAction={DevSettings.quickDeleteEnabled()
+        ? DevSettings.disableQuickDelete
+        : DevSettings.enableQuickDelete} />
   </Row>;
 
 export const DevWidgetShowInternalEnvsRow = () =>
-  <Row>
-    <Col xs={8}>
-      <label>
-        {"Show internal envs"}
-      </label>
-    </Col>
-    <Col xs={4}>
-      <ToggleButton
-        toggleValue={DevSettings.showInternalEnvsEnabled()}
-        toggleAction={DevSettings.showInternalEnvsEnabled()
-          ? DevSettings.disableShowInternalEnvs
-          : DevSettings.enableShowInternalEnvs} />
-    </Col>
+  <Row className="grid-exp-1">
+    <label>
+      {"Show internal envs"}
+    </label>
+    <ToggleButton
+      toggleValue={DevSettings.showInternalEnvsEnabled()}
+      toggleAction={DevSettings.showInternalEnvsEnabled()
+        ? DevSettings.disableShowInternalEnvs
+        : DevSettings.enableShowInternalEnvs} />
   </Row>;
 
 export const DevSettingsRows = () =>
diff --git a/frontend/settings/farm_designer_settings.tsx b/frontend/settings/farm_designer_settings.tsx
index 43077f9420..62df9a9c34 100644
--- a/frontend/settings/farm_designer_settings.tsx
+++ b/frontend/settings/farm_designer_settings.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Content, DeviceSetting } from "../constants";
 import { t } from "../i18next_wrapper";
 import { setWebAppConfigValue } from "../config_storage/actions";
-import { Row, Col, Help, ToggleButton, BlurableInput } from "../ui";
+import { Help, ToggleButton, BlurableInput } from "../ui";
 import { BooleanSetting, NumericSetting } from "../session_keys";
 import { resetVirtualTrail } from "../farm_designer/map/layers/farmbot/bot_trail";
 import { MapSizeInputs } from "../farm_designer/map_size_setting";
@@ -44,31 +44,24 @@ export const Setting = (props: SettingProps) => {
   const value = (defaultOn && isUndefined(raw_value)) ? true : !!raw_value;
   return <Highlight settingName={title}>
     <div
-      className={`designer-setting ${props.disabled ? "disabled" : ""}`}>
-      <Row>
-        <Col xs={9}>
-          <label>{t(title)}</label>
-          {props.useToolTip && <Help text={props.description} />}
-        </Col>
-        <Col xs={3}>
-          {setting && <ToggleButton
-            toggleValue={props.invert ? !value : value}
-            toggleAction={() => {
-              if (value || !props.confirm || confirm(t(props.confirm))) {
-                props.dispatch(setWebAppConfigValue(setting, !value));
-                callback?.();
-              }
-            }}
-            title={`${t("toggle")} ${title}`}
-            className={getModifiedClassName(setting)}
-            customText={{ textFalse: t("off"), textTrue: t("on") }} />}
-          {numberSetting && <WebAppNumberSetting {...props}
-            numberSetting={numberSetting} />}
-        </Col>
-      </Row>
-      {!props.useToolTip && <Row>
-        <p>{t(props.description)}</p>
-      </Row>}
+      className={`designer-setting row grid-exp-1 ${props.disabled ? "disabled" : ""}`}>
+      <div>
+        <label>{t(title)}</label>
+        <Help text={props.description} />
+      </div>
+      {setting && <ToggleButton
+        toggleValue={props.invert ? !value : value}
+        toggleAction={() => {
+          if (value || !props.confirm || confirm(t(props.confirm))) {
+            props.dispatch(setWebAppConfigValue(setting, !value));
+            callback?.();
+          }
+        }}
+        title={`${t("toggle")} ${title}`}
+        className={getModifiedClassName(setting)}
+        customText={{ textFalse: t("off"), textTrue: t("on") }} />}
+      {numberSetting && <WebAppNumberSetting {...props}
+        numberSetting={numberSetting} />}
       {props.children}
     </div>
   </Highlight>;
diff --git a/frontend/settings/fbos_settings/__tests__/bot_config_input_box_test.tsx b/frontend/settings/fbos_settings/__tests__/bot_config_input_box_test.tsx
index 9cc2b4afb2..dcfe14e9fa 100644
--- a/frontend/settings/fbos_settings/__tests__/bot_config_input_box_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/bot_config_input_box_test.tsx
@@ -3,7 +3,7 @@ jest.mock("../../../api/crud", () => ({
   save: jest.fn(),
 }));
 
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import { BotConfigInputBox, BotConfigInputBoxProps } from "../bot_config_input_box";
 import { fakeState } from "../../../__test_support__/fake_state";
diff --git a/frontend/settings/fbos_settings/__tests__/name_row_test.tsx b/frontend/settings/fbos_settings/__tests__/name_row_test.tsx
index c2f312ef6e..90743d4d42 100644
--- a/frontend/settings/fbos_settings/__tests__/name_row_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/name_row_test.tsx
@@ -3,7 +3,7 @@ jest.mock("../../../api/crud", () => ({
   save: jest.fn(),
 }));
 
-import * as React from "react";
+import React from "react";
 import { mount, shallow } from "enzyme";
 import { NameRow } from "../name_row";
 import { NameRowProps } from "../interfaces";
diff --git a/frontend/settings/fbos_settings/__tests__/nonsecure_content_warning_test.tsx b/frontend/settings/fbos_settings/__tests__/nonsecure_content_warning_test.tsx
index 92065ab66e..5ba97107cf 100644
--- a/frontend/settings/fbos_settings/__tests__/nonsecure_content_warning_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/nonsecure_content_warning_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { allAreHttps, NonsecureContentWarning } from "../nonsecure_content_warning";
 import { shallow } from "enzyme";
 
diff --git a/frontend/settings/fbos_settings/__tests__/os_update_button_test.tsx b/frontend/settings/fbos_settings/__tests__/os_update_button_test.tsx
index 20e9992468..efd290dcaa 100644
--- a/frontend/settings/fbos_settings/__tests__/os_update_button_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/os_update_button_test.tsx
@@ -20,7 +20,6 @@ import { Actions, Content } from "../../../constants";
 import { mockDispatch } from "../../../__test_support__/fake_dispatch";
 import { API } from "../../../api";
 import { cloneDeep } from "lodash";
-import { push } from "../../../history";
 import { checkControllerUpdates } from "../../../devices/actions";
 import { toggleControlPanel } from "../../toggle_section";
 import {
@@ -196,7 +195,7 @@ describe("<OsUpdateButton />", () => {
     osUpdateButton.simulate("click");
     expect(checkControllerUpdates).not.toHaveBeenCalled();
     expect(toggleControlPanel).toHaveBeenCalledWith("power_and_reset");
-    expect(push).toHaveBeenCalledWith(Path.settings("hard_reset"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.settings("hard_reset"));
   });
 
   it("handles undefined jobs", () => {
diff --git a/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx b/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx
index 054e3e27b5..5b4d002c85 100644
--- a/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx
@@ -3,7 +3,7 @@ jest.mock("../../../api/crud", () => ({
   save: jest.fn(),
 }));
 
-import * as React from "react";
+import React from "react";
 import { mount, shallow } from "enzyme";
 import { TimezoneRow } from "../timezone_row";
 import { TimezoneRowProps } from "../interfaces";
diff --git a/frontend/settings/fbos_settings/auto_update_row.tsx b/frontend/settings/fbos_settings/auto_update_row.tsx
index 51fc9bc7a7..fe09e5ebcb 100644
--- a/frontend/settings/fbos_settings/auto_update_row.tsx
+++ b/frontend/settings/fbos_settings/auto_update_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, Help, ToggleButton } from "../../ui";
+import { Row, Help, ToggleButton } from "../../ui";
 import { updateConfig } from "../../devices/actions";
 import { Content, DeviceSetting } from "../../constants";
 import { AutoUpdateRowProps } from "./interfaces";
@@ -13,23 +13,21 @@ export function AutoUpdateRow(props: AutoUpdateRowProps) {
   const firmwareHardware = validFirmwareHardware(
     props.sourceFbosConfig("firmware_hardware").value);
   return <Highlight settingName={DeviceSetting.osAutoUpdate} hidden={true}>
-    <Row>
-      <Col xs={9}>
+    <Row className="grid-2-col">
+      <div>
         <label>
           {t(DeviceSetting.osAutoUpdate)}
         </label>
         <Help text={Content.OS_AUTO_UPDATE} />
-      </Col>
-      <Col xs={3}>
-        <ToggleButton
-          toggleValue={osAutoUpdate.value}
-          dim={!osAutoUpdate.consistent}
-          className={getModifiedClassName("os_auto_update",
-            !!osAutoUpdate.value, firmwareHardware)}
-          toggleAction={() => props.dispatch(updateConfig({
-            os_auto_update: !osAutoUpdate.value
-          }))} />
-      </Col>
+      </div>
+      <ToggleButton
+        toggleValue={osAutoUpdate.value}
+        dim={!osAutoUpdate.consistent}
+        className={getModifiedClassName("os_auto_update",
+          !!osAutoUpdate.value, firmwareHardware)}
+        toggleAction={() => props.dispatch(updateConfig({
+          os_auto_update: !osAutoUpdate.value
+        }))} />
     </Row>
   </Highlight>;
 }
diff --git a/frontend/settings/fbos_settings/boot_sequence_selector.tsx b/frontend/settings/fbos_settings/boot_sequence_selector.tsx
index 270a02fe9b..ed30666fe0 100644
--- a/frontend/settings/fbos_settings/boot_sequence_selector.tsx
+++ b/frontend/settings/fbos_settings/boot_sequence_selector.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { Everything } from "../../interfaces";
 import { getFbosConfig } from "../../resources/getters";
-import { FBSelect, DropDownItem, Row, Col } from "../../ui";
+import { FBSelect, DropDownItem, Row } from "../../ui";
 import { edit, save } from "../../api/crud";
 import { FirmwareHardware, TaggedFbosConfig, TaggedSequence } from "farmbot";
 import {
@@ -75,15 +75,11 @@ export class RawBootSequenceSelector
 
   render() {
     return <Highlight settingName={DeviceSetting.bootSequence}>
-      <Row>
-        <Col xs={5}>
-          <label>
-            {t("BOOT SEQUENCE")}
-          </label>
-        </Col>
-        <Col xs={7} className="no-pad">
-          <this.SelectionInput />
-        </Col>
+      <Row className="grid-2-col">
+        <label>
+          {t("BOOT SEQUENCE")}
+        </label>
+        <this.SelectionInput />
       </Row>
     </Highlight>;
   }
diff --git a/frontend/settings/fbos_settings/factory_reset_row.tsx b/frontend/settings/fbos_settings/factory_reset_row.tsx
index da3539435d..0348750878 100644
--- a/frontend/settings/fbos_settings/factory_reset_row.tsx
+++ b/frontend/settings/fbos_settings/factory_reset_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, docLinkClick, Help } from "../../ui";
+import { Row, docLinkClick, Help } from "../../ui";
 import { Content, DeviceSetting } from "../../constants";
 import { softReset } from "../../devices/actions";
 import { FactoryResetRowsProps } from "./interfaces";
@@ -8,44 +8,40 @@ import { Highlight } from "../maybe_highlight";
 
 export const FactoryResetRows = (props: FactoryResetRowsProps) => {
   const { botOnline } = props;
-  return <div className={"factory-reset-options"}>
+  return <div className={"factory-reset-options grid"}>
     <Highlight settingName={DeviceSetting.softReset}>
-      <Row>
-        <Col xs={6}>
+      <Row className="grid-exp-1">
+        <div>
           <label>
             {t(DeviceSetting.softReset)}
           </label>
           <Help text={`${Content.SOFT_RESET_WARNING}
             ${t(Content.OS_RESET_WARNING, { resetMethod: t("Soft") })}`} />
-        </Col>
-        <Col xs={6}>
-          <button
-            className="fb-button red"
-            type="button"
-            onClick={softReset}
-            title={t("SOFT RESET")}
-            disabled={!botOnline}>
-            {t("SOFT RESET")}
-          </button>
-        </Col>
+        </div>
+        <button
+          className="fb-button red"
+          type="button"
+          onClick={softReset}
+          title={t("SOFT RESET")}
+          disabled={!botOnline}>
+          {t("SOFT RESET")}
+        </button>
       </Row>
     </Highlight>
     <Highlight settingName={DeviceSetting.hardReset}>
-      <Row>
-        <Col xs={6}>
+      <Row className="grid-exp-1">
+        <div>
           <label>
             {t(DeviceSetting.hardReset)}
           </label>
           <Help text={`${Content.HARD_RESET_WARNING}
             ${t(Content.OS_RESET_WARNING, { resetMethod: t("Hard") })}`} />
-        </Col>
-        <Col xs={6}>
-          <a className="link-button fb-button red"
-            onClick={docLinkClick("farmbot-os")}>
-            {t("HARD RESET")}
-            <i className="fa fa-external-link" />
-          </a>
-        </Col>
+        </div>
+        <a className="link-button fb-button red"
+          onClick={docLinkClick("farmbot-os")}>
+          {t("HARD RESET")}
+          <i className="fa fa-external-link" />
+        </a>
       </Row>
     </Highlight>
   </div>;
diff --git a/frontend/settings/fbos_settings/farmbot_os_row.tsx b/frontend/settings/fbos_settings/farmbot_os_row.tsx
index e3324139b0..fdda4ed0b3 100644
--- a/frontend/settings/fbos_settings/farmbot_os_row.tsx
+++ b/frontend/settings/fbos_settings/farmbot_os_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, Markdown, Popover } from "../../ui";
+import { Row, Markdown, Popover } from "../../ui";
 import { fetchOsUpdateVersion, OsUpdateButton } from "./os_update_button";
 import { Position } from "@blueprintjs/core";
 import { FarmbotOsRowProps, FarmbotOsRowState } from "./interfaces";
@@ -96,30 +96,26 @@ export class FarmbotOsRow
     return <Highlight settingName={DeviceSetting.farmbotOS}
       hidden={!this.props.showAdvanced}
       className={"advanced"}>
-      <Row>
-        <Col xs={5}>
+      <div className="grid half-gap farmbot-os-setting">
+        <Row className="grid-exp-1">
           <label>
             {t(DeviceSetting.farmbotOS)}
           </label>
-        </Col>
-        <Col xs={7}>
           <OsUpdateButton
             bot={this.props.bot}
             dispatch={this.props.dispatch}
             botOnline={this.props.botOnline} />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={7} className="no-pad"><this.Version /></Col>
-        <Col xs={5} className="no-pad">
+        </Row>
+        <Row className="grid-2-col">
+          <this.Version />
           <Popover position={Position.BOTTOM} className="release-notes-wrapper"
             target={<p className="release-notes-button">
               {t("Release Notes")}&nbsp;
               <i className="fa fa-caret-down" />
             </p>}
             content={<this.ReleaseNotes />} />
-        </Col>
-      </Row>
+        </Row>
+      </div>
     </Highlight>;
   }
 }
diff --git a/frontend/settings/fbos_settings/farmbot_os_settings.tsx b/frontend/settings/fbos_settings/farmbot_os_settings.tsx
index 5a8c4c7f2d..c611187e2f 100644
--- a/frontend/settings/fbos_settings/farmbot_os_settings.tsx
+++ b/frontend/settings/fbos_settings/farmbot_os_settings.tsx
@@ -17,12 +17,6 @@ import { FirmwarePathRow } from "../firmware/firmware_path";
 import { validFirmwareHardware } from "../firmware/firmware_hardware_support";
 import { RpiModel } from "./rpi_model";
 
-export enum ColWidth {
-  label = 3,
-  description = 7,
-  button = 2
-}
-
 export const FarmBotSettings = (props: FarmbotSettingsProps) => {
   const {
     dispatch, device, timeSettings, sourceFbosConfig, botOnline, showAdvanced, bot,
diff --git a/frontend/settings/fbos_settings/fbos_button_row.tsx b/frontend/settings/fbos_settings/fbos_button_row.tsx
index 8c1d016e51..2c3a057dbe 100644
--- a/frontend/settings/fbos_settings/fbos_button_row.tsx
+++ b/frontend/settings/fbos_settings/fbos_button_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 import { DeviceSetting } from "../../constants";
@@ -19,23 +19,21 @@ export const FbosButtonRow = (props: FbosButtonRowProps) => {
   return <Highlight settingName={props.label}
     hidden={props.advanced && !props.showAdvanced}
     className={props.advanced ? "advanced" : ""}>
-    <Row>
-      <Col xs={7}>
+    <Row className="grid-exp-1">
+      <div>
         <label>
           {t(props.label)}
         </label>
         <Help text={props.description} />
-      </Col>
-      <Col xs={5}>
-        <button
-          className={`fb-button ${props.color}`}
-          type="button"
-          onClick={props.action}
-          title={t(props.buttonText)}
-          disabled={!props.botOnline}>
-          {t(props.buttonText)}
-        </button>
-      </Col>
+      </div>
+      <button
+        className={`fb-button ${props.color}`}
+        type="button"
+        onClick={props.action}
+        title={t(props.buttonText)}
+        disabled={!props.botOnline}>
+        {t(props.buttonText)}
+      </button>
     </Row>
   </Highlight>;
 };
diff --git a/frontend/settings/fbos_settings/fbos_details.tsx b/frontend/settings/fbos_settings/fbos_details.tsx
index c67d940c16..d4f0997244 100644
--- a/frontend/settings/fbos_settings/fbos_details.tsx
+++ b/frontend/settings/fbos_settings/fbos_details.tsx
@@ -43,7 +43,7 @@ interface ChipTemperatureDisplayProps {
 /** RPI CPU temperature display row: label, temperature, indicator. */
 export function ChipTemperatureDisplay(
   { chip, temperature }: ChipTemperatureDisplayProps,
-): JSX.Element {
+): React.ReactNode {
   return <div className="chip-temp-display">
     <p>
       <b>{chip && chip.toUpperCase()} {t("CPU temperature")}: </b>
@@ -59,7 +59,7 @@ export interface PiDisplayProps {
 }
 
 /** RPI model display row. */
-export const PiDisplay = ({ chip, firmware }: PiDisplayProps): JSX.Element => {
+export const PiDisplay = ({ chip, firmware }: PiDisplayProps): React.ReactNode => {
   const pi = () => {
     switch (chip) {
       case "rpi": return "Zero W";
@@ -145,7 +145,7 @@ interface WiFiStrengthDisplayProps {
 /** WiFi signal strength display row: label, strength, indicator. */
 export function WiFiStrengthDisplay(
   { wifiStrength, wifiStrengthPercent, extraInfo }: WiFiStrengthDisplayProps,
-): JSX.Element {
+): React.ReactNode {
   const calculatedPercent = wifiStrength
     ? Math.round(-0.0154 * wifiStrength ** 2 - 0.4 * wifiStrength + 98)
     : 0;
@@ -314,7 +314,7 @@ interface CommitDisplayProps {
 /** GitHub commit display row: label, commit link. */
 const CommitDisplay = (
   { title, repo, commit }: CommitDisplayProps,
-): JSX.Element => {
+): React.ReactNode => {
   const shortCommit = shortenCommit(commit);
   return <p>
     <b>{title}: </b>
@@ -345,7 +345,7 @@ interface UptimeDisplayProps {
 }
 
 /** FBOS uptime display row: label and uptime in relevant unit. */
-const UptimeDisplay = ({ uptime_sec }: UptimeDisplayProps): JSX.Element => {
+const UptimeDisplay = ({ uptime_sec }: UptimeDisplayProps): React.ReactNode => {
   return <p><b>{t("Uptime")}: </b>{convertUptime(uptime_sec)}</p>;
 };
 
@@ -357,7 +357,7 @@ export interface OSReleaseChannelSelectionProps {
 /** Label and dropdown for selecting FBOS release channel. */
 export const OSReleaseChannelSelection = (
   { dispatch, sourceFbosConfig }: OSReleaseChannelSelectionProps,
-): JSX.Element => {
+): React.ReactNode => {
   const channel = sourceFbosConfig("update_channel").value;
   const firmwareHardware = validFirmwareHardware(
     sourceFbosConfig("firmware_hardware").value);
diff --git a/frontend/settings/fbos_settings/garden_location_row.tsx b/frontend/settings/fbos_settings/garden_location_row.tsx
index eabd4b8b97..8a764446b0 100644
--- a/frontend/settings/fbos_settings/garden_location_row.tsx
+++ b/frontend/settings/fbos_settings/garden_location_row.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
 import { DeviceSetting } from "../../constants";
-import { Col, Row, ToggleButton } from "../../ui";
+import { Row, ToggleButton } from "../../ui";
 import { Highlight } from "../maybe_highlight";
 import { GardenLocationRowProps } from "./interfaces";
 import { edit, save } from "../../api/crud";
@@ -17,13 +17,18 @@ export const GardenLocationRow = (props: GardenLocationRowProps) => {
   const longitudeKey: keyof DeviceAccountSettings = "lng";
   const longitude = device.body[longitudeKey];
   const { indoor } = device.body;
-  return <div className={"garden-location"}>
+  return <div className={"garden-location grid"}>
     <Highlight settingName={DeviceSetting.farmbotLocation}>
-      <Row>
-        <Col xs={5}>
+      <Row className="grid-2-col">
+        <div className="row grid-exp-1">
           <label>
             {t(DeviceSetting.farmbotLocation)}
           </label>
+          <a href={`${ExternalUrl.openStreetMap(latitude, longitude)}`}
+            title={t("view in map (opens in new tab)")}
+            target={"_blank"} rel={"noreferrer"}>
+            <i className={"fa fa-map fb-icon-button invert"} />
+          </a>
           {navigator.geolocation &&
             <button
               className={"blue fb-button"}
@@ -39,54 +44,47 @@ export const GardenLocationRow = (props: GardenLocationRowProps) => {
               }}>
               <i className="fa fa-crosshairs" />
             </button>}
-          <a href={`${ExternalUrl.openStreetMap(latitude, longitude)}`}
-            title={t("view in map (opens in new tab)")}
-            target={"_blank"} rel={"noreferrer"}>
-            <i className={"fa fa-map fb-icon-button"} />
-          </a>
-        </Col>
-        <Col xs={3} className={"latitude"}>
-          <input name={"latitude"}
-            type={"number"}
-            title={t("latitude")}
-            placeholder={t("latitude")}
-            className={getModifiedClassNameSpecifyDefault(latitude || 0, 0)}
-            onChange={e => dispatch(edit(device, {
-              [latitudeKey]: parseFloat(e.currentTarget.value),
-            }))}
-            onBlur={() => dispatch(save(device.uuid))}
-            value={latitude || ""} />
-        </Col>
-        <Col xs={3} xsOffset={1} className={"longitude"}>
-          <input name={"longitude"}
-            type={"number"}
-            title={t("longitude")}
-            placeholder={t("longitude")}
-            className={getModifiedClassNameSpecifyDefault(longitude || 0, 0)}
-            onChange={e => dispatch(edit(device, {
-              [longitudeKey]: parseFloat(e.currentTarget.value),
-            }))}
-            onBlur={() => dispatch(save(device.uuid))}
-            value={longitude || ""} />
-        </Col>
+        </div>
+        <div className="row grid-2-col">
+          <div className={"latitude"}>
+            <input name={"latitude"}
+              type={"number"}
+              title={t("latitude")}
+              placeholder={t("latitude")}
+              className={getModifiedClassNameSpecifyDefault(latitude || 0, 0)}
+              onChange={e => dispatch(edit(device, {
+                [latitudeKey]: parseFloat(e.currentTarget.value),
+              }))}
+              onBlur={() => dispatch(save(device.uuid))}
+              value={latitude || ""} />
+          </div>
+          <div className={"longitude"}>
+            <input name={"longitude"}
+              type={"number"}
+              title={t("longitude")}
+              placeholder={t("longitude")}
+              className={getModifiedClassNameSpecifyDefault(longitude || 0, 0)}
+              onChange={e => dispatch(edit(device, {
+                [longitudeKey]: parseFloat(e.currentTarget.value),
+              }))}
+              onBlur={() => dispatch(save(device.uuid))}
+              value={longitude || ""} />
+          </div>
+        </div>
       </Row>
     </Highlight>
     <Highlight settingName={DeviceSetting.indoor}>
-      <Row>
-        <Col xs={7}>
-          <label>
-            {t(DeviceSetting.indoor)}
-          </label>
-        </Col>
-        <Col xs={5}>
-          <ToggleButton
-            toggleValue={!!indoor}
-            className={getModifiedClassNameSpecifyDefault(!!indoor, false)}
-            toggleAction={() => {
-              dispatch(edit(device, { indoor: !indoor }));
-              dispatch(save(device.uuid));
-            }} />
-        </Col>
+      <Row className="grid-exp-1">
+        <label>
+          {t(DeviceSetting.indoor)}
+        </label>
+        <ToggleButton
+          toggleValue={!!indoor}
+          className={getModifiedClassNameSpecifyDefault(!!indoor, false)}
+          toggleAction={() => {
+            dispatch(edit(device, { indoor: !indoor }));
+            dispatch(save(device.uuid));
+          }} />
       </Row>
     </Highlight>
   </div>;
diff --git a/frontend/settings/fbos_settings/name_row.tsx b/frontend/settings/fbos_settings/name_row.tsx
index dd3fe20133..1dc2e83bb1 100644
--- a/frontend/settings/fbos_settings/name_row.tsx
+++ b/frontend/settings/fbos_settings/name_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { DeviceSetting } from "../../constants";
 import { NameRowProps } from "./interfaces";
 import { t } from "../../i18next_wrapper";
@@ -21,15 +21,11 @@ export class NameRow extends React.Component<NameRowProps> {
 
   render() {
     return <Highlight settingName={DeviceSetting.name}>
-      <Row>
-        <Col xs={5}>
-          <label>
-            {t(DeviceSetting.name)}
-          </label>
-        </Col>
-        <Col xs={7}>
-          <this.NameInput />
-        </Col>
+      <Row className="grid-2-col">
+        <label>
+          {t(DeviceSetting.name)}
+        </label>
+        <this.NameInput />
       </Row>
     </Highlight>;
   }
diff --git a/frontend/settings/fbos_settings/nonsecure_content_warning.tsx b/frontend/settings/fbos_settings/nonsecure_content_warning.tsx
index ddbad56087..cbdbceac69 100644
--- a/frontend/settings/fbos_settings/nonsecure_content_warning.tsx
+++ b/frontend/settings/fbos_settings/nonsecure_content_warning.tsx
@@ -3,7 +3,7 @@ import { API } from "../../api";
 
 interface NonsecureContentProps {
   /** The warning to show the user if one of the URLs is insecure. */
-  children?: React.ReactChild;
+  children?: React.ReactNode;
   urls: string[];
 }
 
diff --git a/frontend/settings/fbos_settings/order_number_row.tsx b/frontend/settings/fbos_settings/order_number_row.tsx
index 4d120cad1b..c10a4c2104 100644
--- a/frontend/settings/fbos_settings/order_number_row.tsx
+++ b/frontend/settings/fbos_settings/order_number_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, BlurableInput } from "../../ui";
+import { Row, BlurableInput } from "../../ui";
 import { DeviceSetting } from "../../constants";
 import { OrderNumberRowProps } from "./interfaces";
 import { t } from "../../i18next_wrapper";
@@ -10,21 +10,17 @@ import { setOrderNumber } from "../../wizard/actions";
 export class OrderNumberRow extends React.Component<OrderNumberRowProps> {
   render() {
     return <Highlight settingName={DeviceSetting.orderNumber}>
-      <Row>
-        <Col xs={5}>
-          <label>
-            {t(DeviceSetting.orderNumber)}
-          </label>
-        </Col>
-        <Col xs={7}>
-          <BlurableInput value={this.props.device.body.fb_order_number || ""}
-            allowEmpty={true}
-            className={getModifiedClassNameSpecifyDefault(
-              this.props.device.body.fb_order_number, undefined,
-            )}
-            onCommit={e => this.props.dispatch(setOrderNumber(
-              this.props.device, e.currentTarget.value))} />
-        </Col>
+      <Row className="grid-2-col">
+        <label>
+          {t(DeviceSetting.orderNumber)}
+        </label>
+        <BlurableInput value={this.props.device.body.fb_order_number || ""}
+          allowEmpty={true}
+          className={getModifiedClassNameSpecifyDefault(
+            this.props.device.body.fb_order_number, undefined,
+          )}
+          onCommit={e => this.props.dispatch(setOrderNumber(
+            this.props.device, e.currentTarget.value))} />
       </Row>
     </Highlight>;
   }
diff --git a/frontend/settings/fbos_settings/os_update_button.tsx b/frontend/settings/fbos_settings/os_update_button.tsx
index 62c8414961..3352078b99 100644
--- a/frontend/settings/fbos_settings/os_update_button.tsx
+++ b/frontend/settings/fbos_settings/os_update_button.tsx
@@ -6,11 +6,12 @@ import { OsUpdateButtonProps } from "./interfaces";
 import { checkControllerUpdates } from "../../devices/actions";
 import { bulkToggleControlPanel, toggleControlPanel } from "../toggle_section";
 import { isString } from "lodash";
-import { Actions, Content } from "../../constants";
+import { Actions, Content, DeviceSetting } from "../../constants";
 import { t } from "../../i18next_wrapper";
 import { API } from "../../api";
-import { highlight, goToHardReset } from "../maybe_highlight";
+import { highlight, linkToSetting } from "../maybe_highlight";
 import { isJobDone } from "../../devices/jobs";
+import { NavigateFunction, useNavigate } from "react-router";
 
 /**
  * FBOS versions older than this can't connect to the available OTA system
@@ -119,21 +120,22 @@ export const OsUpdateButton = (props: OsUpdateButtonProps) => {
   /** FBOS update download progress data. */
   const osUpdateJob = (bot.hardware.jobs || {})["FBOS_OTA"];
 
+  const navigate = useNavigate();
   return <button
     className={`fb-button ${buttonStatusProps.color}`}
     title={buttonStatusProps.hoverText}
     disabled={!isJobDone(osUpdateJob) || !botOnline}
     onPointerEnter={() => dispatch(fetchOsUpdateVersion(target))}
-    onClick={tooOld ? onTooOld(dispatch) : checkControllerUpdates}>
+    onClick={tooOld ? onTooOld(dispatch, navigate) : checkControllerUpdates}>
     {downloadProgress(osUpdateJob) || buttonStatusProps.text}
   </button>;
 };
 
-const onTooOld = (dispatch: Function) => () => {
+const onTooOld = (dispatch: Function, navigate: NavigateFunction) => () => {
   highlight.highlighted = false;
   dispatch(bulkToggleControlPanel(false));
   dispatch(toggleControlPanel("power_and_reset"));
-  goToHardReset();
+  navigate(linkToSetting(DeviceSetting.hardReset));
 };
 
 /** For errors fetching data from releases API. */
diff --git a/frontend/settings/fbos_settings/ota_time_selector.tsx b/frontend/settings/fbos_settings/ota_time_selector.tsx
index c169555410..6ea1d68c28 100644
--- a/frontend/settings/fbos_settings/ota_time_selector.tsx
+++ b/frontend/settings/fbos_settings/ota_time_selector.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import moment from "moment";
 import { t } from "../../i18next_wrapper";
-import { FBSelect, Row, Col, DropDownItem, Help } from "../../ui";
+import { FBSelect, Row, DropDownItem, Help } from "../../ui";
 import { edit, save } from "../../api/crud";
 import { Content, DeviceSetting } from "../../constants";
 import { Highlight } from "../maybe_highlight";
@@ -72,20 +72,18 @@ export function OtaTimeSelectorRow(props: OtaTimeSelectorRowProps) {
   return <Highlight settingName={DeviceSetting.osAutoUpdate}
     hidden={!props.showAdvanced}
     className={"advanced"}>
-    <Row>
-      <Col xs={5}>
+    <Row className="grid-2-col">
+      <div>
         <label>
           {t(DeviceSetting.osAutoUpdate)}
         </label>
         <Help text={Content.OS_AUTO_UPDATE} />
-      </Col>
-      <Col xs={7}>
-        <OtaTimeSelector
-          sourceFbosConfig={props.sourceFbosConfig}
-          timeSettings={props.timeSettings}
-          dispatch={props.dispatch}
-          device={props.device} />
-      </Col>
+      </div>
+      <OtaTimeSelector
+        sourceFbosConfig={props.sourceFbosConfig}
+        timeSettings={props.timeSettings}
+        dispatch={props.dispatch}
+        device={props.device} />
     </Row>
   </Highlight>;
 }
diff --git a/frontend/settings/fbos_settings/rpi_model.tsx b/frontend/settings/fbos_settings/rpi_model.tsx
index c308cc6ac6..36760465d8 100644
--- a/frontend/settings/fbos_settings/rpi_model.tsx
+++ b/frontend/settings/fbos_settings/rpi_model.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, FBSelect, DropDownItem, Popover, Help } from "../../ui";
+import { Row, FBSelect, DropDownItem, Popover, Help } from "../../ui";
 import { DeviceSetting, ToolTips } from "../../constants";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
@@ -49,30 +49,25 @@ export const RpiModel = (props: RpiModelProps) => {
   return <Highlight settingName={DeviceSetting.raspberryPiModel}
     hidden={!props.showAdvanced}
     className={"advanced"}>
-    <Row>
-      <Col xs={5}>
+    <Row className="grid-2-col">
+      <div className="row grid-exp-2">
         <label>
           {t("Raspberry Pi model")}
         </label>
-      </Col>
-      <Col xs={1}>
         <Popover position={Position.TOP}
-          className={"status-details-target"}
           target={<StatusIcon available={!!target && target != "---"}
             status={check(selection, target)} />}
           content={<StatusDetails selection={selection} target={target}
             firmwareHardware={props.firmwareHardware} />} />
-      </Col>
-      <Col xs={6} className={"no-pad"}>
-        <FBSelect
-          key={selection}
-          list={Object.values(RPI_OPTIONS)}
-          selectedItem={RPI_OPTIONS["" + selection]}
-          onChange={ddi => {
-            props.dispatch(edit(props.device, { rpi: "" + ddi.value }));
-            props.dispatch(save(props.device.uuid));
-          }} />
-      </Col>
+      </div>
+      <FBSelect
+        key={selection}
+        list={Object.values(RPI_OPTIONS)}
+        selectedItem={RPI_OPTIONS["" + selection]}
+        onChange={ddi => {
+          props.dispatch(edit(props.device, { rpi: "" + ddi.value }));
+          props.dispatch(save(props.device.uuid));
+        }} />
     </Row>
   </Highlight>;
 };
diff --git a/frontend/settings/fbos_settings/timezone_row.tsx b/frontend/settings/fbos_settings/timezone_row.tsx
index adc291a674..5dc55680e5 100644
--- a/frontend/settings/fbos_settings/timezone_row.tsx
+++ b/frontend/settings/fbos_settings/timezone_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { DeviceSetting, Content } from "../../constants";
 import { TimezoneRowProps } from "./interfaces";
 import { t } from "../../i18next_wrapper";
@@ -27,18 +27,12 @@ export class TimezoneRow extends React.Component<TimezoneRowProps> {
 
   render() {
     return <Highlight settingName={DeviceSetting.timezone}>
-      <Row>
-        <Col xs={5}>
-          <label>
-            {t(DeviceSetting.timezone)}
-          </label>
-        </Col>
-        <Col xs={7}>
-          <this.Selector />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}><this.Note /></Col>
+      <Row className="grid-2-col timezone-grid">
+        <label>
+          {t(DeviceSetting.timezone)}
+        </label>
+        <this.Selector />
+        <this.Note />
       </Row>
     </Highlight>;
   }
diff --git a/frontend/settings/fbos_settings/z_height_inputs.tsx b/frontend/settings/fbos_settings/z_height_inputs.tsx
index e5ea74324a..091cb87a5c 100644
--- a/frontend/settings/fbos_settings/z_height_inputs.tsx
+++ b/frontend/settings/fbos_settings/z_height_inputs.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { DeviceSetting, ToolTips } from "../../constants";
 import { Highlight } from "../maybe_highlight";
 import { BotConfigInputBox } from "./bot_config_input_box";
@@ -17,56 +17,50 @@ export const GantryHeight = (props: ZHeightInputProps) => {
   const defaultValue =
     getDefaultConfigValue(firmwareHardware)("gantry_height") as number;
   return <Highlight settingName={DeviceSetting.gantryHeight}>
-    <Row>
-      <Col xs={8}>
+    <Row className="grid-exp-1">
+      <div>
         <label>
           {t(DeviceSetting.gantryHeight)}
         </label>
         <Help text={t(ToolTips.GANTRY_HEIGHT, { distance: defaultValue })}
           enableMarkdown={true} />
-      </Col>
-      <Col xs={4} className={"z-height-input low-pad"}>
-        <BotConfigInputBox
-          setting={"gantry_height"}
-          dispatch={props.dispatch}
-          sourceFbosConfig={sourceFbosConfig} />
-      </Col>
+      </div>
+      <BotConfigInputBox
+        setting={"gantry_height"}
+        dispatch={props.dispatch}
+        sourceFbosConfig={sourceFbosConfig} />
     </Row>
   </Highlight>;
 };
 
 export const SafeHeight = (props: ZHeightInputProps) =>
   <Highlight settingName={DeviceSetting.safeHeight}>
-    <Row>
-      <Col xs={8}>
+    <Row className="grid-exp-1">
+      <div>
         <label>
           {t(DeviceSetting.safeHeight)}
         </label>
         <Help text={ToolTips.SAFE_HEIGHT} />
-      </Col>
-      <Col xs={4} className={"z-height-input low-pad"}>
-        <BotConfigInputBox
-          setting={"safe_height"}
-          dispatch={props.dispatch}
-          sourceFbosConfig={props.sourceFbosConfig} />
-      </Col>
+      </div>
+      <BotConfigInputBox
+        setting={"safe_height"}
+        dispatch={props.dispatch}
+        sourceFbosConfig={props.sourceFbosConfig} />
     </Row>
   </Highlight>;
 
 export const SoilHeight = (props: ZHeightInputProps) =>
   <Highlight settingName={DeviceSetting.fallbackSoilHeight}>
-    <Row>
-      <Col xs={8}>
+    <Row className="grid-exp-1">
+      <div>
         <label>
           {t(DeviceSetting.fallbackSoilHeight)}
         </label>
         <Help text={ToolTips.FALLBACK_SOIL_HEIGHT} />
-      </Col>
-      <Col xs={4} className={"z-height-input low-pad"}>
-        <BotConfigInputBox
-          setting={"soil_height"}
-          dispatch={props.dispatch}
-          sourceFbosConfig={props.sourceFbosConfig} />
-      </Col>
+      </div>
+      <BotConfigInputBox
+        setting={"soil_height"}
+        dispatch={props.dispatch}
+        sourceFbosConfig={props.sourceFbosConfig} />
     </Row>
   </Highlight>;
diff --git a/frontend/settings/firmware/board_type.tsx b/frontend/settings/firmware/board_type.tsx
index b355a58ea4..4ac6442080 100644
--- a/frontend/settings/firmware/board_type.tsx
+++ b/frontend/settings/firmware/board_type.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, DropDownItem, FBSelect } from "../../ui";
+import { Row, DropDownItem, FBSelect } from "../../ui";
 import { info, warning } from "../../toast/toast";
 import { updateConfig } from "../../devices/actions";
 import { BoardTypeProps } from "./interfaces";
@@ -53,13 +53,11 @@ export class BoardType extends React.Component<BoardTypeProps, {}> {
 
   render() {
     return <Highlight settingName={DeviceSetting.firmware}>
-      <Row>
-        <Col xs={2}>
+      <Row className="grid-2-col">
+        <div className="row grid-exp-2">
           <label>
             {t("FIRMWARE")}
           </label>
-        </Col>
-        <Col xs={1}>
           <FirmwareHardwareStatus
             botOnline={this.props.botOnline}
             apiFirmwareValue={this.props.firmwareHardware}
@@ -67,16 +65,12 @@ export class BoardType extends React.Component<BoardTypeProps, {}> {
             bot={this.props.bot}
             dispatch={this.props.dispatch}
             timeSettings={this.props.timeSettings} />
-        </Col>
-        <Col xs={2}>
           <FlashFirmwareBtn
             short={true}
             apiFirmwareValue={this.props.firmwareHardware}
             botOnline={this.props.botOnline} />
-        </Col>
-        <Col xs={7} className="no-pad">
-          <this.FirmwareSelection />
-        </Col>
+        </div>
+        <this.FirmwareSelection />
       </Row>
     </Highlight>;
   }
diff --git a/frontend/settings/firmware/firmware_path.tsx b/frontend/settings/firmware/firmware_path.tsx
index d74428518f..63d4692275 100644
--- a/frontend/settings/firmware/firmware_path.tsx
+++ b/frontend/settings/firmware/firmware_path.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../../i18next_wrapper";
-import { FBSelect, DropDownItem, Row, Col } from "../../ui";
+import { FBSelect, DropDownItem, Row } from "../../ui";
 import { updateConfig } from "../../devices/actions";
 import { Highlight } from "../maybe_highlight";
 import { DeviceSetting } from "../../constants";
@@ -28,7 +28,7 @@ export const ChangeFirmwarePath = (props: ChangeFirmwarePathProps) => {
   const [manualInput, setManualInput] = React.useState("");
   const submit = (value: string) =>
     value && props.dispatch(updateConfig({ firmware_path: value }));
-  return <div className={"firmware-path-selection"}>
+  return <div className={"grid"}>
     <FBSelect
       key={selection + props.firmwarePath + fuzz}
       selectedItem={OPTIONS[selection]}
@@ -39,25 +39,21 @@ export const ChangeFirmwarePath = (props: ChangeFirmwarePathProps) => {
       }}
       list={Object.values(OPTIONS).filter(ddi => ddi.value)} />
     {selection == "manual" &&
-      <div className={"manual-selection"}>
+      <div className={"grid"}>
         <p>{t("Look for the 'Available UART devices' log message.")}</p>
-        <Col xs={7}>
-          <input type={"text"}
-            value={manualInput}
-            onChange={e => setManualInput(e.currentTarget.value)} />
-        </Col>
-        <Col xs={5}>
-          <button
-            className={"fb-button green"}
-            onClick={() => {
-              submit(manualInput);
-              setManualInput("");
-            }}
-            title={t("submit")}
-            disabled={!manualInput}>
-            {t("submit")}
-          </button>
-        </Col>
+        <input type={"text"}
+          value={manualInput}
+          onChange={e => setManualInput(e.currentTarget.value)} />
+        <button
+          className={"fb-button green"}
+          onClick={() => {
+            submit(manualInput);
+            setManualInput("");
+          }}
+          title={t("submit")}
+          disabled={!manualInput}>
+          {t("submit")}
+        </button>
       </div>}
   </div>;
 };
@@ -72,19 +68,15 @@ export const FirmwarePathRow = (props: FirmwarePathRowProps) =>
   <Highlight settingName={DeviceSetting.firmwarePath}
     hidden={!props.showAdvanced}
     className={"advanced"}>
-    <Row>
-      <Col xs={4}>
+    <Row className="grid-2-col align-baseline">
+      <div className="row grid-exp-1">
         <label>
           {t("Firmware path")}
         </label>
-      </Col>
-      <Col xs={3}>
         <code>{props.firmwarePath || t("not set")}</code>
-      </Col>
-      <Col xs={5} className={"no-pad"}>
-        <ChangeFirmwarePath
-          dispatch={props.dispatch}
-          firmwarePath={props.firmwarePath} />
-      </Col>
+      </div>
+      <ChangeFirmwarePath
+        dispatch={props.dispatch}
+        firmwarePath={props.firmwarePath} />
     </Row>
   </Highlight>;
diff --git a/frontend/settings/hardware_settings/__tests__/calibration_row_test.tsx b/frontend/settings/hardware_settings/__tests__/calibration_row_test.tsx
index eab670280b..ba88092b31 100644
--- a/frontend/settings/hardware_settings/__tests__/calibration_row_test.tsx
+++ b/frontend/settings/hardware_settings/__tests__/calibration_row_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { CalibrationRow } from "../calibration_row";
 import { bot } from "../../../__test_support__/fake_state/bot";
diff --git a/frontend/settings/hardware_settings/__tests__/encoder_type_test.tsx b/frontend/settings/hardware_settings/__tests__/encoder_type_test.tsx
index 2e541f97e4..b4e58dd16d 100644
--- a/frontend/settings/hardware_settings/__tests__/encoder_type_test.tsx
+++ b/frontend/settings/hardware_settings/__tests__/encoder_type_test.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
 import {
   EncoderType, EncoderTypeProps, LOOKUP, findByType, isEncoderValue,
 } from "../encoder_type";
 import { shallow } from "enzyme";
-import { FBSelect } from "../../../ui/index";
+import { FBSelect } from "../../../ui";
 import { Encoder } from "farmbot";
 
 describe("<EncoderType/>", () => {
diff --git a/frontend/settings/hardware_settings/__tests__/lockable_button_test.tsx b/frontend/settings/hardware_settings/__tests__/lockable_button_test.tsx
index ec270d6b17..c61ccf68eb 100644
--- a/frontend/settings/hardware_settings/__tests__/lockable_button_test.tsx
+++ b/frontend/settings/hardware_settings/__tests__/lockable_button_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { LockableButton, LockableButtonProps } from "../lockable_button";
 import { shallow } from "enzyme";
 
diff --git a/frontend/settings/hardware_settings/__tests__/single_setting_row_test.tsx b/frontend/settings/hardware_settings/__tests__/single_setting_row_test.tsx
index 9dc9b5cfbd..45d0739f87 100644
--- a/frontend/settings/hardware_settings/__tests__/single_setting_row_test.tsx
+++ b/frontend/settings/hardware_settings/__tests__/single_setting_row_test.tsx
@@ -11,18 +11,9 @@ describe("<SingleSettingRow />", () => {
     settingType: "button",
   });
 
-  it("renders button", () => {
+  it("renders", () => {
     const p = fakeProps();
     const wrapper = mount(<SingleSettingRow {...p} />);
     expect(wrapper.text()).toContain("child");
-    expect(wrapper.html()).toContain("centered-button-div");
-  });
-
-  it("renders input", () => {
-    const p = fakeProps();
-    p.settingType = "input";
-    const wrapper = mount(<SingleSettingRow {...p} />);
-    expect(wrapper.text()).toContain("child");
-    expect(wrapper.html()).not.toContain("centered-button-div");
   });
 });
diff --git a/frontend/settings/hardware_settings/__tests__/space_panel_header_test.tsx b/frontend/settings/hardware_settings/__tests__/space_panel_header_test.tsx
index ab590d5567..3ebd9b77b4 100644
--- a/frontend/settings/hardware_settings/__tests__/space_panel_header_test.tsx
+++ b/frontend/settings/hardware_settings/__tests__/space_panel_header_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { render } from "enzyme";
 import { SpacePanelHeader } from "../space_panel_header";
 
diff --git a/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx b/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx
index 59e253fd1a..ffbe83b7f8 100644
--- a/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx
+++ b/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { settingToggle } from "../../devices/actions";
-import { Row, Col, Help, ToggleButton } from "../../ui";
+import { Row, Help, ToggleButton } from "../../ui";
 import { BooleanMCUInputGroupProps } from "./interfaces";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
@@ -25,41 +25,34 @@ export class BooleanMCUInputGroup
     const xParam = sourceFwConfig(x);
     const yParam = sourceFwConfig(y);
     const zParam = sourceFwConfig(z);
-    const width = 3;
-    return <div className={"mcu-inputs"}>
-      <Col xs={width} className={"centered-button-div low-pad"}>
-        <ToggleButton dispatch={dispatch}
-          grayscale={grayscale?.x}
-          disabled={this.props.disabled || disable?.x}
-          dim={!xParam.consistent}
-          title={grayscale?.x ? disabledBy : undefined}
-          toggleValue={xParam.value}
-          className={this.wrapperClassName(x, xParam.value)}
-          toggleAction={() =>
-            dispatch(settingToggle(x, sourceFwConfig, displayAlert))} />
-      </Col>
-      <Col xs={width} className={"centered-button-div low-pad"}>
-        <ToggleButton dispatch={dispatch}
-          grayscale={grayscale?.y}
-          disabled={this.props.disabled || disable?.y}
-          dim={!yParam.consistent}
-          title={grayscale?.y ? disabledBy : undefined}
-          toggleValue={yParam.value}
-          className={this.wrapperClassName(y, yParam.value)}
-          toggleAction={() =>
-            dispatch(settingToggle(y, sourceFwConfig, displayAlert))} />
-      </Col>
-      <Col xs={width} className={"centered-button-div low-pad"}>
-        <ToggleButton dispatch={dispatch}
-          grayscale={grayscale?.z}
-          disabled={this.props.disabled || disable?.z}
-          dim={!zParam.consistent}
-          title={grayscale?.z ? disabledBy : undefined}
-          toggleValue={zParam.value}
-          className={this.wrapperClassName(z, zParam.value)}
-          toggleAction={() =>
-            dispatch(settingToggle(z, sourceFwConfig, displayAlert))} />
-      </Col>
+    return <div className={"mcu-inputs row no-gap"}>
+      <ToggleButton dispatch={dispatch}
+        grayscale={grayscale?.x}
+        disabled={this.props.disabled || disable?.x}
+        dim={!xParam.consistent}
+        title={grayscale?.x ? disabledBy : undefined}
+        toggleValue={xParam.value}
+        className={this.wrapperClassName(x, xParam.value)}
+        toggleAction={() =>
+          dispatch(settingToggle(x, sourceFwConfig, displayAlert))} />
+      <ToggleButton dispatch={dispatch}
+        grayscale={grayscale?.y}
+        disabled={this.props.disabled || disable?.y}
+        dim={!yParam.consistent}
+        title={grayscale?.y ? disabledBy : undefined}
+        toggleValue={yParam.value}
+        className={this.wrapperClassName(y, yParam.value)}
+        toggleAction={() =>
+          dispatch(settingToggle(y, sourceFwConfig, displayAlert))} />
+      <ToggleButton dispatch={dispatch}
+        grayscale={grayscale?.z}
+        disabled={this.props.disabled || disable?.z}
+        dim={!zParam.consistent}
+        title={grayscale?.z ? disabledBy : undefined}
+        toggleValue={zParam.value}
+        className={this.wrapperClassName(z, zParam.value)}
+        toggleAction={() =>
+          dispatch(settingToggle(z, sourceFwConfig, displayAlert))} />
     </div>;
   };
 
@@ -85,15 +78,15 @@ export class BooleanMCUInputGroup
     return <Highlight settingName={this.props.label}
       hidden={this.props.advanced && !(this.props.showAdvanced || this.anyModified)}
       className={this.props.advanced ? "advanced" : undefined}>
-      <Row>
-        <Col xs={3} className={"widget-body-tooltips"}>
+      <Row className="axes-grid">
+        <div>
           <label>
             {t(this.props.label)}
             {this.props.caution &&
               <i className="fa fa-exclamation-triangle caution-icon" />}
           </label>
           <Help text={this.tooltip} />
-        </Col>
+        </div>
         <this.Toggles />
       </Row>
     </Highlight>;
diff --git a/frontend/settings/hardware_settings/calibration_row.tsx b/frontend/settings/hardware_settings/calibration_row.tsx
index 5519205992..b7cd29b449 100644
--- a/frontend/settings/hardware_settings/calibration_row.tsx
+++ b/frontend/settings/hardware_settings/calibration_row.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { LockableButton } from "./lockable_button";
 import { axisTrackingStatus } from "./axis_tracking_status";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { CalibrationRowProps } from "./interfaces";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
@@ -12,13 +12,12 @@ export class CalibrationRow extends React.Component<CalibrationRowProps> {
     const {
       type, botOnline, axisTitle, mcuParams, action, arduinoBusy, locked,
     } = this.props;
-    return <div className="calibration-row-axes">
+    return <div className="calibration-row-axes row no-gap">
       {axisTrackingStatus(mcuParams, this.props.stallUseDisabled)
         .map(row => {
           const { axis } = row;
           const hardwareDisabled = type == "zero" ? false : row.disabled;
-          return <Col xs={3} key={axis}
-            className={"centered-button-div low-pad"}>
+          return <div key={axis}>
             <LockableButton
               disabled={arduinoBusy || hardwareDisabled || !botOnline}
               className={lockedClass(locked)}
@@ -26,20 +25,20 @@ export class CalibrationRow extends React.Component<CalibrationRowProps> {
               onClick={() => action(axis)}>
               {`${t(axisTitle)} ${axis}`}
             </LockableButton>
-          </Col>;
+          </div>;
         })}
     </div>;
   };
 
   render() {
     return <Highlight settingName={this.props.title}>
-      <Row>
-        <Col xs={3} className={"widget-body-tooltips"}>
+      <Row className="axes-grid">
+        <div>
           <label>
             {t(this.props.title)}
           </label>
           <Help text={t(this.props.toolTip)} />
-        </Col>
+        </div>
         <this.Axes />
       </Row>
     </Highlight>;
diff --git a/frontend/settings/hardware_settings/limit_switches.tsx b/frontend/settings/hardware_settings/limit_switches.tsx
index 55832b5c3d..b0e401dd8c 100644
--- a/frontend/settings/hardware_settings/limit_switches.tsx
+++ b/frontend/settings/hardware_settings/limit_switches.tsx
@@ -42,7 +42,7 @@ export function LimitSwitches(props: LimitSwitchesProps) {
       dispatch={dispatch} />
     <Collapse isOpen={!!limit_switches}>
       <Highlight settingName={DeviceSetting.limitSwitchesWarning}>
-        <div className="limit-switch-warning">
+        <div className="settings-warning-banner">
           <p>{t(Content.LIMIT_SWITCH_WARNING)}</p>
         </div>
       </Highlight>
diff --git a/frontend/settings/hardware_settings/motors.tsx b/frontend/settings/hardware_settings/motors.tsx
index 705aa8cd02..6284390573 100644
--- a/frontend/settings/hardware_settings/motors.tsx
+++ b/frontend/settings/hardware_settings/motors.tsx
@@ -13,7 +13,7 @@ import { isTMCBoard } from "../firmware/firmware_hardware_support";
 import { SingleSettingRow } from "./single_setting_row";
 import { Highlight } from "../maybe_highlight";
 import { SpacePanelHeader } from "./space_panel_header";
-import { Col, Help, Row, ToggleButton } from "../../ui";
+import { Help, Row, ToggleButton } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { McuInputBox } from "./mcu_input_box";
 import { getDefaultFwConfigValue, getModifiedClassName } from "./default_values";
@@ -58,10 +58,10 @@ export function Motors(props: MotorsProps) {
       title={DeviceSetting.motors}
       panel={"motors"}
       dispatch={dispatch} />
-    {settingsPanelState.motors &&
-      <Help customClass={"hw-warn"} text={ToolTips.HW_SETTINGS}
-        customIcon={"fa-exclamation-triangle"} />}
     <Collapse isOpen={!!settingsPanelState.motors}>
+      <div className="settings-warning-banner">
+        <p>{t(ToolTips.HW_SETTINGS)}</p>
+      </div>
       <SpacePanelHeader />
       <NumericMCUInputGroup {...commonProps}
         label={DeviceSetting.maxSpeed}
@@ -73,8 +73,8 @@ export function Motors(props: MotorsProps) {
         yScale={scale.y}
         zScale={scale.z} />
       <Highlight settingName={DeviceSetting.maxSpeedTowardHome}>
-        <Row>
-          <Col xs={8} className={"z-param-label"}>
+        <Row className="z-setting-grid">
+          <div>
             <label>
               {t(DeviceSetting.maxSpeedTowardHome)}
             </label>
@@ -82,12 +82,10 @@ export function Motors(props: MotorsProps) {
               text={t(ToolTips.MAX_SPEED_Z_TOWARD_HOME, {
                 z: getDefault("movement_max_spd_z2") / scale.z
               })} />
-          </Col>
-          <Col xs={4} className={"z-param-input low-pad"}>
-            <McuInputBox {...commonProps}
-              setting={"movement_max_spd_z2"}
-              scale={scale.z} />
-          </Col>
+          </div>
+          <McuInputBox {...commonProps}
+            setting={"movement_max_spd_z2"}
+            scale={scale.z} />
         </Row>
       </Highlight>
       <NumericMCUInputGroup {...commonProps}
@@ -110,8 +108,8 @@ export function Motors(props: MotorsProps) {
         yScale={scale.y}
         zScale={scale.z} />
       <Highlight settingName={DeviceSetting.minimumSpeedTowardHome}>
-        <Row>
-          <Col xs={8} className={"z-param-label"}>
+        <Row className="z-setting-grid">
+          <div>
             <label>
               {t(DeviceSetting.minimumSpeedTowardHome)}
             </label>
@@ -119,12 +117,10 @@ export function Motors(props: MotorsProps) {
               text={t(ToolTips.MIN_SPEED_Z_TOWARD_HOME, {
                 z: getDefault("movement_min_spd_z2") / scale.z
               })} />
-          </Col>
-          <Col xs={4} className={"z-param-input low-pad"}>
-            <McuInputBox {...commonProps}
-              setting={"movement_min_spd_z2"}
-              scale={scale.z} />
-          </Col>
+          </div>
+          <McuInputBox {...commonProps}
+            setting={"movement_min_spd_z2"}
+            scale={scale.z} />
         </Row>
       </Highlight>
       <NumericMCUInputGroup {...commonProps}
@@ -137,8 +133,8 @@ export function Motors(props: MotorsProps) {
         yScale={scale.y}
         zScale={scale.z} />
       <Highlight settingName={DeviceSetting.accelerateForTowardHome}>
-        <Row>
-          <Col xs={8} className={"z-param-label"}>
+        <Row className="z-setting-grid">
+          <div>
             <label>
               {t(DeviceSetting.accelerateForTowardHome)}
             </label>
@@ -146,12 +142,10 @@ export function Motors(props: MotorsProps) {
               text={t(ToolTips.ACCELERATE_FOR_Z_TOWARD_HOME, {
                 z: getDefault("movement_steps_acc_dec_z2") / scale.z
               })} />
-          </Col>
-          <Col xs={4} className={"z-param-input low-pad"}>
-            <McuInputBox {...commonProps}
-              setting={"movement_steps_acc_dec_z2"}
-              scale={scale.z} />
-          </Col>
+          </div>
+          <McuInputBox {...commonProps}
+            setting={"movement_steps_acc_dec_z2"}
+            scale={scale.z} />
         </Row>
       </Highlight>
       <NumericMCUInputGroup {...commonProps}
diff --git a/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx b/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx
index 4c562fdbf7..83bdffb4c5 100644
--- a/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx
+++ b/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { McuInputBox, microstepScaledConfig } from "./mcu_input_box";
 import { NumericMCUInputGroupProps } from "./interfaces";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { Highlight } from "../maybe_highlight";
 import { t } from "../../i18next_wrapper";
 import { getDefaultFwConfigValue } from "./default_values";
@@ -29,34 +29,28 @@ export class NumericMCUInputGroup
       toInput,
       fromInput,
     };
-    return <div className={"mcu-inputs"}>
-      <Col xs={3} className={"low-pad"}>
-        <McuInputBox {...commonProps}
-          setting={x}
-          scale={xScale}
-          title={gray?.x ? disabledBy : undefined}
-          warnMin={warnMin?.x}
-          warning={warning?.x}
-          gray={gray?.x} />
-      </Col>
-      <Col xs={3} className={"low-pad"}>
-        <McuInputBox {...commonProps}
-          setting={y}
-          scale={yScale}
-          title={gray?.y ? disabledBy : undefined}
-          warnMin={warnMin?.y}
-          warning={warning?.y}
-          gray={gray?.y} />
-      </Col>
-      <Col xs={3} className={"low-pad"}>
-        <McuInputBox {...commonProps}
-          setting={z}
-          scale={zScale}
-          title={gray?.z ? disabledBy : undefined}
-          warnMin={warnMin?.z}
-          warning={warning?.z}
-          gray={gray?.z} />
-      </Col>
+    return <div className={"mcu-inputs row"}>
+      <McuInputBox {...commonProps}
+        setting={x}
+        scale={xScale}
+        title={gray?.x ? disabledBy : undefined}
+        warnMin={warnMin?.x}
+        warning={warning?.x}
+        gray={gray?.x} />
+      <McuInputBox {...commonProps}
+        setting={y}
+        scale={yScale}
+        title={gray?.y ? disabledBy : undefined}
+        warnMin={warnMin?.y}
+        warning={warning?.y}
+        gray={gray?.y} />
+      <McuInputBox {...commonProps}
+        setting={z}
+        scale={zScale}
+        title={gray?.z ? disabledBy : undefined}
+        warnMin={warnMin?.z}
+        warning={warning?.z}
+        gray={gray?.z} />
     </div>;
   };
 
@@ -110,13 +104,13 @@ export class NumericMCUInputGroup
         (this.props.advanced && !(this.props.showAdvanced || this.anyModified)
           && !this.error)}
       className={this.props.advanced ? "advanced" : undefined}>
-      <Row>
-        <Col xs={3} className={"widget-body-tooltips"}>
+      <Row className="axes-grid">
+        <div>
           <label>
             {t(label)}
           </label>
           <Help text={this.tooltip} />
-        </Col>
+        </div>
         <this.Inputs />
       </Row>
     </Highlight>;
diff --git a/frontend/settings/hardware_settings/parameter_management.tsx b/frontend/settings/hardware_settings/parameter_management.tsx
index ccc25916f2..77e7f5aae8 100644
--- a/frontend/settings/hardware_settings/parameter_management.tsx
+++ b/frontend/settings/hardware_settings/parameter_management.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ParameterManagementProps, ShowAdvancedToggleProps } from "./interfaces";
-import { Row, Col, BlurableInput, Help, ToggleButton, Popover } from "../../ui";
+import { Row, BlurableInput, Help, ToggleButton, Popover } from "../../ui";
 import { Header } from "./header";
 import { Collapse, Position } from "@blueprintjs/core";
 import { Content, DeviceSetting, ToolTips } from "../../constants";
@@ -34,51 +34,41 @@ export function ParameterManagement(props: ParameterManagementProps) {
     <Collapse isOpen={!!parameter_management}>
       <Highlight settingName={DeviceSetting.paramLoadProgress}>
         <Row>
-          <Col xs={7}>
+          <div>
             <label style={{ lineHeight: "1.5rem", display: "inline" }}>
               {t(DeviceSetting.paramLoadProgress)}
             </label>
             <Help text={ToolTips.PARAMETER_LOAD_PROGRESS} />
-          </Col>
-          <Col xs={5} className={"centered-button-div"}>
-            <SettingLoadProgress botOnline={botOnline}
-              firmwareHardware={firmwareHardware}
-              firmwareConfig={props.firmwareConfig}
-              sourceFwConfig={props.sourceFwConfig} />
-          </Col>
+          </div>
+          <SettingLoadProgress botOnline={botOnline}
+            firmwareHardware={firmwareHardware}
+            firmwareConfig={props.firmwareConfig}
+            sourceFwConfig={props.sourceFwConfig} />
         </Row>
       </Highlight>
       <Highlight settingName={DeviceSetting.paramResend}>
-        <Row>
-          <Col xs={8}>
-            <label style={{ lineHeight: "1.5rem" }}>
-              {t(DeviceSetting.paramResend)}
-            </label>
-          </Col>
-          <Col xs={4} className={"centered-button-div"}>
-            <button
-              className="fb-button yellow"
-              disabled={arduinoBusy || !botOnline}
-              title={t("RESEND")}
-              onClick={() => dispatch(resendParameters())}>
-              {t("RESEND")}
-            </button>
-          </Col>
+        <Row className="grid-exp-1">
+          <label style={{ lineHeight: "1.5rem" }}>
+            {t(DeviceSetting.paramResend)}
+          </label>
+          <button
+            className="fb-button yellow"
+            disabled={arduinoBusy || !botOnline}
+            title={t("RESEND")}
+            onClick={() => dispatch(resendParameters())}>
+            {t("RESEND")}
+          </button>
         </Row>
       </Highlight>
       <Highlight settingName={DeviceSetting.exportParameters}>
-        <Row>
-          <Col xs={8}>
-            <label style={{ lineHeight: "1.5rem" }}>
-              {t(DeviceSetting.exportParameters)}
-            </label>
-          </Col>
-          <Col xs={4} className={"centered-button-div"}>
-            <Popover position={Position.BOTTOM_RIGHT}
-              target={<i className="fa fa-download" />}
-              content={
-                <FwParamExportMenu firmwareConfig={props.firmwareConfig} />} />
-          </Col>
+        <Row className="grid-exp-1">
+          <label style={{ lineHeight: "1.5rem" }}>
+            {t(DeviceSetting.exportParameters)}
+          </label>
+          <Popover position={Position.BOTTOM_RIGHT}
+            target={<i className="fa fa-download" />}
+            content={
+              <FwParamExportMenu firmwareConfig={props.firmwareConfig} />} />
         </Row>
       </Highlight>
       <ParameterImport dispatch={dispatch} arduinoBusy={arduinoBusy} />
@@ -91,22 +81,20 @@ export function ParameterManagement(props: ParameterManagementProps) {
         <ShowAdvancedToggle dispatch={dispatch} getConfigValue={getConfigValue} />
       </Highlight>
       <Highlight settingName={DeviceSetting.resetHardwareParams}>
-        <Row>
-          <Col xs={8}>
+        <Row className="grid-exp-1">
+          <div>
             <label style={{ lineHeight: "1.5rem" }}>
               {t(DeviceSetting.resetHardwareParams)}
             </label>
             <Help text={Content.RESTORE_DEFAULT_HARDWARE_SETTINGS} />
-          </Col>
-          <Col xs={4} className={"centered-button-div"}>
-            <button
-              className="fb-button red"
-              disabled={arduinoBusy || !botOnline}
-              title={t("RESET")}
-              onClick={onReset}>
-              {t("RESET")}
-            </button>
-          </Col>
+          </div>
+          <button
+            className="fb-button red"
+            disabled={arduinoBusy || !botOnline}
+            title={t("RESET")}
+            onClick={onReset}>
+            {t("RESET")}
+          </button>
         </Row>
       </Highlight>
     </Collapse>
@@ -127,29 +115,23 @@ export class ParameterImport
   state: ParameterImportState = { input: "" };
   render() {
     return <Highlight settingName={DeviceSetting.importParameters}>
-      <Row>
-        <Col xs={12}>
+      <Row className="grid-exp-2">
+        <div>
           <label>
             {t(DeviceSetting.importParameters)}
           </label>
           <Help text={ToolTips.PARAMETER_IMPORT} />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={9} className={"centered-button-div"}>
-          <BlurableInput value={this.state.input} onCommit={e =>
-            this.setState({ input: e.currentTarget.value })} />
-        </Col>
-        <Col xs={3} className={"centered-button-div"}>
-          <button
-            className="fb-button yellow"
-            disabled={this.props.arduinoBusy}
-            title={t("IMPORT")}
-            onClick={() => confirm(Content.PARAMETER_IMPORT_CONFIRM) &&
-              this.props.dispatch(importParameters(this.state.input))}>
-            {t("IMPORT")}
-          </button>
-        </Col>
+        </div>
+        <BlurableInput value={this.state.input} onCommit={e =>
+          this.setState({ input: e.currentTarget.value })} />
+        <button
+          className="fb-button yellow"
+          disabled={this.props.arduinoBusy}
+          title={t("IMPORT")}
+          onClick={() => confirm(Content.PARAMETER_IMPORT_CONFIRM) &&
+            this.props.dispatch(importParameters(this.state.input))}>
+          {t("IMPORT")}
+        </button>
       </Row>
     </Highlight>;
   }
@@ -158,7 +140,7 @@ export class ParameterImport
 export const ShowAdvancedToggle = (props: ShowAdvancedToggleProps) => {
   const showAdvanced = !!props.getConfigValue(
     BooleanSetting.show_advanced_settings);
-  return <div className={"show-advanced-toggle"}>
+  return <div className={"row grid-exp-1"}>
     <label>{t(DeviceSetting.showAdvancedSettings)}</label>
     <ToggleButton
       className={getModifiedClassName(BooleanSetting.show_advanced_settings)}
diff --git a/frontend/settings/hardware_settings/pin_guard.tsx b/frontend/settings/hardware_settings/pin_guard.tsx
index ab834f9ac7..b8a42ef36e 100644
--- a/frontend/settings/hardware_settings/pin_guard.tsx
+++ b/frontend/settings/hardware_settings/pin_guard.tsx
@@ -5,7 +5,7 @@ import { Header } from "./header";
 import { Collapse } from "@blueprintjs/core";
 import { DeviceSetting, ToolTips } from "../../constants";
 import { Highlight } from "../maybe_highlight";
-import { Col, Help, Row } from "../../ui";
+import { Help, Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
 export function PinGuard(props: PinGuardProps) {
@@ -25,23 +25,19 @@ export function PinGuard(props: PinGuardProps) {
       dispatch={props.dispatch} />
     <Collapse isOpen={!!props.settingsPanelState.pin_guard}>
       <Highlight settingName={DeviceSetting.pinGuardLabels}>
-        <Row>
-          <Col xs={5}>
+        <Row className="pin-guard-grid">
+          <div>
             <label>
               {t("Pin")}
             </label>
             <Help text={ToolTips.PIN_GUARD_PIN_NUMBER} />
-          </Col>
-          <Col xs={4}>
-            <label>
-              {t("Timeout (sec)")}
-            </label>
-          </Col>
-          <Col xs={3}>
-            <label>
-              {t("To State")}
-            </label>
-          </Col>
+          </div>
+          <label>
+            {t("Timeout (sec)")}
+          </label>
+          <label>
+            {t("To State")}
+          </label>
         </Row>
       </Highlight>
       <PinGuardMCUInputGroup {...commonProps}
diff --git a/frontend/settings/hardware_settings/pin_guard_input_group.tsx b/frontend/settings/hardware_settings/pin_guard_input_group.tsx
index cda581aa00..b6827c9e26 100644
--- a/frontend/settings/hardware_settings/pin_guard_input_group.tsx
+++ b/frontend/settings/hardware_settings/pin_guard_input_group.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { McuInputBox } from "./mcu_input_box";
 import { PinGuardMCUInputGroupProps } from "./interfaces";
-import { Row, Col, ToggleButton } from "../../ui";
+import { Row, ToggleButton } from "../../ui";
 import { settingToggle } from "../../devices/actions";
 import { isUndefined } from "lodash";
 import { t } from "../../i18next_wrapper";
@@ -52,16 +52,10 @@ export class PinGuardMCUInputGroup
     const { label } = this.props;
     return <Highlight settingName={label}>
       <div className={"pin-guard-input-row"}>
-        <Row>
-          <Col xs={5}>
-            <this.Number />
-          </Col>
-          <Col xs={4}>
-            <this.Timeout />
-          </Col>
-          <Col xs={3}>
-            <this.State />
-          </Col>
+        <Row className="pin-guard-grid">
+          <this.Number />
+          <this.Timeout />
+          <this.State />
         </Row>
       </div>
     </Highlight>;
diff --git a/frontend/settings/hardware_settings/pin_reporting_input_group.tsx b/frontend/settings/hardware_settings/pin_reporting_input_group.tsx
index 78c1f09238..d8442b9b9a 100644
--- a/frontend/settings/hardware_settings/pin_reporting_input_group.tsx
+++ b/frontend/settings/hardware_settings/pin_reporting_input_group.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { PinReportingMCUInputGroupProps } from "./interfaces";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { PinNumberDropdown } from "./pin_number_dropdown";
 import { ToolTips } from "../../constants";
@@ -20,19 +20,15 @@ export class PinReportingMCUInputGroup
   render() {
     const { label } = this.props;
     return <Highlight settingName={label}>
-      <div className={"pin-reporting-input-row"}>
-        <Row>
-          <Col xs={6}>
-            <label>
-              {t(label)}
-            </label>
-            <Help text={ToolTips.PIN_REPORTING_PIN_NUMBER} />
-          </Col>
-          <Col xs={5} className="no-pad">
-            <this.Number />
-          </Col>
-        </Row>
-      </div>
+      <Row className="grid-2-col">
+        <div className="row grid-exp-2">
+          <label>
+            {t(label)}
+          </label>
+          <Help text={ToolTips.PIN_REPORTING_PIN_NUMBER} />
+        </div>
+        <this.Number />
+      </Row>
     </Highlight>;
   }
 }
diff --git a/frontend/settings/hardware_settings/single_setting_row.tsx b/frontend/settings/hardware_settings/single_setting_row.tsx
index 7e6203b945..5d93206d08 100644
--- a/frontend/settings/hardware_settings/single_setting_row.tsx
+++ b/frontend/settings/hardware_settings/single_setting_row.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, Help } from "../../ui";
+import { Row, Help } from "../../ui";
 import { Position } from "@blueprintjs/core";
 import { DeviceSetting } from "../../constants";
 import { Highlight } from "../maybe_highlight";
@@ -8,7 +8,7 @@ import { t } from "../../i18next_wrapper";
 export interface SingleSettingRowProps {
   label: DeviceSetting;
   tooltip: string;
-  children: React.ReactChild;
+  children: React.ReactNode;
   settingType: "button" | "input";
   advanced?: boolean;
   showAdvanced?: boolean;
@@ -16,20 +16,16 @@ export interface SingleSettingRowProps {
 }
 
 export const SingleSettingRow = (props: SingleSettingRowProps) => {
-  const { label, tooltip, settingType, children } = props;
+  const { label, tooltip, children } = props;
   return <Highlight settingName={label}
     hidden={props.advanced && !(props.showAdvanced || props.modified)}
     className={props.advanced ? "advanced" : undefined}>
-    <Row className={"single-setting-row"}>
-      <Col xs={7} className={"widget-body-tooltips"}>
+    <Row className={"single-setting-grid"}>
+      <div>
         <label>{t(label)}</label>
         <Help text={tooltip} position={Position.RIGHT} />
-      </Col>
-      {settingType === "button"
-        ? <Col xs={5} className={"centered-button-div low-pad"}>
-          {children}
-        </Col>
-        : <Col xs={5} className={"low-pad"}>{children}</Col>}
+      </div>
+      {children}
     </Row>
   </Highlight>;
 };
diff --git a/frontend/settings/hardware_settings/space_panel_header.tsx b/frontend/settings/hardware_settings/space_panel_header.tsx
index 1a5fb378a9..4817cfc720 100644
--- a/frontend/settings/hardware_settings/space_panel_header.tsx
+++ b/frontend/settings/hardware_settings/space_panel_header.tsx
@@ -1,29 +1,24 @@
 import React from "react";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 import { DeviceSetting } from "../../constants";
 
 export function SpacePanelHeader() {
-  const width = 3;
   return <div className="label-headings">
     <Highlight settingName={DeviceSetting.axisHeadingLabels}>
-      <Row>
-        <Col xsOffset={3} xs={width} className={"centered-button-div low-pad"}>
-          <label>
-            {t("X AXIS")}
-          </label>
-        </Col>
-        <Col xs={width} className={"centered-button-div low-pad"}>
-          <label>
-            {t("Y AXIS")}
-          </label>
-        </Col>
-        <Col xs={width} className={"centered-button-div low-pad"}>
-          <label>
-            {t("Z AXIS")}
-          </label>
-        </Col>
+      <div></div>
+      <Row className="axes-grid-header">
+        <div></div>
+        <label>
+          {t("X AXIS")}
+        </label>
+        <label>
+          {t("Y AXIS")}
+        </label>
+        <label>
+          {t("Z AXIS")}
+        </label>
       </Row>
     </Highlight>
   </div>;
diff --git a/frontend/settings/index.tsx b/frontend/settings/index.tsx
index 17510dea98..5fc78b4ea3 100644
--- a/frontend/settings/index.tsx
+++ b/frontend/settings/index.tsx
@@ -4,7 +4,7 @@ import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { MCUFactoryReset } from "../devices/actions";
 import { FarmBotSettings } from "./fbos_settings/farmbot_os_settings";
 import { PowerAndReset } from "./fbos_settings/power_and_reset";
@@ -35,9 +35,10 @@ import {
   InterpolationSettings,
 } from "../farm_designer/map/layers/points/interpolation_map";
 import { getUrlQuery, urlFriendly } from "../util";
-import { push } from "../history";
 import { Popover } from "../ui";
 import { Position } from "@blueprintjs/core";
+import { NavigationContext } from "../routes_helpers";
+import { ThreeDSettings } from "./three_d_settings";
 
 export class RawDesignerSettings
   extends React.Component<DesignerSettingsProps, {}> {
@@ -51,6 +52,10 @@ export class RawDesignerSettings
     });
   };
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   render() {
     const { getConfigValue, dispatch, firmwareConfig,
       sourceFwConfig, sourceFbosConfig, resources, settingsPanelState,
@@ -67,27 +72,28 @@ export class RawDesignerSettings
       payload: urlSearchTerm,
     });
     return <DesignerPanel panelName={"settings"} panel={Panel.Settings}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Settings} withButton={true}>
         <SearchField nameKey={"settings"}
           placeholder={t("Search settings...")}
           searchTerm={this.props.searchTerm}
           onChange={searchTerm => {
-            getUrlQuery("search") && push(location.pathname);
+            getUrlQuery("search") && this.navigate(location.pathname);
             dispatch(bulkToggleControlPanel(searchTerm != ""));
             dispatch({
               type: Actions.SET_SETTINGS_SEARCH_TERM,
               payload: searchTerm,
             });
           }} />
-        <Popover
-          position={Position.BOTTOM}
-          popoverClassName={"settings-panel-settings-menu"}
-          target={<i className={"fa fa-gear fb-icon-button"} />}
-          content={<ShowAdvancedToggle
-            dispatch={dispatch}
-            getConfigValue={getConfigValue} />} />
-        <ToggleSettingsOpen dispatch={dispatch} panels={settingsPanelState} />
+        <div className="row no-gap">
+          <Popover
+            position={Position.BOTTOM}
+            popoverClassName={"settings-panel-settings-menu"}
+            target={<i className={"fa fa-gear fb-icon-button invert"} />}
+            content={<ShowAdvancedToggle
+              dispatch={dispatch}
+              getConfigValue={getConfigValue} />} />
+          <ToggleSettingsOpen dispatch={dispatch} panels={settingsPanelState} />
+        </div>
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"settings"}>
         {getUrlQuery("only") && !this.props.searchTerm &&
@@ -142,7 +148,7 @@ export class RawDesignerSettings
           resources={resources}
           firmwareHardware={firmwareHardware}
           sourceFwConfig={sourceFwConfig} />
-        {showByEveryTerm("pin reporting", this.props.searchTerm) &&
+        {showByTerm("pin reporting", this.props.searchTerm) &&
           <PinReporting {...commonProps}
             arduinoBusy={busy}
             resources={resources}
@@ -161,6 +167,10 @@ export class RawDesignerSettings
           farmwareEnvs={this.props.farmwareEnvs} />
         <Designer {...commonProps}
           getConfigValue={getConfigValue} />
+        {showByTerm("3d", this.props.searchTerm) &&
+          <ThreeDSettings {...commonProps}
+            distanceIndicator={this.props.distanceIndicator}
+            farmwareEnvs={this.props.farmwareEnvs} />}
         <AccountSettings {...commonProps}
           user={this.props.user}
           getConfigValue={getConfigValue} />
@@ -195,3 +205,5 @@ export const showByEveryTerm = (term: string, searchTerm: string) =>
   searchTerm == term && getHighlightName() == urlFriendly(term).toLowerCase();
 
 export const DesignerSettings = connect(mapStateToProps)(RawDesignerSettings);
+// eslint-disable-next-line import/no-default-export
+export default DesignerSettings;
diff --git a/frontend/settings/interfaces.ts b/frontend/settings/interfaces.ts
index f923d6be71..83db7ffc9d 100644
--- a/frontend/settings/interfaces.ts
+++ b/frontend/settings/interfaces.ts
@@ -35,6 +35,7 @@ export interface DesignerSettingsProps extends DesignerSettingsPropsBase {
   farmwareEnvs: TaggedFarmwareEnv[];
   wizardStepResults: TaggedWizardStepResult[];
   settingsPanelState: SettingsPanelState;
+  distanceIndicator: string;
 }
 
 export interface DesignerSettingsSectionProps {
@@ -50,7 +51,7 @@ export interface SettingDescriptionProps {
   description: string;
   invert?: boolean;
   callback?: () => void;
-  children?: React.ReactChild;
+  children?: React.ReactNode;
   defaultOn?: boolean;
   disabled?: boolean;
   confirm?: string;
@@ -70,6 +71,13 @@ export interface CustomSettingsProps {
   farmwareEnvs: TaggedFarmwareEnv[];
 }
 
+export interface ThreeDSettingsProps {
+  dispatch: Function;
+  settingsPanelState: SettingsPanelState;
+  farmwareEnvs: TaggedFarmwareEnv[];
+  distanceIndicator: string;
+}
+
 export interface OtherSettingsProps {
   dispatch: Function;
   settingsPanelState: SettingsPanelState;
diff --git a/frontend/settings/maybe_highlight.tsx b/frontend/settings/maybe_highlight.tsx
index 0eb1bb8204..1278b8b243 100644
--- a/frontend/settings/maybe_highlight.tsx
+++ b/frontend/settings/maybe_highlight.tsx
@@ -5,9 +5,9 @@ import { toggleControlPanel, bulkToggleControlPanel } from "./toggle_section";
 import { getUrlQuery, urlFriendly } from "../util";
 import { Actions, DeviceSetting } from "../constants";
 import { trim, some } from "lodash";
-import { push } from "../history";
 import { Path } from "../internal_urls";
 import { PhotosPanelState } from "../photos/interfaces";
+import { NavigationContext } from "../routes_helpers";
 
 const FARMBOT_PANEL = [
   DeviceSetting.farmbotSettings,
@@ -146,6 +146,21 @@ const FARM_DESIGNER_PANEL = [
   DeviceSetting.confirmPlantDeletion,
   DeviceSetting.defaultPlantDepth,
 ];
+const THREE_D_PANEL = [
+  DeviceSetting.threeDGarden,
+  DeviceSetting.bedWallThickness,
+  DeviceSetting.bedHeight,
+  DeviceSetting.ccSupportSize,
+  DeviceSetting.beamLength,
+  DeviceSetting.columnLength,
+  DeviceSetting.zAxisLength,
+  DeviceSetting.bedXOffset,
+  DeviceSetting.bedYOffset,
+  DeviceSetting.bedZOffset,
+  DeviceSetting.legSize,
+  DeviceSetting.bounds,
+  DeviceSetting.grid,
+];
 const ACCOUNT_PANEL = [
   DeviceSetting.accountSettings,
   DeviceSetting.accountName,
@@ -168,6 +183,7 @@ const MAP_SETTINGS = [
   DeviceSetting.showAreasMapLayer,
   DeviceSetting.showReadingsMapLayer,
   DeviceSetting.showMoistureInterpolationMapLayer,
+  DeviceSetting.show3DMap,
 ];
 const CONTROLS_SETTINGS = [
   DeviceSetting.invertXAxisJogButton,
@@ -212,6 +228,7 @@ const APP_SETTINGS = [
   DeviceSetting.discardUnsavedChanges,
   DeviceSetting.confirmEmergencyUnlock,
   DeviceSetting.userInterfaceReadOnlyMode,
+  DeviceSetting.darkMode,
 ];
 const FILTER = [
   DeviceSetting.showPhotos,
@@ -286,6 +303,7 @@ PIN_REPORTING_PANEL.map(s => SETTING_PANEL_LOOKUP[s] = "pin_reporting");
 PARAMETER_MANAGEMENT.map(s => SETTING_PANEL_LOOKUP[s] = "parameter_management");
 CUSTOM_SETTINGS_PANEL.map(s => SETTING_PANEL_LOOKUP[s] = "custom_settings");
 FARM_DESIGNER_PANEL.map(s => SETTING_PANEL_LOOKUP[s] = "farm_designer");
+THREE_D_PANEL.map(s => SETTING_PANEL_LOOKUP[s] = "three_d");
 ACCOUNT_PANEL.map(s => SETTING_PANEL_LOOKUP[s] = "account");
 APP_SETTINGS.map(s => SETTING_PANEL_LOOKUP[s] = "account");
 CONTROLS_SETTINGS.map(s => SETTING_PANEL_LOOKUP[s] = "other_settings");
@@ -318,6 +336,7 @@ CONTENT_LOOKUP[DeviceSetting.pinBindings] = PIN_BINDINGS_PANEL;
 CONTENT_LOOKUP[DeviceSetting.pinGuard] = PIN_GUARD_PANEL;
 CONTENT_LOOKUP[DeviceSetting.parameterManagement] = PARAMETER_MANAGEMENT;
 CONTENT_LOOKUP[DeviceSetting.customSettings] = CUSTOM_SETTINGS_PANEL;
+CONTENT_LOOKUP[DeviceSetting.threeDGarden] = THREE_D_PANEL;
 CONTENT_LOOKUP[DeviceSetting.farmDesigner] = FARM_DESIGNER_PANEL;
 CONTENT_LOOKUP[DeviceSetting.accountSettings] = ACCOUNT_PANEL
   .concat(APP_SETTINGS);
@@ -368,6 +387,8 @@ ALTERNATE_NAMES[DeviceSetting.pinGuard2].push(DeviceSetting.pinGuardTitles);
 ALTERNATE_NAMES[DeviceSetting.pinGuard3].push(DeviceSetting.pinGuardTitles);
 ALTERNATE_NAMES[DeviceSetting.pinGuard4].push(DeviceSetting.pinGuardTitles);
 ALTERNATE_NAMES[DeviceSetting.pinGuard5].push(DeviceSetting.pinGuardTitles);
+THREE_D_PANEL.map(settingName =>
+  ALTERNATE_NAMES[settingName].push(DeviceSetting.threeDGarden));
 
 /** Generate array of names for the same setting. Most only have one. */
 const compareValues = (settingName: DeviceSetting) =>
@@ -417,10 +438,7 @@ export const maybeHighlight = (settingName: DeviceSetting) => {
 
 export interface HighlightProps {
   settingName: DeviceSetting;
-  children: React.ReactChild
-  | React.ReactChild[]
-  | (React.ReactChild | false)[]
-  | (React.ReactChild | React.ReactChild[])[];
+  children: React.ReactNode;
   className?: string;
   searchTerm?: string;
   hidden?: boolean;
@@ -492,6 +510,10 @@ export class Highlight extends React.Component<HighlightProps, HighlightState> {
     return this.props.hidden ? !highlightInSection : notHighlighted;
   }
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   render() {
     const hoverClass = this.state.hovered ? "hovered" : "";
     return <div
@@ -503,18 +525,17 @@ export class Highlight extends React.Component<HighlightProps, HighlightState> {
       onMouseEnter={this.toggleHover(true)}
       onMouseLeave={this.toggleHover(false)}
       hidden={this.searchTerm ? !this.searchMatch : this.hidden}>
-      {this.props.children}
       {this.props.settingName &&
         <i className={`fa fa-anchor ${this.props.className} ${hoverClass}`}
-          onClick={() => push(linkToSetting(this.props.settingName,
-            this.props.pathPrefix))} />}
+          onClick={() => {
+            this.navigate(
+              linkToSetting(this.props.settingName, this.props.pathPrefix));
+          }} />}
+      {this.props.children}
     </div>;
   }
 }
 
-const linkToSetting =
+export const linkToSetting =
   (settingName: DeviceSetting, pathPrefix = Path.settings) =>
     pathPrefix(urlFriendly(stripUnits(settingName)).toLowerCase());
-
-export const goToFbosSettings = () => push(linkToSetting(DeviceSetting.farmbotOS));
-export const goToHardReset = () => push(linkToSetting(DeviceSetting.hardReset));
diff --git a/frontend/settings/other_settings.tsx b/frontend/settings/other_settings.tsx
index 6ba3972fe2..3aaf4c5203 100644
--- a/frontend/settings/other_settings.tsx
+++ b/frontend/settings/other_settings.tsx
@@ -10,7 +10,7 @@ import {
 } from "farmbot/dist/resources/configs/web_app";
 import { BooleanSetting, NumericSetting } from "../session_keys";
 import { Setting } from "./farm_designer_settings";
-import { Row, Col, ToggleButton } from "../ui";
+import { Row, ToggleButton } from "../ui";
 import {
   setWebAppConfigValue, GetWebAppConfigValue,
 } from "../config_storage/actions";
@@ -47,20 +47,13 @@ export interface LogLevelSettingProps {
 export const LogLevelSetting = (props: LogLevelSettingProps) => {
   const value = !!props.getConfigValue(props.setting);
   return <Highlight settingName={props.title}>
-    <Row>
-      <Col xs={9}>
-        <label>{t(props.title)}</label>
-      </Col>
-      <Col xs={3}>
-        <ToggleButton
-          toggleValue={value}
-          toggleAction={() =>
-            props.dispatch(setWebAppConfigValue(props.setting, !value))}
-          title={`${t("toggle")} ${props.title}`} />
-      </Col>
-    </Row>
-    <Row>
-      <p>{t(props.description)}</p>
+    <Row className="grid-exp-1">
+      <label>{t(props.title)}</label>
+      <ToggleButton
+        toggleValue={value}
+        toggleAction={() =>
+          props.dispatch(setWebAppConfigValue(props.setting, !value))}
+        title={`${t("toggle")} ${props.title}`} />
     </Row>
   </Highlight>;
 };
@@ -76,20 +69,13 @@ export interface LogEnableSettingProps {
 export const LogEnableSetting = (props: LogEnableSettingProps) => {
   const value = props.sourceFbosConfig(props.setting).value;
   return <Highlight settingName={props.title}>
-    <Row>
-      <Col xs={9}>
-        <label>{t(props.title)}</label>
-      </Col>
-      <Col xs={3}>
-        <ToggleButton
-          toggleValue={value}
-          toggleAction={() =>
-            props.dispatch(updateConfig({ [props.setting]: !value }))}
-          title={`${t("toggle")} ${props.title}`} />
-      </Col>
-    </Row>
-    <Row>
-      <p>{t(props.description)}</p>
+    <Row className="grid-exp-1">
+      <label>{t(props.title)}</label>
+      <ToggleButton
+        toggleValue={value}
+        toggleAction={() =>
+          props.dispatch(updateConfig({ [props.setting]: !value }))}
+        title={`${t("toggle")} ${props.title}`} />
     </Row>
   </Highlight>;
 };
diff --git a/frontend/settings/pin_bindings/__tests__/pin_bindings_list_test.tsx b/frontend/settings/pin_bindings/__tests__/pin_bindings_list_test.tsx
index 485b84af65..2f41c78eb5 100644
--- a/frontend/settings/pin_bindings/__tests__/pin_bindings_list_test.tsx
+++ b/frontend/settings/pin_bindings/__tests__/pin_bindings_list_test.tsx
@@ -20,7 +20,7 @@ jest.mock("../tagged_pin_binding_init", () => ({
   sysBtnBindings: [1]
 }));
 
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import {
   buildResourceIndex,
diff --git a/frontend/settings/pin_bindings/__tests__/rpi_gpio_diagram_test.tsx b/frontend/settings/pin_bindings/__tests__/rpi_gpio_diagram_test.tsx
index db4a1321c5..598ad0f776 100644
--- a/frontend/settings/pin_bindings/__tests__/rpi_gpio_diagram_test.tsx
+++ b/frontend/settings/pin_bindings/__tests__/rpi_gpio_diagram_test.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { RpiGpioDiagram, RpiGpioDiagramProps } from "../rpi_gpio_diagram";
-import { Color } from "../../../ui/index";
+import { Color } from "../../../ui";
 
 describe("<RpiGpioDiagram />", () => {
   const fakeProps = (): RpiGpioDiagramProps => ({
diff --git a/frontend/settings/pin_bindings/__tests__/tagged_pin_binding_init_test.tsx b/frontend/settings/pin_bindings/__tests__/tagged_pin_binding_init_test.tsx
index 77ec9322ae..cc85942e51 100644
--- a/frontend/settings/pin_bindings/__tests__/tagged_pin_binding_init_test.tsx
+++ b/frontend/settings/pin_bindings/__tests__/tagged_pin_binding_init_test.tsx
@@ -1,6 +1,6 @@
 jest.mock("../../../api/crud", () => ({ initSave: jest.fn() }));
 
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import {
   StockPinBindingsButton, StockPinBindingsButtonProps,
diff --git a/frontend/settings/pin_bindings/model.tsx b/frontend/settings/pin_bindings/model.tsx
index 88bf90a96b..bac94a5e88 100644
--- a/frontend/settings/pin_bindings/model.tsx
+++ b/frontend/settings/pin_bindings/model.tsx
@@ -310,7 +310,7 @@ export const Model = (props: BoxTopBaseProps) => {
             onPointerMove={setCursor}
             onClick={setCursor}
             onPointerOut={leave}
-            onPointerDown={e => {
+            onPointerDown={(e: ThreeEvent<PointerEvent>) => {
               if (!props.isEditing) {
                 setZForAllInGroup(e, Z - 3);
                 click();
diff --git a/frontend/settings/pin_bindings/pin_binding_input_group.tsx b/frontend/settings/pin_bindings/pin_binding_input_group.tsx
index e49df2f33a..14a7583630 100644
--- a/frontend/settings/pin_bindings/pin_binding_input_group.tsx
+++ b/frontend/settings/pin_bindings/pin_binding_input_group.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, FBSelect, DropDownItem, Popover } from "../../ui";
+import { Row, FBSelect, DropDownItem, Popover } from "../../ui";
 import { Position } from "@blueprintjs/core";
 import { RpiGpioDiagram } from "./rpi_gpio_diagram";
 import {
@@ -101,29 +101,23 @@ export class PinBindingInputGroup
     });
 
   render() {
-    return <div className="pin-binding-input-rows">
+    return <div className="grid">
       <Row><label>{t(DeviceSetting.addNewPinBinding)}</label></Row>
-      <this.Number />
-      <Row>
-        <Col xs={12}>
-          <BindingTargetDropdown
-            change={this.changeBinding}
-            resources={this.props.resources}
-            sequenceIdInput={this.state.sequenceIdInput}
-            specialActionInput={this.state.specialActionInput} />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <button
-            className="fb-button green"
-            type="button"
-            title={t("BIND")}
-            onClick={this.bindPin}>
-            {t("Save")}
-          </button>
-        </Col>
-      </Row>
+      <div className="row grid-exp-2">
+        <this.Number />
+        <BindingTargetDropdown
+          change={this.changeBinding}
+          resources={this.props.resources}
+          sequenceIdInput={this.state.sequenceIdInput}
+          specialActionInput={this.state.specialActionInput} />
+        <button
+          className="fb-button green"
+          type="button"
+          title={t("BIND")}
+          onClick={this.bindPin}>
+          {t("Save")}
+        </button>
+      </div>
     </div>;
   }
 }
@@ -144,32 +138,26 @@ export const PinNumberInputGroup = (props: PinNumberInputGroupProps) => {
       value: "" + pinNumberInput
     }
     : undefined;
-  return <Row>
-    <Col xs={1}>
-      <Popover position={Position.TOP}
-        target={<i className="fa fa-circle-o-notch" />}
-        content={<BoxTopGpioDiagram
-          firmwareHardware={props.firmwareHardware}
-          boundPins={boundPins}
-          setSelectedPin={setSelectedPin}
-          selectedPin={pinNumberInput} />} />
-    </Col>
-    <Col xs={1}>
-      <Popover position={Position.TOP}
-        target={<i className="fa fa-th-large" />}
-        content={<RpiGpioDiagram
-          boundPins={boundPins}
-          setSelectedPin={setSelectedPin}
-          selectedPin={pinNumberInput} />} />
-    </Col>
-    <Col xs={10}>
-      <FBSelect
-        key={"pin_number_input_" + pinNumberInput}
-        onChange={ddi =>
-          setSelectedPin(parseInt("" + ddi.value))}
-        selectedItem={selectedPinNumber}
-        list={RpiPinList(boundPins)} />
-    </Col>
+  return <Row className="grid-exp-3">
+    <Popover position={Position.TOP}
+      target={<i className="fa fa-circle-o-notch" />}
+      content={<BoxTopGpioDiagram
+        firmwareHardware={props.firmwareHardware}
+        boundPins={boundPins}
+        setSelectedPin={setSelectedPin}
+        selectedPin={pinNumberInput} />} />
+    <Popover position={Position.TOP}
+      target={<i className="fa fa-th-large" />}
+      content={<RpiGpioDiagram
+        boundPins={boundPins}
+        setSelectedPin={setSelectedPin}
+        selectedPin={pinNumberInput} />} />
+    <FBSelect
+      key={"pin_number_input_" + pinNumberInput}
+      onChange={ddi =>
+        setSelectedPin(parseInt("" + ddi.value))}
+      selectedItem={selectedPinNumber}
+      list={RpiPinList(boundPins)} />
   </Row>;
 };
 
diff --git a/frontend/settings/pin_bindings/pin_bindings_content.tsx b/frontend/settings/pin_bindings/pin_bindings_content.tsx
index f349a01356..78ed5e6243 100644
--- a/frontend/settings/pin_bindings/pin_bindings_content.tsx
+++ b/frontend/settings/pin_bindings/pin_bindings_content.tsx
@@ -51,10 +51,8 @@ export const PinBindingsContent = (props: PinBindingsContentProps) => {
   const pinBindings = apiPinBindings(resources);
   return <div className="pin-bindings">
     <Highlight settingName={DeviceSetting.stockPinBindings}>
-      <Row>
+      <Row className="grid-exp-3">
         <Help text={ToolTips.PIN_BINDINGS} />
-        <StockPinBindingsButton
-          dispatch={dispatch} firmwareHardware={firmwareHardware} />
         <Popover
           position={Position.TOP_RIGHT}
           interactionKind={PopoverInteractionKind.HOVER}
@@ -64,9 +62,11 @@ export const PinBindingsContent = (props: PinBindingsContentProps) => {
           content={<div className={"pin-binding-warning"}>
             {t(ToolTips.PIN_BINDING_WARNING)}
           </div>} />
+        <StockPinBindingsButton
+          dispatch={dispatch} firmwareHardware={firmwareHardware} />
       </Row>
     </Highlight>
-    <div className={"pin-bindings-list-and-input"}>
+    <div className={"grid"}>
       <Highlight settingName={DeviceSetting.savedPinBindings}>
         <PinBindingsList
           pinBindings={pinBindings}
diff --git a/frontend/settings/pin_bindings/pin_bindings_list.tsx b/frontend/settings/pin_bindings/pin_bindings_list.tsx
index 359a961cad..f386f34403 100644
--- a/frontend/settings/pin_bindings/pin_bindings_list.tsx
+++ b/frontend/settings/pin_bindings/pin_bindings_list.tsx
@@ -5,7 +5,7 @@ import {
 } from "./list_and_label_support";
 import { destroy } from "../../api/crud";
 import { error } from "../../toast/toast";
-import { Row, Col } from "../../ui";
+import { Row } from "../../ui";
 import { findSequenceById } from "../../resources/selectors";
 import { PinBindingsListProps } from "./interfaces";
 import { sysBtnBindings } from "./tagged_pin_binding_init";
@@ -13,7 +13,6 @@ import { t } from "../../i18next_wrapper";
 import {
   PinBindingType, PinBindingSpecialAction,
 } from "farmbot/dist/resources/api_resources";
-import { DeviceSetting } from "../../constants";
 
 export const PinBindingsList = (props: PinBindingsListProps) => {
   const { pinBindings, resources, dispatch } = props;
@@ -38,26 +37,21 @@ export const PinBindingsList = (props: PinBindingsListProps) => {
       ? findSequenceById(resources, sequence_id).body.name
       : t(getSpecialActionLabel(special_action)))}`;
 
-  return <div className={"bindings-list"}>
-    <Row><label>{t(DeviceSetting.savedPinBindings)}</label></Row>
+  return <div className={"bindings-list grid"}>
     {pinBindings
       .sort((a, b) => sortByNameAndPin(a.pin_number, b.pin_number))
       .map(x => {
         const { pin_number, sequence_id, binding_type, special_action } = x;
         const binding = bindingText(sequence_id, binding_type, special_action);
-        return <Row key={`pin_${pin_number}_binding`}>
-          <Col xs={11}>
-            <p>{generatePinLabel(pin_number)}</p>
-            <p className="binding-action">{binding}</p>
-          </Col>
-          <Col xs={1}>
-            <button
-              className={`fb-button ${delBtnColor(pin_number)} del-button`}
-              title={t("Delete")}
-              onClick={() => deleteBinding(pin_number, x.uuid)}>
-              <i className="fa fa-times" />
-            </button>
-          </Col>
+        return <Row key={`pin_${pin_number}_binding`} className="row pin-binding-grid">
+          <p>{generatePinLabel(pin_number)}</p>
+          <p className="binding-action">{binding}</p>
+          <button
+            className={`fb-button ${delBtnColor(pin_number)}`}
+            title={t("Delete")}
+            onClick={() => deleteBinding(pin_number, x.uuid)}>
+            <i className="fa fa-times" />
+          </button>
         </Row>;
       })}
   </div>;
diff --git a/frontend/settings/pin_bindings/rpi_gpio_diagram.tsx b/frontend/settings/pin_bindings/rpi_gpio_diagram.tsx
index 61b0fa1863..fbddf20561 100644
--- a/frontend/settings/pin_bindings/rpi_gpio_diagram.tsx
+++ b/frontend/settings/pin_bindings/rpi_gpio_diagram.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Color } from "../../ui/colors";
 import { reservedPiGPIO } from "./list_and_label_support";
 import { range, isNumber, includes, noop } from "lodash";
diff --git a/frontend/settings/pin_bindings/tagged_pin_binding_init.tsx b/frontend/settings/pin_bindings/tagged_pin_binding_init.tsx
index 8905c5aa1b..0b0d5c44e3 100644
--- a/frontend/settings/pin_bindings/tagged_pin_binding_init.tsx
+++ b/frontend/settings/pin_bindings/tagged_pin_binding_init.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
   PinBindingType,
   PinBindingSpecialAction,
@@ -43,17 +43,15 @@ export interface StockPinBindingsButtonProps {
 
 /** Add default pin bindings. */
 export const StockPinBindingsButton = (props: StockPinBindingsButtonProps) =>
-  <div className="stock-pin-bindings-button">
-    <button
-      className="fb-button green"
-      hidden={!hasButtons(props.firmwareHardware)}
-      title={t("add stock pin bindings")}
-      onClick={() => stockPinBindings.map(binding =>
-        props.dispatch(initSave("PinBinding", pinBindingBody(binding))))}>
-      <i className="fa fa-plus" />
-      {t("Stock Bindings")}
-    </button>
-  </div>;
+  <button
+    className="fb-button green stock-pin-bindings-button"
+    hidden={!hasButtons(props.firmwareHardware)}
+    title={t("add stock pin bindings")}
+    onClick={() => stockPinBindings.map(binding =>
+      props.dispatch(initSave("PinBinding", pinBindingBody(binding))))}>
+    <i className="fa fa-plus" />
+    {t("Stock Bindings")}
+  </button>;
 
 /** FarmBot OS built-in pin binding data used by Pin Bindings widget. */
 export const sysBtnBindingData: PinBindingListItems[] = [];
diff --git a/frontend/settings/state_to_props.ts b/frontend/settings/state_to_props.ts
index 1959ef818f..8be926d2bb 100644
--- a/frontend/settings/state_to_props.ts
+++ b/frontend/settings/state_to_props.ts
@@ -33,4 +33,5 @@ export const mapStateToProps = (props: Everything): DesignerSettingsProps => ({
   farmwareEnvs: selectAllFarmwareEnvs(props.resources.index),
   wizardStepResults: selectAllWizardStepResults(props.resources.index),
   settingsPanelState: props.app.settingsPanelState,
+  distanceIndicator: props.resources.consumers.farm_designer.distanceIndicator,
 });
diff --git a/frontend/settings/three_d_settings.tsx b/frontend/settings/three_d_settings.tsx
new file mode 100644
index 0000000000..f17ffa4bcc
--- /dev/null
+++ b/frontend/settings/three_d_settings.tsx
@@ -0,0 +1,168 @@
+import React from "react";
+import { ThreeDSettingsProps } from "./interfaces";
+import { Highlight } from "./maybe_highlight";
+import { Actions, DeviceSetting, ToolTips } from "../constants";
+import { Header } from "./hardware_settings/header";
+import { Collapse } from "@blueprintjs/core";
+import { BlurableInput, Help, Row, ToggleButton } from "../ui";
+import { t } from "../i18next_wrapper";
+import { TaggedFarmwareEnv } from "farmbot";
+import { isUndefined } from "lodash";
+import { edit, initSave, save } from "../api/crud";
+import { getModifiedClassNameSpecifyDefault } from "./default_values";
+
+const DEFAULTS: Record<string, number> = {
+  bedWallThickness: 40,
+  bedHeight: 300,
+  ccSupportSize: 50,
+  beamLength: 1500,
+  columnLength: 500,
+  zAxisLength: 1000,
+  bedXOffset: 140,
+  bedYOffset: 60,
+  bedZOffset: 0,
+  legSize: 100,
+  bounds: 0,
+  grid: 0,
+};
+
+export const namespace3D = (key: string): string => "3D_" + key;
+
+const find =
+  (envs: TaggedFarmwareEnv[], key: string): TaggedFarmwareEnv | undefined =>
+    envs.filter(env => env.body.key == namespace3D(key))[0];
+
+export const get3DConfigValueFunction = (envs: TaggedFarmwareEnv[]) =>
+  (key: string): number => {
+    const maybe = find(envs, key);
+    const raw = isUndefined(maybe) ? DEFAULTS[key] : maybe.body.value;
+    return parseFloat("" + raw);
+  };
+
+export const findOrCreate3DConfigFunction =
+  (dispatch: Function, envs: TaggedFarmwareEnv[]) =>
+    (key: string, value: string) => {
+      const maybe = find(envs, key);
+      if (isUndefined(maybe)) {
+        if (value != "" + DEFAULTS[key]) {
+          dispatch(initSave("FarmwareEnv", { key: namespace3D(key), value }));
+        }
+      } else {
+        dispatch(edit(maybe, { value }));
+        dispatch(save(maybe.uuid));
+      }
+    };
+
+interface ConfigProps {
+  dispatch: Function;
+  distanceIndicator: string;
+  setting: DeviceSetting;
+  configKey: string;
+  tooltip: string;
+  getValue(key: string): number;
+  findOrCreate(key: string, value: string): void;
+  isToggle?: boolean;
+}
+
+const Config = (props: ConfigProps) => {
+  const { dispatch, configKey, distanceIndicator } = props;
+  const value = props.getValue(configKey);
+  const modifiedClassName = getModifiedClassNameSpecifyDefault(
+    value, DEFAULTS[configKey]);
+  const action = (newValue: string) => props.findOrCreate(configKey, newValue);
+  return <Highlight settingName={props.setting}>
+    <Row className="grid-2-col">
+      <div className={"labels"}>
+        <label>
+          {t(props.setting)}
+        </label>
+        <Help
+          text={t(props.tooltip, {
+            defaultConfigValue: DEFAULTS[configKey],
+          })}
+          setOpen={() => dispatch({
+            type: Actions.SET_DISTANCE_INDICATOR,
+            payload: distanceIndicator ? "" : configKey,
+          })} />
+      </div>
+      {props.isToggle
+        ? <ToggleButton
+          className={modifiedClassName}
+          toggleValue={value}
+          toggleAction={() => action(value ? "0" : "1")} />
+        :
+        <BlurableInput
+          type="number"
+          wrapperClassName={modifiedClassName}
+          value={value}
+          onCommit={e => action(e.currentTarget.value)} />}
+    </Row>
+  </Highlight>;
+};
+
+export const ThreeDSettings = (props: ThreeDSettingsProps) => {
+  const { dispatch, distanceIndicator } = props;
+  const getValue = get3DConfigValueFunction(props.farmwareEnvs);
+  const findOrCreate = findOrCreate3DConfigFunction(dispatch, props.farmwareEnvs);
+  const common = { dispatch, getValue, findOrCreate, distanceIndicator };
+  return <Highlight className={"section"}
+    settingName={DeviceSetting.threeDGarden}>
+    <Header
+      title={DeviceSetting.threeDGarden}
+      panel={"three_d"}
+      dispatch={props.dispatch}
+      expanded={props.settingsPanelState.three_d} />
+    <Collapse isOpen={!!props.settingsPanelState.three_d}>
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BED_WALL_THICKNESS}
+        setting={DeviceSetting.bedWallThickness}
+        configKey={"bedWallThickness"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BED_HEIGHT}
+        setting={DeviceSetting.bedHeight}
+        configKey={"bedHeight"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_CC_SUPPORT_SIZE}
+        setting={DeviceSetting.ccSupportSize}
+        configKey={"ccSupportSize"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BEAM_LENGTH}
+        setting={DeviceSetting.beamLength}
+        configKey={"beamLength"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_COLUMN_LENGTH}
+        setting={DeviceSetting.columnLength}
+        configKey={"columnLength"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_Z_AXIS_LENGTH}
+        setting={DeviceSetting.zAxisLength}
+        configKey={"zAxisLength"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BED_X_OFFSET}
+        setting={DeviceSetting.bedXOffset}
+        configKey={"bedXOffset"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BED_Y_OFFSET}
+        setting={DeviceSetting.bedYOffset}
+        configKey={"bedYOffset"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BED_Z_OFFSET}
+        setting={DeviceSetting.bedZOffset}
+        configKey={"bedZOffset"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_LEG_SIZE}
+        setting={DeviceSetting.legSize}
+        configKey={"legSize"} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_BOUNDS}
+        setting={DeviceSetting.bounds}
+        configKey={"bounds"}
+        isToggle={true} />
+      <Config {...common}
+        tooltip={ToolTips.THREE_D_GRID}
+        setting={DeviceSetting.grid}
+        configKey={"grid"}
+        isToggle={true} />
+    </Collapse>
+  </Highlight>;
+};
diff --git a/frontend/settings/toggle_section.tsx b/frontend/settings/toggle_section.tsx
index 29fbf4c5c6..99a99305a6 100644
--- a/frontend/settings/toggle_section.tsx
+++ b/frontend/settings/toggle_section.tsx
@@ -18,11 +18,11 @@ export class ToggleSettingsOpen extends React.Component<ToggleSettingsOpenProps>
 
   render() {
     return <a>
-      <button className="fb-button gray"
+      <button className="fb-icon-button invert"
         title={t("toggle settings open")}
         onClick={() =>
           this.props.dispatch(bulkToggleControlPanel(!this.open))}>
-        <i className={`fa fa-chevron-${!this.open ? "right" : "down"}`} />
+        <i className={`fa fa-${!this.open ? "expand" : "compress"}`} />
       </button>
     </a>;
   }
diff --git a/frontend/settings/transfer_ownership/change_ownership_form.tsx b/frontend/settings/transfer_ownership/change_ownership_form.tsx
index 7828df7b5d..f591981079 100644
--- a/frontend/settings/transfer_ownership/change_ownership_form.tsx
+++ b/frontend/settings/transfer_ownership/change_ownership_form.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col, BlurableInput, ExpandableHeader } from "../../ui";
+import { Row, BlurableInput, ExpandableHeader } from "../../ui";
 import { success, error } from "../../toast/toast";
 import { getDevice } from "../../device";
 import { transferOwnership } from "./transfer_ownership";
@@ -41,46 +41,30 @@ export class ChangeOwnershipForm
         title={t(DeviceSetting.changeOwnership)}
         onClick={() => this.setState({ open: !this.state.open })} />
       <Collapse isOpen={!!this.state.open}>
-        <form className={"change-ownership-form"}>
-          <Row />
-          <Row />
-          <Row>
+        <form className={"change-ownership-grid"}>
+          <div>
             <p>
               {t("Change the account FarmBot is connected to.")}
             </p>
-            <Col xs={4}>
+            <div className="change-ownership-grid">
               <label>
                 {t("Email")}
               </label>
-            </Col>
-            <Col xs={8}>
               <BlurableInput
                 allowEmpty={true}
                 onCommit={e => this.setState({ email: e.currentTarget.value })}
                 name="email"
                 value={this.state.email}
                 type="email" />
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={4}>
               <label>
                 {t("Password")}
               </label>
-            </Col>
-            <Col xs={8}>
               <BlurablePassword
                 onCommit={e => this.setState({ password: e.currentTarget.value })}
                 name="password" />
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={4}>
               <label>
                 {t("Server")}
               </label>
-            </Col>
-            <Col xs={8}>
               <BlurableInput
                 allowEmpty={true}
                 onCommit={() => { }}
@@ -88,19 +72,19 @@ export class ChangeOwnershipForm
                 disabled={true}
                 value={API.current.baseUrl}
                 type="text" />
-            </Col>
-          </Row>
+            </div>
+          </div>
           <Row>
             <NonsecureContentWarning
               urls={[API.current.baseUrl, location.protocol]}>
-              <Col xs={12}>
+              <div>
                 <strong>
                   {t(Content.NOT_HTTPS)}
                 </strong>
                 <p>
                   {t(Content.CONTACT_SYSADMIN)}
                 </p>
-              </Col>
+              </div>
             </NonsecureContentWarning>
           </Row>
           <Row>
diff --git a/frontend/three_d_garden/__tests__/bot_test.tsx b/frontend/three_d_garden/__tests__/bot_test.tsx
index c08108b455..9bdcc195d2 100644
--- a/frontend/three_d_garden/__tests__/bot_test.tsx
+++ b/frontend/three_d_garden/__tests__/bot_test.tsx
@@ -34,6 +34,20 @@ describe("<Bot />", () => {
       .toEqual([-1344, 110, 75]);
   });
 
+  it("renders: v1.7", () => {
+    const p = fakeProps();
+    p.config.kitVersion = "v1.7";
+    const wrapper = mount(<Bot {...p} />);
+    expect(wrapper.find({ name: "button-group" }).length).toEqual(10);
+  });
+
+  it("renders: v1.8", () => {
+    const p = fakeProps();
+    p.config.kitVersion = "v1.8";
+    const wrapper = mount(<Bot {...p} />);
+    expect(wrapper.find({ name: "button-group" }).length).toEqual(6);
+  });
+
   it("loads shapes", () => {
     const p = fakeProps();
     mount(<Bot {...p} />);
diff --git a/frontend/three_d_garden/__tests__/components_test.tsx b/frontend/three_d_garden/__tests__/components_test.tsx
index 978b959747..3681362ed3 100644
--- a/frontend/three_d_garden/__tests__/components_test.tsx
+++ b/frontend/three_d_garden/__tests__/components_test.tsx
@@ -7,16 +7,10 @@ import {
   MeshBasicMaterial,
   PointLight,
 } from "../components";
-import {
-  AmbientLightProps,
-  DirectionalLightProps,
-  MeshBasicMaterialProps,
-  MeshProps,
-  PointLightProps,
-} from "@react-three/fiber";
+import { ThreeElements } from "@react-three/fiber";
 
 describe("<AmbientLight />", () => {
-  const fakeProps = (): AmbientLightProps => ({
+  const fakeProps = (): ThreeElements["ambientLight"] => ({
     intensity: 0.5,
   });
 
@@ -27,7 +21,7 @@ describe("<AmbientLight />", () => {
 });
 
 describe("<PointLight />", () => {
-  const fakeProps = (): PointLightProps => ({
+  const fakeProps = (): ThreeElements["pointLight"] => ({
     intensity: 0.5,
   });
 
@@ -38,7 +32,7 @@ describe("<PointLight />", () => {
 });
 
 describe("<DirectionalLight />", () => {
-  const fakeProps = (): DirectionalLightProps => ({
+  const fakeProps = (): ThreeElements["directionalLight"] => ({
     intensity: 0.5,
   });
 
@@ -49,7 +43,7 @@ describe("<DirectionalLight />", () => {
 });
 
 describe("<Mesh />", () => {
-  const fakeProps = (): MeshProps => ({
+  const fakeProps = (): ThreeElements["mesh"] => ({
     name: "mesh",
   });
 
@@ -60,7 +54,7 @@ describe("<Mesh />", () => {
 });
 
 describe("<MeshBasicMaterial />", () => {
-  const fakeProps = (): MeshBasicMaterialProps => ({
+  const fakeProps = (): ThreeElements["meshBasicMaterial"] => ({
     name: "material",
   });
 
diff --git a/frontend/three_d_garden/__tests__/constant_tests.ts b/frontend/three_d_garden/__tests__/constants_test.ts
similarity index 100%
rename from frontend/three_d_garden/__tests__/constant_tests.ts
rename to frontend/three_d_garden/__tests__/constants_test.ts
diff --git a/frontend/three_d_garden/__tests__/garden_test.tsx b/frontend/three_d_garden/__tests__/garden_test.tsx
index 49e108e54e..122e8ce72f 100644
--- a/frontend/three_d_garden/__tests__/garden_test.tsx
+++ b/frontend/three_d_garden/__tests__/garden_test.tsx
@@ -8,6 +8,8 @@ import { mount } from "enzyme";
 import { GardenModelProps, GardenModel } from "../garden";
 import { clone } from "lodash";
 import { INITIAL } from "../config";
+import { render, screen } from "@testing-library/react";
+import { ASSETS } from "../constants";
 
 describe("<GardenModel />", () => {
   const fakeProps = (): GardenModelProps => ({
@@ -23,6 +25,39 @@ describe("<GardenModel />", () => {
     expect(wrapper.html()).toContain("darkgreen");
   });
 
+  it("renders no user plants", () => {
+    const p = fakeProps();
+    p.plants = [];
+    render(<GardenModel {...p} />);
+    const plantLabels = screen.queryAllByText("Beet");
+    expect(plantLabels.length).toEqual(0);
+  });
+
+  it("renders user plant", () => {
+    const p = fakeProps();
+    p.plants = [
+      {
+        label: "Beet",
+        icon: ASSETS.icons.beet,
+        spread: 175,
+        size: 150,
+        x: 0,
+        y: 0,
+      },
+    ];
+    render(<GardenModel {...p} />);
+    const plantLabels = screen.queryAllByText("Beet");
+    expect(plantLabels.length).toEqual(1);
+  });
+
+  it("renders promo plants", () => {
+    const p = fakeProps();
+    p.plants = undefined;
+    render(<GardenModel {...p} />);
+    const plantLabels = screen.queryAllByText("Beet");
+    expect(plantLabels.length).toEqual(7);
+  });
+
   it("renders other options", () => {
     mockIsDesktop = false;
     const p = fakeProps();
diff --git a/frontend/three_d_garden/__tests__/helper_tests.ts b/frontend/three_d_garden/__tests__/helpers_test.ts
similarity index 100%
rename from frontend/three_d_garden/__tests__/helper_tests.ts
rename to frontend/three_d_garden/__tests__/helpers_test.ts
diff --git a/frontend/three_d_garden/__tests__/index_test.tsx b/frontend/three_d_garden/__tests__/index_test.tsx
index f1e135c203..a910b5ec12 100644
--- a/frontend/three_d_garden/__tests__/index_test.tsx
+++ b/frontend/three_d_garden/__tests__/index_test.tsx
@@ -9,6 +9,7 @@ import { clone } from "lodash";
 describe("<ThreeDGarden />", () => {
   const fakeProps = (): ThreeDGardenProps => ({
     config: clone(INITIAL),
+    plants: [],
   });
 
   it("renders", () => {
diff --git a/frontend/three_d_garden/__tests__/packaging_test.tsx b/frontend/three_d_garden/__tests__/packaging_test.tsx
index 1dcdefb972..523440ace8 100644
--- a/frontend/three_d_garden/__tests__/packaging_test.tsx
+++ b/frontend/three_d_garden/__tests__/packaging_test.tsx
@@ -10,7 +10,9 @@ describe("<Packaging />", () => {
   });
 
   it("renders", () => {
-    const wrapper = mount(<Packaging {...fakeProps()} />);
+    const p = fakeProps();
+    p.config.kitVersion = "v1.7";
+    const wrapper = mount(<Packaging {...p} />);
     expect(wrapper.html()).toContain("packaging");
     expect(wrapper.html()).toContain("100");
     expect(wrapper.html()).not.toContain("170");
@@ -19,6 +21,7 @@ describe("<Packaging />", () => {
   it("renders: XL", () => {
     const p = fakeProps();
     p.config.sizePreset = "Genesis XL";
+    p.config.kitVersion = "v1.8";
     const wrapper = mount(<Packaging {...p} />);
     expect(wrapper.html()).toContain("170");
     expect(wrapper.html()).not.toContain("100");
diff --git a/frontend/three_d_garden/bed.tsx b/frontend/three_d_garden/bed.tsx
index e70bf41310..5ab3ef5fcd 100644
--- a/frontend/three_d_garden/bed.tsx
+++ b/frontend/three_d_garden/bed.tsx
@@ -161,6 +161,19 @@ export const Bed = (props: BedProps) => {
           z: groundZ,
         }} />
     </Group>
+    <Group visible={props.config.distanceIndicator == "bedHeight"}>
+      <DistanceIndicator
+        start={{
+          x: threeSpace(bedLengthOuter, bedLengthOuter) + 100,
+          y: threeSpace(0, bedWidthOuter),
+          z: groundZ,
+        }}
+        end={{
+          x: threeSpace(bedLengthOuter, bedLengthOuter) + 100,
+          y: threeSpace(0, bedWidthOuter),
+          z: 0,
+        }} />
+    </Group>
     <Group name={"axes-group"} visible={axes}>
       <FarmbotAxes config={props.config} />
     </Group>
diff --git a/frontend/three_d_garden/bot.tsx b/frontend/three_d_garden/bot.tsx
index 8ada98e680..4b399c00b2 100644
--- a/frontend/three_d_garden/bot.tsx
+++ b/frontend/three_d_garden/bot.tsx
@@ -6,7 +6,10 @@ import {
 } from "@react-three/drei";
 import { DoubleSide, Shape, RepeatWrapping } from "three";
 import {
-  easyCubicBezierCurve3, threeSpace, zDir, zZero as zZeroFunc,
+  easyCubicBezierCurve3, threeSpace, zDir,
+  zZero as zZeroFunc,
+  zero as zeroFunc,
+  extents as extentsFunc,
 } from "./helpers";
 import { Config } from "./config";
 import { GLTF } from "three-stdlib";
@@ -185,17 +188,9 @@ export const Bot = (props: FarmbotModelProps) => {
     columnLength, zAxisLength, zGantryOffset, bedWallThickness, tool, bedHeight,
     cableCarriers, bounds,
   } = props.config;
-  const zZero = zZeroFunc(props.config);
-  const zero = {
-    x: threeSpace(bedXOffset, bedLengthOuter),
-    y: threeSpace(bedYOffset, bedWidthOuter),
-    z: zZero,
-  };
-  const extents = {
-    x: threeSpace(bedXOffset + botSizeX, bedLengthOuter),
-    y: threeSpace(bedYOffset + botSizeY, bedWidthOuter),
-    z: zZero + zDir * botSizeZ,
-  };
+  const zZero = zZeroFunc(config);
+  const zero = zeroFunc(config);
+  const extents = extentsFunc(config);
   const zDip = (x: number, y: number): [number, number, number][] => [
     [x, y, extents.z],
     [x, y, zero.z],
@@ -579,18 +574,57 @@ export const Bot = (props: FarmbotModelProps) => {
       ]}
       rotation={[Math.PI / 2, 0, 0]} />
     <Group name={"ccVertical"}>
-      {range((zAxisLength - 350) / 200).map(i =>
-        <Mesh key={i}
-          position={[
-            threeSpace(x + 20, bedLengthOuter) + bedXOffset,
-            threeSpace(y + 55, bedWidthOuter) + bedYOffset,
-            zZero + zDir * z + i * 200 + 125,
-          ]}
-          rotation={[0, 0, Math.PI / 2]}
-          scale={1000}
-          geometry={ccVertical.nodes[PartName.ccVertical].geometry}>
-          <MeshPhongMaterial color={"silver"} />
-        </Mesh>)}
+      {config.kitVersion == "v1.7"
+        ? (
+          range((zAxisLength - 350) / 200).map((i) => (
+            <Mesh key={i}
+              position={[
+                threeSpace(x + 20, bedLengthOuter) + bedXOffset,
+                threeSpace(y + 55, bedWidthOuter) + bedYOffset,
+                zZero + zDir * z + i * 200 + 125,
+              ]}
+              rotation={[0, 0, Math.PI / 2]}
+              scale={1000}
+              geometry={ccVertical.nodes[PartName.ccVertical].geometry}>
+              <MeshPhongMaterial color={"silver"} />
+            </Mesh>
+          ))
+        )
+        : (
+          <Mesh
+            position={[
+              threeSpace(x + 20, bedLengthOuter) + bedXOffset,
+              threeSpace(y + 35, bedWidthOuter) + bedYOffset,
+              zZero + zDir * z + 125,
+            ]}
+            rotation={[0, 0, 0]}
+            geometry={new THREE.ExtrudeGeometry(
+              (() => {
+                const shape = new THREE.Shape();
+                shape.moveTo(0, 0);
+                shape.lineTo(0, 20);
+                shape.lineTo(15, 20);
+                shape.lineTo(20, 1.5);
+                shape.lineTo(28.5, 1.5);
+                shape.lineTo(28.5, -61);
+                shape.lineTo(24, -63);
+                shape.lineTo(24, -61.5);
+                shape.lineTo(27, -60);
+                shape.lineTo(27, 0);
+                shape.lineTo(0, 0);
+                return shape;
+              })(),
+              {
+                depth: zAxisLength - 350,
+                bevelEnabled: false,
+              },
+            )}
+          >
+            <MeshPhongMaterial color={"white"}
+              opacity={0.8}
+              transparent={true} />
+          </Mesh>
+        )}
     </Group>
     <Extrude name={"zCC"} visible={cableCarriers}
       castShadow={true}
@@ -645,15 +679,21 @@ export const Bot = (props: FarmbotModelProps) => {
         [
           threeSpace(x + 28, bedLengthOuter) + bedXOffset,
           threeSpace(y, bedWidthOuter) + bedYOffset,
-          zZero + zDir * z + 40,
+          zZero + zDir * z + 35,
         ],
         [0, 0, 100],
         [0, 0, -200],
-        [
-          threeSpace(x + 80, bedLengthOuter) + bedXOffset,
-          threeSpace(y + 100, bedWidthOuter) + bedYOffset,
-          zZero + zDir * z + 245,
-        ],
+        config.kitVersion == "v1.7"
+          ? [
+            threeSpace(x + 80, bedLengthOuter) + bedXOffset,
+            threeSpace(y + 100, bedWidthOuter) + bedYOffset,
+            zZero + zDir * z + 245,
+          ]
+          : [
+            threeSpace(x + 35, bedLengthOuter) + bedXOffset,
+            threeSpace(y, bedWidthOuter) + bedYOffset,
+            zZero + zDir * z + 245,
+          ],
       ), 20, 5, 8]}>
       <MeshPhongMaterial
         color={"white"}
@@ -662,13 +702,25 @@ export const Bot = (props: FarmbotModelProps) => {
       />
     </Tube>
     <VacuumPumpCoverComponent
-      rotation={[0, 0, Math.PI / 2]}
+      rotation={
+        config.kitVersion == "v1.7"
+          ? [0, 0, Math.PI / 2]
+          : [0, 0, -Math.PI / 2]
+      }
       scale={1000}
-      position={[
-        threeSpace(x + 12, bedLengthOuter) + bedXOffset,
-        threeSpace(y + 55, bedWidthOuter) + bedYOffset,
-        zZero + zDir * z + 490,
-      ]} />
+      position={
+        config.kitVersion == "v1.7"
+          ? [
+            threeSpace(x + 12, bedLengthOuter) + bedXOffset,
+            threeSpace(y + 55, bedWidthOuter) + bedYOffset,
+            zZero + zDir * z + 490,
+          ]
+          : [
+            threeSpace(x + 2, bedLengthOuter) + bedXOffset,
+            threeSpace(y + 110, bedWidthOuter) + bedYOffset,
+            zZero + columnLength + 25,
+          ]
+      } />
     <Group name={"camera"}
       rotation={[Math.PI, 0, 0]}
       position={[
@@ -746,24 +798,62 @@ export const Bot = (props: FarmbotModelProps) => {
       <MeshPhongMaterial color={"white"} map={aluminumTexture} side={DoubleSide} />
     </Extrude>
     <Group name={"ccHorizontal"}>
-      {range((botSizeY - 10) / 300).map(i =>
-        <Mesh key={i}
-          position={[
-            threeSpace(x - 28, bedLengthOuter) + bedXOffset,
-            threeSpace(50 + i * 300, bedWidthOuter) + bedYOffset,
-            columnLength + 60,
-          ]}
-          rotation={[Math.PI / 2, 0, 0]}
-          scale={1000}
-          geometry={ccHorizontal.nodes[PartName.ccHorizontal].geometry}>
-          <MeshPhongMaterial color={"silver"} />
-        </Mesh>)}
+      {config.kitVersion == "v1.7"
+        ? (
+          range((botSizeY - 10) / 300).map((i) => (
+            <Mesh key={i}
+              position={[
+                threeSpace(x - 28, bedLengthOuter) + bedXOffset,
+                threeSpace(50 + i * 300, bedWidthOuter) + bedYOffset,
+                columnLength + 60,
+              ]}
+              rotation={[Math.PI / 2, 0, 0]}
+              scale={1000}
+              geometry={ccHorizontal.nodes[PartName.ccHorizontal].geometry}>
+              <MeshPhongMaterial color={"silver"} />
+            </Mesh>
+          ))
+        )
+        : (
+          <Mesh
+            position={[
+              threeSpace(x - 28, bedLengthOuter) + bedXOffset,
+              -(threeSpace(20, bedWidthOuter) + bedYOffset),
+              columnLength + 60,
+            ]}
+            rotation={[Math.PI / 2, 0, 0]}
+            geometry={new THREE.ExtrudeGeometry(
+              (() => {
+                const shape = new THREE.Shape();
+
+                shape.moveTo(0, 0);
+                shape.lineTo(0, 20);
+                shape.lineTo(-40, 20);
+                shape.lineTo(-41, 22.5);
+                shape.lineTo(-42.5, 22.5);
+                shape.lineTo(-41.5, 18.5);
+                shape.lineTo(-30, 18.5);
+                shape.lineTo(-25, 0);
+                shape.lineTo(0, 0);
+                return shape;
+              })(),
+              {
+                depth: botSizeY - 30,
+                bevelEnabled: false,
+              },
+            )}
+          >
+            <MeshPhongMaterial color={"white"}
+              opacity={0.8}
+              transparent={true} />
+          </Mesh>
+        )}
     </Group>
     <Extrude name={"yCC"} visible={cableCarriers}
       castShadow={true}
       args={[
         ccPath(botSizeY, y + 40, 70),
-        { steps: 1, depth: 60, bevelEnabled: false },
+        { steps: 1, depth: config.kitVersion == "v1.7" ? 60 : 40, bevelEnabled: false },
       ]}
       position={[
         threeSpace(x - 28, bedLengthOuter) + bedXOffset,
@@ -840,15 +930,23 @@ export const Bot = (props: FarmbotModelProps) => {
           geometry={box.nodes.Electronics_Box_Lid.geometry}
           material={box.materials[ElectronicsBoxMaterial.lid]}
           scale={1000} />
-        <Group name={"buttons-and-leds"}
+        <Group name={"buttons"}
           position={[0, 0, 130]}>
-          {[
-            { position: -60, color: IColor.estop.on },
-            { position: -30, color: IColor.unlock.on },
-            { position: 0, color: IColor.blank.on },
-            { position: 30, color: IColor.blank.on },
-            { position: 60, color: IColor.blank.on },
-          ].map(button => {
+          {(
+            config.kitVersion == "v1.7"
+              ? [
+                { position: -60, color: IColor.estop.on },
+                { position: -30, color: IColor.unlock.on },
+                { position: 0, color: IColor.blank.on },
+                { position: 30, color: IColor.blank.on },
+                { position: 60, color: IColor.blank.on },
+              ]
+              : [
+                { position: -30, color: IColor.estop.on },
+                { position: 0, color: IColor.unlock.on },
+                { position: 30, color: IColor.blank.on },
+              ]
+          ).map(button => {
             const { position, color } = button;
             const btnPosition = position;
             return <Group key={btnPosition} name={"button-group"}>
@@ -871,6 +969,10 @@ export const Bot = (props: FarmbotModelProps) => {
                 rotation={[Math.PI / 2, 0, 0]} />
             </Group>;
           })}
+        </Group>
+        <Group name={"leds"}
+          position={[0, 0, 130]}
+          visible={config.kitVersion == "v1.7"}>
           {[
             { position: -45, color: IColor.sync.on },
             { position: -15, color: IColor.connect.on },
@@ -1019,5 +1121,44 @@ export const Bot = (props: FarmbotModelProps) => {
           z: zZero - z + zAxisLength,
         }} />
     </Group>
+    <Group visible={config.distanceIndicator == "beamLength"}>
+      <DistanceIndicator
+        start={{
+          x: threeSpace(x + 100, bedLengthOuter) + bedXOffset,
+          y: threeSpace(bedWidthOuter / 2 - beamLength / 2, bedWidthOuter),
+          z: columnLength + 200,
+        }}
+        end={{
+          x: threeSpace(x + 100, bedLengthOuter) + bedXOffset,
+          y: threeSpace(bedWidthOuter / 2 + beamLength / 2, bedWidthOuter),
+          z: columnLength + 200,
+        }} />
+    </Group>
+    <Group visible={config.distanceIndicator == "columnLength"}>
+      <DistanceIndicator
+        start={{
+          x: threeSpace(x + 100, bedLengthOuter) + bedXOffset,
+          y: threeSpace(bedWidthOuter + 200, bedWidthOuter),
+          z: 30,
+        }}
+        end={{
+          x: threeSpace(x + 100, bedLengthOuter) + bedXOffset,
+          y: threeSpace(bedWidthOuter + 200, bedWidthOuter),
+          z: 30 + columnLength,
+        }} />
+    </Group>
+    <Group visible={config.distanceIndicator == "zAxisLength"}>
+      <DistanceIndicator
+        start={{
+          x: threeSpace(x + 100, bedLengthOuter) + bedXOffset,
+          y: threeSpace(y, bedWidthOuter) + bedYOffset,
+          z: zZero + zDir * z,
+        }}
+        end={{
+          x: threeSpace(x + 100, bedLengthOuter) + bedXOffset,
+          y: threeSpace(y, bedWidthOuter) + bedYOffset,
+          z: zZero + zDir * z + zAxisLength,
+        }} />
+    </Group>
   </Group>;
 };
diff --git a/frontend/three_d_garden/button.tsx b/frontend/three_d_garden/button.tsx
index 68c973be4b..449d8500c8 100644
--- a/frontend/three_d_garden/button.tsx
+++ b/frontend/three_d_garden/button.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import * as THREE from "three";
-import { Box, Text } from "@react-three/drei";
+import { Box } from "@react-three/drei";
 import { BufferGeometry } from "three";
-import { ASSETS } from "./constants";
 import { Group, MeshPhongMaterial } from "./components";
+import { Text } from "./text";
 
 export interface PresetButtonProps {
   preset: string;
@@ -58,12 +58,9 @@ export const PresetButton = (props: PresetButtonProps) => {
         position={[0, 0, 0]}>
         <MeshPhongMaterial color={hovered == preset ? "lightgray" : "gray"} />
       </Box>
-      <Text fontSize={200}
-        font={ASSETS.fonts.cabinBold}
+      <Text
+        fontSize={200}
         color={"black"}
-        strokeColor={"black"}
-        strokeWidth={7}
-        fontWeight={"bold"}
         position={[0, 0, btnHeight / 2 + 1]}
         rotation={[0, 0, 0]}>
         {preset}
diff --git a/frontend/three_d_garden/components.tsx b/frontend/three_d_garden/components.tsx
index 9342a95413..dcb19e97f5 100644
--- a/frontend/three_d_garden/components.tsx
+++ b/frontend/three_d_garden/components.tsx
@@ -1,50 +1,49 @@
+import { ThreeElements } from "@react-three/fiber";
 import React from "react";
-import {
-  AmbientLightProps,
-  AxesHelperProps,
-  BoxGeometryProps,
-  DirectionalLightProps,
-  GroupProps,
-  InstancedMeshProps,
-  MeshBasicMaterialProps,
-  MeshPhongMaterialProps,
-  MeshProps,
-  PointLightProps,
-  PrimitiveProps,
-} from "@react-three/fiber";
 
 // Workaround to avoid disabling no-unknown-property rule
 // eslint is marking props for THREE components starting with lowercase as unknown
 
-export const AmbientLight = (props: AmbientLightProps) =>
+export const AmbientLight = (props: ThreeElements["ambientLight"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <ambientLight {...props} />;
 
-export const DirectionalLight = (props: DirectionalLightProps) =>
+export const DirectionalLight = (props: ThreeElements["directionalLight"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <directionalLight {...props} />;
 
-export const Group = (props: GroupProps) =>
+export const Group = (props: ThreeElements["group"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <group {...props} />;
 
-export const Mesh = (props: MeshProps) =>
+export const Mesh = (props: ThreeElements["mesh"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <mesh {...props} />;
 
-export const PointLight = (props: PointLightProps) =>
+export const PointLight = (props: ThreeElements["pointLight"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <pointLight {...props} />;
 
-export const MeshPhongMaterial = (props: MeshPhongMaterialProps) =>
+export const MeshPhongMaterial = (props: ThreeElements["meshPhongMaterial"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <meshPhongMaterial {...props} />;
 
-export const InstancedMesh = (props: InstancedMeshProps) =>
+export const InstancedMesh = (props: ThreeElements["instancedMesh"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <instancedMesh {...props} />;
 
-export const Primitive = (props: PrimitiveProps) =>
+export const Primitive = (props: ThreeElements["primitive"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <primitive {...props} />;
 
-export const BoxGeometry = (props: BoxGeometryProps) =>
+export const BoxGeometry = (props: ThreeElements["boxGeometry"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <boxGeometry {...props} />;
 
-export const MeshBasicMaterial = (props: MeshBasicMaterialProps) =>
+export const MeshBasicMaterial = (props: ThreeElements["meshBasicMaterial"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <meshBasicMaterial {...props} />;
 
-export const AxesHelper = (props: AxesHelperProps) =>
+export const AxesHelper = (props: ThreeElements["axesHelper"]) =>
+  // @ts-expect-error Property does not exist on type JSX.IntrinsicElements
   <axesHelper {...props} />;
diff --git a/frontend/three_d_garden/config.ts b/frontend/three_d_garden/config.ts
index 9c5cbf73fb..2e16390f67 100644
--- a/frontend/three_d_garden/config.ts
+++ b/frontend/three_d_garden/config.ts
@@ -67,13 +67,15 @@ export interface Config {
   cableDebug: boolean;
   zoomBeaconDebug: boolean;
   animate: boolean;
+  distanceIndicator: string;
+  kitVersion: string;
 }
 
 export const INITIAL: Config = {
   sizePreset: "Genesis",
   bedType: "Standard",
   otherPreset: "Initial",
-  label: "FarmBot Genesis v1.7",
+  label: "FarmBot Genesis",
   botSizeX: 2720,
   botSizeY: 1230,
   botSizeZ: 500,
@@ -101,7 +103,7 @@ export const INITIAL: Config = {
   soilHeight: 500,
   plants: "Spring",
   labels: false,
-  labelsOnHover: true,
+  labelsOnHover: false,
   ground: true,
   grid: false,
   axes: false,
@@ -138,10 +140,13 @@ export const INITIAL: Config = {
   cableDebug: false,
   zoomBeaconDebug: false,
   animate: true,
+  distanceIndicator: "",
+  kitVersion: "v1.7",
 };
 
 export const STRING_KEYS = [
   "sizePreset", "bedType", "otherPreset", "label", "plants", "tool", "scene",
+  "distanceIndicator", "kitVersion",
 ];
 
 export const NUMBER_KEYS = [
@@ -187,7 +192,7 @@ export const PRESETS: Record<string, Config> = {
     ...INITIAL,
     sizePreset: "Genesis",
     bedType: "Standard",
-    label: "FarmBot Genesis v1.7",
+    label: "FarmBot Genesis",
     botSizeX: 2720,
     botSizeY: 1230,
     botSizeZ: 500,
@@ -208,7 +213,7 @@ export const PRESETS: Record<string, Config> = {
     ...INITIAL,
     sizePreset: "Genesis XL",
     bedType: "Standard",
-    label: "FarmBot Genesis XL v1.7",
+    label: "FarmBot Genesis XL",
     botSizeX: 5720,
     botSizeY: 2730,
     botSizeZ: 500,
@@ -276,6 +281,7 @@ export const PRESETS: Record<string, Config> = {
     cableDebug: false,
     zoomBeaconDebug: false,
     animate: true,
+    distanceIndicator: "",
   },
   "Maximal": {
     ...INITIAL,
@@ -327,6 +333,7 @@ export const PRESETS: Record<string, Config> = {
     cableDebug: true,
     zoomBeaconDebug: true,
     animate: true,
+    distanceIndicator: "",
   },
 };
 
@@ -346,7 +353,7 @@ const OTHER_CONFIG_KEYS: (keyof Config)[] = [
   "threeAxes", "xyDimensions", "zDimension", "labelsOnHover", "promoInfo",
   "settingsBar", "zoomBeacons", "pan", "solar", "utilitiesPost", "packaging", "lab",
   "people", "scene", "lowDetail", "eventDebug", "cableDebug", "zoomBeaconDebug",
-  "animate",
+  "animate", "distanceIndicator", "kitVersion",
 ];
 
 export const modifyConfig = (config: Config, update: Partial<Config>) => {
diff --git a/frontend/three_d_garden/config_overlays.tsx b/frontend/three_d_garden/config_overlays.tsx
index fc77f64f69..669748c5db 100644
--- a/frontend/three_d_garden/config_overlays.tsx
+++ b/frontend/three_d_garden/config_overlays.tsx
@@ -304,6 +304,8 @@ export const PrivateOverlay = (props: OverlayProps) => {
       <Toggle {...common} configKey={"tracks"} />
       <Toggle {...common} configKey={"cableCarriers"} />
       <Toggle {...common} configKey={"bot"} />
+      <Radio {...common} configKey={"distanceIndicator"}
+        options={["", "bedHeight", "beamLength", "columnLength", "zAxisLength"]} />
       <label>{"Bed Properties"}</label>
       <Slider {...common} configKey={"bedWallThickness"} min={0} max={200} />
       <Slider {...common} configKey={"bedHeight"} min={0} max={1000} />
diff --git a/frontend/three_d_garden/constants.ts b/frontend/three_d_garden/constants.ts
index 4a62573ae6..470d4a7802 100644
--- a/frontend/three_d_garden/constants.ts
+++ b/frontend/three_d_garden/constants.ts
@@ -3,9 +3,9 @@ import { sampleSize } from "lodash";
 
 export const LIB_DIR = "/3D/lib/";
 
-export const ASSETS = {
+export const ASSETS: Record<string, Record<string, string>> = {
   fonts: {
-    cabinBold: "/3D/fonts/Cabin_Bold.ttf",
+    cabinBold: "/3D/fonts/Cabin_Bold.json",
   },
   textures: {
     cloud: "/3D/textures/cloud.avif",
diff --git a/frontend/three_d_garden/distance_indicator.tsx b/frontend/three_d_garden/distance_indicator.tsx
index bcaee47847..9dc795e374 100644
--- a/frontend/three_d_garden/distance_indicator.tsx
+++ b/frontend/three_d_garden/distance_indicator.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Box, Text } from "@react-three/drei";
-import { ASSETS } from "./constants";
+import { Box } from "@react-three/drei";
 import { Arrow } from "./arrow";
 import { Group, MeshPhongMaterial } from "./components";
+import { Text } from "./text";
 
 enum BoxDimension {
   width = 300,
@@ -54,13 +54,9 @@ export const DistanceIndicator = (props: DistanceIndicatorProps) => {
         <MeshPhongMaterial color={"#c49f7a"} />
       </Box>
       {LABELS.map(({ position, rotation }) =>
-        <Text name={"distance-label"}
+        <Text name={"distance-label"} key={JSON.stringify([position, rotation])}
           fontSize={50}
-          font={ASSETS.fonts.cabinBold}
           color={"black"}
-          strokeColor={"black"}
-          strokeWidth={7}
-          fontWeight={"bold"}
           rotation={rotation}
           position={position}>
           {distance.toFixed(0)}mm
diff --git a/frontend/three_d_garden/garden.tsx b/frontend/three_d_garden/garden.tsx
index 50448554ae..40d2114e1b 100644
--- a/frontend/three_d_garden/garden.tsx
+++ b/frontend/three_d_garden/garden.tsx
@@ -3,14 +3,20 @@ import { ThreeEvent } from "@react-three/fiber";
 import {
   GizmoHelper, GizmoViewcube,
   OrbitControls, PerspectiveCamera,
-  Circle, Stats, Billboard, Text, Image, Clouds, Cloud, OrthographicCamera,
+  Circle, Stats, Billboard, Image, Clouds, Cloud, OrthographicCamera,
   Detailed, Sphere,
   useTexture,
+  Line,
 } from "@react-three/drei";
 import { RepeatWrapping, Vector3, BackSide } from "three";
 import { Bot } from "./bot";
 import { Bed } from "./bed";
-import { threeSpace, zZero } from "./helpers";
+import {
+  threeSpace,
+  zZero as zZeroFunc,
+  zero as zeroFunc,
+  extents as extentsFunc,
+} from "./helpers";
 import { Sky } from "./sky";
 import { Config, detailLevels, seasonProperties } from "./config";
 import { ASSETS, GARDENS, PLANTS } from "./constants";
@@ -24,11 +30,16 @@ import {
   AmbientLight, AxesHelper, Group, MeshBasicMaterial, MeshPhongMaterial,
 } from "./components";
 import { isDesktop } from "../screen_size";
+import { Text } from "./text";
+import { isUndefined, range } from "lodash";
+
+const AnimatedGroup = animated(Group);
 
 export interface GardenModelProps {
   config: Config;
   activeFocus: string;
   setActiveFocus(focus: string): void;
+  plants?: Plant[];
 }
 
 interface Plant {
@@ -40,6 +51,8 @@ interface Plant {
   y: number;
 }
 
+export interface ThreeDGardenPlant extends Plant { }
+
 export const GardenModel = (props: GardenModelProps) => {
   const { config } = props;
   const groundZ = config.bedZOffset + config.bedHeight;
@@ -86,7 +99,9 @@ export const GardenModel = (props: GardenModelProps) => {
     }
     return positions;
   };
-  const plants = calculatePlantPositions();
+  const plants = isUndefined(props.plants)
+    ? calculatePlantPositions()
+    : props.plants;
 
   const [hoveredPlant, setHoveredPlant] =
     React.useState<number | undefined>(undefined);
@@ -116,19 +131,15 @@ export const GardenModel = (props: GardenModelProps) => {
       position={new Vector3(
         threeSpace(plant.x, config.bedLengthOuter),
         threeSpace(plant.y, config.bedWidthOuter),
-        zZero(config) - config.soilHeight + plant.size / 2,
+        zZeroFunc(config) - config.soilHeight + plant.size / 2,
       )}>
       {labelOnly
         ? <Text visible={alwaysShowLabels || i === hoveredPlant}
           renderOrder={2}
-          material-depthTest={false}
           fontSize={50}
+          color={"white"}
           position={[0, plant.size / 2 + 40, 0]}
-          font={ASSETS.fonts.cabinBold}
-          outlineColor={"black"}
-          outlineWidth={3}
-          outlineBlur={15}
-          outlineOpacity={0.7}>
+          rotation={[0, 0, 0]}>
           {plant.label}
         </Text>
         : <Image url={plant.icon} scale={plant.size} name={"" + i}
@@ -169,6 +180,10 @@ export const GardenModel = (props: GardenModelProps) => {
   };
   const camera = getCamera(config, props.activeFocus, initCamera);
 
+  const zero = zeroFunc(config);
+  const gridZ = zero.z - config.soilHeight;
+  const extents = extentsFunc(config);
+
   // eslint-disable-next-line no-null/no-null
   return <Group dispose={null}
     onPointerMove={config.eventDebug
@@ -188,13 +203,13 @@ export const GardenModel = (props: GardenModelProps) => {
     <Sphere args={[30000, 8, 16]}>
       <MeshBasicMaterial color={"#59d8ff"} side={BackSide} />
     </Sphere>
-    <animated.group scale={props.activeFocus ? 1 : scale}>
+    <AnimatedGroup scale={props.activeFocus ? 1 : scale}>
       <Camera makeDefault={true} name={"camera"}
         fov={40} near={10} far={75000}
         position={camera.position}
         rotation={[0, 0, 0]}
         up={[0, 0, 1]} />
-    </animated.group>
+    </AnimatedGroup>
     <OrbitControls maxPolarAngle={Math.PI / 2}
       enableZoom={config.zoom} enablePan={config.pan} dampingFactor={0.2}
       target={camera.target}
@@ -245,6 +260,22 @@ export const GardenModel = (props: GardenModelProps) => {
       {plants.map((plant, i) =>
         <Plant key={i} i={i} plant={plant} labelOnly={true} />)}
     </Group>
+    <Group name={"garden-grid"} visible={config.grid}>
+      {range(0, config.botSizeX + 100, 100).map(x =>
+        <Line key={x}
+          color={"white"}
+          points={[
+            [zero.x + x, zero.y, gridZ],
+            [zero.x + x, extents.y, gridZ],
+          ]} />)}
+      {range(0, config.botSizeY + 100, 100).map(y =>
+        <Line key={y}
+          color={"white"}
+          points={[
+            [zero.x, zero.y + y, gridZ],
+            [extents.x, zero.y + y, gridZ],
+          ]} />)}
+    </Group>
     <Group name={"plants"}
       visible={props.activeFocus != "Planter bed"}
       onPointerEnter={setHover(true)}
diff --git a/frontend/three_d_garden/helpers.ts b/frontend/three_d_garden/helpers.ts
index 41d268010e..5890d0ffbb 100644
--- a/frontend/three_d_garden/helpers.ts
+++ b/frontend/three_d_garden/helpers.ts
@@ -24,6 +24,18 @@ export const getColorFromBrightness = (value: number) => {
 };
 export const zDir = -1;
 
+export const zero = (config: Config): Record<"x" | "y" | "z", number> => ({
+  x: threeSpace(config.bedXOffset, config.bedLengthOuter),
+  y: threeSpace(config.bedYOffset, config.bedWidthOuter),
+  z: zZero(config),
+});
+
+export const extents = (config: Config): Record<"x" | "y" | "z", number> => ({
+  x: threeSpace(config.bedXOffset + config.botSizeX, config.bedLengthOuter),
+  y: threeSpace(config.bedYOffset + config.botSizeY, config.bedWidthOuter),
+  z: zZero(config) + zDir * config.botSizeZ,
+});
+
 interface Vector3Array extends Array<number> {
   0: number;
   1: number;
diff --git a/frontend/three_d_garden/index.tsx b/frontend/three_d_garden/index.tsx
index 7cd7f8ec0f..d19150b03b 100644
--- a/frontend/three_d_garden/index.tsx
+++ b/frontend/three_d_garden/index.tsx
@@ -1,11 +1,12 @@
 import { Canvas } from "@react-three/fiber";
 import React from "react";
 import { Config } from "./config";
-import { GardenModel } from "./garden";
+import { GardenModel, ThreeDGardenPlant } from "./garden";
 import { noop } from "lodash";
 
 export interface ThreeDGardenProps {
   config: Config;
+  plants: ThreeDGardenPlant[];
 }
 
 export const ThreeDGarden = (props: ThreeDGardenProps) => {
@@ -13,6 +14,7 @@ export const ThreeDGarden = (props: ThreeDGardenProps) => {
     <div className={"garden-bed-3d-model"}>
       <Canvas shadows={true}>
         <GardenModel config={props.config}
+          plants={props.plants}
           activeFocus={""} setActiveFocus={noop} />
       </Canvas>
     </div>
diff --git a/frontend/three_d_garden/packaging.tsx b/frontend/three_d_garden/packaging.tsx
index 24fe0acb83..bbe0c8e52e 100644
--- a/frontend/three_d_garden/packaging.tsx
+++ b/frontend/three_d_garden/packaging.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { Box, Text } from "@react-three/drei";
+import { Box } from "@react-three/drei";
 import { threeSpace } from "./helpers";
 import { Config } from "./config";
 import { Group, MeshPhongMaterial } from "./components";
-import { ASSETS } from "./constants";
+import { Text } from "./text";
 
 export interface PackagingProps {
   config: Config;
@@ -14,7 +14,7 @@ export const Packaging = (props: PackagingProps) => {
   const isXL = config.sizePreset == "Genesis XL";
   const mainCartonLength = 1060;
   const mainCartonWidth = 420;
-  const mainCartonHeight = 220;
+  const mainCartonHeight = config.kitVersion == "v1.7" ? 220 : 245;
   const extrusionKitLength = 1540;
   const extrusionKitWidth = isXL ? 170 : 100;
   const extrusionKitHeight = 60;
@@ -36,7 +36,7 @@ export const Packaging = (props: PackagingProps) => {
     position={[
       threeSpace(config.bedLengthOuter - 800, config.bedLengthOuter),
       threeSpace(-700, config.bedWidthOuter),
-      zGround + 110,
+      zGround + (mainCartonHeight / 2),
     ]}>
     <Group name={"main-carton"}>
       <Box name={"main-carton-box"}
@@ -45,12 +45,12 @@ export const Packaging = (props: PackagingProps) => {
         args={[mainCartonLength, mainCartonWidth, mainCartonHeight]}>
         <MeshPhongMaterial color={boxColor} />
       </Box>
-      <Text fontSize={55}
-        font={ASSETS.fonts.cabinBold}
+      <Text
+        fontSize={55}
         color={"black"}
         position={[0, -mainCartonWidth / 2 - 1, 0]}
         rotation={[Math.PI / 2, 0, 0]}>
-        {config.label}
+        {`${config.label} ${config.kitVersion}`}
       </Text>
       {[-450, 0, 450].map(x =>
         <Box name={"main-carton-strap"} key={x}
@@ -71,6 +71,7 @@ export const Packaging = (props: PackagingProps) => {
         </Box>)}
     </Group>
     <Group name={"extrusion-kit"}
+      visible={config.kitVersion == "v1.7"}
       position={[0, 0, (220 + 60) / 2]}>
       <Box name={"extrusion-kit-box"}
         castShadow={true}
diff --git a/frontend/three_d_garden/parts/cross_slide.tsx b/frontend/three_d_garden/parts/cross_slide.tsx
index bb27b27db4..4697cd2cfd 100644
--- a/frontend/three_d_garden/parts/cross_slide.tsx
+++ b/frontend/three_d_garden/parts/cross_slide.tsx
@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { InstancedBufferAttribute } from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent, InstancedMesh } from "../components";
+import { ThreeElements } from "@react-three/fiber";
 
 type Mesh = THREE.Mesh & { instanceMatrix: InstancedBufferAttribute | undefined };
 
@@ -146,7 +147,7 @@ export type CrossSlideFull = GLTF & {
 }
 
 export const CrossSlide = (model: CrossSlideFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     return <Group {...props}>
       <MeshComponent
diff --git a/frontend/three_d_garden/parts/gantry_wheel_plate.tsx b/frontend/three_d_garden/parts/gantry_wheel_plate.tsx
index 4bc7ceb342..d9a4a73d12 100644
--- a/frontend/three_d_garden/parts/gantry_wheel_plate.tsx
+++ b/frontend/three_d_garden/parts/gantry_wheel_plate.tsx
@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { InstancedBufferAttribute } from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent, InstancedMesh } from "../components";
+import { ThreeElements } from "@react-three/fiber";
 
 type Mesh = THREE.Mesh & { instanceMatrix: InstancedBufferAttribute | undefined };
 
@@ -100,7 +101,7 @@ export type GantryWheelPlateFull = GLTF & {
 }
 
 export const GantryWheelPlate = (model: GantryWheelPlateFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     return <Group {...props}>
       <MeshComponent
diff --git a/frontend/three_d_garden/parts/rotary_tool.tsx b/frontend/three_d_garden/parts/rotary_tool.tsx
index 751f61b915..8a9101d0ce 100644
--- a/frontend/three_d_garden/parts/rotary_tool.tsx
+++ b/frontend/three_d_garden/parts/rotary_tool.tsx
@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { InstancedBufferAttribute } from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent, InstancedMesh } from "../components";
+import { ThreeElements } from "@react-three/fiber";
 
 type Mesh = THREE.Mesh & { instanceMatrix: InstancedBufferAttribute | undefined };
 
@@ -61,7 +62,7 @@ export type RotaryToolFull = GLTF & {
 }
 
 export const RotaryTool = (model: RotaryToolFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     return <Group {...props}>
       <MeshComponent
diff --git a/frontend/three_d_garden/parts/seed_trough_assembly.tsx b/frontend/three_d_garden/parts/seed_trough_assembly.tsx
index db86837f6b..6094f1385e 100644
--- a/frontend/three_d_garden/parts/seed_trough_assembly.tsx
+++ b/frontend/three_d_garden/parts/seed_trough_assembly.tsx
@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent } from "../components";
 import { SeedTroughAssemblyMaterial } from "../constants";
+import { ThreeElements } from "@react-three/fiber";
 
 export type SeedTroughAssemblyFull = GLTF & {
   nodes: {
@@ -19,7 +20,7 @@ export type SeedTroughAssemblyFull = GLTF & {
 }
 
 export const SeedTroughAssembly = (model: SeedTroughAssemblyFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     // eslint-disable-next-line no-null/no-null
     return <Group {...props} dispose={null}>
diff --git a/frontend/three_d_garden/parts/seed_trough_holder.tsx b/frontend/three_d_garden/parts/seed_trough_holder.tsx
index 83a12db261..4a40cea920 100644
--- a/frontend/three_d_garden/parts/seed_trough_holder.tsx
+++ b/frontend/three_d_garden/parts/seed_trough_holder.tsx
@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent } from "../components";
 import { SeedTroughHolderMaterial } from "../constants";
+import { ThreeElements } from "@react-three/fiber";
 
 export type SeedTroughHolderFull = GLTF & {
   nodes: {
@@ -17,7 +18,7 @@ export type SeedTroughHolderFull = GLTF & {
 }
 
 export const SeedTroughHolder = (model: SeedTroughHolderFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     // eslint-disable-next-line no-null/no-null
     return <Group {...props} dispose={null}>
diff --git a/frontend/three_d_garden/parts/soil_sensor.tsx b/frontend/three_d_garden/parts/soil_sensor.tsx
index 71fb6d8f86..33ecfc1d3d 100644
--- a/frontend/three_d_garden/parts/soil_sensor.tsx
+++ b/frontend/three_d_garden/parts/soil_sensor.tsx
@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { InstancedBufferAttribute } from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent, InstancedMesh } from "../components";
+import { ThreeElements } from "@react-three/fiber";
 
 type Mesh = THREE.Mesh & { instanceMatrix: InstancedBufferAttribute | undefined };
 
@@ -61,7 +62,7 @@ export type SoilSensorFull = GLTF & {
 }
 
 export const SoilSensor = (model: SoilSensorFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     // eslint-disable-next-line no-null/no-null
     return <Group {...props} dispose={null}>
diff --git a/frontend/three_d_garden/parts/vacuum_pump_cover.tsx b/frontend/three_d_garden/parts/vacuum_pump_cover.tsx
index a83d1e790c..1d7335ce0d 100644
--- a/frontend/three_d_garden/parts/vacuum_pump_cover.tsx
+++ b/frontend/three_d_garden/parts/vacuum_pump_cover.tsx
@@ -3,6 +3,7 @@ import * as THREE from "three";
 import { GLTF } from "three-stdlib";
 import { Group, Mesh as MeshComponent } from "../components";
 import { VacuumPumpCoverMaterial } from "../constants";
+import { ThreeElements } from "@react-three/fiber";
 
 export type VacuumPumpCoverFull = GLTF & {
   nodes: {
@@ -16,7 +17,7 @@ export type VacuumPumpCoverFull = GLTF & {
 }
 
 export const VacuumPumpCover = (model: VacuumPumpCoverFull) =>
-  (props: JSX.IntrinsicElements["group"]) => {
+  (props: ThreeElements["group"]) => {
     const { nodes, materials } = model;
     // eslint-disable-next-line no-null/no-null
     return <Group {...props} dispose={null}>
diff --git a/frontend/three_d_garden/sun.tsx b/frontend/three_d_garden/sun.tsx
index ef19b1ba55..fed1db4b85 100644
--- a/frontend/three_d_garden/sun.tsx
+++ b/frontend/three_d_garden/sun.tsx
@@ -2,7 +2,9 @@ import React from "react";
 import { Config, seasonProperties } from "./config";
 import { Vector3 } from "three";
 import { useSpring, animated } from "@react-spring/three";
-import { Group } from "./components";
+import { Group, PointLight } from "./components";
+
+const AnimatedPointLight = animated(PointLight);
 
 export interface SunProps {
   config: Config;
@@ -44,7 +46,7 @@ export const Sun = (props: SunProps) => {
       [offset, offset],
       [offset, 0],
     ].map(([xOffset, yOffset], index) =>
-      <animated.pointLight key={index}
+      <AnimatedPointLight key={index}
         intensity={sunIntensity}
         color={sunColor}
         distance={sunDistance}
diff --git a/frontend/three_d_garden/text.tsx b/frontend/three_d_garden/text.tsx
new file mode 100644
index 0000000000..0a5d413667
--- /dev/null
+++ b/frontend/three_d_garden/text.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Center, Text3D } from "@react-three/drei";
+import { ASSETS } from "./constants";
+import { MeshPhongMaterial } from "./components";
+
+interface TextProps {
+  children: React.ReactNode;
+  position: [number, number, number];
+  rotation: [number, number, number];
+  fontSize: number;
+  color: string;
+  name?: string;
+  visible?: boolean;
+  renderOrder?: number;
+}
+
+export const Text = (props: TextProps) => {
+  return <Center
+    name={props.name}
+    visible={props.visible}
+    renderOrder={props.renderOrder}
+    position={props.position}>
+    <Text3D
+      font={ASSETS.fonts.cabinBold}
+      size={props.fontSize}
+      height={0.01}
+      rotation={props.rotation}>
+      {props.children}
+      <MeshPhongMaterial color={props.color} />
+    </Text3D>
+  </Center>;
+};
diff --git a/frontend/three_d_garden/zoom_beacons.tsx b/frontend/three_d_garden/zoom_beacons.tsx
index 54cddf722c..690e55e05f 100644
--- a/frontend/three_d_garden/zoom_beacons.tsx
+++ b/frontend/three_d_garden/zoom_beacons.tsx
@@ -3,11 +3,14 @@ import React from "react";
 import { Config } from "./config";
 import { FOCI, getCameraOffset, setUrlParam } from "./zoom_beacons_constants";
 import { useSpring, animated } from "@react-spring/three";
-import { Group, MeshPhongMaterial } from "./components";
+import { Group, Mesh, MeshPhongMaterial } from "./components";
 import { isDesktop } from "../screen_size";
 
 const beaconColor = "#0266b5";
 
+const AnimatedMesh = animated(Mesh);
+const AnimatedMeshPhongMaterial = animated(MeshPhongMaterial);
+
 export interface ZoomBeaconsProps {
   config: Config;
   activeFocus: string;
@@ -33,15 +36,15 @@ const BeaconPulse = (props: BeaconPulseProps) => {
     config: { duration: 1500 }
   });
 
-  return <animated.mesh scale={scale}>
+  return <AnimatedMesh scale={scale}>
     <Sphere args={[beaconSize, 12, 12]}
       renderOrder={1}>
-      <animated.meshPhongMaterial
+      <AnimatedMeshPhongMaterial
         color={beaconColor}
         opacity={opacity}
         transparent={true} />
     </Sphere>
-  </animated.mesh>;
+  </AnimatedMesh>;
 };
 
 export const ZoomBeacons = (props: ZoomBeaconsProps) => {
diff --git a/frontend/toast/__tests__/fb_toast_test.tsx b/frontend/toast/__tests__/fb_toast_test.tsx
index 1f50769bf9..a06cfae29d 100644
--- a/frontend/toast/__tests__/fb_toast_test.tsx
+++ b/frontend/toast/__tests__/fb_toast_test.tsx
@@ -12,6 +12,7 @@ import { mount } from "enzyme";
 import { Toast, ToastContainer, Toasts } from "../fb_toast";
 import { ToastProps, ToastsProps } from "../interfaces";
 import { fakeToasts } from "../../__test_support__/fake_toasts";
+import { Path } from "../../internal_urls";
 
 describe("<Toast />", () => {
   const fakeProps = (): ToastProps => ({
@@ -110,6 +111,22 @@ describe("<Toast />", () => {
     wrapper.setState({ intervalId: 1 });
     wrapper.unmount();
   });
+
+  it("redirects", () => {
+    location.pathname = Path.mock(Path.designer());
+    const p = fakeProps();
+    p.redirect = Path.plants();
+    mount(<Toast {...p} />);
+    expect(mockNavigate).toHaveBeenCalledWith(Path.plants());
+  });
+
+  it("doesn't redirect", () => {
+    location.pathname = Path.mock(Path.plants());
+    const p = fakeProps();
+    p.redirect = Path.plants();
+    mount(<Toast {...p} />);
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
 });
 
 describe("<Toasts />", () => {
diff --git a/frontend/toast/fb_toast.tsx b/frontend/toast/fb_toast.tsx
index 537f1b8bf8..c4cd6ac076 100644
--- a/frontend/toast/fb_toast.tsx
+++ b/frontend/toast/fb_toast.tsx
@@ -4,6 +4,8 @@ import { Actions } from "../constants";
 import { ToastProps, ToastsProps, ToastState } from "./interfaces";
 import { store } from "../redux/store";
 import { Markdown } from "../ui";
+import { Path } from "../internal_urls";
+import { Navigate } from "react-router";
 
 export class Toast extends React.Component<ToastProps, ToastState> {
   state: ToastState = {
@@ -47,7 +49,7 @@ export class Toast extends React.Component<ToastProps, ToastState> {
   };
 
   render() {
-    const { color } = this.props;
+    const { color, redirect } = this.props;
     const style = {
       animationPlayState: this.state.isHovered ? "paused" : "running",
     };
@@ -76,6 +78,7 @@ export class Toast extends React.Component<ToastProps, ToastState> {
         <div className={"toast-loader-right"} style={style}></div>
         <div className={"toast-loader-spinner"} style={style}></div>
       </div>
+      {redirect && !Path.equals(redirect) && <Navigate to={redirect} />}
     </div>;
   }
 }
diff --git a/frontend/toast/interfaces.ts b/frontend/toast/interfaces.ts
index daac4e972b..16c9eb901e 100644
--- a/frontend/toast/interfaces.ts
+++ b/frontend/toast/interfaces.ts
@@ -4,6 +4,7 @@ export interface ToastOptions {
   idPrefix?: string;
   noTimer?: boolean;
   noDismiss?: boolean;
+  redirect?: string;
 }
 
 interface CreateToastProps {
@@ -13,6 +14,7 @@ interface CreateToastProps {
   idPrefix?: string;
   noTimer?: boolean;
   noDismiss?: boolean;
+  redirect?: string;
 }
 
 export interface CreateToastOnceProps extends CreateToastProps {
diff --git a/frontend/tools/__tests__/add_tool_slot_test.tsx b/frontend/tools/__tests__/add_tool_slot_test.tsx
index 1be020f7f6..4d833aa598 100644
--- a/frontend/tools/__tests__/add_tool_slot_test.tsx
+++ b/frontend/tools/__tests__/add_tool_slot_test.tsx
@@ -16,7 +16,6 @@ import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
 import { init, save, edit, destroy } from "../../api/crud";
-import { push } from "../../history";
 import { SpecialStatus } from "farmbot";
 import { ToolPulloutDirection } from "farmbot/dist/resources/api_resources";
 import { mapStateToPropsAdd } from "../state_to_props";
@@ -73,7 +72,7 @@ describe("<AddToolSlot />", () => {
     const wrapper = shallow<AddToolSlot>(<AddToolSlot {...fakeProps()} />);
     wrapper.find("SaveBtn").simulate("click");
     expect(save).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("saves on unmount", () => {
diff --git a/frontend/tools/__tests__/add_tool_test.tsx b/frontend/tools/__tests__/add_tool_test.tsx
index 8195a9f364..41023823e9 100644
--- a/frontend/tools/__tests__/add_tool_test.tsx
+++ b/frontend/tools/__tests__/add_tool_test.tsx
@@ -12,7 +12,6 @@ import { RawAddTool as AddTool, mapStateToProps } from "../add_tool";
 import { fakeState } from "../../__test_support__/fake_state";
 import { SaveBtn } from "../../ui";
 import { initSave, init, destroy } from "../../api/crud";
-import { push } from "../../history";
 import { FirmwareHardware } from "farmbot";
 import { AddToolProps } from "../interfaces";
 import { mockDispatch } from "../../__test_support__/fake_dispatch";
@@ -82,7 +81,7 @@ describe("<AddTool />", () => {
       name: "Foo", flow_rate_ml_per_s: 0,
     });
     expect(wrapper.state().uuid).toEqual(undefined);
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("removes unsaved tool on exit", async () => {
@@ -96,7 +95,7 @@ describe("<AddTool />", () => {
       name: "Foo", flow_rate_ml_per_s: 0,
     });
     expect(wrapper.state().uuid).toEqual("fake uuid");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     wrapper.unmount();
     expect(destroy).toHaveBeenCalledWith("fake uuid");
   });
@@ -117,7 +116,7 @@ describe("<AddTool />", () => {
     const wrapper = mount(<AddTool {...p} />);
     wrapper.find("button").last().simulate("click");
     expect(initSave).toHaveBeenCalledTimes(expectedAdds);
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("doesn't add stock tools twice", () => {
@@ -127,7 +126,7 @@ describe("<AddTool />", () => {
     const wrapper = mount(<AddTool {...p} />);
     wrapper.find("button").last().simulate("click");
     expect(initSave).toHaveBeenCalledTimes(2);
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("copies a tool name", () => {
diff --git a/frontend/tools/__tests__/edit_tool_slot_test.tsx b/frontend/tools/__tests__/edit_tool_slot_test.tsx
index ce1dd4fbe4..cf8a7ce070 100644
--- a/frontend/tools/__tests__/edit_tool_slot_test.tsx
+++ b/frontend/tools/__tests__/edit_tool_slot_test.tsx
@@ -4,13 +4,6 @@ jest.mock("../../api/crud", () => ({
   destroy: jest.fn(),
 }));
 
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.toolSlots(1));
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: jest.fn(() => mockPath.split("/")),
-}));
-
 jest.mock("../../farm_designer/map/layers/tool_slots/tool_graphics", () => ({
   setToolHover: jest.fn(),
   ToolSlotSVG: () => <div />,
@@ -31,12 +24,12 @@ import { mapStateToPropsEdit } from "../state_to_props";
 import { SlotEditRows } from "../tool_slot_edit_components";
 import { fakeToolTransformProps } from "../../__test_support__/fake_tool_info";
 import { EditToolSlotProps } from "../interfaces";
-import { push } from "../../history";
 import {
   setToolHover,
 } from "../../farm_designer/map/layers/tool_slots/tool_graphics";
 import { SpecialStatus } from "farmbot";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
+import { Path } from "../../internal_urls";
 
 describe("<EditToolSlot />", () => {
   const fakeProps = (): EditToolSlotProps => ({
@@ -55,17 +48,17 @@ describe("<EditToolSlot />", () => {
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.toolSlots("nope"));
+    location.pathname = Path.mock(Path.toolSlots("nope"));
     const wrapper = mount(<EditToolSlot {...fakeProps()} />);
     expect(wrapper.text().toLowerCase()).toContain("redirecting");
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const wrapper = mount(<EditToolSlot {...fakeProps()} />);
     expect(wrapper.text().toLowerCase()).toContain("redirecting");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("renders", () => {
diff --git a/frontend/tools/__tests__/edit_tool_test.tsx b/frontend/tools/__tests__/edit_tool_test.tsx
index ae8b1cceed..75ee125bb9 100644
--- a/frontend/tools/__tests__/edit_tool_test.tsx
+++ b/frontend/tools/__tests__/edit_tool_test.tsx
@@ -4,13 +4,6 @@ jest.mock("../../api/crud", () => ({
   destroy: jest.fn(),
 }));
 
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.tools(1));
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../devices/actions", () => ({ sendRPC: jest.fn() }));
 
 import React from "react";
@@ -26,14 +19,15 @@ import { fakeState } from "../../__test_support__/fake_state";
 import {
   buildResourceIndex, fakeDevice,
 } from "../../__test_support__/resource_index_builder";
-import { push } from "../../history";
 import { edit, destroy, save } from "../../api/crud";
 import { EditToolProps } from "../interfaces";
 import { sendRPC } from "../../devices/actions";
+import { Path } from "../../internal_urls";
+import { mountWithContext } from "../../__test_support__/mount_with_context";
 
 describe("<EditTool />", () => {
   beforeEach(() => {
-    mockPath = Path.mock(Path.tools(1));
+    location.pathname = Path.mock(Path.tools(1));
   });
 
   const fakeProps = (): EditToolProps => ({
@@ -75,22 +69,22 @@ describe("<EditTool />", () => {
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.tools()) + "/";
+    location.pathname = Path.mock(Path.tools()) + "/";
     const p = fakeProps();
     p.findTool = jest.fn(() => undefined);
     const wrapper = mount<EditTool>(<EditTool {...p} />);
     expect(wrapper.instance().stringyID).toEqual("");
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const p = fakeProps();
     p.findTool = jest.fn(() => undefined);
-    const wrapper = mount(<EditTool {...p} />);
+    const wrapper = mountWithContext(<EditTool {...p} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("edits tool name", () => {
@@ -121,13 +115,13 @@ describe("<EditTool />", () => {
     const p = fakeProps();
     const tool = fakeTool();
     p.findTool = () => tool;
-    const wrapper = mount(<EditTool {...p} />);
+    const wrapper = mountWithContext(<EditTool {...p} />);
     wrapper.find(".save-btn").simulate("click");
     expect(edit).toHaveBeenCalledWith(expect.any(Object), {
       name: "Foo", flow_rate_ml_per_s: 0,
     });
     expect(save).toHaveBeenCalledWith(tool.uuid);
-    expect(push).toHaveBeenCalledWith(Path.tools());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools());
   });
 
   it("removes tool", () => {
diff --git a/frontend/tools/__tests__/index_test.tsx b/frontend/tools/__tests__/index_test.tsx
index 2d2a30eda5..ccb6ea0217 100644
--- a/frontend/tools/__tests__/index_test.tsx
+++ b/frontend/tools/__tests__/index_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.tools());
-jest.mock("../../history", () => ({
-  getPathArray: () => mockPath.split("/"),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({
   edit: jest.fn(),
   save: jest.fn(),
@@ -31,7 +24,6 @@ import {
 import {
   fakeTool, fakeToolSlot, fakeSensor, fakePointGroup,
 } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { fakeDevice } from "../../__test_support__/resource_index_builder";
 import { bot } from "../../__test_support__/fake_state/bot";
 import { error } from "../../toast/toast";
@@ -45,6 +37,8 @@ import { SearchField } from "../../ui/search_field";
 import { PanelSection } from "../../plants/plant_inventory";
 import { createGroup } from "../../point_groups/actions";
 import { DEFAULT_CRITERIA } from "../../point_groups/criteria/interfaces";
+import { Path } from "../../internal_urls";
+import { mountWithContext } from "../../__test_support__/mount_with_context";
 
 describe("<Tools />", () => {
   const fakeProps = (): ToolsProps => ({
@@ -112,8 +106,10 @@ describe("<Tools />", () => {
 
   it("navigates to group", () => {
     const wrapper = shallow<Tools>(<Tools {...fakeProps()} />);
-    wrapper.instance().navigate(1)();
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
+    wrapper.instance().navigateById(1)();
+    expect(navigate).toHaveBeenCalledWith(Path.groups(1));
   });
 
   it("adds new group", () => {
@@ -127,7 +123,8 @@ describe("<Tools />", () => {
       criteria: {
         ...DEFAULT_CRITERIA,
         string_eq: { pointer_type: ["ToolSlot"] },
-      }
+      },
+      navigate: expect.anything(),
     });
   });
 
@@ -138,11 +135,11 @@ describe("<Tools />", () => {
     p.toolSlots = [fakeToolSlot()];
     p.toolSlots[0].body.id = 2;
     p.toolSlots[0].body.tool_id = 3;
-    const wrapper = mount(<Tools {...p} />);
+    const wrapper = mountWithContext(<Tools {...p} />);
     wrapper.find(".tool-slot-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.toolSlots(2));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.toolSlots(2));
     wrapper.find(".tool-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.tools(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.tools(1));
   });
 
   it("hovers tool", () => {
@@ -311,13 +308,13 @@ describe("<ToolSlotInventoryItem />", () => {
   });
 
   it("opens tool slot", () => {
-    mockPath = Path.mock(Path.toolSlots());
+    location.pathname = Path.mock(Path.toolSlots());
     const p = fakeProps();
     p.toolSlot.body.id = 1;
     const wrapper = shallow(<ToolSlotInventoryItem {...p} />);
     wrapper.find("div").first().simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.toolSlots(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.toolSlots(1));
     expect(selectPoint).toHaveBeenCalled();
     expect(p.dispatch).not.toHaveBeenCalledWith({
       type: Actions.HOVER_TOOL_SLOT, payload: undefined,
@@ -325,14 +322,16 @@ describe("<ToolSlotInventoryItem />", () => {
   });
 
   it("removes item in box select mode", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     const p = fakeProps();
     p.toolSlot.body.id = 1;
     const wrapper = shallow(<ToolSlotInventoryItem {...p} />);
     wrapper.find("div").first().simulate("click");
-    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+    expect(mapPointClickAction).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.any(Function),
       p.toolSlot.uuid);
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.HOVER_TOOL_SLOT,
       payload: undefined,
diff --git a/frontend/tools/add_tool.tsx b/frontend/tools/add_tool.tsx
index 1b71814add..8a80050808 100644
--- a/frontend/tools/add_tool.tsx
+++ b/frontend/tools/add_tool.tsx
@@ -9,7 +9,7 @@ import { SaveBtn } from "../ui";
 import { SpecialStatus } from "farmbot";
 import { initSave, destroy, init, save } from "../api/crud";
 import { Panel } from "../farm_designer/panel_header";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { selectAllTools } from "../resources/selectors";
 import { betterCompact } from "../util";
 import {
@@ -54,7 +54,10 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
 
   newTool = (name: string) => this.props.dispatch(initSave("Tool", { name }));
 
-  back = () => push(Path.tools());
+  back = () => {
+    const navigate = useNavigate();
+    navigate(Path.tools());
+  };
 
   save = () => {
     const initTool = init("Tool", {
@@ -136,6 +139,7 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
 
   AddStockTools = () => {
     const add = this.state.toAdd.filter(this.filterExisting);
+    const navigate = useNavigate();
     return <div className="add-stock-tools"
       hidden={this.props.firmwareHardware == "none"}>
       <label>{t("stock names")}</label>
@@ -151,7 +155,7 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
         title={add.length > 0 ? t("Add selected") : t("None to add")}
         onClick={() => {
           add.map(n => this.newTool(n));
-          push(Path.tools());
+          navigate(Path.tools());
         }}>
         <i className="fa fa-plus" />
         {t("selected")}
@@ -179,21 +183,23 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
         </div>
       </DesignerPanelHeader>
       <DesignerPanelContent panelName={panelName}>
-        <div className="add-new-tool">
+        <div className="add-new-tool grid">
           <ToolSVG toolName={this.state.toolName} profile={true} />
           <CustomToolGraphicsInput
             toolName={this.state.toolName}
             dispatch={this.props.dispatch}
             saveFarmwareEnv={this.props.saveFarmwareEnv}
             env={this.props.env} />
-          <label>{t("Name")}</label>
-          <input defaultValue={this.state.toolName}
-            name="toolName"
-            onChange={e =>
-              this.setState({ toolName: e.currentTarget.value })} />
-          {reduceToolName(toolName) == ToolName.wateringNozzle &&
-            <WaterFlowRateInput value={this.state.flowRate}
-              onChange={this.changeFlowRate} />}
+          <div className="row grid-exp-2">
+            <label>{t("Name")}</label>
+            <input defaultValue={this.state.toolName}
+              name="toolName"
+              onChange={e =>
+                this.setState({ toolName: e.currentTarget.value })} />
+            {reduceToolName(toolName) == ToolName.wateringNozzle &&
+              <WaterFlowRateInput value={this.state.flowRate}
+                onChange={this.changeFlowRate} />}
+          </div>
           <p className="name-error">
             {alreadyAdded ? t("Already added.") : ""}
           </p>
@@ -205,3 +211,5 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
 }
 
 export const AddTool = connect(mapStateToProps)(RawAddTool);
+// eslint-disable-next-line import/no-default-export
+export default AddTool;
diff --git a/frontend/tools/add_tool_slot.tsx b/frontend/tools/add_tool_slot.tsx
index 946da8a1f2..b9d9eab485 100644
--- a/frontend/tools/add_tool_slot.tsx
+++ b/frontend/tools/add_tool_slot.tsx
@@ -9,7 +9,7 @@ import { SpecialStatus, TaggedToolSlotPointer } from "farmbot";
 import { init, save, edit, destroy } from "../api/crud";
 import { Panel } from "../farm_designer/panel_header";
 import { ToolPulloutDirection } from "farmbot/dist/resources/api_resources";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { SlotEditRows } from "./tool_slot_edit_components";
 import { hasUTM } from "../settings/firmware/firmware_hardware_support";
 import { mapStateToPropsAdd } from "./state_to_props";
@@ -56,7 +56,8 @@ export class RawAddToolSlot
 
   save = () => {
     this.state.uuid && this.props.dispatch(save(this.state.uuid));
-    push(Path.tools());
+    const navigate = useNavigate();
+    navigate(Path.tools());
   };
 
   render() {
@@ -94,3 +95,5 @@ export class RawAddToolSlot
 }
 
 export const AddToolSlot = connect(mapStateToPropsAdd)(RawAddToolSlot);
+// eslint-disable-next-line import/no-default-export
+export default AddToolSlot;
diff --git a/frontend/tools/edit_tool.tsx b/frontend/tools/edit_tool.tsx
index b56c7a1c1f..1ff41fa958 100644
--- a/frontend/tools/edit_tool.tsx
+++ b/frontend/tools/edit_tool.tsx
@@ -5,7 +5,6 @@ import {
 } from "../farm_designer/designer_panel";
 import { Everything } from "../interfaces";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
 import { TaggedTool, SpecialStatus, TaggedToolSlotPointer } from "farmbot";
 import {
   maybeFindToolById, getDeviceAccountSettings, selectAllToolSlotPointers,
@@ -28,6 +27,8 @@ import {
 } from "../farm_designer/map/tool_graphics/all_tools";
 import { ToolTips } from "../constants";
 import { sendRPC } from "../devices/actions";
+import { NavigationContext } from "../routes_helpers";
+import { Navigate } from "react-router";
 
 export const isActive = (toolSlots: TaggedToolSlotPointer[]) =>
   (toolId: number | undefined) =>
@@ -84,10 +85,14 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
 
   get tool() { return this.props.findTool(this.stringyID); }
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   fallback = () => {
     const toolsPath = Path.tools();
-    Path.startsWith(toolsPath) && push(toolsPath);
     return <this.PanelWrapper>
+      {Path.startsWith(toolsPath) && <Navigate to={toolsPath} />}
       <span>{t("Redirecting")}...</span>
     </this.PanelWrapper>;
   };
@@ -113,12 +118,12 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
               flow_rate_ml_per_s: this.state.flowRate,
             }));
             this.props.dispatch(save(tool.uuid));
-            push(Path.tools());
+            this.navigate(Path.tools());
           }}
           disabled={!toolName || nameTaken}
           status={SpecialStatus.DIRTY} />
         <i
-          className={`fa fa-trash fb-icon-button ${activeOrMounted
+          className={`fa fa-trash fb-icon-button invert ${activeOrMounted
             ? "pseudo-disabled"
             : ""}`}
           title={activeOrMounted ? message : t("delete")}
@@ -126,20 +131,22 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
             ? error(t(message))
             : dispatch(destroy(tool.uuid))} />
       </div>}>
-      <div className="edit-tool">
+      <div className="edit-tool grid">
         <ToolSVG toolName={toolName} profile={true} />
         <CustomToolGraphicsInput
           toolName={toolName}
           dispatch={this.props.dispatch}
           saveFarmwareEnv={this.props.saveFarmwareEnv}
           env={this.props.env} />
-        <label>{t("Name")}</label>
-        <input name="toolName"
-          value={toolName}
-          onChange={e => this.setState({ toolName: e.currentTarget.value })} />
-        {reduceToolName(toolName) == ToolName.wateringNozzle &&
-          <WaterFlowRateInput value={this.state.flowRate}
-            onChange={this.changeFlowRate} />}
+        <div className="row grid-exp-2">
+          <label>{t("Name")}</label>
+          <input name="toolName"
+            value={toolName}
+            onChange={e => this.setState({ toolName: e.currentTarget.value })} />
+          {reduceToolName(toolName) == ToolName.wateringNozzle &&
+            <WaterFlowRateInput value={this.state.flowRate}
+              onChange={this.changeFlowRate} />}
+        </div>
         <p className="name-error">
           {nameTaken ? t("Name already taken.") : ""}
         </p>
@@ -148,7 +155,7 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
   };
 
   PanelWrapper = (props: {
-    children: React.ReactChild | React.ReactChild[],
+    children: React.ReactNode,
     headerElement?: React.ReactElement,
   }) => {
     const panelName = "edit-tool";
@@ -172,3 +179,5 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
 }
 
 export const EditTool = connect(mapStateToProps)(RawEditTool);
+// eslint-disable-next-line import/no-default-export
+export default EditTool;
diff --git a/frontend/tools/edit_tool_slot.tsx b/frontend/tools/edit_tool_slot.tsx
index a8d091566a..e8ecab594d 100644
--- a/frontend/tools/edit_tool_slot.tsx
+++ b/frontend/tools/edit_tool_slot.tsx
@@ -4,7 +4,6 @@ import {
   DesignerPanel, DesignerPanelContent, DesignerPanelHeader,
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
 import { TaggedToolSlotPointer, SpecialStatus } from "farmbot";
 import { edit, save, destroy } from "../api/crud";
 import { Panel } from "../farm_designer/panel_header";
@@ -15,6 +14,7 @@ import { EditToolSlotProps, EditToolSlotState } from "./interfaces";
 import { setToolHover } from "../farm_designer/map/layers/tool_slots/tool_graphics";
 import { Popover } from "../ui";
 import { Path } from "../internal_urls";
+import { Navigate } from "react-router";
 
 export class RawEditToolSlot
   extends React.Component<EditToolSlotProps, EditToolSlotState> {
@@ -40,9 +40,9 @@ export class RawEditToolSlot
     const { toolSlot } = this;
     const toolsPath = Path.tools();
     const toolSlotsPath = Path.toolSlots();
-    !toolSlot && Path.startsWith(toolSlotsPath) && push(toolsPath);
     const panelName = "edit-tool-slot";
     return <DesignerPanel panelName={panelName} panel={Panel.Tools}>
+      {!toolSlot && Path.startsWith(toolSlotsPath) && <Navigate to={toolsPath} />}
       <DesignerPanelHeader
         panelName={panelName}
         title={t("Edit slot")}
@@ -56,7 +56,7 @@ export class RawEditToolSlot
                 title={t("Unable to save changes.")} />}
               content={<p>{t("Unable to save changes.")}</p>} />}
           {toolSlot && <i
-            className={"fa fa-trash fb-icon-button"}
+            className={"fa fa-trash fb-icon-button invert"}
             title={t("Delete")}
             onClick={() => this.props.dispatch(destroy(toolSlot.uuid))} />}
         </div>
@@ -100,3 +100,5 @@ export class RawEditToolSlot
 }
 
 export const EditToolSlot = connect(mapStateToPropsEdit)(RawEditToolSlot);
+// eslint-disable-next-line import/no-default-export
+export default EditToolSlot;
diff --git a/frontend/tools/index.tsx b/frontend/tools/index.tsx
index 7910722124..2ea70ec6d1 100644
--- a/frontend/tools/index.tsx
+++ b/frontend/tools/index.tsx
@@ -3,16 +3,14 @@ import { connect } from "react-redux";
 import {
   DesignerPanel, DesignerPanelTop, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
-import {
-  DesignerNavTabs, Panel, TAB_COLOR,
-} from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui/empty_state_wrapper";
 import { t } from "../i18next_wrapper";
 import { Content } from "../constants";
-import { push } from "../history";
-import { Row, Col, Help } from "../ui";
+import { useNavigate } from "react-router";
+import { Row, Help } from "../ui";
 import {
   botPositionLabel,
 } from "../farm_designer/map/layers/farmbot/bot_position_label";
@@ -40,6 +38,7 @@ import { pointGroupSubset } from "../plants/select_plants";
 import { Path } from "../internal_urls";
 import { UTMProfile } from "../farm_designer/map/profile/tools";
 import { ToolPulloutDirection } from "farmbot/dist/resources/api_resources";
+import { NavigationContext } from "../routes_helpers";
 
 export class RawTools extends React.Component<ToolsProps, ToolsState> {
   state: ToolsState = { searchTerm: "", groups: false };
@@ -92,10 +91,10 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
 
   ToolSlots = () =>
     <div className="tool-slots">
-      <div className="tool-slots-header">
+      <div className="row grid-exp-1">
         <label>{this.strings.toolSlots}</label>
         <Link to={Path.toolSlots("add")}>
-          <div className={`fb-button panel-${TAB_COLOR[Panel.Tools]}`}>
+          <div className={"fb-button green"}>
             <i className="fa fa-plus" title={this.strings.addSlot} />
           </div>
         </Link>
@@ -116,10 +115,10 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
 
   Tools = () =>
     <div className="tools">
-      <div className="tools-header">
+      <div className="row grid-exp-1">
         <label>{this.strings.tools}</label>
         <Link to={Path.tools("add")}>
-          <div className={`fb-button panel-${TAB_COLOR[Panel.Tools]} add-tool-btn`}>
+          <div className={"fb-button green add-tool-btn"}>
             <i className="fa fa-plus" title={this.strings.titleText} />
           </div>
         </Link>
@@ -159,7 +158,12 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
   toggleOpen = (category: keyof ToolsState) => () =>
     this.setState({ ...this.state, [category]: !this.state[category] });
 
-  navigate = (id: number | undefined) => () => push(Path.groups(id));
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+  navigateById = (id: number | undefined) => () => {
+    this.navigate(Path.groups(id));
+  };
 
   render() {
     const panelName = "tools";
@@ -169,7 +173,6 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
       .filter(p => p.body.name.toLowerCase()
         .includes(this.state.searchTerm.toLowerCase()));
     return <DesignerPanel panelName={panelName} panel={Panel.Tools}>
-      <DesignerNavTabs />
       <DesignerPanelTop
         panel={Panel.Tools}
         linkTo={!hasTools ? Path.tools("add") : undefined}
@@ -187,31 +190,34 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
           text={this.strings.emptyStateText}
           colorScheme={"tools"}>
           {!this.noUTM && <this.MountedToolInfo />}
-          <this.ToolSlots />
-          <this.Tools />
-          {toolSlotGroups.length > 0 &&
-            <PanelSection isOpen={this.state.groups} panel={Panel.Tools}
-              toggleOpen={this.toggleOpen("groups")}
-              itemCount={toolSlotGroups.length}
-              addNew={() => this.props.dispatch(createGroup({
-                criteria: {
-                  ...DEFAULT_CRITERIA,
-                  string_eq: { pointer_type: ["ToolSlot"] },
-                },
-              }))}
-              addTitle={t("add new group")}
-              addClassName={"plus-group"}
-              title={t("Groups")}>
-              {filteredGroups
-                .map(group => <GroupInventoryItem
-                  key={group.uuid}
-                  group={group}
-                  allPoints={this.props.allPoints}
-                  hovered={false}
-                  dispatch={this.props.dispatch}
-                  onClick={this.navigate(group.body.id)}
-                />)}
-            </PanelSection>}
+          <div className="grid double-gap">
+            <this.ToolSlots />
+            <this.Tools />
+            {toolSlotGroups.length > 0 &&
+              <PanelSection isOpen={this.state.groups} panel={Panel.Tools}
+                toggleOpen={this.toggleOpen("groups")}
+                itemCount={toolSlotGroups.length}
+                addNew={() => this.props.dispatch(createGroup({
+                  criteria: {
+                    ...DEFAULT_CRITERIA,
+                    string_eq: { pointer_type: ["ToolSlot"] },
+                  },
+                  navigate: this.navigate,
+                }))}
+                addTitle={t("add new group")}
+                addClassName={"plus-group"}
+                title={t("Groups")}>
+                {filteredGroups
+                  .map(group => <GroupInventoryItem
+                    key={group.uuid}
+                    group={group}
+                    allPoints={this.props.allPoints}
+                    hovered={false}
+                    dispatch={this.props.dispatch}
+                    onClick={this.navigateById(group.body.id)}
+                  />)}
+              </PanelSection>}
+          </div>
         </EmptyStateWrapper>
       </DesignerPanelContent>
     </DesignerPanel>;
@@ -222,74 +228,68 @@ export const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
   const { x, y, z, id, tool_id, gantry_mounted } = props.toolSlot.body;
   const toolName = props.tools
     .filter(tool => tool.body.id == tool_id)[0]?.body.name;
+  const navigate = useNavigate();
   return <div
     className={`tool-slot-search-item ${props.hovered ? "hovered" : ""}`}
     onClick={() => {
       if (getMode() == Mode.boxSelect) {
-        mapPointClickAction(props.dispatch, props.toolSlot.uuid)();
+        mapPointClickAction(navigate, props.dispatch, props.toolSlot.uuid)();
         props.dispatch(setToolHover(undefined));
       } else {
         props.dispatch(selectPoint([props.toolSlot.uuid]));
-        push(Path.toolSlots(id));
+        navigate(Path.toolSlots(id));
       }
     }}
     onMouseEnter={() => props.dispatch(setToolHover(props.toolSlot.uuid))}
     onMouseLeave={() => props.dispatch(setToolHover(undefined))}>
-    <Row>
-      <Col xs={2} className={"tool-slot-search-item-icon"}>
+    <Row className="grid-exp-2">
+      <div className={"tool-slot-search-item-icon"}>
         <ToolSlotSVG
           toolSlot={props.toolSlot}
           toolName={tool_id ? toolName : "Empty"}
           toolTransformProps={props.toolTransformProps} />
-      </Col>
-      <Col xs={6}>
-        {props.hideDropdown
-          ? <span className={"tool-slot-search-item-name"}>
-            {toolName || t("Empty")}
-          </span>
-          : <div className={"tool-selection-wrapper"}
-            onClick={e => e.stopPropagation()}>
-            <ToolSelection
-              tools={props.tools}
-              selectedTool={props.tools
-                .filter(tool => tool.body.id == tool_id)[0]}
-              onChange={update => {
-                props.dispatch(edit(props.toolSlot, update));
-                props.dispatch(save(props.toolSlot.uuid));
-              }}
-              noUTM={props.noUTM}
-              isActive={props.isActive}
-              filterSelectedTool={false}
-              filterActiveTools={true} />
-          </div>}
-      </Col>
-      <Col xs={4} className={"tool-slot-position-info"}>
-        <p className="tool-slot-position">
-          <i>{botPositionLabel({ x, y, z }, { gantryMounted: gantry_mounted })}</i>
-        </p>
-      </Col>
+      </div>
+      {props.hideDropdown
+        ? <span className={"tool-slot-search-item-name"}>
+          {toolName || t("Empty")}
+        </span>
+        : <div className={"tool-selection-wrapper"}
+          onClick={e => e.stopPropagation()}>
+          <ToolSelection
+            tools={props.tools}
+            selectedTool={props.tools
+              .filter(tool => tool.body.id == tool_id)[0]}
+            onChange={update => {
+              props.dispatch(edit(props.toolSlot, update));
+              props.dispatch(save(props.toolSlot.uuid));
+            }}
+            noUTM={props.noUTM}
+            isActive={props.isActive}
+            filterSelectedTool={false}
+            filterActiveTools={true} />
+        </div>}
+      <p className="tool-slot-position">
+        <i>{botPositionLabel({ x, y, z }, { gantryMounted: gantry_mounted })}</i>
+      </p>
     </Row>
   </div>;
 };
 
 const ToolInventoryItem = (props: ToolInventoryItemProps) => {
   const activeText = props.active ? t("in slot") : t("inactive");
+  const navigate = useNavigate();
   return <div className={"tool-search-item"}
-    onClick={() => push(Path.tools(props.toolId))}>
-    <Row>
-      <Col xs={2} className={"tool-search-item-icon"}>
-        <ToolSVG toolName={props.toolName} />
-      </Col>
-      <Col xs={7} className={"tool-search-item-name"}>
-        <p>{t(props.toolName)}</p>
-      </Col>
-      <Col xs={3} className={"tool-status"}>
-        <p className="tool-status">
-          <i>{props.mounted ? t("mounted") : activeText}</i>
-        </p>
-      </Col>
+    onClick={() => { navigate(Path.tools(props.toolId)); }}>
+    <Row className="grid-exp-2">
+      <ToolSVG toolName={props.toolName} />
+      <p className={"tool-search-item-name"}>{t(props.toolName)}</p>
+      <p className="tool-status">
+        <i>{props.mounted ? t("mounted") : activeText}</i>
+      </p>
     </Row>
   </div>;
 };
 
 export const Tools = connect(mapStateToProps)(RawTools);
+// eslint-disable-next-line import/no-default-export
+export default Tools;
diff --git a/frontend/tools/tool_slot_edit_components.tsx b/frontend/tools/tool_slot_edit_components.tsx
index 81b3093137..76b0e5de7e 100644
--- a/frontend/tools/tool_slot_edit_components.tsx
+++ b/frontend/tools/tool_slot_edit_components.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { t } from "../i18next_wrapper";
 import { Xyz } from "farmbot";
 import {
-  Row, Col, BlurableInput, FBSelect, NULL_CHOICE, DropDownItem, Popover,
+  Row, BlurableInput, FBSelect, NULL_CHOICE, DropDownItem, Popover,
 } from "../ui";
 import { BotPosition } from "../devices/interfaces";
 import { ToolPulloutDirection } from "farmbot/dist/resources/api_resources";
@@ -17,7 +17,7 @@ import { betterMerge } from "../util";
 import { GoToThisLocationButton } from "../farm_designer/move_to";
 
 export const GantryMountedInput = (props: GantryMountedInputProps) =>
-  <fieldset className="gantry-mounted-input">
+  <fieldset className="row grid-exp-1">
     <label>{t("Gantry-mounted")}</label>
     <input type="checkbox" name="gantry_mounted"
       onChange={() => props.onChange({ gantry_mounted: !props.gantryMounted })}
@@ -31,7 +31,7 @@ export const isToolFlipped =
 export const FlipToolDirection = (props: EditToolSlotMetaProps) => {
   const { toolSlotMeta } = props;
   const value = isToolFlipped(toolSlotMeta);
-  return <fieldset className="tool-direction-input">
+  return <fieldset className="row grid-exp-1">
     <label>{t("rotate tool 180 degrees")}</label>
     <input type="checkbox" name="tool_direction"
       onChange={() => {
@@ -45,21 +45,25 @@ export const FlipToolDirection = (props: EditToolSlotMetaProps) => {
 
 export const SlotDirectionInputRow = (props: SlotDirectionInputRowProps) => {
   const iconClass = directionIconClass(props.toolPulloutDirection);
-  return <fieldset className="tool-slot-direction-input">
-    <label>
-      {t("slot direction")}
-    </label>
-    <i className={`direction-icon ${iconClass} fb-icon-button`}
-      onClick={() => props.onChange({
-        pullout_direction: newSlotDirection(props.toolPulloutDirection)
-      })} />
-    <FBSelect
-      key={props.toolPulloutDirection}
-      list={DIRECTION_CHOICES()}
-      selectedItem={DIRECTION_CHOICES_DDI()[props.toolPulloutDirection]}
-      onChange={ddi => props.onChange({
-        pullout_direction: parseInt("" + ddi.value)
-      })} />
+  return <fieldset>
+    <Row className="grid-2-col">
+      <div>
+        <label>
+          {t("slot direction")}
+        </label>
+        <i className={`direction-icon ${iconClass} fb-icon-button invert`}
+          onClick={() => props.onChange({
+            pullout_direction: newSlotDirection(props.toolPulloutDirection)
+          })} />
+      </div>
+      <FBSelect
+        key={props.toolPulloutDirection}
+        list={DIRECTION_CHOICES()}
+        selectedItem={DIRECTION_CHOICES_DDI()[props.toolPulloutDirection]}
+        onChange={ddi => props.onChange({
+          pullout_direction: parseInt("" + ddi.value)
+        })} />
+    </Row>
   </fieldset>;
 };
 
@@ -89,22 +93,20 @@ export const ToolSelection = (props: ToolSelectionProps) =>
 
 export const ToolInputRow = (props: ToolInputRowProps) =>
   <div className="tool-slot-tool-input">
-    <Row>
-      <Col xs={12}>
-        <label>
-          {props.noUTM
-            ? t("Seed Container")
-            : t("Tool or Seed Container")}
-        </label>
-        <ToolSelection
-          tools={props.tools}
-          selectedTool={props.selectedTool}
-          onChange={props.onChange}
-          isActive={props.isActive}
-          noUTM={props.noUTM}
-          filterSelectedTool={false}
-          filterActiveTools={true} />
-      </Col>
+    <Row className="grid-2-col">
+      <label>
+        {props.noUTM
+          ? t("Seed Container")
+          : t("Tool or Seed Container")}
+      </label>
+      <ToolSelection
+        tools={props.tools}
+        selectedTool={props.selectedTool}
+        onChange={props.onChange}
+        isActive={props.isActive}
+        noUTM={props.noUTM}
+        filterSelectedTool={false}
+        filterActiveTools={true} />
     </Row>
   </div>;
 
@@ -114,33 +116,31 @@ export const SlotLocationInputRow = (props: SlotLocationInputRowProps) => {
     : props.slotLocation.x;
   const { y, z } = props.slotLocation;
   return <div className="tool-slot-location-input">
-    <Row>
-      <Col xs={11} className="axis-inputs">
-        {["x", "y", "z"].map((axis: Xyz) =>
-          <Col xs={4} key={axis}>
-            <label>{t("{{axis}} (mm)", { axis })}</label>
-            {axis == "x" && props.gantryMounted
-              ? <input disabled value={t("Gantry")} name={axis} />
-              : <BlurableInput
-                type="number"
-                value={props.slotLocation[axis]}
-                min={axis == "z" ? undefined : 0}
-                onCommit={e => props.onChange({
-                  [axis]: parseFloat(e.currentTarget.value)
-                })} />}
-          </Col>)}
-      </Col>
+    <Row className="tool-slot-location-grid">
+      {["x", "y", "z"].map((axis: Xyz) =>
+        <div key={axis}>
+          <label>{t("{{axis}} (mm)", { axis })}</label>
+          {axis == "x" && props.gantryMounted
+            ? <input disabled value={t("Gantry")} name={axis} />
+            : <BlurableInput
+              type="number"
+              value={props.slotLocation[axis]}
+              min={axis == "z" ? undefined : 0}
+              onCommit={e => props.onChange({
+                [axis]: parseFloat(e.currentTarget.value)
+              })} />}
+        </div>)}
       <UseCurrentLocation botPosition={props.botPosition}
         onChange={props.onChange} />
+      <GoToThisLocationButton
+        dispatch={props.dispatch}
+        locationCoordinate={{ x, y, z }}
+        botOnline={props.botOnline}
+        arduinoBusy={props.arduinoBusy}
+        currentBotLocation={props.botPosition}
+        movementState={props.movementState}
+        defaultAxes={props.defaultAxes} />
     </Row>
-    <GoToThisLocationButton
-      dispatch={props.dispatch}
-      locationCoordinate={{ x, y, z }}
-      botOnline={props.botOnline}
-      arduinoBusy={props.arduinoBusy}
-      currentBotLocation={props.botPosition}
-      movementState={props.movementState}
-      defaultAxes={props.defaultAxes} />
   </div>;
 };
 
@@ -150,7 +150,7 @@ export interface UseCurrentLocationProps {
 }
 
 export const UseCurrentLocation = (props: UseCurrentLocationProps) =>
-  <Col xs={1} className="use-current-location">
+  <div className="grid">
     <Popover
       target={<i className="fa fa-question-circle help-icon" />}
       content={<div className="current-location-info">
@@ -166,10 +166,10 @@ export const UseCurrentLocation = (props: UseCurrentLocationProps) =>
       }}>
       <i className="fa fa-crosshairs" />
     </button>
-  </Col>;
+  </div>;
 
 export const SlotEditRows = (props: SlotEditRowsProps) =>
-  <div className="tool-slot-edit-rows">
+  <div className="grid">
     <ToolSlotSVG toolSlot={props.toolSlot} profile={true}
       toolName={props.tool ? props.tool.body.name : "Empty"}
       toolTransformProps={props.toolTransformProps} />
diff --git a/frontend/tos_update/component.tsx b/frontend/tos_update/component.tsx
index 36a3a20563..bce1ca7ad5 100644
--- a/frontend/tos_update/component.tsx
+++ b/frontend/tos_update/component.tsx
@@ -5,7 +5,7 @@ import { AuthState } from "../auth/interfaces";
 import { Session } from "../session";
 import { AxiosErrorResponse, prettyPrintApiErrors } from "../util";
 import { API } from "../api";
-import { Row, Col, Widget, WidgetHeader, WidgetBody } from "../ui";
+import { Widget, WidgetHeader, WidgetBody } from "../ui";
 import { TermsCheckbox } from "../front_page/terms_checkbox";
 import { t } from "../i18next_wrapper";
 import { ExternalUrl } from "../external_urls";
@@ -56,35 +56,35 @@ export class TosUpdate extends React.Component<{}, Partial<State>> {
     if (this.tosLoadOk) {
       const agree = this.state.agree_to_terms;
       return <form onSubmit={this.submit}>
-        <div className="input-group">
-          <label> {t("Email")} </label>
-          <input type="email" name="email"
-            onChange={this.set("email").bind(this)}>
-          </input>
-          <label>{t("Password")}</label>
-          <input type="password"
-            onChange={this.set("password").bind(this)}>
-          </input>
+        <div className="input-group grid">
+          <div>
+            <label> {t("Email")} </label>
+            <input type="email" name="email"
+              onChange={this.set("email").bind(this)}>
+            </input>
+          </div>
+          <div>
+            <label>{t("Password")}</label>
+            <input type="password"
+              onChange={this.set("password").bind(this)}>
+            </input>
+          </div>
           <TermsCheckbox
             privUrl={globalConfig.PRIV_URL}
             tosUrl={globalConfig.TOS_URL}
             onChange={e =>
               this.setState({ agree_to_terms: e.currentTarget.checked })}
             agree={agree} />
-          <Row>
-            <Col xs={12}>
-              <button
-                className="green fb-button"
-                title={t("agree")}
-                onClick={() => {
-                  !agree && logError(t("Please agree to the terms."));
-                  this.update();
-                }}
-                type={agree ? "submit" : "button"}>
-                {t("I Agree to the Terms of Service")}
-              </button>
-            </Col>
-          </Row>
+          <button
+            className="green fb-button pull-right"
+            title={t("agree")}
+            onClick={() => {
+              !agree && logError(t("Please agree to the terms."));
+              this.update();
+            }}
+            type={agree ? "submit" : "button"}>
+            {t("I Agree to the Terms of Service")}
+          </button>
         </div>
       </form>;
     } else {
diff --git a/frontend/ui/__tests__/blurable_password_test.tsx b/frontend/ui/__tests__/blurable_password_test.tsx
index 4e6a0ecc0a..f29a383caa 100644
--- a/frontend/ui/__tests__/blurable_password_test.tsx
+++ b/frontend/ui/__tests__/blurable_password_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { shallow } from "enzyme";
 import {
   BlurablePassword,
diff --git a/frontend/ui/__tests__/color_picker_test.tsx b/frontend/ui/__tests__/color_picker_test.tsx
index d5567937a7..b3b8edb200 100644
--- a/frontend/ui/__tests__/color_picker_test.tsx
+++ b/frontend/ui/__tests__/color_picker_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import {
   ColorPicker,
diff --git a/frontend/ui/__tests__/column_test.tsx b/frontend/ui/__tests__/column_test.tsx
deleted file mode 100644
index cd51f97c52..0000000000
--- a/frontend/ui/__tests__/column_test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Col } from "../column";
-
-describe("<Col />", () => {
-  it("renders", () => {
-    const wrapper = shallow(<Col>text</Col>);
-    expect(wrapper.text()).toContain("text");
-  });
-});
diff --git a/frontend/ui/__tests__/doc_link_test.ts b/frontend/ui/__tests__/doc_link_test.ts
index 3bea5f7b3b..4e77b14bba 100644
--- a/frontend/ui/__tests__/doc_link_test.ts
+++ b/frontend/ui/__tests__/doc_link_test.ts
@@ -1,14 +1,7 @@
-let mockPath = "";
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 import {
   devDocLink, devDocLinkClick, docLink, docLinkClick, genesisDocLink,
 } from "../doc_link";
 import { ExternalUrl } from "../../external_urls";
-import { push } from "../../history";
 import { Path } from "../../internal_urls";
 
 describe("docLink", () => {
@@ -35,17 +28,17 @@ describe("genesisDocLink", () => {
 
 describe("docLinkClick", () => {
   it("navigates to doc link", () => {
-    mockPath = Path.mock(Path.designer());
+    location.pathname = Path.mock(Path.designer());
     docLinkClick("farmware")();
-    expect(push).toHaveBeenCalledWith(Path.help("farmware"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.help("farmware"));
     expect(location.assign).not.toHaveBeenCalled();
   });
 
   it("reloads to doc link", () => {
-    mockPath = Path.mock(Path.help());
+    location.pathname = Path.mock(Path.help());
     location.assign = jest.fn();
     docLinkClick("farmware")();
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(location.assign).toHaveBeenCalledWith(expect.stringContaining(
       Path.help("farmware")));
   });
@@ -53,9 +46,9 @@ describe("docLinkClick", () => {
 
 describe("devDocLinkClick", () => {
   it("navigates to doc link", () => {
-    mockPath = Path.mock(Path.designer());
+    location.pathname = Path.mock(Path.designer());
     devDocLinkClick("lua")();
-    expect(push).toHaveBeenCalledWith(Path.developer("lua"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.developer("lua"));
     expect(location.assign).not.toHaveBeenCalled();
   });
 });
diff --git a/frontend/ui/__tests__/tooltip_test.tsx b/frontend/ui/__tests__/tooltip_test.tsx
index db90e60ff0..5b7f1eb35f 100644
--- a/frontend/ui/__tests__/tooltip_test.tsx
+++ b/frontend/ui/__tests__/tooltip_test.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
 import { ToolTip, ToolTipProps } from "../tooltip";
-import { push } from "../../history";
 
 describe("<ToolTip />", () => {
   const fakeProps = (): ToolTipProps => ({
@@ -33,7 +32,8 @@ describe("<ToolTip />", () => {
     expect(wrapper.text()).toContain("Documentation");
     expect(wrapper.find("i").at(2).html()).toContain("fa-external-link");
     wrapper.find("a").simulate("click");
-    expect(push).toHaveBeenCalledWith(expect.stringContaining("weed-detection"));
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.stringContaining("weed-detection"));
   });
 
   it("stops propagation", () => {
diff --git a/frontend/ui/__tests__/widget_header_test.tsx b/frontend/ui/__tests__/widget_header_test.tsx
index 30a0303f75..a09e04564f 100644
--- a/frontend/ui/__tests__/widget_header_test.tsx
+++ b/frontend/ui/__tests__/widget_header_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import { WidgetHeader, WidgetHeaderProps } from "../widget_header";
 
diff --git a/frontend/ui/back_arrow.tsx b/frontend/ui/back_arrow.tsx
index f43a200d91..66797b85dc 100644
--- a/frontend/ui/back_arrow.tsx
+++ b/frontend/ui/back_arrow.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { t } from "../i18next_wrapper";
 
 interface BackArrowProps {
diff --git a/frontend/ui/blurable_password.tsx b/frontend/ui/blurable_password.tsx
index dcf5e4ae25..9e683127c0 100644
--- a/frontend/ui/blurable_password.tsx
+++ b/frontend/ui/blurable_password.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 export interface BPProps {
   onCommit(e: React.SyntheticEvent<HTMLInputElement>): void;
diff --git a/frontend/ui/column.tsx b/frontend/ui/column.tsx
deleted file mode 100644
index 5b7f5d437b..0000000000
--- a/frontend/ui/column.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import { parseColClassNames } from "./util";
-
-interface ColumnProps {
-  children?: React.ReactNode;
-  /** {xs-col-size} */
-  xs?: number;
-  /** {sm-col-size} */
-  sm?: number;
-  /** {md-col-size} */
-  md?: number;
-  /** {lg-col-size} */
-  lg?: number;
-  /** {xs-col-size-offset} */
-  xsOffset?: number;
-  /** {sm-col-size-offset} */
-  smOffset?: number;
-  /** {md-col-size-offset} */
-  mdOffset?: number;
-  /** {lg-col-size-offset} */
-  lgOffset?: number;
-  /** Default hidden prop for react components. */
-  hidden?: boolean;
-  key?: string | number;
-  className?: string;
-}
-
-export function Col(props: ColumnProps) {
-  const classNames = parseColClassNames(props);
-  return <div
-    className={classNames + " " + (props.className || "")}
-    hidden={!!props.hidden}>
-    {props.children}
-  </div>;
-}
diff --git a/frontend/ui/delete_button.tsx b/frontend/ui/delete_button.tsx
index 3ad1f1ec53..8436684ce5 100644
--- a/frontend/ui/delete_button.tsx
+++ b/frontend/ui/delete_button.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { destroy } from "../api/crud";
 import { t } from "../i18next_wrapper";
 import { UUID } from "../resources/interfaces";
@@ -7,7 +7,7 @@ import { omit } from "lodash";
 interface ButtonCustomProps {
   dispatch: Function;
   uuid: UUID;
-  children?: React.ReactChild
+  children?: React.ReactNode;
   onDestroy?: Function;
 }
 
@@ -29,7 +29,7 @@ const OMIT_THESE: Record<keyof ButtonCustomProps, true> = {
 export const DeleteButton = (props: DeleteButtonProps) =>
   <button
     {...omit(props, Object.keys(OMIT_THESE))}
-    className={`red fb-button del-button ${props.className}`}
+    className={`red fb-button ${props.className}`}
     title={t("Delete")}
     onClick={() =>
       props.dispatch(destroy(props.uuid))
diff --git a/frontend/ui/doc_link.ts b/frontend/ui/doc_link.ts
index 4ad1960985..dadd875d87 100644
--- a/frontend/ui/doc_link.ts
+++ b/frontend/ui/doc_link.ts
@@ -1,5 +1,5 @@
 import { ExternalUrl } from "../external_urls";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { Path } from "../internal_urls";
 
 /** A centralized list of all documentation slugs in the app makes it easier to
@@ -43,7 +43,8 @@ const genericDocLinkClick = <T>(slug: T, page: "help" | "developer") => () => {
   if (Path.getSlug(Path.designer()) == page) {
     location.assign(window.location.origin + Path.withApp(path("" + slug)));
   } else {
-    push(path("" + slug));
+    const navigate = useNavigate();
+    navigate(path("" + slug));
   }
 };
 
diff --git a/frontend/ui/empty_state_wrapper.tsx b/frontend/ui/empty_state_wrapper.tsx
index e4ad3a37e8..6fc4ef976f 100644
--- a/frontend/ui/empty_state_wrapper.tsx
+++ b/frontend/ui/empty_state_wrapper.tsx
@@ -22,7 +22,7 @@ export interface EmptyStateWrapperProps {
   notEmpty: unknown;
   title?: string;
   text?: string;
-  textElement?: JSX.Element;
+  textElement?: React.ReactNode;
   graphic: string;
   colorScheme?: "plants" | "events" | "gardens" | "points" | "tools"
   | "groups" | "weeds" | "zones" | "farmware" | "peripherals" | "sensors"
@@ -32,7 +32,7 @@ export interface EmptyStateWrapperProps {
 
 export const EmptyStateWrapper = (props: EmptyStateWrapperProps) =>
   props.notEmpty
-    ? <div className="non-empty-state">
+    ? <div className="non-empty-state grid no-gap">
       <ErrorBoundary>
         {props.children}
       </ErrorBoundary>
diff --git a/frontend/ui/expandable_header.tsx b/frontend/ui/expandable_header.tsx
index 70625b17c7..4166410216 100644
--- a/frontend/ui/expandable_header.tsx
+++ b/frontend/ui/expandable_header.tsx
@@ -5,7 +5,7 @@ export interface ExpandableHeaderProps {
   onClick(): void;
   title: string;
   expanded: boolean;
-  children?: React.ReactChild;
+  children?: React.ReactNode;
 }
 
 export const ExpandableHeader = (props: ExpandableHeaderProps) => {
diff --git a/frontend/ui/help.tsx b/frontend/ui/help.tsx
index 104b56b4c3..ae6aafd3b0 100644
--- a/frontend/ui/help.tsx
+++ b/frontend/ui/help.tsx
@@ -30,6 +30,7 @@ export function Help(props: HelpProps) {
     popoverClassName={"help"}
     target={
       <i title={props.title}
+        role={"tooltip"}
         className={[
           "fa",
           props.customIcon || "fa-question-circle",
diff --git a/frontend/ui/index.ts b/frontend/ui/index.ts
index 497ab28067..d0ca7d2aa7 100644
--- a/frontend/ui/index.ts
+++ b/frontend/ui/index.ts
@@ -3,7 +3,6 @@ export * from "./blurable_input";
 export * from "./checkbox";
 export * from "./color_picker";
 export * from "./colors";
-export * from "./column";
 // export * from "./delete_button";
 export * from "./doc_link";
 export * from "./empty_state_wrapper";
diff --git a/frontend/ui/page.tsx b/frontend/ui/page.tsx
index 7fe28c080e..b09bf61576 100644
--- a/frontend/ui/page.tsx
+++ b/frontend/ui/page.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ErrorBoundary } from "../error_boundary";
 
 interface PageProps {
diff --git a/frontend/ui/popover.tsx b/frontend/ui/popover.tsx
index fcbcb561aa..28d38cd50d 100644
--- a/frontend/ui/popover.tsx
+++ b/frontend/ui/popover.tsx
@@ -5,7 +5,7 @@ import {
 } from "@blueprintjs/core";
 
 export interface PopoverProps extends BasePopoverProps {
-  target: JSX.Element;
+  target: React.ReactNode;
 }
 
 export const Popover = (props: PopoverProps) => {
diff --git a/frontend/ui/row.tsx b/frontend/ui/row.tsx
index 27c6db464b..61ee4e5249 100644
--- a/frontend/ui/row.tsx
+++ b/frontend/ui/row.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 interface RowProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
diff --git a/frontend/ui/saucer.tsx b/frontend/ui/saucer.tsx
index 2f8d99bf73..f9e13a9a3f 100644
--- a/frontend/ui/saucer.tsx
+++ b/frontend/ui/saucer.tsx
@@ -5,7 +5,7 @@ export interface SaucerProps {
   active?: boolean;
   className?: string;
   title?: string;
-  children?: React.ReactChild | false;
+  children?: React.ReactNode;
 }
 
 /** A colored UI disc/circle. */
diff --git a/frontend/ui/search_field.tsx b/frontend/ui/search_field.tsx
index 7d5286908a..82faf33978 100644
--- a/frontend/ui/search_field.tsx
+++ b/frontend/ui/search_field.tsx
@@ -15,22 +15,20 @@ export interface SearchFieldProps {
 
 export const SearchField = (props: SearchFieldProps) =>
   <div className="thin-search-wrapper">
-    <div className="thin-search">
-      <div className="text-input-wrapper">
-        <ErrorBoundary>
-          {props.customLeftIcon || <i className="fa fa-search" />}
-          <input name={props.nameKey + "SearchTerm"}
-            value={props.searchTerm}
-            autoFocus={props.autoFocus}
-            onChange={e => props.onChange(e.currentTarget.value)}
-            onKeyPress={e => {
-              e.key == "Enter" && props.onEnter?.();
-              props.onKeyPress?.(e.currentTarget.value);
-            }}
-            placeholder={props.placeholder} />
-          {props.searchTerm && (props.customRightIcon ||
-            <i className="fa fa-times" onClick={() => props.onChange("")} />)}
-        </ErrorBoundary>
-      </div>
+    <div className="text-input-wrapper">
+      <ErrorBoundary>
+        {props.customLeftIcon || <i className="fa fa-search" />}
+        <input name={props.nameKey + "SearchTerm"}
+          value={props.searchTerm}
+          autoFocus={props.autoFocus}
+          onChange={e => props.onChange(e.currentTarget.value)}
+          onKeyPress={e => {
+            e.key == "Enter" && props.onEnter?.();
+            props.onKeyPress?.(e.currentTarget.value);
+          }}
+          placeholder={props.placeholder} />
+        {props.searchTerm && (props.customRightIcon ||
+          <i className="fa fa-times" onClick={() => props.onChange("")} />)}
+      </ErrorBoundary>
     </div>
   </div>;
diff --git a/frontend/ui/widget_body.tsx b/frontend/ui/widget_body.tsx
index 7102122adf..ed19fbbdb8 100644
--- a/frontend/ui/widget_body.tsx
+++ b/frontend/ui/widget_body.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ErrorBoundary } from "../error_boundary";
 
 interface WidgetBodyProps {
diff --git a/frontend/ui/widget_footer.tsx b/frontend/ui/widget_footer.tsx
index 206770e39b..3706555f4b 100644
--- a/frontend/ui/widget_footer.tsx
+++ b/frontend/ui/widget_footer.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 interface WidgetFooterProps {
   children?: React.ReactNode;
diff --git a/frontend/ui/widget_header.tsx b/frontend/ui/widget_header.tsx
index 865b0116a1..280ee31a26 100644
--- a/frontend/ui/widget_header.tsx
+++ b/frontend/ui/widget_header.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { t } from "../i18next_wrapper";
 import { ErrorBoundary } from "../error_boundary";
 import { Help } from "./help";
@@ -11,10 +11,12 @@ export interface WidgetHeaderProps {
 
 export function WidgetHeader(props: WidgetHeaderProps) {
   return <div className="widget-header">
-    <ErrorBoundary>
-      {props.children}
-    </ErrorBoundary>
     <h5>{t(props.title)}</h5>
-    {props.helpText && <Help text={props.helpText} />}
+    <div>
+      {props.helpText && <Help text={props.helpText} />}
+      <ErrorBoundary>
+        {props.children}
+      </ErrorBoundary>
+    </div>
   </div>;
 }
diff --git a/frontend/weeds/__tests__/weed_inventory_item_test.tsx b/frontend/weeds/__tests__/weed_inventory_item_test.tsx
index f5e9a86169..3d343f51a2 100644
--- a/frontend/weeds/__tests__/weed_inventory_item_test.tsx
+++ b/frontend/weeds/__tests__/weed_inventory_item_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.weeds());
-jest.mock("../../history", () => ({
-  push: jest.fn(),
-  getPathArray: () => mockPath.split("/"),
-}));
-
 jest.mock("../../farm_designer/map/actions", () => ({
   mapPointClickAction: jest.fn(() => jest.fn()),
   selectPoint: jest.fn(),
@@ -22,10 +15,10 @@ import {
   WeedInventoryItem, WeedInventoryItemProps,
 } from "../weed_inventory_item";
 import { fakeWeed } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { Actions } from "../../constants";
 import { mapPointClickAction } from "../../farm_designer/map/actions";
 import { edit, save, destroy } from "../../api/crud";
+import { Path } from "../../internal_urls";
 
 describe("<WeedInventoryItem /> />", () => {
   const fakeProps = (): WeedInventoryItemProps => ({
@@ -55,7 +48,7 @@ describe("<WeedInventoryItem /> />", () => {
     const wrapper = shallow(<WeedInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.weeds(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.weeds(1));
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_HOVERED_POINT,
       payload: p.tpp.uuid,
@@ -68,7 +61,7 @@ describe("<WeedInventoryItem /> />", () => {
     const wrapper = shallow(<WeedInventoryItem {...p} />);
     wrapper.simulate("click");
     expect(mapPointClickAction).not.toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith(Path.weeds("ERR_NO_POINT_ID"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.weeds("ERR_NO_POINT_ID"));
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_HOVERED_POINT,
       payload: p.tpp.uuid,
@@ -76,13 +69,15 @@ describe("<WeedInventoryItem /> />", () => {
   });
 
   it("removes item in box select mode", () => {
-    mockPath = Path.mock(Path.plants("select"));
+    location.pathname = Path.mock(Path.plants("select"));
     const p = fakeProps();
     const wrapper = shallow(<WeedInventoryItem {...p} />);
     wrapper.simulate("click");
-    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+    expect(mapPointClickAction).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.any(Function),
       p.tpp.uuid);
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_HOVERED_POINT,
       payload: undefined,
diff --git a/frontend/weeds/__tests__/weeds_edit_test.tsx b/frontend/weeds/__tests__/weeds_edit_test.tsx
index 817299f220..06b953ba18 100644
--- a/frontend/weeds/__tests__/weeds_edit_test.tsx
+++ b/frontend/weeds/__tests__/weeds_edit_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.weeds(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({
   save: jest.fn(),
   edit: jest.fn(),
@@ -30,9 +23,9 @@ import {
 } from "../../__test_support__/resource_index_builder";
 import { Actions } from "../../constants";
 import { DesignerPanelHeader } from "../../farm_designer/designer_panel";
-import { push } from "../../history";
 import { destroy, edit, save } from "../../api/crud";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
+import { Path } from "../../internal_urls";
 
 describe("<EditWeed />", () => {
   const fakeProps = (): EditWeedProps => ({
@@ -46,21 +39,21 @@ describe("<EditWeed />", () => {
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.weeds("nope"));
+    location.pathname = Path.mock(Path.weeds("nope"));
     const wrapper = mount(<EditWeed {...fakeProps()} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.weeds());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.weeds());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const wrapper = mount(<EditWeed {...fakeProps()} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("renders", () => {
-    mockPath = Path.mock(Path.weeds(1));
+    location.pathname = Path.mock(Path.weeds(1));
     const p = fakeProps();
     const weed = fakeWeed();
     weed.body.name = "weed 1";
@@ -71,7 +64,7 @@ describe("<EditWeed />", () => {
   });
 
   it("goes back", () => {
-    mockPath = Path.mock(Path.weeds(1));
+    location.pathname = Path.mock(Path.weeds(1));
     const p = fakeProps();
     const weed = fakeWeed();
     weed.body.id = 1;
@@ -84,7 +77,7 @@ describe("<EditWeed />", () => {
   });
 
   it("changes color", () => {
-    mockPath = Path.mock(Path.weeds(1));
+    location.pathname = Path.mock(Path.weeds(1));
     const p = fakeProps();
     p.findPoint = fakeWeed;
     const wrapper = mount(<EditWeed {...p} />);
@@ -94,7 +87,7 @@ describe("<EditWeed />", () => {
   });
 
   it("deletes weed", () => {
-    mockPath = Path.mock(Path.weeds(1));
+    location.pathname = Path.mock(Path.weeds(1));
     const p = fakeProps();
     const weed = fakeWeed();
     p.findPoint = () => weed;
@@ -104,7 +97,7 @@ describe("<EditWeed />", () => {
   });
 
   it("saves", () => {
-    mockPath = Path.mock(Path.weeds(1));
+    location.pathname = Path.mock(Path.weeds(1));
     const p = fakeProps();
     const weed = fakeWeed();
     weed.body.id = 1;
@@ -115,7 +108,7 @@ describe("<EditWeed />", () => {
   });
 
   it("doesn't save", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const p = fakeProps();
     const weed = fakeWeed();
     weed.body.id = 1;
diff --git a/frontend/weeds/__tests__/weeds_inventory_test.tsx b/frontend/weeds/__tests__/weeds_inventory_test.tsx
index 48d7a86c32..5652a40064 100644
--- a/frontend/weeds/__tests__/weeds_inventory_test.tsx
+++ b/frontend/weeds/__tests__/weeds_inventory_test.tsx
@@ -31,11 +31,11 @@ import { edit, save } from "../../api/crud";
 import { PanelSection } from "../../plants/plant_inventory";
 import { createGroup } from "../../point_groups/actions";
 import { DEFAULT_CRITERIA } from "../../point_groups/criteria/interfaces";
-import { push } from "../../history";
 import { weedsPanelState } from "../../__test_support__/panel_state";
 import { Actions } from "../../constants";
 import { Path } from "../../internal_urls";
 import { deletePointsByIds } from "../../api/delete_points";
+import { mountWithContext } from "../../__test_support__/mount_with_context";
 
 describe("<Weeds> />", () => {
   const fakeProps = (): WeedsProps => ({
@@ -111,21 +111,24 @@ describe("<Weeds> />", () => {
 
   it("navigates to group", () => {
     const wrapper = shallow<Weeds>(<Weeds {...fakeProps()} />);
-    wrapper.instance().navigate(1)();
-    expect(push).toHaveBeenCalledWith(Path.groups(1));
+    const navigate = jest.fn();
+    wrapper.instance().navigate = navigate;
+    wrapper.instance().navigateById(1)();
+    expect(navigate).toHaveBeenCalledWith(Path.groups(1));
   });
 
   it("adds new weed", () => {
-    const wrapper = mount(<Weeds {...fakeProps()} />);
+    const wrapper = mountWithContext(<Weeds {...fakeProps()} />);
     wrapper.find(".plus-weed").simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.weeds("add"));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.weeds("add"));
   });
 
   it("adds new group", () => {
     const wrapper = shallow(<Weeds {...fakeProps()} />);
     wrapper.find(PanelSection).first().props().addNew();
     expect(createGroup).toHaveBeenCalledWith({
-      criteria: { ...DEFAULT_CRITERIA, string_eq: { pointer_type: ["Weed"] } }
+      criteria: { ...DEFAULT_CRITERIA, string_eq: { pointer_type: ["Weed"] } },
+      navigate: expect.anything(),
     });
   });
 
diff --git a/frontend/weeds/weed_inventory_item.tsx b/frontend/weeds/weed_inventory_item.tsx
index 71b5fca3dd..858ef3492f 100644
--- a/frontend/weeds/weed_inventory_item.tsx
+++ b/frontend/weeds/weed_inventory_item.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { TaggedWeedPointer } from "farmbot";
 import { Actions } from "../constants";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { t } from "../i18next_wrapper";
 import { svgToUrl } from "../open_farm/icons";
 import { genericWeedIcon } from "../point_groups/point_group_item";
@@ -20,74 +20,73 @@ export interface WeedInventoryItemProps {
   maxSize?: number;
 }
 
-export class WeedInventoryItem extends
-  React.Component<WeedInventoryItemProps, {}> {
+export const WeedInventoryItem = (props: WeedInventoryItemProps) => {
+  const navigate = useNavigate();
+  const weed = props.tpp.body;
+  const { tpp, dispatch } = props;
+  const weedId = (weed.id || "ERR_NO_POINT_ID").toString();
+  const scale = props.maxSize
+    ? round(Math.max(0.5, weed.radius / props.maxSize), 2)
+    : 1;
 
-  render() {
-    const weed = this.props.tpp.body;
-    const { tpp, dispatch } = this.props;
-    const weedId = (weed.id || "ERR_NO_POINT_ID").toString();
-    const scale = this.props.maxSize
-      ? round(Math.max(0.5, weed.radius / this.props.maxSize), 2)
-      : 1;
+  const toggle = (action: "enter" | "leave") => {
+    const isEnter = action === "enter";
+    dispatch({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: isEnter ? tpp.uuid : undefined
+    });
+  };
 
-    const toggle = (action: "enter" | "leave") => {
-      const isEnter = action === "enter";
-      dispatch({
-        type: Actions.TOGGLE_HOVERED_POINT,
-        payload: isEnter ? tpp.uuid : undefined
-      });
-    };
+  const click = () => {
+    if (getMode() == Mode.boxSelect) {
+      mapPointClickAction(navigate, dispatch, tpp.uuid)();
+      toggle("leave");
+    } else {
+      navigate(Path.weeds(weedId));
+      dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: tpp.uuid });
+      dispatch(selectPoint([tpp.uuid]));
+    }
+  };
 
-    const click = () => {
-      if (getMode() == Mode.boxSelect) {
-        mapPointClickAction(dispatch, tpp.uuid)();
-        toggle("leave");
-      } else {
-        push(Path.weeds(weedId));
-        dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: tpp.uuid });
-        dispatch(selectPoint([tpp.uuid]));
-      }
-    };
-
-    return <div
-      className={`weed-search-item ${this.props.hovered ? "hovered" : ""}`}
-      key={weedId}
-      onMouseEnter={() => toggle("enter")}
-      onMouseLeave={() => toggle("leave")}
-      onClick={click}>
-      <span className={"weed-item-icon"}
-        style={{ transform: `scale(${scale})` }}>
-        <img className={"weed-icon"}
-          src={FilePath.DEFAULT_WEED_ICON}
-          width={32}
-          height={32} />
-        <img
-          src={svgToUrl(genericWeedIcon(weed.meta.color))}
-          width={32}
-          height={32} />
-      </span>
-      <span className="weed-search-item-name">
-        {weed.name || t("Untitled weed")}
-      </span>
-      {this.props.pending &&
+  return <div
+    className={`weed-search-item row grid-exp-2 ${props.hovered ? "hovered" : ""}`}
+    key={weedId}
+    onMouseEnter={() => toggle("enter")}
+    onMouseLeave={() => toggle("leave")}
+    onClick={click}>
+    <span className={"weed-item-icon"}
+      style={{ transform: `scale(${scale})` }}>
+      <img className={"weed-icon"}
+        src={FilePath.DEFAULT_WEED_ICON}
+        width={32}
+        height={32} />
+      <img
+        src={svgToUrl(genericWeedIcon(weed.meta.color))}
+        width={32}
+        height={32} />
+    </span>
+    <span className="weed-search-item-name">
+      {weed.name || t("Untitled weed")}
+    </span>
+    <div className="row">
+      {props.pending &&
         <button className={"fb-button green"} onClick={e => {
           e.stopPropagation();
-          this.props.dispatch(edit(tpp, { plant_stage: "active" }));
-          this.props.dispatch(save(tpp.uuid));
+          props.dispatch(edit(tpp, { plant_stage: "active" }));
+          props.dispatch(save(tpp.uuid));
         }}>
           <i className={"fa fa-check"} />
         </button>}
-      {this.props.pending &&
+      {props.pending &&
         <button className={"fb-button red"} onClick={e => {
           e.stopPropagation();
-          this.props.dispatch(destroy(tpp.uuid, true));
+          props.dispatch(destroy(tpp.uuid, true));
         }}>
           <i className={"fa fa-times"} />
         </button>}
-      <p className="weed-search-item-info">
-        <i>{`(${round(weed.x)}, ${round(weed.y)}) r${round(weed.radius)}`}</i>
-      </p>
-    </div>;
-  }
-}
+    </div>
+    <p className="weed-search-item-info">
+      <i>{`(${round(weed.x)}, ${round(weed.y)}) r${round(weed.radius)}`}</i>
+    </p>
+  </div>;
+};
diff --git a/frontend/weeds/weeds_edit.tsx b/frontend/weeds/weeds_edit.tsx
index 3025974210..40ac055a6b 100644
--- a/frontend/weeds/weeds_edit.tsx
+++ b/frontend/weeds/weeds_edit.tsx
@@ -4,7 +4,7 @@ import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { Everything, MovementState, ResourceColor } from "../interfaces";
 import { TaggedWeedPointer } from "farmbot";
 import { maybeFindWeedPointerById } from "../resources/selectors";
@@ -46,74 +46,75 @@ export const mapStateToProps = (props: Everything): EditWeedProps => ({
   movementState: props.app.movement,
 });
 
-export class RawEditWeed extends React.Component<EditWeedProps, {}> {
-  get stringyID() { return Path.getSlug(Path.weeds()); }
-  get weed() {
-    if (this.stringyID) {
-      return this.props.findPoint(parseInt(this.stringyID));
+export const RawEditWeed = (props: EditWeedProps) => {
+  const getWeed = () => {
+    const stringyID = Path.getSlug(Path.weeds());
+    if (stringyID) {
+      return props.findPoint(parseInt(stringyID));
     }
-  }
-  get panelName() { return "weed-info"; }
+  };
+  const weed = getWeed();
+  const panelName = "weed-info";
 
-  render() {
-    const { weed } = this;
-    const { dispatch } = this.props;
-    const weedsPath = Path.weeds();
-    !weed && Path.startsWith(weedsPath) && push(weedsPath);
-    const weedColor = weed?.body.meta.color || "red";
-    return <DesignerPanel panelName={this.panelName} panel={Panel.Weeds}>
-      <DesignerPanelHeader
-        panelName={this.panelName}
-        panel={Panel.Weeds}
-        colorClass={weedColor}
-        titleElement={<ResourceTitle
-          key={weed?.body.name}
-          resource={weed}
-          save={true}
-          fallback={t("Edit weed")}
-          dispatch={dispatch} />}
-        specialStatus={weed?.specialStatus}
-        onSave={() => weed?.uuid &&
-          dispatch(save(weed.uuid))}
-        backTo={weedsPath}
-        onBack={() => {
-          dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: undefined });
-          dispatch(selectPoint(undefined));
-        }}>
-        <div className={"panel-header-icon-group"}>
-          <Popover className={"color-picker"}
-            position={Position.BOTTOM}
-            popoverClassName={"colorpicker-menu gray"}
-            target={<i title={t("select color")}
-              className={"fa fa-paint-brush fb-icon-button"} />}
-            content={<ColorPickerCluster
-              onChange={color =>
-                updatePoint(weed, dispatch)({ meta: { color } })}
-              current={weedColor as ResourceColor} />} />
-          {weed &&
-            <i title={t("delete")}
-              className={"fa fa-trash fb-icon-button"}
-              onClick={() => dispatch(destroy(weed.uuid))} />}
+  const { dispatch } = props;
+  const weedsPath = Path.weeds();
+  const navigate = useNavigate();
+  !weed && Path.startsWith(weedsPath) && navigate(weedsPath);
+  const weedColor = weed?.body.meta.color || "red";
+  return <DesignerPanel panelName={panelName} panel={Panel.Weeds}>
+    <DesignerPanelHeader
+      panelName={panelName}
+      panel={Panel.Weeds}
+      colorClass={weedColor}
+      titleElement={<ResourceTitle
+        key={weed?.body.name}
+        resource={weed}
+        save={true}
+        fallback={t("Edit weed")}
+        dispatch={dispatch} />}
+      specialStatus={weed?.specialStatus}
+      onSave={() => weed?.uuid &&
+        dispatch(save(weed.uuid))}
+      backTo={weedsPath}
+      onBack={() => {
+        dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: undefined });
+        dispatch(selectPoint(undefined));
+      }}>
+      <div className={"panel-header-icon-group"}>
+        <Popover className={"color-picker"}
+          position={Position.BOTTOM}
+          popoverClassName={"colorpicker-menu gray"}
+          target={<i title={t("select color")}
+            className={"fa fa-paint-brush fb-icon-button"} />}
+          content={<ColorPickerCluster
+            onChange={color =>
+              updatePoint(weed, dispatch)({ meta: { color } })}
+            current={weedColor as ResourceColor} />} />
+        {weed &&
+          <i title={t("delete")}
+            className={"fa fa-trash fb-icon-button"}
+            onClick={() => dispatch(destroy(weed.uuid))} />}
+      </div>
+    </DesignerPanelHeader>
+    <DesignerPanelContent panelName={panelName}>
+      {weed
+        ? <div className={"weed-panel-content-wrapper"}>
+          <EditPointProperties point={weed}
+            botOnline={props.botOnline}
+            dispatch={props.dispatch}
+            arduinoBusy={props.arduinoBusy}
+            currentBotLocation={props.currentBotLocation}
+            movementState={props.movementState}
+            defaultAxes={props.defaultAxes}
+            updatePoint={updatePoint(weed, dispatch)} />
+          <AdditionalWeedProperties point={weed}
+            updatePoint={updatePoint(weed, dispatch)} />
         </div>
-      </DesignerPanelHeader>
-      <DesignerPanelContent panelName={this.panelName}>
-        {weed
-          ? <div className={"weed-panel-content-wrapper"}>
-            <EditPointProperties point={weed}
-              botOnline={this.props.botOnline}
-              dispatch={this.props.dispatch}
-              arduinoBusy={this.props.arduinoBusy}
-              currentBotLocation={this.props.currentBotLocation}
-              movementState={this.props.movementState}
-              defaultAxes={this.props.defaultAxes}
-              updatePoint={updatePoint(weed, dispatch)} />
-            <AdditionalWeedProperties point={weed}
-              updatePoint={updatePoint(weed, dispatch)} />
-          </div>
-          : <span>{t("Redirecting")}...</span>}
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+        : <span>{t("Redirecting")}...</span>}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const EditWeed = connect(mapStateToProps)(RawEditWeed);
+// eslint-disable-next-line import/no-default-export
+export default EditWeed;
diff --git a/frontend/weeds/weeds_inventory.tsx b/frontend/weeds/weeds_inventory.tsx
index 80a582c458..063f0a1f22 100644
--- a/frontend/weeds/weeds_inventory.tsx
+++ b/frontend/weeds/weeds_inventory.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Everything, WeedsPanelState } from "../interfaces";
-import { DesignerNavTabs, Panel, TAB_COLOR } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui/empty_state_wrapper";
@@ -33,9 +33,9 @@ import { pointGroupSubset } from "../plants/select_plants";
 import { DEFAULT_CRITERIA } from "../point_groups/criteria/interfaces";
 import { createGroup } from "../point_groups/actions";
 import { GroupInventoryItem } from "../point_groups/group_inventory_item";
-import { push } from "../history";
 import { Path } from "../internal_urls";
 import { deleteAllIds } from "../api/delete_points_handler";
+import { NavigationContext } from "../routes_helpers";
 
 export interface WeedsProps {
   weeds: TaggedWeedPointer[];
@@ -73,7 +73,7 @@ export interface WeedsSectionProps {
   layerValue?: boolean;
   layerSetting?: BooleanConfigKey;
   layerDisabled?: boolean;
-  children?: JSX.Element;
+  children?: React.ReactNode;
   allWeeds?: TaggedWeedPointer[];
 }
 
@@ -86,33 +86,35 @@ export const WeedsSection = (props: WeedsSectionProps) => {
     <div className={`${props.category}-weeds-header section-header`}
       onClick={props.clickOpen}>
       <label>{`${t(props.sectionTitle)} (${props.items.length})`}</label>
-      {props.category == "pending" && props.items.length > 0 && props.open &&
-        <div className={"approval-buttons"}>
-          <button className={"fb-button green"} onClick={e => {
-            e.stopPropagation();
-            props.items.map(weed => {
-              props.dispatch(edit(weed, { plant_stage: "active" }));
-              props.dispatch(save(weed.uuid));
-            });
-          }}>
-            <i className={"fa fa-check"} />{t("all")}
-          </button>
-          <button className={"fb-button red"}
-            onClick={deleteAllIds("weeds", props.items)}>
-            <i className={"fa fa-times"} />{t("all")}
-          </button>
-        </div>}
-      <i className={`fa fa-caret-${props.open ? "up" : "down"}`} />
-      {layerSetting && props.open &&
-        <ToggleButton disabled={props.layerDisabled}
-          toggleValue={props.layerValue}
-          customText={{ textFalse: t("off"), textTrue: t("on") }}
-          toggleAction={e => {
-            e.stopPropagation();
-            props.dispatch(setWebAppConfigValue(
-              layerSetting, !props.layerValue));
-          }} />}
-      {props.open && props.children}
+      <div className="row">
+        {props.category == "pending" && props.items.length > 0 && props.open &&
+          <div className={"approval-buttons row"}>
+            <button className={"fb-button green"} onClick={e => {
+              e.stopPropagation();
+              props.items.map(weed => {
+                props.dispatch(edit(weed, { plant_stage: "active" }));
+                props.dispatch(save(weed.uuid));
+              });
+            }}>
+              <i className={"fa fa-check"} />{t("all")}
+            </button>
+            <button className={"fb-button red"}
+              onClick={deleteAllIds("weeds", props.items)}>
+              <i className={"fa fa-times"} />{t("all")}
+            </button>
+          </div>}
+        {layerSetting && props.open &&
+          <ToggleButton disabled={props.layerDisabled}
+            toggleValue={props.layerValue}
+            customText={{ textFalse: t("off"), textTrue: t("on") }}
+            toggleAction={e => {
+              e.stopPropagation();
+              props.dispatch(setWebAppConfigValue(
+                layerSetting, !props.layerValue));
+            }} />}
+        {props.open && props.children}
+        <i className={`fa fa-caret-${props.open ? "up" : "down"}`} />
+      </div>
     </div>
     <Collapse isOpen={props.open}>
       {noWeeds && <EmptyStateWrapper
@@ -175,7 +177,7 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
       layerValue={!!this.props.getConfigValue(BooleanSetting.show_weeds)}
       allWeeds={this.props.weeds}
       dispatch={this.props.dispatch}>
-      <div className={"section-action-btn-group"}>
+      <div className={"section-action-btn-group row"}>
         {items.length > 0 &&
           <button className={"fb-button red delete"}
             title={t("delete all")}
@@ -183,14 +185,10 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
             {t("delete all")}
           </button>}
         <div
-          className={[
-            "fb-button",
-            `panel-${TAB_COLOR[Panel.Weeds]}`,
-            "plus-weed",
-          ].join(" ")}
+          className={"fb-button green plus-weed"}
           onClick={e => {
             e.stopPropagation();
-            push(Path.weeds("add"));
+            this.navigate(Path.weeds("add"));
           }}>
           <i className={"fa fa-plus"} title={t("add weed")} />
         </div>
@@ -212,7 +210,7 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
       layerValue={!!this.props.getConfigValue(BooleanSetting.show_historic_points)}
       layerDisabled={!this.props.getConfigValue(BooleanSetting.show_weeds)}
       dispatch={this.props.dispatch}>
-      <div className={"section-action-btn-group"}>
+      <div className={"section-action-btn-group row"}>
         {items.length > 0 &&
           <button className={"fb-button red delete"}
             title={t("delete all")}
@@ -223,7 +221,12 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
     </WeedsSection>;
   };
 
-  navigate = (id: number | undefined) => () => push(Path.groups(id));
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+  navigateById = (id: number | undefined) => () => {
+    this.navigate(Path.groups(id));
+  };
 
   render() {
     const weedGroups = pointGroupSubset(this.props.groups, "Weed");
@@ -231,7 +234,6 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
       .filter(p => p.body.name.toLowerCase()
         .includes(this.state.searchTerm.toLowerCase()));
     return <DesignerPanel panelName={"weeds-inventory"} panel={Panel.Weeds}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Weeds}>
         <SearchField nameKey={"weeds"}
           searchTerm={this.state.searchTerm}
@@ -250,6 +252,7 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
               ...DEFAULT_CRITERIA,
               string_eq: { pointer_type: ["Weed"] },
             },
+            navigate: this.navigate,
           }))}
           addTitle={t("add new group")}
           addClassName={"plus-group"}
@@ -261,7 +264,7 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
               allPoints={this.props.allPoints}
               hovered={false}
               dispatch={this.props.dispatch}
-              onClick={this.navigate(group.body.id)}
+              onClick={this.navigateById(group.body.id)}
             />)}
         </PanelSection>
         <this.PendingWeeds />
@@ -273,3 +276,5 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
 }
 
 export const Weeds = connect(mapStateToProps)(RawWeeds);
+// eslint-disable-next-line import/no-default-export
+export default Weeds;
diff --git a/frontend/wizard/__tests__/checks_test.tsx b/frontend/wizard/__tests__/checks_test.tsx
index 520aab77a8..04df6759cd 100644
--- a/frontend/wizard/__tests__/checks_test.tsx
+++ b/frontend/wizard/__tests__/checks_test.tsx
@@ -93,7 +93,6 @@ import { mockDispatch } from "../../__test_support__/fake_dispatch";
 import { calibrate } from "../../photos/camera_calibration/actions";
 import { FarmwareName } from "../../sequences/step_tiles/tile_execute_script";
 import { ExternalUrl } from "../../external_urls";
-import { push } from "../../history";
 import { PLACEHOLDER_FARMBOT } from "../../photos/images/image_flipper";
 import { changeBlurableInput, clickButton } from "../../__test_support__/helpers";
 import { Actions } from "../../constants";
@@ -105,6 +104,7 @@ const fakeProps = (): WizardStepComponentProps => ({
   resources: buildResourceIndex([fakeDevice()]).index,
   bot: bot,
   dispatch: mockDispatch(),
+  navigate: jest.fn(),
   getConfigValue: jest.fn(),
 });
 
@@ -666,12 +666,12 @@ describe("<AxisActions />", () => {
     const config = fakeFirmwareConfig();
     p.resources = buildResourceIndex([config]).index;
     const wrapper = mount(<AxisActions {...p} />);
-    expect(wrapper.text().toLowerCase()).toContain("current position");
+    expect(wrapper.text().toLowerCase()).toContain("position (mm)");
   });
 
   it("handles missing settings", () => {
     const wrapper = mount(<AxisActions {...fakeProps()} />);
-    expect(wrapper.text().toLowerCase()).not.toContain("current position");
+    expect(wrapper.text().toLowerCase()).not.toContain("position (mm)");
   });
 });
 
@@ -792,6 +792,7 @@ describe("<Tour />", () => {
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.SET_TOUR, payload: "gettingStarted",
     });
-    expect(push).toHaveBeenCalledWith(tourPath("", "gettingStarted", "intro"));
+    expect(p.navigate).toHaveBeenCalledWith(
+      tourPath("", "gettingStarted", "intro"));
   });
 });
diff --git a/frontend/wizard/__tests__/prerequisites_test.tsx b/frontend/wizard/__tests__/prerequisites_test.tsx
index f89bd083b5..e49f23aae7 100644
--- a/frontend/wizard/__tests__/prerequisites_test.tsx
+++ b/frontend/wizard/__tests__/prerequisites_test.tsx
@@ -22,6 +22,7 @@ describe("<ProductRegistration />", () => {
     resources: buildResourceIndex([fakeDevice()]).index,
     bot: bot,
     dispatch: mockDispatch(),
+    navigate: jest.fn(),
     getConfigValue: jest.fn(),
   });
 
diff --git a/frontend/wizard/__tests__/step_test.tsx b/frontend/wizard/__tests__/step_test.tsx
index 95fb1ae801..4f7417c2b3 100644
--- a/frontend/wizard/__tests__/step_test.tsx
+++ b/frontend/wizard/__tests__/step_test.tsx
@@ -45,6 +45,7 @@ describe("<WizardStepContainer />", () => {
     resources: buildResourceIndex([]).index,
     bot: bot,
     dispatch: jest.fn(),
+    navigate: jest.fn(),
     getConfigValue: jest.fn(),
   });
 
diff --git a/frontend/wizard/checks.tsx b/frontend/wizard/checks.tsx
index f159e6044d..88d9262c0b 100644
--- a/frontend/wizard/checks.tsx
+++ b/frontend/wizard/checks.tsx
@@ -34,7 +34,7 @@ import {
 import { t } from "../i18next_wrapper";
 import {
   BlurableInput,
-  Checkbox, Col, docLink, DropDownItem, FBSelect, genesisDocLink, Row, ToggleButton,
+  Checkbox, docLink, DropDownItem, FBSelect, genesisDocLink, Row, ToggleButton,
 } from "../ui";
 import {
   changeFirmwareHardware, SEED_DATA_OPTIONS, SEED_DATA_OPTIONS_DDI,
@@ -87,7 +87,6 @@ import {
 } from "../photos/camera_calibration/constants";
 import { tourPath } from "../help/tours";
 import { TOURS } from "../help/tours/data";
-import { push } from "../history";
 import { FilePath } from "../internal_urls";
 import { BotPositionRows } from "../controls/move/bot_position_rows";
 import {
@@ -155,7 +154,7 @@ const CameraCheckBase = (props: CameraCheckBaseProps) => {
     setError(true);
   }
 
-  return <div className={"camera-check"}
+  return <div className={"camera-check grid"}
     onClick={() => {
       setPrevImageId(getLastImageId());
       setPrevLogTime(getLastLogTimestamp());
@@ -715,19 +714,15 @@ export const CameraOffset = (props: WizardStepComponentProps) => {
       props.dispatch(saveOrEditFarmwareEnv(props.resources)(
         key, JSON.stringify(formatEnvKey(key, value)))),
   };
-  return <Row>
-    <Col xs={6}>
-      <NumberBoxConfig {...common}
-        settingName={DeviceSetting.cameraOffsetX}
-        configKey={"CAMERA_CALIBRATION_camera_offset_x"}
-        helpText={helpText} />
-    </Col>
-    <Col xs={6}>
-      <NumberBoxConfig {...common}
-        settingName={DeviceSetting.cameraOffsetY}
-        configKey={"CAMERA_CALIBRATION_camera_offset_y"}
-        helpText={helpText} />
-    </Col>
+  return <Row className="grid-2-col">
+    <NumberBoxConfig {...common}
+      settingName={DeviceSetting.cameraOffsetX}
+      configKey={"CAMERA_CALIBRATION_camera_offset_x"}
+      helpText={helpText} />
+    <NumberBoxConfig {...common}
+      settingName={DeviceSetting.cameraOffsetY}
+      configKey={"CAMERA_CALIBRATION_camera_offset_y"}
+      helpText={helpText} />
   </Row>;
 };
 
@@ -735,20 +730,18 @@ export const CameraImageOrigin = (props: WizardStepComponentProps) => {
   const env = getEnv(props.resources);
   const wDEnv = prepopulateEnv(env);
   return <Row>
-    <Col xs={12}>
-      <DropdownConfig
-        settingName={DeviceSetting.originLocationInImage}
-        wdEnvGet={key => envGet(key, wDEnv)}
-        onChange={(key, value) =>
-          props.dispatch(saveOrEditFarmwareEnv(props.resources)(
-            key, JSON.stringify(formatEnvKey(key, value))))}
-        list={ORIGIN_DROPDOWNS()}
-        configKey={"CAMERA_CALIBRATION_image_bot_origin_location"}
-        helpText={t(ToolTips.IMAGE_BOT_ORIGIN_LOCATION, {
-          defaultOrigin: SPECIAL_VALUE_DDI()[WD_KEY_DEFAULTS[
-            "CAMERA_CALIBRATION_image_bot_origin_location"]].label
-        })} />
-    </Col>
+    <DropdownConfig
+      settingName={DeviceSetting.originLocationInImage}
+      wdEnvGet={key => envGet(key, wDEnv)}
+      onChange={(key, value) =>
+        props.dispatch(saveOrEditFarmwareEnv(props.resources)(
+          key, JSON.stringify(formatEnvKey(key, value))))}
+      list={ORIGIN_DROPDOWNS()}
+      configKey={"CAMERA_CALIBRATION_image_bot_origin_location"}
+      helpText={t(ToolTips.IMAGE_BOT_ORIGIN_LOCATION, {
+        defaultOrigin: SPECIAL_VALUE_DDI()[WD_KEY_DEFAULTS[
+          "CAMERA_CALIBRATION_image_bot_origin_location"]].label
+      })} />
   </Row>;
 };
 
@@ -805,15 +798,16 @@ export const CameraReplacement = () =>
     </p>
   </div>;
 
-export const Tour = (tourSlug: string) =>
-  (props: WizardStepComponentProps) =>
+export const Tour = (tourSlug: string) => {
+  return (props: WizardStepComponentProps) =>
     <button className={"fb-button green tour-start"}
       title={t("Start tour")}
       onClick={() => {
         const firstStep = TOURS()[tourSlug].steps[0];
         props.dispatch({ type: Actions.SET_TOUR, payload: tourSlug });
         props.dispatch({ type: Actions.SET_TOUR_STEP, payload: firstStep.slug });
-        push(tourPath(firstStep.url, tourSlug, firstStep.slug));
+        props.navigate(tourPath(firstStep.url, tourSlug, firstStep.slug));
       }}>
       {t("Start tour")}
     </button>;
+};
diff --git a/frontend/wizard/index.tsx b/frontend/wizard/index.tsx
index 98b2b233f9..dcf9f90289 100644
--- a/frontend/wizard/index.tsx
+++ b/frontend/wizard/index.tsx
@@ -6,7 +6,7 @@ import { every, isUndefined, noop, some } from "lodash";
 import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../farm_designer/designer_panel";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import { Everything } from "../interfaces";
 import { Saucer } from "../ui";
 import {
@@ -32,6 +32,7 @@ import {
   completeSetup,
   resetSetup,
 } from "./actions";
+import { NavigationContext } from "../routes_helpers";
 
 export const mapStateToProps = (props: Everything): SetupWizardProps => ({
   resources: props.resources.index,
@@ -153,10 +154,13 @@ export class RawSetupWizard
     [this.stepSection(stepSlug)]: true,
   });
 
+  static contextType = NavigationContext;
+  context!: React.ContextType<typeof NavigationContext>;
+  navigate = this.context;
+
   render() {
     const panelName = "setup";
     return <DesignerPanel panelName={panelName} panel={Panel.Controls}>
-      <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Controls} />
       <DesignerPanelContent panelName={panelName}>
         <WizardHeader reset={this.reset} results={this.props.wizardStepResults}
@@ -183,11 +187,12 @@ export class RawSetupWizard
                     bot={this.props.bot}
                     dispatch={this.props.dispatch}
                     getConfigValue={this.props.getConfigValue}
+                    navigate={this.navigate}
                     resources={this.props.resources} />)}
               </Collapse>
             </div>)}
         {this.props.device?.body.setup_completed_at &&
-          <div className={"setup-complete"}>
+          <div className={"setup-complete row half-gap"}>
             <Saucer color={"green"}><i className={"fa fa-check"} /></Saucer>
             <p>{t("Setup Complete!")}</p>
           </div>}
@@ -197,7 +202,7 @@ export class RawSetupWizard
 }
 
 const WizardHeader = (props: WizardHeaderProps) =>
-  <div className={"wizard-header"}>
+  <div className={"wizard-header row grid-exp-1"}>
     <h1>{t("Setup")}</h1>
     <p className={"progress-meter"}>
       {setupProgressString(props.results, props.stepDataProps)}
@@ -210,8 +215,8 @@ const WizardHeader = (props: WizardHeaderProps) =>
   </div>;
 
 const WizardSectionHeader = (props: WizardSectionHeaderProps) =>
-  <h2 onClick={props.toggleSection(props.section.slug)}>
-    {t(props.section.title)}
+  <h2 onClick={props.toggleSection(props.section.slug)}
+    className="row grid-exp-2">
     {every(props.section.steps.map(step =>
       props.results[step.slug]?.answer)) &&
       <Saucer color={"green"}>
@@ -226,8 +231,16 @@ const WizardSectionHeader = (props: WizardSectionHeaderProps) =>
           <i className={"fa fa-times"} />
         </div>
       </Saucer>}
+    {!every(props.section.steps.map(step =>
+      props.results[step.slug]?.answer)) &&
+      !some(props.section.steps.map(step =>
+        props.results[step.slug]?.answer == false)) &&
+      <Saucer color={"gray"} />}
+    {t(props.section.title)}
     <i className={
       `fa fa-caret-${props.sectionOpen ? "up" : "down"}`} />
   </h2>;
 
 export const SetupWizard = connect(mapStateToProps)(RawSetupWizard);
+// eslint-disable-next-line import/no-default-export
+export default SetupWizard;
diff --git a/frontend/wizard/interfaces.ts b/frontend/wizard/interfaces.ts
index a6e13aebb6..cf00f25a74 100644
--- a/frontend/wizard/interfaces.ts
+++ b/frontend/wizard/interfaces.ts
@@ -9,6 +9,7 @@ import { TimeSettings } from "../interfaces";
 import { ResourceIndex } from "../resources/interfaces";
 import { ControlsCheckOptions, PinBindingOptions } from "./checks";
 import { WizardSectionSlug, WizardStepSlug } from "./data";
+import { NavigateFunction } from "react-router";
 
 export interface SetupWizardProps extends WizardOutcomeComponentProps {
   timeSettings: TimeSettings;
@@ -55,6 +56,7 @@ export interface WizardOutcomeComponentProps {
 
 export interface WizardStepComponentProps extends WizardOutcomeComponentProps {
   setStepSuccess(success: boolean, outcome?: string): () => void;
+  navigate: NavigateFunction
 }
 
 interface ComponentOptions {
@@ -139,6 +141,7 @@ export interface WizardStepContainerProps extends WizardOutcomeComponentProps {
   setStepSuccess(stepSlug: WizardStepSlug):
     (success: boolean, outcome?: string) => () => void;
   timeSettings: TimeSettings;
+  navigate: NavigateFunction;
 }
 
 export interface TroubleshootingTipsProps extends WizardOutcomeComponentProps {
diff --git a/frontend/wizard/settings.tsx b/frontend/wizard/settings.tsx
index e3e8e267c0..6852d950b8 100644
--- a/frontend/wizard/settings.tsx
+++ b/frontend/wizard/settings.tsx
@@ -1,42 +1,27 @@
 import React from "react";
 import { t } from "../i18next_wrapper";
-import { Row, Col } from "../ui";
 import {
   completeSetup, destroyAllWizardStepResults, resetSetup,
 } from "./actions";
 import { SetupWizardSettingsProps } from "./interfaces";
 
 export const SetupWizardSettings = (props: SetupWizardSettingsProps) =>
-  <div className={"setup-settings"}>
-    <Row />
-    <Row />
-    <Row>
-      <Col xs={8}>
-        <label>
-          {t("Restart setup wizard")}
-        </label>
-      </Col>
-      <Col xs={4}>
-        <button className={"fb-button red"} onClick={() => {
-          props.dispatch(destroyAllWizardStepResults(
-            props.wizardStepResults));
-          props.dispatch(resetSetup(props.device));
-        }}>
-          {t("restart")}
-        </button>
-      </Col>
-    </Row>
-    <Row>
-      <Col xs={8}>
-        <label>
-          {t("Complete setup wizard")}
-        </label>
-      </Col>
-      <Col xs={4}>
-        <button className={"fb-button green"} onClick={() =>
-          props.dispatch(completeSetup(props.device))}>
-          {t("complete")}
-        </button>
-      </Col>
-    </Row>
+  <div className={"grid grid-exp-1"}>
+    <label>
+      {t("Restart setup wizard")}
+    </label>
+    <button className={"fb-button red"} onClick={() => {
+      props.dispatch(destroyAllWizardStepResults(
+        props.wizardStepResults));
+      props.dispatch(resetSetup(props.device));
+    }}>
+      {t("restart")}
+    </button>
+    <label>
+      {t("Complete setup wizard")}
+    </label>
+    <button className={"fb-button green"} onClick={() =>
+      props.dispatch(completeSetup(props.device))}>
+      {t("complete")}
+    </button>
   </div>;
diff --git a/frontend/wizard/step.tsx b/frontend/wizard/step.tsx
index fd967ab87b..5b7529cdd1 100644
--- a/frontend/wizard/step.tsx
+++ b/frontend/wizard/step.tsx
@@ -23,15 +23,15 @@ export const WizardStepHeader = (props: WizardStepHeaderProps) => {
   const normalStepColor = stepDone ? "green" : "gray";
   const stepColor = stepFail ? "red" : normalStepColor;
 
-  return <div className={`wizard-step-header ${stepOpen ? "open" : ""}`}
+  return <div className={`wizard-step-header row grid-exp-2 ${stepOpen ? "open" : ""}`}
     onClick={props.openStep(props.step.slug)}>
-    <h3>{t(props.step.title)}</h3>
     <Saucer color={stepColor}>
       <div className={"step-icon"}>
         {stepDone && <i className={"fa fa-check"} />}
         {stepFail && <i className={"fa fa-times"} />}
       </div>
     </Saucer>
+    <h3>{t(props.step.title)}</h3>
     {stepOpen && <div className={"wizard-step-info"}>
       {props.showProgress && <p>
         {t("Step {{ num }} of {{ total }}", {
@@ -64,77 +64,82 @@ export const WizardStepContainer = (props: WizardStepContainerProps) => {
       openStep={props.openStep}
       timeSettings={props.timeSettings} />
     <Collapse isOpen={props.stepOpen == step.slug}>
-      {step.prerequisites &&
-        some(step.prerequisites.map(pre => !pre.status())) &&
-        <div className={"prerequisites"}>
-          {step.prerequisites.map((prerequisite, index) =>
-            !prerequisite.status() && <prerequisite.indicator key={index} />)}
-        </div>}
-      <Markdown>{t(step.content)}</Markdown>
-      {step.warning &&
-        <div className={"warning-banner"}>
-          <p>{t(step.warning)}</p>
-        </div>}
-      {step.video && <Video url={step.video} />}
-      {step.images && <Image imageFilenames={step.images} />}
-      <div className={[
-        "wizard-components",
-        step.componentOptions?.border ?? true ? "" : "no-border",
-        step.componentOptions?.fullWidth ? "full-width" : "",
-        step.componentOptions?.background ?? true ? "" : "no-background",
-      ].join(" ")}>
-        {step.component &&
-          <step.component setStepSuccess={setSuccess}
+      <div className="grid wizard-step-content">
+        {step.prerequisites &&
+          some(step.prerequisites.map(pre => !pre.status())) &&
+          <div className={"prerequisites"}>
+            {step.prerequisites.map((prerequisite, index) =>
+              !prerequisite.status() && <prerequisite.indicator key={index} />)}
+          </div>}
+        <Markdown>{t(step.content)}</Markdown>
+        {step.warning &&
+          <div className={"warning-banner"}>
+            <p>{t(step.warning)}</p>
+          </div>}
+        {step.video && <Video url={step.video} />}
+        {step.images && <Image imageFilenames={step.images} />}
+        <div className={[
+          "wizard-components",
+          step.componentOptions?.border ?? true ? "" : "no-border",
+          step.componentOptions?.fullWidth ? "full-width" : "",
+          step.componentOptions?.background ?? true ? "" : "no-background",
+        ].join(" ")}>
+          {step.component &&
+            <step.component setStepSuccess={setSuccess}
+              bot={props.bot}
+              dispatch={props.dispatch}
+              navigate={props.navigate}
+              getConfigValue={props.getConfigValue}
+              resources={props.resources} />}
+          {step.controlsCheckOptions &&
+            <ControlsCheck
+              dispatch={props.dispatch}
+              controlsCheckOptions={step.controlsCheckOptions} />}
+          {step.pinBindingOptions &&
+            <PinBinding
+              getConfigValue={props.getConfigValue}
+              dispatch={props.dispatch}
+              pinBindingOptions={step.pinBindingOptions}
+              bot={props.bot}
+              resources={props.resources} />}
+        </div>
+        <div className={"wizard-step-q-and-a"}>
+          <Markdown className={"wizard-step-question"}>{t(step.question)}</Markdown>
+          {!requirementsMet &&
+            <p className={"prereq-not-met"}>
+              {t("Fix issues above to continue.")}
+            </p>}
+          <div className={"wizard-answer row"}>
+            <button className={"fb-button gray"}
+              disabled={!requirementsMet}
+              onClick={setSuccess(false)}>
+              {t("no")}
+            </button>
+            <button className={"fb-button green"}
+              disabled={!requirementsMet}
+              onClick={setSuccess(true)}>
+              {t("yes")}
+            </button>
+          </div>
+        </div>
+        {stepResult?.answer == false &&
+          <TroubleshootingTips
+            selectedOutcome={stepResult.outcome}
+            step={step}
+            openStep={props.openStep}
             bot={props.bot}
+            resources={props.resources}
             dispatch={props.dispatch}
             getConfigValue={props.getConfigValue}
-            resources={props.resources} />}
-        {step.controlsCheckOptions &&
-          <ControlsCheck
-            dispatch={props.dispatch}
-            controlsCheckOptions={step.controlsCheckOptions} />}
-        {step.pinBindingOptions &&
-          <PinBinding
-            getConfigValue={props.getConfigValue}
-            dispatch={props.dispatch}
-            pinBindingOptions={step.pinBindingOptions}
-            bot={props.bot}
-            resources={props.resources} />}
-      </div>
-      <Markdown className={"wizard-step-question"}>{t(step.question)}</Markdown>
-      {!requirementsMet &&
-        <p className={"prereq-not-met"}>
-          {t("Fix issues above to continue.")}
-        </p>}
-      <div className={"wizard-answer"}>
-        <button className={"fb-button gray"}
-          disabled={!requirementsMet}
-          onClick={setSuccess(false)}>
-          {t("no")}
-        </button>
-        <button className={"fb-button green"}
-          disabled={!requirementsMet}
-          onClick={setSuccess(true)}>
-          {t("yes")}
-        </button>
+            setSuccess={setSuccess} />}
       </div>
-      {stepResult?.answer == false &&
-        <TroubleshootingTips
-          selectedOutcome={stepResult.outcome}
-          step={step}
-          openStep={props.openStep}
-          bot={props.bot}
-          resources={props.resources}
-          dispatch={props.dispatch}
-          getConfigValue={props.getConfigValue}
-          setSuccess={setSuccess} />}
     </Collapse>
   </div>;
 };
 
 const TroubleshootingTips = (props: TroubleshootingTipsProps) => {
   const otherSelected = props.selectedOutcome == "other";
-  return <div className={"troubleshooting"}>
+  return <div className={"troubleshooting grid"}>
     {props.step.outcomes.map(
       // eslint-disable-next-line complexity
       outcome => {
@@ -144,7 +149,7 @@ const TroubleshootingTips = (props: TroubleshootingTipsProps) => {
         if (hidden) { return <div key={outcome.slug} />; }
         return <div key={outcome.slug}
           className={
-            `troubleshooting-tip ${selected ? "selected" : ""}`}
+            `troubleshooting-tip grid ${selected ? "selected" : ""}`}
           onClick={props.setSuccess(false, outcome.slug)}>
           <p>{t(outcome.description)}</p>
           {selected &&
@@ -183,7 +188,7 @@ const TroubleshootingTips = (props: TroubleshootingTipsProps) => {
               resources={props.resources} />}
         </div>;
       })}
-    <div className={`troubleshooting-tip ${otherSelected ? "selected" : ""}`}
+    <div className={`troubleshooting-tip grid half-gap ${otherSelected ? "selected" : ""}`}
       onClick={props.setSuccess(false, "other")}>
       <p>{t("Something else happened and I need additional help")}</p>
       {otherSelected && <p>
diff --git a/frontend/wizard/step_components.tsx b/frontend/wizard/step_components.tsx
index 673d47a1f7..c38fab1032 100644
--- a/frontend/wizard/step_components.tsx
+++ b/frontend/wizard/step_components.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18next_wrapper";
-import { Row, Col } from "../ui";
+import { Row } from "../ui";
 import { FirmwareNumberSettingsProps } from "./interfaces";
 import { sourceFwConfigValue } from "../settings/source_config_value";
 import { validFwConfig } from "../util";
@@ -24,25 +24,21 @@ export const FirmwareNumberSettings = (props: FirmwareNumberSettingsProps) => {
     props.bot.hardware.mcu_params);
   return <div className={"motor-settings"}>
     {props.firmwareNumberSettings?.map(setting =>
-      <Row key={setting.key}>
-        <Col xs={6}>
-          <label>{t(setting.label)}</label>
-        </Col>
-        <Col xs={6}>
-          <McuInputBox
-            dispatch={props.dispatch}
-            sourceFwConfig={sourceFwConfig}
-            firmwareHardware={getFwHardwareValue(getFbosConfig(
-              props.resources))}
-            scale={setting.scale
-              ? calculateScale(sourceFwConfig)[setting.scale]
-              : undefined}
-            intSize={setting.intSize}
-            inputMax={setting.inputMax}
-            toInput={setting.toInput}
-            fromInput={setting.fromInput}
-            setting={setting.key} />
-        </Col>
+      <Row key={setting.key} className="grid-2-col">
+        <label>{t(setting.label)}</label>
+        <McuInputBox
+          dispatch={props.dispatch}
+          sourceFwConfig={sourceFwConfig}
+          firmwareHardware={getFwHardwareValue(getFbosConfig(
+            props.resources))}
+          scale={setting.scale
+            ? calculateScale(sourceFwConfig)[setting.scale]
+            : undefined}
+          intSize={setting.intSize}
+          inputMax={setting.inputMax}
+          toInput={setting.toInput}
+          fromInput={setting.fromInput}
+          setting={setting.key} />
       </Row>)}
   </div>;
 };
diff --git a/frontend/zones/__tests__/add_zone_test.tsx b/frontend/zones/__tests__/add_zone_test.tsx
index cf23f9d041..dd55dc1422 100644
--- a/frontend/zones/__tests__/add_zone_test.tsx
+++ b/frontend/zones/__tests__/add_zone_test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mount } from "enzyme";
 import {
   RawAddZone as AddZone, AddZoneProps, mapStateToProps,
diff --git a/frontend/zones/__tests__/edit_zone_test.tsx b/frontend/zones/__tests__/edit_zone_test.tsx
index c75a3ec130..385a8bb48d 100644
--- a/frontend/zones/__tests__/edit_zone_test.tsx
+++ b/frontend/zones/__tests__/edit_zone_test.tsx
@@ -1,10 +1,3 @@
-import { Path } from "../../internal_urls";
-let mockPath = Path.mock(Path.zones(1));
-jest.mock("../../history", () => ({
-  getPathArray: jest.fn(() => mockPath.split("/")),
-  push: jest.fn(),
-}));
-
 jest.mock("../../api/crud", () => ({
   edit: jest.fn(),
   save: jest.fn(),
@@ -21,7 +14,7 @@ import {
   buildResourceIndex,
 } from "../../__test_support__/resource_index_builder";
 import { save, edit } from "../../api/crud";
-import { push } from "../../history";
+import { Path } from "../../internal_urls";
 
 describe("<EditZone />", () => {
   const fakeProps = (): EditZoneProps => ({
@@ -35,21 +28,21 @@ describe("<EditZone />", () => {
   });
 
   it("redirects", () => {
-    mockPath = Path.mock(Path.zones("nope"));
+    location.pathname = Path.mock(Path.zones("nope"));
     const wrapper = mount(<EditZone {...fakeProps()} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).toHaveBeenCalledWith(Path.zones());
+    expect(mockNavigate).toHaveBeenCalledWith(Path.zones());
   });
 
   it("doesn't redirect", () => {
-    mockPath = Path.mock(Path.logs());
+    location.pathname = Path.mock(Path.logs());
     const wrapper = mount(<EditZone {...fakeProps()} />);
     expect(wrapper.text()).toContain("Redirecting...");
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it("renders", () => {
-    mockPath = Path.mock(Path.zones(1));
+    location.pathname = Path.mock(Path.zones(1));
     const p = fakeProps();
     p.findZone = () => fakePointGroup();
     const wrapper = mount(<EditZone {...p} />);
@@ -57,7 +50,7 @@ describe("<EditZone />", () => {
   });
 
   it("changes name", () => {
-    mockPath = Path.mock(Path.zones(1));
+    location.pathname = Path.mock(Path.zones(1));
     const p = fakeProps();
     const group = fakePointGroup();
     p.findZone = () => group;
diff --git a/frontend/zones/__tests__/zones_inventory_test.tsx b/frontend/zones/__tests__/zones_inventory_test.tsx
index 0f96c15da8..9bb87318b0 100644
--- a/frontend/zones/__tests__/zones_inventory_test.tsx
+++ b/frontend/zones/__tests__/zones_inventory_test.tsx
@@ -1,14 +1,12 @@
 jest.mock("../../api/crud", () => ({ initSaveGetId: jest.fn() }));
 
-import React from "react";
-import { act } from "react-dom/test-utils";
+import React, { act } from "react";
 import { mount, shallow } from "enzyme";
 import {
   RawZones as Zones, ZonesProps, mapStateToProps,
 } from "../zones_inventory";
 import { fakeState } from "../../__test_support__/fake_state";
 import { fakePointGroup } from "../../__test_support__/fake_state/resources";
-import { push } from "../../history";
 import { initSaveGetId } from "../../api/crud";
 import { DesignerPanelTop } from "../../farm_designer/designer_panel";
 import { SearchField } from "../../ui/search_field";
@@ -32,7 +30,7 @@ describe("<Zones> />", () => {
     p.zones[0].body.id = 1;
     const wrapper = mount(<Zones {...p} />);
     wrapper.find(".group-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.zones(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.zones(1));
   });
 
   it("navigates to unsaved zone", () => {
@@ -41,7 +39,7 @@ describe("<Zones> />", () => {
     p.zones[0].body.id = 0;
     const wrapper = mount(<Zones {...p} />);
     wrapper.find(".group-search-item").first().simulate("click");
-    expect(push).toHaveBeenCalledWith(Path.zones(0));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.zones(0));
   });
 
   it("filters points", () => {
@@ -62,7 +60,7 @@ describe("<Zones> />", () => {
     expect(initSaveGetId).toHaveBeenCalledWith("PointGroup", {
       name: "Untitled Zone", point_ids: []
     });
-    expect(push).toHaveBeenCalledWith(Path.zones(1));
+    expect(mockNavigate).toHaveBeenCalledWith(Path.zones(1));
   });
 
   it("handles zone creation error", async () => {
@@ -73,7 +71,7 @@ describe("<Zones> />", () => {
     expect(initSaveGetId).toHaveBeenCalledWith("PointGroup", {
       name: "Untitled Zone", point_ids: []
     });
-    expect(push).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 });
 
diff --git a/frontend/zones/add_zone.tsx b/frontend/zones/add_zone.tsx
index 07391fd51d..6fcd3d9c90 100644
--- a/frontend/zones/add_zone.tsx
+++ b/frontend/zones/add_zone.tsx
@@ -31,3 +31,5 @@ export class RawAddZone extends React.Component<AddZoneProps, {}> {
 }
 
 export const AddZone = connect(mapStateToProps)(RawAddZone);
+// eslint-disable-next-line import/no-default-export
+export default AddZone;
diff --git a/frontend/zones/edit_zone.tsx b/frontend/zones/edit_zone.tsx
index f3f15007d4..2b1182ff32 100644
--- a/frontend/zones/edit_zone.tsx
+++ b/frontend/zones/edit_zone.tsx
@@ -4,7 +4,7 @@ import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { t } from "../i18next_wrapper";
-import { push } from "../history";
+import { useNavigate } from "react-router";
 import { Everything } from "../interfaces";
 import { Panel } from "../farm_designer/panel_header";
 import { selectAllPointGroups } from "../resources/selectors";
@@ -28,45 +28,45 @@ export const mapStateToProps = (props: Everything): EditZoneProps => ({
   botSize: botSize(props),
 });
 
-export class RawEditZone extends React.Component<EditZoneProps, {}> {
-  get stringyID() { return Path.getSlug(Path.zones()); }
-  get zone() {
-    if (this.stringyID) {
-      return this.props.findZone(parseInt(this.stringyID));
+export const RawEditZone = (props: EditZoneProps) => {
+  const getZone = () => {
+    const stringyID = Path.getSlug(Path.zones());
+    if (stringyID) {
+      return props.findZone(parseInt(stringyID));
     }
-  }
-
-  render() {
-    const { zone } = this;
-    const zonesPath = Path.zones();
-    !zone && Path.startsWith(zonesPath) && push(zonesPath);
-    return <DesignerPanel panelName={"zone-info"} panel={Panel.Zones}>
-      <DesignerPanelHeader
-        panelName={"zone-info"}
-        panel={Panel.Zones}
-        title={`${t("Edit")} zone`}
-        backTo={zonesPath} />
-      <DesignerPanelContent panelName={"zone-info"}>
-        {zone
-          ? <div className={"zone-info-panel-content-wrapper"}>
-            <label>{t("zone name")}</label>
-            <input name="zoneName"
-              defaultValue={zone.body.name}
-              onBlur={e => {
-                this.props.dispatch(edit(zone, { name: e.currentTarget.value }));
-                this.props.dispatch(save(zone.uuid));
-              }} />
-            <LocationSelection
-              group={zone}
-              criteria={zone.body.criteria}
-              dispatch={this.props.dispatch}
-              botSize={this.props.botSize}
-              editGroupAreaInMap={true} />
-          </div>
-          : <span>{t("Redirecting")}...</span>}
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+  };
+  const zone = getZone();
+  const navigate = useNavigate();
+  const zonesPath = Path.zones();
+  !zone && Path.startsWith(zonesPath) && navigate(zonesPath);
+  return <DesignerPanel panelName={"zone-info"} panel={Panel.Zones}>
+    <DesignerPanelHeader
+      panelName={"zone-info"}
+      panel={Panel.Zones}
+      title={`${t("Edit")} zone`}
+      backTo={zonesPath} />
+    <DesignerPanelContent panelName={"zone-info"}>
+      {zone
+        ? <div className={"zone-info-panel-content-wrapper"}>
+          <label>{t("zone name")}</label>
+          <input name="zoneName"
+            defaultValue={zone.body.name}
+            onBlur={e => {
+              props.dispatch(edit(zone, { name: e.currentTarget.value }));
+              props.dispatch(save(zone.uuid));
+            }} />
+          <LocationSelection
+            group={zone}
+            criteria={zone.body.criteria}
+            dispatch={props.dispatch}
+            botSize={props.botSize}
+            editGroupAreaInMap={true} />
+        </div>
+        : <span>{t("Redirecting")}...</span>}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const EditZone = connect(mapStateToProps)(RawEditZone);
+// eslint-disable-next-line import/no-default-export
+export default EditZone;
diff --git a/frontend/zones/zones_inventory.tsx b/frontend/zones/zones_inventory.tsx
index 04adc8a169..e87adb3b64 100644
--- a/frontend/zones/zones_inventory.tsx
+++ b/frontend/zones/zones_inventory.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Everything } from "../interfaces";
-import { DesignerNavTabs, Panel } from "../farm_designer/panel_header";
+import { Panel } from "../farm_designer/panel_header";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui/empty_state_wrapper";
@@ -15,10 +15,10 @@ import {
   selectAllPointGroups, selectAllActivePoints,
 } from "../resources/selectors";
 import { GroupInventoryItem } from "../point_groups/group_inventory_item";
-import { push } from "../history";
 import { initSaveGetId } from "../api/crud";
 import { SearchField } from "../ui/search_field";
 import { Path } from "../internal_urls";
+import { useNavigate } from "react-router";
 
 export interface ZonesProps {
   dispatch: Function;
@@ -33,16 +33,16 @@ export const mapStateToProps = (props: Everything): ZonesProps => ({
 });
 
 export const RawZones = (props: ZonesProps) => {
-  const navigate = (id: number) => push(Path.zones(id));
+  const navigate = useNavigate();
+  const navigateById = (id: number) => { navigate(Path.zones(id)); };
   const [searchTerm, setSearchTerm] = React.useState("");
   return <DesignerPanel panelName={"zones-inventory"} panel={Panel.Zones}>
-    <DesignerNavTabs />
     <DesignerPanelTop
       panel={Panel.Zones}
       onClick={() => props.dispatch(initSaveGetId("PointGroup", {
         name: t("Untitled Zone"), point_ids: []
       }))
-        .then((id: number) => navigate(id)).catch(() => { })}
+        .then((id: number) => navigateById(id)).catch(() => { })}
       title={t("Add zone")}>
       <SearchField nameKey={"zones"}
         searchTerm={searchTerm}
@@ -65,7 +65,7 @@ export const RawZones = (props: ZonesProps) => {
             allPoints={props.allPoints}
             hovered={false}
             dispatch={props.dispatch}
-            onClick={() => navigate(group.body.id || 0)}
+            onClick={() => navigateById(group.body.id || 0)}
           />)}
       </EmptyStateWrapper>
     </DesignerPanelContent>
@@ -73,3 +73,5 @@ export const RawZones = (props: ZonesProps) => {
 };
 
 export const Zones = connect(mapStateToProps)(RawZones);
+// eslint-disable-next-line import/no-default-export
+export default Zones;
diff --git a/jest.config.js b/jest.config.js
index 1a490d559d..f1d30c55e4 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -49,6 +49,6 @@ module.exports = {
   ],
   coverageDirectory: "<rootDir>/coverage_fe",
   setupFilesAfterEnv: [
-    "<rootDir>/frontend/__test_support__/customMatchers.js"
+    "<rootDir>/frontend/__test_support__/setup_tests.js"
   ]
 }
diff --git a/lib/tasks/api.rake b/lib/tasks/api.rake
index bd60f04e18..68593587fe 100644
--- a/lib/tasks/api.rake
+++ b/lib/tasks/api.rake
@@ -76,6 +76,15 @@ namespace :api do
     ].join(" ") unless ENV["NO_CLEAN"]
   end
 
+  def clean_build_files
+    # clear out build files, keeping public assets
+    sh [
+      "rm -rf",
+      ".parcel-cache",
+      "node_modules",
+    ].join(" ")
+  end
+
   def add_monaco
     src = "node_modules/monaco-editor/min/vs"
     dst = "public/assets/monaco"
@@ -100,6 +109,11 @@ namespace :api do
     parcel "build"
   end
 
+  desc "Don't call this directly. Use `rake assets:clean`."
+  task parcel_clean: :environment do
+    clean_build_files
+  end
+
   desc "Clean out old demo accounts"
   task clean_demo_accounts: :environment do
     users = User
@@ -176,3 +190,4 @@ namespace :api do
   end
 end
 Rake::Task["assets:precompile"].enhance ["api:parcel_compile"]
+Rake::Task["assets:clean"].enhance ["api:parcel_clean"]
diff --git a/lib/tasks/coverage.rake b/lib/tasks/coverage.rake
index 6185573a05..8ceaf5b59e 100644
--- a/lib/tasks/coverage.rake
+++ b/lib/tasks/coverage.rake
@@ -1,3 +1,5 @@
+require "find"
+
 COVERAGE_FILE_PATH = "./coverage_fe/index.html"
 JSON_COVERAGE_FILE_PATH = "./coverage_fe/coverage-final.json"
 THRESHOLD = 0.001
@@ -182,6 +184,51 @@ def to_percent(pair)
   return ((pair.head / pair.tail) * 100).round(4)
 end
 
+def print_lib_progress
+  counts = {
+    "file" => { "enzyme" => 0, "rtl" => 0, "both" => 0 },
+    "line" => { "enzyme" => 0, "rtl" => 0, "both" => 0 },
+  }
+  Find.find("frontend") do |path|
+    next unless File.file?(path)
+    includesEnzyme = false
+    includesRTL = false
+    File.foreach(path) do |line|
+      if line.include?("mount(") || line.include?("shallow(") || line.include?("svgMount(")
+        counts["line"]["enzyme"] += 1
+        includesEnzyme = true
+      end
+      if line.include?("render(<")
+        counts["line"]["rtl"] += 1
+        includesRTL = true
+      end
+    end
+    if includesEnzyme && includesRTL
+      counts["file"]["both"] += 1
+    elsif includesEnzyme
+      counts["file"]["enzyme"] += 1
+    elsif includesRTL
+      counts["file"]["rtl"] += 1
+    end
+  end
+  puts
+  puts "enzyme -> RTL progress:"
+  counts.each do |text, counts|
+    total = counts["enzyme"] + counts["rtl"] + counts["both"]
+    rtl_both_count = counts["rtl"] + counts["both"]
+    rtl_both_percent = (rtl_both_count / total.to_f * 100).round(2)
+    rtl_percent = (counts["rtl"] / total.to_f * 100).round(2)
+    both_percent = (counts["both"] / total.to_f * 100).round(2)
+    puts "#{text}s: #{rtl_both_count} / #{total} (#{rtl_both_percent}%)"
+    length = 50
+    rtl = (rtl_percent * (length.to_f / 100)).ceil
+    both = (both_percent * (length.to_f / 100)).ceil
+    remain = length - rtl - both
+    puts "█" * rtl + "▓" * both + "░" * remain
+  end
+  puts
+end
+
 namespace :coverage do
   desc "Verify code test coverage changes remain within acceptable thresholds." \
        "Compares current test coverage percentage from Jest output to previous" \
@@ -313,6 +360,8 @@ namespace :coverage do
 
     print_summary_text(build_percent, remote, pull_request_data)
 
+    print_lib_progress
+
     exit (pass || exit_0?) ? 0 : 1
   end
 end
diff --git a/lib/tasks/fe.rake b/lib/tasks/fe.rake
index 1ce0782007..2db54d36e6 100644
--- a/lib/tasks/fe.rake
+++ b/lib/tasks/fe.rake
@@ -27,6 +27,11 @@ EXCLUDE = [
     reason: "breaking changes in",
     version: "8",
   },
+  {
+    packages: ["react", "react-dom", "react-test-renderer"],
+    reason: "not compatible with enzyme",
+    version: "3",
+  },
 ]
 
 # Load package.json as JSON.
diff --git a/lib/tasks/hook.rake b/lib/tasks/hook.rake
index 49e27c2240..e8b32d70a9 100644
--- a/lib/tasks/hook.rake
+++ b/lib/tasks/hook.rake
@@ -42,7 +42,7 @@ def commits_since_last_deploy
   commits
 end
 
-def details
+def details(environment)
   output = "\n\n"
   if !DESCRIPTION.nil?
     output += "#{DESCRIPTION}\n\n"
@@ -52,6 +52,13 @@ def details
   messages = commits_since_last_deploy.reverse.map do |commit|
     output += "\n + #{commit}"
   end
+  output += "\n"
+  pre = environment == "production" ? "my" : environment
+  base = "#{pre}.farm.bot"
+  ["promo", "", "demo", "try_farmbot", "os"].map do |path|
+    url = "#{base}/#{path}"
+    output += "\n<https://#{url}|#{url}>"
+  end
   output
 end
 
@@ -61,7 +68,7 @@ namespace :hook do
     if WEBHOOK_URL
       environment = ENVIRONMENT.include?("staging") ? "staging" : "production"
       notification_text = "A new release has been deployed to #{environment}."
-      info = notification_text + details
+      info = notification_text + details(environment)
       payload = {
         "mrkdwn": true,
         "text": notification_text,
diff --git a/package.json b/package.json
index 596b537b32..9cfd0ae87a 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "Farmbot web frontend.",
   "engines": {
     "browsers": "defaults",
-    "node": "20.x",
+    "node": "22.x",
     "npm": "10.x",
     "parcel": "2.x"
   },
@@ -20,7 +20,7 @@
     "dev-typecheck": "./node_modules/typescript/bin/tsc --project tsconfig.dev.json --noEmit",
     "eslint": "./node_modules/.bin/eslint frontend public/app-resources/languages --ext .ts,.tsx",
     "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -c .sass-lint.yml -v -q",
-    "sass-check": "./node_modules/sass/sass.js --no-source-map frontend/css/_index.scss:sass_index.log frontend/css/laptop_splash.scss:sass_splash.log",
+    "sass-check": "./node_modules/sass/sass.js --no-source-map frontend/css/_index.scss:sass_index.log",
     "translation-check": " ./node_modules/jshint/bin/jshint --config public/app-resources/languages/.config public/app-resources/languages/*.json",
     "linters": "npm run typecheck --cache=/tmp;X=$(($X+$?));npm run dev-typecheck --cache=/tmp;X=$(($X+$?));npm run eslint --cache=/tmp;X=$(($X+$?));npm run sass-lint --cache=/tmp;X=$(($X+$?));npm run sass-check --cache=/tmp;X=$(($X+$?));npm run translation-check --cache=/tmp;X=$(($X+$?));[ $X = 0 ]"
   },
@@ -31,41 +31,43 @@
   "license": "MIT",
   "overrides": {
     "cheerio": "1.0.0-rc.12",
+    "get-intrinsic": "1.2.4",
     "@parcel/watcher": "2.1.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "5.13.0",
-    "@blueprintjs/select": "5.2.4",
+    "@blueprintjs/core": "5.16.0",
+    "@blueprintjs/select": "5.3.5",
     "@monaco-editor/react": "4.6.0",
-    "@parcel/transformer-sass": "2.12.0",
-    "@parcel/transformer-typescript-tsc": "2.12.0",
-    "@react-spring/three": "9.7.4",
-    "@react-three/drei": "9.114.0",
-    "@react-three/fiber": "8.17.8",
+    "@parcel/transformer-sass": "2.13.2",
+    "@parcel/transformer-typescript-tsc": "2.13.2",
+    "@react-spring/three": "9.7.5",
+    "@react-three/drei": "9.120.0",
+    "@react-three/fiber": "8.17.10",
     "@rollbar/react": "0.12.0-beta",
-    "@types/lodash": "4.17.9",
+    "@types/lodash": "4.17.13",
     "@types/markdown-it": "14.1.2",
-    "@types/node": "22.7.3",
+    "@types/node": "22.10.1",
     "@types/promise-timeout": "1.3.3",
-    "@types/react": "18.3.9",
+    "@types/react": "19.0.0",
     "@types/react-color": "3.0.12",
-    "@types/react-dom": "18.3.0",
-    "@types/three": "0.169.0",
-    "@types/ws": "8.5.12",
-    "axios": "1.7.7",
+    "@types/react-dom": "19.0.0",
+    "@types/three": "0.170.0",
+    "@types/ws": "8.5.13",
+    "@xterm/xterm": "5.5.0",
+    "axios": "1.7.9",
     "bowser": "2.11.0",
     "browser-speech": "1.1.1",
     "events": "3.3.0",
     "farmbot": "15.8.8",
-    "i18next": "23.15.1",
+    "i18next": "24.0.5",
     "lodash": "4.17.21",
     "markdown-it": "14.1.0",
     "markdown-it-emoji": "3.0.0",
     "moment": "2.30.1",
     "monaco-editor": "0.52.0",
-    "mqtt": "5.10.1",
-    "npm": "10.8.3",
-    "parcel": "2.12.0",
+    "mqtt": "5.10.3",
+    "npm": "10.9.2",
+    "parcel": "2.13.2",
     "process": "0.11.10",
     "promise-timeout": "1.3.0",
     "punycode": "1.4.1",
@@ -74,33 +76,37 @@
     "react-color": "2.19.3",
     "react-dom": "18.3.1",
     "react-redux": "9.1.2",
+    "react-router": "7.0.2",
     "redux": "5.0.1",
     "redux-immutable-state-invariant": "2.1.0",
     "redux-thunk": "3.1.0",
     "rollbar": "2.26.4",
     "takeme": "0.12.0",
-    "three": "0.169.0",
-    "typescript": "5.6.2",
-    "url": "0.11.4",
-    "@xterm/xterm": "5.5.0"
+    "three": "0.171.0",
+    "typescript": "5.7.2",
+    "url": "0.11.4"
   },
   "devDependencies": {
     "@react-three/eslint-plugin": "0.1.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/enzyme": "3.10.12",
-    "@types/jest": "29.5.13",
-    "@types/readable-stream": "4.0.15",
+    "@types/jest": "29.5.14",
+    "@types/readable-stream": "4.0.18",
     "@typescript-eslint/eslint-plugin": "7.15.0",
     "@typescript-eslint/parser": "7.15.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "enzyme": "3.11.0",
     "eslint": "8.57.0",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-jest": "28.8.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-no-null": "1.0.2",
-    "eslint-plugin-promise": "7.1.0",
-    "eslint-plugin-react": "7.36.1",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.1.0",
     "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
     "jest-cli": "29.7.0",
@@ -112,7 +118,7 @@
     "raf": "3.4.1",
     "react-addons-test-utils": "15.6.2",
     "react-test-renderer": "18.3.1",
-    "sass": "1.79.3",
+    "sass": "1.82.0",
     "sass-lint": "1.13.1",
     "ts-jest": "29.2.5",
     "tslint": "5.20.1"
diff --git a/public/3D/fonts/Cabin_Bold.json b/public/3D/fonts/Cabin_Bold.json
new file mode 100644
index 0000000000..9b06898561
--- /dev/null
+++ b/public/3D/fonts/Cabin_Bold.json
@@ -0,0 +1,4052 @@
+{
+    "glyphs": {
+        "0": {
+            "ha": 981,
+            "x_min": 81,
+            "x_max": 900,
+            "o": "m 490 -19 q 275 45 367 -19 q 132 225 183 109 q 81 494 81 340 q 132 754 81 642 q 275 929 183 866 q 490 992 367 992 q 706 928 614 992 q 849 753 798 865 q 900 494 900 641 q 849 225 900 340 q 706 45 798 109 q 490 -19 614 -19 m 490 140 q 609 176 556 140 q 692 291 661 213 q 722 494 722 369 q 656 751 722 667 q 490 835 590 835 q 325 752 392 835 q 258 494 258 669 q 289 292 258 370 q 372 177 319 214 q 490 140 424 140 z "
+        },
+        "1": {
+            "ha": 513,
+            "x_min": 63,
+            "x_max": 378,
+            "o": "m 200 0 l 200 721 q 143 690 173 703 q 78 671 113 677 l 63 821 q 129 851 92 827 q 197 907 166 874 q 242 972 228 939 l 378 972 l 378 0 l 200 0 z "
+        },
+        "2": {
+            "ha": 735,
+            "x_min": 61,
+            "x_max": 664,
+            "o": "m 61 0 l 317 393 q 398 524 367 471 q 443 618 429 578 q 457 697 457 658 q 423 791 457 757 q 329 825 390 825 q 198 789 256 825 q 94 707 140 753 l 72 886 q 205 964 135 936 q 365 992 276 992 q 512 956 453 992 q 600 860 571 919 q 629 729 629 800 q 614 619 629 674 q 564 497 599 564 q 469 340 528 430 l 356 167 l 664 167 l 664 0 l 61 0 z "
+        },
+        "3": {
+            "ha": 749,
+            "x_min": 47,
+            "x_max": 667,
+            "o": "m 321 -19 q 162 1 233 -19 q 47 43 90 22 l 90 193 q 196 152 136 170 q 321 133 256 133 q 443 168 397 133 q 489 276 489 203 q 444 386 489 349 q 310 424 399 424 l 211 424 l 211 590 l 308 590 q 423 625 383 590 q 463 721 463 660 q 426 807 463 774 q 321 839 390 839 q 209 821 262 839 q 106 774 157 803 l 79 931 q 193 974 127 956 q 339 992 260 992 q 499 959 434 992 q 598 871 565 927 q 632 743 632 815 q 582 584 632 649 q 440 496 532 519 l 439 528 q 603 447 540 511 q 667 276 667 382 q 623 115 667 181 q 502 15 580 49 q 321 -19 424 -19 z "
+        },
+        "4": {
+            "ha": 863,
+            "x_min": 10,
+            "x_max": 790,
+            "o": "m 494 0 l 494 222 l 10 222 l 544 972 l 665 972 l 665 367 l 790 367 l 790 222 l 665 222 l 665 0 l 494 0 m 243 308 l 210 367 l 494 367 l 494 781 l 540 731 l 243 308 z "
+        },
+        "5": {
+            "ha": 746,
+            "x_min": 68,
+            "x_max": 676,
+            "o": "m 335 -18 q 188 3 255 -18 q 68 60 122 24 l 110 221 q 214 169 161 189 q 332 149 267 149 q 458 190 411 149 q 504 303 504 232 q 451 422 504 379 q 299 465 399 465 q 207 460 253 465 q 117 446 162 454 l 179 972 l 638 972 l 626 800 l 313 800 l 279 531 l 213 592 q 282 606 246 601 q 361 611 319 611 q 525 575 454 611 q 636 469 597 538 q 676 303 676 400 q 632 131 676 203 q 511 20 588 59 q 335 -18 434 -18 z "
+        },
+        "6": {
+            "ha": 781,
+            "x_min": 67,
+            "x_max": 722,
+            "o": "m 403 -19 q 226 26 301 -19 q 108 152 150 71 q 67 343 67 234 q 108 562 67 460 q 215 748 149 664 q 360 893 282 831 q 511 992 438 955 l 635 894 q 546 843 598 876 q 440 764 494 810 q 337 660 385 717 q 260 534 290 602 q 231 390 231 467 l 181 451 q 278 548 217 511 q 438 585 340 585 q 583 547 519 585 q 685 444 648 510 q 722 292 722 378 q 683 129 722 199 q 573 20 644 59 q 403 -19 501 -19 m 406 128 q 517 174 472 128 q 561 285 561 219 q 517 394 561 351 q 406 438 472 438 q 294 394 338 438 q 250 285 250 351 q 294 174 250 219 q 406 128 338 128 z "
+        },
+        "7": {
+            "ha": 708,
+            "x_min": 60,
+            "x_max": 699,
+            "o": "m 107 0 l 443 806 l 60 806 l 60 972 l 699 972 l 293 0 l 107 0 z "
+        },
+        "8": {
+            "ha": 839,
+            "x_min": 78,
+            "x_max": 761,
+            "o": "m 419 -19 q 237 18 314 -19 q 119 124 160 56 q 78 279 78 191 q 121 433 78 367 q 241 536 164 499 q 419 574 317 574 q 599 536 522 574 q 718 433 676 499 q 761 279 761 367 q 719 124 761 191 q 601 18 678 56 q 419 -19 524 -19 m 420 133 q 551 176 504 133 q 597 290 597 219 q 551 401 597 357 q 419 444 504 444 q 289 401 335 444 q 242 290 242 357 q 289 176 242 219 q 420 133 335 133 m 419 472 q 269 505 337 472 q 162 595 202 538 q 122 729 122 653 q 152 853 122 793 q 248 953 183 914 q 419 992 314 992 q 589 953 525 992 q 682 853 653 914 q 711 729 711 793 q 675 595 711 653 q 574 505 640 538 q 419 472 508 472 m 419 601 q 522 639 488 601 q 556 728 556 676 q 522 818 556 783 q 419 853 488 853 q 315 818 352 853 q 278 728 278 783 q 315 639 278 676 q 419 601 352 601 z "
+        },
+        "9": {
+            "ha": 781,
+            "x_min": 67,
+            "x_max": 722,
+            "o": "m 292 0 l 168 97 q 254 147 204 115 q 357 223 304 178 q 456 322 410 267 q 530 443 501 378 q 558 582 558 508 l 608 521 q 511 425 572 462 q 351 388 449 388 q 206 425 270 388 q 104 528 142 463 q 67 681 67 594 q 106 843 67 773 q 216 952 144 913 q 386 992 288 992 q 563 947 488 992 q 681 820 639 901 q 722 629 722 738 q 682 417 722 516 q 578 237 642 318 q 439 96 514 156 q 292 0 363 36 m 383 540 q 493 582 450 540 q 536 688 536 624 q 493 795 536 751 q 383 839 450 839 q 274 795 318 839 q 231 688 231 751 q 274 582 231 624 q 383 540 318 540 z "
+        },
+        "A": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 z "
+        },
+        "Á": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 299 1054 l 299 1150 l 572 1282 l 572 1135 l 299 1054 z "
+        },
+        "Ă": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1063 q 321 1088 369 1063 q 247 1154 273 1113 q 221 1246 221 1196 l 339 1246 q 365 1180 339 1203 q 435 1157 391 1157 q 505 1180 478 1157 q 531 1246 531 1203 l 649 1246 q 623 1154 649 1196 q 549 1088 597 1113 q 435 1063 501 1063 z "
+        },
+        "Ắ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1063 q 321 1088 369 1063 q 247 1154 273 1113 q 221 1246 221 1196 l 339 1246 q 365 1180 339 1203 q 435 1157 391 1157 q 505 1180 478 1157 q 531 1246 531 1203 l 649 1246 q 623 1154 649 1196 q 549 1088 597 1113 q 435 1063 501 1063 m 299 1310 l 299 1406 l 572 1538 l 572 1390 l 299 1310 z "
+        },
+        "Ặ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1093 q 321 1119 369 1093 q 247 1190 273 1146 q 221 1286 221 1233 l 339 1286 q 365 1220 339 1244 q 435 1197 391 1197 q 505 1220 478 1197 q 531 1286 531 1244 l 649 1286 q 623 1190 649 1233 q 549 1119 597 1146 q 435 1093 501 1093 z "
+        },
+        "Ằ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1063 q 321 1088 369 1063 q 247 1154 273 1113 q 221 1246 221 1196 l 339 1246 q 365 1180 339 1203 q 435 1157 391 1157 q 505 1180 478 1157 q 531 1246 531 1203 l 649 1246 q 623 1154 649 1196 q 549 1088 597 1113 q 435 1063 501 1063 m 571 1310 l 297 1390 l 297 1538 l 571 1406 l 571 1310 z "
+        },
+        "Ẳ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1063 q 321 1088 369 1063 q 247 1154 273 1113 q 221 1246 221 1196 l 339 1246 q 365 1180 339 1203 q 435 1157 391 1157 q 505 1180 478 1157 q 531 1246 531 1203 l 649 1246 q 623 1154 649 1196 q 549 1088 597 1113 q 435 1063 501 1063 m 442 1267 l 426 1328 q 465 1345 451 1334 q 478 1375 478 1356 q 464 1405 478 1395 q 426 1414 451 1414 q 384 1407 406 1414 q 342 1388 363 1399 l 318 1472 q 371 1492 343 1485 q 429 1499 399 1499 q 527 1469 487 1499 q 567 1383 567 1440 q 536 1307 567 1335 q 442 1267 506 1279 z "
+        },
+        "Ẵ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1063 q 321 1088 369 1063 q 247 1154 273 1113 q 221 1246 221 1196 l 339 1246 q 365 1180 339 1203 q 435 1157 391 1157 q 505 1180 478 1157 q 531 1246 531 1203 l 649 1246 q 623 1154 649 1196 q 549 1088 597 1113 q 435 1063 501 1063 m 556 1314 q 489 1328 524 1314 q 420 1358 453 1343 q 361 1372 388 1372 q 315 1324 315 1372 l 210 1324 q 235 1432 210 1394 q 314 1469 261 1469 q 381 1455 346 1469 q 449 1426 416 1440 q 508 1411 482 1411 q 554 1460 554 1411 l 660 1460 q 634 1352 660 1390 q 556 1314 609 1314 z "
+        },
+        "Â": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 251 1035 l 251 1138 l 435 1265 l 618 1138 l 618 1035 l 435 1135 l 251 1035 z "
+        },
+        "Ấ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 251 1035 l 251 1138 l 435 1265 l 618 1138 l 618 1035 l 435 1135 l 251 1035 m 540 1244 l 632 1421 l 792 1421 l 650 1244 l 540 1244 z "
+        },
+        "Ậ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 251 1047 l 251 1157 l 435 1313 l 618 1157 l 618 1047 l 435 1163 l 251 1047 z "
+        },
+        "Ầ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 251 1035 l 251 1138 l 435 1265 l 618 1138 l 618 1035 l 435 1135 l 251 1035 m 571 1244 l 457 1421 l 606 1421 l 676 1244 l 571 1244 z "
+        },
+        "Ẩ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 251 1035 l 251 1138 l 435 1265 l 618 1138 l 618 1035 l 435 1135 l 251 1035 m 568 1211 l 553 1272 q 591 1289 578 1278 q 604 1319 604 1300 q 591 1349 604 1340 q 553 1358 577 1358 q 510 1351 532 1358 q 468 1332 489 1344 l 444 1417 q 498 1436 469 1429 q 556 1443 526 1443 q 653 1414 613 1443 q 693 1328 693 1384 q 663 1252 693 1280 q 568 1211 633 1224 z "
+        },
+        "Ẫ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 251 1035 l 251 1138 l 435 1265 l 618 1138 l 618 1035 l 435 1135 l 251 1035 m 556 1315 q 489 1330 524 1315 q 420 1359 453 1344 q 361 1374 388 1374 q 315 1325 315 1374 l 210 1325 q 235 1433 210 1396 q 314 1471 261 1471 q 381 1456 346 1471 q 449 1427 416 1442 q 508 1413 482 1413 q 554 1461 554 1413 l 660 1461 q 634 1353 660 1392 q 556 1315 609 1315 z "
+        },
+        "Ȁ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 589 1094 l 479 1094 l 351 1313 l 511 1313 l 589 1094 m 385 1094 l 275 1094 l 136 1313 l 296 1313 l 385 1094 z "
+        },
+        "Ä": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 228 1088 l 228 1207 l 361 1207 l 361 1088 l 228 1088 m 508 1088 l 508 1207 l 642 1207 l 642 1088 l 508 1088 z "
+        },
+        "Ạ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 z "
+        },
+        "À": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 571 1054 l 297 1135 l 297 1282 l 571 1150 l 571 1054 z "
+        },
+        "Ả": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 428 1056 l 413 1117 q 451 1134 438 1123 q 464 1164 464 1144 q 450 1193 464 1184 q 413 1203 437 1203 q 370 1195 392 1203 q 328 1176 349 1188 l 304 1261 q 357 1281 329 1274 q 415 1288 385 1288 q 513 1258 473 1288 q 553 1172 553 1228 q 523 1096 553 1124 q 428 1056 492 1068 z "
+        },
+        "Ȃ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1267 q 549 1242 501 1267 q 623 1175 597 1217 q 649 1083 649 1133 l 531 1083 q 505 1149 531 1126 q 435 1172 478 1172 q 365 1149 391 1172 q 339 1083 339 1126 l 221 1083 q 247 1175 221 1133 q 321 1242 273 1217 q 435 1267 369 1267 z "
+        },
+        "Ā": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 207 1101 l 207 1207 l 663 1207 l 663 1101 l 207 1101 z "
+        },
+        "Ą": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 885,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 732 0 l 818 0 q 741 -72 770 -36 q 711 -144 711 -107 q 730 -192 711 -176 q 778 -208 748 -208 q 822 -203 802 -208 q 861 -189 842 -198 l 885 -265 q 833 -285 863 -276 q 764 -293 803 -293 q 663 -261 703 -293 q 622 -171 622 -230 q 658 -71 622 -115 q 732 0 694 -27 z "
+        },
+        "Å": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1047 q 327 1087 367 1047 q 288 1182 288 1127 q 327 1278 288 1238 q 435 1318 367 1318 q 543 1278 503 1318 q 582 1182 582 1238 q 543 1087 582 1127 q 435 1047 503 1047 m 435 1119 q 480 1137 462 1119 q 499 1182 499 1154 q 480 1227 499 1209 q 435 1244 462 1244 q 389 1227 408 1244 q 371 1182 371 1209 q 389 1137 371 1154 q 435 1119 408 1119 z "
+        },
+        "Ǻ": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 435 1047 q 327 1087 367 1047 q 288 1182 288 1127 q 327 1278 288 1238 q 435 1318 367 1318 q 543 1278 503 1318 q 582 1182 582 1238 q 543 1087 582 1127 q 435 1047 503 1047 m 435 1119 q 480 1137 462 1119 q 499 1182 499 1154 q 480 1227 499 1209 q 435 1244 462 1244 q 389 1227 408 1244 q 371 1182 371 1209 q 389 1137 371 1154 q 435 1119 408 1119 m 299 1354 l 299 1450 l 572 1582 l 572 1435 l 299 1354 z "
+        },
+        "Ã": {
+            "ha": 868,
+            "x_min": 4,
+            "x_max": 864,
+            "o": "m 638 231 l 231 231 l 231 386 l 638 386 l 638 231 m 411 799 l 457 799 l 176 0 l 4 0 l 350 972 l 518 972 l 864 0 l 692 0 l 411 799 m 556 1079 q 489 1094 524 1079 q 420 1123 453 1108 q 361 1138 388 1138 q 315 1089 315 1138 l 210 1089 q 235 1197 210 1160 q 314 1235 261 1235 q 381 1220 346 1235 q 449 1191 416 1206 q 508 1176 482 1176 q 554 1225 554 1176 l 660 1225 q 634 1117 660 1156 q 556 1079 609 1079 z "
+        },
+        "Æ": {
+            "ha": 1203,
+            "x_min": -15,
+            "x_max": 1157,
+            "o": "m -15 0 l 458 972 l 1144 972 l 1144 800 l 733 800 l 733 593 l 1050 593 l 1050 421 l 733 421 l 733 172 l 1157 172 l 1157 0 l 551 0 l 551 796 l 169 0 l -15 0 m 244 235 l 244 407 l 574 407 l 574 235 l 244 235 z "
+        },
+        "Ǽ": {
+            "ha": 1203,
+            "x_min": -15,
+            "x_max": 1157,
+            "o": "m -15 0 l 458 972 l 1144 972 l 1144 800 l 733 800 l 733 593 l 1050 593 l 1050 421 l 733 421 l 733 172 l 1157 172 l 1157 0 l 551 0 l 551 796 l 169 0 l -15 0 m 244 235 l 244 407 l 574 407 l 574 235 l 244 235 m 665 1054 l 665 1150 l 939 1282 l 939 1135 l 665 1054 z "
+        },
+        "B": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 829,
+            "o": "m 107 0 l 107 972 l 474 972 q 683 912 615 972 q 751 738 751 852 q 713 595 751 652 q 597 511 674 538 l 597 544 q 772 453 714 519 q 829 276 829 386 q 744 73 829 145 q 513 0 660 0 l 107 0 m 285 158 l 486 158 q 602 188 559 158 q 646 296 646 218 q 600 403 646 375 q 486 432 554 432 l 285 432 l 285 158 m 285 590 l 447 590 q 544 617 512 590 q 576 701 576 643 q 544 788 576 762 q 447 814 512 814 l 285 814 l 285 590 z "
+        },
+        "C": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 z "
+        },
+        "Ć": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 382 1054 l 382 1150 l 656 1282 l 656 1135 l 382 1054 z "
+        },
+        "Č": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 z "
+        },
+        "Ç": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 528 -110 l 474 -89 q 507 -79 490 -83 q 542 -75 523 -75 q 637 -107 602 -75 q 672 -196 672 -138 q 627 -298 672 -263 q 515 -332 581 -332 q 450 -324 478 -332 q 401 -306 422 -316 l 428 -224 q 472 -241 450 -234 q 518 -247 493 -247 q 565 -236 547 -247 q 583 -201 583 -224 q 566 -165 583 -177 q 513 -153 548 -153 q 480 -155 496 -153 q 446 -162 465 -157 l 485 0 l 561 0 l 528 -110 z "
+        },
+        "Ḉ": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 528 -110 l 474 -89 q 507 -79 490 -83 q 542 -75 523 -75 q 637 -107 602 -75 q 672 -196 672 -138 q 627 -298 672 -263 q 515 -332 581 -332 q 450 -324 478 -332 q 401 -306 422 -316 l 428 -224 q 472 -241 450 -234 q 518 -247 493 -247 q 565 -236 547 -247 q 583 -201 583 -224 q 566 -165 583 -177 q 513 -153 548 -153 q 480 -155 496 -153 q 446 -162 465 -157 l 485 0 l 561 0 l 528 -110 m 382 1054 l 382 1150 l 656 1282 l 656 1135 l 382 1054 z "
+        },
+        "Ĉ": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 335 1035 l 335 1138 l 518 1265 l 701 1138 l 701 1035 l 518 1135 l 335 1035 z "
+        },
+        "Ċ": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 446 1100 l 446 1235 l 590 1235 l 590 1100 l 446 1100 z "
+        },
+        "D": {
+            "ha": 1000,
+            "x_min": 107,
+            "x_max": 950,
+            "o": "m 107 0 l 107 972 l 471 972 q 718 914 610 972 q 888 748 826 856 q 950 486 950 639 q 888 225 950 333 q 718 58 826 116 q 471 0 610 0 l 107 0 m 285 158 l 471 158 q 628 198 565 158 q 724 311 692 238 q 756 486 756 385 q 724 661 756 588 q 628 774 692 735 q 471 814 565 814 l 285 814 l 285 158 z "
+        },
+        "DŽ": {
+            "ha": 1739,
+            "x_min": 107,
+            "x_max": 1729,
+            "o": "m 107 0 l 107 972 l 471 972 q 718 914 610 972 q 888 748 826 856 q 950 486 950 639 q 888 225 950 333 q 718 58 826 116 q 471 0 610 0 l 107 0 m 285 158 l 471 158 q 628 198 565 158 q 724 311 692 238 q 756 486 756 385 q 724 661 756 588 q 628 774 692 735 q 471 814 565 814 l 285 814 l 285 158 z "
+        },
+        "Ð": {
+            "ha": 1015,
+            "x_min": 32,
+            "x_max": 965,
+            "o": "m 122 0 l 122 429 l 32 429 l 32 560 l 122 560 l 122 972 l 486 972 q 733 914 625 972 q 903 748 842 856 q 965 486 965 639 q 903 225 965 333 q 733 58 842 116 q 486 0 625 0 l 122 0 m 300 171 l 486 171 q 699 256 628 171 q 771 486 771 340 q 699 717 771 632 q 486 801 628 801 l 300 801 l 300 560 l 469 560 l 469 429 l 300 429 l 300 171 z "
+        },
+        "Ď": {
+            "ha": 1000,
+            "x_min": 107,
+            "x_max": 950,
+            "o": "m 107 0 l 107 972 l 471 972 q 718 914 610 972 q 888 748 826 856 q 950 486 950 639 q 888 225 950 333 q 718 58 826 116 q 471 0 610 0 l 107 0 m 285 158 l 471 158 q 628 198 565 158 q 724 311 692 238 q 756 486 756 385 q 724 661 756 588 q 628 774 692 735 q 471 814 565 814 l 285 814 l 285 158 z "
+        },
+        "Đ": {
+            "ha": 1015,
+            "x_min": 32,
+            "x_max": 965,
+            "o": "m 122 0 l 122 429 l 32 429 l 32 560 l 122 560 l 122 972 l 486 972 q 733 914 625 972 q 903 748 842 856 q 965 486 965 639 q 903 225 965 333 q 733 58 842 116 q 486 0 625 0 l 122 0 m 300 171 l 486 171 q 699 256 628 171 q 771 486 771 340 q 699 717 771 632 q 486 801 628 801 l 300 801 l 300 560 l 469 560 l 469 429 l 300 429 l 300 171 z "
+        },
+        "Ḍ": {
+            "ha": 1000,
+            "x_min": 107,
+            "x_max": 950,
+            "o": "m 107 0 l 107 972 l 471 972 q 718 914 610 972 q 888 748 826 856 q 950 486 950 639 q 888 225 950 333 q 718 58 826 116 q 471 0 610 0 l 107 0 m 285 158 l 471 158 q 628 198 565 158 q 724 311 692 238 q 756 486 756 385 q 724 661 756 588 q 628 774 692 735 q 471 814 565 814 l 285 814 l 285 158 z "
+        },
+        "Ḏ": {
+            "ha": 1000,
+            "x_min": 107,
+            "x_max": 950,
+            "o": "m 107 0 l 107 972 l 471 972 q 718 914 610 972 q 888 748 826 856 q 950 486 950 639 q 888 225 950 333 q 718 58 826 116 q 471 0 610 0 l 107 0 m 285 158 l 471 158 q 628 198 565 158 q 724 311 692 238 q 756 486 756 385 q 724 661 756 588 q 628 774 692 735 q 471 814 565 814 l 285 814 l 285 158 z "
+        },
+        "Dž": {
+            "ha": 1647,
+            "x_min": 107,
+            "x_max": 1626,
+            "o": "m 107 0 l 107 972 l 471 972 q 718 914 610 972 q 888 748 826 856 q 950 486 950 639 q 888 225 950 333 q 718 58 826 116 q 471 0 610 0 l 107 0 m 285 158 l 471 158 q 628 198 565 158 q 724 311 692 238 q 756 486 756 385 q 724 661 756 588 q 628 774 692 735 q 471 814 565 814 l 285 814 l 285 158 z "
+        },
+        "E": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 z "
+        },
+        "É": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 296 1054 l 296 1150 l 569 1282 l 569 1135 l 296 1054 z "
+        },
+        "Ĕ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 432 1063 q 318 1088 366 1063 q 244 1154 270 1113 q 218 1246 218 1196 l 336 1246 q 362 1180 336 1203 q 432 1157 388 1157 q 502 1180 476 1157 q 528 1246 528 1203 l 646 1246 q 620 1154 646 1196 q 547 1088 594 1113 q 432 1063 499 1063 z "
+        },
+        "Ě": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 z "
+        },
+        "Ḝ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 443 -110 l 389 -89 q 422 -79 406 -83 q 457 -75 438 -75 q 552 -107 517 -75 q 588 -196 588 -138 q 542 -298 588 -263 q 431 -332 497 -332 q 365 -324 393 -332 q 317 -306 337 -316 l 343 -224 q 387 -241 365 -234 q 433 -247 408 -247 q 481 -236 463 -247 q 499 -201 499 -224 q 481 -165 499 -177 q 428 -153 463 -153 q 395 -155 411 -153 q 361 -162 380 -157 l 400 0 l 476 0 l 443 -110 m 432 1063 q 318 1088 366 1063 q 244 1154 270 1113 q 218 1246 218 1196 l 336 1246 q 362 1180 336 1203 q 432 1157 388 1157 q 502 1180 476 1157 q 528 1246 528 1203 l 646 1246 q 620 1154 646 1196 q 547 1088 594 1113 q 432 1063 499 1063 z "
+        },
+        "Ê": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 z "
+        },
+        "Ế": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 789,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 m 538 1244 l 629 1421 l 789 1421 l 647 1244 l 538 1244 z "
+        },
+        "Ệ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 z "
+        },
+        "Ề": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 m 568 1244 l 454 1421 l 603 1421 l 674 1244 l 568 1244 z "
+        },
+        "Ể": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 m 565 1211 l 550 1272 q 588 1289 575 1278 q 601 1319 601 1300 q 588 1349 601 1340 q 550 1358 574 1358 q 508 1351 529 1358 q 465 1332 486 1344 l 442 1417 q 495 1436 467 1429 q 553 1443 523 1443 q 650 1414 610 1443 q 690 1328 690 1384 q 660 1252 690 1280 q 565 1211 630 1224 z "
+        },
+        "Ễ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 m 553 1315 q 486 1330 521 1315 q 418 1359 451 1344 q 358 1374 385 1374 q 313 1325 313 1374 l 207 1325 q 233 1433 207 1396 q 311 1471 258 1471 q 378 1456 343 1471 q 446 1427 413 1442 q 506 1413 479 1413 q 551 1461 551 1413 l 657 1461 q 632 1353 657 1392 q 553 1315 606 1315 z "
+        },
+        "Ȅ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 586 1094 l 476 1094 l 349 1313 l 508 1313 l 586 1094 m 382 1094 l 272 1094 l 133 1313 l 293 1313 l 382 1094 z "
+        },
+        "Ë": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 225 1088 l 225 1207 l 358 1207 l 358 1088 l 225 1088 m 506 1088 l 506 1207 l 639 1207 l 639 1088 l 506 1088 z "
+        },
+        "Ė": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 360 1100 l 360 1235 l 504 1235 l 504 1100 l 360 1100 z "
+        },
+        "Ẹ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 z "
+        },
+        "È": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 568 1054 l 294 1135 l 294 1282 l 568 1150 l 568 1054 z "
+        },
+        "Ẻ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 425 1056 l 410 1117 q 448 1134 435 1123 q 461 1164 461 1144 q 448 1193 461 1184 q 410 1203 434 1203 q 367 1195 389 1203 q 325 1176 346 1188 l 301 1261 q 355 1281 326 1274 q 413 1288 383 1288 q 510 1258 470 1288 q 550 1172 550 1228 q 520 1096 550 1124 q 425 1056 490 1068 z "
+        },
+        "Ȇ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 432 1267 q 547 1242 499 1267 q 620 1175 594 1217 q 646 1083 646 1133 l 528 1083 q 502 1149 528 1126 q 432 1172 476 1172 q 362 1149 388 1172 q 336 1083 336 1126 l 218 1083 q 244 1175 218 1133 q 318 1242 270 1217 q 432 1267 366 1267 z "
+        },
+        "Ē": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 204 1101 l 204 1207 l 660 1207 l 660 1101 l 204 1101 z "
+        },
+        "Ḗ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 204 1101 l 204 1207 l 660 1207 l 660 1101 l 204 1101 m 296 1293 l 296 1389 l 569 1521 l 569 1374 l 296 1293 z "
+        },
+        "Ḕ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 204 1101 l 204 1207 l 660 1207 l 660 1101 l 204 1101 m 568 1293 l 294 1374 l 294 1521 l 568 1389 l 568 1293 z "
+        },
+        "Ę": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 810,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 657 0 l 743 0 q 666 -72 695 -36 q 636 -144 636 -107 q 655 -192 636 -176 q 703 -208 673 -208 q 747 -203 727 -208 q 786 -189 767 -198 l 810 -265 q 758 -285 788 -276 q 689 -293 728 -293 q 588 -261 628 -293 q 547 -171 547 -230 q 583 -71 547 -115 q 657 0 619 -27 z "
+        },
+        "Ẽ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 743,
+            "o": "m 107 0 l 107 972 l 729 972 l 729 800 l 289 800 l 289 593 l 631 593 l 631 421 l 289 421 l 289 172 l 743 172 l 743 0 l 107 0 m 553 1079 q 486 1094 521 1079 q 418 1123 451 1108 q 358 1138 385 1138 q 313 1089 313 1138 l 207 1089 q 233 1197 207 1160 q 311 1235 258 1235 q 378 1220 343 1235 q 446 1191 413 1206 q 506 1176 479 1176 q 551 1225 551 1176 l 657 1225 q 632 1117 657 1156 q 553 1079 606 1079 z "
+        },
+        "F": {
+            "ha": 729,
+            "x_min": 107,
+            "x_max": 706,
+            "o": "m 107 0 l 107 972 l 706 972 l 706 800 l 285 800 l 285 593 l 610 593 l 610 421 l 285 421 l 285 0 l 107 0 z "
+        },
+        "G": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 z "
+        },
+        "Ğ": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 m 557 1063 q 443 1088 491 1063 q 369 1154 395 1113 q 343 1246 343 1196 l 461 1246 q 487 1180 461 1203 q 557 1157 513 1157 q 627 1180 601 1157 q 653 1246 653 1203 l 771 1246 q 745 1154 771 1196 q 672 1088 719 1113 q 557 1063 624 1063 z "
+        },
+        "Ǧ": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 z "
+        },
+        "Ĝ": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 m 374 1035 l 374 1138 l 557 1265 l 740 1138 l 740 1035 l 557 1135 l 374 1035 z "
+        },
+        "Ģ": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 m 544 -436 l 471 -436 l 524 -283 l 460 -283 l 460 -126 l 631 -126 l 631 -267 l 544 -436 z "
+        },
+        "Ġ": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 m 485 1100 l 485 1235 l 629 1235 l 629 1100 l 485 1100 z "
+        },
+        "Ḡ": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 m 329 1101 l 329 1207 l 785 1207 l 785 1101 l 329 1101 z "
+        },
+        "H": {
+            "ha": 1014,
+            "x_min": 107,
+            "x_max": 907,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 588 l 729 588 l 729 972 l 907 972 l 907 0 l 729 0 l 729 421 l 285 421 l 285 0 l 107 0 z "
+        },
+        "Ħ": {
+            "ha": 1028,
+            "x_min": 17,
+            "x_max": 1011,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 593 l 743 593 l 743 972 l 921 972 l 921 0 l 743 0 l 743 421 l 285 421 l 285 0 l 107 0 m 17 675 l 17 806 l 1011 806 l 1011 675 l 17 675 z "
+        },
+        "Ḫ": {
+            "ha": 1014,
+            "x_min": 107,
+            "x_max": 907,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 588 l 729 588 l 729 972 l 907 972 l 907 0 l 729 0 l 729 421 l 285 421 l 285 0 l 107 0 z "
+        },
+        "Ĥ": {
+            "ha": 1014,
+            "x_min": 107,
+            "x_max": 907,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 588 l 729 588 l 729 972 l 907 972 l 907 0 l 729 0 l 729 421 l 285 421 l 285 0 l 107 0 m 324 1035 l 324 1138 l 507 1265 l 690 1138 l 690 1035 l 507 1135 l 324 1035 z "
+        },
+        "Ḥ": {
+            "ha": 1014,
+            "x_min": 107,
+            "x_max": 907,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 588 l 729 588 l 729 972 l 907 972 l 907 0 l 729 0 l 729 421 l 285 421 l 285 0 l 107 0 z "
+        },
+        "I": {
+            "ha": 392,
+            "x_min": 107,
+            "x_max": 285,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 z "
+        },
+        "IJ": {
+            "ha": 969,
+            "x_min": 96,
+            "x_max": 874,
+            "o": "m 282 333 q 314 236 291 277 q 377 174 336 196 q 485 151 419 151 q 592 174 551 151 q 657 237 634 196 q 688 336 679 278 q 696 463 696 393 l 696 972 l 874 972 l 874 417 q 831 187 874 285 q 703 35 789 89 q 485 -19 617 -19 q 222 68 316 -19 q 104 306 128 156 l 282 333 m 96 463 l 96 972 l 274 972 l 274 463 l 96 463 z "
+        },
+        "Í": {
+            "ha": 392,
+            "x_min": 60,
+            "x_max": 333,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 60 1054 l 60 1150 l 333 1282 l 333 1135 l 60 1054 z "
+        },
+        "Ĭ": {
+            "ha": 392,
+            "x_min": -18,
+            "x_max": 410,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 196 1063 q 82 1088 130 1063 q 8 1154 34 1113 q -18 1246 -18 1196 l 100 1246 q 126 1180 100 1203 q 196 1157 152 1157 q 266 1180 240 1157 q 292 1246 292 1203 l 410 1246 q 384 1154 410 1196 q 310 1088 358 1113 q 196 1063 263 1063 z "
+        },
+        "Î": {
+            "ha": 392,
+            "x_min": 13,
+            "x_max": 379,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 13 1035 l 13 1138 l 196 1265 l 379 1138 l 379 1035 l 196 1135 l 13 1035 z "
+        },
+        "Ȉ": {
+            "ha": 392,
+            "x_min": -103,
+            "x_max": 350,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 350 1094 l 240 1094 l 113 1313 l 272 1313 l 350 1094 m 146 1094 l 36 1094 l -103 1313 l 57 1313 l 146 1094 z "
+        },
+        "Ï": {
+            "ha": 392,
+            "x_min": -11,
+            "x_max": 403,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m -11 1088 l -11 1207 l 122 1207 l 122 1088 l -11 1088 m 269 1088 l 269 1207 l 403 1207 l 403 1088 l 269 1088 z "
+        },
+        "Ḯ": {
+            "ha": 392,
+            "x_min": -11,
+            "x_max": 403,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m -11 1088 l -11 1207 l 122 1207 l 122 1088 l -11 1088 m 269 1088 l 269 1207 l 403 1207 l 403 1088 l 269 1088 m 60 1263 l 60 1358 l 333 1490 l 333 1343 l 60 1263 z "
+        },
+        "İ": {
+            "ha": 392,
+            "x_min": 107,
+            "x_max": 285,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 124 1100 l 124 1235 l 268 1235 l 268 1100 l 124 1100 z "
+        },
+        "Ị": {
+            "ha": 392,
+            "x_min": 107,
+            "x_max": 285,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 z "
+        },
+        "Ì": {
+            "ha": 392,
+            "x_min": 58,
+            "x_max": 332,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 332 1054 l 58 1135 l 58 1282 l 332 1150 l 332 1054 z "
+        },
+        "Ỉ": {
+            "ha": 392,
+            "x_min": 65,
+            "x_max": 314,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 189 1056 l 174 1117 q 212 1134 199 1123 q 225 1164 225 1144 q 211 1193 225 1184 q 174 1203 198 1203 q 131 1195 153 1203 q 89 1176 110 1188 l 65 1261 q 118 1281 90 1274 q 176 1288 147 1288 q 274 1258 234 1288 q 314 1172 314 1228 q 284 1096 314 1124 q 189 1056 253 1068 z "
+        },
+        "Ȋ": {
+            "ha": 392,
+            "x_min": -18,
+            "x_max": 410,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 196 1267 q 310 1242 263 1267 q 384 1175 358 1217 q 410 1083 410 1133 l 292 1083 q 266 1149 292 1126 q 196 1172 240 1172 q 126 1149 152 1172 q 100 1083 100 1126 l -18 1083 q 8 1175 -18 1133 q 82 1242 34 1217 q 196 1267 130 1267 z "
+        },
+        "Ī": {
+            "ha": 392,
+            "x_min": -32,
+            "x_max": 424,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m -32 1101 l -32 1207 l 424 1207 l 424 1101 l -32 1101 z "
+        },
+        "Į": {
+            "ha": 392,
+            "x_min": 89,
+            "x_max": 351,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 199 0 l 285 0 q 207 -72 237 -36 q 178 -144 178 -107 q 196 -192 178 -176 q 244 -208 215 -208 q 289 -203 269 -208 q 328 -189 308 -198 l 351 -265 q 300 -285 330 -276 q 231 -293 270 -293 q 130 -261 170 -293 q 89 -171 89 -230 q 125 -71 89 -115 q 199 0 160 -27 z "
+        },
+        "Ĩ": {
+            "ha": 392,
+            "x_min": -29,
+            "x_max": 421,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 317 1079 q 250 1094 285 1079 q 182 1123 215 1108 q 122 1138 149 1138 q 76 1089 76 1138 l -29 1089 q -3 1197 -29 1160 q 75 1235 22 1235 q 142 1220 107 1235 q 210 1191 177 1206 q 269 1176 243 1176 q 315 1225 315 1176 l 421 1225 q 395 1117 421 1156 q 317 1079 370 1079 z "
+        },
+        "J": {
+            "ha": 392,
+            "x_min": -6,
+            "x_max": 285,
+            "o": "m 10 -239 l -6 -86 q 81 -61 54 -86 q 107 33 107 -35 l 107 972 l 285 972 l 285 -6 q 224 -186 285 -133 q 60 -239 164 -239 l 10 -239 z "
+        },
+        "Ĵ": {
+            "ha": 392,
+            "x_min": -6,
+            "x_max": 379,
+            "o": "m 10 -239 l -6 -86 q 81 -61 54 -86 q 107 33 107 -35 l 107 972 l 285 972 l 285 -6 q 224 -186 285 -133 q 60 -239 164 -239 l 10 -239 m 13 1035 l 13 1138 l 196 1265 l 379 1138 l 379 1035 l 196 1135 l 13 1035 z "
+        },
+        "K": {
+            "ha": 871,
+            "x_min": 107,
+            "x_max": 867,
+            "o": "m 658 0 l 299 514 l 658 972 l 867 972 l 504 514 l 867 0 l 658 0 m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 z "
+        },
+        "Ķ": {
+            "ha": 871,
+            "x_min": 107,
+            "x_max": 867,
+            "o": "m 658 0 l 299 514 l 658 972 l 867 972 l 504 514 l 867 0 l 658 0 m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 474 -436 l 400 -436 l 453 -283 l 389 -283 l 389 -126 l 560 -126 l 560 -267 l 474 -436 z "
+        },
+        "L": {
+            "ha": 694,
+            "x_min": 107,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 z "
+        },
+        "LJ": {
+            "ha": 1086,
+            "x_min": 107,
+            "x_max": 979,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 m 704 -239 l 689 -86 q 775 -61 749 -86 q 801 33 801 -35 l 801 972 l 979 972 l 979 -6 q 919 -186 979 -133 q 754 -239 858 -239 l 704 -239 z "
+        },
+        "Ĺ": {
+            "ha": 694,
+            "x_min": 60,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 m 60 1054 l 60 1150 l 333 1282 l 333 1135 l 60 1054 z "
+        },
+        "Ľ": {
+            "ha": 694,
+            "x_min": 107,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 m 547 726 l 547 972 l 685 972 l 644 726 l 547 726 z "
+        },
+        "Ļ": {
+            "ha": 694,
+            "x_min": 107,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 m 397 -436 l 324 -436 l 376 -283 l 313 -283 l 313 -126 l 483 -126 l 483 -267 l 397 -436 z "
+        },
+        "Ŀ": {
+            "ha": 694,
+            "x_min": 107,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 m 457 454 l 457 635 l 629 635 l 629 454 l 457 454 z "
+        },
+        "Ḷ": {
+            "ha": 694,
+            "x_min": 107,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 z "
+        },
+        "Lj": {
+            "ha": 1028,
+            "x_min": 107,
+            "x_max": 947,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 m 707 -336 l 692 -194 q 742 -184 724 -194 q 768 -150 760 -174 q 775 -83 775 -126 l 775 694 l 947 694 l 947 -154 q 926 -266 947 -227 q 863 -321 904 -306 q 761 -336 821 -336 l 707 -336 m 775 800 l 775 972 l 947 972 l 947 800 l 775 800 z "
+        },
+        "Ḻ": {
+            "ha": 694,
+            "x_min": 107,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 158 l 685 158 l 685 0 l 107 0 z "
+        },
+        "Ł": {
+            "ha": 694,
+            "x_min": 17,
+            "x_max": 685,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 172 l 685 172 l 685 0 l 107 0 m 17 489 l 17 628 l 568 769 l 568 631 l 17 489 z "
+        },
+        "M": {
+            "ha": 1157,
+            "x_min": 61,
+            "x_max": 1096,
+            "o": "m 61 0 l 196 972 l 342 972 l 579 529 l 815 972 l 961 972 l 1096 0 l 911 0 l 818 731 l 867 721 l 579 204 l 290 719 l 339 729 l 246 0 l 61 0 z "
+        },
+        "Ṃ": {
+            "ha": 1157,
+            "x_min": 61,
+            "x_max": 1096,
+            "o": "m 61 0 l 196 972 l 342 972 l 579 529 l 815 972 l 961 972 l 1096 0 l 911 0 l 818 731 l 867 721 l 579 204 l 290 719 l 339 729 l 246 0 l 61 0 z "
+        },
+        "N": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 z "
+        },
+        "NJ": {
+            "ha": 1374,
+            "x_min": 107,
+            "x_max": 1267,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 992 -239 l 976 -86 q 1063 -61 1036 -86 q 1089 33 1089 -35 l 1089 972 l 1267 972 l 1267 -6 q 1206 -186 1267 -133 q 1042 -239 1146 -239 l 992 -239 z "
+        },
+        "Ń": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 354 1054 l 354 1150 l 628 1282 l 628 1135 l 354 1054 z "
+        },
+        "Ň": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 z "
+        },
+        "Ņ": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 508 -436 l 435 -436 l 488 -283 l 424 -283 l 424 -126 l 594 -126 l 594 -267 l 508 -436 z "
+        },
+        "Ṅ": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 418 1100 l 418 1235 l 563 1235 l 563 1100 l 418 1100 z "
+        },
+        "Ṇ": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 z "
+        },
+        "Ŋ": {
+            "ha": 1000,
+            "x_min": 107,
+            "x_max": 903,
+            "o": "m 903 69 q 858 -129 903 -51 q 734 -246 813 -208 q 554 -285 656 -285 q 435 -268 491 -285 l 453 -104 q 504 -111 478 -109 q 556 -114 530 -114 q 678 -71 632 -114 q 725 58 725 -28 l 725 553 q 669 751 725 682 q 504 821 614 821 q 373 793 428 821 q 285 721 318 766 l 285 0 l 107 0 l 107 972 l 258 972 l 267 879 q 393 963 321 935 q 547 992 466 992 q 745 940 666 992 q 864 796 824 889 q 903 581 903 703 l 903 69 z "
+        },
+        "Nj": {
+            "ha": 1303,
+            "x_min": 107,
+            "x_max": 1222,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 982 -336 l 967 -194 q 1017 -184 999 -194 q 1043 -150 1035 -174 q 1050 -83 1050 -126 l 1050 694 l 1222 694 l 1222 -154 q 1201 -266 1222 -227 q 1138 -321 1179 -306 q 1036 -336 1096 -336 l 982 -336 m 1050 800 l 1050 972 l 1222 972 l 1222 800 l 1050 800 z "
+        },
+        "Ṉ": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 z "
+        },
+        "Ñ": {
+            "ha": 982,
+            "x_min": 107,
+            "x_max": 875,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 611 1079 q 544 1094 579 1079 q 476 1123 509 1108 q 417 1138 443 1138 q 371 1089 371 1138 l 265 1089 q 291 1197 265 1160 q 369 1235 317 1235 q 436 1220 401 1235 q 505 1191 472 1206 q 564 1176 538 1176 q 610 1225 610 1176 l 715 1225 q 690 1117 715 1156 q 611 1079 665 1079 z "
+        },
+        "O": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 z "
+        },
+        "Ó": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 392 1054 l 392 1150 l 665 1282 l 665 1135 l 392 1054 z "
+        },
+        "Ŏ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 528 1063 q 414 1088 462 1063 q 340 1154 366 1113 q 314 1246 314 1196 l 432 1246 q 458 1180 432 1203 q 528 1157 484 1157 q 598 1180 572 1157 q 624 1246 624 1203 l 742 1246 q 716 1154 742 1196 q 642 1088 690 1113 q 528 1063 594 1063 z "
+        },
+        "Ô": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 344 1035 l 344 1138 l 528 1265 l 711 1138 l 711 1035 l 528 1135 l 344 1035 z "
+        },
+        "Ố": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 344 1035 l 344 1138 l 528 1265 l 711 1138 l 711 1035 l 528 1135 l 344 1035 m 633 1244 l 725 1421 l 885 1421 l 743 1244 l 633 1244 z "
+        },
+        "Ộ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 344 1047 l 344 1157 l 528 1313 l 711 1157 l 711 1047 l 528 1163 l 344 1047 z "
+        },
+        "Ồ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 344 1035 l 344 1138 l 528 1265 l 711 1138 l 711 1035 l 528 1135 l 344 1035 m 664 1244 l 550 1421 l 699 1421 l 769 1244 l 664 1244 z "
+        },
+        "Ổ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 344 1035 l 344 1138 l 528 1265 l 711 1138 l 711 1035 l 528 1135 l 344 1035 m 661 1211 l 646 1272 q 684 1289 671 1278 q 697 1319 697 1300 q 684 1349 697 1340 q 646 1358 670 1358 q 603 1351 625 1358 q 561 1332 582 1344 l 538 1417 q 591 1436 563 1429 q 649 1443 619 1443 q 746 1414 706 1443 q 786 1328 786 1384 q 756 1252 786 1280 q 661 1211 726 1224 z "
+        },
+        "Ỗ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 344 1035 l 344 1138 l 528 1265 l 711 1138 l 711 1035 l 528 1135 l 344 1035 m 649 1315 q 582 1330 617 1315 q 514 1359 547 1344 q 454 1374 481 1374 q 408 1325 408 1374 l 303 1325 q 328 1433 303 1396 q 407 1471 354 1471 q 474 1456 439 1471 q 542 1427 509 1442 q 601 1413 575 1413 q 647 1461 647 1413 l 753 1461 q 727 1353 753 1392 q 649 1315 702 1315 z "
+        },
+        "Ȍ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 682 1094 l 572 1094 l 444 1313 l 604 1313 l 682 1094 m 478 1094 l 368 1094 l 229 1313 l 389 1313 l 478 1094 z "
+        },
+        "Ö": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 321 1088 l 321 1207 l 454 1207 l 454 1088 l 321 1088 m 601 1088 l 601 1207 l 735 1207 l 735 1088 l 601 1088 z "
+        },
+        "Ȫ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 321 1088 l 321 1207 l 454 1207 l 454 1088 l 321 1088 m 601 1088 l 601 1207 l 735 1207 l 735 1088 l 601 1088 m 300 1310 l 300 1415 l 756 1415 l 756 1310 l 300 1310 z "
+        },
+        "Ȱ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 456 1100 l 456 1235 l 600 1235 l 600 1100 l 456 1100 m 300 1351 l 300 1457 l 756 1457 l 756 1351 l 300 1351 z "
+        },
+        "Ọ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 z "
+        },
+        "Ò": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 664 1054 l 390 1135 l 390 1282 l 664 1150 l 664 1054 z "
+        },
+        "Ỏ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 521 1056 l 506 1117 q 544 1134 531 1123 q 557 1164 557 1144 q 543 1193 557 1184 q 506 1203 530 1203 q 463 1195 485 1203 q 421 1176 442 1188 l 397 1261 q 450 1281 422 1274 q 508 1288 478 1288 q 606 1258 566 1288 q 646 1172 646 1228 q 616 1096 646 1124 q 521 1056 585 1068 z "
+        },
+        "Ơ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 671 858 l 671 972 q 752 996 723 972 q 782 1075 782 1020 l 929 1075 q 892 960 929 1008 q 795 885 854 911 q 671 858 736 858 z "
+        },
+        "Ớ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 671 858 l 671 972 q 752 996 723 972 q 782 1075 782 1020 l 929 1075 q 892 960 929 1008 q 795 885 854 911 q 671 858 736 858 m 392 1054 l 392 1150 l 665 1282 l 665 1135 l 392 1054 z "
+        },
+        "Ợ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 671 858 l 671 972 q 752 996 723 972 q 782 1075 782 1020 l 929 1075 q 892 960 929 1008 q 795 885 854 911 q 671 858 736 858 z "
+        },
+        "Ờ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 671 858 l 671 972 q 752 996 723 972 q 782 1075 782 1020 l 929 1075 q 892 960 929 1008 q 795 885 854 911 q 671 858 736 858 m 664 1054 l 390 1135 l 390 1282 l 664 1150 l 664 1054 z "
+        },
+        "Ở": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 671 858 l 671 972 q 752 996 723 972 q 782 1075 782 1020 l 929 1075 q 892 960 929 1008 q 795 885 854 911 q 671 858 736 858 m 521 1056 l 506 1117 q 544 1134 531 1123 q 557 1164 557 1144 q 543 1193 557 1184 q 506 1203 530 1203 q 463 1195 485 1203 q 421 1176 442 1188 l 397 1261 q 450 1281 422 1274 q 508 1288 478 1288 q 606 1258 566 1288 q 646 1172 646 1228 q 616 1096 646 1124 q 521 1056 585 1068 z "
+        },
+        "Ỡ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 671 858 l 671 972 q 752 996 723 972 q 782 1075 782 1020 l 929 1075 q 892 960 929 1008 q 795 885 854 911 q 671 858 736 858 m 649 1079 q 582 1094 617 1079 q 514 1123 547 1108 q 454 1138 481 1138 q 408 1089 408 1138 l 303 1089 q 328 1197 303 1160 q 407 1235 354 1235 q 474 1220 439 1235 q 542 1191 509 1206 q 601 1176 575 1176 q 647 1225 647 1176 l 753 1225 q 727 1117 753 1156 q 649 1079 702 1079 z "
+        },
+        "Ő": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 365 1094 l 457 1313 l 617 1313 l 475 1094 l 365 1094 m 569 1094 l 672 1313 l 832 1313 l 679 1094 l 569 1094 z "
+        },
+        "Ȏ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 528 1267 q 642 1242 594 1267 q 716 1175 690 1217 q 742 1083 742 1133 l 624 1083 q 598 1149 624 1126 q 528 1172 572 1172 q 458 1149 484 1172 q 432 1083 432 1126 l 314 1083 q 340 1175 314 1133 q 414 1242 366 1217 q 528 1267 462 1267 z "
+        },
+        "Ō": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 300 1101 l 300 1207 l 756 1207 l 756 1101 l 300 1101 z "
+        },
+        "Ṓ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 300 1101 l 300 1207 l 756 1207 l 756 1101 l 300 1101 m 392 1293 l 392 1389 l 665 1521 l 665 1374 l 392 1293 z "
+        },
+        "Ṑ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 300 1101 l 300 1207 l 756 1207 l 756 1101 l 300 1101 m 664 1293 l 390 1374 l 390 1521 l 664 1389 l 664 1293 z "
+        },
+        "Ǫ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 575 0 l 661 0 q 584 -72 613 -36 q 554 -144 554 -107 q 573 -192 554 -176 q 621 -208 591 -208 q 665 -203 645 -208 q 704 -189 685 -198 l 728 -265 q 676 -285 706 -276 q 607 -293 647 -293 q 506 -261 547 -293 q 465 -171 465 -230 q 501 -71 465 -115 q 575 0 537 -27 z "
+        },
+        "Ø": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 85 -61 l 831 1033 l 971 1033 l 225 -61 l 85 -61 m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 z "
+        },
+        "Ǿ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 85 -61 l 831 1033 l 971 1033 l 225 -61 l 85 -61 m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 392 1054 l 392 1150 l 665 1282 l 665 1135 l 392 1054 z "
+        },
+        "Õ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 649 1079 q 582 1094 617 1079 q 514 1123 547 1108 q 454 1138 481 1138 q 408 1089 408 1138 l 303 1089 q 328 1197 303 1160 q 407 1235 354 1235 q 474 1220 439 1235 q 542 1191 509 1206 q 601 1176 575 1176 q 647 1225 647 1176 l 753 1225 q 727 1117 753 1156 q 649 1079 702 1079 z "
+        },
+        "Ṍ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 649 1079 q 582 1094 617 1079 q 514 1123 547 1108 q 454 1138 481 1138 q 408 1089 408 1138 l 303 1089 q 328 1197 303 1160 q 407 1235 354 1235 q 474 1220 439 1235 q 542 1191 509 1206 q 601 1176 575 1176 q 647 1225 647 1176 l 753 1225 q 727 1117 753 1156 q 649 1079 702 1079 m 392 1282 l 392 1378 l 665 1510 l 665 1363 l 392 1282 z "
+        },
+        "Ṏ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 649 1079 q 582 1094 617 1079 q 514 1123 547 1108 q 454 1138 481 1138 q 408 1089 408 1138 l 303 1089 q 328 1197 303 1160 q 407 1235 354 1235 q 474 1220 439 1235 q 542 1191 509 1206 q 601 1176 575 1176 q 647 1225 647 1176 l 753 1225 q 727 1117 753 1156 q 649 1079 702 1079 m 321 1315 l 321 1435 l 454 1435 l 454 1315 l 321 1315 m 601 1315 l 601 1435 l 735 1435 l 735 1315 l 601 1315 z "
+        },
+        "Ȭ": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 m 649 1079 q 582 1094 617 1079 q 514 1123 547 1108 q 454 1138 481 1138 q 408 1089 408 1138 l 303 1089 q 328 1197 303 1160 q 407 1235 354 1235 q 474 1220 439 1235 q 542 1191 509 1206 q 601 1176 575 1176 q 647 1225 647 1176 l 753 1225 q 727 1117 753 1156 q 649 1079 702 1079 m 300 1329 l 300 1435 l 756 1435 l 756 1329 l 300 1329 z "
+        },
+        "Œ": {
+            "ha": 1476,
+            "x_min": 49,
+            "x_max": 1429,
+            "o": "m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 700 956 619 992 q 841 853 780 920 q 936 694 902 787 q 971 486 971 601 q 936 278 971 372 q 841 119 902 185 q 700 16 780 52 q 528 -19 619 -19 m 528 151 q 685 194 622 151 q 781 313 749 238 q 813 486 813 389 q 781 659 813 583 q 685 778 749 735 q 528 821 622 821 q 370 778 433 821 q 275 659 307 735 q 243 486 243 583 q 275 313 243 389 q 370 194 307 238 q 528 151 433 151 m 824 0 l 824 972 l 1417 972 l 1417 800 l 1006 800 l 1006 593 l 1322 593 l 1322 421 l 1006 421 l 1006 172 l 1429 172 l 1429 0 l 824 0 z "
+        },
+        "P": {
+            "ha": 828,
+            "x_min": 107,
+            "x_max": 799,
+            "o": "m 107 0 l 107 972 l 453 972 q 642 939 565 972 q 759 836 719 906 q 799 658 799 767 q 759 477 799 549 q 643 372 719 406 q 457 338 567 338 l 285 338 l 285 0 l 107 0 m 285 486 l 436 486 q 573 527 527 486 q 618 656 618 568 q 572 783 618 743 q 432 824 526 824 l 285 824 l 285 486 z "
+        },
+        "Þ": {
+            "ha": 789,
+            "x_min": 107,
+            "x_max": 760,
+            "o": "m 107 0 l 107 972 l 285 972 l 285 771 l 449 771 q 681 701 603 771 q 760 500 760 631 q 681 300 760 370 q 449 229 603 229 l 285 229 l 285 0 l 107 0 m 285 378 l 428 378 q 547 410 515 378 q 579 500 579 443 q 547 593 579 565 q 428 622 515 622 l 285 622 l 285 378 z "
+        },
+        "Q": {
+            "ha": 1056,
+            "x_min": 49,
+            "x_max": 1007,
+            "o": "m 557 296 l 667 414 l 1006 92 l 896 -26 l 557 296 m 528 -19 q 281 43 389 -19 q 110 220 172 106 q 49 486 49 333 q 110 752 49 639 q 281 929 172 866 q 528 992 389 992 q 775 929 667 992 q 945 752 883 866 q 1007 486 1007 639 q 945 220 1007 333 q 775 43 883 106 q 528 -19 667 -19 m 528 153 q 690 196 625 153 q 788 314 756 239 q 821 486 821 390 q 788 658 821 583 q 690 776 756 733 q 528 819 625 819 q 365 776 431 819 q 267 658 300 733 q 235 486 235 583 q 267 314 235 390 q 365 196 300 239 q 528 153 431 153 z "
+        },
+        "R": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 z "
+        },
+        "Ŕ": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 m 307 1054 l 307 1150 l 581 1282 l 581 1135 l 307 1054 z "
+        },
+        "Ř": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 z "
+        },
+        "Ŗ": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 m 478 -436 l 404 -436 l 457 -283 l 393 -283 l 393 -126 l 564 -126 l 564 -267 l 478 -436 z "
+        },
+        "Ȑ": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 m 597 1094 l 488 1094 l 360 1313 l 519 1313 l 597 1094 m 393 1094 l 283 1094 l 144 1313 l 304 1313 l 393 1094 z "
+        },
+        "Ṛ": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 z "
+        },
+        "Ȓ": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 m 443 1267 q 558 1242 510 1267 q 631 1175 606 1217 q 657 1083 657 1133 l 539 1083 q 513 1149 539 1126 q 443 1172 487 1172 q 373 1149 399 1172 q 347 1083 347 1126 l 229 1083 q 255 1175 229 1133 q 329 1242 281 1217 q 443 1267 377 1267 z "
+        },
+        "Ṟ": {
+            "ha": 869,
+            "x_min": 107,
+            "x_max": 851,
+            "o": "m 107 0 l 107 972 l 463 972 q 639 940 563 972 q 756 843 714 908 q 797 678 797 778 q 752 508 797 571 q 632 408 706 445 l 851 0 l 653 0 l 465 361 q 462 361 463 361 q 458 361 460 361 l 285 361 l 285 0 l 107 0 m 285 510 l 415 510 q 568 555 525 510 q 611 668 611 599 q 569 782 611 741 q 422 824 526 824 l 285 824 l 285 510 z "
+        },
+        "S": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 z "
+        },
+        "Ś": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 296 1054 l 296 1150 l 569 1282 l 569 1135 l 296 1054 z "
+        },
+        "Ṥ": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 296 1054 l 296 1150 l 569 1282 l 569 1135 l 296 1054 m 360 1339 l 360 1474 l 504 1474 l 504 1339 l 360 1339 z "
+        },
+        "Š": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 z "
+        },
+        "Ṧ": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 360 1357 l 360 1492 l 504 1492 l 504 1357 l 360 1357 z "
+        },
+        "Ş": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 415 -110 l 361 -89 q 394 -79 378 -83 q 429 -75 410 -75 q 525 -107 490 -75 q 560 -196 560 -138 q 514 -298 560 -263 q 403 -332 469 -332 q 337 -324 365 -332 q 289 -306 309 -316 l 315 -224 q 359 -241 338 -234 q 406 -247 381 -247 q 453 -236 435 -247 q 471 -201 471 -224 q 453 -165 471 -177 q 400 -153 435 -153 q 368 -155 383 -153 q 333 -162 352 -157 l 372 0 l 449 0 l 415 -110 z "
+        },
+        "Ŝ": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 249 1035 l 249 1138 l 432 1265 l 615 1138 l 615 1035 l 432 1135 l 249 1035 z "
+        },
+        "Ș": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 408 -436 l 335 -436 l 388 -283 l 324 -283 l 324 -126 l 494 -126 l 494 -267 l 408 -436 z "
+        },
+        "Ṡ": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 360 1100 l 360 1235 l 504 1235 l 504 1100 l 360 1100 z "
+        },
+        "Ṣ": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 z "
+        },
+        "Ṩ": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 360 1100 l 360 1235 l 504 1235 l 504 1100 l 360 1100 z "
+        },
+        "ẞ": {
+            "ha": 931,
+            "x_min": 107,
+            "x_max": 897,
+            "o": "m 107 0 l 107 626 q 157 831 107 749 q 298 952 208 912 q 507 992 388 992 q 681 968 603 992 q 814 910 759 945 l 814 763 l 546 483 l 515 583 q 712 553 626 583 q 848 458 799 524 q 897 285 897 392 q 853 115 897 182 q 733 14 808 47 q 565 -19 658 -19 q 479 -14 521 -19 q 399 0 438 -9 l 399 165 q 539 151 464 151 q 658 190 614 151 q 703 294 703 228 q 656 403 703 365 q 517 442 610 442 l 451 442 l 451 589 l 743 893 l 728 778 q 636 817 692 800 q 507 835 581 835 q 345 780 406 835 q 285 629 285 725 l 285 0 l 107 0 z "
+        },
+        "Ə": {
+            "ha": 992,
+            "x_min": 42,
+            "x_max": 943,
+            "o": "m 749 475 q 666 729 749 637 q 428 821 584 821 q 263 799 344 821 q 110 743 182 778 l 99 910 q 257 969 169 947 q 443 992 345 992 q 715 923 603 992 q 885 736 826 853 q 943 472 943 618 q 911 278 943 368 q 819 122 880 189 q 672 18 759 56 q 474 -19 585 -19 q 247 33 344 -19 q 96 182 150 86 q 42 408 42 278 q 44 463 42 433 q 53 522 47 492 l 846 522 l 846 364 l 236 364 q 302 213 242 274 q 479 151 363 151 q 676 233 604 151 q 749 475 749 315 z "
+        },
+        "T": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 z "
+        },
+        "Ŧ": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 m 101 425 l 101 540 l 668 540 l 668 425 l 101 425 z "
+        },
+        "Ť": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 z "
+        },
+        "Ţ": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 z "
+        },
+        "Ț": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 m 386 -436 l 313 -436 l 365 -283 l 301 -283 l 301 -126 l 472 -126 l 472 -267 l 386 -436 z "
+        },
+        "Ṭ": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 z "
+        },
+        "Ṯ": {
+            "ha": 769,
+            "x_min": 21,
+            "x_max": 749,
+            "o": "m 296 0 l 296 800 l 21 800 l 21 972 l 749 972 l 749 800 l 474 800 l 474 0 l 296 0 z "
+        },
+        "U": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 z "
+        },
+        "Ú": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 363 1054 l 363 1150 l 636 1282 l 636 1135 l 363 1054 z "
+        },
+        "Ŭ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 499 1063 q 385 1088 433 1063 q 311 1154 337 1113 q 285 1246 285 1196 l 403 1246 q 429 1180 403 1203 q 499 1157 455 1157 q 568 1180 542 1157 q 594 1246 594 1203 l 713 1246 q 687 1154 713 1196 q 613 1088 661 1113 q 499 1063 565 1063 z "
+        },
+        "Û": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 315 1035 l 315 1138 l 499 1265 l 682 1138 l 682 1035 l 499 1135 l 315 1035 z "
+        },
+        "Ȕ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 664 1094 l 554 1094 l 415 1340 l 575 1340 l 664 1094 m 460 1094 l 350 1094 l 200 1340 l 360 1340 l 460 1094 z "
+        },
+        "Ü": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 292 1088 l 292 1207 l 425 1207 l 425 1088 l 292 1088 m 572 1088 l 572 1207 l 706 1207 l 706 1088 l 572 1088 z "
+        },
+        "Ụ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 z "
+        },
+        "Ù": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 635 1054 l 361 1135 l 361 1282 l 635 1150 l 635 1054 z "
+        },
+        "Ủ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 492 1056 l 476 1117 q 515 1134 501 1123 q 528 1164 528 1144 q 514 1193 528 1184 q 476 1203 501 1203 q 434 1195 456 1203 q 392 1176 413 1188 l 368 1261 q 421 1281 393 1274 q 479 1288 449 1288 q 577 1258 537 1288 q 617 1172 617 1228 q 586 1096 617 1124 q 492 1056 556 1068 z "
+        },
+        "Ư": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 1060,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 801 858 l 801 972 q 883 996 853 972 q 913 1075 913 1020 l 1060 1075 q 1022 960 1060 1008 q 926 885 985 911 q 801 858 867 858 z "
+        },
+        "Ứ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 1060,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 801 858 l 801 972 q 883 996 853 972 q 913 1075 913 1020 l 1060 1075 q 1022 960 1060 1008 q 926 885 985 911 q 801 858 867 858 m 363 1054 l 363 1150 l 636 1282 l 636 1135 l 363 1054 z "
+        },
+        "Ự": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 1060,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 801 858 l 801 972 q 883 996 853 972 q 913 1075 913 1020 l 1060 1075 q 1022 960 1060 1008 q 926 885 985 911 q 801 858 867 858 z "
+        },
+        "Ừ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 1060,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 801 858 l 801 972 q 883 996 853 972 q 913 1075 913 1020 l 1060 1075 q 1022 960 1060 1008 q 926 885 985 911 q 801 858 867 858 m 635 1054 l 361 1135 l 361 1282 l 635 1150 l 635 1054 z "
+        },
+        "Ử": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 1060,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 801 858 l 801 972 q 883 996 853 972 q 913 1075 913 1020 l 1060 1075 q 1022 960 1060 1008 q 926 885 985 911 q 801 858 867 858 m 492 1056 l 476 1117 q 515 1134 501 1123 q 528 1164 528 1144 q 514 1193 528 1184 q 476 1203 501 1203 q 434 1195 456 1203 q 392 1176 413 1188 l 368 1261 q 421 1281 393 1274 q 479 1288 449 1288 q 577 1258 537 1288 q 617 1172 617 1228 q 586 1096 617 1124 q 492 1056 556 1068 z "
+        },
+        "Ữ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 1060,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 801 858 l 801 972 q 883 996 853 972 q 913 1075 913 1020 l 1060 1075 q 1022 960 1060 1008 q 926 885 985 911 q 801 858 867 858 m 619 1079 q 552 1094 588 1079 q 484 1123 517 1108 q 425 1138 451 1138 q 379 1089 379 1138 l 274 1089 q 299 1197 274 1160 q 378 1235 325 1235 q 445 1220 410 1235 q 513 1191 480 1206 q 572 1176 546 1176 q 618 1225 618 1176 l 724 1225 q 698 1117 724 1156 q 619 1079 673 1079 z "
+        },
+        "Ű": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 336 1094 l 428 1313 l 588 1313 l 446 1094 l 336 1094 m 540 1094 l 643 1313 l 803 1313 l 650 1094 l 540 1094 z "
+        },
+        "Ȗ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 499 1267 q 613 1242 565 1267 q 687 1175 661 1217 q 713 1083 713 1133 l 594 1083 q 568 1149 594 1126 q 499 1172 542 1172 q 429 1149 455 1172 q 403 1083 403 1126 l 285 1083 q 311 1175 285 1133 q 385 1242 337 1217 q 499 1267 433 1267 z "
+        },
+        "Ū": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 271 1101 l 271 1207 l 726 1207 l 726 1101 l 271 1101 z "
+        },
+        "Ṻ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 271 1101 l 271 1207 l 726 1207 l 726 1101 l 271 1101 m 292 1326 l 292 1446 l 425 1446 l 425 1326 l 292 1326 m 572 1326 l 572 1446 l 706 1446 l 706 1326 l 572 1326 z "
+        },
+        "Ų": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 551 0 l 638 0 q 560 -72 590 -36 q 531 -144 531 -107 q 549 -192 531 -176 q 597 -208 567 -208 q 641 -203 622 -208 q 681 -189 661 -198 l 704 -265 q 653 -285 683 -276 q 583 -293 623 -293 q 482 -261 523 -293 q 442 -171 442 -230 q 477 -71 442 -115 q 551 0 513 -27 z "
+        },
+        "Ů": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 499 1047 q 391 1087 431 1047 q 351 1182 351 1127 q 391 1278 351 1238 q 499 1318 431 1318 q 607 1278 567 1318 q 646 1182 646 1238 q 607 1087 646 1127 q 499 1047 567 1047 m 499 1119 q 544 1137 526 1119 q 563 1182 563 1154 q 544 1227 563 1209 q 499 1244 526 1244 q 453 1227 472 1244 q 435 1182 435 1209 q 453 1137 435 1154 q 499 1119 472 1119 z "
+        },
+        "Ũ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 619 1079 q 552 1094 588 1079 q 484 1123 517 1108 q 425 1138 451 1138 q 379 1089 379 1138 l 274 1089 q 299 1197 274 1160 q 378 1235 325 1235 q 445 1220 410 1235 q 513 1191 480 1206 q 572 1176 546 1176 q 618 1225 618 1176 l 724 1225 q 698 1117 724 1156 q 619 1079 673 1079 z "
+        },
+        "Ṹ": {
+            "ha": 997,
+            "x_min": 96,
+            "x_max": 901,
+            "o": "m 499 -19 q 273 35 362 -19 q 140 187 183 89 q 96 417 96 285 l 96 972 l 274 972 l 274 463 q 283 336 274 393 q 316 237 292 278 q 384 174 340 196 q 499 151 428 151 q 613 174 569 151 q 682 237 658 196 q 715 336 706 278 q 724 463 724 393 l 724 972 l 901 972 l 901 417 q 858 187 901 285 q 725 35 814 89 q 499 -19 635 -19 m 619 1079 q 552 1094 588 1079 q 484 1123 517 1108 q 425 1138 451 1138 q 379 1089 379 1138 l 274 1089 q 299 1197 274 1160 q 378 1235 325 1235 q 445 1220 410 1235 q 513 1191 480 1206 q 572 1176 546 1176 q 618 1225 618 1176 l 724 1225 q 698 1117 724 1156 q 619 1079 673 1079 m 363 1282 l 363 1378 l 636 1510 l 636 1363 l 363 1282 z "
+        },
+        "V": {
+            "ha": 860,
+            "x_min": 0,
+            "x_max": 860,
+            "o": "m 346 0 l 0 972 l 179 972 l 447 206 l 411 206 l 681 972 l 860 972 l 514 0 l 346 0 z "
+        },
+        "W": {
+            "ha": 1338,
+            "x_min": 14,
+            "x_max": 1329,
+            "o": "m 288 0 l 14 972 l 199 972 l 393 282 l 610 972 l 733 972 l 958 300 l 1144 972 l 1329 972 l 1044 0 l 888 0 l 671 649 l 456 0 l 288 0 z "
+        },
+        "Ẃ": {
+            "ha": 1338,
+            "x_min": 14,
+            "x_max": 1329,
+            "o": "m 288 0 l 14 972 l 199 972 l 393 282 l 610 972 l 733 972 l 958 300 l 1144 972 l 1329 972 l 1044 0 l 888 0 l 671 649 l 456 0 l 288 0 m 533 1054 l 533 1150 l 807 1282 l 807 1135 l 533 1054 z "
+        },
+        "Ŵ": {
+            "ha": 1338,
+            "x_min": 14,
+            "x_max": 1329,
+            "o": "m 288 0 l 14 972 l 199 972 l 393 282 l 610 972 l 733 972 l 958 300 l 1144 972 l 1329 972 l 1044 0 l 888 0 l 671 649 l 456 0 l 288 0 m 486 1035 l 486 1138 l 669 1265 l 853 1138 l 853 1035 l 669 1135 l 486 1035 z "
+        },
+        "Ẅ": {
+            "ha": 1338,
+            "x_min": 14,
+            "x_max": 1329,
+            "o": "m 288 0 l 14 972 l 199 972 l 393 282 l 610 972 l 733 972 l 958 300 l 1144 972 l 1329 972 l 1044 0 l 888 0 l 671 649 l 456 0 l 288 0 m 463 1088 l 463 1207 l 596 1207 l 596 1088 l 463 1088 m 743 1088 l 743 1207 l 876 1207 l 876 1088 l 743 1088 z "
+        },
+        "Ẁ": {
+            "ha": 1338,
+            "x_min": 14,
+            "x_max": 1329,
+            "o": "m 288 0 l 14 972 l 199 972 l 393 282 l 610 972 l 733 972 l 958 300 l 1144 972 l 1329 972 l 1044 0 l 888 0 l 671 649 l 456 0 l 288 0 m 806 1054 l 532 1135 l 532 1282 l 806 1150 l 806 1054 z "
+        },
+        "X": {
+            "ha": 869,
+            "x_min": -3,
+            "x_max": 872,
+            "o": "m -3 0 l 338 499 l 14 972 l 211 972 l 435 642 l 658 972 l 856 972 l 532 499 l 872 0 l 675 0 l 435 354 l 194 0 l -3 0 z "
+        },
+        "Y": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 z "
+        },
+        "Ý": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 283 1054 l 283 1150 l 557 1282 l 557 1135 l 283 1054 z "
+        },
+        "Ŷ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 236 1035 l 236 1138 l 419 1265 l 603 1138 l 603 1035 l 419 1135 l 236 1035 z "
+        },
+        "Ÿ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 213 1088 l 213 1207 l 346 1207 l 346 1088 l 213 1088 m 493 1088 l 493 1207 l 626 1207 l 626 1088 l 493 1088 z "
+        },
+        "Ẏ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 347 1100 l 347 1235 l 492 1235 l 492 1100 l 347 1100 z "
+        },
+        "Ỵ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 z "
+        },
+        "Ỳ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 556 1054 l 282 1135 l 282 1282 l 556 1150 l 556 1054 z "
+        },
+        "Ỷ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 413 1056 l 397 1117 q 435 1134 422 1123 q 449 1164 449 1144 q 435 1193 449 1184 q 397 1203 422 1203 q 355 1195 376 1203 q 313 1176 333 1188 l 289 1261 q 342 1281 314 1274 q 400 1288 370 1288 q 498 1258 458 1288 q 538 1172 538 1228 q 507 1096 538 1124 q 413 1056 477 1068 z "
+        },
+        "Ȳ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 192 1101 l 192 1207 l 647 1207 l 647 1101 l 192 1101 z "
+        },
+        "Ỹ": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 540 1079 q 473 1094 508 1079 q 405 1123 438 1108 q 346 1138 372 1138 q 300 1089 300 1138 l 194 1089 q 220 1197 194 1160 q 299 1235 246 1235 q 366 1220 331 1235 q 434 1191 401 1206 q 493 1176 467 1176 q 539 1225 539 1176 l 644 1225 q 619 1117 644 1156 q 540 1079 594 1079 z "
+        },
+        "Z": {
+            "ha": 761,
+            "x_min": 11,
+            "x_max": 751,
+            "o": "m 11 0 l 508 869 l 539 814 l 74 814 l 74 972 l 751 972 l 254 103 l 224 158 l 744 158 l 744 0 l 11 0 z "
+        },
+        "Ź": {
+            "ha": 761,
+            "x_min": 11,
+            "x_max": 751,
+            "o": "m 11 0 l 508 869 l 539 814 l 74 814 l 74 972 l 751 972 l 254 103 l 224 158 l 744 158 l 744 0 l 11 0 m 276 1054 l 276 1150 l 550 1282 l 550 1135 l 276 1054 z "
+        },
+        "Ž": {
+            "ha": 761,
+            "x_min": 11,
+            "x_max": 751,
+            "o": "m 11 0 l 508 869 l 539 814 l 74 814 l 74 972 l 751 972 l 254 103 l 224 158 l 744 158 l 744 0 l 11 0 z "
+        },
+        "Ż": {
+            "ha": 761,
+            "x_min": 11,
+            "x_max": 751,
+            "o": "m 11 0 l 508 869 l 539 814 l 74 814 l 74 972 l 751 972 l 254 103 l 224 158 l 744 158 l 744 0 l 11 0 m 340 1100 l 340 1235 l 485 1235 l 485 1100 l 340 1100 z "
+        },
+        "Ẓ": {
+            "ha": 761,
+            "x_min": 11,
+            "x_max": 751,
+            "o": "m 11 0 l 508 869 l 539 814 l 74 814 l 74 972 l 751 972 l 254 103 l 224 158 l 744 158 l 744 0 l 11 0 z "
+        },
+        "a": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 z "
+        },
+        "á": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 206 792 l 206 901 l 479 1057 l 479 897 l 206 792 z "
+        },
+        "ă": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 815 q 228 842 276 815 q 154 912 180 868 q 128 1008 128 956 l 246 1008 q 272 943 246 966 q 342 919 298 919 q 411 943 385 919 q 438 1008 438 966 l 556 1008 q 530 912 556 956 q 456 842 504 868 q 342 815 408 815 z "
+        },
+        "ắ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 785 q 228 810 276 785 q 154 876 180 835 q 128 968 128 918 l 246 968 q 272 902 246 926 q 342 879 298 879 q 411 902 385 879 q 438 968 438 926 l 556 968 q 530 876 556 918 q 456 810 504 835 q 342 785 408 785 m 206 1032 l 206 1128 l 479 1260 l 479 1113 l 206 1032 z "
+        },
+        "ặ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 815 q 228 842 276 815 q 154 912 180 868 q 128 1008 128 956 l 246 1008 q 272 943 246 966 q 342 919 298 919 q 411 943 385 919 q 438 1008 438 966 l 556 1008 q 530 912 556 956 q 456 842 504 868 q 342 815 408 815 z "
+        },
+        "ằ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 785 q 228 810 276 785 q 154 876 180 835 q 128 968 128 918 l 246 968 q 272 902 246 926 q 342 879 298 879 q 411 902 385 879 q 438 968 438 926 l 556 968 q 530 876 556 918 q 456 810 504 835 q 342 785 408 785 m 478 1032 l 204 1113 l 204 1260 l 478 1128 l 478 1032 z "
+        },
+        "ẳ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 785 q 228 810 276 785 q 154 876 180 835 q 128 968 128 918 l 246 968 q 272 902 246 926 q 342 879 298 879 q 411 902 385 879 q 438 968 438 926 l 556 968 q 530 876 556 918 q 456 810 504 835 q 342 785 408 785 m 349 989 l 333 1050 q 372 1067 358 1056 q 385 1097 385 1078 q 371 1127 385 1117 q 333 1136 358 1136 q 291 1129 313 1136 q 249 1110 269 1122 l 225 1194 q 278 1214 250 1207 q 336 1221 306 1221 q 434 1191 394 1221 q 474 1106 474 1162 q 443 1030 474 1058 q 349 989 413 1001 z "
+        },
+        "ẵ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 785 q 228 810 276 785 q 154 876 180 835 q 128 968 128 918 l 246 968 q 272 902 246 926 q 342 879 298 879 q 411 902 385 879 q 438 968 438 926 l 556 968 q 530 876 556 918 q 456 810 504 835 q 342 785 408 785 m 463 1036 q 395 1051 431 1036 q 327 1080 360 1065 q 268 1094 294 1094 q 222 1046 222 1094 l 117 1046 q 142 1154 117 1117 q 221 1192 168 1192 q 288 1177 253 1192 q 356 1148 323 1163 q 415 1133 389 1133 q 461 1182 461 1133 l 567 1182 q 541 1074 567 1113 q 463 1036 516 1036 z "
+        },
+        "â": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 158 769 l 158 879 l 342 1035 l 525 879 l 525 769 l 342 885 l 158 769 z "
+        },
+        "ấ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 699,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 158 757 l 158 860 l 342 988 l 525 860 l 525 757 l 342 857 l 158 757 m 447 967 l 539 1143 l 699 1143 l 557 967 l 447 967 z "
+        },
+        "ậ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 158 769 l 158 879 l 342 1035 l 525 879 l 525 769 l 342 885 l 158 769 z "
+        },
+        "ầ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 158 757 l 158 860 l 342 988 l 525 860 l 525 757 l 342 857 l 158 757 m 478 967 l 364 1143 l 513 1143 l 583 967 l 478 967 z "
+        },
+        "ẩ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 158 757 l 158 860 l 342 988 l 525 860 l 525 757 l 342 857 l 158 757 m 475 933 l 460 994 q 498 1011 485 1001 q 511 1042 511 1022 q 498 1071 511 1062 q 460 1081 484 1081 q 417 1073 439 1081 q 375 1054 396 1066 l 351 1139 q 405 1158 376 1151 q 463 1165 433 1165 q 560 1136 520 1165 q 600 1050 600 1106 q 570 974 600 1002 q 475 933 540 946 z "
+        },
+        "ẫ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 158 757 l 158 860 l 342 988 l 525 860 l 525 757 l 342 857 l 158 757 m 463 1038 q 395 1052 431 1038 q 327 1081 360 1067 q 268 1096 294 1096 q 222 1047 222 1096 l 117 1047 q 142 1156 117 1118 q 221 1193 168 1193 q 288 1178 253 1193 q 356 1149 323 1164 q 415 1135 389 1135 q 461 1183 461 1135 l 567 1183 q 541 1076 567 1114 q 463 1038 516 1038 z "
+        },
+        "ȁ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 507 817 l 397 817 l 258 1063 l 418 1063 l 507 817 m 303 817 l 193 817 l 43 1063 l 203 1063 l 303 817 z "
+        },
+        "ä": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 415 821 l 415 946 l 549 946 l 549 821 l 415 821 m 135 821 l 135 946 l 268 946 l 268 821 l 135 821 z "
+        },
+        "ạ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 z "
+        },
+        "à": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 478 792 l 204 897 l 204 1057 l 478 901 l 478 792 z "
+        },
+        "ả": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 364 742 l 313 793 q 355 836 340 817 q 371 881 371 856 q 357 914 371 903 q 319 925 344 925 q 277 918 299 925 q 235 899 256 910 l 211 983 q 264 1003 236 996 q 322 1010 292 1010 q 420 978 380 1010 q 460 886 460 946 q 435 808 460 840 q 364 742 410 775 z "
+        },
+        "ȃ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 1008 q 456 982 408 1008 q 530 912 504 956 q 556 815 556 868 l 438 815 q 411 881 438 858 q 342 904 385 904 q 272 881 298 904 q 246 815 246 858 l 128 815 q 154 912 128 868 q 228 982 180 956 q 342 1008 276 1008 z "
+        },
+        "ā": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 114 835 l 114 947 l 569 947 l 569 835 l 114 835 z "
+        },
+        "ą": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 722,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 569 0 l 656 0 q 578 -72 608 -36 q 549 -144 549 -107 q 567 -192 549 -176 q 615 -208 585 -208 q 659 -203 640 -208 q 699 -189 679 -198 l 722 -265 q 671 -285 701 -276 q 601 -293 641 -293 q 500 -261 541 -293 q 460 -171 460 -230 q 495 -71 460 -115 q 569 0 531 -27 z "
+        },
+        "å": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 792 q 236 832 275 792 q 197 926 197 872 q 236 1022 197 982 q 342 1063 275 1063 q 448 1022 410 1063 q 486 926 486 982 q 448 832 486 872 q 342 792 410 792 m 342 864 q 385 881 368 864 q 403 926 403 899 q 385 971 403 953 q 342 989 368 989 q 298 971 316 989 q 281 926 281 953 q 298 881 281 899 q 342 864 316 864 z "
+        },
+        "ǻ": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 342 792 q 236 832 275 792 q 197 926 197 872 q 236 1022 197 982 q 342 1063 275 1063 q 448 1022 410 1063 q 486 926 486 982 q 448 832 486 872 q 342 792 410 792 m 342 864 q 385 881 368 864 q 403 926 403 899 q 385 971 403 953 q 342 989 368 989 q 298 971 316 989 q 281 926 281 953 q 298 881 281 899 q 342 864 316 864 m 206 1117 l 206 1213 l 479 1344 l 479 1197 l 206 1117 z "
+        },
+        "ã": {
+            "ha": 692,
+            "x_min": 29,
+            "x_max": 676,
+            "o": "m 231 -14 q 129 11 175 -14 q 56 82 83 35 q 29 194 29 128 q 57 295 29 253 q 129 366 84 338 q 226 410 174 394 q 330 434 278 426 q 419 443 381 442 q 389 530 417 503 q 294 557 361 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 476 678 419 706 q 563 589 532 650 q 593 426 593 527 l 593 239 q 598 164 593 187 q 616 134 603 140 q 654 128 629 128 l 676 128 l 661 -14 l 599 -14 q 530 -4 560 -14 q 478 24 499 6 q 443 67 456 42 q 351 7 409 28 q 231 -14 293 -14 m 303 118 q 360 130 326 118 q 421 168 394 142 l 421 326 q 324 310 372 324 q 242 269 275 297 q 210 201 210 242 q 232 139 210 159 q 303 118 254 118 m 460 803 q 392 818 425 803 q 329 849 360 833 q 269 864 299 864 q 222 814 222 864 l 104 814 q 138 939 108 895 q 224 982 167 982 q 291 967 258 982 q 354 936 324 951 q 414 921 385 921 q 461 971 461 921 l 579 971 q 546 846 576 890 q 460 803 516 803 z "
+        },
+        "æ": {
+            "ha": 1088,
+            "x_min": 29,
+            "x_max": 1050,
+            "o": "m 257 -14 q 139 9 190 -14 q 58 75 88 32 q 29 181 29 119 q 63 295 29 249 q 151 371 96 342 q 276 413 207 400 q 415 426 344 426 l 875 426 q 847 523 875 482 q 757 564 819 564 q 642 510 682 564 q 601 363 601 456 q 631 227 601 279 q 706 152 660 176 q 804 128 752 128 q 913 144 858 128 q 1011 185 967 161 l 1019 39 q 923 2 979 18 q 794 -14 867 -14 q 589 36 671 -14 q 466 170 507 87 q 425 351 425 253 l 425 382 q 400 510 425 463 q 294 557 375 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 482 675 424 706 q 568 575 540 644 l 479 557 q 590 665 520 624 q 757 706 660 706 q 920 665 855 706 q 1017 555 985 624 q 1050 404 1050 487 q 1047 358 1050 381 q 1039 310 1044 335 l 440 310 q 269 282 329 310 q 210 200 210 253 q 240 138 210 158 q 314 118 270 118 q 395 136 353 118 q 475 194 438 155 l 528 118 q 406 23 479 59 q 257 -14 333 -14 z "
+        },
+        "ǽ": {
+            "ha": 1088,
+            "x_min": 29,
+            "x_max": 1050,
+            "o": "m 257 -14 q 139 9 190 -14 q 58 75 88 32 q 29 181 29 119 q 63 295 29 249 q 151 371 96 342 q 276 413 207 400 q 415 426 344 426 l 875 426 q 847 523 875 482 q 757 564 819 564 q 642 510 682 564 q 601 363 601 456 q 631 227 601 279 q 706 152 660 176 q 804 128 752 128 q 913 144 858 128 q 1011 185 967 161 l 1019 39 q 923 2 979 18 q 794 -14 867 -14 q 589 36 671 -14 q 466 170 507 87 q 425 351 425 253 l 425 382 q 400 510 425 463 q 294 557 375 557 q 204 544 248 557 q 104 504 160 531 l 89 644 q 214 690 151 675 q 342 706 277 706 q 482 675 424 706 q 568 575 540 644 l 479 557 q 590 665 520 624 q 757 706 660 706 q 920 665 855 706 q 1017 555 985 624 q 1050 404 1050 487 q 1047 358 1050 381 q 1039 310 1044 335 l 440 310 q 269 282 329 310 q 210 200 210 253 q 240 138 210 158 q 314 118 270 118 q 395 136 353 118 q 475 194 438 155 l 528 118 q 406 23 479 59 q 257 -14 333 -14 m 421 792 l 421 901 l 694 1057 l 694 897 l 421 792 z "
+        },
+        "b": {
+            "ha": 793,
+            "x_min": 79,
+            "x_max": 754,
+            "o": "m 442 -14 q 305 12 363 -14 q 197 82 247 38 l 249 118 l 240 0 l 79 0 l 79 1042 l 251 1042 l 251 579 l 210 606 q 312 679 256 653 q 442 706 369 706 q 613 656 544 706 q 718 525 683 607 q 754 346 754 443 q 718 167 754 249 q 613 35 683 85 q 442 -14 544 -14 m 417 128 q 504 156 468 128 q 559 232 540 183 q 578 346 578 281 q 559 459 578 410 q 504 536 540 508 q 417 564 468 564 q 318 536 356 564 q 261 459 280 508 q 243 346 243 410 q 261 232 243 281 q 318 156 280 183 q 417 128 356 128 z "
+        },
+        "c": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 z "
+        },
+        "ć": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 240 792 l 240 901 l 514 1057 l 514 897 l 240 792 z "
+        },
+        "č": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 376 776 l 193 932 l 193 1042 l 376 926 l 560 1042 l 560 932 l 376 776 z "
+        },
+        "ç": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 388 -110 l 333 -89 q 366 -79 350 -83 q 401 -75 383 -75 q 497 -107 462 -75 q 532 -196 532 -138 q 486 -298 532 -263 q 375 -332 441 -332 q 309 -324 338 -332 q 261 -306 281 -316 l 288 -224 q 331 -241 310 -234 q 378 -247 353 -247 q 425 -236 407 -247 q 443 -201 443 -224 q 425 -165 443 -177 q 372 -153 408 -153 q 340 -155 356 -153 q 306 -162 324 -157 l 344 0 l 421 0 l 388 -110 z "
+        },
+        "ḉ": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 388 -110 l 333 -89 q 366 -79 350 -83 q 401 -75 383 -75 q 497 -107 462 -75 q 532 -196 532 -138 q 486 -298 532 -263 q 375 -332 441 -332 q 309 -324 338 -332 q 261 -306 281 -316 l 288 -224 q 331 -241 310 -234 q 378 -247 353 -247 q 425 -236 407 -247 q 443 -201 443 -224 q 425 -165 443 -177 q 372 -153 408 -153 q 340 -155 356 -153 q 306 -162 324 -157 l 344 0 l 421 0 l 388 -110 m 240 792 l 240 901 l 514 1057 l 514 897 l 240 792 z "
+        },
+        "ĉ": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 193 769 l 193 879 l 376 1035 l 560 879 l 560 769 l 376 885 l 193 769 z "
+        },
+        "ċ": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 304 836 l 304 971 l 449 971 l 449 836 l 304 836 z "
+        },
+        "d": {
+            "ha": 793,
+            "x_min": 39,
+            "x_max": 714,
+            "o": "m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 z "
+        },
+        "ð": {
+            "ha": 696,
+            "x_min": 22,
+            "x_max": 656,
+            "o": "m 336 -18 q 176 21 247 -18 q 64 128 105 60 q 22 285 22 197 q 55 430 22 360 q 153 546 88 501 q 317 592 219 592 q 436 565 393 592 q 511 510 479 539 l 483 482 q 449 657 480 579 q 351 792 419 735 q 171 882 284 849 l 200 974 q 400 890 315 945 q 542 755 485 834 q 627 576 599 676 q 656 358 656 476 q 626 174 656 247 q 550 59 597 101 q 446 0 502 17 q 336 -18 390 -18 m 339 122 q 450 171 412 122 q 489 288 489 220 q 450 406 489 356 q 335 457 411 457 q 252 433 285 457 q 202 370 219 410 q 186 285 186 331 q 224 171 186 219 q 339 122 261 122 m 224 681 l 171 768 l 538 972 l 589 885 l 224 681 z "
+        },
+        "ď": {
+            "ha": 886,
+            "x_min": 39,
+            "x_max": 914,
+            "o": "m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 m 776 796 l 776 1042 l 914 1042 l 874 796 l 776 796 z "
+        },
+        "đ": {
+            "ha": 799,
+            "x_min": 39,
+            "x_max": 811,
+            "o": "m 333 815 l 333 931 l 811 931 l 811 815 l 333 815 m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 z "
+        },
+        "ḍ": {
+            "ha": 793,
+            "x_min": 39,
+            "x_max": 714,
+            "o": "m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 z "
+        },
+        "ḏ": {
+            "ha": 793,
+            "x_min": 39,
+            "x_max": 714,
+            "o": "m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 z "
+        },
+        "dž": {
+            "ha": 1449,
+            "x_min": 39,
+            "x_max": 1428,
+            "o": "m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 z "
+        },
+        "e": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 z "
+        },
+        "é": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 254 792 l 254 901 l 528 1057 l 528 897 l 254 792 z "
+        },
+        "ĕ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 391 815 q 276 842 324 815 q 202 912 228 868 q 176 1008 176 956 l 294 1008 q 320 943 294 966 q 390 919 347 919 q 460 943 434 919 q 486 1008 486 966 l 604 1008 q 578 912 604 956 q 505 842 553 868 q 391 815 457 815 z "
+        },
+        "ě": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 z "
+        },
+        "ḝ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 367 -110 l 313 -89 q 345 -79 329 -83 q 381 -75 362 -75 q 476 -107 441 -75 q 511 -196 511 -138 q 466 -298 511 -263 q 354 -332 420 -332 q 289 -324 317 -332 q 240 -306 260 -316 l 267 -224 q 310 -241 289 -234 q 357 -247 332 -247 q 404 -236 386 -247 q 422 -201 422 -224 q 405 -165 422 -177 q 351 -153 387 -153 q 319 -155 335 -153 q 285 -162 303 -157 l 324 0 l 400 0 l 367 -110 m 391 815 q 276 842 324 815 q 202 912 228 868 q 176 1008 176 956 l 294 1008 q 320 943 294 966 q 390 919 347 919 q 460 943 434 919 q 486 1008 486 966 l 604 1008 q 578 912 604 956 q 505 842 553 868 q 391 815 457 815 z "
+        },
+        "ê": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 207 769 l 207 879 l 390 1035 l 574 879 l 574 769 l 390 885 l 207 769 z "
+        },
+        "ế": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 747,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 207 757 l 207 860 l 390 988 l 574 860 l 574 757 l 390 857 l 207 757 m 496 967 l 588 1143 l 747 1143 l 606 967 l 496 967 z "
+        },
+        "ệ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 207 769 l 207 879 l 390 1035 l 574 879 l 574 769 l 390 885 l 207 769 z "
+        },
+        "ề": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 207 757 l 207 860 l 390 988 l 574 860 l 574 757 l 390 857 l 207 757 m 526 967 l 413 1143 l 561 1143 l 632 967 l 526 967 z "
+        },
+        "ể": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 207 757 l 207 860 l 390 988 l 574 860 l 574 757 l 390 857 l 207 757 m 524 933 l 508 994 q 547 1011 533 1001 q 560 1042 560 1022 q 546 1071 560 1062 q 508 1081 533 1081 q 466 1073 488 1081 q 424 1054 444 1066 l 400 1139 q 453 1158 425 1151 q 511 1165 481 1165 q 609 1136 569 1165 q 649 1050 649 1106 q 618 974 649 1002 q 524 933 588 946 z "
+        },
+        "ễ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 207 757 l 207 860 l 390 988 l 574 860 l 574 757 l 390 857 l 207 757 m 511 1038 q 444 1052 479 1038 q 376 1081 409 1067 q 317 1096 343 1096 q 271 1047 271 1096 l 165 1047 q 191 1156 165 1118 q 269 1193 217 1193 q 336 1178 301 1193 q 405 1149 372 1164 q 464 1135 438 1135 q 510 1183 510 1135 l 615 1183 q 590 1076 615 1114 q 511 1038 565 1038 z "
+        },
+        "ȅ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 556 817 l 446 817 l 307 1063 l 467 1063 l 556 817 m 351 817 l 242 817 l 92 1063 l 251 1063 l 351 817 z "
+        },
+        "ë": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 464 821 l 464 946 l 597 946 l 597 821 l 464 821 m 183 821 l 183 946 l 317 946 l 317 821 l 183 821 z "
+        },
+        "ė": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 318 836 l 318 971 l 463 971 l 463 836 l 318 836 z "
+        },
+        "ẹ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 z "
+        },
+        "è": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 526 792 l 253 897 l 253 1057 l 526 901 l 526 792 z "
+        },
+        "ẻ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 413 742 l 361 793 q 404 836 388 817 q 419 881 419 856 q 406 914 419 903 q 368 925 392 925 q 326 918 347 925 q 283 899 304 910 l 260 983 q 313 1003 285 996 q 371 1010 341 1010 q 468 978 428 1010 q 508 886 508 946 q 483 808 508 840 q 413 742 458 775 z "
+        },
+        "ȇ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 391 1008 q 505 982 457 1008 q 578 912 553 956 q 604 815 604 868 l 486 815 q 460 881 486 858 q 390 904 434 904 q 320 881 347 904 q 294 815 294 858 l 176 815 q 202 912 176 868 q 276 982 228 956 q 391 1008 324 1008 z "
+        },
+        "ē": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 163 835 l 163 947 l 618 947 l 618 835 l 163 835 z "
+        },
+        "ḗ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 163 824 l 163 929 l 618 929 l 618 824 l 163 824 m 254 1015 l 254 1111 l 528 1243 l 528 1096 l 254 1015 z "
+        },
+        "ḕ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 163 824 l 163 929 l 618 929 l 618 824 l 163 824 m 526 1015 l 253 1096 l 253 1243 l 526 1111 l 526 1015 z "
+        },
+        "ę": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 714,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 561 39 l 647 39 q 570 -33 599 3 q 540 -106 540 -68 q 559 -153 540 -137 q 607 -169 577 -169 q 651 -164 631 -169 q 690 -150 671 -159 l 714 -226 q 663 -246 692 -237 q 593 -254 633 -254 q 492 -223 533 -254 q 451 -132 451 -191 q 487 -32 451 -76 q 561 39 523 12 z "
+        },
+        "ẽ": {
+            "ha": 715,
+            "x_min": 39,
+            "x_max": 678,
+            "o": "m 415 -14 q 206 36 290 -14 q 81 170 122 87 q 39 351 39 253 q 78 527 39 447 q 193 657 117 608 q 378 706 269 706 q 544 665 478 706 q 644 555 611 624 q 678 404 678 487 q 675 358 678 381 q 667 310 672 335 l 218 310 q 259 205 228 245 q 334 147 290 165 q 431 128 379 128 q 543 143 491 128 q 639 185 595 159 l 647 39 q 549 2 608 18 q 415 -14 490 -14 m 222 426 l 503 426 q 491 489 503 458 q 452 542 479 521 q 378 564 424 564 q 273 525 311 564 q 222 426 235 486 m 508 803 q 441 818 474 803 q 378 849 408 833 q 318 864 347 864 q 271 814 271 864 l 153 814 q 186 939 156 895 q 272 982 216 982 q 340 967 307 982 q 403 936 372 951 q 463 921 433 921 q 510 971 510 921 l 628 971 q 595 846 625 890 q 508 803 565 803 z "
+        },
+        "ə": {
+            "ha": 715,
+            "x_min": 38,
+            "x_max": 676,
+            "o": "m 300 708 q 509 658 426 708 q 635 525 593 608 q 676 343 676 442 q 637 167 676 248 q 522 38 598 87 q 338 -11 447 -11 q 171 30 238 -11 q 71 139 104 71 q 38 290 38 208 q 40 336 38 313 q 49 385 43 360 l 497 385 q 457 489 488 449 q 381 548 426 529 q 285 567 336 567 q 172 551 224 567 q 76 510 120 535 l 68 656 q 167 692 108 676 q 300 708 226 708 m 493 268 l 213 268 q 224 205 213 237 q 264 152 236 174 q 338 131 291 131 q 442 169 404 131 q 493 268 481 208 z "
+        },
+        "f": {
+            "ha": 472,
+            "x_min": 24,
+            "x_max": 447,
+            "o": "m 122 0 l 122 553 l 24 553 l 39 694 l 122 694 l 122 842 q 177 988 122 933 q 333 1042 231 1042 q 395 1038 367 1042 q 446 1029 423 1035 l 431 890 q 408 895 420 894 q 376 897 395 897 q 317 877 339 897 q 294 811 294 857 l 294 694 l 447 694 l 447 553 l 294 553 l 294 0 l 122 0 z "
+        },
+        "g": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 z "
+        },
+        "ğ": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 m 349 815 q 235 842 283 815 q 161 912 187 868 q 135 1008 135 956 l 253 1008 q 279 943 253 966 q 349 919 305 919 q 418 943 392 919 q 444 1008 444 966 l 563 1008 q 537 912 563 956 q 463 842 511 868 q 349 815 415 815 z "
+        },
+        "ǧ": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 m 349 776 l 165 932 l 165 1042 l 349 926 l 532 1042 l 532 932 l 349 776 z "
+        },
+        "ĝ": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 m 165 769 l 165 879 l 349 1035 l 532 879 l 532 769 l 349 885 l 165 769 z "
+        },
+        "ģ": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 z "
+        },
+        "ġ": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 m 276 836 l 276 971 l 421 971 l 421 836 l 276 836 z "
+        },
+        "ḡ": {
+            "ha": 696,
+            "x_min": 33,
+            "x_max": 693,
+            "o": "m 356 -350 q 186 -326 258 -350 q 73 -258 113 -302 q 33 -151 33 -213 q 62 -59 33 -99 q 146 13 91 -18 q 101 54 118 29 q 85 111 85 79 q 104 169 85 144 q 154 208 123 194 q 74 305 101 246 q 47 432 47 363 q 80 570 47 507 q 175 670 113 633 q 329 708 238 708 q 416 697 376 708 q 488 664 456 685 q 548 685 508 676 q 636 694 588 694 q 659 694 648 694 q 681 694 669 694 l 669 586 q 639 586 654 586 q 607 586 623 586 q 590 586 601 586 q 568 585 580 586 q 599 513 589 553 q 610 432 610 474 q 577 294 610 357 q 483 193 545 231 q 329 156 420 156 q 292 158 310 156 q 256 165 274 161 q 240 143 240 159 q 263 115 240 124 q 335 97 286 105 l 454 82 q 630 19 566 67 q 693 -119 693 -30 q 653 -241 693 -189 q 538 -321 613 -292 q 356 -350 462 -350 m 363 -219 q 495 -198 450 -219 q 540 -132 540 -176 q 509 -74 540 -92 q 408 -44 477 -55 l 256 -22 q 199 -59 222 -35 q 176 -119 176 -82 q 226 -195 176 -170 q 363 -219 275 -219 m 329 283 q 423 324 391 283 q 454 432 454 365 q 423 540 454 500 q 329 581 391 581 q 235 540 267 581 q 203 432 203 500 q 235 324 203 365 q 329 283 267 283 m 121 835 l 121 947 l 576 947 l 576 835 l 121 835 z "
+        },
+        "h": {
+            "ha": 765,
+            "x_min": 79,
+            "x_max": 692,
+            "o": "m 79 0 l 79 1042 l 251 1042 l 251 593 l 213 624 q 308 680 256 654 q 431 706 359 706 q 580 665 522 706 q 665 552 638 624 q 692 386 692 481 l 692 0 l 519 0 l 519 374 q 488 517 519 471 q 386 564 457 564 q 287 536 326 564 q 219 460 249 508 l 251 553 l 251 0 l 79 0 z "
+        },
+        "ħ": {
+            "ha": 771,
+            "x_min": -12,
+            "x_max": 697,
+            "o": "m 85 0 l 85 1042 l 257 1042 l 257 596 l 218 624 q 313 680 262 654 q 436 706 365 706 q 585 665 528 706 q 670 552 643 624 q 697 386 697 481 l 697 0 l 525 0 l 525 374 q 494 517 525 471 q 392 564 463 564 q 293 536 331 564 q 225 460 254 508 l 257 553 l 257 0 l 85 0 m -12 815 l -12 931 l 465 931 l 465 815 l -12 815 z "
+        },
+        "ḫ": {
+            "ha": 765,
+            "x_min": 79,
+            "x_max": 692,
+            "o": "m 79 0 l 79 1042 l 251 1042 l 251 593 l 213 624 q 308 680 256 654 q 431 706 359 706 q 580 665 522 706 q 665 552 638 624 q 692 386 692 481 l 692 0 l 519 0 l 519 374 q 488 517 519 471 q 386 564 457 564 q 287 536 326 564 q 219 460 249 508 l 251 553 l 251 0 l 79 0 z "
+        },
+        "ĥ": {
+            "ha": 765,
+            "x_min": -18,
+            "x_max": 692,
+            "o": "m 79 0 l 79 1042 l 251 1042 l 251 593 l 213 624 q 308 680 256 654 q 431 706 359 706 q 580 665 522 706 q 665 552 638 624 q 692 386 692 481 l 692 0 l 519 0 l 519 374 q 488 517 519 471 q 386 564 457 564 q 287 536 326 564 q 219 460 249 508 l 251 553 l 251 0 l 79 0 m -18 1090 l -18 1193 l 165 1321 l 349 1193 l 349 1090 l 165 1190 l -18 1090 z "
+        },
+        "ḥ": {
+            "ha": 765,
+            "x_min": 79,
+            "x_max": 692,
+            "o": "m 79 0 l 79 1042 l 251 1042 l 251 593 l 213 624 q 308 680 256 654 q 431 706 359 706 q 580 665 522 706 q 665 552 638 624 q 692 386 692 481 l 692 0 l 519 0 l 519 374 q 488 517 519 471 q 386 564 457 564 q 287 536 326 564 q 219 460 249 508 l 251 553 l 251 0 l 79 0 z "
+        },
+        "i": {
+            "ha": 333,
+            "x_min": 81,
+            "x_max": 253,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 81 800 l 81 972 l 253 972 l 253 800 l 81 800 z "
+        },
+        "ı": {
+            "ha": 333,
+            "x_min": 81,
+            "x_max": 253,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 z "
+        },
+        "í": {
+            "ha": 333,
+            "x_min": 31,
+            "x_max": 304,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 31 792 l 31 901 l 304 1057 l 304 897 l 31 792 z "
+        },
+        "ĭ": {
+            "ha": 333,
+            "x_min": -47,
+            "x_max": 381,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 167 815 q 53 842 101 815 q -21 912 5 868 q -47 1008 -47 956 l 71 1008 q 97 943 71 966 q 167 919 123 919 q 236 943 210 919 q 263 1008 263 966 l 381 1008 q 355 912 381 956 q 281 842 329 868 q 167 815 233 815 z "
+        },
+        "î": {
+            "ha": 333,
+            "x_min": -17,
+            "x_max": 350,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m -17 769 l -17 879 l 167 1035 l 350 879 l 350 769 l 167 885 l -17 769 z "
+        },
+        "ȉ": {
+            "ha": 333,
+            "x_min": -132,
+            "x_max": 332,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 332 817 l 222 817 l 83 1063 l 243 1063 l 332 817 m 128 817 l 18 817 l -132 1063 l 28 1063 l 128 817 z "
+        },
+        "ï": {
+            "ha": 333,
+            "x_min": -40,
+            "x_max": 374,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 240 821 l 240 946 l 374 946 l 374 821 l 240 821 m -40 821 l -40 946 l 93 946 l 93 821 l -40 821 z "
+        },
+        "ḯ": {
+            "ha": 333,
+            "x_min": -40,
+            "x_max": 374,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m -40 810 l -40 929 l 93 929 l 93 810 l -40 810 m 240 810 l 240 929 l 374 929 l 374 810 l 240 810 m 31 985 l 31 1081 l 304 1213 l 304 1065 l 31 985 z "
+        },
+        "ị": {
+            "ha": 333,
+            "x_min": 81,
+            "x_max": 253,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 81 800 l 81 972 l 253 972 l 253 800 l 81 800 z "
+        },
+        "ì": {
+            "ha": 333,
+            "x_min": 29,
+            "x_max": 303,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 303 792 l 29 897 l 29 1057 l 303 901 l 303 792 z "
+        },
+        "ỉ": {
+            "ha": 333,
+            "x_min": 36,
+            "x_max": 285,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 189 742 l 138 793 q 180 836 165 817 q 196 881 196 856 q 182 914 196 903 q 144 925 169 925 q 102 918 124 925 q 60 899 81 910 l 36 983 q 89 1003 61 996 q 147 1010 117 1010 q 245 978 205 1010 q 285 886 285 946 q 260 808 285 840 q 189 742 235 775 z "
+        },
+        "ȋ": {
+            "ha": 333,
+            "x_min": -47,
+            "x_max": 381,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 167 1008 q 281 982 233 1008 q 355 912 329 956 q 381 815 381 868 l 263 815 q 236 881 263 858 q 167 904 210 904 q 97 881 123 904 q 71 815 71 858 l -47 815 q -21 912 -47 868 q 53 982 5 956 q 167 1008 101 1008 z "
+        },
+        "ij": {
+            "ha": 667,
+            "x_min": 81,
+            "x_max": 586,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 81 800 l 81 972 l 253 972 l 253 800 l 81 800 m 346 -336 l 331 -194 q 381 -184 363 -194 q 407 -150 399 -174 q 414 -83 414 -126 l 414 694 l 586 694 l 586 -154 q 565 -266 586 -227 q 501 -321 543 -306 q 400 -336 460 -336 l 346 -336 m 414 800 l 414 972 l 586 972 l 586 800 l 414 800 z "
+        },
+        "ī": {
+            "ha": 333,
+            "x_min": -61,
+            "x_max": 394,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m -61 835 l -61 947 l 394 947 l 394 835 l -61 835 z "
+        },
+        "į": {
+            "ha": 333,
+            "x_min": 57,
+            "x_max": 319,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 81 800 l 81 972 l 253 972 l 253 800 l 81 800 m 167 0 l 253 0 q 175 -72 205 -36 q 146 -144 146 -107 q 164 -192 146 -176 q 213 -208 183 -208 q 257 -203 237 -208 q 296 -189 276 -198 l 319 -265 q 268 -285 298 -276 q 199 -293 238 -293 q 98 -261 138 -293 q 57 -171 57 -230 q 93 -71 57 -115 q 167 0 128 -27 z "
+        },
+        "ĩ": {
+            "ha": 333,
+            "x_min": -71,
+            "x_max": 404,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 0 l 81 0 m 285 803 q 217 818 250 803 q 154 849 185 833 q 94 864 124 864 q 47 814 47 864 l -71 814 q -37 939 -67 895 q 49 982 -8 982 q 116 967 83 982 q 179 936 149 951 q 239 921 210 921 q 286 971 286 921 l 404 971 q 371 846 401 890 q 285 803 341 803 z "
+        },
+        "j": {
+            "ha": 333,
+            "x_min": -3,
+            "x_max": 253,
+            "o": "m 13 -336 l -3 -194 q 48 -184 30 -194 q 73 -150 66 -174 q 81 -83 81 -126 l 81 694 l 253 694 l 253 -154 q 231 -266 253 -227 q 168 -321 210 -306 q 67 -336 126 -336 l 13 -336 m 81 800 l 81 972 l 253 972 l 253 800 l 81 800 z "
+        },
+        "ȷ": {
+            "ha": 333,
+            "x_min": -3,
+            "x_max": 253,
+            "o": "m 13 -336 l -3 -194 q 52 -190 34 -194 q 75 -161 69 -185 q 81 -83 81 -138 l 81 694 l 253 694 l 253 -154 q 234 -245 253 -204 q 176 -311 215 -287 q 75 -336 137 -336 l 13 -336 z "
+        },
+        "ĵ": {
+            "ha": 333,
+            "x_min": -17,
+            "x_max": 350,
+            "o": "m 13 -336 l -3 -194 q 52 -190 34 -194 q 75 -161 69 -185 q 81 -83 81 -138 l 81 694 l 253 694 l 253 -154 q 234 -245 253 -204 q 176 -311 215 -287 q 75 -336 137 -336 l 13 -336 m -17 769 l -17 879 l 167 1035 l 350 879 l 350 769 l 167 885 l -17 769 z "
+        },
+        "k": {
+            "ha": 674,
+            "x_min": 79,
+            "x_max": 667,
+            "o": "m 79 0 l 79 1042 l 251 1042 l 251 410 l 467 694 l 661 694 l 408 361 l 667 0 l 472 0 l 251 308 l 251 0 l 79 0 z "
+        },
+        "ķ": {
+            "ha": 674,
+            "x_min": 79,
+            "x_max": 667,
+            "o": "m 79 0 l 79 1042 l 251 1042 l 251 410 l 467 694 l 661 694 l 408 361 l 667 0 l 472 0 l 251 308 l 251 0 l 79 0 m 364 -436 l 290 -436 l 343 -283 l 279 -283 l 279 -126 l 450 -126 l 450 -267 l 364 -436 z "
+        },
+        "ĸ": {
+            "ha": 718,
+            "x_min": 81,
+            "x_max": 710,
+            "o": "m 81 0 l 81 694 l 253 694 l 253 406 l 515 694 l 710 694 l 392 361 l 710 0 l 515 0 l 253 304 l 253 0 l 81 0 z "
+        },
+        "l": {
+            "ha": 365,
+            "x_min": 81,
+            "x_max": 336,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 z "
+        },
+        "ĺ": {
+            "ha": 365,
+            "x_min": 31,
+            "x_max": 336,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 m 31 1124 l 31 1219 l 304 1351 l 304 1204 l 31 1124 z "
+        },
+        "ľ": {
+            "ha": 433,
+            "x_min": 81,
+            "x_max": 453,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 m 315 796 l 315 1042 l 453 1042 l 413 796 l 315 796 z "
+        },
+        "ļ": {
+            "ha": 365,
+            "x_min": 81,
+            "x_max": 336,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 m 225 -436 l 151 -436 l 204 -283 l 140 -283 l 140 -126 l 311 -126 l 311 -267 l 225 -436 z "
+        },
+        "ŀ": {
+            "ha": 450,
+            "x_min": 81,
+            "x_max": 464,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 m 319 493 l 319 660 l 464 660 l 464 493 l 319 493 z "
+        },
+        "ḷ": {
+            "ha": 365,
+            "x_min": 81,
+            "x_max": 336,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 z "
+        },
+        "lj": {
+            "ha": 699,
+            "x_min": 81,
+            "x_max": 618,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 m 378 -336 l 363 -194 q 413 -184 395 -194 q 439 -150 431 -174 q 446 -83 446 -126 l 446 694 l 618 694 l 618 -154 q 597 -266 618 -227 q 533 -321 575 -306 q 432 -336 492 -336 l 378 -336 m 446 800 l 446 972 l 618 972 l 618 800 l 446 800 z "
+        },
+        "ḻ": {
+            "ha": 365,
+            "x_min": -4,
+            "x_max": 451,
+            "o": "m 258 -14 q 157 11 197 -14 q 99 77 118 35 q 81 168 81 118 l 81 1042 l 253 1042 l 253 239 q 259 160 253 183 q 284 132 266 137 q 336 128 302 128 l 321 -14 l 258 -14 z "
+        },
+        "ł": {
+            "ha": 357,
+            "x_min": -28,
+            "x_max": 343,
+            "o": "m 239 -14 q 138 11 177 -14 q 80 77 99 35 q 61 168 61 118 l 61 1042 l 233 1042 l 233 239 q 240 160 233 183 q 265 132 247 137 q 317 128 283 128 l 301 -14 l 239 -14 m -28 528 l -28 649 l 343 744 l 343 624 l -28 528 z "
+        },
+        "m": {
+            "ha": 1207,
+            "x_min": 81,
+            "x_max": 1133,
+            "o": "m 81 0 l 81 694 l 228 694 l 239 593 l 214 624 q 309 680 253 655 q 438 706 364 706 q 536 689 493 706 q 609 643 578 673 q 658 571 640 613 l 617 581 q 714 673 650 640 q 860 706 778 706 q 1016 666 956 706 q 1105 555 1076 626 q 1133 386 1133 483 l 1133 0 l 961 0 l 961 374 q 931 517 961 471 q 831 564 901 564 q 770 552 796 564 q 727 516 744 540 q 701 460 710 493 q 693 386 693 427 l 693 0 l 521 0 l 521 374 q 507 481 521 438 q 464 543 494 523 q 388 564 435 564 q 289 536 327 564 q 221 460 250 508 l 253 553 l 253 0 l 81 0 z "
+        },
+        "ṃ": {
+            "ha": 1207,
+            "x_min": 81,
+            "x_max": 1133,
+            "o": "m 81 0 l 81 694 l 228 694 l 239 593 l 214 624 q 309 680 253 655 q 438 706 364 706 q 536 689 493 706 q 609 643 578 673 q 658 571 640 613 l 617 581 q 714 673 650 640 q 860 706 778 706 q 1016 666 956 706 q 1105 555 1076 626 q 1133 386 1133 483 l 1133 0 l 961 0 l 961 374 q 931 517 961 471 q 831 564 901 564 q 770 552 796 564 q 727 516 744 540 q 701 460 710 493 q 693 386 693 427 l 693 0 l 521 0 l 521 374 q 507 481 521 438 q 464 543 494 523 q 388 564 435 564 q 289 536 327 564 q 221 460 250 508 l 253 553 l 253 0 l 81 0 z "
+        },
+        "n": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 z "
+        },
+        "ń": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 m 271 778 l 271 888 l 544 1043 l 544 883 l 271 778 z "
+        },
+        "ʼn": {
+            "ha": 969,
+            "x_min": 58,
+            "x_max": 896,
+            "o": "m 283 0 l 283 694 l 444 694 l 451 565 l 411 618 q 506 678 451 651 q 633 706 560 706 q 831 617 767 706 q 896 388 896 528 l 896 0 l 724 0 l 724 374 q 691 517 724 471 q 586 564 659 564 q 490 535 527 564 q 424 458 452 506 l 456 543 l 456 0 l 283 0 z "
+        },
+        "ň": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 m 407 763 l 224 918 l 224 1028 l 407 913 l 590 1028 l 590 918 l 407 763 z "
+        },
+        "ņ": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 m 389 -436 l 315 -436 l 368 -283 l 304 -283 l 304 -126 l 475 -126 l 475 -267 l 389 -436 z "
+        },
+        "ṅ": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 m 335 822 l 335 957 l 479 957 l 479 822 l 335 822 z "
+        },
+        "ṇ": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 z "
+        },
+        "ŋ": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 693 24 q 656 -128 693 -68 q 552 -219 618 -189 q 403 -249 487 -249 q 345 -244 374 -249 q 290 -233 317 -240 l 308 -94 q 401 -107 354 -107 q 488 -78 455 -107 q 521 10 521 -49 l 521 374 q 489 517 521 471 q 383 564 456 564 q 308 548 340 564 q 253 504 277 533 l 253 0 l 81 0 l 81 694 l 242 694 l 244 646 q 327 688 281 671 q 431 706 374 706 q 628 617 564 706 q 693 388 693 528 l 693 24 z "
+        },
+        "nj": {
+            "ha": 1100,
+            "x_min": 81,
+            "x_max": 1019,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 m 779 -336 l 764 -194 q 815 -184 797 -194 q 840 -150 833 -174 q 847 -83 847 -126 l 847 694 l 1019 694 l 1019 -154 q 998 -266 1019 -227 q 935 -321 976 -306 q 833 -336 893 -336 l 779 -336 m 847 800 l 847 972 l 1019 972 l 1019 800 l 847 800 z "
+        },
+        "ṉ": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 z "
+        },
+        "ñ": {
+            "ha": 767,
+            "x_min": 81,
+            "x_max": 693,
+            "o": "m 81 0 l 81 694 l 242 694 l 249 565 l 208 618 q 303 678 248 651 q 431 706 358 706 q 628 617 564 706 q 693 388 693 528 l 693 0 l 521 0 l 521 374 q 489 517 521 471 q 383 564 456 564 q 287 535 324 564 q 221 458 249 506 l 253 543 l 253 0 l 81 0 m 525 789 q 458 804 490 789 q 394 835 425 819 q 335 850 364 850 q 288 800 288 850 l 169 800 q 203 925 173 881 q 289 968 233 968 q 356 953 324 968 q 419 922 389 938 q 479 907 450 907 q 526 957 526 907 l 644 957 q 611 832 642 876 q 525 789 581 789 z "
+        },
+        "o": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 z "
+        },
+        "ó": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 260 792 l 260 901 l 533 1057 l 533 897 l 260 792 z "
+        },
+        "ŏ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 397 815 q 282 842 330 815 q 208 912 234 868 q 182 1008 182 956 l 300 1008 q 326 943 300 966 q 396 919 352 919 q 466 943 440 919 q 492 1008 492 966 l 610 1008 q 584 912 610 956 q 510 842 558 868 q 397 815 463 815 z "
+        },
+        "ô": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 213 769 l 213 879 l 396 1035 l 579 879 l 579 769 l 396 885 l 213 769 z "
+        },
+        "ố": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 213 757 l 213 860 l 396 988 l 579 860 l 579 757 l 396 857 l 213 757 m 501 967 l 593 1143 l 753 1143 l 611 967 l 501 967 z "
+        },
+        "ộ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 213 769 l 213 879 l 396 1035 l 579 879 l 579 769 l 396 885 l 213 769 z "
+        },
+        "ồ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 213 757 l 213 860 l 396 988 l 579 860 l 579 757 l 396 857 l 213 757 m 532 967 l 418 1143 l 567 1143 l 638 967 l 532 967 z "
+        },
+        "ổ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 213 757 l 213 860 l 396 988 l 579 860 l 579 757 l 396 857 l 213 757 m 529 933 l 514 994 q 552 1011 539 1001 q 565 1042 565 1022 q 552 1071 565 1062 q 514 1081 538 1081 q 472 1073 493 1081 q 429 1054 450 1066 l 406 1139 q 459 1158 431 1151 q 517 1165 487 1165 q 614 1136 574 1165 q 654 1050 654 1106 q 624 974 654 1002 q 529 933 594 946 z "
+        },
+        "ỗ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 213 757 l 213 860 l 396 988 l 579 860 l 579 757 l 396 857 l 213 757 m 517 1038 q 450 1052 485 1038 q 382 1081 415 1067 q 322 1096 349 1096 q 276 1047 276 1096 l 171 1047 q 197 1156 171 1118 q 275 1193 222 1193 q 342 1178 307 1193 q 410 1149 377 1164 q 469 1135 443 1135 q 515 1183 515 1135 l 621 1183 q 595 1076 621 1114 q 517 1038 570 1038 z "
+        },
+        "ȍ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 561 817 l 451 817 l 313 1063 l 472 1063 l 561 817 m 357 817 l 247 817 l 97 1063 l 257 1063 l 357 817 z "
+        },
+        "ö": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 469 821 l 469 946 l 603 946 l 603 821 l 469 821 m 189 821 l 189 946 l 322 946 l 322 821 l 189 821 z "
+        },
+        "ȫ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 189 810 l 189 929 l 322 929 l 322 810 l 189 810 m 469 810 l 469 929 l 603 929 l 603 810 l 469 810 m 168 1032 l 168 1138 l 624 1138 l 624 1032 l 168 1032 z "
+        },
+        "ȱ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 324 822 l 324 957 l 468 957 l 468 822 l 324 822 m 168 1074 l 168 1179 l 624 1179 l 624 1074 l 168 1074 z "
+        },
+        "ọ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 z "
+        },
+        "ò": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 532 792 l 258 897 l 258 1057 l 532 901 l 532 792 z "
+        },
+        "ỏ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 418 742 l 367 793 q 409 836 394 817 q 425 881 425 856 q 411 914 425 903 q 374 925 398 925 q 331 918 353 925 q 289 899 310 910 l 265 983 q 318 1003 290 996 q 376 1010 347 1010 q 474 978 434 1010 q 514 886 514 946 q 489 808 514 840 q 418 742 464 775 z "
+        },
+        "ơ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 489 581 l 489 694 q 570 718 541 694 q 600 797 600 742 l 747 797 q 710 682 747 731 q 613 607 672 633 q 489 581 554 581 z "
+        },
+        "ớ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 489 581 l 489 694 q 570 718 541 694 q 600 797 600 742 l 747 797 q 710 682 747 731 q 613 607 672 633 q 489 581 554 581 m 260 792 l 260 901 l 533 1057 l 533 897 l 260 792 z "
+        },
+        "ợ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 489 581 l 489 694 q 570 718 541 694 q 600 797 600 742 l 747 797 q 710 682 747 731 q 613 607 672 633 q 489 581 554 581 z "
+        },
+        "ờ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 489 581 l 489 694 q 570 718 541 694 q 600 797 600 742 l 747 797 q 710 682 747 731 q 613 607 672 633 q 489 581 554 581 m 532 792 l 258 897 l 258 1057 l 532 901 l 532 792 z "
+        },
+        "ở": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 489 581 l 489 694 q 570 718 541 694 q 600 797 600 742 l 747 797 q 710 682 747 731 q 613 607 672 633 q 489 581 554 581 m 418 742 l 367 793 q 409 836 394 817 q 425 881 425 856 q 411 914 425 903 q 374 925 398 925 q 331 918 353 925 q 289 899 310 910 l 265 983 q 318 1003 290 996 q 376 1010 347 1010 q 474 978 434 1010 q 514 886 514 946 q 489 808 514 840 q 418 742 464 775 z "
+        },
+        "ỡ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 489 581 l 489 694 q 570 718 541 694 q 600 797 600 742 l 747 797 q 710 682 747 731 q 613 607 672 633 q 489 581 554 581 m 514 803 q 447 818 479 803 q 383 849 414 833 q 324 864 353 864 q 276 814 276 864 l 158 814 q 192 939 162 895 q 278 982 222 982 q 345 967 313 982 q 408 936 378 951 q 468 921 439 921 q 515 971 515 921 l 633 971 q 600 846 631 890 q 514 803 570 803 z "
+        },
+        "ő": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 438 817 l 554 1063 l 714 1063 l 547 817 l 438 817 m 233 817 l 339 1063 l 499 1063 l 343 817 l 233 817 z "
+        },
+        "ȏ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 397 1008 q 510 982 463 1008 q 584 912 558 956 q 610 815 610 868 l 492 815 q 466 881 492 858 q 396 904 440 904 q 326 881 352 904 q 300 815 300 858 l 182 815 q 208 912 182 868 q 282 982 234 956 q 397 1008 330 1008 z "
+        },
+        "ō": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 168 835 l 168 947 l 624 947 l 624 835 l 168 835 z "
+        },
+        "ṓ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 168 824 l 168 929 l 624 929 l 624 824 l 168 824 m 260 1015 l 260 1111 l 533 1243 l 533 1096 l 260 1015 z "
+        },
+        "ṑ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 168 824 l 168 929 l 624 929 l 624 824 l 168 824 m 532 1015 l 258 1096 l 258 1243 l 532 1111 l 532 1015 z "
+        },
+        "ǫ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 410 0 l 496 0 q 418 -72 448 -36 q 389 -144 389 -107 q 407 -192 389 -176 q 456 -208 426 -208 q 500 -203 480 -208 q 539 -189 519 -198 l 563 -265 q 511 -285 541 -276 q 442 -293 481 -293 q 341 -261 381 -293 q 300 -171 300 -230 q 336 -71 300 -115 q 410 0 372 -27 z "
+        },
+        "ø": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 600 736 l 719 736 l 192 -56 l 72 -56 l 600 736 m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 z "
+        },
+        "ǿ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 600 736 l 719 736 l 192 -56 l 72 -56 l 600 736 m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 260 792 l 260 901 l 533 1057 l 533 897 l 260 792 z "
+        },
+        "õ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 514 803 q 447 818 479 803 q 383 849 414 833 q 324 864 353 864 q 276 814 276 864 l 158 814 q 192 939 162 895 q 278 982 222 982 q 345 967 313 982 q 408 936 378 951 q 468 921 439 921 q 515 971 515 921 l 633 971 q 600 846 631 890 q 514 803 570 803 z "
+        },
+        "ṍ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 517 801 q 450 816 485 801 q 382 845 415 831 q 322 860 349 860 q 276 811 276 860 l 171 811 q 197 919 171 882 q 275 957 222 957 q 342 942 307 957 q 410 913 377 928 q 469 899 443 899 q 515 947 515 899 l 621 947 q 595 840 621 878 q 517 801 570 801 m 260 1004 l 260 1100 l 533 1232 l 533 1085 l 260 1004 z "
+        },
+        "ṏ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 517 801 q 450 816 485 801 q 382 845 415 831 q 322 860 349 860 q 276 811 276 860 l 171 811 q 197 919 171 882 q 275 957 222 957 q 342 942 307 957 q 410 913 377 928 q 469 899 443 899 q 515 947 515 899 l 621 947 q 595 840 621 878 q 517 801 570 801 m 189 1038 l 189 1157 l 322 1157 l 322 1038 l 189 1038 m 469 1038 l 469 1157 l 603 1157 l 603 1038 l 469 1038 z "
+        },
+        "ȭ": {
+            "ha": 792,
+            "x_min": 39,
+            "x_max": 753,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 589 659 509 708 q 711 526 669 609 q 753 346 753 444 q 711 167 753 249 q 589 35 669 85 q 396 -14 509 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 517 801 q 450 816 485 801 q 382 845 415 831 q 322 860 349 860 q 276 811 276 860 l 171 811 q 197 919 171 882 q 275 957 222 957 q 342 942 307 957 q 410 913 377 928 q 469 899 443 899 q 515 947 515 899 l 621 947 q 595 840 621 878 q 517 801 570 801 m 168 1051 l 168 1157 l 624 1157 l 624 1051 l 168 1051 z "
+        },
+        "œ": {
+            "ha": 1243,
+            "x_min": 39,
+            "x_max": 1206,
+            "o": "m 396 -14 q 203 35 283 -14 q 81 167 123 85 q 39 346 39 249 q 81 526 39 444 q 203 659 123 609 q 396 708 283 708 q 566 666 494 708 q 682 553 638 624 l 633 553 q 743 664 674 622 q 906 706 812 706 q 1072 665 1006 706 q 1172 555 1139 624 q 1206 404 1206 487 q 1203 358 1206 381 q 1194 310 1200 335 l 746 310 q 788 205 756 245 q 863 147 819 165 q 953 128 907 128 q 1063 145 1002 128 q 1167 185 1124 162 l 1175 39 q 1076 2 1135 18 q 943 -14 1017 -14 q 754 32 832 -14 q 632 151 676 78 l 688 151 q 571 32 645 78 q 396 -14 497 -14 m 396 128 q 530 189 483 128 q 576 346 576 249 q 530 505 576 444 q 396 567 483 567 q 263 505 310 567 q 215 346 215 444 q 263 189 215 249 q 396 128 310 128 m 750 426 l 1031 426 q 1019 489 1031 458 q 980 542 1007 521 q 906 564 952 564 q 801 525 839 564 q 750 426 763 486 z "
+        },
+        "p": {
+            "ha": 794,
+            "x_min": 81,
+            "x_max": 756,
+            "o": "m 81 -336 l 81 694 l 219 694 l 253 579 l 201 597 q 306 676 249 647 q 443 706 362 706 q 615 656 545 706 q 720 525 684 607 q 756 346 756 443 q 720 167 756 249 q 615 35 684 85 q 443 -14 545 -14 q 311 8 362 -14 q 208 79 260 31 l 253 114 l 253 -336 l 81 -336 m 417 128 q 536 189 494 128 q 579 346 579 249 q 536 503 579 443 q 417 564 494 564 q 319 536 357 564 q 263 459 281 508 q 244 346 244 410 q 263 232 244 281 q 319 156 281 183 q 417 128 357 128 z "
+        },
+        "þ": {
+            "ha": 808,
+            "x_min": 81,
+            "x_max": 769,
+            "o": "m 81 -336 l 81 1042 l 253 1042 l 253 579 l 211 613 q 312 681 261 656 q 444 706 363 706 q 623 656 551 706 q 732 525 695 607 q 769 346 769 443 q 732 167 769 249 q 623 35 695 85 q 444 -14 551 -14 q 314 11 363 -14 q 208 82 264 36 l 253 114 l 253 -336 l 81 -336 m 422 128 q 548 189 503 128 q 593 346 593 249 q 548 503 593 443 q 422 564 503 564 q 321 536 360 564 q 263 459 282 508 q 244 346 244 410 q 263 232 244 281 q 321 156 282 183 q 422 128 360 128 z "
+        },
+        "q": {
+            "ha": 794,
+            "x_min": 39,
+            "x_max": 714,
+            "o": "m 542 -336 l 542 114 l 586 82 q 489 11 542 36 q 358 -14 435 -14 q 183 35 254 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 183 656 112 607 q 358 706 254 706 q 495 676 439 706 q 593 597 551 647 l 542 579 l 582 694 l 714 694 l 714 -336 l 542 -336 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 511 503 550 443 q 386 564 472 564 q 260 503 305 564 q 215 346 215 443 q 260 189 215 249 q 386 128 305 128 z "
+        },
+        "r": {
+            "ha": 458,
+            "x_min": 81,
+            "x_max": 456,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 z "
+        },
+        "ŕ": {
+            "ha": 458,
+            "x_min": 81,
+            "x_max": 456,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 m 165 792 l 165 901 l 439 1057 l 439 897 l 165 792 z "
+        },
+        "ř": {
+            "ha": 458,
+            "x_min": 81,
+            "x_max": 485,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 m 301 776 l 118 932 l 118 1042 l 301 926 l 485 1042 l 485 932 l 301 776 z "
+        },
+        "ŗ": {
+            "ha": 458,
+            "x_min": 81,
+            "x_max": 456,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 m 168 -436 l 94 -436 l 147 -283 l 83 -283 l 83 -126 l 254 -126 l 254 -267 l 168 -436 z "
+        },
+        "ȑ": {
+            "ha": 458,
+            "x_min": 3,
+            "x_max": 467,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 m 467 817 l 357 817 l 218 1063 l 378 1063 l 467 817 m 263 817 l 153 817 l 3 1063 l 163 1063 l 263 817 z "
+        },
+        "ṛ": {
+            "ha": 458,
+            "x_min": 81,
+            "x_max": 456,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 z "
+        },
+        "ȓ": {
+            "ha": 458,
+            "x_min": 81,
+            "x_max": 515,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 m 302 1008 q 416 982 368 1008 q 490 912 464 956 q 515 815 515 868 l 397 815 q 371 881 397 858 q 301 904 345 904 q 232 881 258 904 q 206 815 206 858 l 88 815 q 114 912 88 868 q 188 982 140 956 q 302 1008 235 1008 z "
+        },
+        "ṟ": {
+            "ha": 458,
+            "x_min": -61,
+            "x_max": 456,
+            "o": "m 81 0 l 81 694 l 242 694 l 246 621 q 320 679 272 650 q 425 708 368 708 q 456 706 442 708 l 443 536 q 413 542 428 540 q 383 543 398 543 q 303 523 340 543 q 253 474 267 503 l 253 0 l 81 0 z "
+        },
+        "s": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 z "
+        },
+        "ś": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 169 792 l 169 901 l 443 1057 l 443 897 l 169 792 z "
+        },
+        "ṥ": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 169 776 l 169 872 l 443 1004 l 443 857 l 169 776 m 233 1061 l 233 1196 l 378 1196 l 378 1061 l 233 1061 z "
+        },
+        "š": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 306 776 l 122 932 l 122 1042 l 306 926 l 489 1042 l 489 932 l 306 776 z "
+        },
+        "ṧ": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 233 1079 l 233 1214 l 378 1214 l 378 1079 l 233 1079 z "
+        },
+        "ş": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 297 -110 l 243 -89 q 276 -79 260 -83 q 311 -75 292 -75 q 407 -107 372 -75 q 442 -196 442 -138 q 396 -298 442 -263 q 285 -332 351 -332 q 219 -324 247 -332 q 171 -306 191 -316 l 197 -224 q 241 -241 219 -234 q 288 -247 263 -247 q 335 -236 317 -247 q 353 -201 353 -224 q 335 -165 353 -177 q 282 -153 317 -153 q 250 -155 265 -153 q 215 -162 234 -157 l 254 0 l 331 0 l 297 -110 z "
+        },
+        "ŝ": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 122 769 l 122 879 l 306 1035 l 489 879 l 489 769 l 306 885 l 122 769 z "
+        },
+        "ș": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 290 -436 l 217 -436 l 269 -283 l 206 -283 l 206 -126 l 376 -126 l 376 -267 l 290 -436 z "
+        },
+        "ṡ": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 233 836 l 233 971 l 378 971 l 378 836 l 233 836 z "
+        },
+        "ṣ": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 z "
+        },
+        "ṩ": {
+            "ha": 588,
+            "x_min": 43,
+            "x_max": 550,
+            "o": "m 278 -14 q 154 -1 209 -14 q 43 38 99 13 l 58 185 q 164 134 112 153 q 272 115 215 115 q 351 132 324 115 q 378 185 378 149 q 364 229 378 212 q 321 260 349 247 q 250 290 292 274 q 141 342 186 314 q 73 409 97 369 q 50 506 50 448 q 81 611 50 565 q 170 683 113 657 q 307 708 228 708 q 425 694 373 708 q 522 654 478 679 l 507 507 q 413 561 460 540 q 310 582 366 582 q 241 564 265 582 q 217 513 217 546 q 251 452 217 472 q 360 403 285 432 q 444 364 408 384 q 503 319 480 344 q 539 264 527 295 q 550 193 550 233 q 518 81 550 127 q 426 10 487 35 q 278 -14 365 -14 m 233 836 l 233 971 l 378 971 l 378 836 l 233 836 z "
+        },
+        "ß": {
+            "ha": 875,
+            "x_min": 22,
+            "x_max": 847,
+            "o": "m 519 -19 q 450 -16 483 -19 q 382 -7 417 -13 l 382 135 q 451 125 417 128 q 521 122 485 122 q 630 151 590 122 q 671 232 671 180 q 645 307 671 276 q 583 362 620 338 q 508 410 545 386 q 445 464 470 434 q 419 539 419 494 q 444 615 419 583 q 521 697 469 647 q 574 757 556 732 q 592 822 592 783 q 557 893 592 866 q 457 919 523 919 q 334 872 375 919 q 293 739 293 824 l 293 0 l 121 0 l 121 553 l 22 553 l 38 694 l 121 694 l 121 736 q 215 981 121 900 q 460 1061 309 1061 q 681 1001 597 1061 q 764 838 764 941 q 750 756 764 789 q 711 697 736 724 q 653 640 686 671 q 609 592 622 611 q 596 551 596 572 q 621 501 596 523 q 684 456 647 478 q 759 405 722 434 q 822 335 797 376 q 847 235 847 294 q 801 92 847 148 q 679 8 754 35 q 519 -19 604 -19 z "
+        },
+        "t": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 446,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 z "
+        },
+        "ŧ": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 446,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 m 22 311 l 22 426 l 439 426 l 439 311 l 22 311 z "
+        },
+        "ť": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 494,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 m 357 757 l 357 1003 l 494 1003 l 454 757 l 357 757 z "
+        },
+        "ţ": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 468,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 z "
+        },
+        "ț": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 446,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 m 317 -436 l 243 -436 l 296 -283 l 232 -283 l 232 -126 l 403 -126 l 403 -267 l 317 -436 z "
+        },
+        "ẗ": {
+            "ha": 478,
+            "x_min": 1,
+            "x_max": 446,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 m 282 976 l 282 1101 l 415 1101 l 415 976 l 282 976 m 1 976 l 1 1101 l 135 1101 l 135 976 l 1 976 z "
+        },
+        "ṭ": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 446,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 z "
+        },
+        "ṯ": {
+            "ha": 478,
+            "x_min": 22,
+            "x_max": 543,
+            "o": "m 307 -14 q 201 13 242 -14 q 140 81 160 40 q 121 168 121 123 l 121 553 l 22 553 l 38 694 l 121 694 l 121 847 l 293 865 l 293 694 l 446 694 l 446 553 l 293 553 l 293 239 q 299 163 293 186 q 328 134 306 140 q 399 128 350 128 l 446 128 l 431 -14 l 307 -14 z "
+        },
+        "u": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 z "
+        },
+        "ú": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 247 792 l 247 901 l 521 1057 l 521 897 l 247 792 z "
+        },
+        "ŭ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 384 815 q 269 842 317 815 q 195 912 222 868 q 169 1008 169 956 l 288 1008 q 314 943 288 966 q 383 919 340 919 q 453 943 427 919 q 479 1008 479 966 l 597 1008 q 572 912 597 956 q 498 842 546 868 q 384 815 450 815 z "
+        },
+        "û": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 200 769 l 200 879 l 383 1035 l 567 879 l 567 769 l 383 885 l 200 769 z "
+        },
+        "ȕ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 549 817 l 439 817 l 300 1063 l 460 1063 l 549 817 m 344 817 l 235 817 l 85 1063 l 244 1063 l 344 817 z "
+        },
+        "ü": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 457 821 l 457 946 l 590 946 l 590 821 l 457 821 m 176 821 l 176 946 l 310 946 l 310 821 l 176 821 z "
+        },
+        "ụ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 z "
+        },
+        "ù": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 519 792 l 246 897 l 246 1057 l 519 901 l 519 792 z "
+        },
+        "ủ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 406 742 l 354 793 q 397 836 381 817 q 413 881 413 856 q 399 914 413 903 q 361 925 385 925 q 319 918 340 925 q 276 899 297 910 l 253 983 q 306 1003 278 996 q 364 1010 334 1010 q 461 978 422 1010 q 501 886 501 946 q 476 808 501 840 q 406 742 451 775 z "
+        },
+        "ư": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 850,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 592 581 l 592 694 q 673 718 644 694 q 703 797 703 742 l 850 797 q 813 682 850 731 q 716 607 775 633 q 592 581 657 581 z "
+        },
+        "ứ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 850,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 592 581 l 592 694 q 673 718 644 694 q 703 797 703 742 l 850 797 q 813 682 850 731 q 716 607 775 633 q 592 581 657 581 m 247 792 l 247 901 l 521 1057 l 521 897 l 247 792 z "
+        },
+        "ự": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 850,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 592 581 l 592 694 q 673 718 644 694 q 703 797 703 742 l 850 797 q 813 682 850 731 q 716 607 775 633 q 592 581 657 581 z "
+        },
+        "ừ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 850,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 592 581 l 592 694 q 673 718 644 694 q 703 797 703 742 l 850 797 q 813 682 850 731 q 716 607 775 633 q 592 581 657 581 m 519 792 l 246 897 l 246 1057 l 519 901 l 519 792 z "
+        },
+        "ử": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 850,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 592 581 l 592 694 q 673 718 644 694 q 703 797 703 742 l 850 797 q 813 682 850 731 q 716 607 775 633 q 592 581 657 581 m 406 742 l 354 793 q 397 836 381 817 q 413 881 413 856 q 399 914 413 903 q 361 925 385 925 q 319 918 340 925 q 276 899 297 910 l 253 983 q 306 1003 278 996 q 364 1010 334 1010 q 461 978 422 1010 q 501 886 501 946 q 476 808 501 840 q 406 742 451 775 z "
+        },
+        "ữ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 850,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 592 581 l 592 694 q 673 718 644 694 q 703 797 703 742 l 850 797 q 813 682 850 731 q 716 607 775 633 q 592 581 657 581 m 501 803 q 434 818 467 803 q 371 849 401 833 q 311 864 340 864 q 264 814 264 864 l 146 814 q 179 939 149 895 q 265 982 209 982 q 333 967 300 982 q 396 936 365 951 q 456 921 426 921 q 503 971 503 921 l 621 971 q 588 846 618 890 q 501 803 558 803 z "
+        },
+        "ű": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 701,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 425 817 l 542 1063 l 701 1063 l 535 817 l 425 817 m 221 817 l 326 1063 l 486 1063 l 331 817 l 221 817 z "
+        },
+        "ȗ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 384 1008 q 498 982 450 1008 q 572 912 546 956 q 597 815 597 868 l 479 815 q 453 881 479 858 q 383 904 427 904 q 314 881 340 904 q 288 815 288 858 l 169 815 q 195 912 169 868 q 269 982 222 956 q 384 1008 317 1008 z "
+        },
+        "ū": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 156 835 l 156 947 l 611 947 l 611 835 l 156 835 z "
+        },
+        "ṻ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 156 824 l 156 929 l 611 929 l 611 824 l 156 824 m 176 1049 l 176 1168 l 310 1168 l 310 1049 l 176 1049 m 457 1049 l 457 1168 l 590 1168 l 590 1049 l 457 1049 z "
+        },
+        "ų": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 753,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 600 0 l 686 0 q 609 -72 638 -36 q 579 -144 579 -107 q 598 -192 579 -176 q 646 -208 616 -208 q 690 -203 670 -208 q 729 -189 710 -198 l 753 -265 q 701 -285 731 -276 q 632 -293 672 -293 q 531 -261 572 -293 q 490 -171 490 -230 q 526 -71 490 -115 q 600 0 562 -27 z "
+        },
+        "ů": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 383 792 q 278 832 317 792 q 239 926 239 872 q 278 1022 239 982 q 383 1063 317 1063 q 490 1022 451 1063 q 528 926 528 982 q 490 832 528 872 q 383 792 451 792 m 383 864 q 427 881 410 864 q 444 926 444 899 q 427 971 444 953 q 383 989 410 989 q 340 971 358 989 q 322 926 322 953 q 340 881 322 899 q 383 864 358 864 z "
+        },
+        "ũ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 501 803 q 434 818 467 803 q 371 849 401 833 q 311 864 340 864 q 264 814 264 864 l 146 814 q 179 939 149 895 q 265 982 209 982 q 333 967 300 982 q 396 936 365 951 q 456 921 426 921 q 503 971 503 921 l 621 971 q 588 846 618 890 q 501 803 558 803 z "
+        },
+        "ṹ": {
+            "ha": 767,
+            "x_min": 74,
+            "x_max": 686,
+            "o": "m 368 -14 q 195 29 260 -14 q 102 148 131 72 q 74 321 74 223 l 74 694 l 246 694 l 246 321 q 278 177 246 224 q 383 131 310 131 q 480 158 442 131 q 544 236 519 186 l 514 149 l 514 694 l 686 694 l 686 0 l 525 0 l 517 121 l 554 72 q 475 13 529 40 q 368 -14 422 -14 m 504 801 q 437 816 472 801 q 369 845 402 831 q 310 860 336 860 q 264 811 264 860 l 158 811 q 184 919 158 882 q 263 957 210 957 q 330 942 294 957 q 398 913 365 928 q 457 899 431 899 q 503 947 503 899 l 608 947 q 583 840 608 878 q 504 801 558 801 m 247 1004 l 247 1100 l 521 1232 l 521 1085 l 247 1004 z "
+        },
+        "v": {
+            "ha": 689,
+            "x_min": 4,
+            "x_max": 685,
+            "o": "m 271 0 l 4 694 l 174 694 l 344 214 l 515 694 l 685 694 l 418 0 l 271 0 z "
+        },
+        "w": {
+            "ha": 1008,
+            "x_min": 14,
+            "x_max": 994,
+            "o": "m 217 0 l 14 694 l 182 694 l 301 210 l 432 681 l 576 681 l 706 210 l 826 694 l 994 694 l 792 0 l 647 0 l 504 453 l 361 0 l 217 0 z "
+        },
+        "ẃ": {
+            "ha": 1008,
+            "x_min": 14,
+            "x_max": 994,
+            "o": "m 217 0 l 14 694 l 182 694 l 301 210 l 432 681 l 576 681 l 706 210 l 826 694 l 994 694 l 792 0 l 647 0 l 504 453 l 361 0 l 217 0 m 368 792 l 368 901 l 642 1057 l 642 897 l 368 792 z "
+        },
+        "ŵ": {
+            "ha": 1008,
+            "x_min": 14,
+            "x_max": 994,
+            "o": "m 217 0 l 14 694 l 182 694 l 301 210 l 432 681 l 576 681 l 706 210 l 826 694 l 994 694 l 792 0 l 647 0 l 504 453 l 361 0 l 217 0 m 321 769 l 321 879 l 504 1035 l 688 879 l 688 769 l 504 885 l 321 769 z "
+        },
+        "ẅ": {
+            "ha": 1008,
+            "x_min": 14,
+            "x_max": 994,
+            "o": "m 217 0 l 14 694 l 182 694 l 301 210 l 432 681 l 576 681 l 706 210 l 826 694 l 994 694 l 792 0 l 647 0 l 504 453 l 361 0 l 217 0 m 578 821 l 578 946 l 711 946 l 711 821 l 578 821 m 297 821 l 297 946 l 431 946 l 431 821 l 297 821 z "
+        },
+        "ẁ": {
+            "ha": 1008,
+            "x_min": 14,
+            "x_max": 994,
+            "o": "m 217 0 l 14 694 l 182 694 l 301 210 l 432 681 l 576 681 l 706 210 l 826 694 l 994 694 l 792 0 l 647 0 l 504 453 l 361 0 l 217 0 m 640 792 l 367 897 l 367 1057 l 640 901 l 640 792 z "
+        },
+        "x": {
+            "ha": 682,
+            "x_min": 14,
+            "x_max": 668,
+            "o": "m 14 0 l 244 347 l 14 694 l 219 694 l 346 493 l 463 694 l 668 694 l 438 347 l 668 0 l 463 0 l 336 201 l 219 0 l 14 0 z "
+        },
+        "y": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 z "
+        },
+        "ý": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 236 792 l 236 901 l 510 1057 l 510 897 l 236 792 z "
+        },
+        "ŷ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 189 769 l 189 879 l 372 1035 l 556 879 l 556 769 l 372 885 l 189 769 z "
+        },
+        "ÿ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 446 821 l 446 946 l 579 946 l 579 821 l 446 821 m 165 821 l 165 946 l 299 946 l 299 821 l 165 821 z "
+        },
+        "ẏ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 300 836 l 300 971 l 444 971 l 444 836 l 300 836 z "
+        },
+        "ỵ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 z "
+        },
+        "ỳ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 508 792 l 235 897 l 235 1057 l 508 901 l 508 792 z "
+        },
+        "ỷ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 394 742 l 343 793 q 386 836 370 817 q 401 881 401 856 q 388 914 401 903 q 350 925 374 925 q 308 918 329 925 q 265 899 286 910 l 242 983 q 295 1003 267 996 q 353 1010 323 1010 q 450 978 410 1010 q 490 886 490 946 q 465 808 490 840 q 394 742 440 775 z "
+        },
+        "ȳ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 144 835 l 144 947 l 600 947 l 600 835 l 144 835 z "
+        },
+        "ỹ": {
+            "ha": 746,
+            "x_min": 1,
+            "x_max": 743,
+            "o": "m 136 -336 l 290 46 l 1 694 l 193 694 l 371 247 l 551 694 l 743 694 l 308 -336 l 136 -336 m 490 803 q 423 818 456 803 q 360 849 390 833 q 300 864 329 864 q 253 814 253 864 l 135 814 q 168 939 138 895 q 254 982 198 982 q 322 967 289 982 q 385 936 354 951 q 444 921 415 921 q 492 971 492 921 l 610 971 q 577 846 607 890 q 490 803 547 803 z "
+        },
+        "z": {
+            "ha": 656,
+            "x_min": 25,
+            "x_max": 635,
+            "o": "m 25 0 l 401 611 l 421 549 l 57 549 l 57 694 l 632 694 l 256 83 l 229 146 l 635 146 l 635 0 l 25 0 z "
+        },
+        "ź": {
+            "ha": 656,
+            "x_min": 25,
+            "x_max": 635,
+            "o": "m 25 0 l 401 611 l 421 549 l 57 549 l 57 694 l 632 694 l 256 83 l 229 146 l 635 146 l 635 0 l 25 0 m 200 792 l 200 901 l 474 1057 l 474 897 l 200 792 z "
+        },
+        "ž": {
+            "ha": 656,
+            "x_min": 25,
+            "x_max": 635,
+            "o": "m 25 0 l 401 611 l 421 549 l 57 549 l 57 694 l 632 694 l 256 83 l 229 146 l 635 146 l 635 0 l 25 0 m 336 776 l 153 932 l 153 1042 l 336 926 l 519 1042 l 519 932 l 336 776 z "
+        },
+        "ż": {
+            "ha": 656,
+            "x_min": 25,
+            "x_max": 635,
+            "o": "m 25 0 l 401 611 l 421 549 l 57 549 l 57 694 l 632 694 l 256 83 l 229 146 l 635 146 l 635 0 l 25 0 m 264 836 l 264 971 l 408 971 l 408 836 l 264 836 z "
+        },
+        "ẓ": {
+            "ha": 656,
+            "x_min": 25,
+            "x_max": 635,
+            "o": "m 25 0 l 401 611 l 421 549 l 57 549 l 57 694 l 632 694 l 256 83 l 229 146 l 635 146 l 635 0 l 25 0 z "
+        },
+        "ª": {
+            "ha": 501,
+            "x_min": 42,
+            "x_max": 451,
+            "o": "m 168 603 q 77 633 113 603 q 42 718 42 663 q 59 783 42 756 q 106 828 76 810 q 176 858 136 847 q 263 874 216 869 q 252 890 263 882 q 207 899 242 899 q 145 893 177 899 q 83 878 113 888 l 76 990 q 163 1010 122 1003 q 242 1017 203 1017 q 363 977 318 1017 q 407 874 407 938 l 407 754 q 413 728 407 735 q 429 721 419 721 l 451 721 l 446 603 l 378 603 q 321 615 344 603 q 285 647 299 626 q 232 615 265 626 q 168 603 199 603 m 225 701 q 245 705 235 701 q 264 714 255 708 l 264 782 q 213 767 232 778 q 194 732 194 756 q 203 709 194 717 q 225 701 213 701 z "
+        },
+        "º": {
+            "ha": 524,
+            "x_min": 39,
+            "x_max": 483,
+            "o": "m 261 603 q 141 632 191 603 q 65 709 92 662 q 39 810 39 756 q 65 910 39 863 q 141 987 92 958 q 261 1017 191 1017 q 382 987 332 1017 q 457 910 431 958 q 483 810 483 863 q 457 709 483 756 q 382 632 431 662 q 261 603 332 603 m 261 710 q 317 741 297 710 q 338 810 338 772 q 317 879 338 849 q 261 910 297 910 q 205 879 226 910 q 185 810 185 849 q 205 741 185 772 q 261 710 226 710 z "
+        },
+        "π": {
+            "ha": 897,
+            "x_min": 25,
+            "x_max": 869,
+            "o": "m 788 128 q 830 132 810 128 q 864 143 849 137 l 864 13 q 812 -6 844 2 q 742 -14 779 -14 q 604 34 652 -14 q 556 175 556 83 l 556 553 l 338 553 l 338 0 l 165 0 l 165 553 l 25 553 l 25 694 l 869 694 l 869 553 l 728 553 l 728 192 q 788 128 728 128 z "
+        },
+        "₀": {
+            "ha": 583,
+            "x_min": 54,
+            "x_max": 529,
+            "o": "m 292 -100 q 163 -64 216 -100 q 82 36 110 -27 q 54 182 54 100 q 119 381 54 306 q 292 456 185 456 q 464 381 399 456 q 529 182 529 306 q 501 36 529 100 q 420 -64 473 -27 q 292 -100 367 -100 m 292 21 q 363 63 338 21 q 388 182 388 105 q 361 297 388 259 q 292 335 335 335 q 222 297 248 335 q 196 182 196 259 q 219 63 196 105 q 292 21 243 21 z "
+        },
+        "₁": {
+            "ha": 346,
+            "x_min": 47,
+            "x_max": 276,
+            "o": "m 144 -81 l 144 288 q 99 259 122 270 q 54 242 76 247 l 47 353 q 117 388 82 365 q 172 436 153 411 l 276 436 l 276 -81 l 144 -81 z "
+        },
+        "₂": {
+            "ha": 453,
+            "x_min": 42,
+            "x_max": 417,
+            "o": "m 42 -81 l 196 139 q 239 211 227 184 q 251 267 251 239 q 233 316 251 297 q 181 335 215 335 q 114 318 145 335 q 54 275 83 301 l 44 403 q 124 441 81 426 q 217 456 166 456 q 344 411 296 456 q 393 294 393 367 q 385 234 393 263 q 359 171 377 204 q 311 96 341 138 l 199 -65 l 169 40 l 417 40 l 417 -81 l 42 -81 z "
+        },
+        "₃": {
+            "ha": 457,
+            "x_min": 39,
+            "x_max": 418,
+            "o": "m 225 -100 q 124 -87 171 -100 q 39 -53 78 -74 l 65 67 q 128 34 97 47 q 199 21 160 21 q 255 34 234 21 q 276 72 276 47 q 257 116 276 99 q 194 132 238 132 l 151 132 l 151 239 l 196 239 q 242 252 225 239 q 260 288 260 265 q 245 321 260 308 q 199 335 230 335 q 135 323 165 335 q 78 290 105 310 l 68 417 q 145 445 103 435 q 233 456 187 456 q 357 415 313 456 q 401 311 401 374 q 374 227 401 259 q 310 181 347 195 l 310 197 q 388 149 358 183 q 418 60 418 115 q 363 -58 418 -15 q 225 -100 308 -100 z "
+        },
+        "₄": {
+            "ha": 536,
+            "x_min": 17,
+            "x_max": 486,
+            "o": "m 300 -81 l 300 31 l 17 31 l 306 436 l 418 436 l 418 131 l 486 131 l 486 31 l 418 31 l 418 -81 l 300 -81 m 179 93 l 128 131 l 300 131 l 300 200 l 300 358 l 346 329 l 265 214 l 179 93 z "
+        },
+        "₅": {
+            "ha": 465,
+            "x_min": 46,
+            "x_max": 417,
+            "o": "m 215 -100 q 126 -91 167 -100 q 46 -64 85 -81 l 69 56 q 132 31 101 40 q 201 21 164 21 q 255 34 234 21 q 275 74 275 47 q 251 118 275 103 q 182 133 227 133 q 126 131 153 133 q 75 124 99 128 l 107 436 l 396 436 l 385 315 l 164 315 l 207 379 l 190 210 l 151 238 q 242 249 196 249 q 373 205 329 249 q 417 86 417 160 q 359 -51 417 -2 q 215 -100 302 -100 z "
+        },
+        "₆": {
+            "ha": 481,
+            "x_min": 56,
+            "x_max": 436,
+            "o": "m 251 -100 q 106 -43 157 -100 q 56 107 56 13 q 92 253 56 187 q 189 371 128 320 q 319 456 249 422 l 396 368 q 286 308 339 345 q 200 220 234 270 q 167 113 167 171 l 124 156 q 180 216 142 194 q 268 238 218 238 q 392 190 347 238 q 436 69 436 142 q 383 -53 436 -6 q 251 -100 330 -100 m 251 10 q 295 27 278 10 q 311 69 311 44 q 295 113 311 96 q 251 131 278 131 q 209 113 226 131 q 192 69 192 96 q 209 27 192 44 q 251 10 226 10 z "
+        },
+        "₇": {
+            "ha": 458,
+            "x_min": 58,
+            "x_max": 436,
+            "o": "m 82 -81 l 281 381 l 315 324 l 58 324 l 58 444 l 436 444 l 214 -81 l 82 -81 z "
+        },
+        "₈": {
+            "ha": 467,
+            "x_min": 39,
+            "x_max": 428,
+            "o": "m 235 -100 q 92 -55 144 -100 q 39 63 39 -9 q 92 182 39 137 q 235 228 144 228 q 376 182 324 228 q 428 63 428 137 q 376 -55 428 -9 q 235 -100 324 -100 m 235 0 q 280 20 264 0 q 296 72 296 40 q 280 120 296 101 q 235 139 264 139 q 188 120 205 139 q 171 72 171 101 q 188 20 171 40 q 235 0 205 0 m 235 251 q 269 267 257 251 q 281 304 281 283 q 269 342 281 327 q 235 357 257 357 q 201 342 213 357 q 189 304 189 327 q 201 267 189 283 q 235 251 213 251 m 235 172 q 118 211 162 172 q 75 313 75 250 q 115 412 75 368 q 238 456 156 456 q 356 412 318 456 q 394 313 394 368 q 351 211 394 250 q 235 172 308 172 z "
+        },
+        "₉": {
+            "ha": 481,
+            "x_min": 44,
+            "x_max": 425,
+            "o": "m 229 456 q 375 399 324 456 q 425 249 425 342 q 389 102 425 169 q 292 -16 352 35 q 161 -100 232 -67 l 85 -12 q 194 48 142 10 q 280 135 247 86 q 314 243 314 185 l 357 200 q 300 140 338 162 q 213 118 263 118 q 89 166 133 118 q 44 286 44 213 q 98 409 44 363 q 229 456 151 456 m 229 346 q 186 328 202 346 q 169 286 169 311 q 186 243 169 260 q 229 225 202 225 q 272 243 256 225 q 289 286 289 260 q 272 329 289 313 q 229 346 256 346 z "
+        },
+        "⁰": {
+            "ha": 583,
+            "x_min": 54,
+            "x_max": 529,
+            "o": "m 292 517 q 163 553 216 517 q 82 653 110 590 q 54 799 54 717 q 119 998 54 923 q 292 1072 185 1072 q 464 998 399 1072 q 529 799 529 923 q 501 653 529 717 q 420 553 473 590 q 292 517 367 517 m 292 638 q 363 680 338 638 q 388 799 388 722 q 361 914 388 876 q 292 951 335 951 q 222 914 248 951 q 196 799 196 876 q 219 680 196 722 q 292 638 243 638 z "
+        },
+        "¹": {
+            "ha": 346,
+            "x_min": 47,
+            "x_max": 276,
+            "o": "m 144 536 l 144 904 q 99 875 122 887 q 54 858 76 864 l 47 969 q 117 1005 82 981 q 172 1053 153 1028 l 276 1053 l 276 536 l 144 536 z "
+        },
+        "²": {
+            "ha": 453,
+            "x_min": 42,
+            "x_max": 417,
+            "o": "m 42 536 l 196 756 q 239 828 227 801 q 251 883 251 856 q 233 933 251 914 q 181 951 215 951 q 114 935 145 951 q 54 892 83 918 l 44 1019 q 124 1057 81 1042 q 217 1072 166 1072 q 344 1028 296 1072 q 393 911 393 984 q 385 850 393 880 q 359 788 377 821 q 311 713 341 755 l 199 551 l 169 657 l 417 657 l 417 536 l 42 536 z "
+        },
+        "³": {
+            "ha": 457,
+            "x_min": 39,
+            "x_max": 418,
+            "o": "m 225 517 q 124 530 171 517 q 39 564 78 542 l 65 683 q 128 651 97 664 q 199 638 160 638 q 255 651 234 638 q 276 689 276 664 q 257 732 276 716 q 194 749 238 749 l 151 749 l 151 856 l 196 856 q 242 868 225 856 q 260 904 260 881 q 245 938 260 924 q 199 951 230 951 q 135 939 165 951 q 78 907 105 927 l 68 1033 q 145 1062 103 1051 q 233 1072 187 1072 q 357 1031 313 1072 q 401 928 401 990 q 374 844 401 876 q 310 797 347 812 l 310 814 q 388 766 358 799 q 418 676 418 732 q 363 559 418 601 q 225 517 308 517 z "
+        },
+        "⁴": {
+            "ha": 536,
+            "x_min": 17,
+            "x_max": 486,
+            "o": "m 300 536 l 300 647 l 17 647 l 306 1053 l 418 1053 l 418 747 l 486 747 l 486 647 l 418 647 l 418 536 l 300 536 m 179 710 l 128 747 l 300 747 l 300 817 l 300 975 l 346 946 l 265 831 l 179 710 z "
+        },
+        "⁵": {
+            "ha": 465,
+            "x_min": 46,
+            "x_max": 417,
+            "o": "m 215 517 q 126 526 167 517 q 46 553 85 535 l 69 672 q 132 647 101 657 q 201 638 164 638 q 255 650 234 638 q 275 690 275 663 q 251 735 275 719 q 182 750 227 750 q 126 747 153 750 q 75 740 99 744 l 107 1053 l 396 1053 l 385 932 l 164 932 l 207 996 l 190 826 l 151 854 q 242 865 196 865 q 373 821 329 865 q 417 703 417 777 q 359 566 417 615 q 215 517 302 517 z "
+        },
+        "⁶": {
+            "ha": 481,
+            "x_min": 56,
+            "x_max": 436,
+            "o": "m 251 517 q 106 573 157 517 q 56 724 56 630 q 92 870 56 803 q 189 988 128 937 q 319 1072 249 1039 l 396 985 q 286 924 339 962 q 200 837 234 887 q 167 729 167 788 l 124 772 q 180 833 142 811 q 268 854 218 854 q 392 807 347 854 q 436 686 436 759 q 383 564 436 610 q 251 517 330 517 m 251 626 q 295 644 278 626 q 311 686 311 661 q 295 730 311 713 q 251 747 278 747 q 209 730 226 747 q 192 686 192 713 q 209 643 192 660 q 251 626 226 626 z "
+        },
+        "⁷": {
+            "ha": 458,
+            "x_min": 58,
+            "x_max": 436,
+            "o": "m 82 536 l 281 997 l 315 940 l 58 940 l 58 1061 l 436 1061 l 214 536 l 82 536 z "
+        },
+        "⁸": {
+            "ha": 467,
+            "x_min": 39,
+            "x_max": 428,
+            "o": "m 235 517 q 92 562 144 517 q 39 679 39 608 q 92 799 39 753 q 235 844 144 844 q 376 799 324 844 q 428 679 428 753 q 376 562 428 608 q 235 517 324 517 m 235 617 q 280 637 264 617 q 296 689 296 657 q 280 737 296 718 q 235 756 264 756 q 188 737 205 756 q 171 689 171 718 q 188 637 171 657 q 235 617 205 617 m 235 868 q 269 884 257 868 q 281 921 281 899 q 269 959 281 944 q 235 974 257 974 q 201 959 213 974 q 189 921 189 944 q 201 884 189 899 q 235 868 213 868 m 235 789 q 118 828 162 789 q 75 929 75 867 q 115 1028 75 985 q 238 1072 156 1072 q 356 1028 318 1072 q 394 929 394 985 q 351 828 394 867 q 235 789 308 789 z "
+        },
+        "⁹": {
+            "ha": 481,
+            "x_min": 44,
+            "x_max": 425,
+            "o": "m 229 1072 q 375 1016 324 1072 q 425 865 425 959 q 389 719 425 785 q 292 601 352 652 q 161 517 232 550 l 85 604 q 194 665 142 627 q 280 752 247 703 q 314 860 314 801 l 357 817 q 300 757 338 778 q 213 735 263 735 q 89 782 133 735 q 44 903 44 830 q 98 1026 44 979 q 229 1072 151 1072 m 229 963 q 186 945 202 963 q 169 903 169 928 q 186 859 169 877 q 229 842 202 842 q 272 859 256 842 q 289 903 289 877 q 272 946 289 929 q 229 963 256 963 z "
+        },
+        "⁄": {
+            "ha": 133,
+            "x_min": -289,
+            "x_max": 422,
+            "o": "m -289 0 l 285 972 l 422 972 l -150 0 l -289 0 z "
+        },
+        "½": {
+            "ha": 1013,
+            "x_min": 42,
+            "x_max": 971,
+            "o": "m 139 456 l 139 824 q 93 795 116 806 q 49 778 71 783 l 42 889 q 112 924 76 901 q 167 972 147 947 l 271 972 l 271 456 l 139 456 m 97 0 l 671 972 l 808 972 l 236 0 l 97 0 m 596 0 l 750 219 q 793 292 781 265 q 806 347 806 319 q 788 397 806 378 q 735 415 769 415 q 668 399 699 415 q 608 356 638 382 l 599 483 q 678 521 635 506 q 771 536 720 536 q 899 492 850 536 q 947 375 947 448 q 939 314 947 344 q 913 252 931 285 q 865 176 895 219 l 753 15 l 724 121 l 971 121 l 971 0 l 596 0 z "
+        },
+        "¼": {
+            "ha": 965,
+            "x_min": 42,
+            "x_max": 913,
+            "o": "m 139 456 l 139 824 q 93 795 116 806 q 49 778 71 783 l 42 889 q 112 924 76 901 q 167 972 147 947 l 271 972 l 271 456 l 139 456 m 110 0 l 683 972 l 821 972 l 249 0 l 110 0 m 726 0 l 726 111 l 443 111 l 732 517 l 844 517 l 844 211 l 913 211 l 913 111 l 844 111 l 844 0 l 726 0 m 606 174 l 554 211 l 726 211 l 726 281 l 726 439 l 772 410 l 692 294 l 606 174 z "
+        },
+        "¾": {
+            "ha": 1044,
+            "x_min": 39,
+            "x_max": 992,
+            "o": "m 225 436 q 124 449 171 436 q 39 483 78 462 l 65 603 q 128 570 97 583 q 199 557 160 557 q 255 570 234 557 q 276 608 276 583 q 257 652 276 635 q 194 668 238 668 l 151 668 l 151 775 l 196 775 q 242 788 225 775 q 260 824 260 801 q 245 857 260 844 q 199 871 230 871 q 135 859 165 871 q 78 826 105 847 l 68 953 q 145 981 103 971 q 233 992 187 992 q 357 951 313 992 q 401 847 401 910 q 374 763 401 795 q 310 717 347 731 l 310 733 q 388 685 358 719 q 418 596 418 651 q 363 478 418 521 q 225 436 308 436 m 204 0 l 778 972 l 915 972 l 343 0 l 204 0 m 806 0 l 806 111 l 522 111 l 811 517 l 924 517 l 924 211 l 992 211 l 992 111 l 924 111 l 924 0 l 806 0 m 685 174 l 633 211 l 806 211 l 806 281 l 806 439 l 851 410 l 771 294 l 685 174 z "
+        },
+        "*": {
+            "ha": 604,
+            "x_min": 42,
+            "x_max": 563,
+            "o": "m 42 676 l 218 779 l 42 882 l 100 969 l 257 861 l 250 1049 l 354 1049 l 347 861 l 504 969 l 563 882 l 386 779 l 563 676 l 504 589 l 347 697 l 354 503 l 250 503 l 257 697 l 100 589 l 42 676 z "
+        },
+        "\\": {
+            "ha": 471,
+            "x_min": -11,
+            "x_max": 507,
+            "o": "m 333 -118 l -11 972 l 163 972 l 507 -118 l 333 -118 z "
+        },
+        "·": {
+            "ha": 322,
+            "x_min": 75,
+            "x_max": 247,
+            "o": "m 75 296 l 75 476 l 247 476 l 247 296 l 75 296 z "
+        },
+        "•": {
+            "ha": 414,
+            "x_min": 56,
+            "x_max": 358,
+            "o": "m 207 235 q 100 279 144 235 q 56 386 56 324 q 100 493 56 449 q 207 538 144 538 q 314 493 269 538 q 358 386 358 449 q 314 279 358 324 q 207 235 269 235 z "
+        },
+        ":": {
+            "ha": 308,
+            "x_min": 64,
+            "x_max": 244,
+            "o": "m 64 506 l 64 694 l 244 694 l 244 506 l 64 506 m 64 0 l 64 189 l 244 189 l 244 0 l 64 0 z "
+        },
+        ",": {
+            "ha": 322,
+            "x_min": 75,
+            "x_max": 256,
+            "o": "m 167 -167 l 86 -167 l 146 0 l 75 0 l 75 189 l 256 189 l 256 17 l 167 -167 z "
+        },
+        "…": {
+            "ha": 878,
+            "x_min": 64,
+            "x_max": 814,
+            "o": "m 64 0 l 64 189 l 244 189 l 244 0 l 64 0 m 349 0 l 349 189 l 529 189 l 529 0 l 349 0 m 633 0 l 633 189 l 814 189 l 814 0 l 633 0 z "
+        },
+        "!": {
+            "ha": 347,
+            "x_min": 83,
+            "x_max": 264,
+            "o": "m 103 288 l 103 328 l 88 972 l 260 972 l 244 328 l 244 288 l 103 288 m 83 0 l 83 189 l 264 189 l 264 0 l 83 0 z "
+        },
+        "¡": {
+            "ha": 319,
+            "x_min": 83,
+            "x_max": 264,
+            "o": "m 103 407 l 103 367 l 88 -278 l 260 -278 l 244 367 l 244 407 l 103 407 m 83 694 l 83 506 l 264 506 l 264 694 l 83 694 z "
+        },
+        "#": {
+            "ha": 986,
+            "x_min": 43,
+            "x_max": 942,
+            "o": "m 90 -15 l 207 293 l 43 293 l 107 438 l 263 438 l 314 575 l 146 575 l 190 711 l 365 711 l 468 972 l 599 972 l 499 711 l 657 711 l 757 972 l 888 972 l 788 711 l 942 711 l 894 575 l 736 575 l 685 438 l 858 438 l 792 293 l 629 293 l 513 -15 l 379 -15 l 496 293 l 340 293 l 221 -15 l 90 -15 m 393 438 l 551 438 l 606 575 l 447 575 l 393 438 z "
+        },
+        ".": {
+            "ha": 308,
+            "x_min": 64,
+            "x_max": 244,
+            "o": "m 64 0 l 64 189 l 244 189 l 244 0 l 64 0 z "
+        },
+        "?": {
+            "ha": 649,
+            "x_min": 56,
+            "x_max": 593,
+            "o": "m 172 288 l 172 301 q 188 396 172 356 q 230 469 204 437 q 286 532 256 502 q 368 623 338 584 q 399 715 399 661 q 383 772 399 749 q 340 808 368 796 q 275 821 313 821 q 171 806 219 821 q 75 768 123 791 l 56 932 q 170 975 110 958 q 317 992 231 992 q 465 960 403 992 q 560 872 526 928 q 593 746 593 817 q 576 657 593 697 q 530 578 560 616 q 461 501 501 541 q 386 414 419 459 q 354 310 354 369 l 354 288 l 172 288 m 172 0 l 172 189 l 353 189 l 353 0 l 172 0 z "
+        },
+        "¿": {
+            "ha": 607,
+            "x_min": 56,
+            "x_max": 593,
+            "o": "m 476 407 l 476 393 q 460 298 476 339 q 418 225 444 258 q 363 163 392 192 q 280 72 310 110 q 250 -21 250 33 q 265 -78 250 -54 q 308 -114 281 -101 q 374 -126 336 -126 q 478 -111 430 -126 q 574 -74 526 -97 l 593 -237 q 478 -281 539 -264 q 332 -297 417 -297 q 184 -265 246 -297 q 89 -178 122 -233 q 56 -51 56 -122 q 72 38 56 -3 q 118 116 89 78 q 188 193 148 153 q 262 280 230 235 q 294 385 294 325 l 294 407 l 476 407 m 476 694 l 476 506 l 296 506 l 296 694 l 476 694 z "
+        },
+        "\"": {
+            "ha": 492,
+            "x_min": 42,
+            "x_max": 450,
+            "o": "m 69 694 l 42 972 l 214 972 l 186 694 l 69 694 m 306 694 l 278 972 l 450 972 l 422 694 l 306 694 z "
+        },
+        "'": {
+            "ha": 256,
+            "x_min": 42,
+            "x_max": 214,
+            "o": "m 69 694 l 42 972 l 214 972 l 186 694 l 69 694 z "
+        },
+        ";": {
+            "ha": 319,
+            "x_min": 75,
+            "x_max": 256,
+            "o": "m 167 -167 l 86 -167 l 146 0 l 75 0 l 75 189 l 256 189 l 256 17 l 167 -167 m 75 506 l 75 694 l 256 694 l 256 506 l 75 506 z "
+        },
+        "/": {
+            "ha": 499,
+            "x_min": -11,
+            "x_max": 535,
+            "o": "m -11 -118 l 361 972 l 535 972 l 163 -118 l -11 -118 z "
+        },
+        "_": {
+            "ha": 775,
+            "x_min": -1,
+            "x_max": 776,
+            "o": "m -1 -181 l -1 -50 l 776 -50 l 776 -181 l -1 -181 z "
+        },
+        "{": {
+            "ha": 469,
+            "x_min": 42,
+            "x_max": 453,
+            "o": "m 401 -189 q 209 -127 268 -189 q 150 33 150 -65 q 156 126 150 74 q 161 222 161 178 q 136 334 161 297 q 42 371 110 371 l 42 482 q 136 519 110 482 q 161 631 161 556 q 156 727 161 676 q 150 819 150 779 q 209 980 150 917 q 401 1042 268 1042 l 453 1042 l 453 890 l 415 890 q 319 865 353 890 q 285 778 285 840 q 290 683 285 735 q 296 589 296 631 q 253 466 296 506 q 140 407 211 426 l 140 446 q 253 388 211 428 q 296 264 296 347 q 290 170 296 222 q 285 75 285 118 q 319 -12 285 13 q 415 -37 353 -37 l 453 -37 l 453 -189 l 401 -189 z "
+        },
+        "}": {
+            "ha": 469,
+            "x_min": 17,
+            "x_max": 428,
+            "o": "m 17 -189 l 17 -37 l 54 -37 q 151 -12 117 -37 q 185 75 185 13 q 179 170 185 118 q 174 264 174 222 q 216 388 174 347 q 329 446 258 428 l 329 407 q 216 465 258 425 q 174 589 174 506 q 179 683 174 631 q 185 778 185 735 q 151 865 185 840 q 54 890 117 890 l 17 890 l 17 1042 l 68 1042 q 260 980 201 1042 q 319 819 319 917 q 314 727 319 779 q 308 631 308 676 q 334 519 308 556 q 428 482 359 482 l 428 371 q 334 334 359 371 q 308 222 308 297 q 314 126 308 178 q 319 33 319 74 q 260 -127 319 -65 q 68 -189 201 -189 l 17 -189 z "
+        },
+        "[": {
+            "ha": 465,
+            "x_min": 93,
+            "x_max": 450,
+            "o": "m 93 -189 l 93 1042 l 450 1042 l 450 890 l 250 890 l 250 -37 l 450 -37 l 450 -189 l 93 -189 z "
+        },
+        "]": {
+            "ha": 465,
+            "x_min": 15,
+            "x_max": 372,
+            "o": "m 15 -189 l 15 -37 l 215 -37 l 215 890 l 15 890 l 15 1042 l 372 1042 l 372 -189 l 15 -189 z "
+        },
+        "(": {
+            "ha": 456,
+            "x_min": 83,
+            "x_max": 417,
+            "o": "m 269 -189 q 178 -24 220 -113 q 109 177 135 66 q 83 426 83 288 q 109 676 83 565 q 178 876 135 787 q 269 1042 220 966 l 417 1042 q 303 780 350 928 q 256 426 256 631 q 303 74 256 222 q 417 -189 350 -75 l 269 -189 z "
+        },
+        ")": {
+            "ha": 456,
+            "x_min": 39,
+            "x_max": 372,
+            "o": "m 39 -189 q 152 74 105 -75 q 200 426 200 222 q 152 780 200 631 q 39 1042 105 928 l 186 1042 q 278 876 235 966 q 346 676 320 787 q 372 426 372 565 q 346 177 372 288 q 278 -24 320 66 q 186 -189 235 -113 l 39 -189 z "
+        },
+        "—": {
+            "ha": 1035,
+            "x_min": 0,
+            "x_max": 1035,
+            "o": "m 0 367 l 0 497 l 1035 497 l 1035 367 l 0 367 z "
+        },
+        "–": {
+            "ha": 768,
+            "x_min": 0,
+            "x_max": 768,
+            "o": "m 0 367 l 0 497 l 768 497 l 768 367 l 0 367 z "
+        },
+        "‒": {
+            "ha": 981,
+            "x_min": 0,
+            "x_max": 981,
+            "o": "m 0 367 l 0 497 l 981 497 l 981 367 l 0 367 z "
+        },
+        "―": {
+            "ha": 1035,
+            "x_min": 0,
+            "x_max": 1035,
+            "o": "m 0 367 l 0 497 l 1035 497 l 1035 367 l 0 367 z "
+        },
+        "-": {
+            "ha": 581,
+            "x_min": 75,
+            "x_max": 506,
+            "o": "m 75 367 l 75 497 l 506 497 l 506 367 l 75 367 z "
+        },
+        "‐": {
+            "ha": 581,
+            "x_min": 75,
+            "x_max": 506,
+            "o": "m 75 367 l 75 497 l 506 497 l 506 367 l 75 367 z "
+        },
+        "­": {
+            "ha": 617,
+            "x_min": 93,
+            "x_max": 524,
+            "o": "m 93 367 l 93 497 l 524 497 l 524 367 l 93 367 z "
+        },
+        "«": {
+            "ha": 843,
+            "x_min": 15,
+            "x_max": 792,
+            "o": "m 226 108 l 15 394 l 226 681 l 431 681 l 219 394 l 431 108 l 226 108 m 588 108 l 376 394 l 588 681 l 792 681 l 581 394 l 792 108 l 588 108 z "
+        },
+        "»": {
+            "ha": 843,
+            "x_min": 51,
+            "x_max": 828,
+            "o": "m 413 108 l 624 394 l 413 681 l 617 681 l 828 394 l 617 108 l 413 108 m 51 108 l 263 394 l 51 681 l 256 681 l 467 394 l 256 108 l 51 108 z "
+        },
+        "‹": {
+            "ha": 482,
+            "x_min": 15,
+            "x_max": 431,
+            "o": "m 226 108 l 15 394 l 226 681 l 431 681 l 219 394 l 431 108 l 226 108 z "
+        },
+        "›": {
+            "ha": 482,
+            "x_min": 51,
+            "x_max": 467,
+            "o": "m 51 108 l 263 394 l 51 681 l 256 681 l 467 394 l 256 108 l 51 108 z "
+        },
+        "„": {
+            "ha": 578,
+            "x_min": 67,
+            "x_max": 511,
+            "o": "m 158 -167 l 78 -167 l 138 0 l 67 0 l 67 189 l 247 189 l 247 17 l 158 -167 m 422 -167 l 342 -167 l 401 0 l 331 0 l 331 189 l 511 189 l 511 17 l 422 -167 z "
+        },
+        "“": {
+            "ha": 586,
+            "x_min": 75,
+            "x_max": 519,
+            "o": "m 164 990 l 244 990 l 185 824 l 256 824 l 256 635 l 75 635 l 75 807 l 164 990 m 428 990 l 508 990 l 449 824 l 519 824 l 519 635 l 339 635 l 339 807 l 428 990 z "
+        },
+        "”": {
+            "ha": 578,
+            "x_min": 67,
+            "x_max": 511,
+            "o": "m 158 617 l 78 617 l 138 783 l 67 783 l 67 972 l 247 972 l 247 800 l 158 617 m 422 617 l 342 617 l 401 783 l 331 783 l 331 972 l 511 972 l 511 800 l 422 617 z "
+        },
+        "‘": {
+            "ha": 322,
+            "x_min": 75,
+            "x_max": 256,
+            "o": "m 164 972 l 244 972 l 185 806 l 256 806 l 256 617 l 75 617 l 75 789 l 164 972 z "
+        },
+        "’": {
+            "ha": 314,
+            "x_min": 67,
+            "x_max": 247,
+            "o": "m 158 617 l 78 617 l 138 783 l 67 783 l 67 972 l 247 972 l 247 800 l 158 617 z "
+        },
+        "‚": {
+            "ha": 314,
+            "x_min": 67,
+            "x_max": 247,
+            "o": "m 158 -167 l 78 -167 l 138 0 l 67 0 l 67 189 l 247 189 l 247 17 l 158 -167 z "
+        },
+        " ": {
+            "ha": 981,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        " ": {
+            "ha": 139,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        " ": {
+            "ha": 308,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        " ": {
+            "ha": 313,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        " ": {
+            "ha": 313,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        " ": {
+            "ha": 278,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        "​": {
+            "ha": 0,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        "\r": {
+            "ha": 313,
+            "x_min": 0,
+            "x_max": 0,
+            "o": ""
+        },
+        "₵": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 450 -200 l 464 47 l 572 47 l 586 -200 l 450 -200 m 464 935 l 450 1172 l 586 1172 l 572 935 l 464 935 z "
+        },
+        "¢": {
+            "ha": 632,
+            "x_min": 39,
+            "x_max": 597,
+            "o": "m 403 -14 q 202 35 283 -14 q 80 166 122 84 q 39 346 39 247 q 80 527 39 445 q 203 659 121 610 q 408 708 285 708 q 514 695 467 708 q 594 664 561 683 l 581 525 q 509 553 549 542 q 425 564 469 564 q 270 503 325 564 q 215 346 215 443 q 272 191 215 253 q 424 128 328 128 q 505 140 465 128 q 582 174 544 152 l 597 28 q 510 -2 561 9 q 403 -14 459 -14 m 319 -200 l 333 47 l 442 47 l 456 -200 l 319 -200 m 333 650 l 319 888 l 456 888 l 442 650 l 333 650 z "
+        },
+        "₡": {
+            "ha": 846,
+            "x_min": 49,
+            "x_max": 804,
+            "o": "m 547 -19 q 287 43 399 -19 q 111 220 174 106 q 49 486 49 333 q 114 752 49 639 q 292 929 178 866 q 553 992 406 992 q 694 975 630 992 q 804 935 758 959 l 785 765 q 676 805 732 790 q 551 821 620 821 q 381 778 449 821 q 278 659 313 735 q 243 486 243 583 q 277 313 243 389 q 379 194 311 238 q 547 151 447 151 q 673 167 617 151 q 785 207 728 182 l 804 38 q 684 -4 749 12 q 547 -19 618 -19 m 271 -158 l 451 1131 l 554 1131 l 374 -158 l 271 -158 m 481 -158 l 661 1131 l 764 1131 l 583 -158 l 481 -158 z "
+        },
+        "¤": {
+            "ha": 1031,
+            "x_min": 69,
+            "x_max": 961,
+            "o": "m 515 843 q 708 797 624 843 q 840 669 792 750 q 888 483 888 588 q 841 299 888 381 q 710 171 794 218 q 515 124 626 124 q 318 171 402 124 q 189 300 235 219 q 143 483 143 381 q 190 668 143 587 q 320 796 237 749 q 515 843 404 843 m 515 688 q 409 662 453 688 q 342 590 365 636 q 319 483 319 544 q 342 377 319 423 q 409 305 365 331 q 515 279 453 279 q 622 305 578 279 q 688 377 665 331 q 711 483 711 423 q 688 590 711 544 q 622 662 665 636 q 515 688 578 688 m 149 931 l 351 726 l 275 646 l 69 853 l 149 931 m 274 319 l 351 240 l 149 36 l 69 114 l 274 319 m 753 322 l 961 114 l 882 36 l 674 246 l 753 322 m 882 931 l 961 853 l 761 651 l 682 731 l 882 931 z "
+        },
+        "$": {
+            "ha": 806,
+            "x_min": 67,
+            "x_max": 765,
+            "o": "m 389 -19 q 267 -8 330 -19 q 151 20 205 3 q 67 51 98 36 l 88 240 q 189 197 136 217 q 297 164 242 176 q 410 151 353 151 q 524 179 481 151 q 567 264 567 207 q 542 334 567 308 q 468 382 518 361 q 340 431 418 403 q 201 492 263 458 q 103 579 139 526 q 67 714 67 632 q 106 857 67 794 q 225 956 146 920 q 421 992 303 992 q 590 972 510 992 q 728 929 671 952 l 710 747 q 556 803 628 784 q 410 822 484 822 q 290 797 332 822 q 247 719 247 771 q 271 653 247 678 q 338 611 294 628 q 443 574 382 593 q 620 500 549 540 q 729 404 692 460 q 765 264 765 347 q 752 173 765 222 q 700 81 739 124 q 586 9 661 37 q 389 -19 512 -19 m 368 -200 l 382 47 l 490 47 l 504 -200 l 368 -200 m 382 935 l 368 1172 l 504 1172 l 490 935 l 382 935 z "
+        },
+        "₫": {
+            "ha": 793,
+            "x_min": 39,
+            "x_max": 789,
+            "o": "m 361 -14 q 184 35 256 -14 q 75 167 112 85 q 39 346 39 249 q 75 525 39 443 q 184 656 112 607 q 361 706 256 706 q 490 680 438 706 q 583 615 543 655 l 542 579 l 542 1042 l 714 1042 l 714 0 l 551 0 l 543 118 l 593 82 q 492 12 544 38 q 361 -14 440 -14 m 136 -204 l 136 -74 l 714 -74 l 714 -204 l 136 -204 m 386 128 q 479 156 443 128 q 533 232 515 183 q 550 346 550 281 q 533 459 550 410 q 479 536 515 508 q 386 564 443 564 q 294 536 332 564 q 235 459 256 508 q 215 346 215 410 q 235 232 215 281 q 294 156 256 183 q 386 128 332 128 m 378 829 l 378 944 l 789 944 l 789 829 l 378 829 z "
+        },
+        "€": {
+            "ha": 890,
+            "x_min": -8,
+            "x_max": 849,
+            "o": "m 592 -19 q 331 43 444 -19 q 156 220 219 106 q 93 486 93 333 q 158 752 93 639 q 337 929 223 866 q 597 992 451 992 q 738 975 674 992 q 849 935 802 959 l 829 765 q 720 805 776 790 q 596 821 665 821 q 425 778 494 821 q 322 659 356 735 q 288 486 288 583 q 322 313 288 389 q 423 194 356 238 q 592 151 491 151 q 717 167 662 151 q 829 207 773 182 l 849 38 q 728 -4 794 12 q 592 -19 663 -19 m -8 318 l -8 440 l 686 440 l 686 318 l -8 318 m -8 539 l -8 661 l 686 661 l 686 539 l -8 539 z "
+        },
+        "ƒ": {
+            "ha": 479,
+            "x_min": -169,
+            "x_max": 521,
+            "o": "m 13 553 l 28 694 l 471 694 l 456 553 l 13 553 m 204 60 q 115 -140 181 -81 q -65 -200 49 -200 q -122 -197 -97 -200 q -169 -185 -147 -193 l -154 -51 q -90 -62 -125 -62 q -1 -29 -32 -62 q 42 79 29 4 l 147 732 q 235 930 168 867 q 417 992 302 992 q 474 988 448 992 q 521 976 499 985 l 506 843 q 476 851 492 849 q 442 854 460 854 q 353 822 383 854 q 310 713 322 789 l 204 60 z "
+        },
+        "₣": {
+            "ha": 729,
+            "x_min": 10,
+            "x_max": 706,
+            "o": "m 107 0 l 107 972 l 706 972 l 706 800 l 285 800 l 285 593 l 610 593 l 610 421 l 285 421 l 285 0 l 107 0 m 10 172 l 10 294 l 524 294 l 524 172 l 10 172 z "
+        },
+        "₲": {
+            "ha": 922,
+            "x_min": 49,
+            "x_max": 857,
+            "o": "m 539 -19 q 275 43 385 -19 q 107 220 165 106 q 49 488 49 334 q 114 753 49 640 q 293 929 178 867 q 557 992 408 992 q 705 976 634 992 q 825 935 775 960 l 806 765 q 691 805 753 790 q 557 821 628 821 q 379 777 449 821 q 276 659 310 734 q 243 490 243 585 q 277 315 243 391 q 378 195 310 238 q 546 151 445 151 q 610 156 576 151 q 679 167 644 160 l 679 340 l 546 340 l 546 488 l 857 488 l 857 54 q 723 2 806 24 q 539 -19 639 -19 m 471 -200 l 485 47 l 593 47 l 607 -200 l 471 -200 m 485 935 l 471 1172 l 607 1172 l 593 935 l 485 935 z "
+        },
+        "₭": {
+            "ha": 863,
+            "x_min": 10,
+            "x_max": 867,
+            "o": "m 658 0 l 299 514 l 658 972 l 867 972 l 504 514 l 867 0 l 658 0 m 107 0 l 107 972 l 285 972 l 285 0 l 107 0 m 10 450 l 10 575 l 803 575 l 803 450 l 10 450 z "
+        },
+        "₤": {
+            "ha": 722,
+            "x_min": 56,
+            "x_max": 686,
+            "o": "m 240 68 l 192 167 l 686 167 l 686 0 l 67 0 q 111 143 93 76 q 141 280 128 209 q 163 442 153 351 l 186 664 q 277 905 203 818 q 499 992 351 992 q 593 980 549 992 q 679 943 637 967 l 665 761 q 589 806 626 790 q 508 822 552 822 q 407 785 443 822 q 364 675 372 747 l 340 453 q 318 298 331 363 q 288 181 306 234 q 240 68 269 127 m 56 518 l 56 633 l 628 633 l 628 518 l 56 518 m 56 303 l 56 418 l 628 418 l 628 303 l 56 303 z "
+        },
+        "₺": {
+            "ha": 826,
+            "x_min": 28,
+            "x_max": 771,
+            "o": "m 303 972 l 303 171 l 354 171 q 533 237 473 171 q 593 431 593 303 l 593 468 l 771 468 l 771 431 q 722 195 771 291 q 576 49 672 99 q 340 0 480 0 l 125 0 l 125 972 l 303 972 m 28 389 l 28 521 l 678 715 l 678 583 l 28 389 m 28 615 l 28 747 l 678 942 l 678 810 l 28 615 z "
+        },
+        "₼": {
+            "ha": 942,
+            "x_min": 89,
+            "x_max": 894,
+            "o": "m 492 811 q 718 759 628 811 q 851 611 807 706 q 894 389 894 517 l 894 0 l 717 0 l 717 357 q 708 467 717 416 q 675 558 699 519 q 606 618 651 597 q 492 640 562 640 q 377 618 422 640 q 309 558 333 597 q 276 467 285 519 q 267 357 267 416 l 267 0 l 89 0 l 89 389 q 133 611 89 517 q 266 759 176 706 q 492 811 355 811 m 413 0 l 413 972 l 572 972 l 572 0 l 413 0 z "
+        },
+        "₦": {
+            "ha": 1121,
+            "x_min": 79,
+            "x_max": 1042,
+            "o": "m 176 0 l 176 972 l 351 972 l 767 344 l 767 972 l 944 972 l 944 0 l 799 0 l 354 667 l 354 0 l 176 0 m 79 457 l 79 558 l 1042 558 l 1042 457 l 79 457 z "
+        },
+        "₧": {
+            "ha": 1810,
+            "x_min": 107,
+            "x_max": 1772,
+            "o": "m 107 0 l 107 972 l 426 972 q 611 939 535 972 q 725 835 686 905 q 764 656 764 765 q 718 461 764 535 q 595 353 672 387 q 431 319 519 319 l 285 319 l 285 0 l 107 0 m 285 486 l 410 486 q 540 527 497 486 q 583 656 583 568 q 539 783 583 743 q 406 824 495 824 l 285 824 l 285 486 m 1086 -14 q 980 13 1021 -14 q 919 81 939 40 q 900 168 900 123 l 900 553 l 801 553 l 817 694 l 900 694 l 900 847 l 1072 865 l 1072 694 l 1225 694 l 1225 553 l 1072 553 l 1072 239 q 1078 163 1072 186 q 1107 134 1085 140 q 1178 128 1129 128 l 1225 128 l 1210 -14 l 1086 -14 m 1500 -14 q 1357 2 1419 -14 q 1265 38 1296 18 l 1281 185 q 1338 152 1302 168 q 1414 126 1373 136 q 1494 115 1456 115 q 1578 141 1557 115 q 1600 192 1600 166 q 1582 239 1600 221 q 1535 268 1565 257 q 1472 290 1506 280 q 1378 325 1424 305 q 1302 381 1332 344 q 1272 485 1272 418 q 1295 584 1272 533 q 1373 670 1318 635 q 1526 706 1428 706 q 1656 689 1594 706 q 1744 654 1717 673 l 1729 507 q 1649 558 1703 533 q 1539 582 1595 582 q 1459 565 1494 582 q 1424 506 1424 547 q 1445 455 1424 472 q 1502 426 1466 437 q 1582 403 1538 415 q 1672 367 1628 390 q 1744 303 1716 345 q 1772 190 1772 262 q 1763 123 1772 158 q 1725 56 1753 88 q 1643 6 1697 25 q 1500 -14 1589 -14 z "
+        },
+        "₱": {
+            "ha": 928,
+            "x_min": 28,
+            "x_max": 900,
+            "o": "m 125 0 l 125 972 l 471 972 q 660 935 583 972 q 777 819 737 897 q 817 621 817 742 q 769 416 817 494 q 644 303 722 339 q 475 268 566 268 l 303 268 l 303 0 l 125 0 m 303 417 l 454 417 q 601 466 552 417 q 650 621 650 516 q 601 775 650 726 q 450 824 551 824 l 303 824 l 303 417 m 28 656 l 28 754 l 900 754 l 900 656 l 28 656 m 28 486 l 28 585 l 900 585 l 900 486 l 28 486 z "
+        },
+        "₽": {
+            "ha": 846,
+            "x_min": 28,
+            "x_max": 817,
+            "o": "m 125 0 l 125 972 l 471 972 q 660 939 583 972 q 777 836 737 906 q 817 658 817 767 q 777 477 817 549 q 661 372 738 406 q 475 338 585 338 l 28 338 l 28 486 l 454 486 q 591 527 545 486 q 636 656 636 568 q 590 783 636 743 q 450 824 544 824 l 303 824 l 303 0 l 125 0 m 28 114 l 28 236 l 542 236 l 542 114 l 28 114 z "
+        },
+        "₹": {
+            "ha": 757,
+            "x_min": 69,
+            "x_max": 724,
+            "o": "m 69 336 l 69 458 l 240 458 q 401 506 344 458 q 458 653 458 554 q 401 800 458 751 q 240 850 344 850 l 69 850 l 69 972 l 724 972 l 724 850 l 476 850 l 489 893 q 595 788 558 851 q 632 639 632 724 q 586 477 632 544 q 456 373 540 409 q 260 336 372 336 l 69 336 m 521 0 l 244 394 l 435 394 l 714 0 l 521 0 m 69 593 l 69 715 l 724 715 l 724 593 l 69 593 z "
+        },
+        "£": {
+            "ha": 722,
+            "x_min": 56,
+            "x_max": 686,
+            "o": "m 67 0 q 111 143 93 76 q 141 280 128 209 q 163 442 153 351 l 186 664 q 277 905 203 818 q 499 992 351 992 q 593 980 549 992 q 679 943 637 967 l 665 761 q 589 806 626 790 q 508 822 552 822 q 407 785 443 822 q 364 675 372 747 l 340 453 q 318 298 331 363 q 288 181 306 234 q 240 68 269 127 l 192 167 l 686 167 l 686 0 l 67 0 m 56 433 l 56 556 l 600 556 l 600 433 l 56 433 z "
+        },
+        "₩": {
+            "ha": 1343,
+            "x_min": 14,
+            "x_max": 1329,
+            "o": "m 288 0 l 69 972 l 254 972 l 408 176 l 369 176 l 610 944 l 733 944 l 983 176 l 943 176 l 1089 972 l 1274 972 l 1044 0 l 888 0 l 647 792 l 694 792 l 456 0 l 288 0 m 14 447 l 14 561 l 1329 561 l 1329 447 l 14 447 z "
+        },
+        "¥": {
+            "ha": 839,
+            "x_min": -11,
+            "x_max": 850,
+            "o": "m 331 0 l 331 393 l -11 972 l 183 972 l 461 479 l 378 479 l 656 972 l 850 972 l 508 393 l 508 0 l 331 0 m 135 172 l 135 294 l 704 294 l 704 172 l 135 172 m 135 367 l 135 489 l 704 489 l 704 367 l 135 367 z "
+        },
+        "∙": {
+            "ha": 322,
+            "x_min": 75,
+            "x_max": 247,
+            "o": "m 75 296 l 75 476 l 247 476 l 247 296 l 75 296 z "
+        },
+        "∕": {
+            "ha": 499,
+            "x_min": -11,
+            "x_max": 535,
+            "o": "m -11 -118 l 361 972 l 535 972 l 163 -118 l -11 -118 z "
+        },
+        "+": {
+            "ha": 625,
+            "x_min": 56,
+            "x_max": 569,
+            "o": "m 242 133 l 242 319 l 56 319 l 56 450 l 242 450 l 242 636 l 383 636 l 383 450 l 569 450 l 569 319 l 383 319 l 383 133 l 242 133 z "
+        },
+        "−": {
+            "ha": 625,
+            "x_min": 56,
+            "x_max": 569,
+            "o": "m 56 319 l 56 450 l 569 450 l 569 319 l 56 319 z "
+        },
+        "×": {
+            "ha": 603,
+            "x_min": 44,
+            "x_max": 558,
+            "o": "m 138 128 l 44 221 l 465 642 l 558 549 l 138 128 m 465 128 l 44 549 l 138 642 l 558 221 l 465 128 z "
+        },
+        "÷": {
+            "ha": 681,
+            "x_min": 56,
+            "x_max": 625,
+            "o": "m 56 319 l 56 450 l 625 450 l 625 319 l 56 319 m 254 61 l 254 236 l 426 236 l 426 61 l 254 61 m 254 533 l 254 708 l 426 708 l 426 533 l 254 533 z "
+        },
+        "=": {
+            "ha": 625,
+            "x_min": 56,
+            "x_max": 569,
+            "o": "m 56 433 l 56 561 l 569 561 l 569 433 l 56 433 m 56 208 l 56 336 l 569 336 l 569 208 l 56 208 z "
+        },
+        "≠": {
+            "ha": 625,
+            "x_min": 56,
+            "x_max": 569,
+            "o": "m 119 132 l 397 638 l 522 638 l 244 132 l 119 132 m 56 433 l 56 561 l 569 561 l 569 433 l 56 433 m 56 208 l 56 336 l 569 336 l 569 208 l 56 208 z "
+        },
+        ">": {
+            "ha": 571,
+            "x_min": 25,
+            "x_max": 515,
+            "o": "m 25 93 l 515 313 l 515 457 l 25 678 l 25 533 l 371 385 l 25 238 l 25 93 z "
+        },
+        "<": {
+            "ha": 571,
+            "x_min": 56,
+            "x_max": 546,
+            "o": "m 546 93 l 56 313 l 56 457 l 546 678 l 546 533 l 200 385 l 546 238 l 546 93 z "
+        },
+        "≥": {
+            "ha": 617,
+            "x_min": 47,
+            "x_max": 561,
+            "o": "m 47 242 l 561 422 l 561 561 l 47 743 l 47 610 l 394 492 l 47 375 l 47 242 m 561 65 l 561 190 l 47 190 l 47 65 l 561 65 z "
+        },
+        "≤": {
+            "ha": 617,
+            "x_min": 56,
+            "x_max": 569,
+            "o": "m 569 242 l 56 422 l 56 561 l 569 743 l 569 610 l 222 492 l 569 375 l 569 242 m 56 65 l 56 190 l 569 190 l 569 65 l 56 65 z "
+        },
+        "±": {
+            "ha": 625,
+            "x_min": 56,
+            "x_max": 569,
+            "o": "m 244 257 l 244 438 l 56 438 l 56 563 l 244 563 l 244 743 l 381 743 l 381 563 l 569 563 l 569 438 l 381 438 l 381 257 l 244 257 m 56 65 l 56 190 l 569 190 l 569 65 l 56 65 z "
+        },
+        "≈": {
+            "ha": 646,
+            "x_min": 56,
+            "x_max": 590,
+            "o": "m 443 401 q 369 418 403 401 q 301 451 335 435 q 231 468 268 468 q 176 411 176 468 l 56 411 q 97 548 59 501 q 203 596 134 596 q 280 579 244 596 q 348 546 315 563 q 415 529 381 529 q 469 586 469 529 l 590 586 q 550 449 588 497 q 443 401 512 401 m 443 175 q 369 192 403 175 q 301 225 335 208 q 231 242 268 242 q 176 185 176 242 l 56 185 q 97 322 59 274 q 203 369 134 369 q 280 353 244 369 q 348 319 315 336 q 415 303 381 303 q 469 360 469 303 l 590 360 q 550 223 588 270 q 443 175 512 175 z "
+        },
+        "~": {
+            "ha": 646,
+            "x_min": 56,
+            "x_max": 590,
+            "o": "m 443 401 q 369 418 403 401 q 301 451 335 435 q 231 468 268 468 q 176 411 176 468 l 56 411 q 97 548 59 501 q 203 596 134 596 q 280 579 244 596 q 348 546 315 563 q 415 529 381 529 q 469 586 469 529 l 590 586 q 550 449 588 497 q 443 401 512 401 z "
+        },
+        "¬": {
+            "ha": 708,
+            "x_min": 56,
+            "x_max": 653,
+            "o": "m 511 210 l 511 433 l 56 433 l 56 564 l 653 564 l 653 210 l 511 210 z "
+        },
+        "∞": {
+            "ha": 1001,
+            "x_min": 28,
+            "x_max": 974,
+            "o": "m 294 225 q 158 259 218 225 q 63 353 97 294 q 28 489 28 413 q 63 624 28 565 q 158 718 97 684 q 294 753 218 753 q 429 718 369 753 q 523 624 488 684 q 557 489 557 565 q 523 353 557 413 q 429 259 488 294 q 294 225 369 225 m 306 364 q 391 399 358 364 q 425 489 425 434 q 391 579 425 544 q 306 614 358 614 q 220 579 253 614 q 186 489 186 544 q 220 399 186 434 q 306 364 253 364 m 713 225 q 578 259 638 225 q 484 353 519 294 q 450 489 450 413 q 484 624 450 565 q 578 718 519 684 q 713 753 638 753 q 847 718 788 753 q 940 624 906 684 q 974 489 974 565 q 940 353 974 413 q 847 259 906 294 q 713 225 788 225 m 701 364 q 783 399 751 364 q 815 489 815 434 q 783 579 815 544 q 701 614 751 614 q 616 579 649 614 q 582 489 582 544 q 616 399 582 434 q 701 364 649 364 z "
+        },
+        "∅": {
+            "ha": 714,
+            "x_min": 42,
+            "x_max": 672,
+            "o": "m 357 72 q 200 114 271 72 q 88 227 130 156 q 46 383 46 297 q 88 539 46 469 q 200 652 130 610 q 357 694 271 694 q 513 652 442 694 q 626 539 583 610 q 668 383 668 469 q 626 227 668 297 q 513 114 583 156 q 357 72 442 72 m 357 214 q 441 236 404 214 q 500 297 478 258 q 521 383 521 335 q 500 470 521 432 q 441 531 478 508 q 357 553 404 553 q 273 531 310 553 q 214 470 235 508 q 193 383 193 432 q 214 297 193 335 q 273 236 235 258 q 357 214 310 214 m 100 61 l 42 119 l 614 706 l 672 647 l 100 61 z "
+        },
+        "∫": {
+            "ha": 554,
+            "x_min": 11,
+            "x_max": 543,
+            "o": "m 121 -297 q 62 -292 89 -297 q 11 -278 35 -287 l 21 -124 q 45 -128 33 -126 q 72 -131 58 -131 q 146 -100 122 -131 q 172 -18 170 -69 l 206 750 q 273 932 211 873 q 433 992 335 992 q 493 987 466 992 q 543 972 519 982 l 533 818 q 509 823 522 822 q 482 825 497 825 q 409 794 433 825 q 382 713 384 764 l 349 -56 q 282 -238 344 -178 q 121 -297 220 -297 z "
+        },
+        "Ω": {
+            "ha": 1132,
+            "x_min": 69,
+            "x_max": 1063,
+            "o": "m 69 0 l 69 158 l 274 158 q 148 305 201 213 q 96 529 96 398 q 155 773 96 669 q 319 934 214 877 q 565 992 425 992 q 811 936 706 992 q 976 778 917 881 q 1035 529 1035 674 q 984 305 1035 396 q 856 158 933 215 l 1063 158 l 1063 0 l 636 0 l 636 140 q 788 291 735 202 q 840 506 840 380 q 808 669 840 598 q 714 781 776 740 q 565 821 653 821 q 416 781 478 821 q 323 669 355 740 q 290 506 290 598 q 314 355 290 422 q 382 234 337 288 q 493 140 427 181 l 493 0 l 69 0 z "
+        },
+        "∆": {
+            "ha": 939,
+            "x_min": 19,
+            "x_max": 919,
+            "o": "m 19 0 l 19 60 l 381 972 l 558 972 l 919 58 l 919 0 l 19 0 m 199 71 l 147 158 l 792 158 l 740 71 l 432 843 l 507 843 l 199 71 z "
+        },
+        "∏": {
+            "ha": 1039,
+            "x_min": 14,
+            "x_max": 1025,
+            "o": "m 136 -278 l 136 806 l 14 806 l 14 972 l 1025 972 l 1025 806 l 903 806 l 903 -278 l 725 -278 l 725 806 l 314 806 l 314 -278 l 136 -278 z "
+        },
+        "∑": {
+            "ha": 861,
+            "x_min": 28,
+            "x_max": 847,
+            "o": "m 28 -278 l 28 -194 l 465 343 l 28 881 l 28 972 l 833 972 l 833 806 l 163 806 l 214 908 l 675 347 l 214 -214 l 163 -111 l 847 -111 l 847 -278 l 28 -278 z "
+        },
+        "√": {
+            "ha": 1057,
+            "x_min": 14,
+            "x_max": 1043,
+            "o": "m 351 -278 l 135 349 l 211 267 l 14 267 l 14 433 l 283 433 l 474 -121 l 361 -121 l 713 972 l 1043 972 l 1043 806 l 790 806 l 867 904 l 483 -278 l 351 -278 z "
+        },
+        "µ": {
+            "ha": 844,
+            "x_min": 93,
+            "x_max": 789,
+            "o": "m 93 -336 l 93 694 l 265 694 l 265 293 q 298 171 265 211 q 403 131 330 131 q 478 146 446 131 q 533 189 510 161 l 533 694 l 706 694 l 706 239 q 710 164 706 187 q 728 134 715 140 q 767 128 742 128 l 789 128 l 774 -14 l 711 -14 q 619 6 656 -14 q 561 58 582 25 q 489 10 532 31 q 388 -11 446 -11 q 321 -5 352 -11 q 265 13 290 2 l 265 -336 l 93 -336 z "
+        },
+        "∂": {
+            "ha": 826,
+            "x_min": 42,
+            "x_max": 757,
+            "o": "m 314 -14 q 159 23 219 -14 q 70 124 99 60 q 42 271 42 188 q 67 437 42 358 q 139 577 92 516 q 253 673 186 638 q 401 708 319 708 q 527 679 478 708 q 610 596 576 650 l 582 469 q 524 539 558 510 q 431 567 490 567 q 344 544 383 567 q 277 481 305 521 q 233 389 249 440 q 218 282 218 338 q 250 164 218 201 q 332 128 281 128 q 424 163 383 128 q 493 255 464 197 q 542 383 523 313 q 571 526 562 453 q 581 661 581 598 q 564 765 581 719 q 511 838 548 811 q 413 864 474 864 q 322 851 368 864 q 233 817 276 838 l 233 965 q 331 994 277 983 q 440 1006 384 1006 q 630 956 560 1006 q 728 820 699 906 q 757 622 757 733 q 741 451 757 540 q 693 279 726 362 q 607 130 660 197 q 482 25 555 64 q 314 -14 409 -14 z "
+        },
+        "%": {
+            "ha": 1276,
+            "x_min": 64,
+            "x_max": 1213,
+            "o": "m 301 436 q 173 473 226 436 q 92 573 119 509 q 64 718 64 636 q 129 917 64 842 q 301 992 194 992 q 474 917 409 992 q 539 718 539 842 q 511 573 539 636 q 430 473 483 509 q 301 436 376 436 m 301 557 q 372 599 347 557 q 397 718 397 641 q 371 833 397 795 q 301 871 345 871 q 232 833 258 871 q 206 718 206 795 q 229 599 206 641 q 301 557 253 557 m 283 0 l 857 972 l 994 972 l 422 0 l 283 0 m 975 -19 q 846 17 899 -19 q 765 117 793 53 q 738 263 738 181 q 803 461 738 387 q 975 536 868 536 q 1148 461 1083 536 q 1213 263 1213 387 q 1184 117 1213 181 q 1103 17 1156 53 q 975 -19 1050 -19 m 975 101 q 1046 143 1021 101 q 1071 263 1071 185 q 1045 377 1071 340 q 975 415 1019 415 q 905 377 931 415 q 879 263 879 340 q 903 143 879 185 q 975 101 926 101 z "
+        },
+        "‰": {
+            "ha": 1839,
+            "x_min": 64,
+            "x_max": 1775,
+            "o": "m 301 436 q 173 473 226 436 q 92 573 119 509 q 64 718 64 636 q 129 917 64 842 q 301 992 194 992 q 474 917 409 992 q 539 718 539 842 q 511 573 539 636 q 430 473 483 509 q 301 436 376 436 m 301 557 q 372 599 347 557 q 397 718 397 641 q 371 833 397 795 q 301 871 345 871 q 232 833 258 871 q 206 718 206 795 q 229 599 206 641 q 301 557 253 557 m 283 0 l 857 972 l 994 972 l 422 0 l 283 0 m 975 -19 q 846 17 899 -19 q 765 117 793 53 q 738 263 738 181 q 803 461 738 387 q 975 536 868 536 q 1148 461 1083 536 q 1213 263 1213 387 q 1184 117 1213 181 q 1103 17 1156 53 q 975 -19 1050 -19 m 975 101 q 1046 143 1021 101 q 1071 263 1071 185 q 1045 377 1071 340 q 975 415 1019 415 q 905 377 931 415 q 879 263 879 340 q 903 143 879 185 q 975 101 926 101 m 1538 -19 q 1409 17 1462 -19 q 1328 117 1356 53 q 1300 263 1300 181 q 1365 461 1300 387 q 1538 536 1431 536 q 1710 461 1645 536 q 1775 263 1775 387 q 1747 117 1775 181 q 1666 17 1719 53 q 1538 -19 1613 -19 m 1538 101 q 1608 143 1583 101 q 1633 263 1633 185 q 1607 377 1633 340 q 1538 415 1581 415 q 1468 377 1494 415 q 1442 263 1442 340 q 1465 143 1442 185 q 1538 101 1489 101 z "
+        },
+        "◊": {
+            "ha": 833,
+            "x_min": 14,
+            "x_max": 819,
+            "o": "m 333 0 l 14 486 l 333 972 l 500 972 l 819 486 l 500 0 l 333 0 m 390 129 l 622 486 l 390 843 l 440 843 l 211 486 l 440 129 l 390 129 z "
+        },
+        "@": {
+            "ha": 1003,
+            "x_min": 67,
+            "x_max": 936,
+            "o": "m 411 -121 q 160 -27 253 -121 q 67 236 67 67 q 108 447 67 350 q 223 616 150 544 q 391 728 297 688 q 590 768 485 768 q 845 673 754 768 q 936 417 936 577 q 917 281 936 347 q 854 173 897 215 q 739 131 810 131 q 696 143 713 131 q 679 201 679 155 q 705 339 679 263 q 756 526 730 415 q 688 577 730 553 q 588 600 645 600 q 459 567 522 600 q 345 477 397 533 q 264 352 294 421 q 233 213 233 283 q 245 136 233 172 q 285 78 258 101 q 360 56 313 56 q 447 74 400 56 q 537 128 494 92 q 610 217 580 165 q 607 197 609 210 q 606 168 606 184 q 613 120 606 146 q 638 76 620 94 q 686 58 655 58 q 738 69 708 58 q 798 96 767 79 q 851 133 828 113 l 856 129 q 742 -1 810 55 q 589 -89 673 -58 q 411 -121 504 -121 m 406 147 q 359 174 374 147 q 344 240 344 201 q 369 347 344 297 q 434 434 394 397 q 517 494 473 472 q 600 515 562 515 q 633 511 612 515 q 663 485 654 507 q 625 370 653 429 q 559 260 597 311 q 481 178 522 210 q 406 147 440 147 z "
+        },
+        "&": {
+            "ha": 871,
+            "x_min": 44,
+            "x_max": 867,
+            "o": "m 368 -33 q 184 5 256 -33 q 78 103 113 42 q 44 233 44 164 q 68 347 44 297 q 130 437 92 397 q 214 510 169 476 q 141 622 172 562 q 110 747 110 682 q 148 871 110 819 q 248 949 187 922 q 379 976 310 976 q 552 921 492 976 q 613 776 613 865 q 584 670 613 715 q 510 588 555 624 q 415 515 465 551 l 610 293 q 617 343 615 317 q 621 393 619 368 q 623 442 622 418 q 624 489 623 467 l 789 489 q 784 395 789 449 q 765 282 779 341 q 721 167 750 222 l 867 0 l 667 0 l 624 47 q 515 -11 578 11 q 368 -33 453 -33 m 392 99 q 476 111 441 99 q 536 146 511 124 l 296 417 q 244 342 264 383 q 224 249 224 301 q 238 178 224 213 q 288 121 251 144 q 392 99 324 99 m 343 600 q 403 648 376 624 q 445 699 430 672 q 461 758 461 726 q 438 819 461 800 q 376 839 415 839 q 307 814 335 839 q 279 740 279 790 q 295 674 279 706 q 343 600 311 641 z "
+        },
+        "¶": {
+            "ha": 868,
+            "x_min": 46,
+            "x_max": 806,
+            "o": "m 406 0 l 406 318 q 206 374 286 325 q 86 496 126 423 q 46 647 46 569 q 90 803 46 728 q 222 925 133 877 q 444 972 310 972 l 806 972 l 806 824 l 710 824 l 710 0 l 588 0 l 588 824 l 501 824 l 501 0 l 406 0 z "
+        },
+        "§": {
+            "ha": 639,
+            "x_min": 54,
+            "x_max": 585,
+            "o": "m 288 -118 q 179 -100 231 -118 q 89 -61 128 -82 l 101 85 q 198 36 143 57 q 297 15 253 15 q 376 37 347 15 q 406 96 406 58 q 380 159 406 134 q 315 203 355 184 q 230 241 275 222 q 145 288 185 261 q 80 357 105 315 q 54 461 54 399 q 87 577 54 528 q 172 665 119 627 q 133 724 153 682 q 113 825 113 767 q 140 933 113 884 q 220 1012 167 983 q 351 1042 273 1042 q 463 1024 409 1042 q 550 985 517 1006 l 538 839 q 440 888 495 867 q 339 908 384 908 q 266 892 299 908 q 233 839 233 876 q 259 781 233 805 q 324 738 284 757 q 409 697 364 718 q 494 645 454 675 q 559 572 534 615 q 585 463 585 528 q 572 385 585 423 q 532 315 558 348 q 465 258 505 283 q 510 199 496 233 q 525 114 525 164 q 505 8 525 62 q 432 -82 484 -45 q 288 -118 381 -118 m 394 321 q 436 366 417 338 q 456 432 456 394 q 432 500 456 472 q 361 552 408 528 q 249 607 315 577 q 207 563 227 592 q 186 492 186 535 q 209 425 186 453 q 279 372 233 397 q 394 321 325 347 z "
+        },
+        "©": {
+            "ha": 974,
+            "x_min": 54,
+            "x_max": 919,
+            "o": "m 488 50 q 264 107 362 50 q 110 267 166 164 q 54 507 54 369 q 110 747 54 644 q 264 906 166 849 q 488 963 362 963 q 711 906 613 963 q 864 747 808 849 q 919 507 919 644 q 864 267 919 369 q 711 107 808 164 q 488 50 613 50 m 499 264 q 381 294 433 264 q 300 378 330 324 q 271 504 271 432 q 335 680 271 614 q 499 746 399 746 q 574 737 536 746 q 640 714 611 728 l 626 596 q 564 619 594 610 q 499 628 533 628 q 424 595 450 628 q 397 504 397 562 q 424 415 397 449 q 499 381 450 381 q 564 390 533 381 q 626 415 594 400 l 640 299 q 573 273 611 282 q 499 264 535 264 m 488 147 q 668 194 596 147 q 775 323 740 242 q 811 507 811 404 q 775 691 811 610 q 668 818 740 772 q 488 865 596 865 q 306 818 378 865 q 198 691 234 772 q 163 507 163 610 q 198 323 163 404 q 306 194 234 242 q 488 147 378 147 z "
+        },
+        "®": {
+            "ha": 974,
+            "x_min": 56,
+            "x_max": 918,
+            "o": "m 488 51 q 265 108 363 51 q 111 268 167 165 q 56 507 56 370 q 111 747 56 644 q 265 906 167 849 q 488 963 363 963 q 710 906 613 963 q 863 747 807 849 q 918 507 918 644 q 863 268 918 370 q 710 108 807 165 q 488 51 613 51 m 488 149 q 667 196 596 149 q 774 324 739 243 q 810 507 810 405 q 774 690 810 610 q 667 817 739 771 q 488 864 596 864 q 307 817 379 864 q 200 690 235 771 q 164 507 164 610 q 200 324 164 405 q 307 196 235 243 q 488 149 379 149 m 313 282 l 313 747 l 489 747 q 611 710 567 747 q 654 594 654 673 q 634 522 654 554 q 589 474 614 490 l 692 282 l 563 282 l 482 438 l 435 438 l 435 282 l 313 282 m 435 550 l 479 550 q 517 564 506 550 q 529 597 529 578 q 518 631 529 618 q 479 643 506 643 l 435 643 l 435 550 z "
+        },
+        "™": {
+            "ha": 1026,
+            "x_min": 44,
+            "x_max": 953,
+            "o": "m 425 468 l 493 972 l 563 972 l 689 767 l 814 972 l 885 972 l 953 468 l 838 468 l 792 842 l 843 831 l 696 590 l 681 590 l 535 831 l 586 842 l 539 468 l 425 468 m 179 468 l 179 864 l 44 864 l 44 972 l 435 972 l 421 864 l 290 864 l 290 468 l 179 468 z "
+        },
+        "°": {
+            "ha": 401,
+            "x_min": 11,
+            "x_max": 390,
+            "o": "m 200 669 q 61 725 110 669 q 11 858 11 781 q 61 992 11 935 q 200 1049 110 1049 q 341 992 291 1049 q 390 858 390 935 q 341 725 390 781 q 200 669 291 669 m 200 754 q 271 783 247 754 q 294 858 294 812 q 271 935 294 906 q 200 964 247 964 q 131 935 156 964 q 106 858 106 906 q 131 783 106 812 q 200 754 156 754 z "
+        },
+        "|": {
+            "ha": 311,
+            "x_min": 69,
+            "x_max": 242,
+            "o": "m 69 -292 l 69 1042 l 242 1042 l 242 -292 l 69 -292 z "
+        },
+        "¦": {
+            "ha": 311,
+            "x_min": 69,
+            "x_max": 242,
+            "o": "m 69 475 l 69 1042 l 242 1042 l 242 475 l 69 475 m 69 -292 l 69 275 l 242 275 l 242 -292 l 69 -292 z "
+        },
+        "†": {
+            "ha": 592,
+            "x_min": 50,
+            "x_max": 542,
+            "o": "m 233 0 l 192 357 l 232 521 l 50 485 l 50 668 l 232 631 l 192 843 l 400 843 l 360 631 l 542 668 l 542 485 l 360 521 l 400 357 l 358 0 l 233 0 z "
+        },
+        "ℓ": {
+            "ha": 789,
+            "x_min": 69,
+            "x_max": 692,
+            "o": "m 432 -11 q 256 61 317 -11 q 196 254 196 133 l 196 754 q 254 936 196 869 q 440 1004 313 1004 q 612 944 552 1004 q 672 767 672 883 q 630 597 672 666 q 507 480 587 528 q 317 395 428 431 q 69 324 206 358 l 69 442 q 253 497 172 472 q 393 556 335 523 q 482 641 451 590 q 513 772 513 692 q 440 890 513 890 q 388 866 407 890 q 368 781 368 841 l 368 250 q 391 142 368 174 q 461 110 415 110 q 531 149 510 110 q 553 256 551 188 l 692 256 q 666 114 690 174 q 586 22 642 54 q 432 -11 530 -11 z "
+        },
+        "‡": {
+            "ha": 656,
+            "x_min": 82,
+            "x_max": 574,
+            "o": "m 224 -82 l 264 131 l 82 93 l 82 276 l 264 240 l 224 381 l 264 521 l 82 485 l 82 668 l 264 631 l 224 843 l 432 843 l 392 631 l 574 668 l 574 485 l 392 521 l 432 381 l 392 240 l 574 276 l 574 93 l 392 131 l 432 -82 l 224 -82 z "
+        },
+        "№": {
+            "ha": 1719,
+            "x_min": 107,
+            "x_max": 1664,
+            "o": "m 107 0 l 107 972 l 282 972 l 697 344 l 697 972 l 875 972 l 875 0 l 729 0 l 285 667 l 285 0 l 107 0 m 1135 82 l 1135 224 l 1538 224 l 1538 82 l 1135 82 m 1336 328 q 1159 374 1233 328 q 1047 495 1086 419 q 1008 660 1008 570 q 1047 825 1008 749 q 1159 946 1086 901 q 1336 992 1233 992 q 1513 946 1440 992 q 1625 825 1586 901 q 1664 660 1664 749 q 1625 495 1664 570 q 1513 374 1586 419 q 1336 328 1440 328 m 1336 469 q 1455 523 1413 469 q 1497 660 1497 576 q 1455 797 1497 744 q 1336 850 1413 850 q 1217 797 1259 850 q 1175 660 1175 744 q 1217 523 1175 576 q 1336 469 1259 469 z "
+        },
+        "℮": {
+            "ha": 833,
+            "x_min": 69,
+            "x_max": 789,
+            "o": "m 429 -24 q 232 31 312 -24 q 110 172 151 85 q 69 360 69 260 q 101 532 69 460 q 185 651 133 605 q 301 720 238 698 q 429 743 365 743 q 613 697 531 743 q 742 564 694 650 q 789 360 789 478 l 228 360 l 228 118 q 313 60 258 86 q 429 35 367 35 q 591 76 531 35 q 697 193 651 118 l 746 165 q 673 71 713 114 q 574 2 632 28 q 429 -24 515 -24 m 632 418 l 632 606 q 553 659 606 633 q 428 686 500 686 q 310 662 359 686 q 228 607 260 638 l 228 418 l 632 418 z "
+        },
+        "^": {
+            "ha": 711,
+            "x_min": 69,
+            "x_max": 642,
+            "o": "m 69 576 l 69 760 l 356 1054 l 642 760 l 642 576 l 356 836 l 69 576 z "
+        },
+        "′": {
+            "ha": 265,
+            "x_min": 50,
+            "x_max": 188,
+            "o": "m 50 699 l 50 972 l 188 972 l 147 699 l 50 699 z "
+        },
+        "″": {
+            "ha": 474,
+            "x_min": 50,
+            "x_max": 396,
+            "o": "m 258 699 l 258 972 l 396 972 l 356 699 l 258 699 m 50 699 l 50 972 l 188 972 l 147 699 l 50 699 z "
+        },
+        "̈": {
+            "ha": 0,
+            "x_min": -207,
+            "x_max": 207,
+            "o": "m 74 821 l 74 946 l 207 946 l 207 821 l 74 821 m -207 821 l -207 946 l -74 946 l -74 821 l -207 821 z "
+        },
+        "̇": {
+            "ha": 0,
+            "x_min": -72,
+            "x_max": 72,
+            "o": "m -72 836 l -72 971 l 72 971 l 72 836 l -72 836 z "
+        },
+        "̀": {
+            "ha": 0,
+            "x_min": -137,
+            "x_max": 136,
+            "o": "m 136 792 l -137 897 l -137 1057 l 136 901 l 136 792 z "
+        },
+        "́": {
+            "ha": 0,
+            "x_min": -136,
+            "x_max": 138,
+            "o": "m -136 792 l -136 901 l 138 1057 l 138 897 l -136 792 z "
+        },
+        "̋": {
+            "ha": 0,
+            "x_min": -162,
+            "x_max": 318,
+            "o": "m 42 817 l 158 1063 l 318 1063 l 151 817 l 42 817 m -162 817 l -57 1063 l 103 1063 l -53 817 l -162 817 z "
+        },
+        "̂": {
+            "ha": 0,
+            "x_min": -183,
+            "x_max": 183,
+            "o": "m -183 769 l -183 879 l 0 1035 l 183 879 l 183 769 l 0 885 l -183 769 z "
+        },
+        "̌": {
+            "ha": 0,
+            "x_min": -183,
+            "x_max": 183,
+            "o": "m 0 776 l -183 932 l -183 1042 l 0 926 l 183 1042 l 183 932 l 0 776 z "
+        },
+        "̆": {
+            "ha": 0,
+            "x_min": -214,
+            "x_max": 214,
+            "o": "m 1 815 q -114 842 -66 815 q -188 912 -162 868 q -214 1008 -214 956 l -96 1008 q -70 943 -96 966 q 0 919 -44 919 q 70 943 44 919 q 96 1008 96 966 l 214 1008 q 188 912 214 956 q 115 842 163 868 q 1 815 67 815 z "
+        },
+        "̊": {
+            "ha": 0,
+            "x_min": -144,
+            "x_max": 144,
+            "o": "m 0 792 q -106 832 -67 792 q -144 926 -144 872 q -106 1022 -144 982 q 0 1063 -67 1063 q 106 1022 68 1063 q 144 926 144 982 q 106 832 144 872 q 0 792 68 792 m 0 864 q 44 881 26 864 q 61 926 61 899 q 44 971 61 953 q 0 989 26 989 q -43 971 -26 989 q -61 926 -61 953 q -43 881 -61 899 q 0 864 -26 864 z "
+        },
+        "̃": {
+            "ha": 0,
+            "x_min": -237,
+            "x_max": 238,
+            "o": "m 118 803 q 51 818 83 803 q -12 849 18 833 q -72 864 -43 864 q -119 814 -119 864 l -237 814 q -204 939 -234 895 q -118 982 -174 982 q -51 967 -83 982 q 13 936 -18 951 q 72 921 43 921 q 119 971 119 921 l 238 971 q 205 846 235 890 q 118 803 174 803 z "
+        },
+        "̄": {
+            "ha": 0,
+            "x_min": -228,
+            "x_max": 228,
+            "o": "m -228 821 l -228 933 l 228 933 l 228 821 l -228 821 z "
+        },
+        "̉": {
+            "ha": 0,
+            "x_min": -131,
+            "x_max": 118,
+            "o": "m 22 742 l -29 793 q 14 836 -2 817 q 29 881 29 856 q 16 914 29 903 q -22 925 2 925 q -65 918 -43 925 q -107 899 -86 910 l -131 983 q -77 1003 -106 996 q -19 1010 -49 1010 q 78 978 38 1010 q 118 886 118 946 q 93 808 118 840 q 22 742 68 775 z "
+        },
+        "̏": {
+            "ha": 0,
+            "x_min": -299,
+            "x_max": 165,
+            "o": "m 165 817 l 56 817 l -83 1063 l 76 1063 l 165 817 m -39 817 l -149 817 l -299 1063 l -139 1063 l -39 817 z "
+        },
+        "̑": {
+            "ha": 0,
+            "x_min": -214,
+            "x_max": 214,
+            "o": "m 1 1008 q 115 982 67 1008 q 188 912 163 956 q 214 815 214 868 l 96 815 q 70 881 96 858 q 0 904 44 904 q -70 881 -44 904 q -96 815 -96 858 l -214 815 q -188 912 -214 868 q -114 982 -162 956 q 1 1008 -66 1008 z "
+        },
+        "̒": {
+            "ha": 0,
+            "x_min": -86,
+            "x_max": 85,
+            "o": "m 0 1125 l 74 1125 l 21 972 l 85 972 l 85 815 l -86 815 l -86 956 l 0 1125 z "
+        },
+        "̛": {
+            "ha": 0,
+            "x_min": 0,
+            "x_max": 258,
+            "o": "m 0 567 l 0 681 q 82 705 52 681 q 111 783 111 728 l 258 783 q 221 668 258 717 q 124 593 183 619 q 0 567 65 567 z "
+        },
+        "̣": {
+            "ha": 0,
+            "x_min": -72,
+            "x_max": 72,
+            "o": "m -72 -247 l -72 -112 l 72 -112 l 72 -247 l -72 -247 z "
+        },
+        "̤": {
+            "ha": 0,
+            "x_min": -207,
+            "x_max": 207,
+            "o": "m 74 -251 l 74 -126 l 207 -126 l 207 -251 l 74 -251 m -207 -251 l -207 -126 l -74 -126 l -74 -251 l -207 -251 z "
+        },
+        "̦": {
+            "ha": 0,
+            "x_min": -83,
+            "x_max": 88,
+            "o": "m 1 -436 l -72 -436 l -19 -283 l -83 -283 l -83 -126 l 88 -126 l 88 -267 l 1 -436 z "
+        },
+        "̧": {
+            "ha": 0,
+            "x_min": -118,
+            "x_max": 153,
+            "o": "m 8 -110 l -46 -89 q -13 -79 -29 -83 q 22 -75 3 -75 q 118 -107 83 -75 q 153 -196 153 -138 q 107 -298 153 -263 q -4 -332 62 -332 q -70 -324 -42 -332 q -118 -306 -98 -316 l -92 -224 q -48 -241 -69 -234 q -1 -247 -26 -247 q 46 -236 28 -247 q 64 -201 64 -224 q 46 -165 64 -177 q -7 -153 28 -153 q -39 -155 -24 -153 q -74 -162 -55 -157 l -35 0 l 42 0 l 8 -110 z "
+        },
+        "̨": {
+            "ha": 0,
+            "x_min": -151,
+            "x_max": 111,
+            "o": "m -42 0 l 44 0 q -33 -72 -3 -36 q -62 -144 -62 -107 q -44 -192 -62 -176 q 4 -208 -26 -208 q 48 -203 28 -208 q 88 -189 68 -198 l 111 -265 q 60 -285 90 -276 q -10 -293 30 -293 q -111 -261 -70 -293 q -151 -171 -151 -230 q -116 -71 -151 -115 q -42 0 -80 -27 z "
+        },
+        "̮": {
+            "ha": 0,
+            "x_min": -214,
+            "x_max": 214,
+            "o": "m 1 -319 q -114 -293 -66 -319 q -188 -223 -162 -267 q -214 -126 -214 -179 l -96 -126 q -70 -192 -96 -169 q 0 -215 -44 -215 q 70 -192 44 -215 q 96 -126 96 -169 l 214 -126 q 188 -223 214 -179 q 115 -293 163 -267 q 1 -319 67 -319 z "
+        },
+        "̱": {
+            "ha": 0,
+            "x_min": -228,
+            "x_max": 228,
+            "o": "m -228 -239 l -228 -126 l 228 -126 l 228 -239 l -228 -239 z "
+        },
+        "̵": {
+            "ha": 0,
+            "x_min": -206,
+            "x_max": 206,
+            "o": "m -206 315 l -206 431 l 206 431 l 206 315 l -206 315 z "
+        },
+        "ʼ": {
+            "ha": 283,
+            "x_min": 58,
+            "x_max": 229,
+            "o": "m 143 663 l 69 663 l 122 815 l 58 815 l 58 972 l 229 972 l 229 832 l 143 663 z "
+        },
+        "ʻ": {
+            "ha": 533,
+            "x_min": 179,
+            "x_max": 350,
+            "o": "m 265 1125 l 339 1125 l 286 972 l 350 972 l 350 815 l 179 815 l 179 956 l 265 1125 z "
+        },
+        "ˉ": {
+            "ha": 733,
+            "x_min": 139,
+            "x_max": 594,
+            "o": "z "
+        },
+        "ˋ": {
+            "ha": 399,
+            "x_min": 63,
+            "x_max": 336,
+            "o": "z "
+        },
+        "ʿ": {
+            "ha": 269,
+            "x_min": 63,
+            "x_max": 207,
+            "o": "m 207 792 q 101 832 140 792 q 63 926 63 872 q 101 1022 63 982 q 207 1063 140 1063 l 207 989 q 164 971 181 989 q 146 926 146 953 q 164 881 146 899 q 207 864 181 864 l 207 792 z "
+        },
+        "ʾ": {
+            "ha": 269,
+            "x_min": 63,
+            "x_max": 207,
+            "o": "m 63 792 l 63 864 q 106 881 89 864 q 124 926 124 899 q 106 971 124 953 q 63 989 89 989 l 63 1063 q 169 1022 131 1063 q 207 926 207 982 q 169 832 207 872 q 63 792 131 792 z "
+        },
+        "ˊ": {
+            "ha": 399,
+            "x_min": 63,
+            "x_max": 336,
+            "o": "z "
+        },
+        "ˌ": {
+            "ha": 244,
+            "x_min": 63,
+            "x_max": 182,
+            "o": "m 63 160 l 182 160 l 182 -111 l 63 -111 l 63 160 z "
+        },
+        "ˈ": {
+            "ha": 236,
+            "x_min": 63,
+            "x_max": 174,
+            "o": "m 63 1063 l 174 1063 l 174 792 l 63 792 l 63 1063 z "
+        },
+        "´": {
+            "ha": 663,
+            "x_min": 194,
+            "x_max": 468,
+            "o": "m 194 792 l 194 901 l 468 1057 l 468 897 l 194 792 z "
+        },
+        "˘": {
+            "ha": 706,
+            "x_min": 139,
+            "x_max": 567,
+            "o": "m 353 815 q 239 842 287 815 q 165 912 191 868 q 139 1008 139 956 l 257 1008 q 283 943 257 966 q 353 919 309 919 q 423 943 397 919 q 449 1008 449 966 l 567 1008 q 541 912 567 956 q 467 842 515 868 q 353 815 419 815 z "
+        },
+        "ˇ": {
+            "ha": 728,
+            "x_min": 181,
+            "x_max": 547,
+            "o": "m 364 776 l 181 932 l 181 1042 l 364 926 l 547 1042 l 547 932 l 364 776 z "
+        },
+        "¸": {
+            "ha": 549,
+            "x_min": 139,
+            "x_max": 410,
+            "o": "m 265 -110 l 211 -89 q 244 -79 228 -83 q 279 -75 260 -75 q 375 -107 340 -75 q 410 -196 410 -138 q 364 -298 410 -263 q 253 -332 319 -332 q 187 -324 215 -332 q 139 -306 159 -316 l 165 -224 q 209 -241 188 -234 q 256 -247 231 -247 q 303 -236 285 -247 q 321 -201 321 -224 q 303 -165 321 -177 q 250 -153 285 -153 q 218 -155 233 -153 q 183 -162 202 -157 l 222 0 l 299 0 l 265 -110 z "
+        },
+        "ˆ": {
+            "ha": 728,
+            "x_min": 181,
+            "x_max": 547,
+            "o": "m 181 769 l 181 879 l 364 1035 l 547 879 l 547 769 l 364 885 l 181 769 z "
+        },
+        "¨": {
+            "ha": 692,
+            "x_min": 139,
+            "x_max": 553,
+            "o": "m 419 821 l 419 946 l 553 946 l 553 821 l 419 821 m 139 821 l 139 946 l 272 946 l 272 821 l 139 821 z "
+        },
+        "˙": {
+            "ha": 533,
+            "x_min": 194,
+            "x_max": 339,
+            "o": "m 194 836 l 194 971 l 339 971 l 339 836 l 194 836 z "
+        },
+        "`": {
+            "ha": 663,
+            "x_min": 194,
+            "x_max": 468,
+            "o": "m 468 792 l 194 897 l 194 1057 l 468 901 l 468 792 z "
+        },
+        "˝": {
+            "ha": 758,
+            "x_min": 139,
+            "x_max": 619,
+            "o": "m 343 817 l 460 1063 l 619 1063 l 453 817 l 343 817 m 139 817 l 244 1063 l 404 1063 l 249 817 l 139 817 z "
+        },
+        "¯": {
+            "ha": 733,
+            "x_min": 139,
+            "x_max": 594,
+            "o": "m 139 821 l 139 933 l 594 933 l 594 821 l 139 821 z "
+        },
+        "˛": {
+            "ha": 540,
+            "x_min": 139,
+            "x_max": 401,
+            "o": "m 249 0 l 335 0 q 257 -72 287 -36 q 228 -144 228 -107 q 246 -192 228 -176 q 294 -208 265 -208 q 339 -203 319 -208 q 378 -189 358 -198 l 401 -265 q 350 -285 380 -276 q 281 -293 320 -293 q 180 -261 220 -293 q 139 -171 139 -230 q 175 -71 139 -115 q 249 0 210 -27 z "
+        },
+        "˚": {
+            "ha": 567,
+            "x_min": 139,
+            "x_max": 428,
+            "o": "m 283 792 q 178 832 217 792 q 139 926 139 872 q 178 1022 139 982 q 283 1063 217 1063 q 390 1022 351 1063 q 428 926 428 982 q 390 832 428 872 q 283 792 351 792 m 283 864 q 327 881 310 864 q 344 926 344 899 q 327 971 344 953 q 283 989 310 989 q 240 971 258 989 q 222 926 222 953 q 240 881 222 899 q 283 864 258 864 z "
+        },
+        "˜": {
+            "ha": 753,
+            "x_min": 139,
+            "x_max": 614,
+            "o": "m 494 803 q 427 818 460 803 q 364 849 394 833 q 304 864 333 864 q 257 814 257 864 l 139 814 q 172 939 142 895 q 258 982 202 982 q 326 967 293 982 q 389 936 358 951 q 449 921 419 921 q 496 971 496 921 l 614 971 q 581 846 611 890 q 494 803 551 803 z "
+        }
+    },
+    "familyName": "Cabin",
+    "ascender": 1340,
+    "descender": -347,
+    "underlinePosition": -69,
+    "underlineThickness": 35,
+    "boundingBox": {
+        "yMin": -436,
+        "xMin": -299,
+        "yMax": 1582,
+        "xMax": 1775
+    },
+    "resolution": 1000,
+    "original_font_information": {
+        "format": 0,
+        "copyright": "Copyright 2018 The Cabin Project Authors (https://github.com/impallari/Cabin)",
+        "fontFamily": "Cabin",
+        "fontSubfamily": "Bold",
+        "uniqueID": "3.001;IMPA;Cabin-Bold",
+        "fullName": "Cabin Bold",
+        "version": "Version 3.001",
+        "postScriptName": "Cabin-Bold",
+        "trademark": "Cabin is a trademark of Pablo Impallari. www.impallari.com Igino Marini. www.ikern.com.",
+        "manufacturer": "Pablo Impallari. http://www.impallari.com Igino Marini. http://www.ikern.com",
+        "designer": "Pablo Impallari",
+        "manufacturerURL": "http://www.impallari.com",
+        "designerURL": "http://www.impallari.com",
+        "licence": "This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: https://scripts.sil.org/OFL",
+        "licenceURL": "https://scripts.sil.org/OFL",
+        "unknown1": "Weight",
+        "unknown2": "Width",
+        "unknown3": "Regular",
+        "unknown4": "Medium",
+        "unknown5": "SemiBold",
+        "unknown6": "Bold",
+        "unknown7": "Condensed",
+        "unknown8": "Normal",
+        "unknown9": "Italic"
+    },
+    "cssFontWeight": "bold",
+    "cssFontStyle": "normal"
+}
diff --git a/public/app-resources/img/farmbot-desktop.png b/public/app-resources/img/farmbot-desktop.png
deleted file mode 100644
index cb61978a64..0000000000
Binary files a/public/app-resources/img/farmbot-desktop.png and /dev/null differ
diff --git a/public/app-resources/img/farmbot-mobile.png b/public/app-resources/img/farmbot-mobile.png
deleted file mode 100644
index 19fa3ee76e..0000000000
Binary files a/public/app-resources/img/farmbot-mobile.png and /dev/null differ
diff --git a/public/app-resources/img/farmbot-tablet.png b/public/app-resources/img/farmbot-tablet.png
deleted file mode 100644
index 9162385720..0000000000
Binary files a/public/app-resources/img/farmbot-tablet.png and /dev/null differ
diff --git a/public/app-resources/img/plant-icon-background.png b/public/app-resources/img/plant-icon-background.png
new file mode 100644
index 0000000000..98eb102cdd
Binary files /dev/null and b/public/app-resources/img/plant-icon-background.png differ
diff --git a/public/app-resources/languages/da.json b/public/app-resources/languages/da.json
index d1cc32935f..3cdbe4ea95 100644
--- a/public/app-resources/languages/da.json
+++ b/public/app-resources/languages/da.json
@@ -474,7 +474,7 @@
     "Crop map images": "Crop map images",
     "Crop search": "Crop search",
     "Current position": "Current position",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Custom": "Custom",
     "Custom buttons": "Custom buttons",
@@ -1374,7 +1374,6 @@
     "Point status": "Point status",
     "Points": "Points",
     "points panel": "points panel",
-    "Position (mm)": "Position (mm)",
     "Positions": "Positions",
     "Positive X": "Positive X",
     "Positive Y": "Positive Y",
@@ -1440,7 +1439,7 @@
     "Raspberry Pi Camera": "Raspberry Pi Camera",
     "Raspberry Pi GPIO pin already bound or in use.": "Raspberry Pi GPIO pin already bound or in use.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.",
-    "Raw Encoder data": "Raw Encoder data",
+    "Encoder (raw)": "Encoder (raw)",
     "Raw encoder position": "Raw encoder position",
     "re-seed account": "re-seed account",
     "Read pin": "Read pin",
@@ -1552,7 +1551,7 @@
     "saved garden": "saved garden",
     "Saved pin bindings": "Saved pin bindings",
     "saving...": "saving...",
-    "Scaled Encoder (mm)": "Scaled Encoder (mm)",
+    "Encoder (mm)": "Encoder (mm)",
     "Scaled encoder position": "Scaled encoder position",
     "Scan current image": "Scan current image",
     "Scan this image": "Scan this image",
diff --git a/public/app-resources/languages/de.json b/public/app-resources/languages/de.json
index 75b84ca60e..e4eb4c8b05 100644
--- a/public/app-resources/languages/de.json
+++ b/public/app-resources/languages/de.json
@@ -336,7 +336,7 @@
     "Crop map images": "Bilder zuschneiden",
     "Crop search": "Pflanzensuche",
     "Current position": "Aktuelle Position",
-    "Current position (mm)": "Aktuelle Position (mm)",
+    "Position (mm)": "Aktuelle Position (mm)",
     "Current version only": "Nur aktuelle Version",
     "Custom": "Benutzerdefiniert",
     "Custom coordinate": "Benutzerdefinierte Koordinaten",
@@ -1168,7 +1168,7 @@
     "Raspberry Pi Camera": "Raspberry Pi Kamera",
     "Raspberry Pi GPIO pin already bound or in use.": "Raspberry Pi GPIO Pin bereits genutzt.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "Der Stromversorgungsstatus des Raspberry Pi seit dem letzten Neustart. Wenn die Versorgungsspannung unter den Standardbetriebsgrenzwert fällt, wird die Anzeige rot. Sobald die Spannung wieder ansteigt, wird der Status gelb und zeigt damit an, dass ein Unterspannungsereignis eingetreten ist. Eine niedrige Spannung kann die WiFi- und Kamerafunktionalität beeinträchtigen",
-    "Raw Encoder data": "Rohe Encoder daten",
+    "Encoder (raw)": "Rohe Encoder daten",
     "Raw encoder position": "Rohe Encoder Position",
     "re-seed account": "re-seed Account",
     "Read pin": "Lese Pin",
@@ -1275,7 +1275,7 @@
     "Saved pin bindings": "Pinzuweisung gespeichert",
     "Saving": "Speichere",
     "saving...": "speichert...",
-    "Scaled Encoder (mm)": "Skalierter Encoder Wert (mm)",
+    "Encoder (mm)": "Skalierter Encoder Wert (mm)",
     "Scaled encoder position": "Skalierte Encoder Position",
     "Scan current image": "Aktuelles Bild scannen",
     "Scan this image": "Dieses Bild scannen",
diff --git a/public/app-resources/languages/es.json b/public/app-resources/languages/es.json
index f9c54d700d..d50576d3bf 100644
--- a/public/app-resources/languages/es.json
+++ b/public/app-resources/languages/es.json
@@ -859,7 +859,7 @@
     "Random Order": "Orden aleatorio",
     "Raspberry Pi Camera": "Cámara de la Raspberry Pi",
     "Raspberry Pi GPIO pin already bound or in use.": "Pin GPIO de la Raspberry Pi ya enlazado o en uso.",
-    "Raw Encoder data": "Datos sin procesar del encoder",
+    "Encoder (raw)": "Datos sin procesar del encoder",
     "Raw encoder position": "Posición sin procesar del encoder",
     "Read pin": "Leer pin",
     "read sensor": "leer sensor",
@@ -935,7 +935,7 @@
     "Saved": "Guardado",
     "Saved pin bindings": "Uniones de pins guardadas",
     "Saving": "Guardando",
-    "Scaled Encoder (mm)": "Encoder escalado (mm)",
+    "Encoder (mm)": "Encoder escalado (mm)",
     "Scaled encoder position": "Posición del encoder escalada",
     "Scan current image": "Escanear imagen actual",
     "Scan this image": "Escanear este imagen",
@@ -1551,7 +1551,7 @@
     "create subfolder": "create subfolder",
     "Crop search": "Crop search",
     "Current position": "Current position",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Custom buttons": "Custom buttons",
     "Custom coordinates": "Custom coordinates",
diff --git a/public/app-resources/languages/fr.json b/public/app-resources/languages/fr.json
index 4d72c0279a..12e1b149b2 100644
--- a/public/app-resources/languages/fr.json
+++ b/public/app-resources/languages/fr.json
@@ -610,7 +610,7 @@
     "Raspberry Pi": "Raspberry Pi",
     "Raspberry Pi Camera": "Caméra de la Raspberry Pi",
     "Raspberry Pi GPIO pin already bound or in use.": "La pin Raspberry Pi GPIO est déjà liée ou en cours d'utilisation",
-    "Raw Encoder data": "Données brutes du codeur",
+    "Encoder (raw)": "Données brutes du codeur",
     "Raw encoder position": "Position brute du codeur",
     "Read pin": "Lire pin",
     "read sensor": "Lire capteur",
@@ -654,7 +654,7 @@
     "Save sequence and sync device before running.": "Sauvegardez et synchronisez avant de démarrer.",
     "Saved": "Sauvegardé",
     "Saving": "Enregistrement",
-    "Scaled Encoder (mm)": "Échelle des encodeurs de position (mm)",
+    "Encoder (mm)": "Échelle des encodeurs de position (mm)",
     "Scaled encoder position": "Échelle des encodeurs de position",
     "Scheduler": "Planificateur",
     "Search for a crop to add to your garden.": "Chercher une plante à ajouter au potager.",
@@ -1131,7 +1131,7 @@
     "Crop images displayed in the garden map to remove black borders from image rotation. Crop amount determined by CAMERA ROTATION value.": "Crop images displayed in the garden map to remove black borders from image rotation. Crop amount determined by CAMERA ROTATION value.",
     "Crop map images": "Crop map images",
     "Crop search": "Crop search",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Currently used with this crop": "Currently used with this crop",
     "curve": "curve",
diff --git a/public/app-resources/languages/it.json b/public/app-resources/languages/it.json
index ba61b52d45..1d258a59ab 100644
--- a/public/app-resources/languages/it.json
+++ b/public/app-resources/languages/it.json
@@ -414,7 +414,7 @@
     "Crop map images": "Ritaglia immagini mappa",
     "Crop search": "Cerca coltura",
     "Current position": "Posizione attuale",
-    "Current position (mm)": "Posizione attuale (mm)",
+    "Position (mm)": "Posizione attuale (mm)",
     "Current version only": "Solo versione attuale",
     "Currently used with this crop": "Attualmente utilizzato con questa coltura",
     "curve": "curva",
@@ -1394,7 +1394,6 @@
     "Points": "Punti",
     "points panel": "pannello punti",
     "Ports": "Porte",
-    "Position (mm)": "Posizione (mm)",
     "Positions": "Posizioni",
     "Positive X": "X Positiva",
     "Positive Y": "Y Positiva",
@@ -1468,7 +1467,7 @@
     "Raspberry Pi model from your choice in the dropdown to the right, as understood by the Web App.": "Modello di Raspberry Pi a scelta nel menu a tendina a destra, come previsto dalla Web App.",
     "Raspberry Pi model reported from your device, as understood by FarmBot OS.": "Modello di Raspberry Pi riportato dal dispositivo, come interpretato da FarmBot OS.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "Stato di alimentazione di Raspberry Pi dall'ultimo riavvio. Se la tensione di alimentazione scende al di sotto della soglia operativa standard, l'indicatore diventa rosso. Una volta ristabilito il livello di tensione, lo stato diventa giallo, indicando che si è verificato un evento di bassa tensione. La bassa tensione può influire negativamente sulla funzionalità del WiFi e della fotocamera.",
-    "Raw Encoder data": "Dati Raw Encoder",
+    "Encoder (raw)": "Dati Raw Encoder",
     "Raw encoder position": "Posizione raw encoder",
     "re-seed account": "account per risemina",
     "Read pin": "Leggi pin",
@@ -1594,7 +1593,7 @@
     "Saved pin bindings": "Salvato collegamento pin",
     "Saving": "Salvando",
     "saving...": "salvando...",
-    "Scaled Encoder (mm)": "Encoder scalato (mm)",
+    "Encoder (mm)": "Encoder scalato (mm)",
     "Scaled encoder position": "Posizione encoder scalata",
     "Scan current image": "Scansiona immagine corrente",
     "Scan this image": "Scansiona questa immagine",
diff --git a/public/app-resources/languages/ko.json b/public/app-resources/languages/ko.json
index 11ff75a6b1..46159b0df1 100644
--- a/public/app-resources/languages/ko.json
+++ b/public/app-resources/languages/ko.json
@@ -415,7 +415,7 @@
     "Crop map images": "맵 이미지 자르기",
     "Crop search": "검색 자르기",
     "Current position": "현재 위치",
-    "Current position (mm)": "현재 위치 (mm)",
+    "Position (mm)": "현재 위치 (mm)",
     "Current version only": "현재 버전만",
     "Currently used with this crop": "현재 이 작물과 함께 사용중",
     "curve": "곡선",
@@ -1395,7 +1395,6 @@
     "Points": "포인트",
     "points panel": "포인트 패널",
     "Ports": "포트",
-    "Position (mm)": "위치 (mm)",
     "Positions": "위치",
     "Positive X": "양의 X축",
     "Positive Y": "양의 Y축",
@@ -1468,7 +1467,7 @@
     "Raspberry Pi model from your choice in the dropdown to the right, as understood by the Web App.": "웹 앱에서 이해하는 오른쪽 드롭다운에서 선택한 라즈베리 파이 모델입니다.",
     "Raspberry Pi model reported from your device, as understood by FarmBot OS.": "FarmBot OS에서 이해하는 당신의 장치에서 보고된 라즈베리 파이 모델입니다.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "마지막 재부팅 이후의 라즈베리 파이 전원 상태입니다. 공급 전압이 표준 운영 임계값 아래로 내려가면 표시등이 빨간색으로 바뀝니다. 전압 수준이 회복되면 상태가 노란색으로 바뀌어 저전압 이벤트가 발생했음을 나타냅니다. 저전압은 WiFi와 카메라 기능에 부정적인 영향을 미칠 수 있습니다.",
-    "Raw Encoder data": "원시 인코더 데이터",
+    "Encoder (raw)": "원시 인코더 데이터",
     "Raw encoder position": "원시 인코더 위치",
     "re-seed account": "계정 재생성",
     "Read pin": "핀 읽기",
@@ -1596,7 +1595,7 @@
     "Saving": "저장 중",
     "saving...": "저장 중...",
     "scale": "스케일",
-    "Scaled Encoder (mm)": "스케일된 인코더 (mm)",
+    "Encoder (mm)": "스케일된 인코더 (mm)",
     "Scaled encoder position": "스케일된 인코더 위치",
     "Scan current image": "현재 이미지 스캔",
     "Scan this image": "이 이미지 스캔",
diff --git a/public/app-resources/languages/nl.json b/public/app-resources/languages/nl.json
index 5f0126e3a2..7b5e63335c 100644
--- a/public/app-resources/languages/nl.json
+++ b/public/app-resources/languages/nl.json
@@ -459,7 +459,7 @@
     "Crop map images": "Crop map images",
     "Crop search": "Crop search",
     "Current position": "Current position",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Custom": "Custom",
     "Custom buttons": "Custom buttons",
@@ -1375,7 +1375,6 @@
     "Point status": "Point status",
     "Points": "Points",
     "points panel": "points panel",
-    "Position (mm)": "Position (mm)",
     "Positions": "Positions",
     "Positive X": "Positive X",
     "Positive Y": "Positive Y",
@@ -1441,7 +1440,7 @@
     "Raspberry Pi Camera": "Raspberry Pi Camera",
     "Raspberry Pi GPIO pin already bound or in use.": "Raspberry Pi GPIO pin already bound or in use.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.",
-    "Raw Encoder data": "Raw Encoder data",
+    "Encoder (raw)": "Encoder (raw)",
     "Raw encoder position": "Raw encoder position",
     "re-seed account": "re-seed account",
     "Read pin": "Read pin",
@@ -1558,7 +1557,7 @@
     "Saved pin bindings": "Saved pin bindings",
     "Saving": "Saving",
     "saving...": "saving...",
-    "Scaled Encoder (mm)": "Scaled Encoder (mm)",
+    "Encoder (mm)": "Encoder (mm)",
     "Scaled encoder position": "Scaled encoder position",
     "Scan current image": "Scan current image",
     "Scan this image": "Scan this image",
diff --git a/public/app-resources/languages/pt.json b/public/app-resources/languages/pt.json
index 4df4aeded8..1c7569dec6 100644
--- a/public/app-resources/languages/pt.json
+++ b/public/app-resources/languages/pt.json
@@ -452,7 +452,7 @@
     "Crop map images": "Crop map images",
     "Crop search": "Crop search",
     "Current position": "Current position",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Custom": "Custom",
     "Custom buttons": "Custom buttons",
@@ -1371,7 +1371,6 @@
     "Point status": "Point status",
     "Points": "Points",
     "points panel": "points panel",
-    "Position (mm)": "Position (mm)",
     "Positions": "Positions",
     "Positive X": "Positive X",
     "Positive Y": "Positive Y",
@@ -1438,7 +1437,7 @@
     "Raspberry Pi Camera": "Raspberry Pi Camera",
     "Raspberry Pi GPIO pin already bound or in use.": "Raspberry Pi GPIO pin already bound or in use.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.",
-    "Raw Encoder data": "Raw Encoder data",
+    "Encoder (raw)": "Encoder (raw)",
     "Raw encoder position": "Raw encoder position",
     "re-seed account": "re-seed account",
     "Read pin": "Read pin",
@@ -1556,7 +1555,7 @@
     "Saved pin bindings": "Saved pin bindings",
     "Saving": "Saving",
     "saving...": "saving...",
-    "Scaled Encoder (mm)": "Scaled Encoder (mm)",
+    "Encoder (mm)": "Encoder (mm)",
     "Scaled encoder position": "Scaled encoder position",
     "Scan current image": "Scan current image",
     "Scan this image": "Scan this image",
diff --git a/public/app-resources/languages/ru.json b/public/app-resources/languages/ru.json
index 72513d8ec5..b8fb5dca40 100644
--- a/public/app-resources/languages/ru.json
+++ b/public/app-resources/languages/ru.json
@@ -273,7 +273,7 @@
     "Processing Parameters": "Параметры обработки",
     "Provided new and old passwords match. Password not changed.": "Новый и старый пароли совпадают. Пароль не был изменен.",
     "Raspberry Pi Camera": "Камера Raspberry Pi",
-    "Raw Encoder data": "Импульсы энкодера",
+    "Encoder (raw)": "Импульсы энкодера",
     "Raw encoder position": "Положение энкодера (в импульсах) ",
     "read sensor": "считать датчик",
     "Read speak logs in browser": "Читать логи вслух",
@@ -302,7 +302,7 @@
     "Save sequence and sync device before running.": "Сохраните Функцию и сделайте синхронизацию перед запуском.",
     "Saved": "Сохранено",
     "Saving": "Сохраняю",
-    "Scaled Encoder (mm)": "Масштабированный энкодер (мм)",
+    "Encoder (mm)": "Масштабированный энкодер (мм)",
     "Scaled encoder position": "Положение энкодера (в миллиметрах)",
     "Scheduler": "Планировщик",
     "Search OpenFarm...": "Искать на OpenFarm...",
@@ -783,7 +783,7 @@
     "Crop map images": "Crop map images",
     "Crop search": "Crop search",
     "Current position": "Current position",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Custom": "Custom",
     "Custom buttons": "Custom buttons",
@@ -1529,7 +1529,6 @@
     "Point status": "Point status",
     "Points": "Points",
     "points panel": "points panel",
-    "Position (mm)": "Position (mm)",
     "Power cycle FarmBot's onboard computer.": "Power cycle FarmBot's onboard computer.",
     "Power down FarmBot's onboard computer.": "Power down FarmBot's onboard computer.",
     "Power up": "Power up",
diff --git a/public/app-resources/languages/th.json b/public/app-resources/languages/th.json
index f7463357ed..0f4627be81 100644
--- a/public/app-resources/languages/th.json
+++ b/public/app-resources/languages/th.json
@@ -400,7 +400,7 @@
     "Crop map images": "Crop map images",
     "Crop search": "Crop search",
     "Current position": "Current position",
-    "Current position (mm)": "Current position (mm)",
+    "Position (mm)": "Position (mm)",
     "Current version only": "Current version only",
     "Custom": "Custom",
     "Custom buttons": "Custom buttons",
@@ -1340,7 +1340,6 @@
     "Point status": "Point status",
     "Points": "Points",
     "points panel": "points panel",
-    "Position (mm)": "Position (mm)",
     "Positions": "Positions",
     "Positive X": "Positive X",
     "Positive Y": "Positive Y",
@@ -1407,7 +1406,7 @@
     "Raspberry Pi Camera": "Raspberry Pi Camera",
     "Raspberry Pi GPIO pin already bound or in use.": "Raspberry Pi GPIO pin already bound or in use.",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.",
-    "Raw Encoder data": "Raw Encoder data",
+    "Encoder (raw)": "Encoder (raw)",
     "Raw encoder position": "Raw encoder position",
     "re-seed account": "re-seed account",
     "Read pin": "Read pin",
@@ -1530,7 +1529,7 @@
     "Saved pin bindings": "Saved pin bindings",
     "Saving": "Saving",
     "saving...": "saving...",
-    "Scaled Encoder (mm)": "Scaled Encoder (mm)",
+    "Encoder (mm)": "Encoder (mm)",
     "Scaled encoder position": "Scaled encoder position",
     "Scan current image": "Scan current image",
     "Scan this image": "Scan this image",
diff --git a/public/app-resources/languages/zh.json b/public/app-resources/languages/zh.json
index 0b61667346..33100ab3a7 100644
--- a/public/app-resources/languages/zh.json
+++ b/public/app-resources/languages/zh.json
@@ -374,7 +374,7 @@
     "Crop images displayed in the garden map to remove black borders from image rotation. Crop amount determined by CAMERA ROTATION value.": "裁剪花园地图中显示的图像，以消除图像旋转产生的黑色边框。裁剪量由相机旋转值决定。",
     "Crop map images": "裁剪地图图像",
     "Crop search": "作物搜索",
-    "Current position (mm)": "当前位置 (mm)",
+    "Position (mm)": "当前位置 (mm)",
     "Current version only": "仅限当前版本",
     "Custom": "自定义",
     "Custom buttons": "自定义按钮",
@@ -1337,7 +1337,7 @@
     "Raspberry Pi Camera": "Raspberry Pi 摄像头",
     "Raspberry Pi GPIO pin already bound or in use.": "Raspberry Pi GPIO 引脚已绑定或正在使用。",
     "Raspberry Pi power status since last reboot. If supply voltage drops below the standard operational threshold the indicator will turn red. Once the voltage level recovers the status will turn yellow, indicating that a low voltage event has occurred. Low voltage may adversely affect WiFi and camera functionality.": "自上次重启以来的Raspberry Pi电源状态。如果电源电压降到标准操作阈值以下，指示灯将变红。一旦电压水平恢复，状态将变为黄色，表明发生了低电压事件。低电压可能会对WiFi和相机功能产生不利影响。",
-    "Raw Encoder data": "原始编码器数据",
+    "Encoder (raw)": "原始编码器数据",
     "Raw encoder position": "原始编码器位置",
     "re-seed account": "重新播种账户",
     "Read pin": "读取引脚",
@@ -1460,7 +1460,7 @@
     "Saved pin bindings": "已保存的引脚绑定",
     "Saving": "保存中",
     "saving...": "保存中...",
-    "Scaled Encoder (mm)": "缩放编码器（毫米）",
+    "Encoder (mm)": "缩放编码器（毫米）",
     "Scaled encoder position": "缩放编码器位置",
     "Scan current image": "扫描当前图像",
     "Scan this image": "扫描此图像",
diff --git a/public/promo_loading_image.avif b/public/promo_loading_image.avif
new file mode 100644
index 0000000000..f6c7cb8f2a
Binary files /dev/null and b/public/promo_loading_image.avif differ
diff --git a/public/promo_loading_image_full_bot.avif b/public/promo_loading_image_full_bot.avif
new file mode 100644
index 0000000000..49813140ac
Binary files /dev/null and b/public/promo_loading_image_full_bot.avif differ
diff --git a/spec/controllers/dashboard_spec.rb b/spec/controllers/dashboard_spec.rb
index 8794f833a3..19fceee7a0 100644
--- a/spec/controllers/dashboard_spec.rb
+++ b/spec/controllers/dashboard_spec.rb
@@ -15,11 +15,6 @@
       expect(response.status).to eq(200)
     end
 
-    it "renders the featured sequences page" do
-      get :featured
-      expect(response.status).to eq(200)
-    end
-
     it "renders the front page" do
       get :front_page
       expect(response.status).to eq(200)