diff --git a/Gemfile.lock b/Gemfile.lock
index 422fbcd4d9..6bd053f870 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -119,7 +119,7 @@ GEM
       railties (>= 5.0.0)
     faker (3.5.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.12.2)
+    faraday (2.13.0)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -188,7 +188,7 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
-    logger (1.6.6)
+    logger (1.7.0)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
@@ -222,18 +222,18 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.18.6-aarch64-linux-gnu)
+    nokogiri (1.18.7-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.6-x86_64-linux-gnu)
+    nokogiri (1.18.7-x86_64-linux-gnu)
       racc (~> 1.4)
     orm_adapter (0.5.0)
     os (1.1.4)
-    parser (3.3.7.3)
+    parser (3.3.7.4)
       ast (~> 2.4.1)
       racc
-    passenger (6.0.23)
+    passenger (6.0.27)
       rack (>= 1.6.13)
-      rackup
+      rackup (>= 1.0.1)
       rake (>= 12.3.3)
     pg (1.5.9)
     pry (0.15.2)
@@ -306,7 +306,7 @@ GEM
       railties (>= 5.2)
     retriable (3.1.2)
     rexml (3.4.1)
-    rollbar (3.6.1)
+    rollbar (3.6.2)
     rspec (3.13.0)
       rspec-core (~> 3.13.0)
       rspec-expectations (~> 3.13.0)
diff --git a/app/controllers/api/logs_controller.rb b/app/controllers/api/logs_controller.rb
index a04e64edc5..86d1973ace 100644
--- a/app/controllers/api/logs_controller.rb
+++ b/app/controllers/api/logs_controller.rb
@@ -14,19 +14,27 @@ class LogsController < Api::AbstractController
     def search
       conf = current_device.web_app_config
       mt = CeleryScriptSettingsBag::ALLOWED_MESSAGE_TYPES
-      query = mt
-        .map { |x| "(type = '#{x}' AND verbosity <= ?)" }
-        .join(" OR ")
-      conditions = mt.map { |x| "#{x}_log" }.map { |x| conf.send(x) }
-      args_ = conditions.unshift(query)
       limit = current_device.max_log_count || Device::DEFAULT_MAX_LOGS
 
-      render json: current_device
-               .logs
-               .order(created_at: :desc)
-               .where(*args_)
-               .limit(limit)
-               .where(search_params)
+      # Build conditions once
+      type_conditions = mt.map.with_index do |type, i|
+        verbosity = conf.send("#{type}_log")
+        ["(type = ? AND verbosity <= ?)", type, verbosity]
+      end
+
+      # Combine conditions efficiently
+      where_clause = type_conditions.map(&:first).join(" OR ")
+      where_values = type_conditions.flat_map { |c| c[1..-1] }
+
+      # Single query with all conditions
+      logs = current_device
+        .logs
+        .order(created_at: :desc)
+        .limit(limit)
+        .where(where_clause, *where_values)
+        .where(search_params)
+
+      render json: logs
     end
 
     def create
diff --git a/app/controllers/api/sensor_readings_controller.rb b/app/controllers/api/sensor_readings_controller.rb
index cd1f8b9b48..7e6f050e40 100644
--- a/app/controllers/api/sensor_readings_controller.rb
+++ b/app/controllers/api/sensor_readings_controller.rb
@@ -1,6 +1,5 @@
 module Api
   class SensorReadingsController < Api::AbstractController
-    LIMIT = 2500
     before_action :clean_old
 
     def create
@@ -23,20 +22,14 @@ def destroy
     private
 
     def clean_old
-      if current_device.sensor_readings.count > LIMIT
-        current_device
-          .sensor_readings
-          .where
-          .not(id: readings.pluck(:id))
-          .delete_all
-      end
+      current_device.delay.trim_excess_sensor_readings
     end
 
     def readings
       @readings ||= SensorReading
         .where(device: current_device)
         .order(created_at: :desc)
-        .limit(LIMIT)
+        .limit(Device::DEFAULT_MAX_SENSOR_READINGS)
     end
 
     def reading
diff --git a/app/controllers/api/sequences_controller.rb b/app/controllers/api/sequences_controller.rb
index 640a82a0fb..bb147cbadd 100644
--- a/app/controllers/api/sequences_controller.rb
+++ b/app/controllers/api/sequences_controller.rb
@@ -1,11 +1,28 @@
 module Api
   class SequencesController < Api::AbstractController
+    include ActionController::Live
+
     before_action :clean_expired_farm_events, only: [:destroy]
 
     def index
-      render json: sequences
-               .to_a
-               .map { |s| Sequences::Show.run!(sequence: s) }
+      # Stream to reduce memory usage
+      response.headers['Content-Type'] = 'application/json'
+      response.headers['Cache-Control'] = 'no-cache'
+      response.stream.write '['
+
+      Sequence.where(device: current_device)
+              .includes(:sequence_publication, :sequence_version)
+              .each_with_index do |s, index|
+        # Load the sequence with all needed associations and convert to JSON
+        seq_json = Sequences::Show.run!(sequence: Sequence.with_usage_reports.find(s.id)).to_json
+        # Append a comma for all but the first element to maintain valid JSON syntax
+        response.stream.write ',' unless index.zero?
+        response.stream.write seq_json
+      end
+
+      response.stream.write ']'
+    ensure
+      response.stream.close
     end
 
     def show
@@ -65,12 +82,9 @@ def sequence_params
       @sequence_params ||= raw_json[:sequence] || raw_json || {}
     end
 
-    def sequences
-      @sequences ||= Sequence.with_usage_reports.where(device: current_device)
-    end
-
+    # Retrieve a single sequence record directly associated with the current device
     def sequence
-      @sequence ||= sequences.find(params[:id])
+      @sequence ||= Sequence.with_usage_reports.find_by!(id: params[:id], device: current_device)
     end
   end
 end
diff --git a/app/models/device.rb b/app/models/device.rb
index a7830f3e70..05f708f262 100644
--- a/app/models/device.rb
+++ b/app/models/device.rb
@@ -4,6 +4,7 @@ class Device < ApplicationRecord
   DEFAULT_MAX_IMAGES = 100
   DEFAULT_MAX_LOGS = 1000
   DEFAULT_MAX_TELEMETRY = 300
+  DEFAULT_MAX_SENSOR_READINGS = 2500
   DEFAULT_MAX_LOG_AGE_IN_DAYS = 60
   DEFAULT_MAX_SEQUENCE_COUNT = 75
   DEFAULT_MAX_SEQUENCE_LENGTH = 30
@@ -120,6 +121,24 @@ def trim_excess_telemetry
     excess_telemetry.delete_all
   end
 
+  # Give the user back the amount of sensor readings they are allowed to view.
+  def limited_sensor_readings_list
+    sensor_readings
+      .order(created_at: :desc)
+      .limit(DEFAULT_MAX_SENSOR_READINGS)
+  end
+
+  def excess_sensor_readings
+    sensor_readings
+      .where
+      .not(id: limited_sensor_readings_list.pluck(:id))
+      .where(device_id: self.id)
+  end
+
+  def trim_excess_sensor_readings
+    excess_sensor_readings.delete_all
+  end
+
   def self.current
     RequestStore.store[:device]
   end
diff --git a/app/models/sequence.rb b/app/models/sequence.rb
index 70fc89a7d2..188b957b3b 100644
--- a/app/models/sequence.rb
+++ b/app/models/sequence.rb
@@ -23,6 +23,8 @@ class Sequence < ApplicationRecord
   has_many :regimen_items
   has_many :primary_nodes, dependent: :destroy
   has_many :edge_nodes, dependent: :destroy
+  has_one :sequence_publication, foreign_key: :author_sequence_id
+  belongs_to :sequence_version, optional: true
 
   # allowable label colors for the frontend.
   [:name, :kind].each { |n| validates n, presence: true }
diff --git a/app/mutations/sequences/show.rb b/app/mutations/sequences/show.rb
index 20df4c6d7b..be8c22c5b7 100644
--- a/app/mutations/sequences/show.rb
+++ b/app/mutations/sequences/show.rb
@@ -63,7 +63,11 @@ def copyright
     end
 
     def sequence_publication
-      @sequence_publication ||= SequencePublication.find_by(author_sequence_id: sequence.id)
+      # Cache the association if it's already loaded
+      return @sequence_publication if defined?(@sequence_publication)
+      @sequence_publication = sequence.association(:sequence_publication).loaded? ? 
+        sequence.sequence_publication : 
+        SequencePublication.find_by(author_sequence_id: sequence.id)
     end
 
     def description
@@ -71,7 +75,11 @@ def description
     end
 
     def sequence_version
-      @sequence_version ||= SequenceVersion.find_by(id: sequence_version_id)
+      # Cache the association if it's already loaded
+      return @sequence_version if defined?(@sequence_version)
+      @sequence_version = sequence.association(:sequence_version).loaded? ? 
+        sequence.sequence_version :
+        SequenceVersion.find_by(id: sequence_version_id)
     end
 
     def use_upstream_version?
@@ -90,7 +98,7 @@ def available_version_ids
       #   If it is not published, don't show anything to the author.
       #   If it IS published, show the versions to the author.
       if is_owner?
-        return sequence_publication.sequence_versions.pluck(:id)
+        return sequence_publication&.sequence_versions&.pluck(:id) || []
       end
 
       # Second attempt:
diff --git a/frontend/__test_support__/additional_mocks.tsx b/frontend/__test_support__/additional_mocks.tsx
index 43577a2752..0b0bd69bea 100644
--- a/frontend/__test_support__/additional_mocks.tsx
+++ b/frontend/__test_support__/additional_mocks.tsx
@@ -47,6 +47,7 @@ jest.mock("react-router", () => ({
   Route: jest.fn(({ children }) => <div>{children}</div>),
   Routes: jest.fn(({ children }) => <div>{children}</div>),
   useNavigate: () => mockNavigate,
+  useLocation: () => window.location,
   Navigate: ({ to }: { to: string }) => <div>{mockNavigate(to)}</div>,
   Outlet: jest.fn(() => <div />),
 }));
diff --git a/frontend/controls/move/__tests__/jog_buttons_test.tsx b/frontend/controls/move/__tests__/jog_buttons_test.tsx
index 628993088c..231b28f873 100644
--- a/frontend/controls/move/__tests__/jog_buttons_test.tsx
+++ b/frontend/controls/move/__tests__/jog_buttons_test.tsx
@@ -95,6 +95,7 @@ describe("<PowerAndResetMenu />", () => {
   const fakeProps = (): PowerAndResetMenuProps => ({
     botOnline: true,
     showAdvanced: true,
+    dispatch: jest.fn(),
   });
 
   it("restarts firmware", () => {
diff --git a/frontend/controls/move/bot_position_rows.tsx b/frontend/controls/move/bot_position_rows.tsx
index d3a4d07e24..4e4f9e8387 100644
--- a/frontend/controls/move/bot_position_rows.tsx
+++ b/frontend/controls/move/bot_position_rows.tsx
@@ -27,6 +27,7 @@ import {
 import { NumberConfigKey } from "farmbot/dist/resources/configs/firmware";
 import { isUndefined } from "lodash";
 import { calculateScale } from "../../settings/hardware_settings";
+import { setPanelOpen } from "../../farm_designer/panel_header";
 
 export const BotPositionRows = (props: BotPositionRowsProps) => {
   const { locationData, getConfigValue, arduinoBusy, locked } = props;
@@ -141,7 +142,10 @@ export const AxisActions = (props: AxisActionsProps) => {
         onClick={setAxisLength({ axis, dispatch, botPosition, sourceFwConfig })}>
         {t("SET LENGTH")}
       </LockableButton>
-      <a onClick={() => { navigate(Path.settings("axes")); }}>
+      <a onClick={() => {
+        dispatch(setPanelOpen(true));
+        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 cc16ff2726..3e9f3cb2d8 100644
--- a/frontend/controls/move/jog_buttons.tsx
+++ b/frontend/controls/move/jog_buttons.tsx
@@ -97,7 +97,9 @@ export class JogButtons
               target={<button
                 className={"fa fa-power-off arrow-button fb-button"}
                 title={t("click to open power and reset menu")} />}
-              content={<PowerAndResetMenu botOnline={botOnline}
+              content={<PowerAndResetMenu
+                botOnline={botOnline}
+                dispatch={dispatch}
                 showAdvanced={showAdvanced} />} />
           </td>
           <td>
@@ -160,6 +162,7 @@ export class JogButtons
 export interface PowerAndResetMenuProps {
   botOnline: boolean;
   showAdvanced: boolean;
+  dispatch: Function;
 }
 
 export const PowerAndResetMenu = (props: PowerAndResetMenuProps) => {
@@ -188,6 +191,8 @@ export const PowerAndResetMenu = (props: PowerAndResetMenuProps) => {
       buttonText={t("SHUTDOWN")}
       color={"red"}
       action={powerOff} />
-    <FactoryResetRows botOnline={botOnline} />
+    <FactoryResetRows
+      dispatch={props.dispatch}
+      botOnline={botOnline} />
   </div>;
 };
diff --git a/frontend/devices/connectivity/__tests__/diagnosis_test.tsx b/frontend/devices/connectivity/__tests__/diagnosis_test.tsx
index 5c4bbfb889..6e713c4e8b 100644
--- a/frontend/devices/connectivity/__tests__/diagnosis_test.tsx
+++ b/frontend/devices/connectivity/__tests__/diagnosis_test.tsx
@@ -17,6 +17,7 @@ describe("<Diagnosis/>", () => {
       botAPI: true,
       botFirmware: true,
     },
+    dispatch: jest.fn(),
   });
 
   it("renders help text", () => {
diff --git a/frontend/devices/connectivity/connectivity.tsx b/frontend/devices/connectivity/connectivity.tsx
index 592bbf31ff..32ae7f5d59 100644
--- a/frontend/devices/connectivity/connectivity.tsx
+++ b/frontend/devices/connectivity/connectivity.tsx
@@ -114,7 +114,7 @@ export class Connectivity
                 : undefined}
               hover={this.hover}
               hoveredConnection={this.state.hoveredConnection} />)}
-        <Diagnosis statusFlags={this.props.flags} />
+        <Diagnosis statusFlags={this.props.flags} dispatch={this.props.dispatch} />
         {this.props.flags.userAPI && this.props.flags.userMQTT
           && this.props.flags.botAPI && this.props.flags.botMQTT
           && this.props.apiFirmwareValue
@@ -162,7 +162,11 @@ export class Connectivity
         <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", this.navigate)}>
+        <a onClick={docLinkClick({
+          slug: "for-it-security-professionals",
+          navigate: this.navigate,
+          dispatch: this.props.dispatch,
+        })}>
           <i className="fa fa-external-link" />
           {t("Learn more about ports")}
         </a>
diff --git a/frontend/devices/connectivity/diagnosis.tsx b/frontend/devices/connectivity/diagnosis.tsx
index ecc9343aa2..2fba974667 100644
--- a/frontend/devices/connectivity/diagnosis.tsx
+++ b/frontend/devices/connectivity/diagnosis.tsx
@@ -8,6 +8,7 @@ import { SyncStatus } from "farmbot";
 import { syncText } from "../../nav/sync_text";
 import { useNavigate } from "react-router";
 import { linkToSetting } from "../../settings/maybe_highlight";
+import { setPanelOpen } from "../../farm_designer/panel_header";
 
 export type ConnectionName =
   | "userAPI"
@@ -20,6 +21,7 @@ export type ConnectionStatusFlags = Record<ConnectionName, boolean>;
 export interface DiagnosisProps {
   statusFlags: ConnectionStatusFlags;
   hideGraphic?: boolean;
+  dispatch: Function;
 }
 export interface DiagnosisSaucerProps extends ConnectionStatusFlags {
   className?: string;
@@ -61,7 +63,10 @@ export function Diagnosis(props: DiagnosisProps) {
       <p className="blinking">
         {t("Always")}&nbsp;
         <a className="blinking"
-          onClick={() => { navigate(linkToSetting(DeviceSetting.farmbotOS)); }}>
+          onClick={() => {
+            props.dispatch(setPanelOpen(true));
+            navigate(linkToSetting(DeviceSetting.farmbotOS));
+          }}>
           <u>{t("upgrade FarmBot OS")}</u>
         </a>
         &nbsp;{t("before troubleshooting.")}
@@ -69,11 +74,19 @@ export function Diagnosis(props: DiagnosisProps) {
       <p>
         {diagnosisMessage(getDiagnosisCode(props.statusFlags))}
       </p>
-      <a onClick={docLinkClick("connecting-farmbot-to-the-internet", navigate)}>
+      <a onClick={docLinkClick({
+        slug: "connecting-farmbot-to-the-internet",
+        navigate,
+        dispatch: props.dispatch,
+      })}>
         <i className="fa fa-external-link" />
         {t("Click here to learn more about connectivity codes.")}
       </a>
-      <a onClick={docLinkClick("for-it-security-professionals", navigate)}>
+      <a onClick={docLinkClick({
+        slug: "for-it-security-professionals",
+        navigate,
+        dispatch: props.dispatch,
+      })}>
         <i className="fa fa-external-link" />
         {t("Click here for document to show to your IT department.")}
       </a>
diff --git a/frontend/devices/connectivity/qos_panel.tsx b/frontend/devices/connectivity/qos_panel.tsx
index a2012a2f51..16d7ddfc58 100644
--- a/frontend/devices/connectivity/qos_panel.tsx
+++ b/frontend/devices/connectivity/qos_panel.tsx
@@ -88,7 +88,11 @@ export class QosPanel extends React.Component<QosPanelProps, {}> {
         <QosRow k={t("Average time")} v={pct(r.average, MS)} />
       </div>
       <a onClick={
-        docLinkClick("connecting-farmbot-to-the-internet", this.navigate)}>
+        docLinkClick({
+          slug: "connecting-farmbot-to-the-internet",
+          navigate: this.navigate,
+          dispatch: this.props.dispatch,
+        })}>
         <i className="fa fa-external-link" />
         {t("Learn more about connecting")}
       </a>
diff --git a/frontend/farm_designer/map/easter_eggs/__tests__/bugs_test.tsx b/frontend/farm_designer/map/easter_eggs/__tests__/bugs_test.tsx
index 87f0c9dc8c..2a5e018783 100644
--- a/frontend/farm_designer/map/easter_eggs/__tests__/bugs_test.tsx
+++ b/frontend/farm_designer/map/easter_eggs/__tests__/bugs_test.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import { shallow, mount } from "enzyme";
 import {
   Bugs, BugsProps, showBugResetButton, showBugs, resetBugs, BugsControls,
-  ExtraSettings,
+  BugsSettings,
 } from "../bugs";
 import { EggKeys, setEggStatus, getEggStatus } from "../status";
 import { range } from "lodash";
@@ -112,10 +112,10 @@ describe("<BugsControls />", () => {
   });
 });
 
-describe("<ExtraSettings />", () => {
+describe("<BugsSettings />", () => {
   it("toggles setting on", () => {
     localStorage.setItem(EggKeys.BRING_ON_THE_BUGS, "");
-    const wrapper = mount(<div>{ExtraSettings("surprise")}</div>);
+    const wrapper = mount(<BugsSettings />);
     expect(wrapper.text().toLowerCase()).toContain("bug");
     wrapper.find("button").last().simulate("click");
     expect(localStorage.getItem(EggKeys.BRING_ON_THE_BUGS)).toEqual("true");
@@ -123,7 +123,7 @@ describe("<ExtraSettings />", () => {
 
   it("toggles setting off", () => {
     localStorage.setItem(EggKeys.BRING_ON_THE_BUGS, "true");
-    const wrapper = mount(<div>{ExtraSettings("surprise")}</div>);
+    const wrapper = mount(<BugsSettings />);
     expect(wrapper.text().toLowerCase()).toContain("bug");
     wrapper.find("button").last().simulate("click");
     expect(localStorage.getItem(EggKeys.BRING_ON_THE_BUGS)).toEqual("");
diff --git a/frontend/farm_designer/map/easter_eggs/bugs.tsx b/frontend/farm_designer/map/easter_eggs/bugs.tsx
index 98f7359796..cd0698c762 100644
--- a/frontend/farm_designer/map/easter_eggs/bugs.tsx
+++ b/frontend/farm_designer/map/easter_eggs/bugs.tsx
@@ -6,7 +6,6 @@ import { getEggStatus, setEggStatus, EggKeys } from "./status";
 import { t } from "../../../i18next_wrapper";
 import { Row, ToggleButton } from "../../../ui";
 import { BUGS, FilePath, Bug as BugSlug } from "../../../internal_urls";
-import { showByEveryTerm } from "../../../settings";
 
 export interface BugsProps {
   mapTransformProps: MapTransformProps;
@@ -133,19 +132,28 @@ export const BugsControls = () =>
     </div>
     : <div className={"no-bugs"} />;
 
-const Setting = (title: string, key: string, value: string) => {
-  const on = localStorage.getItem(key) == value;
+interface SettingProps {
+  title: string;
+  storageKey: string;
+  value: string;
+}
+
+const Setting = (props: SettingProps) => {
+  const { title, storageKey, value } = props;
+  const on = localStorage.getItem(storageKey) == value;
   return <Row className={"setting grid-exp-1"}>
     <label>{title}</label>
     <ToggleButton
       toggleValue={on}
-      toggleAction={() => localStorage.setItem(key, on ? "" : value)} />
+      toggleAction={() => localStorage.setItem(storageKey, on ? "" : value)} />
   </Row>;
 };
 
-export const ExtraSettings = (searchTerm: string) => {
-  return showByEveryTerm("surprise", searchTerm) &&
-    <div className={"settings"}>
-      {Setting("Bug Attack", EggKeys.BRING_ON_THE_BUGS, "true")}
-    </div>;
+export const BugsSettings = () => {
+  return <div className={"settings"}>
+    <Setting
+      title={"Bug Attack"}
+      storageKey={EggKeys.BRING_ON_THE_BUGS}
+      value={"true"} />
+  </div>;
 };
diff --git a/frontend/farmware/farmware_forms.tsx b/frontend/farmware/farmware_forms.tsx
index 7634257e90..459174bb7b 100644
--- a/frontend/farmware/farmware_forms.tsx
+++ b/frontend/farmware/farmware_forms.tsx
@@ -188,7 +188,8 @@ export class FarmwareForm
     const collapsedConfigs = farmware.config.filter(collapsed);
 
     return <div className={"farmware-form"}>
-      {this.props.docPage && <ToolTip helpText={""} docPage={this.props.docPage} />}
+      {this.props.docPage &&
+        <ToolTip helpText={""} docPage={this.props.docPage} dispatch={dispatch} />}
       <button
         className={["fb-button green farmware-button",
           nonZeroValue(env.measure_soil_height_measured_distance)
diff --git a/frontend/front_page/__tests__/create_account_test.tsx b/frontend/front_page/__tests__/create_account_test.tsx
index 202714f8b4..eb808fd17f 100644
--- a/frontend/front_page/__tests__/create_account_test.tsx
+++ b/frontend/front_page/__tests__/create_account_test.tsx
@@ -4,18 +4,15 @@ jest.mock("../resend_verification", () => ({
 }));
 
 import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import {
   FormField, sendEmail, DidRegister, MustRegister, CreateAccount,
   FormFieldProps, CreateAccountProps,
 } from "../create_account";
-import { mount, shallow } from "enzyme";
-import { BlurableInput } from "../../ui";
 import { success, error } from "../../toast/toast";
 import { resendEmail } from "../resend_verification";
-import { ResendPanelBody } from "../resend_panel_body";
-import { BlurablePassword } from "../../ui/blurable_password";
 import { Content } from "../../constants";
-import { changeBlurableInput } from "../../__test_support__/helpers";
+import { changeBlurableInputRTL } from "../../__test_support__/helpers";
 
 describe("<FormField />", () => {
   const fakeProps = (): FormFieldProps => ({
@@ -27,14 +24,11 @@ describe("<FormField />", () => {
 
   it("renders correct props", () => {
     const p = fakeProps();
-    const wrapper = shallow(<FormField {...p} />);
-    expect(wrapper.find(BlurableInput).prop("value")).toEqual("my val");
-    expect(wrapper.find(BlurableInput).prop("type")).toEqual("email");
-    expect(wrapper.find("label").first().text()).toContain("My Label");
-    wrapper.find(BlurableInput).first().simulate("commit", {
-      currentTarget: { value: "foobar321" }
-    });
-    expect(p.onCommit).toHaveBeenCalledWith("foobar321");
+    render(<FormField {...p} />);
+    expect(screen.getByDisplayValue("my val")).toBeInTheDocument();
+    const input = screen.getByLabelText("My Label");
+    changeBlurableInputRTL(input, "foo");
+    expect(p.onCommit).toHaveBeenCalledWith("foo");
   });
 });
 
@@ -65,37 +59,37 @@ describe("<DidRegister />", () => {
   it("renders <ResendPanelBody/>", () => {
     const p = fakeCreateAccountProps();
     p.get = jest.fn(() => "example2@earthlink.net");
-    const wrapper = shallow(<DidRegister {...p} />);
-    wrapper.find(ResendPanelBody).simulate("click");
+    render(<DidRegister {...p} />);
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
     expect(resendEmail).toHaveBeenCalledWith("example2@earthlink.net");
   });
 
   it("bails on missing email", () => {
-    expect(() => shallow(<DidRegister {...fakeCreateAccountProps()} />))
+    expect(() => render(<DidRegister {...fakeCreateAccountProps()} />))
       .toThrow();
   });
 });
 
 describe("<MustRegister />", () => {
   it("renders the expected components", () => {
-    const wrapper = shallow(<MustRegister {...fakeCreateAccountProps()} />);
-    expect(wrapper.find(FormField).length).toEqual(2);
-    expect(wrapper.find(BlurablePassword).length).toEqual(2);
-    expect(wrapper.html().toLowerCase()).toContain("create account");
+    render(<MustRegister {...fakeCreateAccountProps()} />);
+    expect(screen.getByText("Create Account")).toBeInTheDocument();
   });
 
   it("inputs username", () => {
     const p = fakeCreateAccountProps();
-    const wrapper = mount(<MustRegister {...p} />);
-    changeBlurableInput(wrapper, "name", 1);
+    render(<MustRegister {...p} />);
+    const input = screen.getByLabelText("Name");
+    changeBlurableInputRTL(input, "name");
     expect(p.set).toHaveBeenCalledWith("regName", "name");
   });
 
   it("inputs password", () => {
     const p = fakeCreateAccountProps();
-    const wrapper = mount(<MustRegister {...p} />);
-    const input = shallow(wrapper.find("input").at(2).getElement());
-    input.simulate("blur", { currentTarget: { value: "password" } });
+    render(<MustRegister {...p} />);
+    const input = screen.getByLabelText("Password");
+    fireEvent.blur(input, { target: { value: "password" } });
     expect(p.set).toHaveBeenCalledWith("regPassword", "password");
   });
 });
@@ -104,14 +98,13 @@ describe("<CreateAccount />", () => {
   it("renders <DidRegister /> after verification email is sent", () => {
     const p = fakeCreateAccountProps();
     p.sent = true;
-    const wrapper = shallow(<CreateAccount {...p} />);
-    expect(wrapper.find(DidRegister).length).toEqual(1);
-    expect(wrapper.find(MustRegister).length).toEqual(0);
+    p.get = jest.fn(() => "example2@earthlink.net");
+    render(<CreateAccount {...p} />);
+    expect(screen.getByText("Resend Verification Email")).toBeInTheDocument();
   });
 
   it("renders <MustRegister /> before verification email is sent", () => {
-    const wrapper = shallow(<CreateAccount {...fakeCreateAccountProps()} />);
-    expect(wrapper.find(DidRegister).length).toEqual(0);
-    expect(wrapper.find(MustRegister).length).toEqual(1);
+    render(<CreateAccount {...fakeCreateAccountProps()} />);
+    expect(screen.getByText("Create Account")).toBeInTheDocument();
   });
 });
diff --git a/frontend/front_page/create_account.tsx b/frontend/front_page/create_account.tsx
index cf91c45e36..1dc222283f 100644
--- a/frontend/front_page/create_account.tsx
+++ b/frontend/front_page/create_account.tsx
@@ -6,7 +6,6 @@ import { resendEmail } from "./resend_verification";
 import { success, error } from "../toast/toast";
 import { bail } from "../util";
 import { ResendPanelBody } from "./resend_panel_body";
-import { BlurablePassword } from "../ui/blurable_password";
 import { Content } from "../constants";
 import { t } from "../i18next_wrapper";
 
@@ -33,18 +32,24 @@ type FieldType = BIProps["type"];
 
 export interface FormFieldProps {
   label: string;
-  type: FieldType;
+  type: FieldType | "password";
   value: string;
   onCommit(val: string): void;
 }
 
 export const FormField = (props: FormFieldProps) =>
-  <div>
-    <label> {t(props.label)} </label>
-    <BlurableInput
-      value={props.value}
-      type={props.type}
-      onCommit={(e) => props.onCommit(e.currentTarget.value)} />
+  <div className={"form-field"}>
+    <label htmlFor={props.label}> {t(props.label)} </label>
+    {props.type == "password"
+      ? <input
+        id={props.label}
+        type={props.type}
+        onBlur={e => props.onCommit(e.currentTarget.value)} />
+      : <BlurableInput
+        id={props.label}
+        value={props.value}
+        type={props.type}
+        onCommit={e => props.onCommit(e.currentTarget.value)} />}
   </div>;
 
 interface FieldData {
@@ -60,32 +65,16 @@ const FIELDS: FieldData[] = [
   { label: "Verify Password", type: "password", keyName: "regConfirmation" },
 ];
 
-/** Helper function to make life easier when testing.
- * Renders a list of input boxes on the registration panel form. */
-const renderFormFields = (get: KeyGetter, set: KeySetter) => {
-  return FIELDS.map((f) => {
-    if (f.type == "password") {
-      return <div key={f.label}>
-        <label> {t(f.label)} </label>
-        <BlurablePassword
-          key={f.label}
-          onCommit={(e) => set(f.keyName, e.currentTarget.value)} />
-      </div>;
-    } else {
-      return <FormField
-        key={f.label}
-        label={f.label}
-        type={f.type}
-        value={get(f.keyName) || ""}
-        onCommit={(val) => set(f.keyName, val)} />;
-    }
-  });
-};
-
-export function MustRegister(props: CreateAccountProps) {
+export const MustRegister = (props: CreateAccountProps) => {
   return <WidgetBody>
     <form onSubmit={props.submitRegistration}>
-      {renderFormFields(props.get, props.set)}
+      {FIELDS.map(field =>
+        <FormField
+          key={field.keyName}
+          label={field.label}
+          type={field.type}
+          value={props.get(field.keyName) || ""}
+          onCommit={(val) => props.set(field.keyName, val)} />)}
       {props.children}
       <button
         title={t("Create Account")}
@@ -94,12 +83,12 @@ export function MustRegister(props: CreateAccountProps) {
       </button>
     </form>
   </WidgetBody>;
-}
+};
 
 const MISSING_EMAIL = "User tried to resend to their registration email, " +
   "but none was found.";
 
-export function sendEmail(email: string, callback: () => void) {
+export const sendEmail = (email: string, callback: () => void) => {
   const ok = () => {
     success(t(Content.VERIFICATION_EMAIL_RESENT));
     callback();
@@ -110,16 +99,16 @@ export function sendEmail(email: string, callback: () => void) {
   };
 
   return resendEmail(email).then(ok, no);
-}
+};
 
-export function DidRegister(props: CreateAccountProps) {
+export const DidRegister = (props: CreateAccountProps) => {
   const email = props.get("regEmail");
   return email
     ? <ResendPanelBody onClick={() => { sendEmail(email, props.callback); }} />
     : bail(MISSING_EMAIL);
-}
+};
 
-export function CreateAccount(props: CreateAccountProps) {
+export const CreateAccount = (props: CreateAccountProps) => {
   const RelevantForm = props.sent ? DidRegister : MustRegister;
   return <div>
     <Widget>
@@ -127,4 +116,4 @@ export function CreateAccount(props: CreateAccountProps) {
       <RelevantForm {...props} />
     </Widget>
   </div>;
-}
+};
diff --git a/frontend/front_page/resend_panel_body.tsx b/frontend/front_page/resend_panel_body.tsx
index 96ea557061..77aab80032 100644
--- a/frontend/front_page/resend_panel_body.tsx
+++ b/frontend/front_page/resend_panel_body.tsx
@@ -4,7 +4,7 @@ import { t } from "../i18next_wrapper";
 
 export function ResendPanelBody(props: { onClick(): void; }) {
   return <WidgetBody>
-    <form>
+    <div className={"grid"}>
       <p>
         {t("Please check your email for the verification link.")}
       </p>
@@ -17,6 +17,6 @@ export function ResendPanelBody(props: { onClick(): void; }) {
         className="fb-button green pull-right front-page-button">
         {t("Resend Verification Email")}
       </button>
-    </form>
+    </div>
   </WidgetBody>;
 }
diff --git a/frontend/help/documentation.tsx b/frontend/help/documentation.tsx
index c61e763469..e66753c1cd 100644
--- a/frontend/help/documentation.tsx
+++ b/frontend/help/documentation.tsx
@@ -3,19 +3,26 @@ import {
   DesignerPanel, DesignerPanelContent,
 } from "../farm_designer/designer_panel";
 import { Panel } from "../farm_designer/panel_header";
-import { getUrlQuery } from "../util";
 import { HelpHeader } from "./header";
+import { useLocation } from "react-router";
 
 export interface DocumentationPanelProps {
   url: string;
 }
 
 export const DocumentationPanel = (props: DocumentationPanelProps) => {
-  const page = getUrlQuery("page");
+  const location = useLocation();
+  const [src, setSrc] = React.useState("");
+
+  React.useEffect(() => {
+    const page = new URLSearchParams(location.search).get("page");
+    setSrc(page ? `${props.url}/${page}` : props.url);
+  }, [props, location]);
+
   return <DesignerPanel panelName={"documentation"} panel={Panel.Help}>
     <HelpHeader />
     <DesignerPanelContent panelName={"documentation"}>
-      <iframe src={page ? `${props.url}/${page}` : props.url} />
+      <iframe src={src} />
     </DesignerPanelContent>
   </DesignerPanel>;
 };
diff --git a/frontend/nav/__tests__/additional_menu_test.tsx b/frontend/nav/__tests__/additional_menu_test.tsx
index ebbc99d659..bd21cbafac 100644
--- a/frontend/nav/__tests__/additional_menu_test.tsx
+++ b/frontend/nav/__tests__/additional_menu_test.tsx
@@ -37,17 +37,24 @@ describe("AdditionalMenu", () => {
   });
 
   it("closes the account menu upon nav", () => {
-    const close = jest.fn();
     const p = fakeProps();
-    p.close = x => () => close(x);
     const wrapper = shallow(<AdditionalMenu {...p} />);
     wrapper.find("Link").first().simulate("click");
-    expect(close).toHaveBeenCalledWith("accountMenuOpen");
+    expect(p.close).toHaveBeenCalled();
+  });
+
+  it("navigates to setup page", () => {
+    const p = fakeProps();
+    const wrapper = shallow(<AdditionalMenu {...p} />);
+    wrapper.find("Link").at(1).simulate("click");
+    expect(p.close).toHaveBeenCalled();
   });
 
   it("navigates to help page", () => {
-    const wrapper = shallow(<AdditionalMenu {...fakeProps()} />);
+    const p = fakeProps();
+    const wrapper = shallow(<AdditionalMenu {...p} />);
     wrapper.find("Link").at(2).simulate("click");
+    expect(p.close).toHaveBeenCalled();
   });
 
   it("toggles dark mode", () => {
diff --git a/frontend/nav/__tests__/nav_links_test.tsx b/frontend/nav/__tests__/nav_links_test.tsx
index 3df43a36a8..636b977ae2 100644
--- a/frontend/nav/__tests__/nav_links_test.tsx
+++ b/frontend/nav/__tests__/nav_links_test.tsx
@@ -29,12 +29,10 @@ describe("<NavLinks />", () => {
 
   it("toggles the mobile nav menu", () => {
     const p = fakeProps();
-    const close = jest.fn();
-    p.close = x => () => close(x);
     p.alertCount = 0;
     const wrapper = shallow(<NavLinks {...p} />);
     wrapper.find("Link").first().simulate("click");
-    expect(close).toHaveBeenCalledWith("mobileMenuOpen");
+    expect(p.close).toHaveBeenCalled();
     expect(wrapper.text()).not.toContain("0");
   });
 
diff --git a/frontend/nav/__tests__/ticker_list_test.tsx b/frontend/nav/__tests__/ticker_list_test.tsx
index eec4fbf308..5654202f77 100644
--- a/frontend/nav/__tests__/ticker_list_test.tsx
+++ b/frontend/nav/__tests__/ticker_list_test.tsx
@@ -29,7 +29,6 @@ describe("<TickerList />", () => {
     dispatch: jest.fn(),
     timeSettings: fakeTimeSettings(),
     logs: [fakeTaggedLog(), fakeTaggedLog()],
-    toggle: jest.fn(),
     getConfigValue: x => mockStorj[x],
     botOnline: true,
     lastSeen: 0,
diff --git a/frontend/nav/additional_menu.tsx b/frontend/nav/additional_menu.tsx
index a91700cd97..2016dfc1f7 100644
--- a/frontend/nav/additional_menu.tsx
+++ b/frontend/nav/additional_menu.tsx
@@ -9,24 +9,36 @@ import { logout } from "../logout";
 import { setWebAppConfigValue } from "../config_storage/actions";
 import { BooleanSetting } from "../session_keys";
 import { ToggleButton } from "../ui";
+import { setPanelOpen } from "../farm_designer/panel_header";
 
 export const AdditionalMenu = (props: AccountMenuProps) => {
   return <div className="nav-additional-menu">
     <div className={"account-link"}>
       <Link to={Path.settings("account")}
-        onClick={props.close("accountMenuOpen")}>
+        onClick={() => {
+          props.dispatch(setPanelOpen(true));
+          props.close();
+        }}>
         <img width={12} height={12} src={FilePath.icon(Icon.settings_small)} />
         {t("Account Settings")}
       </Link>
     </div>
     <div className={"setup-link"}>
-      <Link to={Path.setup()} onClick={props.close("accountMenuOpen")}>
+      <Link to={Path.setup()}
+        onClick={() => {
+          props.dispatch(setPanelOpen(true));
+          props.close();
+        }}>
         <i className="fa fa-magic" />
         {t("Setup")}
       </Link>
     </div>
     <div className={"help-link"}>
-      <Link to={Path.help()} onClick={props.close("accountMenuOpen")}>
+      <Link to={Path.help()}
+        onClick={() => {
+          props.dispatch(setPanelOpen(true));
+          props.close();
+        }}>
         <i className="fa fa-question-circle" />
         {t("Help")}
       </Link>
diff --git a/frontend/nav/index.tsx b/frontend/nav/index.tsx
index 9fb413dd9e..33546a7bba 100644
--- a/frontend/nav/index.tsx
+++ b/frontend/nav/index.tsx
@@ -30,7 +30,7 @@ import { round } from "lodash";
 import { ControlsPanel } from "../controls/controls";
 import { Actions } from "../constants";
 import { PopupsState } from "../interfaces";
-import { Panel, TAB_ICON } from "../farm_designer/panel_header";
+import { Panel, setPanelOpen, TAB_ICON } from "../farm_designer/panel_header";
 import { movementPercentRemaining } from "../farm_designer/move_to";
 import { isMobile } from "../screen_size";
 import { NavigationContext } from "../routes_helpers";
@@ -145,7 +145,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
             {firstName}
           </div>}
         content={<AdditionalMenu
-          close={this.close}
+          close={this.close("accountMenuOpen")}
           dispatch={this.props.dispatch}
           darkMode={!!this.props.getConfigValue(BooleanSetting.dark_mode)}
           isStaff={this.isStaff} />} />
@@ -198,7 +198,10 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
     const { wizardStepResults, device } = this.props;
     return !device.body.setup_completed_at
       ? <a className={"setup-button"}
-        onClick={() => { this.navigate(Path.setup()); }}>
+        onClick={() => {
+          this.props.dispatch(setPanelOpen(true));
+          this.navigate(Path.setup());
+        }}>
         {t("Setup")}
         {!isMobile() &&
           `: ${setupProgressString(wizardStepResults, { firmwareHardware })}`}
@@ -256,7 +259,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
         <MobileMenu
           designer={this.props.designer}
           dispatch={this.props.dispatch}
-          close={this.close}
+          close={this.close("mobileMenuOpen")}
           alertCount={this.props.alertCount}
           mobileMenuOpen={this.state.mobileMenuOpen}
           helpState={this.props.helpState} />
@@ -265,7 +268,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
         <NavLinks
           designer={this.props.designer}
           dispatch={this.props.dispatch}
-          close={this.close}
+          close={this.close("mobileMenuOpen")}
           alertCount={this.props.alertCount}
           helpState={this.props.helpState} />
       </span>
@@ -275,7 +278,6 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
     <TickerList
       dispatch={this.props.dispatch}
       logs={this.props.logs}
-      toggle={this.toggle}
       timeSettings={this.props.timeSettings}
       getConfigValue={this.props.getConfigValue}
       lastSeen={lastSeenNumber({ bot: this.props.bot, device: this.props.device })}
diff --git a/frontend/nav/interfaces.ts b/frontend/nav/interfaces.ts
index 9b3982bb0a..8fa117bdf3 100644
--- a/frontend/nav/interfaces.ts
+++ b/frontend/nav/interfaces.ts
@@ -54,10 +54,8 @@ export interface NavBarState {
   documentTitle: string;
 }
 
-type ToggleEventHandler = (e: React.MouseEvent<HTMLElement>) => void;
-
 export interface MobileMenuProps {
-  close: (property: keyof NavBarState) => ToggleEventHandler;
+  close(): void;
   mobileMenuOpen: boolean;
   alertCount: number;
   helpState: HelpState;
@@ -66,7 +64,6 @@ export interface MobileMenuProps {
 }
 
 export interface TickerListProps {
-  toggle: (property: keyof NavBarState) => ToggleEventHandler;
   logs: TaggedLog[]
   timeSettings: TimeSettings;
   getConfigValue: GetWebAppConfigValue;
@@ -76,7 +73,7 @@ export interface TickerListProps {
 }
 
 export interface NavLinksProps {
-  close: (property: keyof NavBarState) => ToggleEventHandler;
+  close(): void;
   alertCount: number;
   helpState: HelpState;
   dispatch: Function;
@@ -85,7 +82,7 @@ export interface NavLinksProps {
 
 export interface AccountMenuProps {
   isStaff: boolean;
-  close: (property: keyof NavBarState) => ToggleEventHandler;
+  close(): void;
   dispatch: Function;
   darkMode: boolean;
 }
diff --git a/frontend/nav/mobile_menu.tsx b/frontend/nav/mobile_menu.tsx
index af26d614b9..0ff11961d8 100644
--- a/frontend/nav/mobile_menu.tsx
+++ b/frontend/nav/mobile_menu.tsx
@@ -10,7 +10,7 @@ export const MobileMenu = (props: MobileMenuProps) => {
   return <div className={"mobile-menu-wrapper"}>
     <Overlay2
       isOpen={props.mobileMenuOpen}
-      onClose={props.close("mobileMenuOpen")}>
+      onClose={props.close}>
       <div className={`${classes.join(" ")} ${isActive}`}
         role={"navigation"}
         aria-label={"Mobile Panel Menu"}>
diff --git a/frontend/nav/nav_links.tsx b/frontend/nav/nav_links.tsx
index 46b15a01c7..f9c83d2022 100644
--- a/frontend/nav/nav_links.tsx
+++ b/frontend/nav/nav_links.tsx
@@ -33,7 +33,7 @@ export const NavLinks = (props: NavLinksProps) =>
         draggable={false}
         onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
           e.preventDefault();
-          props.close("mobileMenuOpen")(e);
+          props.close();
           props.dispatch(setPanelOpen(false));
         }}>
         <NavIconAndText panel={Panel.Map} alertCount={props.alertCount} />
@@ -47,14 +47,14 @@ export const NavLinks = (props: NavLinksProps) =>
           ].join(" ")}
           key={PANEL_SLUG[panel]}
           draggable={false}
-          onClick={e => {
-            props.close("mobileMenuOpen")(e);
+          onClick={() => {
+            props.close();
             props.dispatch(setPanelOpen(true));
           }}>
           <NavIconAndText panel={panel} alertCount={props.alertCount} />
         </Link>)}
       <a className={"shop-link"} key={"shop"}
-        draggable={false} onClick={props.close("mobileMenuOpen")}
+        draggable={false} onClick={props.close}
         href={ExternalUrl.Store.home} target={"_blank"} rel={"noreferrer"}>
         <NavIconAndText panel={Panel.Shop} customMiniIcon={
           <div className={"external-icon"}>
diff --git a/frontend/password_reset/password_reset.tsx b/frontend/password_reset/password_reset.tsx
index c2b0f5d1a6..8f07739f2f 100644
--- a/frontend/password_reset/password_reset.tsx
+++ b/frontend/password_reset/password_reset.tsx
@@ -85,7 +85,7 @@ export class PasswordReset extends React.Component<{}, State> {
                   {t("New Password")}
                 </label>
                 <input
-                  type="password"
+                  type={"password"}
                   onChange={this.set("password").bind(this)} />
               </div>
               <div>
@@ -93,7 +93,7 @@ export class PasswordReset extends React.Component<{}, State> {
                   {t("Confirm New Password")}
                 </label>
                 <input
-                  type="password"
+                  type={"password"}
                   onChange={this.set("passwordConfirmation").bind(this)} />
               </div>
               <button
diff --git a/frontend/photos/__tests__/photos_test.tsx b/frontend/photos/__tests__/photos_test.tsx
index febffbfc9c..c13800cc70 100644
--- a/frontend/photos/__tests__/photos_test.tsx
+++ b/frontend/photos/__tests__/photos_test.tsx
@@ -74,7 +74,7 @@ describe("<DesignerPhotos />", () => {
     const p = fakeProps();
     const farmware = fakeFarmware(FarmwareName.MeasureSoilHeight);
     p.farmwares = { [FarmwareName.MeasureSoilHeight]: farmware };
-    const wrapper = shallow<DesignerPhotos>(<DesignerPhotos {...p} />);
+    const wrapper = shallow(<DesignerPhotos {...p} />);
     const headers = wrapper.find(ExpandableHeader);
     Object.keys(p.photosPanelState).filter(k => !k.endsWith("PP"))
       .map((section: keyof PhotosPanelState, index) => {
@@ -89,7 +89,7 @@ describe("<DesignerPhotos />", () => {
     mockDev = true;
     const p = fakeProps();
     p.photosPanelState.manage = true;
-    const wrapper = mount<DesignerPhotos>(<DesignerPhotos {...p} />);
+    const wrapper = mount(<DesignerPhotos {...p} />);
     wrapper.find(ToggleButton).last().simulate("click");
     expect(p.dispatch).toHaveBeenCalled();
   });
diff --git a/frontend/photos/camera_calibration/config.tsx b/frontend/photos/camera_calibration/config.tsx
index ba815589a5..b0752fe221 100644
--- a/frontend/photos/camera_calibration/config.tsx
+++ b/frontend/photos/camera_calibration/config.tsx
@@ -9,7 +9,8 @@ import {
 import { WD_ENV } from "../remote_env/interfaces";
 import { envGet } from "../remote_env/selectors";
 import {
-  SPECIAL_VALUES, CAMERA_CALIBRATION_KEY_PART, WD_KEY_DEFAULTS, namespace,
+  SPECIAL_VALUES, CAMERA_CALIBRATION_KEY_PART, WD_KEY_DEFAULTS,
+  namespace as namespaceFunc,
 } from "../remote_env/constants";
 import { isNumber, isUndefined } from "lodash";
 import { t } from "../../i18next_wrapper";
@@ -18,91 +19,88 @@ import { getModifiedClassName } from "../default_values";
 import { Highlight } from "../../settings/maybe_highlight";
 import { Path } from "../../internal_urls";
 
-export class CameraCalibrationConfig
-  extends React.Component<CameraCalibrationConfigProps, {}> {
+export const CameraCalibrationConfig = (props: CameraCalibrationConfigProps) => {
 
-  wdEnvGet = (key: keyof WD_ENV) => envGet(key, this.props.values);
+  const wdEnvGet = (key: keyof WD_ENV) => envGet(key, props.values);
 
-  namespace = namespace("CAMERA_CALIBRATION_");
+  const namespace = namespaceFunc("CAMERA_CALIBRATION_");
 
-  getDefault = (key: CAMERA_CALIBRATION_KEY_PART) =>
-    WD_KEY_DEFAULTS[this.namespace(key)];
+  const getDefault = (key: CAMERA_CALIBRATION_KEY_PART) =>
+    WD_KEY_DEFAULTS[namespace(key)];
 
-  getLabeledDefault = (key: CAMERA_CALIBRATION_KEY_PART) =>
-    SPECIAL_VALUE_DDI()[this.getDefault(key)].label;
+  const getLabeledDefault = (key: CAMERA_CALIBRATION_KEY_PART) =>
+    SPECIAL_VALUE_DDI()[getDefault(key)].label;
 
-  render() {
-    const simple = !!this.wdEnvGet(this.namespace("easy_calibration"));
-    const commonProps = {
-      wdEnvGet: this.wdEnvGet,
-      onChange: this.props.onChange,
-    };
-    const { calibrationZ } = this.props;
-    return <div className={"grid"}>
-      {!simple &&
-        <div className={"camera-calibration-configs grid"}>
-          <BoolConfig {...commonProps}
-            settingName={DeviceSetting.invertHueRangeSelection}
-            helpText={t(ToolTips.INVERT_HUE_SELECTION, {
-              defaultInvertState: this.getLabeledDefault("invert_hue_selection")
-            })}
-            configKey={this.namespace("invert_hue_selection")} />
-          <NumberBoxConfig {...commonProps}
-            settingName={DeviceSetting.calibrationObjectSeparation}
-            configKey={this.namespace("calibration_object_separation")}
-            helpText={t(ToolTips.OBJECT_SEPARATION, {
-              defaultSeparation: this.getDefault("calibration_object_separation")
-            })} />
-          <DropdownConfig {...commonProps}
-            settingName={DeviceSetting.calibrationObjectSeparationAlongAxis}
-            extraClass={"narrow"}
-            list={CALIBRATION_DROPDOWNS}
-            configKey={this.namespace("calibration_along_axis")}
-            helpText={t(ToolTips.CALIBRATION_OBJECT_AXIS, {
-              defaultAxis: this.getLabeledDefault("calibration_along_axis")
-            })} />
-        </div>}
-      <NumberBoxConfig {...commonProps}
-        settingName={DeviceSetting.cameraOffsetX}
-        configKey={this.namespace("camera_offset_x")}
-        helpText={t(ToolTips.CAMERA_OFFSET, {
-          defaultX: this.getDefault("camera_offset_x"),
-          defaultY: this.getDefault("camera_offset_y"),
-        })} />
-      <NumberBoxConfig {...commonProps}
-        settingName={DeviceSetting.cameraOffsetY}
-        configKey={this.namespace("camera_offset_y")}
-        helpText={t(ToolTips.CAMERA_OFFSET, {
-          defaultX: this.getDefault("camera_offset_x"),
-          defaultY: this.getDefault("camera_offset_y"),
-        })} />
-      <DropdownConfig {...commonProps}
-        settingName={DeviceSetting.originLocationInImage}
-        list={ORIGIN_DROPDOWNS()}
-        configKey={this.namespace("image_bot_origin_location")}
-        helpText={t(ToolTips.IMAGE_BOT_ORIGIN_LOCATION, {
-          defaultOrigin: this.getLabeledDefault("image_bot_origin_location")
-        })} />
-      <NumberBoxConfig {...commonProps}
-        settingName={DeviceSetting.pixelCoordinateScale}
-        configKey={this.namespace("coord_scale")}
-        helpText={t(ToolTips.COORDINATE_SCALE, {
-          defaultScale: this.getDefault("coord_scale")
-        })} />
-      <NumberBoxConfig {...commonProps}
-        settingName={DeviceSetting.cameraRotation}
-        configKey={this.namespace("total_rotation_angle")}
-        helpText={t(ToolTips.IMAGE_ROTATION_ANGLE, {
-          defaultAngle: this.getDefault("total_rotation_angle")
-        })} />
-      <p title={JSON.stringify(this.props.calibrationImageCenter)}>
-        {!isUndefined(calibrationZ)
-          ? `${t("Camera calibrated at z-axis height")}: ${calibrationZ}`
-          : t("Camera not yet calibrated.")}
-      </p>
-    </div>;
-  }
-}
+  const simple = !!wdEnvGet(namespace("easy_calibration"));
+  const commonProps = {
+    wdEnvGet: wdEnvGet,
+    onChange: props.onChange,
+  };
+  const { calibrationZ } = props;
+  return <div className={"grid"}>
+    {!simple &&
+      <div className={"camera-calibration-configs grid"}>
+        <BoolConfig {...commonProps}
+          settingName={DeviceSetting.invertHueRangeSelection}
+          helpText={t(ToolTips.INVERT_HUE_SELECTION, {
+            defaultInvertState: getLabeledDefault("invert_hue_selection")
+          })}
+          configKey={namespace("invert_hue_selection")} />
+        <NumberBoxConfig {...commonProps}
+          settingName={DeviceSetting.calibrationObjectSeparation}
+          configKey={namespace("calibration_object_separation")}
+          helpText={t(ToolTips.OBJECT_SEPARATION, {
+            defaultSeparation: getDefault("calibration_object_separation")
+          })} />
+        <DropdownConfig {...commonProps}
+          settingName={DeviceSetting.calibrationObjectSeparationAlongAxis}
+          extraClass={"narrow"}
+          list={CALIBRATION_DROPDOWNS}
+          configKey={namespace("calibration_along_axis")}
+          helpText={t(ToolTips.CALIBRATION_OBJECT_AXIS, {
+            defaultAxis: getLabeledDefault("calibration_along_axis")
+          })} />
+      </div>}
+    <NumberBoxConfig {...commonProps}
+      settingName={DeviceSetting.cameraOffsetX}
+      configKey={namespace("camera_offset_x")}
+      helpText={t(ToolTips.CAMERA_OFFSET, {
+        defaultX: getDefault("camera_offset_x"),
+        defaultY: getDefault("camera_offset_y"),
+      })} />
+    <NumberBoxConfig {...commonProps}
+      settingName={DeviceSetting.cameraOffsetY}
+      configKey={namespace("camera_offset_y")}
+      helpText={t(ToolTips.CAMERA_OFFSET, {
+        defaultX: getDefault("camera_offset_x"),
+        defaultY: getDefault("camera_offset_y"),
+      })} />
+    <DropdownConfig {...commonProps}
+      settingName={DeviceSetting.originLocationInImage}
+      list={ORIGIN_DROPDOWNS()}
+      configKey={namespace("image_bot_origin_location")}
+      helpText={t(ToolTips.IMAGE_BOT_ORIGIN_LOCATION, {
+        defaultOrigin: getLabeledDefault("image_bot_origin_location")
+      })} />
+    <NumberBoxConfig {...commonProps}
+      settingName={DeviceSetting.pixelCoordinateScale}
+      configKey={namespace("coord_scale")}
+      helpText={t(ToolTips.COORDINATE_SCALE, {
+        defaultScale: getDefault("coord_scale")
+      })} />
+    <NumberBoxConfig {...commonProps}
+      settingName={DeviceSetting.cameraRotation}
+      configKey={namespace("total_rotation_angle")}
+      helpText={t(ToolTips.IMAGE_ROTATION_ANGLE, {
+        defaultAngle: getDefault("total_rotation_angle")
+      })} />
+    <p title={JSON.stringify(props.calibrationImageCenter)}>
+      {!isUndefined(calibrationZ)
+        ? `${t("Camera calibrated at z-axis height")}: ${calibrationZ}`
+        : t("Camera not yet calibrated.")}
+    </p>
+  </div>;
+};
 
 export interface BoolConfigProps {
   configKey: keyof WD_ENV;
diff --git a/frontend/photos/camera_calibration/index.tsx b/frontend/photos/camera_calibration/index.tsx
index 4ba4268e4f..2ebbc9727f 100644
--- a/frontend/photos/camera_calibration/index.tsx
+++ b/frontend/photos/camera_calibration/index.tsx
@@ -7,102 +7,98 @@ import { calibrate, scanImage } from "./actions";
 import { envGet } from "../remote_env/selectors";
 import { MustBeOnline, isBotOnline } from "../../devices/must_be_online";
 import { CameraCalibrationConfig, BoolConfig } from "./config";
-import { namespace, CAMERA_CALIBRATION_KEY_PART } from "../remote_env/constants";
+import {
+  namespace as namespaceFunc, CAMERA_CALIBRATION_KEY_PART,
+} from "../remote_env/constants";
 import { t } from "../../i18next_wrapper";
 import { formatEnvKey } from "../remote_env/translators";
 import { cameraBtnProps } from "../capture_settings/camera_selection";
 import { Content, DeviceSetting, ToolTips } from "../../constants";
 import { getCalibratedImageCenter } from "../photo_filter_settings/util";
 import { ExternalUrl } from "../../external_urls";
-import { NavigateFunction } from "react-router";
-import { NavigationContext } from "../../routes_helpers";
+import { NavigateFunction, useNavigate } from "react-router";
 
-export class CameraCalibration extends
-  React.Component<CameraCalibrationProps, {}> {
-
-  change = (key: NumericKeyName, value: number) => {
-    this.saveEnvVar(this.namespace(key), value);
+export const CameraCalibration = (props: CameraCalibrationProps) => {
+  const navigate = useNavigate();
+  const change = (key: NumericKeyName, value: number) => {
+    saveEnvVar(namespace(key), value);
   };
 
-  namespace = namespace<CAMERA_CALIBRATION_KEY_PART>("CAMERA_CALIBRATION_");
+  const namespace =
+    namespaceFunc<CAMERA_CALIBRATION_KEY_PART>("CAMERA_CALIBRATION_");
 
-  saveEnvVar = (key: WDENVKey, value: number) =>
-    this.props.dispatch(this.props.saveFarmwareEnv(
+  const saveEnvVar = (key: WDENVKey, value: number) =>
+    props.dispatch(props.saveFarmwareEnv(
       key, JSON.stringify(formatEnvKey(key, value))));
 
-  wdEnvGet = (key: WDENVKey) => envGet(key, this.props.wDEnv);
-
-  static contextType = NavigationContext;
-  context!: React.ContextType<typeof NavigationContext>;
-  navigate = this.context;
+  const wdEnvGet = (key: WDENVKey) => envGet(key, props.wDEnv);
 
-  render() {
-    const { wdEnvGet } = this;
-    const { syncStatus, botToMqttStatus } = this.props;
-    const botOnline = isBotOnline(syncStatus, botToMqttStatus);
-    const camDisabled = cameraBtnProps(this.props.env, botOnline);
-    const easyCalibration = !!wdEnvGet(this.namespace("easy_calibration"));
-    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
-          navigate={this.navigate}
-          wdEnvGet={wdEnvGet}
-          saveEnvVar={this.saveEnvVar} />
+  const { syncStatus, botToMqttStatus } = props;
+  const botOnline = isBotOnline(syncStatus, botToMqttStatus);
+  const camDisabled = cameraBtnProps(props.env, botOnline);
+  const easyCalibration = !!wdEnvGet(namespace("easy_calibration"));
+  return <div className="camera-calibration grid">
+    <div className="grid">
+      <div className={"row grid-exp-1"}>
+        <CalibrationCardSVG grid={easyCalibration} />
+        <MustBeOnline
+          syncStatus={props.syncStatus}
+          networkState={props.botToMqttStatus}
+          hideBanner={true}>
+          <button
+            className={`fb-button green ${camDisabled.class}`}
+            title={camDisabled.title}
+            onClick={camDisabled.click || calibrate(easyCalibration)}>
+            {t("Calibrate")}
+          </button>
+        </MustBeOnline>
       </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} />
-    </div>;
-  }
-}
+      <p>{easyCalibration
+        ? t(Content.CAMERA_CALIBRATION_GRID_PATTERN)
+        : t(Content.CAMERA_CALIBRATION_RED_OBJECTS)}</p>
+      <CameraCalibrationMethodConfig
+        navigate={navigate}
+        dispatch={props.dispatch}
+        wdEnvGet={wdEnvGet}
+        saveEnvVar={saveEnvVar} />
+    </div>
+    {!easyCalibration &&
+      <ImageWorkspace
+        sectionKey={"calibration"}
+        dispatch={props.dispatch}
+        advancedSectionOpen={props.photosPanelState.calibrationPP}
+        botOnline={isBotOnline(
+          props.syncStatus, props.botToMqttStatus)}
+        onProcessPhoto={scanImage(easyCalibration)}
+        images={props.images}
+        currentImage={props.currentImage}
+        onChange={change}
+        timeSettings={props.timeSettings}
+        showAdvanced={props.showAdvanced}
+        iteration={props.iteration}
+        morph={props.morph}
+        blur={props.blur}
+        H_LO={props.H_LO}
+        S_LO={props.S_LO}
+        V_LO={props.V_LO}
+        H_HI={props.H_HI}
+        S_HI={props.S_HI}
+        V_HI={props.V_HI}
+        namespace={namespace}
+        invertHue={!!wdEnvGet(namespace("invert_hue_selection"))} />}
+    <CameraCalibrationConfig
+      values={props.wDEnv}
+      calibrationZ={props.env["CAMERA_CALIBRATION_camera_z"]}
+      calibrationImageCenter={getCalibratedImageCenter(props.env)}
+      onChange={saveEnvVar} />
+  </div>;
+};
 
 interface CameraCalibrationMethodConfigProps {
   wdEnvGet(key: WDENVKey): number;
   saveEnvVar(key: WDENVKey, value: number): void;
   navigate: NavigateFunction;
+  dispatch: Function;
 }
 
 export const CameraCalibrationMethodConfig =
@@ -114,7 +110,12 @@ export const CameraCalibrationMethodConfig =
       invert={true}
       helpText={ToolTips.RED_DOT_CAMERA_CALIBRATION}
       links={[
-        <a key={0} onClick={docLinkClick("camera-calibration", props.navigate)}>
+        <a key={0}
+          onClick={docLinkClick({
+            slug: "camera-calibration",
+            navigate: props.navigate,
+            dispatch: props.dispatch,
+          })}>
           {t("as described in the software documentation.")}
           <i className={"fa fa-external-link"} />
         </a>,
diff --git a/frontend/photos/capture_settings/camera_selection.tsx b/frontend/photos/capture_settings/camera_selection.tsx
index 825c736328..034965de36 100644
--- a/frontend/photos/capture_settings/camera_selection.tsx
+++ b/frontend/photos/capture_settings/camera_selection.tsx
@@ -1,12 +1,10 @@
 import React from "react";
-import { DropDownItem, Row, FBSelect } from "../../ui";
-import {
-  CameraSelectionProps, CameraSelectionState,
-} from "./interfaces";
+import { Row, FBSelect } from "../../ui";
+import { CameraSelectionProps } from "./interfaces";
 import { error } from "../../toast/toast";
 import { UserEnv } from "../../devices/interfaces";
 import { t } from "../../i18next_wrapper";
-import { Content, ToolTips, DeviceSetting } from "../../constants";
+import { Content, DeviceSetting, ToolTips } from "../../constants";
 import { Highlight } from "../../settings/maybe_highlight";
 import { getModifiedClassNameSpecifyDefault } from "../../settings/default_values";
 import { Path } from "../../internal_urls";
@@ -67,32 +65,25 @@ const CAMERA_CHOICES_DDI = () => {
   };
 };
 
-export class CameraSelection
-  extends React.Component<CameraSelectionProps, CameraSelectionState> {
+export const CameraSelection = (props: CameraSelectionProps) => {
 
-  state: CameraSelectionState = {
-    cameraStatus: ""
-  };
-
-  selectedCamera = (): DropDownItem =>
-    CAMERA_CHOICES_DDI()[parseCameraSelection(this.props.env)];
+  const selectedCamera =
+    CAMERA_CHOICES_DDI()[parseCameraSelection(props.env)];
 
-  render() {
-    return <Highlight settingName={DeviceSetting.camera} pathPrefix={Path.photos}>
-      <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>;
-  }
-}
+  return <Highlight settingName={DeviceSetting.camera} pathPrefix={Path.photos}>
+    <Row className="row grid-2-col">
+      <label>
+        {t("CAMERA")}
+      </label>
+      <FBSelect
+        allowEmpty={false}
+        list={CAMERA_CHOICES()}
+        selectedItem={selectedCamera}
+        onChange={ddi =>
+          props.dispatch(props.saveFarmwareEnv("camera",
+            JSON.stringify(ddi.value)))}
+        extraClass={getModifiedClassNameSpecifyDefault(
+          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 937c5b5a7a..1952688822 100644
--- a/frontend/photos/capture_settings/capture_size_selection.tsx
+++ b/frontend/photos/capture_settings/capture_size_selection.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { DeviceSetting, ToolTips } from "../../constants";
 import { t } from "../../i18next_wrapper";
 import { Help, BlurableInput, Row, FBSelect, DropDownItem } from "../../ui";
-import { CaptureSizeSelectionProps, CaptureSizeSelectionState } from "./interfaces";
+import { CaptureSizeSelectionProps } from "./interfaces";
 import { Camera, parseCameraSelection } from "./camera_selection";
 import { getModifiedClassNameSpecifyDefault } from "../../settings/default_values";
 import { Highlight } from "../../settings/maybe_highlight";
@@ -53,65 +53,61 @@ export const PhotoResolutionSettingChanged =
     </div>;
   };
 
-export class CaptureSizeSelection
-  extends React.Component<CaptureSizeSelectionProps, CaptureSizeSelectionState> {
-  state: CaptureSizeSelectionState = { custom: false };
+export const CaptureSizeSelection = (props: CaptureSizeSelectionProps) => {
+  const [custom, setCustom] = React.useState(false);
+  const { env, dispatch, saveFarmwareEnv } = props;
+  const { width, height } = getCurrentSizeSetting(env);
+  const selectedSize = getSelection(width, height);
 
-  render() {
-    const { env, dispatch, saveFarmwareEnv } = this.props;
-    const { width, height } = getCurrentSizeSetting(env);
-    const selectedSize = getSelection(width, height);
-
-    return <Highlight settingName={DeviceSetting.imageResolution}
-      pathPrefix={Path.photos}>
-      <div className={"image-size-inputs grid"}>
-        <Row className="row grid-2-col">
-          <div className="row grid-exp-2 half-gap align-baseline">
-            <label>{t("resolution")}</label>
-            <Help text={ToolTips.IMAGE_RESOLUTION} />
-          </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>
-        {(this.state.custom || selectedSize.value == Size.custom) &&
-          <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 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>;
-  }
-}
+  return <Highlight settingName={DeviceSetting.imageResolution}
+    pathPrefix={Path.photos}>
+    <div className={"image-size-inputs grid"}>
+      <Row className="row grid-2-col">
+        <div className="row grid-exp-2 half-gap align-baseline">
+          <label>{t("resolution")}</label>
+          <Help text={ToolTips.IMAGE_RESOLUTION} />
+        </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) {
+              setCustom(true);
+              return;
+            } else {
+              setCustom(false);
+            }
+            const size = SIZES[ddi.value as Size];
+            dispatch(saveFarmwareEnv("take_photo_width", "" + size.width));
+            dispatch(saveFarmwareEnv("take_photo_height", "" + size.height));
+          }} />
+      </Row>
+      {(custom || selectedSize.value == Size.custom) &&
+        <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 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 {...props} />
+    </div>
+  </Highlight>;
+};
 
 const getSelection = (width: string, height: string): DropDownItem => {
   if (parseInt(width) > 5000 && parseInt(height) > 5000) { return MAXIMUM(); }
diff --git a/frontend/photos/capture_settings/index.tsx b/frontend/photos/capture_settings/index.tsx
index 029dd1b19e..7bd4bac49d 100644
--- a/frontend/photos/capture_settings/index.tsx
+++ b/frontend/photos/capture_settings/index.tsx
@@ -2,19 +2,14 @@ import React from "react";
 import { CameraSelection } from "./camera_selection";
 import { CaptureSizeSelection } from "./capture_size_selection";
 import { RotationSetting } from "./rotation_setting";
-import { CaptureSettingsProps, CaptureSettingsState } from "./interfaces";
+import { CaptureSettingsProps } from "./interfaces";
 
-export class CaptureSettings
-  extends React.Component<CaptureSettingsProps, CaptureSettingsState> {
-  state: CaptureSettingsState = { open: false };
-
-  render() {
-    const { dispatch, saveFarmwareEnv, env, botOnline } = this.props;
-    const common = { dispatch, env, saveFarmwareEnv };
-    return <div className="capture-settings grid">
-      <CameraSelection {...common} botOnline={botOnline} />
-      <CaptureSizeSelection {...common} />
-      <RotationSetting {...common} version={this.props.version} />
-    </div>;
-  }
-}
+export const CaptureSettings = (props: CaptureSettingsProps) => {
+  const { dispatch, saveFarmwareEnv, env, botOnline } = props;
+  const common = { dispatch, env, saveFarmwareEnv };
+  return <div className="capture-settings grid">
+    <CameraSelection {...common} botOnline={botOnline} />
+    <CaptureSizeSelection {...common} />
+    <RotationSetting {...common} version={props.version} />
+  </div>;
+};
diff --git a/frontend/photos/capture_settings/interfaces.ts b/frontend/photos/capture_settings/interfaces.ts
index cd0bdf6d4f..cf3840f1c6 100644
--- a/frontend/photos/capture_settings/interfaces.ts
+++ b/frontend/photos/capture_settings/interfaces.ts
@@ -9,10 +9,6 @@ export interface CaptureSettingsProps {
   version: string;
 }
 
-export interface CaptureSettingsState {
-  open: boolean;
-}
-
 export interface RotationSettingProps {
   version: string;
   env: UserEnv;
@@ -26,10 +22,6 @@ export interface CaptureSizeSelectionProps {
   saveFarmwareEnv(key: string, value: string): void;
 }
 
-export interface CaptureSizeSelectionState {
-  custom: boolean;
-}
-
 export interface UpdateRowProps {
   version: string;
   botOnline: boolean;
@@ -41,7 +33,3 @@ export interface CameraSelectionProps {
   saveFarmwareEnv: SaveFarmwareEnv;
   dispatch: Function;
 }
-
-export interface CameraSelectionState {
-  cameraStatus: "" | "sending" | "done" | "error";
-}
diff --git a/frontend/photos/image_workspace/__tests__/index_test.tsx b/frontend/photos/image_workspace/__tests__/index_test.tsx
index caa3c24618..8f34578102 100644
--- a/frontend/photos/image_workspace/__tests__/index_test.tsx
+++ b/frontend/photos/image_workspace/__tests__/index_test.tsx
@@ -1,13 +1,11 @@
 import React from "react";
-import { mount, shallow } from "enzyme";
 import { ImageWorkspace, ImageWorkspaceProps } from "../index";
 import { fakeImage } from "../../../__test_support__/fake_state/resources";
 import { TaggedImage } from "farmbot";
 import { fakeTimeSettings } from "../../../__test_support__/fake_time_settings";
-import { clickButton } from "../../../__test_support__/helpers";
-import { inputEvent } from "../../../__test_support__/fake_html_events";
-import { ExpandableHeader } from "../../../ui";
+import { changeBlurableInputRTL } from "../../../__test_support__/helpers";
 import { Actions } from "../../../constants";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 describe("<ImageWorkspace />", () => {
   const fakeProps = (): ImageWorkspaceProps => ({
@@ -15,9 +13,9 @@ describe("<ImageWorkspace />", () => {
     onChange: jest.fn(),
     currentImage: undefined as TaggedImage | undefined,
     images: [] as TaggedImage[],
-    iteration: 9,
-    morph: 9,
-    blur: 9,
+    iteration: 15,
+    morph: 17,
+    blur: 19,
     H_LO: 2,
     S_LO: 4,
     V_LO: 6,
@@ -33,46 +31,21 @@ describe("<ImageWorkspace />", () => {
     dispatch: jest.fn(),
   });
 
-  it("triggers onChange() event", () => {
-    const props = fakeProps();
-    const iw = new ImageWorkspace(props);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (iw as any).props = props;
-    iw.onHslChange("H")([4, 5]);
-    expect(props.onChange).toHaveBeenCalledTimes(2);
-    expect(props.onChange).toHaveBeenCalledWith("H_HI", 5);
-    expect(props.onChange).toHaveBeenCalledWith("H_LO", 4);
-    jest.clearAllMocks();
-    iw.onHslChange("H")([2, 5]);
-    expect(props.onChange).toHaveBeenCalledTimes(1);
-    expect(props.onChange).toHaveBeenCalledWith("H_HI", 5);
-    jest.clearAllMocks();
-    iw.onHslChange("H")([4, 8]);
-    expect(props.onChange).toHaveBeenCalledTimes(1);
-    expect(props.onChange).toHaveBeenCalledWith("H_LO", 4);
-    jest.clearAllMocks();
-    iw.onHslChange("H")([2, 8]);
-    expect(props.onChange).not.toHaveBeenCalled();
-  });
-
   it("triggers numericChange()", () => {
-    const props = fakeProps();
-    const iw = new ImageWorkspace(props);
-    iw.numericChange("blur")(inputEvent("23"));
-    expect(props.onChange).toHaveBeenCalledWith("blur", 23);
-  });
-
-  it("handles null", () => {
-    const props = fakeProps();
-    const iw = new ImageWorkspace(props);
-    iw.numericChange("blur")(inputEvent(""));
-    expect(props.onChange).toHaveBeenCalledWith("blur", 0);
+    const p = fakeProps();
+    render(<ImageWorkspace {...p} />);
+    const input = screen.getByDisplayValue("19");
+    changeBlurableInputRTL(input, "23");
+    expect(p.onChange).toHaveBeenCalledWith("blur", 23);
   });
 
   it("doesn't process photo", () => {
     const p = fakeProps();
-    const iw = new ImageWorkspace(p);
-    iw.maybeProcessPhoto();
+    p.images = [fakeImage()];
+    p.currentImage = undefined;
+    render(<ImageWorkspace {...p} />);
+    const button = screen.getByText("Scan current image");
+    fireEvent.click(button);
     expect(p.onProcessPhoto).not.toHaveBeenCalled();
   });
 
@@ -84,8 +57,9 @@ describe("<ImageWorkspace />", () => {
     photo2.body.id = 2;
     p.images = [photo1, photo2];
     p.currentImage = photo2;
-    const iw = new ImageWorkspace(p);
-    iw.maybeProcessPhoto();
+    render(<ImageWorkspace {...p} />);
+    const button = screen.getByText("Scan current image");
+    fireEvent.click(button);
     expect(p.onProcessPhoto).toHaveBeenCalledWith(photo2.body.id);
   });
 
@@ -96,24 +70,26 @@ describe("<ImageWorkspace />", () => {
     p.images = [image];
     p.currentImage = image;
     p.showAdvanced = true;
-    const wrapper = mount(<ImageWorkspace {...p} />);
-    clickButton(wrapper, 0, "scan current image");
+    render(<ImageWorkspace {...p} />);
+    const button = screen.getByText("Scan current image");
+    fireEvent.click(button);
     expect(p.onProcessPhoto).toHaveBeenCalledWith(image.body.id);
-    expect(wrapper.text().toLowerCase()).toContain("parameters");
   });
 
   it("disables scan image button when offline", () => {
     const p = fakeProps();
     p.botOnline = false;
-    const wrapper = mount(<ImageWorkspace {...p} />);
-    expect(wrapper.find("button").first().props().disabled).toBeTruthy();
+    render(<ImageWorkspace {...p} />);
+    const button = screen.getByText("Scan current image");
+    expect(button).toBeDisabled();
   });
 
   it("opens: calibration", () => {
     const p = fakeProps();
     p.showAdvanced = true;
-    const wrapper = shallow<ImageWorkspace>(<ImageWorkspace {...p} />);
-    wrapper.find(ExpandableHeader).simulate("click");
+    render(<ImageWorkspace {...p} />);
+    const header = screen.getByText("Processing Parameters");
+    fireEvent.click(header);
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_PHOTOS_PANEL_OPTION, payload: "calibrationPP",
     });
@@ -123,17 +99,11 @@ describe("<ImageWorkspace />", () => {
     const p = fakeProps();
     p.showAdvanced = true;
     p.sectionKey = "detection";
-    const wrapper = shallow<ImageWorkspace>(<ImageWorkspace {...p} />);
-    wrapper.find(ExpandableHeader).simulate("click");
+    render(<ImageWorkspace {...p} />);
+    const header = screen.getByText("Processing Parameters");
+    fireEvent.click(header);
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.TOGGLE_PHOTOS_PANEL_OPTION, payload: "detectionPP",
     });
   });
-
-  it("returns the unmodified class", () => {
-    const p = fakeProps();
-    p.blur = 7;
-    const iw = new ImageWorkspace(p);
-    expect(iw.getModifiedClass("blur")).toEqual("");
-  });
 });
diff --git a/frontend/photos/image_workspace/__tests__/slider_test.tsx b/frontend/photos/image_workspace/__tests__/slider_test.tsx
index 2ab68885ee..43d6093b2d 100644
--- a/frontend/photos/image_workspace/__tests__/slider_test.tsx
+++ b/frontend/photos/image_workspace/__tests__/slider_test.tsx
@@ -1,6 +1,8 @@
 import React from "react";
-import { WeedDetectorSlider, SliderProps } from "../slider";
-import { shallow } from "enzyme";
+import {
+  WeedDetectorSlider, SliderProps, onHslChange, OnHslChangeProps,
+} from "../slider";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.useFakeTimers();
 describe("<WeedDetectorSlider />", () => {
@@ -13,27 +15,46 @@ describe("<WeedDetectorSlider />", () => {
   });
 
   it("changes the slider", () => {
-    const wrapper = shallow<WeedDetectorSlider>(
-      <WeedDetectorSlider {...fakeProps()} />);
-    wrapper.simulate("change", [1, 100]);
-    expect(wrapper.state().lowValue).toEqual(1);
-    expect(wrapper.state().highValue).toEqual(100);
+    const p = fakeProps();
+    render(<WeedDetectorSlider {...p} />);
+    const [handle] = screen.getAllByRole("slider");
+    handle.getBoundingClientRect = () => ({
+      top: 100,
+      bottom: 100,
+      right: 100,
+      left: 100,
+      width: 100,
+      height: 100,
+      x: 100,
+      y: 100,
+      toJSON: jest.fn(),
+    });
+    fireEvent.mouseDown(handle);
+    fireEvent.mouseMove(handle, { clientX: 10 });
+    fireEvent.mouseUp(handle);
+    expect(p.onRelease).toHaveBeenCalledWith([1, 5]);
+    jest.runAllTimers();
   });
+});
 
-  it("handles incorrect value type", () => {
-    const p = fakeProps();
-    p.lowValue = "nope" as unknown as number;
-    expect(() => shallow(<WeedDetectorSlider {...p} />))
-      .toThrow("Something other than number");
+describe("onHslChange()", () => {
+  const fakeProps = (): OnHslChangeProps => ({
+    onChange: jest.fn(),
+    iteration: 9,
+    morph: 9,
+    blur: 9,
+    H_LO: 2,
+    S_LO: 4,
+    V_LO: 6,
+    H_HI: 8,
+    S_HI: 10,
+    V_HI: 12,
   });
 
-  it("releases the slider", () => {
+  it("triggers callback", () => {
     const p = fakeProps();
-    const wrapper = shallow<WeedDetectorSlider>(<WeedDetectorSlider {...p} />);
-    wrapper.simulate("release", [5, 6]);
-    jest.runAllTimers();
-    expect(p.onRelease).toHaveBeenCalledWith([5, 6]);
-    expect(wrapper.state().highValue).toBeUndefined();
-    expect(wrapper.state().lowValue).toBeUndefined();
+    onHslChange(p)("H")([1, 2]);
+    expect(p.onChange).toHaveBeenCalledWith("H_LO", 1);
+    expect(p.onChange).toHaveBeenCalledWith("H_HI", 2);
   });
 });
diff --git a/frontend/photos/image_workspace/index.tsx b/frontend/photos/image_workspace/index.tsx
index d4c8f6421b..3043ec25b0 100644
--- a/frontend/photos/image_workspace/index.tsx
+++ b/frontend/photos/image_workspace/index.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { FarmbotColorPicker } from "./farmbot_picker";
 import { BlurableInput, Row, Help, ExpandableHeader } from "../../ui";
-import { HSV } from "./interfaces";
-import { WeedDetectorSlider } from "./slider";
+import { onHslChange as onHslChangeFunc, WeedDetectorSlider } from "./slider";
 import { TaggedImage } from "farmbot";
 import { parseIntInput } from "../../util";
 import { t } from "../../i18next_wrapper";
@@ -28,7 +27,7 @@ const RANGES = {
 };
 
 /** Number values that the <ImageWorkspace/> panel deals with. */
-interface NumericValues {
+export interface NumericValues {
   iteration: number;
   morph: number;
   blur: number;
@@ -57,226 +56,204 @@ export interface ImageWorkspaceProps extends NumericValues {
   dispatch: Function;
 }
 
-/** Mapping of HSV values to FBOS Env variables. */
-const CHANGE_MAP: Record<HSV, [NumericKeyName, NumericKeyName]> = {
-  H: ["H_LO", "H_HI"],
-  S: ["S_LO", "S_HI"],
-  V: ["V_LO", "V_HI"]
-};
-
-export class ImageWorkspace
-  extends React.Component<ImageWorkspaceProps> {
+// eslint-disable-next-line complexity
+export const ImageWorkspace = (props: ImageWorkspaceProps) => {
 
   /** Generates a function to handle changes to blur/morph/iteration. */
-  numericChange = (key: NumericKeyName) =>
+  const numericChange = (key: NumericKeyName) =>
     (e: React.SyntheticEvent<HTMLInputElement>) => {
-      this.props.onChange(key, parseIntInput(e.currentTarget.value) || 0);
+      props.onChange(key, parseIntInput(e.currentTarget.value));
     };
 
-  maybeProcessPhoto = () => {
-    const currentImageId = this.props.currentImage?.body.id;
+  const maybeProcessPhoto = () => {
+    const currentImageId = props.currentImage?.body.id;
     if (currentImageId) {
-      this.props.onProcessPhoto(currentImageId);
+      props.onProcessPhoto(currentImageId);
     }
   };
 
-  /** This will trigger onChange callback only when necessary, at most twice.
-   * (H|S|L)_HI and (H|S|L)_LO */
-  onHslChange = (key: keyof typeof CHANGE_MAP) =>
-    (values: [number, number]) => {
-      const keys = CHANGE_MAP[key];
-      [0, 1].map(i => {
-        if (values[i] !== this.props[keys[i]]) {
-          this.props.onChange(keys[i], values[i]);
-        }
-      });
-    };
-
-  getDefault = (key: NumericKeyName) =>
-    WD_KEY_DEFAULTS[this.props.namespace(key)];
+  const getDefault = (key: NumericKeyName) =>
+    WD_KEY_DEFAULTS[props.namespace(key)];
 
-  getModifiedClass = (key: NumericKeyName) =>
-    getModifiedClassNameSpecifyModified(this.getDefault(key) != this.props[key]);
+  const getModifiedClass = (key: NumericKeyName) =>
+    getModifiedClassNameSpecifyModified(getDefault(key) != props[key]);
 
-  get anyAdvancedModified() {
-    return some(["blur", "morph", "iteration"]
-      .map((key: NumericKeyName) => this.getDefault(key) != this.props[key]));
-  }
+  const anyAdvancedModified =
+    some(["blur", "morph", "iteration"]
+      .map((key: NumericKeyName) => getDefault(key) != props[key]));
 
-  // eslint-disable-next-line complexity
-  render() {
-    const { H_LO, H_HI, S_LO, S_HI, V_LO, V_HI } = this.props;
-    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 grid">
-      <Row className="grid-2-col weed-detection-grid double-gap">
-        <div className="grid">
-          <Highlight settingName={this.props.sectionKey == "calibration"
-            ? DeviceSetting.calibrationHue
-            : DeviceSetting.detectionHue} pathPrefix={Path.photos}>
-            <div className="row grid-exp-2 half-gap align-baseline">
-              <label htmlFor="hue">{t("HUE")}</label>
-              <Help text={t(ToolTips.COLOR_HUE_RANGE, {
-                defaultLow: defaultHLow,
-                defaultHigh: defaultHHigh,
-                defaultColor: cameraCalibrationEnv ? t("red") : t("green"),
-              })} />
+  const { H_LO, H_HI, S_LO, S_HI, V_LO, V_HI } = props;
+  const onHslChange = onHslChangeFunc(props);
+  const cameraCalibrationEnv = props.namespace("H_LO").includes("CAMERA");
+  const defaultHLow = getDefault(cameraCalibrationEnv ? "H_HI" : "H_LO");
+  const defaultHHigh = getDefault(cameraCalibrationEnv ? "H_LO" : "H_HI");
+  return <div className="image-workspace grid">
+    <Row className="grid-2-col weed-detection-grid double-gap">
+      <div className="grid">
+        <Highlight settingName={props.sectionKey == "calibration"
+          ? DeviceSetting.calibrationHue
+          : DeviceSetting.detectionHue} pathPrefix={Path.photos}>
+          <div className="row grid-exp-2 half-gap align-baseline">
+            <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(
+                Math.min(H_LO, H_HI) != defaultHLow) + "-start",
+              getModifiedClassNameDefaultFalse(
+                Math.max(H_LO, H_HI) != defaultHHigh) + "-end",
+            ].join(" ")}
+            onRelease={onHslChange("H")}
+            lowest={RANGES.H.LOWEST}
+            highest={RANGES.H.HIGHEST}
+            lowValue={Math.min(H_LO, H_HI)}
+            highValue={Math.max(H_LO, H_HI)} />
+        </Highlight>
+        <Highlight settingName={props.sectionKey == "calibration"
+          ? DeviceSetting.calibrationSaturation
+          : DeviceSetting.detectionSaturation} pathPrefix={Path.photos}>
+          <div className="row grid-exp-2 half-gap align-baseline">
+            <label htmlFor="saturation">{t("SATURATION")}</label>
+            <Help text={t(ToolTips.COLOR_SATURATION_RANGE, {
+              defaultLow: getDefault("S_LO"),
+              defaultHigh: getDefault("S_HI"),
+            })} />
+          </div>
+          <WeedDetectorSlider
+            className={[
+              getModifiedClassNameDefaultFalse(
+                S_LO != getDefault("S_LO")) + "-start",
+              getModifiedClassNameDefaultFalse(
+                S_HI != getDefault("S_HI")) + "-end",
+            ].join(" ")}
+            onRelease={onHslChange("S")}
+            lowest={RANGES.S.LOWEST}
+            highest={RANGES.S.HIGHEST}
+            lowValue={S_LO}
+            highValue={S_HI} />
+        </Highlight>
+        <Highlight settingName={props.sectionKey == "calibration"
+          ? DeviceSetting.calibrationValue
+          : DeviceSetting.detectionValue} pathPrefix={Path.photos}>
+          <div className="row grid-exp-2 half-gap align-baseline">
+            <label htmlFor="value">{t("VALUE")}</label>
+            <Help text={t(ToolTips.COLOR_VALUE_RANGE, {
+              defaultLow: getDefault("V_LO"),
+              defaultHigh: getDefault("V_HI"),
+            })} />
+          </div>
+          <WeedDetectorSlider
+            className={[
+              getModifiedClassNameDefaultFalse(
+                V_LO != getDefault("V_LO")) + "-start",
+              getModifiedClassNameDefaultFalse(
+                V_HI != getDefault("V_HI")) + "-end",
+            ].join(" ")}
+            onRelease={onHslChange("V")}
+            lowest={RANGES.V.LOWEST}
+            highest={RANGES.V.HIGHEST}
+            lowValue={V_LO}
+            highValue={V_HI} />
+        </Highlight>
+      </div>
+      <FarmbotColorPicker
+        h={[H_LO, H_HI]}
+        s={[S_LO, S_HI]}
+        v={[V_LO, V_HI]}
+        invertHue={props.invertHue} />
+    </Row>
+    {(props.showAdvanced || anyAdvancedModified) &&
+      <Row>
+        <ExpandableHeader
+          expanded={!!props.advancedSectionOpen}
+          title={t("Processing Parameters")}
+          onClick={() => props.dispatch({
+            type: Actions.TOGGLE_PHOTOS_PANEL_OPTION,
+            payload: props.sectionKey == "calibration"
+              ? "calibrationPP"
+              : "detectionPP",
+          })} />
+      </Row>}
+    {(props.showAdvanced || anyAdvancedModified) &&
+      <Collapse isOpen={props.advancedSectionOpen}>
+        <Row className="grid-3-col">
+          <Highlight
+            settingName={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 align-baseline">
+                <label>{t("BLUR")}</label>
+                <Help text={t(ToolTips.BLUR, {
+                  defaultBlur: getDefault("blur")
+                })} />
+              </div>
+              <BlurableInput type="number"
+                wrapperClassName={getModifiedClass("blur")}
+                min={RANGES.BLUR.LOWEST}
+                max={RANGES.BLUR.HIGHEST}
+                onCommit={numericChange("blur")}
+                value={"" + props.blur} />
             </div>
-            <WeedDetectorSlider
-              className={[
-                getModifiedClassNameDefaultFalse(
-                  Math.min(H_LO, H_HI) != defaultHLow) + "-start",
-                getModifiedClassNameDefaultFalse(
-                  Math.max(H_LO, H_HI) != defaultHHigh) + "-end",
-              ].join(" ")}
-              onRelease={this.onHslChange("H")}
-              lowest={RANGES.H.LOWEST}
-              highest={RANGES.H.HIGHEST}
-              lowValue={Math.min(H_LO, H_HI)}
-              highValue={Math.max(H_LO, H_HI)} />
           </Highlight>
-          <Highlight settingName={this.props.sectionKey == "calibration"
-            ? DeviceSetting.calibrationSaturation
-            : DeviceSetting.detectionSaturation} pathPrefix={Path.photos}>
-            <div className="row grid-exp-2 half-gap align-baseline">
-              <label htmlFor="saturation">{t("SATURATION")}</label>
-              <Help text={t(ToolTips.COLOR_SATURATION_RANGE, {
-                defaultLow: this.getDefault("S_LO"),
-                defaultHigh: this.getDefault("S_HI"),
-              })} />
+          <Highlight
+            settingName={props.sectionKey == "calibration"
+              ? DeviceSetting.calibrationMorph
+              : DeviceSetting.detectionMorph}
+            pathPrefix={Path.photos}>
+            <div className="grid no-gap">
+              <div className="row grid-exp-2 half-gap align-baseline">
+                <label>{t("MORPH")}</label>
+                <Help text={t(ToolTips.MORPH, {
+                  defaultMorph: getDefault("morph")
+                })} />
+              </div>
+              <BlurableInput type="number"
+                wrapperClassName={getModifiedClass("morph")}
+                min={RANGES.MORPH.LOWEST}
+                max={RANGES.MORPH.HIGHEST}
+                onCommit={numericChange("morph")}
+                value={"" + props.morph} />
             </div>
-            <WeedDetectorSlider
-              className={[
-                getModifiedClassNameDefaultFalse(
-                  S_LO != this.getDefault("S_LO")) + "-start",
-                getModifiedClassNameDefaultFalse(
-                  S_HI != this.getDefault("S_HI")) + "-end",
-              ].join(" ")}
-              onRelease={this.onHslChange("S")}
-              lowest={RANGES.S.LOWEST}
-              highest={RANGES.S.HIGHEST}
-              lowValue={S_LO}
-              highValue={S_HI} />
           </Highlight>
-          <Highlight settingName={this.props.sectionKey == "calibration"
-            ? DeviceSetting.calibrationValue
-            : DeviceSetting.detectionValue} pathPrefix={Path.photos}>
-            <div className="row grid-exp-2 half-gap align-baseline">
-              <label htmlFor="value">{t("VALUE")}</label>
-              <Help text={t(ToolTips.COLOR_VALUE_RANGE, {
-                defaultLow: this.getDefault("V_LO"),
-                defaultHigh: this.getDefault("V_HI"),
-              })} />
+          <Highlight
+            settingName={props.sectionKey == "calibration"
+              ? DeviceSetting.calibrationIterations
+              : DeviceSetting.detectionIterations}
+            pathPrefix={Path.photos}>
+            <div className="grid no-gap">
+              <div className="row grid-exp-2 half-gap align-baseline">
+                <label>{t("ITERATIONS")}</label>
+                <Help text={t(ToolTips.ITERATIONS, {
+                  defaultIteration: getDefault("iteration")
+                })} />
+              </div>
+              <BlurableInput type="number"
+                wrapperClassName={getModifiedClass("iteration")}
+                min={RANGES.ITERATION.LOWEST}
+                max={RANGES.ITERATION.HIGHEST}
+                onCommit={numericChange("iteration")}
+                value={"" + props.iteration} />
             </div>
-            <WeedDetectorSlider
-              className={[
-                getModifiedClassNameDefaultFalse(
-                  V_LO != this.getDefault("V_LO")) + "-start",
-                getModifiedClassNameDefaultFalse(
-                  V_HI != this.getDefault("V_HI")) + "-end",
-              ].join(" ")}
-              onRelease={this.onHslChange("V")}
-              lowest={RANGES.V.LOWEST}
-              highest={RANGES.V.HIGHEST}
-              lowValue={V_LO}
-              highValue={V_HI} />
           </Highlight>
-        </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>
-          <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 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 align-baseline">
-                  <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} />
-              </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 align-baseline">
-                  <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} />
-              </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 align-baseline">
-                  <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} />
-              </div>
-            </Highlight>
-          </Row>
-        </Collapse>}
-      <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>;
-  }
-}
+        </Row>
+      </Collapse>}
+    <Row className="grid-exp-1">
+      <div />
+      <button
+        className="green fb-button"
+        title={t("Scan this image")}
+        onClick={maybeProcessPhoto}
+        disabled={!props.botOnline || !props.images.length}>
+        {t("Scan current image")}
+      </button>
+    </Row>
+  </div>;
+};
diff --git a/frontend/photos/image_workspace/interfaces.ts b/frontend/photos/image_workspace/interfaces.ts
index 15d1eb170e..a4d12dc8d0 100644
--- a/frontend/photos/image_workspace/interfaces.ts
+++ b/frontend/photos/image_workspace/interfaces.ts
@@ -1,6 +1,3 @@
-/** Hue, Saturation, Value */
-export type HSV = "H" | "S" | "V";
-
 export interface FarmbotPickerProps {
   h: [number, number];
   s: [number, number];
diff --git a/frontend/photos/image_workspace/slider.tsx b/frontend/photos/image_workspace/slider.tsx
index adc769fef7..06c4461c5a 100644
--- a/frontend/photos/image_workspace/slider.tsx
+++ b/frontend/photos/image_workspace/slider.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { get, isNumber } from "lodash";
-import { bail } from "../../util";
 import { RangeSlider } from "@blueprintjs/core";
+import { NumericKeyName, NumericValues } from ".";
 
 export interface SliderProps {
   onRelease(value: [number, number]): void;
@@ -12,37 +11,54 @@ export interface SliderProps {
   className?: string;
 }
 
-interface State {
-  lowValue: number | undefined;
-  highValue: number | undefined;
-}
-
-export class WeedDetectorSlider extends React.Component<SliderProps, State> {
-  valueFor(i: (keyof State) & (keyof SliderProps)): number {
-    const z = get(this.state, i, get(this.props, i, 0));
-    return isNumber(z) ? z : bail("Something other than number");
-  }
+export const WeedDetectorSlider = (props: SliderProps) => {
+  const [lowValue, setLowValue] = React.useState<number | undefined>(undefined);
+  const [highValue, setHighValue] = React.useState<number | undefined>(undefined);
 
-  onRelease = (i: [number, number]) => {
-    this.props.onRelease(i);
+  const onRelease = (i: [number, number]) => {
+    props.onRelease(i);
     setTimeout(() => {
-      this.setState({ highValue: undefined, lowValue: undefined });
+      setLowValue(undefined);
+      setHighValue(undefined);
     }, 500);
   };
 
-  render() {
-    const {
-      highest,
-      lowest
-    } = this.props;
-
-    return <RangeSlider
-      className={this.props.className}
-      onChange={(i) => this.setState({ highValue: i[1], lowValue: i[0] })}
-      onRelease={this.onRelease}
-      labelStepSize={highest}
-      min={lowest}
-      max={highest}
-      value={[this.valueFor("lowValue"), this.valueFor("highValue")]} />;
-  }
+  return <RangeSlider
+    className={props.className}
+    onChange={i => {
+      setHighValue(i[1]);
+      setLowValue(i[0]);
+    }}
+    onRelease={onRelease}
+    labelStepSize={props.highest}
+    min={props.lowest}
+    max={props.highest}
+    value={[lowValue ?? props.lowValue, highValue ?? props.highValue]} />;
+};
+
+/** Hue, Saturation, Value */
+export type HSV = "H" | "S" | "V";
+
+/** Mapping of HSV values to FBOS Env variables. */
+const CHANGE_MAP: Record<HSV, [NumericKeyName, NumericKeyName]> = {
+  H: ["H_LO", "H_HI"],
+  S: ["S_LO", "S_HI"],
+  V: ["V_LO", "V_HI"]
+};
+
+export interface OnHslChangeProps extends NumericValues {
+  onChange(key: NumericKeyName, value: number): void;
 }
+
+/** This will trigger onChange callback only when necessary, at most twice.
+ * (H|S|L)_HI and (H|S|L)_LO */
+export const onHslChange = (props: OnHslChangeProps) =>
+  (key: keyof typeof CHANGE_MAP) =>
+    (values: [number, number]) => {
+      const keys = CHANGE_MAP[key];
+      [0, 1].map(i => {
+        if (values[i] !== props[keys[i]]) {
+          props.onChange(keys[i], values[i]);
+        }
+      });
+    };
diff --git a/frontend/photos/photos.tsx b/frontend/photos/photos.tsx
index 29ee87a652..0b3bae6827 100644
--- a/frontend/photos/photos.tsx
+++ b/frontend/photos/photos.tsx
@@ -57,160 +57,162 @@ const NewPhotoButtons = (props: NewPhotoButtonsProps) => {
   </div>;
 };
 
-export class RawDesignerPhotos
-  extends React.Component<DesignerPhotosProps> {
+export const RawDesignerPhotos = (props: DesignerPhotosProps) => {
+  React.useEffect(() => {
+    props.dispatch(maybeOpenPanel("photos"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  componentDidMount = () => this.props.dispatch(maybeOpenPanel("photos"));
+  const toggle = (key: keyof PhotosPanelState) => () =>
+    props.dispatch({ type: Actions.TOGGLE_PHOTOS_PANEL_OPTION, payload: key });
 
-  toggle = (key: keyof PhotosPanelState) => () =>
-    this.props.dispatch({ type: Actions.TOGGLE_PHOTOS_PANEL_OPTION, payload: key });
-
-  get imageShowFlags(): ImageShowFlags {
-    return getImageShownStatusFlags({
-      getConfigValue: this.props.getConfigValue,
-      env: this.props.env,
-      image: this.props.currentImage,
-      designer: this.props.designer,
-      size: this.props.currentImageSize,
+  const imageShowFlags: ImageShowFlags =
+    getImageShownStatusFlags({
+      getConfigValue: props.getConfigValue,
+      env: props.env,
+      image: props.currentImage,
+      designer: props.designer,
+      size: props.currentImageSize,
     });
-  }
 
-  render() {
-    const wDEnvGet = (key: WDENVKey) => envGet(key, this.props.wDEnv);
-    const { syncStatus, botToMqttStatus, photosPanelState } = this.props;
-    const botOnline = isBotOnline(syncStatus, botToMqttStatus);
-    const common = {
-      syncStatus,
-      botToMqttStatus,
-      timeSettings: this.props.timeSettings,
-      dispatch: this.props.dispatch,
-      images: this.props.images,
-      env: this.props.env,
-      currentImage: this.props.currentImage,
-    };
-    const imageCommon = {
-      flags: this.imageShowFlags,
-      designer: this.props.designer,
-      getConfigValue: this.props.getConfigValue,
-    };
-    const farmwareNames = Object.keys(this.props.farmwares);
-    return <DesignerPanel panelName={"photos"} panel={Panel.Photos}>
-      <DesignerPanelContent panelName={"photos"}>
-        <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}
-          arduinoBusy={this.props.arduinoBusy}
-          currentImageSize={this.props.currentImageSize}
-          imageJobs={this.props.imageJobs} />
-        <ExpandableHeader
-          expanded={photosPanelState.filter}
-          title={t("Filter map photos")}
-          onClick={this.toggle("filter")}>
-          <FiltersEnabledWarning
-            designer={this.props.designer}
-            getConfigValue={this.props.getConfigValue} />
-        </ExpandableHeader>
-        <Collapse isOpen={photosPanelState.filter}>
-          <PhotoFilterSettings {...common} {...imageCommon} />
-        </Collapse>
-        <ExpandableHeader
-          expanded={photosPanelState.camera}
-          title={t("Camera settings")}
-          onClick={this.toggle("camera")} />
-        <Collapse isOpen={photosPanelState.camera}>
-          <CaptureSettings
-            dispatch={this.props.dispatch}
-            env={this.props.env}
+  const wDEnvGet = (key: WDENVKey) => envGet(key, props.wDEnv);
+  const { syncStatus, botToMqttStatus, photosPanelState } = props;
+  const botOnline = isBotOnline(syncStatus, botToMqttStatus);
+  const common = {
+    syncStatus,
+    botToMqttStatus,
+    timeSettings: props.timeSettings,
+    dispatch: props.dispatch,
+    images: props.images,
+    env: props.env,
+    currentImage: props.currentImage,
+  };
+  const imageCommon = {
+    flags: imageShowFlags,
+    designer: props.designer,
+    getConfigValue: props.getConfigValue,
+  };
+  const farmwareNames = Object.keys(props.farmwares);
+  return <DesignerPanel panelName={"photos"} panel={Panel.Photos}>
+    <DesignerPanelContent panelName={"photos"}>
+      <div className="row grid-exp-1">
+        <h2 className="panel-title">{t("Photos")}</h2>
+        <NewPhotoButtons
+          syncStatus={props.syncStatus}
+          botToMqttStatus={props.botToMqttStatus}
+          takePhoto={takePhoto}
+          env={props.env}
+          imageJobs={props.imageJobs} />
+      </div>
+      <Photos {...common} {...imageCommon}
+        currentBotLocation={props.currentBotLocation}
+        movementState={props.movementState}
+        arduinoBusy={props.arduinoBusy}
+        currentImageSize={props.currentImageSize}
+        imageJobs={props.imageJobs} />
+      <ExpandableHeader
+        expanded={photosPanelState.filter}
+        title={t("Filter map photos")}
+        onClick={toggle("filter")}>
+        <FiltersEnabledWarning
+          designer={props.designer}
+          getConfigValue={props.getConfigValue} />
+      </ExpandableHeader>
+      <Collapse isOpen={photosPanelState.filter}>
+        <PhotoFilterSettings {...common} {...imageCommon} />
+      </Collapse>
+      <ExpandableHeader
+        expanded={photosPanelState.camera}
+        title={t("Camera settings")}
+        onClick={toggle("camera")} />
+      <Collapse isOpen={photosPanelState.camera}>
+        <CaptureSettings
+          dispatch={props.dispatch}
+          env={props.env}
+          botOnline={botOnline}
+          version={props.versions["take-photo"] || ""}
+          saveFarmwareEnv={props.saveFarmwareEnv} />
+      </Collapse>
+      <ExpandableHeader
+        expanded={!!photosPanelState.calibration}
+        title={t("Camera calibration")}
+        onClick={toggle("calibration")} />
+      <Collapse isOpen={!!photosPanelState.calibration}>
+        <ToolTip helpText={ToolTips.CAMERA_CALIBRATION}
+          dispatch={props.dispatch}
+          docPage={"camera-calibration"} />
+        <CameraCalibration {...common}
+          photosPanelState={props.photosPanelState}
+          wDEnv={props.wDEnv}
+          showAdvanced={!!props.getConfigValue(
+            BooleanSetting.show_advanced_settings)}
+          saveFarmwareEnv={props.saveFarmwareEnv}
+          iteration={wDEnvGet("CAMERA_CALIBRATION_iteration")}
+          morph={wDEnvGet("CAMERA_CALIBRATION_morph")}
+          blur={wDEnvGet("CAMERA_CALIBRATION_blur")}
+          H_LO={wDEnvGet("CAMERA_CALIBRATION_H_LO")}
+          S_LO={wDEnvGet("CAMERA_CALIBRATION_S_LO")}
+          V_LO={wDEnvGet("CAMERA_CALIBRATION_V_LO")}
+          H_HI={wDEnvGet("CAMERA_CALIBRATION_H_HI")}
+          S_HI={wDEnvGet("CAMERA_CALIBRATION_S_HI")}
+          V_HI={wDEnvGet("CAMERA_CALIBRATION_V_HI")}
+          versions={props.versions} />
+      </Collapse>
+      <ExpandableHeader
+        expanded={!!photosPanelState.detection}
+        title={t("Weed detection")}
+        onClick={toggle("detection")} />
+      <Collapse isOpen={!!photosPanelState.detection}>
+        <ToolTip helpText={ToolTips.WEED_DETECTOR}
+          dispatch={props.dispatch}
+          docPage={"weed-detection"} />
+        <WeedDetector {...common}
+          photosPanelState={props.photosPanelState}
+          wDEnv={props.wDEnv}
+          showAdvanced={!!props.getConfigValue(
+            BooleanSetting.show_advanced_settings)}
+          saveFarmwareEnv={props.saveFarmwareEnv} />
+      </Collapse>
+      <ExpandableHeader
+        expanded={!!photosPanelState.measure}
+        title={t("Measure soil height")}
+        onClick={toggle("measure")} />
+      <Collapse isOpen={!!photosPanelState.measure}>
+        <ToolTip helpText={ToolTips.SOIL_HEIGHT_DETECTION}
+          dispatch={props.dispatch}
+          docPage={"measure-soil-height"} />
+        {farmwareNames.includes(FarmwareName.MeasureSoilHeight)
+          ? <FarmwareForm
+            farmware={props.farmwares[FarmwareName.MeasureSoilHeight]}
+            env={props.env}
+            userEnv={props.userEnv}
+            farmwareEnvs={props.farmwareEnvs}
+            saveFarmwareEnv={props.saveFarmwareEnv}
             botOnline={botOnline}
-            version={this.props.versions["take-photo"] || ""}
-            saveFarmwareEnv={this.props.saveFarmwareEnv} />
-        </Collapse>
-        <ExpandableHeader
-          expanded={!!photosPanelState.calibration}
-          title={t("Camera calibration")}
-          onClick={this.toggle("calibration")} />
-        <Collapse isOpen={!!photosPanelState.calibration}>
-          <ToolTip helpText={ToolTips.CAMERA_CALIBRATION}
-            docPage={"camera-calibration"} />
-          <CameraCalibration {...common}
-            photosPanelState={this.props.photosPanelState}
-            wDEnv={this.props.wDEnv}
-            showAdvanced={!!this.props.getConfigValue(
+            hideAdvanced={!props.getConfigValue(
               BooleanSetting.show_advanced_settings)}
-            saveFarmwareEnv={this.props.saveFarmwareEnv}
-            iteration={wDEnvGet("CAMERA_CALIBRATION_iteration")}
-            morph={wDEnvGet("CAMERA_CALIBRATION_morph")}
-            blur={wDEnvGet("CAMERA_CALIBRATION_blur")}
-            H_LO={wDEnvGet("CAMERA_CALIBRATION_H_LO")}
-            S_LO={wDEnvGet("CAMERA_CALIBRATION_S_LO")}
-            V_LO={wDEnvGet("CAMERA_CALIBRATION_V_LO")}
-            H_HI={wDEnvGet("CAMERA_CALIBRATION_H_HI")}
-            S_HI={wDEnvGet("CAMERA_CALIBRATION_S_HI")}
-            V_HI={wDEnvGet("CAMERA_CALIBRATION_V_HI")}
-            versions={this.props.versions} />
-        </Collapse>
+            dispatch={props.dispatch} />
+          : <div className={"farmware-form"}>
+            <button className={"fb-button green farmware-button pseudo-disabled"}>
+              {t("measure")}
+            </button>
+          </div>}
+      </Collapse>
+      {DevSettings.futureFeaturesEnabled() &&
         <ExpandableHeader
-          expanded={!!photosPanelState.detection}
-          title={t("Weed detection")}
-          onClick={this.toggle("detection")} />
-        <Collapse isOpen={!!photosPanelState.detection}>
-          <ToolTip helpText={ToolTips.WEED_DETECTOR} docPage={"weed-detection"} />
-          <WeedDetector {...common}
-            photosPanelState={this.props.photosPanelState}
-            wDEnv={this.props.wDEnv}
-            showAdvanced={!!this.props.getConfigValue(
-              BooleanSetting.show_advanced_settings)}
-            saveFarmwareEnv={this.props.saveFarmwareEnv} />
-        </Collapse>
-        <ExpandableHeader
-          expanded={!!photosPanelState.measure}
-          title={t("Measure soil height")}
-          onClick={this.toggle("measure")} />
-        <Collapse isOpen={!!photosPanelState.measure}>
-          <ToolTip helpText={ToolTips.SOIL_HEIGHT_DETECTION}
-            docPage={"measure-soil-height"} />
-          {farmwareNames.includes(FarmwareName.MeasureSoilHeight)
-            ? <FarmwareForm
-              farmware={this.props.farmwares[FarmwareName.MeasureSoilHeight]}
-              env={this.props.env}
-              userEnv={this.props.userEnv}
-              farmwareEnvs={this.props.farmwareEnvs}
-              saveFarmwareEnv={this.props.saveFarmwareEnv}
-              botOnline={botOnline}
-              hideAdvanced={!this.props.getConfigValue(
-                BooleanSetting.show_advanced_settings)}
-              dispatch={this.props.dispatch} />
-            : <div className={"farmware-form"}>
-              <button className={"fb-button green farmware-button pseudo-disabled"}>
-                {t("measure")}
-              </button>
-            </div>}
-        </Collapse>
-        {DevSettings.futureFeaturesEnabled() &&
-          <ExpandableHeader
-            expanded={!!photosPanelState.manage}
-            title={t("Manage data")}
-            onClick={this.toggle("manage")} />}
-        {DevSettings.futureFeaturesEnabled() &&
-          <Collapse isOpen={!!photosPanelState.manage}>
-            <ImagingDataManagement
-              dispatch={this.props.dispatch}
-              farmwareEnvs={this.props.farmwareEnvs}
-              getConfigValue={this.props.getConfigValue} />
-          </Collapse>}
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+          expanded={!!photosPanelState.manage}
+          title={t("Manage data")}
+          onClick={toggle("manage")} />}
+      {DevSettings.futureFeaturesEnabled() &&
+        <Collapse isOpen={!!photosPanelState.manage}>
+          <ImagingDataManagement
+            dispatch={props.dispatch}
+            farmwareEnvs={props.farmwareEnvs}
+            getConfigValue={props.getConfigValue} />
+        </Collapse>}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
 
 export const DesignerPhotos = connect(mapStateToProps)(RawDesignerPhotos);
 // eslint-disable-next-line import/no-default-export
diff --git a/frontend/photos/weed_detector/__tests__/index_test.tsx b/frontend/photos/weed_detector/__tests__/index_test.tsx
index 78a5d3f9d1..6590f567f9 100644
--- a/frontend/photos/weed_detector/__tests__/index_test.tsx
+++ b/frontend/photos/weed_detector/__tests__/index_test.tsx
@@ -21,6 +21,7 @@ import { error } from "../../../toast/toast";
 import { Content, ToolTips } from "../../../constants";
 import { WeedDetectorProps } from "../interfaces";
 import { fakePhotosPanelState } from "../../../__test_support__/fake_camera_data";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 describe("<WeedDetector />", () => {
   API.setBaseUrl("http://localhost:3000");
@@ -73,18 +74,21 @@ describe("<WeedDetector />", () => {
   });
 
   it("executes clear weeds", () => {
-    const wrapper = shallow<WeedDetector>(<WeedDetector {...fakeProps()} />);
-    expect(wrapper.instance().state.deletionProgress).toBeUndefined();
-    clickButton(wrapper, 0, "clear weeds");
+    const { rerender } = render(<WeedDetector {...fakeProps()} />);
+    expect(screen.getByText("CLEAR WEEDS")).toBeInTheDocument();
+    const button = screen.getByText("CLEAR WEEDS");
+    fireEvent.click(button);
     expect(deletePoints).toHaveBeenCalledWith(
       "weeds", { meta: { created_by: "plant-detection" } }, expect.any(Function));
-    expect(wrapper.instance().state.deletionProgress).toEqual("Deleting...");
+    expect(screen.getByText("Deleting...")).toBeInTheDocument();
     const fakeProgress = { completed: 50, total: 100, isDone: false };
     mockDeletePoints.mock.calls[0][2](fakeProgress);
-    expect(wrapper.instance().state.deletionProgress).toEqual("50 %");
+    rerender(<WeedDetector {...fakeProps()} />);
+    expect(screen.getByText("50 %")).toBeInTheDocument();
     fakeProgress.isDone = true;
     mockDeletePoints.mock.calls[0][2](fakeProgress);
-    expect(wrapper.instance().state.deletionProgress).toEqual("");
+    rerender(<WeedDetector {...fakeProps()} />);
+    expect(screen.getByText("CLEAR WEEDS")).toBeInTheDocument();
   });
 
   it("saves ImageWorkspace changes: API", () => {
diff --git a/frontend/photos/weed_detector/index.tsx b/frontend/photos/weed_detector/index.tsx
index 11e9e27f9b..c71e89d77e 100644
--- a/frontend/photos/weed_detector/index.tsx
+++ b/frontend/photos/weed_detector/index.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { WeedDetectorState, WeedDetectorProps } from "./interfaces";
+import { WeedDetectorProps } from "./interfaces";
 import { scanImage, detectPlants } from "./actions";
 import { deletePoints } from "../../api/delete_points";
 import { Progress } from "../../util";
 import { ImageWorkspace, NumericKeyName } from "../image_workspace";
 import { WDENVKey } from "../remote_env/interfaces";
 import {
-  namespace, WD_KEY_DEFAULTS, WEED_DETECTOR_KEY_PART,
+  namespace as namespaceFunc, WD_KEY_DEFAULTS, WEED_DETECTOR_KEY_PART,
 } from "../remote_env/constants";
 import { envGet } from "../remote_env/selectors";
 import { MustBeOnline, isBotOnline } from "../../devices/must_be_online";
@@ -18,136 +18,126 @@ import { DeviceSetting, ToolTips } from "../../constants";
 import { formatEnvKey } from "../remote_env/translators";
 import { some } from "lodash";
 
-export class WeedDetector
-  extends React.Component<WeedDetectorProps, Partial<WeedDetectorState>> {
-
-  constructor(props: WeedDetectorProps) {
-    super(props);
-    this.state = { remoteFarmwareSettings: {} };
-  }
+export const WeedDetector = (props: WeedDetectorProps) => {
+  const [deletionProgress, setDeletionProgress] = React.useState("");
 
   /** Delete all map points created by the Weed Detector. */
-  clearWeeds = () => {
+  const clearWeeds = () => {
     const progress = (p: Readonly<Progress>) => {
       const percentage = `${Math.round((p.completed / p.total) * 100)} %`;
-      this.setState({ deletionProgress: p.isDone ? "" : percentage });
+      setDeletionProgress(p.isDone ? "" : percentage);
     };
-    this.props.dispatch(deletePoints(t("weeds"),
+    props.dispatch(deletePoints(t("weeds"),
       { meta: { created_by: "plant-detection" } }, progress));
-    this.setState({ deletionProgress: t("Deleting...") });
+    setDeletionProgress(t("Deleting..."));
   };
 
-  namespace = namespace<WEED_DETECTOR_KEY_PART>("WEED_DETECTOR_");
+  const namespace = namespaceFunc<WEED_DETECTOR_KEY_PART>("WEED_DETECTOR_");
 
-  change = (key: NumericKeyName, value: number) => {
-    this.saveEnvVar(this.namespace(key), value);
+  const change = (key: NumericKeyName, value: number) => {
+    saveEnvVar(namespace(key), value);
   };
 
-  saveEnvVar = (key: WDENVKey, value: number) =>
-    this.props.dispatch(this.props.saveFarmwareEnv(
+  const saveEnvVar = (key: WDENVKey, value: number) =>
+    props.dispatch(props.saveFarmwareEnv(
       key, JSON.stringify(formatEnvKey(key, value))));
 
-  wdEnvGet = (key: WDENVKey) => envGet(key, this.props.wDEnv);
+  const wdEnvGet = (key: WDENVKey) => envGet(key, props.wDEnv);
 
-  getDefault = (key: WEED_DETECTOR_KEY_PART) =>
-    WD_KEY_DEFAULTS[this.namespace(key)];
+  const getDefault = (key: WEED_DETECTOR_KEY_PART) =>
+    WD_KEY_DEFAULTS[namespace(key)];
 
-  getLabeledDefault = (key: WEED_DETECTOR_KEY_PART) =>
-    SPECIAL_VALUE_DDI()[this.getDefault(key)].label;
+  const getLabeledDefault = (key: WEED_DETECTOR_KEY_PART) =>
+    SPECIAL_VALUE_DDI()[getDefault(key)].label;
 
-  get commonProps() {
-    return {
-      wdEnvGet: this.wdEnvGet,
-      onChange: this.saveEnvVar,
-    };
-  }
+  const commonProps = {
+    wdEnvGet: wdEnvGet,
+    onChange: saveEnvVar,
+  };
 
-  get anyAdvancedModified() {
-    return some(["save_detected_plants"].map((key: NumericKeyName) =>
-      this.getDefault(key) != this.wdEnvGet(this.namespace(key))));
-  }
+  const anyAdvancedModified =
+    some(["save_detected_plants"].map((key: NumericKeyName) =>
+      getDefault(key) != wdEnvGet(namespace(key))));
 
-  render() {
-    const wDEnvGet = (key: WDENVKey) => envGet(key, this.props.wDEnv);
-    const { syncStatus, botToMqttStatus } = this.props;
-    const botOnline = isBotOnline(syncStatus, botToMqttStatus);
-    const camDisabled = cameraBtnProps(this.props.env, botOnline);
-    return <div className="weed-detector">
-      <div className="row grid-exp-1">
-        <div />
+  const wDEnvGet = (key: WDENVKey) => envGet(key, props.wDEnv);
+  const { syncStatus, botToMqttStatus } = props;
+  const botOnline = isBotOnline(syncStatus, botToMqttStatus);
+  const camDisabled = cameraBtnProps(props.env, botOnline);
+  return <div className="weed-detector">
+    <div className="row grid-exp-1">
+      <div />
+      <button
+        title={t("clear weeds")}
+        onClick={clearWeeds}
+        className="fb-button red">
+        {deletionProgress || t("CLEAR WEEDS")}
+      </button>
+      <MustBeOnline
+        syncStatus={props.syncStatus}
+        networkState={props.botToMqttStatus}
+        hideBanner={true}>
         <button
-          title={t("clear weeds")}
-          onClick={this.clearWeeds}
-          className="fb-button red">
-          {this.state.deletionProgress || t("CLEAR WEEDS")}
+          className={`fb-button green ${camDisabled.class}`}
+          title={camDisabled.title}
+          onClick={camDisabled.click ||
+            detectPlants(wDEnvGet("CAMERA_CALIBRATION_coord_scale"))}>
+          {t("detect weeds")}
         </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 ||
-              detectPlants(wDEnvGet("CAMERA_CALIBRATION_coord_scale"))}>
-            {t("detect weeds")}
-          </button>
-        </MustBeOnline>
-      </div>
-      <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>;
-  }
-}
+      </MustBeOnline>
+    </div>
+    <ImageWorkspace
+      sectionKey={"detection"}
+      dispatch={props.dispatch}
+      advancedSectionOpen={props.photosPanelState.detectionPP}
+      botOnline={
+        isBotOnline(props.syncStatus, props.botToMqttStatus)}
+      onProcessPhoto={scanImage(wDEnvGet("CAMERA_CALIBRATION_coord_scale"))}
+      currentImage={props.currentImage}
+      images={props.images}
+      onChange={change}
+      timeSettings={props.timeSettings}
+      showAdvanced={props.showAdvanced}
+      namespace={namespace}
+      iteration={wDEnvGet(namespace("iteration"))}
+      morph={wDEnvGet(namespace("morph"))}
+      blur={wDEnvGet(namespace("blur"))}
+      H_LO={wDEnvGet(namespace("H_LO"))}
+      H_HI={wDEnvGet(namespace("H_HI"))}
+      S_LO={wDEnvGet(namespace("S_LO"))}
+      S_HI={wDEnvGet(namespace("S_HI"))}
+      V_LO={wDEnvGet(namespace("V_LO"))}
+      V_HI={wDEnvGet(namespace("V_HI"))} />
+    <div className={"grid"}>
+      <BoolConfig {...commonProps}
+        settingName={DeviceSetting.saveDetectedPlants}
+        advanced={true}
+        showAdvanced={props.showAdvanced}
+        modified={anyAdvancedModified}
+        helpText={t(ToolTips.SAVE_DETECTED_PLANTS, {
+          defaultSavePlants:
+            getLabeledDefault("save_detected_plants")
+        })}
+        configKey={namespace("save_detected_plants")} />
+      <BoolConfig {...commonProps}
+        settingName={DeviceSetting.ignoreDetectionsOutOfBounds}
+        helpText={t(ToolTips.USE_BOUNDS, {
+          defaultUseBounds: getLabeledDefault("use_bounds")
+        })}
+        configKey={namespace("use_bounds")} />
+      <NumberBoxConfig {...commonProps}
+        settingName={DeviceSetting.minimumWeedSize}
+        configKey={namespace("min_radius")}
+        scale={2}
+        helpText={t(ToolTips.MIN_RADIUS, {
+          defaultMinDiameter: getDefault("min_radius") * 2
+        })} />
+      <NumberBoxConfig {...commonProps}
+        settingName={DeviceSetting.maximumWeedSize}
+        configKey={namespace("max_radius")}
+        scale={2}
+        helpText={t(ToolTips.MAX_RADIUS, {
+          defaultMaxDiameter: getDefault("max_radius") * 2
+        })} />
+    </div>
+  </div>;
+};
diff --git a/frontend/photos/weed_detector/interfaces.ts b/frontend/photos/weed_detector/interfaces.ts
index 2b2e58be32..4c9eb88e25 100644
--- a/frontend/photos/weed_detector/interfaces.ts
+++ b/frontend/photos/weed_detector/interfaces.ts
@@ -6,13 +6,6 @@ import { TimeSettings } from "../../interfaces";
 import { SaveFarmwareEnv } from "../../farmware/interfaces";
 import { PhotosPanelState } from "../interfaces";
 
-export interface WeedDetectorState {
-  isEditing: boolean;
-  deletionProgress: string;
-  settingsMenuOpen: boolean;
-  remoteFarmwareSettings: Partial<WD_ENV>;
-}
-
 export interface WeedDetectorProps {
   dispatch: Function;
   wDEnv: Partial<WD_ENV>;
diff --git a/frontend/sequences/step_tiles/tile_assertion.tsx b/frontend/sequences/step_tiles/tile_assertion.tsx
index 545ac8b908..6a77f2bab5 100644
--- a/frontend/sequences/step_tiles/tile_assertion.tsx
+++ b/frontend/sequences/step_tiles/tile_assertion.tsx
@@ -26,7 +26,11 @@ export const TileAssertion = (props: StepParams<Assertion>) => {
     className={"assertion-step"}
     helpText={ToolTips.ASSERTION}
     links={[
-      <a key={"lua"} onClick={devDocLinkClick("lua", navigate)}>
+      <a key={"lua"} onClick={devDocLinkClick({
+        slug: "lua",
+        navigate,
+        dispatch: props.dispatch,
+      })}>
         {" " + t("Documentation")}
         <i className="fa fa-external-link" />
       </a>]}
diff --git a/frontend/sequences/step_tiles/tile_lua.tsx b/frontend/sequences/step_tiles/tile_lua.tsx
index d6d5101a62..30a6953b3c 100644
--- a/frontend/sequences/step_tiles/tile_lua.tsx
+++ b/frontend/sequences/step_tiles/tile_lua.tsx
@@ -23,7 +23,11 @@ export const TileLua = (props: StepParams<Lua>) => {
     className={"lua-step"}
     helpText={ToolTips.LUA}
     links={[
-      <a key={"lua"} onClick={devDocLinkClick("lua", navigate)}>
+      <a key={"lua"} onClick={devDocLinkClick({
+        slug: "lua",
+        navigate,
+        dispatch: props.dispatch,
+      })}>
         {" " + t("Documentation")}
         <i className="fa fa-external-link" />
       </a>]}
diff --git a/frontend/sequences/step_ui/step_radio.tsx b/frontend/sequences/step_ui/step_radio.tsx
index 3a68f9f0b3..86ad46baf5 100644
--- a/frontend/sequences/step_ui/step_radio.tsx
+++ b/frontend/sequences/step_ui/step_radio.tsx
@@ -15,7 +15,7 @@ export interface StepRadioProps<T extends string> {
 
 export const StepRadio = <T extends string>(props: StepRadioProps<T>) =>
   <Row>
-    <form className="row sequence-step-radio-grid double-gap">
+    <div 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}
@@ -24,7 +24,7 @@ export const StepRadio = <T extends string>(props: StepRadioProps<T>) =>
             checked={props.currentChoice === choice} />
           <label>{t(props.choiceLabelLookup[choice])}</label>
         </div>)}
-    </form>
+    </div>
   </Row>;
 
 type AxisStep = FindHome | Home | Calibrate | Zero;
diff --git a/frontend/settings/__tests__/index_test.tsx b/frontend/settings/__tests__/index_test.tsx
index c96351b3c7..41b7a527b6 100644
--- a/frontend/settings/__tests__/index_test.tsx
+++ b/frontend/settings/__tests__/index_test.tsx
@@ -94,16 +94,6 @@ describe("<DesignerSettings />", () => {
     expect(maybeOpenPanel).toHaveBeenCalled();
   });
 
-  it("unmounts", () => {
-    const p = fakeProps();
-    const wrapper = mount(<DesignerSettings {...p} />);
-    wrapper.unmount();
-    expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SET_SETTINGS_SEARCH_TERM,
-      payload: "",
-    });
-  });
-
   it("sets search term", () => {
     location.search = "?search=search";
     const p = fakeProps();
@@ -118,9 +108,7 @@ describe("<DesignerSettings />", () => {
     location.search = "?search=search";
     location.pathname = "path";
     const p = fakeProps();
-    const wrapper = shallow<DesignerSettings>(<DesignerSettings {...p} />);
-    const navigate = jest.fn();
-    wrapper.instance().navigate = navigate;
+    const wrapper = shallow(<DesignerSettings {...p} />);
     wrapper.find(SearchField).simulate("change", "setting");
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.BULK_TOGGLE_SETTINGS_PANEL,
@@ -130,7 +118,7 @@ describe("<DesignerSettings />", () => {
       type: Actions.SET_SETTINGS_SEARCH_TERM,
       payload: "setting",
     });
-    expect(navigate).toHaveBeenCalledWith("path");
+    expect(mockNavigate).toHaveBeenCalledWith("path");
   });
 
   it("fetches firmware_hardware", () => {
@@ -238,7 +226,7 @@ describe("<DesignerSettings />", () => {
   });
 
   it("renders surprise", () => {
-    mockHighlightName = "surprise";
+    location.search = "?only=surprise";
     const p = fakeProps();
     p.searchTerm = "surprise";
     const wrapper = mount(<DesignerSettings {...p} />);
@@ -247,13 +235,12 @@ describe("<DesignerSettings />", () => {
 
   it("cancels setting isolation", () => {
     location.search = "?only=setting";
-    location.assign = jest.fn();
     location.pathname = "path";
     const p = fakeProps();
     p.searchTerm = "";
     const wrapper = mount(<DesignerSettings {...p} />);
     clickButton(wrapper, 1, "cancel");
-    expect(location.assign).toHaveBeenCalledWith("path");
+    expect(mockNavigate).toHaveBeenCalledWith("path");
   });
 
   it("renders change ownership form", () => {
diff --git a/frontend/settings/__tests__/maybe_highlight_test.tsx b/frontend/settings/__tests__/maybe_highlight_test.tsx
index 663b0c1511..78b293139d 100644
--- a/frontend/settings/__tests__/maybe_highlight_test.tsx
+++ b/frontend/settings/__tests__/maybe_highlight_test.tsx
@@ -12,7 +12,7 @@ jest.mock("../../redux/store", () => ({
 import React from "react";
 import { mount, shallow } from "enzyme";
 import {
-  Highlight, HighlightProps, maybeHighlight, maybeOpenPanel, highlight,
+  Highlight, HighlightProps, maybeOpenPanel,
 } from "../maybe_highlight";
 import { Actions, DeviceSetting } from "../../constants";
 import { toggleControlPanel, bulkToggleControlPanel } from "../toggle_section";
@@ -27,11 +27,13 @@ describe("<Highlight />", () => {
   });
 
   it("fades highlight", () => {
+    location.search = "?highlight=motors";
+    jest.useFakeTimers();
     const p = fakeProps();
-    const wrapper = mount<Highlight>(<Highlight {...p} />);
-    wrapper.setState({ className: "highlight" });
-    wrapper.instance().componentDidMount();
-    expect(wrapper.state().className).toEqual("unhighlight");
+    const wrapper = mount(<Highlight {...p} />);
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find("div").first().hasClass("unhighlight")).toBeTruthy();
   });
 
   it("doesn't hide: no search term", () => {
@@ -104,19 +106,10 @@ describe("<Highlight />", () => {
 
   it("shows anchor link icon on hover", () => {
     const wrapper = shallow<Highlight>(<Highlight {...fakeProps()} />);
-    expect(wrapper.state().hovered).toEqual(false);
     expect(wrapper.find("i").last().hasClass("hovered")).toEqual(false);
     wrapper.simulate("mouseEnter");
-    expect(wrapper.state().hovered).toEqual(true);
-    expect(wrapper.find("i").last().hasClass("hovered")).toEqual(true);
-  });
-
-  it("hides anchor link icon on unhover", () => {
-    const wrapper = shallow<Highlight>(<Highlight {...fakeProps()} />);
-    wrapper.setState({ hovered: true });
     expect(wrapper.find("i").last().hasClass("hovered")).toEqual(true);
     wrapper.simulate("mouseLeave");
-    expect(wrapper.state().hovered).toEqual(false);
     expect(wrapper.find("i").last().hasClass("hovered")).toEqual(false);
   });
 
@@ -143,44 +136,7 @@ describe("<Highlight />", () => {
   });
 });
 
-describe("maybeHighlight()", () => {
-  beforeEach(() => {
-    highlight.opened = false;
-    highlight.highlighted = false;
-  });
-
-  it("highlights only once", () => {
-    location.search = "?highlight=motors";
-    expect(maybeHighlight(DeviceSetting.motors)).toEqual("highlight");
-    expect(maybeHighlight(DeviceSetting.motors)).toEqual("");
-  });
-
-  it("doesn't highlight: different setting", () => {
-    location.search = "?highlight=name";
-    expect(maybeHighlight(DeviceSetting.motors)).toEqual("");
-  });
-
-  it("doesn't highlight: no matches", () => {
-    location.search = "?highlight=na";
-    expect(maybeHighlight(DeviceSetting.motors)).toEqual("");
-  });
-});
-
 describe("maybeOpenPanel()", () => {
-  beforeEach(() => {
-    highlight.opened = false;
-    highlight.highlighted = false;
-  });
-
-  it("opens panel only once", () => {
-    location.search = "?highlight=motors";
-    maybeOpenPanel()(jest.fn());
-    expect(toggleControlPanel).toHaveBeenCalledWith("motors");
-    jest.resetAllMocks();
-    maybeOpenPanel()(jest.fn());
-    expect(toggleControlPanel).not.toHaveBeenCalled();
-  });
-
   it("doesn't open panel: no search term", () => {
     location.search = "";
     maybeOpenPanel()(jest.fn());
diff --git a/frontend/settings/account/__tests__/change_password_test.tsx b/frontend/settings/account/__tests__/change_password_test.tsx
index 08a52751ec..4ba7e4c875 100644
--- a/frontend/settings/account/__tests__/change_password_test.tsx
+++ b/frontend/settings/account/__tests__/change_password_test.tsx
@@ -1,152 +1,112 @@
-let mockPatch = Promise.resolve();
+let mockPatch = () => Promise.resolve();
 jest.mock("axios", () => ({
-  patch: jest.fn(() => mockPatch),
+  patch: jest.fn(() => mockPatch()),
+}));
+
+interface MockRef {
+  current: { querySelectorAll(): [{ value: string }] } | undefined;
+}
+let mockRef: MockRef = { current: { querySelectorAll: () => [{ value: "" }] } };
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useRef: () => mockRef,
 }));
 
 import React from "react";
-import { mount } from "enzyme";
-import { ChangePassword, ChangePWState } from "../change_password";
-import { SpecialStatus } from "farmbot";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ChangePassword } from "../change_password";
 import { API } from "../../../api/api";
 import { error, success } from "../../../toast/toast";
-import { inputEvent } from "../../../__test_support__/fake_html_events";
 import axios from "axios";
 
-describe("<ChangePassword />", () => {
-  it("doesn't fire maybeClearForm() if form is filled", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.setState({
-      status: SpecialStatus.DIRTY,
-      form: { ...el.instance().state.form, password: "X" }
-    });
-    el.update();
-    expect(el.instance().state.form.password).toEqual("X");
-    expect(el.instance().state.status).toBe(SpecialStatus.DIRTY);
-    el.instance().maybeClearForm();
-    expect(el.instance().state.status).toBe(SpecialStatus.DIRTY);
-    expect(el.instance().state.form.password).toEqual("X");
-  });
-
-  it("does fire maybeClearForm() when form is empty.", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.setState({
-      status: SpecialStatus.DIRTY,
-      form: {
-        new_password: "",
-        new_password_confirmation: "",
-        password: ""
-      }
-    });
-    el.instance().maybeClearForm();
-    el.update();
-    expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
-  });
-
-  it("sets a field", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.instance().set("password")(inputEvent("foo"));
-    el.update();
-    expect(el.instance().state.form.password).toBe("foo");
-  });
+const setFields = (
+  password: string,
+  newPassword: string,
+  newPasswordConfirmation: string,
+) => {
+  fireEvent.blur(screen.getByLabelText("Old Password"),
+    { target: { value: password } });
+  fireEvent.blur(screen.getByLabelText("New Password"),
+    { target: { value: newPassword } });
+  fireEvent.blur(screen.getByLabelText("Confirm New Password"),
+    { target: { value: newPasswordConfirmation } });
+  expect(screen.getAllByDisplayValue(password)[0]).toBeInTheDocument();
+  const button = screen.getByText("Save");
+  fireEvent.click(button);
+};
 
+describe("<ChangePassword />", () => {
   it("rejects new == old password case", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.instance().state.form = {
-      password: "password",
-      new_password: "password",
-      new_password_confirmation: "password"
-    };
-    el.instance().save();
+    render(<ChangePassword />);
+    setFields("password", "password", "password");
     const expectation = expect.stringContaining("Password not changed");
     expect(error).toHaveBeenCalledWith(expectation);
-    expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
   });
 
   it("rejects too short new password", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.instance().state.form = {
-      password: "a",
-      new_password: "a",
-      new_password_confirmation: "a"
-    };
-    el.instance().save();
+    render(<ChangePassword />);
+    setFields("a", "a", "a");
     const expectation = expect.stringContaining("New password must be at least");
     expect(error).toHaveBeenCalledWith(expectation);
-    expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
   });
 
   it("rejects new != password confirmation case", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.instance().state.form = {
-      password: "aaaaaaaa",
-      new_password: "bbbbbbbb",
-      new_password_confirmation: "cccccccc"
-    };
-    el.instance().save();
+    render(<ChangePassword />);
+    setFields("aaaaaaaa", "bbbbbbbb", "cccccccc");
     const expectation = expect.stringContaining("do not match");
     expect(error).toHaveBeenCalledWith(expectation);
-    expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
   });
 
-  it("throws a form error", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.instance().state.form = {
-      password: "password0",
-      new_password: "password1",
-      new_password_confirmation: "password2",
-      extra_password: "password3",
-    } as ChangePWState["form"];
-    expect(el.instance().save).toThrow("form error");
-    expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
+  it("cancels password change", () => {
+    window.confirm = () => false;
+    render(<ChangePassword />);
+    setFields("aaaaaaaa", "bbbbbbbb", "bbbbbbbb");
+    expect(axios.patch).not.toHaveBeenCalled();
   });
 
-  it("cancels password change", () => {
-    const el = mount<ChangePassword>(<ChangePassword />);
-    el.instance().state.form = {
-      password: "aaaaaaaa",
-      new_password: "bbbbbbbb",
-      new_password_confirmation: "bbbbbbbb"
-    };
+  it("handles missing ref", () => {
+    mockRef = { current: undefined };
     window.confirm = () => false;
-    el.instance().save();
-    expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
+    render(<ChangePassword />);
+    setFields("aaaaaaaa", "bbbbbbbb", "bbbbbbbb");
+    expect(axios.patch).not.toHaveBeenCalled();
   });
 
   describe("AJAX", () => {
     API.setBaseUrl("localhost");
 
     it("saves (KO)", async () => {
-      mockPatch = Promise.reject({ response: { data: "error" } });
+      mockPatch = () => Promise.reject({ response: { data: "error" } });
       window.confirm = () => true;
-      const el = mount<ChangePassword>(<ChangePassword />);
-      const form = {
-        password: "xxxxxxxx",
-        new_password: "bbbbbbbb",
-        new_password_confirmation: "bbbbbbbb"
-      };
-      el.instance().state.form = form;
-      await el.instance().save();
-      expect(axios.patch).toHaveBeenCalledWith("http://localhost/api/users/", form);
-      expect(error).toHaveBeenCalledWith("Error: error");
-      expect(success).not.toHaveBeenCalled();
-      expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
+      render(<ChangePassword />);
+      setFields("aaaaaaaa", "bbbbbbbb", "bbbbbbbb");
+      await waitFor(() => {
+        expect(axios.patch).toHaveBeenCalledWith("http://localhost/api/users/",
+          {
+            password: "aaaaaaaa",
+            new_password: "bbbbbbbb",
+            new_password_confirmation: "bbbbbbbb",
+          });
+        expect(error).toHaveBeenCalledWith("Error: error");
+        expect(success).not.toHaveBeenCalled();
+      });
     });
 
     it("saves (OK)", async () => {
-      mockPatch = Promise.resolve();
+      mockPatch = () => Promise.resolve();
       window.confirm = () => true;
-      const el = mount<ChangePassword>(<ChangePassword />);
-      const form = {
-        password: "aaaaaaaa",
-        new_password: "bbbbbbbb",
-        new_password_confirmation: "bbbbbbbb"
-      };
-      el.instance().state.form = form;
-      await el.instance().save();
-      expect(axios.patch).toHaveBeenCalledWith("http://localhost/api/users/", form);
-      expect(success).toHaveBeenCalledWith("Your password is changed.");
-      expect(error).not.toHaveBeenCalled();
-      expect(el.instance().state.status).toBe(SpecialStatus.SAVED);
+      render(<ChangePassword />);
+      setFields("aaaaaaaa", "bbbbbbbb", "bbbbbbbb");
+      await waitFor(() => {
+        expect(axios.patch).toHaveBeenCalledWith("http://localhost/api/users/",
+          {
+            password: "aaaaaaaa",
+            new_password: "bbbbbbbb",
+            new_password_confirmation: "bbbbbbbb",
+          });
+        expect(success).toHaveBeenCalledWith("Your password is changed.");
+        expect(error).not.toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx b/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx
index e3ffd6dd40..ee2b3a8c0b 100644
--- a/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx
+++ b/frontend/settings/account/__tests__/dangerous_delete_widget_test.tsx
@@ -1,8 +1,16 @@
+interface MockRef {
+  current: { value: string } | undefined;
+}
+let mockRef: MockRef = { current: { value: "" } };
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useRef: () => mockRef,
+}));
+
 import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { DangerousDeleteWidget } from "../dangerous_delete_widget";
-import { mount, shallow } from "enzyme";
 import { DangerousDeleteProps } from "../interfaces";
-import { BlurablePassword } from "../../../ui/blurable_password";
 
 describe("<DangerousDeleteWidget />", () => {
   const fakeProps = (): DangerousDeleteProps => ({
@@ -15,35 +23,29 @@ describe("<DangerousDeleteWidget />", () => {
 
   it("renders", () => {
     const p = fakeProps();
-    const wrapper = mount(<DangerousDeleteWidget {...p} />);
+    render(<DangerousDeleteWidget {...p} />);
     [p.title, p.warning, p.confirmation].map(string =>
-      expect(wrapper.text()).toContain(string));
+      expect(screen.getAllByText(RegExp(string, "i"))[0]).toBeInTheDocument());
   });
 
   it("executes deletion", () => {
     const p = fakeProps();
-    const wrapper = mount(<DangerousDeleteWidget {...p} />);
-    wrapper.setState({ password: "123" });
-    wrapper.find("button.red").last().simulate("click");
+    render(<DangerousDeleteWidget {...p} />);
+    const input = screen.getByLabelText("Enter Password");
+    fireEvent.blur(input, { target: { value: "password" } });
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
     expect(p.onClick).toHaveBeenCalledTimes(1);
-    expect(p.onClick).toHaveBeenCalledWith({ password: "123" });
+    expect(p.onClick).toHaveBeenCalledWith({ password: "password" });
     expect(p.dispatch).toHaveBeenCalled();
   });
 
-  it("enters password", () => {
-    const wrapper = shallow<DangerousDeleteWidget>(
-      <DangerousDeleteWidget {...fakeProps()} />);
-    wrapper.find(BlurablePassword).simulate("commit", {
-      currentTarget: { value: "password" }
-    });
-    expect(wrapper.state().password).toEqual("password");
-  });
-
-  it("clears password", () => {
-    const wrapper = mount<DangerousDeleteWidget>(
-      <DangerousDeleteWidget {...fakeProps()} />);
-    wrapper.setState({ password: "password" });
-    wrapper.unmount();
-    expect(wrapper).toEqual({});
+  it("handles missing ref", () => {
+    mockRef = { current: undefined };
+    const p = fakeProps();
+    render(<DangerousDeleteWidget {...p} />);
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+    expect(p.onClick).toHaveBeenCalledWith({ password: "" });
   });
 });
diff --git a/frontend/settings/account/change_password.tsx b/frontend/settings/account/change_password.tsx
index 836fc79f5c..f24c9641f2 100644
--- a/frontend/settings/account/change_password.tsx
+++ b/frontend/settings/account/change_password.tsx
@@ -3,10 +3,9 @@ import { SaveBtn } from "../../ui";
 import { SpecialStatus } from "farmbot";
 import axios from "axios";
 import { API } from "../../api/index";
-import { prettyPrintApiErrors, equals, trim, AxiosErrorResponse } from "../../util";
+import { prettyPrintApiErrors, AxiosErrorResponse } from "../../util";
 import { Content, DeviceSetting } from "../../constants";
-import { uniq } from "lodash";
-import { BlurablePassword } from "../../ui/blurable_password";
+import { clone, uniq } from "lodash";
 import { t } from "../../i18next_wrapper";
 import { success, error } from "../../toast/toast";
 
@@ -16,103 +15,115 @@ interface PasswordForm {
   password: string;
 }
 
-export interface ChangePWState { status: SpecialStatus; form: PasswordForm }
-
-const EMPTY_FORM =
-  ({ new_password: "", new_password_confirmation: "", password: "" });
-
-export class ChangePassword extends React.Component<{}, ChangePWState> {
-  state: ChangePWState = { status: SpecialStatus.SAVED, form: EMPTY_FORM };
+export interface ChangePWState {
+  status: SpecialStatus;
+  form: PasswordForm;
+}
 
-  componentWillUnmount() {
-    this.clearForm();
-  }
+export const ChangePassword = () => {
+  const [status, setStatus] = React.useState(SpecialStatus.SAVED);
+  const [password, setPassword] = React.useState("");
+  const [newPassword, setNewPassword] = React.useState("");
+  const [newPasswordConfirmation, setNewPasswordConfirmation] = React.useState("");
 
-  /** Set the `status` flag to `undefined`, but only if the form is empty.
-   * Useful when the user manually clears the form. */
-  maybeClearForm =
-    () => equals(EMPTY_FORM, this.state.form) ? this.clearForm() : false;
+  const form = {
+    password,
+    new_password: newPassword,
+    new_password_confirmation: newPasswordConfirmation,
+  };
 
-  clearForm = () => this.setState({ status: SpecialStatus.SAVED, form: EMPTY_FORM });
+  // eslint-disable-next-line no-null/no-null
+  const formRef = React.useRef<HTMLDivElement>(null);
 
-  set = (key: keyof PasswordForm) =>
-    (e: React.SyntheticEvent<HTMLInputElement>) => {
-      const wow = {
-        status: SpecialStatus.DIRTY,
-        form: { ...this.state.form, [key]: e.currentTarget.value }
-      };
-      this.setState(wow, this.maybeClearForm);
-    };
+  const clearForm = () => {
+    setStatus(SpecialStatus.SAVED);
+    setPassword("");
+    setNewPassword("");
+    setNewPasswordConfirmation("");
+    if (formRef.current) {
+      formRef.current.querySelectorAll("input").forEach((input) => {
+        input.value = "";
+      });
+    }
+  };
 
-  sendChange = () =>
+  const sendChange = () =>
     axios
-      .patch(API.current.usersPath, this.state.form)
+      .patch(API.current.usersPath, clone(form))
       .then(() => {
         success(t("Your password is changed."));
-        this.clearForm();
+        clearForm();
       }, (e: AxiosErrorResponse) => {
         error(prettyPrintApiErrors(e));
-        this.clearForm();
+        clearForm();
       });
 
-  save = () => {
-    if (this.state.form.new_password.length < 8) {
+  const save = () => {
+    if (newPassword.length < 8) {
       error(t("New password must be at least 8 characters."));
-      this.clearForm();
+      clearForm();
       return;
     }
-    const numUniqueValues = uniq(Object.values(this.state.form)).length;
+    const numUniqueValues = uniq(Object.values(form)).length;
     switch (numUniqueValues) {
       case 1:
         error(t("Provided new and old passwords match. Password not changed."));
-        this.clearForm();
+        clearForm();
         break;
       case 2:
         if (confirm(t(Content.ACCOUNT_PASSWORD_CHANGE))) {
-          this.setState({ status: SpecialStatus.SAVING });
-          this.sendChange();
+          setStatus(SpecialStatus.SAVING);
+          sendChange();
         }
-        this.clearForm();
+        clearForm();
         break;
       case 3:
         error(t("New password and confirmation do not match."));
-        this.clearForm();
+        clearForm();
         break;
-      default:
-        this.clearForm();
-        throw new Error(trim(`Password change form error:
-          ${numUniqueValues} unique values provided.`));
     }
   };
 
-  render() {
-    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>
-    </div>;
-  }
-}
+  return <div className={"change-password grid"}>
+    <div className="row grid-exp-1">
+      <label>
+        {t(DeviceSetting.changePassword)}
+      </label>
+      <SaveBtn onClick={save} status={status} />
+    </div>
+    <div
+      ref={formRef}
+      className={"grid grid-2-col"}>
+      <label htmlFor={"password"}>
+        {t("Old Password")}
+      </label>
+      <input
+        id={"password"}
+        type={"password"}
+        onBlur={e => {
+          setStatus(SpecialStatus.DIRTY);
+          setPassword(e.target.value);
+        }} />
+      <label htmlFor={"new_password"}>
+        {t("New Password")}
+      </label>
+      <input
+        id={"new_password"}
+        type={"password"}
+        onBlur={e => {
+          setStatus(SpecialStatus.DIRTY);
+          setNewPassword(e.target.value);
+        }} />
+      <label htmlFor={"new_password_confirmation"}>
+        {t("Confirm New Password")}
+      </label>
+      <input
+        id={"new_password_confirmation"}
+        type={"password"}
+        onBlur={e => {
+          setStatus(SpecialStatus.DIRTY);
+          setNewPasswordConfirmation(e.target.value);
+        }} />
+    </div>
+  </div>;
+};
diff --git a/frontend/settings/account/dangerous_delete_widget.tsx b/frontend/settings/account/dangerous_delete_widget.tsx
index 8c216c87be..2de53234e5 100644
--- a/frontend/settings/account/dangerous_delete_widget.tsx
+++ b/frontend/settings/account/dangerous_delete_widget.tsx
@@ -1,52 +1,51 @@
 import React from "react";
 import { Row } from "../../ui";
 import { DangerousDeleteProps, DeletionRequest } from "./interfaces";
-import { BlurablePassword } from "../../ui/blurable_password";
 import { t } from "../../i18next_wrapper";
+import { clone } from "lodash";
 
 /** Widget for permanently deleting large amounts of user data. */
-export class DangerousDeleteWidget extends
-  React.Component<DangerousDeleteProps, DeletionRequest> {
-  state: DeletionRequest = { password: "" };
+export const DangerousDeleteWidget = (props: DangerousDeleteProps) => {
+  const [password, setPassword] = React.useState("");
+  // eslint-disable-next-line no-null/no-null
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
-  componentWillUnmount() {
-    this.setState({ password: "" });
-  }
-
-  onClick = () =>
-    this.props.dispatch(this.props.onClick({ password: this.state.password }));
-
-  render() {
-    return <div className="grid">
-      <label>
-        {t(this.props.title)}
-      </label>
-      <div className="settings-warning-banner">
-        <p>
-          {t(this.props.warning)}
-          <br /><br />
-          {t(this.props.confirmation)}
-        </p>
-      </div>
-      <form>
-        <Row className="grid-exp-1">
-          <div className="grid half-gap">
-            <label>
-              {t("Enter Password")}
-            </label>
-            <BlurablePassword
-              onCommit={e =>
-                this.setState({ password: e.currentTarget.value })} />
-          </div>
-          <button
-            onClick={this.onClick}
-            className="red fb-button"
-            title={t(this.props.title)}
-            type="button">
-            {t(this.props.title)}
-          </button>
-        </Row>
-      </form>
-    </div>;
-  }
-}
+  return <div className="grid">
+    <label>
+      {t(props.title)}
+    </label>
+    <div className="settings-warning-banner">
+      <p>
+        {t(props.warning)}
+        <br /><br />
+        {t(props.confirmation)}
+      </p>
+    </div>
+    <div className="grid">
+      <Row className="grid-exp-1">
+        <div className="grid half-gap">
+          <label htmlFor={"password"}>
+            {t("Enter Password")}
+          </label>
+          <input
+            ref={inputRef}
+            id={"password"}
+            type={"password"}
+            onBlur={e => setPassword(e.currentTarget.value)} />
+        </div>
+        <button
+          onClick={() => {
+            const payload: DeletionRequest = clone({ password });
+            setPassword("");
+            inputRef.current && (inputRef.current.value = "");
+            props.dispatch(props.onClick(payload));
+          }}
+          className="red fb-button"
+          title={t(props.title)}
+          type="button">
+          {t(props.title)}
+        </button>
+      </Row>
+    </div>
+  </div>;
+};
diff --git a/frontend/settings/custom_settings.tsx b/frontend/settings/custom_settings.tsx
index ebed8620a0..d4eb9155d1 100644
--- a/frontend/settings/custom_settings.tsx
+++ b/frontend/settings/custom_settings.tsx
@@ -25,7 +25,11 @@ export const CustomSettings = (props: CustomSettingsProps) => {
           {" "}
           {t("Refer to the")}
           {" "}
-          <a onClick={devDocLinkClick("lua", navigate)}>
+          <a onClick={devDocLinkClick({
+            slug: "lua",
+            navigate,
+            dispatch: props.dispatch,
+          })}>
             {t("developer documentation")}
           </a>
           {" "}
diff --git a/frontend/settings/fbos_settings/__tests__/boot_sequence_selector_test.tsx b/frontend/settings/fbos_settings/__tests__/boot_sequence_selector_test.tsx
index ac14199c0b..8ca10a9473 100644
--- a/frontend/settings/fbos_settings/__tests__/boot_sequence_selector_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/boot_sequence_selector_test.tsx
@@ -12,6 +12,7 @@ import {
 import React from "react";
 import { mount } from "enzyme";
 import { FBSelect } from "../../../ui";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 describe("sequence2ddi()", () => {
   it("converts TaggedSequences", () => {
@@ -90,9 +91,12 @@ describe("<RawBootSequenceSelector />", () => {
 
   it("handles the `onChange` event", () => {
     const p = fakeProps();
-    const el = new RawBootSequenceSelector(p);
-    el.onChange({ label: "X", value: 3 });
-    expect(p.dispatch).toHaveBeenCalled();
+    p.list = [{ label: "X", value: 3 }];
+    render(<RawBootSequenceSelector {...p} />);
+    const select = screen.getByRole("button", { name: "None" });
+    fireEvent.click(select);
+    const item = screen.getByText("X");
+    fireEvent.click(item);
     expect(p.dispatch)
       .toHaveBeenCalledWith(expect.objectContaining({ type: "EDIT_RESOURCE" }));
   });
diff --git a/frontend/settings/fbos_settings/__tests__/factory_reset_row_test.tsx b/frontend/settings/fbos_settings/__tests__/factory_reset_row_test.tsx
index 7463e75f9d..4304855b67 100644
--- a/frontend/settings/fbos_settings/__tests__/factory_reset_row_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/factory_reset_row_test.tsx
@@ -6,6 +6,7 @@ import { FactoryResetRowsProps } from "../interfaces";
 describe("<FactoryResetRows />", () => {
   const fakeProps = (): FactoryResetRowsProps => ({
     botOnline: true,
+    dispatch: jest.fn(),
   });
 
   it("renders", () => {
diff --git a/frontend/settings/fbos_settings/__tests__/farmbot_os_row_test.tsx b/frontend/settings/fbos_settings/__tests__/farmbot_os_row_test.tsx
index 5f8508e47a..eb9b671135 100644
--- a/frontend/settings/fbos_settings/__tests__/farmbot_os_row_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/farmbot_os_row_test.tsx
@@ -4,7 +4,7 @@ jest.mock("../os_update_button", () => ({
 }));
 
 import React from "react";
-import { mount } from "enzyme";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { FarmbotOsRow, getOsReleaseNotesForVersion } from "../farmbot_os_row";
 import { bot } from "../../../__test_support__/fake_state/bot";
 import { FarmbotOsRowProps } from "../interfaces";
@@ -28,16 +28,16 @@ describe("<FarmbotOsRow />", () => {
   });
 
   it("renders", () => {
-    const wrapper = mount(<FarmbotOsRow {...fakeProps()} />);
-    ["FarmBot OS", "Version", "Release Notes"].map(string =>
-      expect(wrapper.text().toLowerCase()).toContain(string.toLowerCase()));
+    const { container } = render(<FarmbotOsRow {...fakeProps()} />);
+    ["Farmbot OS", "Version", "Release Notes"].map(string =>
+      expect(container).toContainHTML(string));
   });
 
   it("fetches API OS release info", () => {
     const p = fakeProps();
     p.bot.hardware.informational_settings.target = "rpi";
     p.bot.hardware.informational_settings.controller_version = "1.0.0";
-    mount(<FarmbotOsRow {...p} />);
+    render(<FarmbotOsRow {...p} />);
     expect(fetchOsUpdateVersion).toHaveBeenCalledWith("rpi");
     expect(fetchOsUpdateVersion).toHaveBeenCalledTimes(1);
   });
@@ -46,11 +46,13 @@ describe("<FarmbotOsRow />", () => {
     const p = fakeProps();
     p.bot.hardware.informational_settings.target = "rpi";
     p.bot.hardware.informational_settings.controller_version = "1.0.0";
-    const wrapper = mount(<FarmbotOsRow {...p} />);
+    const { rerender } = render(<FarmbotOsRow {...p} />);
     expect(fetchOsUpdateVersion).toHaveBeenCalledTimes(1);
-    wrapper.setState({ version: "1.0.0" });
+    p.bot.hardware.informational_settings.controller_version = "1.0.0";
+    rerender(<FarmbotOsRow {...p} />);
     expect(fetchOsUpdateVersion).toHaveBeenCalledTimes(1);
-    wrapper.setState({ version: "2.0.0" });
+    p.bot.hardware.informational_settings.controller_version = "2.0.0";
+    rerender(<FarmbotOsRow {...p} />);
     expect(fetchOsUpdateVersion).toHaveBeenCalledTimes(2);
   });
 
@@ -59,9 +61,10 @@ describe("<FarmbotOsRow />", () => {
     p.bot.osReleaseNotes = "intro\n\n# v1\n\n* note";
     p.bot.hardware.informational_settings.controller_version = "1.0.0";
     p.device.body.fbos_version = "2.0.0";
-    const wrapper = mount<FarmbotOsRow>(<FarmbotOsRow {...p} />);
-    const notes = mount(wrapper.instance().ReleaseNotes());
-    expect(notes.text().toLowerCase()).toContain("v1");
+    render(<FarmbotOsRow {...p} />);
+    const button = screen.getByText("Release Notes");
+    fireEvent.click(button);
+    expect(screen.getByText("FarmBot OS v1")).toBeInTheDocument();
   });
 
   it("uses fbos version", () => {
@@ -69,9 +72,10 @@ describe("<FarmbotOsRow />", () => {
     p.bot.osReleaseNotes = "intro\n\n# v2\n\n* note";
     p.bot.hardware.informational_settings.controller_version = undefined;
     p.device.body.fbos_version = "2.0.0";
-    const wrapper = mount<FarmbotOsRow>(<FarmbotOsRow {...p} />);
-    const notes = mount(wrapper.instance().ReleaseNotes());
-    expect(notes.text().toLowerCase()).toContain("v2");
+    render(<FarmbotOsRow {...p} />);
+    const button = screen.getByText("Release Notes");
+    fireEvent.click(button);
+    expect(screen.getByText("FarmBot OS v2")).toBeInTheDocument();
   });
 });
 
diff --git a/frontend/settings/fbos_settings/__tests__/name_row_test.tsx b/frontend/settings/fbos_settings/__tests__/name_row_test.tsx
index 90743d4d42..e3c507a8fe 100644
--- a/frontend/settings/fbos_settings/__tests__/name_row_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/name_row_test.tsx
@@ -4,7 +4,7 @@ jest.mock("../../../api/crud", () => ({
 }));
 
 import React from "react";
-import { mount, shallow } from "enzyme";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { NameRow } from "../name_row";
 import { NameRowProps } from "../interfaces";
 import { edit, save } from "../../../api/crud";
@@ -19,16 +19,18 @@ describe("<NameRow />", () => {
   it("changes bot name", () => {
     const p = fakeProps();
     const newName = "new bot name";
-    const osSettings = mount<NameRow>(<NameRow {...p} />);
-    shallow(osSettings.instance().NameInput())
-      .simulate("change", { currentTarget: { value: newName } });
+    render(<NameRow {...p} />);
+    const input = screen.getByLabelText("name");
+    fireEvent.change(input, { target: { value: newName } });
     expect(edit).toHaveBeenCalledWith(p.device, { name: newName });
   });
 
   it("saves bot name", () => {
     const p = fakeProps();
-    const osSettings = mount<NameRow>(<NameRow {...p} />);
-    shallow(osSettings.instance().NameInput()).simulate("blur");
+    p.device.body.name = "bot";
+    render(<NameRow {...p} />);
+    const input = screen.getByLabelText("name");
+    fireEvent.blur(input);
     expect(save).toHaveBeenCalledWith(p.device.uuid);
   });
 });
diff --git a/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx b/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx
index 5b4d002c85..8611e421ed 100644
--- a/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx
+++ b/frontend/settings/fbos_settings/__tests__/timezone_row_test.tsx
@@ -4,7 +4,7 @@ jest.mock("../../../api/crud", () => ({
 }));
 
 import React from "react";
-import { mount, shallow } from "enzyme";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { TimezoneRow } from "../timezone_row";
 import { TimezoneRowProps } from "../interfaces";
 import { edit } from "../../../api/crud";
@@ -20,15 +20,18 @@ describe("<TimezoneRow />", () => {
   it("warns about timezone mismatch", () => {
     const p = fakeProps();
     p.device.body.timezone = "different";
-    const osSettings = mount(<TimezoneRow {...p} />);
-    expect(osSettings.text()).toContain(Content.DIFFERENT_TZ_WARNING);
+    render(<TimezoneRow {...p} />);
+    expect(screen.getByText(Content.DIFFERENT_TZ_WARNING)).toBeInTheDocument();
   });
 
   it("select timezone", () => {
     const p = fakeProps();
-    const osSettings = mount<TimezoneRow>(<TimezoneRow {...p} />);
-    const selector = shallow(<div>{osSettings.instance().Selector()}</div>);
-    selector.find("TimezoneSelector").simulate("update", "fake timezone");
-    expect(edit).toHaveBeenCalledWith(p.device, { timezone: "fake timezone" });
+    render(<TimezoneRow {...p} />);
+    const selector = screen.getByRole("combobox");
+    fireEvent.click(selector);
+    const item = screen.getByText("America/Los_Angeles");
+    fireEvent.click(item);
+    expect(edit).toHaveBeenCalledWith(p.device,
+      { timezone: "America/Los_Angeles" });
   });
 });
diff --git a/frontend/settings/fbos_settings/auto_update_row.tsx b/frontend/settings/fbos_settings/auto_update_row.tsx
index fe09e5ebcb..154caa3aed 100644
--- a/frontend/settings/fbos_settings/auto_update_row.tsx
+++ b/frontend/settings/fbos_settings/auto_update_row.tsx
@@ -8,7 +8,7 @@ import { Highlight } from "../maybe_highlight";
 import { getModifiedClassName } from "./default_values";
 import { validFirmwareHardware } from "../firmware/firmware_hardware_support";
 
-export function AutoUpdateRow(props: AutoUpdateRowProps) {
+export const AutoUpdateRow = (props: AutoUpdateRowProps) => {
   const osAutoUpdate = props.sourceFbosConfig("os_auto_update");
   const firmwareHardware = validFirmwareHardware(
     props.sourceFbosConfig("firmware_hardware").value);
@@ -30,4 +30,4 @@ export function AutoUpdateRow(props: AutoUpdateRowProps) {
         }))} />
     </Row>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/fbos_settings/boot_sequence_selector.tsx b/frontend/settings/fbos_settings/boot_sequence_selector.tsx
index ed30666fe0..7cd8738609 100644
--- a/frontend/settings/fbos_settings/boot_sequence_selector.tsx
+++ b/frontend/settings/fbos_settings/boot_sequence_selector.tsx
@@ -56,34 +56,28 @@ export function mapStateToProps(p: Everything): BootSequenceSelectorProps {
   }
 }
 
-export class RawBootSequenceSelector
-  extends React.Component<BootSequenceSelectorProps, {}> {
-  onChange = (_selected: DropDownItem) => {
+export const RawBootSequenceSelector = (props: BootSequenceSelectorProps) => {
+  const onChange = (_selected: DropDownItem) => {
     const payload = { boot_sequence_id: _selected.value as number | undefined };
-    this.props.dispatch(edit(this.props.config, payload));
-    this.props.dispatch(save(this.props.config.uuid));
+    props.dispatch(edit(props.config, payload));
+    props.dispatch(save(props.config.uuid));
   };
 
-  SelectionInput = () =>
-    <FBSelect
-      extraClass={getModifiedClassName("boot_sequence_id",
-        this.props.selectedItem?.value, this.props.firmwareHardware)}
-      allowEmpty={true}
-      list={this.props.list}
-      selectedItem={this.props.selectedItem}
-      onChange={this.onChange} />;
-
-  render() {
-    return <Highlight settingName={DeviceSetting.bootSequence}>
-      <Row className="grid-2-col">
-        <label>
-          {t("BOOT SEQUENCE")}
-        </label>
-        <this.SelectionInput />
-      </Row>
-    </Highlight>;
-  }
-}
+  return <Highlight settingName={DeviceSetting.bootSequence}>
+    <Row className="grid-2-col">
+      <label>
+        {t("BOOT SEQUENCE")}
+      </label>
+      <FBSelect
+        extraClass={getModifiedClassName("boot_sequence_id",
+          props.selectedItem?.value, props.firmwareHardware)}
+        allowEmpty={true}
+        list={props.list}
+        selectedItem={props.selectedItem}
+        onChange={onChange} />
+    </Row>
+  </Highlight>;
+};
 
 export const BootSequenceSelector =
   connect(mapStateToProps)(RawBootSequenceSelector);
diff --git a/frontend/settings/fbos_settings/factory_reset_row.tsx b/frontend/settings/fbos_settings/factory_reset_row.tsx
index 437b3ce21b..187f314383 100644
--- a/frontend/settings/fbos_settings/factory_reset_row.tsx
+++ b/frontend/settings/fbos_settings/factory_reset_row.tsx
@@ -40,7 +40,11 @@ export const FactoryResetRows = (props: FactoryResetRowsProps) => {
             ${t(Content.OS_RESET_WARNING, { resetMethod: t("Hard") })}`} />
         </div>
         <a className="link-button fb-button red"
-          onClick={docLinkClick("farmbot-os", navigate)}>
+          onClick={docLinkClick({
+            slug: "farmbot-os",
+            navigate,
+            dispatch: props.dispatch,
+          })}>
           {t("HARD RESET")}
           <i className="fa fa-external-link" />
         </a>
diff --git a/frontend/settings/fbos_settings/farmbot_os_row.tsx b/frontend/settings/fbos_settings/farmbot_os_row.tsx
index fdda4ed0b3..d0c9a49daf 100644
--- a/frontend/settings/fbos_settings/farmbot_os_row.tsx
+++ b/frontend/settings/fbos_settings/farmbot_os_row.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Row, Markdown, Popover } from "../../ui";
 import { fetchOsUpdateVersion, OsUpdateButton } from "./os_update_button";
 import { Position } from "@blueprintjs/core";
-import { FarmbotOsRowProps, FarmbotOsRowState } from "./interfaces";
+import { FarmbotOsRowProps } from "./interfaces";
 import { FbosDetails } from "./fbos_details";
 import { t } from "../../i18next_wrapper";
 import { ErrorBoundary } from "../../error_boundary";
@@ -32,37 +32,37 @@ export const getOsReleaseNotesForVersion = (
   return { heading, notes };
 };
 
-export class FarmbotOsRow
-  extends React.Component<FarmbotOsRowProps, FarmbotOsRowState> {
-  state: FarmbotOsRowState = {
-    version: this.props.bot.hardware.informational_settings.controller_version,
-    channel: "" + this.props.sourceFbosConfig("update_channel").value,
-  };
+export const FarmbotOsRow = (props: FarmbotOsRowProps) => {
+  const [version, setVersion] = React.useState(
+    props.bot.hardware.informational_settings.controller_version);
+  const [channel, setChannel] = React.useState(
+    "" + props.sourceFbosConfig("update_channel").value);
 
-  componentDidMount = () => {
-    const { dispatch } = this.props;
-    const { target } = this.props.bot.hardware.informational_settings;
+  React.useEffect(() => {
+    const { dispatch } = props;
+    const { target } = props.bot.hardware.informational_settings;
     dispatch(fetchOsUpdateVersion(target));
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  componentDidUpdate = () => {
-    const { dispatch, bot, sourceFbosConfig } = this.props;
+  React.useEffect(() => {
+    const { dispatch, bot, sourceFbosConfig } = props;
     const { controller_version, target } = bot.hardware.informational_settings;
-    const channel = "" + sourceFbosConfig("update_channel").value;
-    const versionChange =
-      controller_version && this.state.version != controller_version;
-    const channelChange = channel && this.state.channel != channel;
+    const configChannel = "" + sourceFbosConfig("update_channel").value;
+    const versionChange = controller_version && version != controller_version;
+    const channelChange = configChannel && channel != configChannel;
     if (versionChange || channelChange) {
-      this.setState({ version: controller_version, channel });
+      setVersion(controller_version);
+      setChannel(configChannel);
       dispatch(fetchOsUpdateVersion(target));
     }
     if (versionChange) {
       removeToast("EOL");
     }
-  };
+  }, [props, version, channel]);
 
-  Version = () => {
-    const { controller_version } = this.props.bot.hardware.informational_settings;
+  const Version = () => {
+    const { controller_version } = props.bot.hardware.informational_settings;
     const version = controller_version || t("unknown (offline)");
     return <Popover position={Position.BOTTOM_LEFT}
       target={<p>
@@ -70,18 +70,18 @@ export class FarmbotOsRow
       </p>}
       content={<ErrorBoundary>
         <FbosDetails
-          dispatch={this.props.dispatch}
-          sourceFbosConfig={this.props.sourceFbosConfig}
-          bot={this.props.bot}
-          timeSettings={this.props.timeSettings}
-          deviceAccount={this.props.device} />
+          dispatch={props.dispatch}
+          sourceFbosConfig={props.sourceFbosConfig}
+          bot={props.bot}
+          timeSettings={props.timeSettings}
+          deviceAccount={props.device} />
       </ErrorBoundary>} />;
   };
 
-  ReleaseNotes = () => {
-    const { osReleaseNotes, hardware } = this.props.bot;
+  const ReleaseNotes = () => {
+    const { osReleaseNotes, hardware } = props.bot;
     const { controller_version } = hardware.informational_settings;
-    const { fbos_version } = this.props.device.body;
+    const { fbos_version } = props.device.body;
     const version = controller_version || fbos_version;
     const releaseNotes = getOsReleaseNotesForVersion(osReleaseNotes, version);
     return <div className="release-notes">
@@ -92,30 +92,28 @@ export class FarmbotOsRow
     </div>;
   };
 
-  render() {
-    return <Highlight settingName={DeviceSetting.farmbotOS}
-      hidden={!this.props.showAdvanced}
-      className={"advanced"}>
-      <div className="grid half-gap farmbot-os-setting">
-        <Row className="grid-exp-1">
-          <label>
-            {t(DeviceSetting.farmbotOS)}
-          </label>
-          <OsUpdateButton
-            bot={this.props.bot}
-            dispatch={this.props.dispatch}
-            botOnline={this.props.botOnline} />
-        </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 />} />
-        </Row>
-      </div>
-    </Highlight>;
-  }
-}
+  return <Highlight settingName={DeviceSetting.farmbotOS}
+    hidden={!props.showAdvanced}
+    className={"advanced"}>
+    <div className="grid half-gap farmbot-os-setting">
+      <Row className="grid-exp-1">
+        <label>
+          {t(DeviceSetting.farmbotOS)}
+        </label>
+        <OsUpdateButton
+          bot={props.bot}
+          dispatch={props.dispatch}
+          botOnline={props.botOnline} />
+      </Row>
+      <Row className="grid-2-col">
+        <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={<ReleaseNotes />} />
+      </Row>
+    </div>
+  </Highlight>;
+};
diff --git a/frontend/settings/fbos_settings/interfaces.ts b/frontend/settings/fbos_settings/interfaces.ts
index 53cb60103e..d511799766 100644
--- a/frontend/settings/fbos_settings/interfaces.ts
+++ b/frontend/settings/fbos_settings/interfaces.ts
@@ -64,6 +64,7 @@ export interface PowerAndResetProps {
 
 export interface FactoryResetRowsProps {
   botOnline: boolean;
+  dispatch: Function;
 }
 
 export interface FarmbotOsRowProps {
diff --git a/frontend/settings/fbos_settings/name_row.tsx b/frontend/settings/fbos_settings/name_row.tsx
index 1dc2e83bb1..7ee4fa59bd 100644
--- a/frontend/settings/fbos_settings/name_row.tsx
+++ b/frontend/settings/fbos_settings/name_row.tsx
@@ -7,26 +7,20 @@ import { Highlight } from "../maybe_highlight";
 import { edit, save } from "../../api/crud";
 import { getModifiedClassNameSpecifyDefault } from "../default_values";
 
-export class NameRow extends React.Component<NameRowProps> {
-  NameInput = () =>
-    <input name="farmbotName"
-      className={getModifiedClassNameSpecifyDefault(
-        this.props.device.body.name, "FarmBot",
-      )}
-      onChange={e => this.props.dispatch(edit(this.props.device, {
-        name: e.currentTarget.value
-      }))}
-      onBlur={() => this.props.dispatch(save(this.props.device.uuid))}
-      value={this.props.device.body.name} />;
-
-  render() {
-    return <Highlight settingName={DeviceSetting.name}>
-      <Row className="grid-2-col">
-        <label>
-          {t(DeviceSetting.name)}
-        </label>
-        <this.NameInput />
-      </Row>
-    </Highlight>;
-  }
-}
+export const NameRow = (props: NameRowProps) =>
+  <Highlight settingName={DeviceSetting.name}>
+    <Row className="grid-2-col">
+      <label htmlFor={"device-name"}>
+        {t(DeviceSetting.name)}
+      </label>
+      <input id={"device-name"}
+        className={getModifiedClassNameSpecifyDefault(
+          props.device.body.name, "FarmBot",
+        )}
+        onChange={e => props.dispatch(edit(props.device, {
+          name: e.currentTarget.value
+        }))}
+        onBlur={() => props.dispatch(save(props.device.uuid))}
+        value={props.device.body.name} />
+    </Row>
+  </Highlight>;
diff --git a/frontend/settings/fbos_settings/order_number_row.tsx b/frontend/settings/fbos_settings/order_number_row.tsx
index c10a4c2104..815b6060fa 100644
--- a/frontend/settings/fbos_settings/order_number_row.tsx
+++ b/frontend/settings/fbos_settings/order_number_row.tsx
@@ -7,21 +7,18 @@ import { Highlight } from "../maybe_highlight";
 import { getModifiedClassNameSpecifyDefault } from "../default_values";
 import { setOrderNumber } from "../../wizard/actions";
 
-export class OrderNumberRow extends React.Component<OrderNumberRowProps> {
-  render() {
-    return <Highlight settingName={DeviceSetting.orderNumber}>
-      <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>;
-  }
-}
+export const OrderNumberRow = (props: OrderNumberRowProps) =>
+  <Highlight settingName={DeviceSetting.orderNumber}>
+    <Row className="grid-2-col">
+      <label>
+        {t(DeviceSetting.orderNumber)}
+      </label>
+      <BlurableInput value={props.device.body.fb_order_number || ""}
+        allowEmpty={true}
+        className={getModifiedClassNameSpecifyDefault(
+          props.device.body.fb_order_number, undefined,
+        )}
+        onCommit={e => props.dispatch(setOrderNumber(
+          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 3352078b99..c09689a542 100644
--- a/frontend/settings/fbos_settings/os_update_button.tsx
+++ b/frontend/settings/fbos_settings/os_update_button.tsx
@@ -9,9 +9,10 @@ import { isString } from "lodash";
 import { Actions, Content, DeviceSetting } from "../../constants";
 import { t } from "../../i18next_wrapper";
 import { API } from "../../api";
-import { highlight, linkToSetting } from "../maybe_highlight";
+import { linkToSetting } from "../maybe_highlight";
 import { isJobDone } from "../../devices/jobs";
 import { NavigateFunction, useNavigate } from "react-router";
+import { setPanelOpen } from "../../farm_designer/panel_header";
 
 /**
  * FBOS versions older than this can't connect to the available OTA system
@@ -132,9 +133,9 @@ export const OsUpdateButton = (props: OsUpdateButtonProps) => {
 };
 
 const onTooOld = (dispatch: Function, navigate: NavigateFunction) => () => {
-  highlight.highlighted = false;
   dispatch(bulkToggleControlPanel(false));
   dispatch(toggleControlPanel("power_and_reset"));
+  dispatch(setPanelOpen(true));
   navigate(linkToSetting(DeviceSetting.hardReset));
 };
 
diff --git a/frontend/settings/fbos_settings/ota_time_selector.tsx b/frontend/settings/fbos_settings/ota_time_selector.tsx
index 6ea1d68c28..efb0342872 100644
--- a/frontend/settings/fbos_settings/ota_time_selector.tsx
+++ b/frontend/settings/fbos_settings/ota_time_selector.tsx
@@ -68,8 +68,8 @@ export const OtaTimeSelector = (props: OtaTimeSelectorProps) => {
     ].join(" ")} />;
 };
 
-export function OtaTimeSelectorRow(props: OtaTimeSelectorRowProps) {
-  return <Highlight settingName={DeviceSetting.osAutoUpdate}
+export const OtaTimeSelectorRow = (props: OtaTimeSelectorRowProps) =>
+  <Highlight settingName={DeviceSetting.osAutoUpdate}
     hidden={!props.showAdvanced}
     className={"advanced"}>
     <Row className="grid-2-col">
@@ -86,4 +86,3 @@ export function OtaTimeSelectorRow(props: OtaTimeSelectorRowProps) {
         device={props.device} />
     </Row>
   </Highlight>;
-}
diff --git a/frontend/settings/fbos_settings/power_and_reset.tsx b/frontend/settings/fbos_settings/power_and_reset.tsx
index 30818871ec..cec5067c01 100644
--- a/frontend/settings/fbos_settings/power_and_reset.tsx
+++ b/frontend/settings/fbos_settings/power_and_reset.tsx
@@ -9,7 +9,7 @@ import { reboot, powerOff, restartFirmware } from "../../devices/actions";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 
-export function PowerAndReset(props: PowerAndResetProps) {
+export const PowerAndReset = (props: PowerAndResetProps) => {
   const { dispatch, botOnline } = props;
   const { power_and_reset } = props.settingsPanelState;
   return <Highlight className={"section advanced"}
@@ -44,7 +44,9 @@ export function PowerAndReset(props: PowerAndResetProps) {
         buttonText={t("SHUTDOWN")}
         color={"red"}
         action={powerOff} />
-      <FactoryResetRows botOnline={botOnline} />
+      <FactoryResetRows
+        dispatch={dispatch}
+        botOnline={botOnline} />
     </Collapse>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/fbos_settings/timezone_row.tsx b/frontend/settings/fbos_settings/timezone_row.tsx
index 5dc55680e5..6f6f409e39 100644
--- a/frontend/settings/fbos_settings/timezone_row.tsx
+++ b/frontend/settings/fbos_settings/timezone_row.tsx
@@ -8,32 +8,22 @@ import { edit, save } from "../../api/crud";
 import { timezoneMismatch } from "../../devices/timezones/guess_timezone";
 import { TimezoneSelector } from "../../devices/timezones/timezone_selector";
 
-export class TimezoneRow extends React.Component<TimezoneRowProps> {
-
-  Note = () =>
-    <div className="note">
-      {timezoneMismatch(this.props.device.body.timezone)
-        ? t(Content.DIFFERENT_TZ_WARNING)
-        : ""}
-    </div>;
-
-  Selector = () =>
-    <TimezoneSelector
-      currentTimezone={this.props.device.body.timezone}
-      onUpdate={timezone => {
-        this.props.dispatch(edit(this.props.device, { timezone }));
-        this.props.dispatch(save(this.props.device.uuid));
-      }} />;
-
-  render() {
-    return <Highlight settingName={DeviceSetting.timezone}>
-      <Row className="grid-2-col timezone-grid">
-        <label>
-          {t(DeviceSetting.timezone)}
-        </label>
-        <this.Selector />
-        <this.Note />
-      </Row>
-    </Highlight>;
-  }
-}
+export const TimezoneRow = (props: TimezoneRowProps) =>
+  <Highlight settingName={DeviceSetting.timezone}>
+    <Row className="grid-2-col timezone-grid">
+      <label>
+        {t(DeviceSetting.timezone)}
+      </label>
+      <TimezoneSelector
+        currentTimezone={props.device.body.timezone}
+        onUpdate={timezone => {
+          props.dispatch(edit(props.device, { timezone }));
+          props.dispatch(save(props.device.uuid));
+        }} />
+      <div className="note">
+        {timezoneMismatch(props.device.body.timezone)
+          ? t(Content.DIFFERENT_TZ_WARNING)
+          : ""}
+      </div>
+    </Row>
+  </Highlight>;
diff --git a/frontend/settings/firmware/__tests__/board_type_test.tsx b/frontend/settings/firmware/__tests__/board_type_test.tsx
index b6631d78fc..1a94692ce5 100644
--- a/frontend/settings/firmware/__tests__/board_type_test.tsx
+++ b/frontend/settings/firmware/__tests__/board_type_test.tsx
@@ -9,7 +9,7 @@ jest.mock("../../../devices/should_display", () => ({
 }));
 
 import React from "react";
-import { mount, shallow } from "enzyme";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { BoardType } from "../board_type";
 import { BoardTypeProps } from "../interfaces";
 import { fakeState } from "../../../__test_support__/fake_state";
@@ -43,50 +43,40 @@ describe("<BoardType/>", () => {
   it("renders with valid firmwareHardware", () => {
     const p = fakeProps();
     p.firmwareHardware = "farmduino";
-    const wrapper = mount(<BoardType {...p} />);
-    expect(wrapper.text()).toContain("Farmduino");
-    expect(wrapper.html()).not.toContain("dim");
+    const { container } = render(<BoardType {...p} />);
+    expect(screen.getByText("Farmduino (Genesis v1.3)")).toBeInTheDocument();
+    expect(container).not.toContainHTML("dim");
   });
 
   it("renders with valid firmwareHardware: inconsistent", () => {
     const p = fakeProps();
     p.firmwareHardware = "farmduino";
     p.sourceFbosConfig = () => ({ value: true, consistent: false });
-    const wrapper = mount(<BoardType {...p} />);
-    expect(wrapper.text()).toContain("Farmduino");
-    expect(wrapper.html()).toContain("dim");
+    const { container } = render(<BoardType {...p} />);
+    expect(screen.getByText("Farmduino (Genesis v1.3)")).toBeInTheDocument();
+    expect(container).toContainHTML("dim");
   });
 
   it("calls updateConfig", () => {
     const p = fakeProps();
     p.firmwareHardware = "arduino";
-    const wrapper = mount<BoardType>(<BoardType {...p} />);
-    const selection =
-      shallow(<div>{wrapper.instance().FirmwareSelection()}</div>);
-    selection.find("FBSelect").simulate("change",
-      { label: "firmware_hardware", value: "farmduino" });
+    render(<BoardType {...p} />);
+    const selection = screen.getByRole("combobox");
+    fireEvent.click(selection);
+    const item = screen.getByText("Farmduino (Genesis v1.3)");
+    fireEvent.click(item);
     expect(edit).toHaveBeenCalledWith(fakeConfig, {
       firmware_hardware: "farmduino"
     });
     expect(save).toHaveBeenCalledWith(fakeConfig.uuid);
   });
 
-  it("doesn't call updateConfig", () => {
-    const p = fakeProps();
-    const wrapper = mount<BoardType>(<BoardType {...p} />);
-    const selection =
-      shallow(<div>{wrapper.instance().FirmwareSelection()}</div>);
-    selection.find("FBSelect").simulate("change",
-      { label: "firmware_hardware", value: "unknown" });
-    expect(edit).not.toHaveBeenCalled();
-    expect(save).not.toHaveBeenCalled();
-  });
-
   it("displays boards", () => {
     mockFeatureBoolean = false;
-    const wrapper = mount(<BoardType {...fakeProps()} />);
-    const { list } = wrapper.find("FBSelect").props();
-    expect(list).toEqual([
+    render(<BoardType {...fakeProps()} />);
+    const selection = screen.getByRole("combobox");
+    fireEvent.click(selection);
+    [
       { label: "Farmduino (Genesis v1.7)", value: "farmduino_k17" },
       { label: "Farmduino (Genesis v1.6)", value: "farmduino_k16" },
       { label: "Farmduino (Genesis v1.5)", value: "farmduino_k15" },
@@ -96,14 +86,17 @@ describe("<BoardType/>", () => {
       { label: "Farmduino (Express v1.1)", value: "express_k11" },
       { label: "Farmduino (Express v1.0)", value: "express_k10" },
       { label: "None", value: "none" },
-    ]);
-    expect(list?.length).toEqual(9);
+    ].map(item => {
+      expect(screen.getByRole("menuitem", { name: item.label }))
+        .toBeInTheDocument();
+    });
   });
 
   it("displays more boards", () => {
     mockFeatureBoolean = true;
-    const wrapper = mount(<BoardType {...fakeProps()} />);
-    const { list } = wrapper.find("FBSelect").props();
-    expect(list?.length).toEqual(10);
+    render(<BoardType {...fakeProps()} />);
+    const selection = screen.getByRole("combobox");
+    fireEvent.click(selection);
+    expect(screen.getByText("Farmduino (Express v1.2)")).toBeInTheDocument();
   });
 });
diff --git a/frontend/settings/firmware/board_type.tsx b/frontend/settings/firmware/board_type.tsx
index 4ac6442080..75fcc39478 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, DropDownItem, FBSelect } from "../../ui";
+import { Row, FBSelect } from "../../ui";
 import { info, warning } from "../../toast/toast";
 import { updateConfig } from "../../devices/actions";
 import { BoardTypeProps } from "./interfaces";
@@ -8,70 +8,54 @@ import {
   FirmwareHardwareStatus, FlashFirmwareBtn,
 } from "./firmware_hardware_status";
 import {
-  isFwHardwareValue, getFirmwareChoices, FIRMWARE_CHOICES_DDI, isUpgrade,
+  getFirmwareChoices, FIRMWARE_CHOICES_DDI, isUpgrade,
 } from "./firmware_hardware_support";
 import { Highlight } from "../maybe_highlight";
 import { Content, DeviceSetting } from "../../constants";
 import { getModifiedClassName } from "../fbos_settings/default_values";
+import { FirmwareHardware } from "farmbot";
 
-export class BoardType extends React.Component<BoardTypeProps, {}> {
-  get sending() {
-    return !this.props.sourceFbosConfig("firmware_hardware").consistent;
-  }
+export const BoardType = (props: BoardTypeProps) => {
+  const sending = !props.sourceFbosConfig("firmware_hardware").consistent;
+  const { dispatch, firmwareHardware } = props;
 
-  get selectedBoard(): DropDownItem | undefined {
-    return this.props.firmwareHardware
-      ? FIRMWARE_CHOICES_DDI[this.props.firmwareHardware]
-      : undefined;
-  }
-
-  sendOffConfig = (selectedItem: DropDownItem) => {
-    const firmware_hardware = selectedItem.value;
-    if (selectedItem && isFwHardwareValue(firmware_hardware)) {
-      info(t("Sending firmware configuration..."), { title: t("Sending") });
-      isUpgrade(this.props.firmwareHardware, firmware_hardware) &&
-        warning(t(Content.FIRMWARE_UPGRADED),
-          { title: t("Action may be required") });
-      this.props.dispatch(updateConfig({ firmware_hardware }));
-      this.forceUpdate();
-    }
-  };
-
-  FirmwareSelection = () => {
-    const { firmwareHardware } = this.props;
-    return <FBSelect
-      key={firmwareHardware + "" + this.sending}
-      extraClass={[
-        this.sending ? "dim" : "",
-        getModifiedClassName("firmware_hardware",
-          firmwareHardware, firmwareHardware),
-      ].join(" ")}
-      list={getFirmwareChoices()}
-      selectedItem={this.selectedBoard}
-      onChange={this.sendOffConfig} />;
-  };
-
-  render() {
-    return <Highlight settingName={DeviceSetting.firmware}>
-      <Row className="grid-2-col">
-        <div className="row grid-exp-2">
-          <label>
-            {t("FIRMWARE")}
-          </label>
-          <FirmwareHardwareStatus
-            botOnline={this.props.botOnline}
-            apiFirmwareValue={this.props.firmwareHardware}
-            alerts={this.props.alerts}
-            bot={this.props.bot}
-            dispatch={this.props.dispatch}
-            timeSettings={this.props.timeSettings} />
-          <FlashFirmwareBtn
-            short={true}
-            apiFirmwareValue={this.props.firmwareHardware}
-            botOnline={this.props.botOnline} />
-        </div>
-        <this.FirmwareSelection />
-      </Row>
-    </Highlight>;
-  }
-}
+  return <Highlight settingName={DeviceSetting.firmware}>
+    <Row className="grid-2-col">
+      <div className="row grid-exp-2">
+        <label>
+          {t("FIRMWARE")}
+        </label>
+        <FirmwareHardwareStatus
+          botOnline={props.botOnline}
+          apiFirmwareValue={firmwareHardware}
+          alerts={props.alerts}
+          bot={props.bot}
+          dispatch={dispatch}
+          timeSettings={props.timeSettings} />
+        <FlashFirmwareBtn
+          short={true}
+          apiFirmwareValue={firmwareHardware}
+          botOnline={props.botOnline} />
+      </div>
+      <FBSelect
+        key={firmwareHardware + "" + sending}
+        extraClass={[
+          sending ? "dim" : "",
+          getModifiedClassName("firmware_hardware",
+            firmwareHardware, firmwareHardware),
+        ].join(" ")}
+        list={getFirmwareChoices()}
+        selectedItem={firmwareHardware
+          ? FIRMWARE_CHOICES_DDI[firmwareHardware]
+          : undefined}
+        onChange={ddi => {
+          const firmware_hardware = ddi.value as FirmwareHardware;
+          info(t("Sending firmware configuration..."), { title: t("Sending") });
+          isUpgrade(firmwareHardware, firmware_hardware) &&
+            warning(t(Content.FIRMWARE_UPGRADED),
+              { title: t("Action may be required") });
+          dispatch(updateConfig({ firmware_hardware }));
+        }} />;
+    </Row>
+  </Highlight>;
+};
diff --git a/frontend/settings/hardware_settings/axis_settings.tsx b/frontend/settings/hardware_settings/axis_settings.tsx
index 96b5a9d2be..076cf2eda4 100644
--- a/frontend/settings/hardware_settings/axis_settings.tsx
+++ b/frontend/settings/hardware_settings/axis_settings.tsx
@@ -22,7 +22,7 @@ import {
 import { setAxisLength } from "../../controls/move/bot_position_rows";
 import { validBotLocationData } from "../../util/location";
 
-export function AxisSettings(props: AxisSettingsProps) {
+export const AxisSettings = (props: AxisSettingsProps) => {
 
   const {
     dispatch, bot, sourceFwConfig, firmwareConfig, botOnline,
@@ -178,4 +178,4 @@ export function AxisSettings(props: AxisSettingsProps) {
         sourceFbosConfig={props.sourceFbosConfig} />
     </Collapse>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx b/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx
index ffbe83b7f8..0ee5b06c56 100644
--- a/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx
+++ b/frontend/settings/hardware_settings/boolean_mcu_input_group.tsx
@@ -9,86 +9,76 @@ import {
 } from "./default_values";
 import { McuParamName } from "farmbot";
 
-export class BooleanMCUInputGroup
-  extends React.Component<BooleanMCUInputGroupProps> {
+export const BooleanMCUInputGroup = (props: BooleanMCUInputGroupProps) => {
 
-  wrapperClassName = (key: McuParamName, value: number | undefined) => {
-    const { firmwareHardware } = this.props;
-    return getModifiedClassName(key, value, firmwareHardware);
+  const wrapperClassName = (key: McuParamName, value: number | undefined) => {
+    return getModifiedClassName(key, value, props.firmwareHardware);
   };
 
-  Toggles = () => {
-    const {
-      sourceFwConfig, dispatch, disable, grayscale, displayAlert, disabledBy,
-      x, y, z,
-    } = this.props;
-    const xParam = sourceFwConfig(x);
-    const yParam = sourceFwConfig(y);
-    const zParam = sourceFwConfig(z);
-    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>;
-  };
-
-  get getDefault() { return getDefaultFwConfigValue(this.props.firmwareHardware); }
+  const getDefault = getDefaultFwConfigValue(props.firmwareHardware);
 
-  get tooltip() {
-    return t(this.props.tooltip, {
-      x: this.getDefault(this.props.x) ? t("enabled") : t("disabled"),
-      y: this.getDefault(this.props.y) ? t("enabled") : t("disabled"),
-      z: this.getDefault(this.props.z) ? t("enabled") : t("disabled"),
-    });
-  }
+  const tooltip = t(props.tooltip, {
+    x: getDefault(props.x) ? t("enabled") : t("disabled"),
+    y: getDefault(props.y) ? t("enabled") : t("disabled"),
+    z: getDefault(props.z) ? t("enabled") : t("disabled"),
+  });
 
-  get anyModified() {
+  const anyModified = () => {
     const modified = (setting: McuParamName) =>
-      this.getDefault(setting) != this.props.sourceFwConfig(setting).value;
-    return modified(this.props.x)
-      || modified(this.props.y)
-      || modified(this.props.z);
-  }
+      getDefault(setting) != props.sourceFwConfig(setting).value;
+    return modified(props.x)
+      || modified(props.y)
+      || modified(props.z);
+  };
 
-  render() {
-    return <Highlight settingName={this.props.label}
-      hidden={this.props.advanced && !(this.props.showAdvanced || this.anyModified)}
-      className={this.props.advanced ? "advanced" : undefined}>
-      <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} />
-        </div>
-        <this.Toggles />
-      </Row>
-    </Highlight>;
-  }
-}
+  const {
+    sourceFwConfig, dispatch, disable, grayscale, displayAlert, disabledBy,
+    x, y, z,
+  } = props;
+  const xParam = sourceFwConfig(x);
+  const yParam = sourceFwConfig(y);
+  const zParam = sourceFwConfig(z);
+  return <Highlight settingName={props.label}
+    hidden={props.advanced && !(props.showAdvanced || anyModified())}
+    className={props.advanced ? "advanced" : undefined}>
+    <Row className="axes-grid">
+      <div>
+        <label>
+          {t(props.label)}
+          {props.caution &&
+            <i className="fa fa-exclamation-triangle caution-icon" />}
+        </label>
+        <Help text={tooltip} />
+      </div>
+      <div className={"mcu-inputs row no-gap"}>
+        <ToggleButton dispatch={dispatch}
+          grayscale={grayscale?.x}
+          disabled={props.disabled || disable?.x}
+          dim={!xParam.consistent}
+          title={grayscale?.x ? disabledBy : undefined}
+          toggleValue={xParam.value}
+          className={wrapperClassName(x, xParam.value)}
+          toggleAction={() =>
+            dispatch(settingToggle(x, sourceFwConfig, displayAlert))} />
+        <ToggleButton dispatch={dispatch}
+          grayscale={grayscale?.y}
+          disabled={props.disabled || disable?.y}
+          dim={!yParam.consistent}
+          title={grayscale?.y ? disabledBy : undefined}
+          toggleValue={yParam.value}
+          className={wrapperClassName(y, yParam.value)}
+          toggleAction={() =>
+            dispatch(settingToggle(y, sourceFwConfig, displayAlert))} />
+        <ToggleButton dispatch={dispatch}
+          grayscale={grayscale?.z}
+          disabled={props.disabled || disable?.z}
+          dim={!zParam.consistent}
+          title={grayscale?.z ? disabledBy : undefined}
+          toggleValue={zParam.value}
+          className={wrapperClassName(z, zParam.value)}
+          toggleAction={() =>
+            dispatch(settingToggle(z, sourceFwConfig, displayAlert))} />
+      </div>
+    </Row>
+  </Highlight>;
+};
diff --git a/frontend/settings/hardware_settings/calibration_row.tsx b/frontend/settings/hardware_settings/calibration_row.tsx
index b7cd29b449..88b96e1256 100644
--- a/frontend/settings/hardware_settings/calibration_row.tsx
+++ b/frontend/settings/hardware_settings/calibration_row.tsx
@@ -7,40 +7,34 @@ import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 import { lockedClass } from "../../controls/locked_class";
 
-export class CalibrationRow extends React.Component<CalibrationRowProps> {
-  Axes = () => {
-    const {
-      type, botOnline, axisTitle, mcuParams, action, arduinoBusy, locked,
-    } = this.props;
-    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 <div key={axis}>
-            <LockableButton
-              disabled={arduinoBusy || hardwareDisabled || !botOnline}
-              className={lockedClass(locked)}
-              title={t(axisTitle)}
-              onClick={() => action(axis)}>
-              {`${t(axisTitle)} ${axis}`}
-            </LockableButton>
-          </div>;
-        })}
-    </div>;
-  };
-
-  render() {
-    return <Highlight settingName={this.props.title}>
-      <Row className="axes-grid">
-        <div>
-          <label>
-            {t(this.props.title)}
-          </label>
-          <Help text={t(this.props.toolTip)} />
-        </div>
-        <this.Axes />
-      </Row>
-    </Highlight>;
-  }
-}
+export const CalibrationRow = (props: CalibrationRowProps) => {
+  const {
+    type, botOnline, axisTitle, mcuParams, action, arduinoBusy, locked,
+  } = props;
+  return <Highlight settingName={props.title}>
+    <Row className="axes-grid">
+      <div>
+        <label>
+          {t(props.title)}
+        </label>
+        <Help text={t(props.toolTip)} />
+      </div>
+      <div className="calibration-row-axes row no-gap">
+        {axisTrackingStatus(mcuParams, props.stallUseDisabled)
+          .map(row => {
+            const { axis } = row;
+            const hardwareDisabled = type == "zero" ? false : row.disabled;
+            return <div key={axis}>
+              <LockableButton
+                disabled={arduinoBusy || hardwareDisabled || !botOnline}
+                className={lockedClass(locked)}
+                title={t(axisTitle)}
+                onClick={() => action(axis)}>
+                {`${t(axisTitle)} ${axis}`}
+              </LockableButton>
+            </div>;
+          })}
+      </div>
+    </Row>
+  </Highlight>;
+};
diff --git a/frontend/settings/hardware_settings/encoders_or_stall_detection.tsx b/frontend/settings/hardware_settings/encoders_or_stall_detection.tsx
index ad647bb006..c833216744 100644
--- a/frontend/settings/hardware_settings/encoders_or_stall_detection.tsx
+++ b/frontend/settings/hardware_settings/encoders_or_stall_detection.tsx
@@ -12,7 +12,7 @@ import { t } from "../../i18next_wrapper";
 import { DevSettings } from "../dev/dev_support";
 
 // eslint-disable-next-line complexity
-export function EncodersOrStallDetection(props: EncodersOrStallDetectionProps) {
+export const EncodersOrStallDetection = (props: EncodersOrStallDetectionProps) => {
 
   const { encoders_or_stall_detection } = props.settingsPanelState;
   const {
@@ -128,7 +128,7 @@ export function EncodersOrStallDetection(props: EncodersOrStallDetectionProps) {
           gray={encodersDisabled} />}
     </Collapse>
   </Highlight>;
-}
+};
 
 /** Generate a setting requirement warning string for a setting based on
  * the provided prerequisites. */
diff --git a/frontend/settings/hardware_settings/error_handling.tsx b/frontend/settings/hardware_settings/error_handling.tsx
index 58933e3f9b..55ccf01f01 100644
--- a/frontend/settings/hardware_settings/error_handling.tsx
+++ b/frontend/settings/hardware_settings/error_handling.tsx
@@ -16,7 +16,7 @@ import {
 } from "./default_values";
 import { calculateScale } from "./motors";
 
-export function ErrorHandling(props: ErrorHandlingProps) {
+export const ErrorHandling = (props: ErrorHandlingProps) => {
 
   const { error_handling } = props.settingsPanelState;
   const {
@@ -104,4 +104,4 @@ export function ErrorHandling(props: ErrorHandlingProps) {
         zScale={scale.z} />
     </Collapse>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/hardware_settings/limit_switches.tsx b/frontend/settings/hardware_settings/limit_switches.tsx
index b0e401dd8c..0ac99ab021 100644
--- a/frontend/settings/hardware_settings/limit_switches.tsx
+++ b/frontend/settings/hardware_settings/limit_switches.tsx
@@ -12,7 +12,7 @@ import { getDefaultFwConfigValue } from "./default_values";
 import { McuParamName } from "farmbot";
 import { some } from "lodash";
 
-export function LimitSwitches(props: LimitSwitchesProps) {
+export const LimitSwitches = (props: LimitSwitchesProps) => {
 
   const { limit_switches } = props.settingsPanelState;
   const { dispatch, sourceFwConfig, arduinoBusy, firmwareHardware } = props;
@@ -79,4 +79,4 @@ export function LimitSwitches(props: LimitSwitchesProps) {
         disabledBy={settingRequiredLabel([DeviceSetting.enableLimitSwitches])} />
     </Collapse>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/hardware_settings/motors.tsx b/frontend/settings/hardware_settings/motors.tsx
index 6284390573..27d729f544 100644
--- a/frontend/settings/hardware_settings/motors.tsx
+++ b/frontend/settings/hardware_settings/motors.tsx
@@ -32,7 +32,7 @@ export const calculateScale =
     };
   };
 
-export function Motors(props: MotorsProps) {
+export const Motors = (props: MotorsProps) => {
   const {
     dispatch, settingsPanelState, sourceFwConfig, firmwareHardware, arduinoBusy,
     showAdvanced,
@@ -249,7 +249,7 @@ export function Motors(props: MotorsProps) {
       </SingleSettingRow>
     </Collapse>
   </Highlight>;
-}
+};
 
 const microstepWarning = (sourceFwConfig: SourceFwConfig) => ({
   x: !!sourceFwConfig("movement_axis_stealth_x").value &&
diff --git a/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx b/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx
index 83bdffb4c5..31c91012f3 100644
--- a/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx
+++ b/frontend/settings/hardware_settings/numeric_mcu_input_group.tsx
@@ -7,112 +7,102 @@ import { t } from "../../i18next_wrapper";
 import { getDefaultFwConfigValue } from "./default_values";
 import { McuParamName } from "farmbot";
 
-export class NumericMCUInputGroup
-  extends React.Component<NumericMCUInputGroupProps> {
+export const NumericMCUInputGroup = (props: NumericMCUInputGroupProps) => {
 
-  Inputs = () => {
-    const {
-      sourceFwConfig, dispatch, intSize, gray, float, firmwareHardware, warning,
-      x, y, z, xScale, yScale, zScale, min, max, disabled, disabledBy, warnMin,
-      toInput, fromInput, inputMax,
-    } = this.props;
-    const commonProps = {
-      sourceFwConfig,
-      dispatch,
-      firmwareHardware,
-      intSize,
-      float,
-      min,
-      max,
-      inputMax,
-      disabled,
-      toInput,
-      fromInput,
-    };
-    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>;
-  };
-
-  get getDefault() { return getDefaultFwConfigValue(this.props.firmwareHardware); }
+  const getDefault = getDefaultFwConfigValue(props.firmwareHardware);
 
-  get tooltip() {
+  const tooltip = () => {
     const scale = {
-      x: microstepScaledConfig(this.props.x) ? 1 : this.props.xScale || 1,
-      y: microstepScaledConfig(this.props.y) ? 1 : this.props.yScale || 1,
-      z: microstepScaledConfig(this.props.z) ? 1 : this.props.zScale || 1,
+      x: microstepScaledConfig(props.x) ? 1 : props.xScale || 1,
+      y: microstepScaledConfig(props.y) ? 1 : props.yScale || 1,
+      z: microstepScaledConfig(props.z) ? 1 : props.zScale || 1,
     };
     const unscaled = {
-      x: this.getDefault(this.props.x),
-      y: this.getDefault(this.props.y),
-      z: this.getDefault(this.props.z),
+      x: getDefault(props.x),
+      y: getDefault(props.y),
+      z: getDefault(props.z),
     };
-    const { toInput } = this.props;
-    return t(this.props.tooltip, {
+    const { toInput } = props;
+    return t(props.tooltip, {
       x: toInput ? toInput(unscaled.x) : unscaled.x / scale.x,
       y: toInput ? toInput(unscaled.y) : unscaled.y / scale.y,
       z: toInput ? toInput(unscaled.z) : unscaled.z / scale.z,
     });
-  }
+  };
 
-  get anyModified() {
+  const anyModified = () => {
     const modified = (setting: McuParamName, scale: number | undefined) => {
       const value = microstepScaledConfig(setting)
-        ? (this.props.sourceFwConfig(setting).value || 1) / (scale || 1)
-        : this.props.sourceFwConfig(setting).value;
+        ? (props.sourceFwConfig(setting).value || 1) / (scale || 1)
+        : props.sourceFwConfig(setting).value;
       const compareVal = (val: number | undefined) => {
-        const { toInput } = this.props;
+        const { toInput } = props;
         return toInput ? toInput(val || 0) : val;
       };
-      return compareVal(this.getDefault(setting)) != compareVal(value);
+      return compareVal(getDefault(setting)) != compareVal(value);
     };
-    return modified(this.props.x, this.props.xScale)
-      || modified(this.props.y, this.props.yScale)
-      || modified(this.props.z, this.props.zScale);
-  }
+    return modified(props.x, props.xScale)
+      || modified(props.y, props.yScale)
+      || modified(props.z, props.zScale);
+  };
 
-  get error() {
-    return this.props.warning?.x
-      || this.props.warning?.y
-      || this.props.warning?.z;
-  }
+  const error = props.warning?.x
+    || props.warning?.y
+    || props.warning?.z;
 
-  render() {
-    const { label } = this.props;
-    return <Highlight settingName={label}
-      hidden={this.props.forceHidden ||
-        (this.props.advanced && !(this.props.showAdvanced || this.anyModified)
-          && !this.error)}
-      className={this.props.advanced ? "advanced" : undefined}>
-      <Row className="axes-grid">
-        <div>
-          <label>
-            {t(label)}
-          </label>
-          <Help text={this.tooltip} />
-        </div>
-        <this.Inputs />
-      </Row>
-    </Highlight>;
-  }
-}
+  const {
+    sourceFwConfig, dispatch, intSize, gray, float, firmwareHardware, warning,
+    x, y, z, xScale, yScale, zScale, min, max, disabled, disabledBy, warnMin,
+    toInput, fromInput, inputMax, label,
+  } = props;
+  const commonProps = {
+    sourceFwConfig,
+    dispatch,
+    firmwareHardware,
+    intSize,
+    float,
+    min,
+    max,
+    inputMax,
+    disabled,
+    toInput,
+    fromInput,
+  };
+  return <Highlight settingName={label}
+    hidden={props.forceHidden ||
+      (props.advanced && !(props.showAdvanced || anyModified())
+        && !error)}
+    className={props.advanced ? "advanced" : undefined}>
+    <Row className="axes-grid">
+      <div>
+        <label>
+          {t(label)}
+        </label>
+        <Help text={tooltip()} />
+      </div>
+      <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>
+    </Row>
+  </Highlight>;
+};
diff --git a/frontend/settings/hardware_settings/parameter_management.tsx b/frontend/settings/hardware_settings/parameter_management.tsx
index 77e7f5aae8..69722d4b10 100644
--- a/frontend/settings/hardware_settings/parameter_management.tsx
+++ b/frontend/settings/hardware_settings/parameter_management.tsx
@@ -17,7 +17,7 @@ import { BooleanSetting } from "../../session_keys";
 import { setWebAppConfigValue } from "../../config_storage/actions";
 import { getModifiedClassName } from "../default_values";
 
-export function ParameterManagement(props: ParameterManagementProps) {
+export const ParameterManagement = (props: ParameterManagementProps) => {
   const {
     dispatch, onReset, botOnline, arduinoBusy, firmwareHardware,
     getConfigValue, showAdvanced,
@@ -99,7 +99,7 @@ export function ParameterManagement(props: ParameterManagementProps) {
       </Highlight>
     </Collapse>
   </Highlight>;
-}
+};
 
 export interface ParameterImportProps {
   dispatch: Function;
diff --git a/frontend/settings/hardware_settings/pin_guard.tsx b/frontend/settings/hardware_settings/pin_guard.tsx
index b8a42ef36e..c0442bcf65 100644
--- a/frontend/settings/hardware_settings/pin_guard.tsx
+++ b/frontend/settings/hardware_settings/pin_guard.tsx
@@ -8,7 +8,7 @@ import { Highlight } from "../maybe_highlight";
 import { Help, Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 
-export function PinGuard(props: PinGuardProps) {
+export const PinGuard = (props: PinGuardProps) => {
   const commonProps = {
     dispatch: props.dispatch,
     resources: props.resources,
@@ -67,4 +67,4 @@ export function PinGuard(props: PinGuardProps) {
         activeStateKey={"pin_guard_5_active_state"} />
     </Collapse>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/hardware_settings/pin_guard_input_group.tsx b/frontend/settings/hardware_settings/pin_guard_input_group.tsx
index b6827c9e26..a87a65d6e7 100644
--- a/frontend/settings/hardware_settings/pin_guard_input_group.tsx
+++ b/frontend/settings/hardware_settings/pin_guard_input_group.tsx
@@ -9,55 +9,42 @@ import { PinNumberDropdown } from "./pin_number_dropdown";
 import { Highlight } from "../maybe_highlight";
 import { getModifiedClassName } from "./default_values";
 
-export class PinGuardMCUInputGroup
-  extends React.Component<PinGuardMCUInputGroupProps> {
+export const PinGuardMCUInputGroup = (props: PinGuardMCUInputGroupProps) => {
+  const { sourceFwConfig, dispatch, activeStateKey } = props;
+  const activeStateValue = sourceFwConfig(activeStateKey).value;
+  const inactiveState = isUndefined(activeStateValue)
+    ? undefined
+    : !activeStateValue;
 
-  Number = () =>
-    <PinNumberDropdown
-      pinNumKey={this.props.pinNumKey}
-      dispatch={this.props.dispatch}
-      resources={this.props.resources}
-      disabled={this.props.disabled}
-      sourceFwConfig={this.props.sourceFwConfig} />;
-
-  Timeout = () =>
-    <McuInputBox
-      setting={this.props.timeoutKey}
-      sourceFwConfig={this.props.sourceFwConfig}
-      firmwareHardware={this.props.firmwareHardware}
-      dispatch={this.props.dispatch}
-      disabled={this.props.disabled}
-      filter={32000} />;
-
-  State = () => {
-    const { sourceFwConfig, dispatch, activeStateKey } = this.props;
-    const activeStateValue = sourceFwConfig(activeStateKey).value;
-    const inactiveState = isUndefined(activeStateValue)
-      ? undefined
-      : !activeStateValue;
-    return <ToggleButton dispatch={dispatch}
-      customText={{ textFalse: t("off"), textTrue: t("on") }}
-      toggleValue={inactiveState}
-      dim={!sourceFwConfig(activeStateKey).consistent}
-      className={getModifiedClassName(
-        activeStateKey,
-        activeStateValue,
-        this.props.firmwareHardware)}
-      disabled={this.props.disabled}
-      toggleAction={() =>
-        dispatch(settingToggle(activeStateKey, sourceFwConfig))} />;
-  };
-
-  render() {
-    const { label } = this.props;
-    return <Highlight settingName={label}>
-      <div className={"pin-guard-input-row"}>
-        <Row className="pin-guard-grid">
-          <this.Number />
-          <this.Timeout />
-          <this.State />
-        </Row>
-      </div>
-    </Highlight>;
-  }
-}
+  const { label } = props;
+  return <Highlight settingName={label}>
+    <div className={"pin-guard-input-row"}>
+      <Row className="pin-guard-grid">
+        <PinNumberDropdown
+          pinNumKey={props.pinNumKey}
+          dispatch={props.dispatch}
+          resources={props.resources}
+          disabled={props.disabled}
+          sourceFwConfig={props.sourceFwConfig} />
+        <McuInputBox
+          setting={props.timeoutKey}
+          sourceFwConfig={props.sourceFwConfig}
+          firmwareHardware={props.firmwareHardware}
+          dispatch={props.dispatch}
+          disabled={props.disabled}
+          filter={32000} />
+        <ToggleButton dispatch={dispatch}
+          customText={{ textFalse: t("off"), textTrue: t("on") }}
+          toggleValue={inactiveState}
+          dim={!sourceFwConfig(activeStateKey).consistent}
+          className={getModifiedClassName(
+            activeStateKey,
+            activeStateValue,
+            props.firmwareHardware)}
+          disabled={props.disabled}
+          toggleAction={() =>
+            dispatch(settingToggle(activeStateKey, sourceFwConfig))} />
+      </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 d8442b9b9a..023cf146d1 100644
--- a/frontend/settings/hardware_settings/pin_reporting_input_group.tsx
+++ b/frontend/settings/hardware_settings/pin_reporting_input_group.tsx
@@ -6,29 +6,20 @@ import { PinNumberDropdown } from "./pin_number_dropdown";
 import { ToolTips } from "../../constants";
 import { Highlight } from "../maybe_highlight";
 
-export class PinReportingMCUInputGroup
-  extends React.Component<PinReportingMCUInputGroupProps> {
-
-  Number = () =>
-    <PinNumberDropdown
-      pinNumKey={this.props.pinNumKey}
-      dispatch={this.props.dispatch}
-      resources={this.props.resources}
-      disabled={this.props.disabled}
-      sourceFwConfig={this.props.sourceFwConfig} />;
-
-  render() {
-    const { label } = this.props;
-    return <Highlight settingName={label}>
-      <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>;
-  }
-}
+export const PinReportingMCUInputGroup = (props: PinReportingMCUInputGroupProps) =>
+  <Highlight settingName={props.label}>
+    <Row className="grid-2-col">
+      <div className="row grid-exp-2">
+        <label>
+          {t(props.label)}
+        </label>
+        <Help text={ToolTips.PIN_REPORTING_PIN_NUMBER} />
+      </div>
+      <PinNumberDropdown
+        pinNumKey={props.pinNumKey}
+        dispatch={props.dispatch}
+        resources={props.resources}
+        disabled={props.disabled}
+        sourceFwConfig={props.sourceFwConfig} />
+    </Row>
+  </Highlight>;
diff --git a/frontend/settings/hardware_settings/space_panel_header.tsx b/frontend/settings/hardware_settings/space_panel_header.tsx
index 4817cfc720..274b35f4e6 100644
--- a/frontend/settings/hardware_settings/space_panel_header.tsx
+++ b/frontend/settings/hardware_settings/space_panel_header.tsx
@@ -4,8 +4,8 @@ import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 import { DeviceSetting } from "../../constants";
 
-export function SpacePanelHeader() {
-  return <div className="label-headings">
+export const SpacePanelHeader = () =>
+  <div className="label-headings">
     <Highlight settingName={DeviceSetting.axisHeadingLabels}>
       <div></div>
       <Row className="axes-grid-header">
@@ -22,4 +22,3 @@ export function SpacePanelHeader() {
       </Row>
     </Highlight>
   </div>;
-}
diff --git a/frontend/settings/index.tsx b/frontend/settings/index.tsx
index 4e9e3bfec2..3a87ceeda3 100644
--- a/frontend/settings/index.tsx
+++ b/frontend/settings/index.tsx
@@ -14,14 +14,14 @@ import {
   AxisSettings, Motors, EncodersOrStallDetection, LimitSwitches,
   ErrorHandling, PinGuard, ParameterManagement, PinReporting, ShowAdvancedToggle,
 } from "./hardware_settings";
-import { getHighlightName, maybeOpenPanel } from "./maybe_highlight";
+import { maybeOpenPanel } from "./maybe_highlight";
 import { isBotOnlineFromState } from "../devices/must_be_online";
 import { DesignerSettingsProps } from "./interfaces";
 import { Designer } from "./farm_designer_settings";
 import { SearchField } from "../ui/search_field";
 import { mapStateToProps } from "./state_to_props";
 import { Actions } from "../constants";
-import { ExtraSettings } from "../farm_designer/map/easter_eggs/bugs";
+import { BugsSettings } from "../farm_designer/map/easter_eggs/bugs";
 import { OtherSettings } from "./other_settings";
 import { CustomSettings } from "./custom_settings";
 import { AccountSettings } from "./account/account_settings";
@@ -34,174 +34,172 @@ import { ReSeedAccount } from "../messages/cards";
 import {
   InterpolationSettings,
 } from "../farm_designer/map/layers/points/interpolation_map";
-import { getUrlQuery, urlFriendly } from "../util";
+import { getUrlQuery } from "../util";
 import { Popover } from "../ui";
 import { Position } from "@blueprintjs/core";
-import { NavigationContext } from "../routes_helpers";
 import { ThreeDSettings } from "./three_d_settings";
+import { useLocation, useNavigate } from "react-router";
 
-export class RawDesignerSettings
-  extends React.Component<DesignerSettingsProps, {}> {
+export const RawDesignerSettings = (props: DesignerSettingsProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
 
-  componentDidMount = () => this.props.dispatch(maybeOpenPanel());
+  const {
+    getConfigValue, dispatch, firmwareConfig,
+    sourceFwConfig, sourceFbosConfig, resources, settingsPanelState,
+  } = props;
 
-  componentWillUnmount = () => {
-    this.props.dispatch({
-      type: Actions.SET_SETTINGS_SEARCH_TERM,
-      payload: ""
-    });
-  };
+  React.useEffect(() => {
+    dispatch(maybeOpenPanel());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
 
-  static contextType = NavigationContext;
-  context!: React.ContextType<typeof NavigationContext>;
-  navigate = this.context;
-
-  render() {
-    const { getConfigValue, dispatch, firmwareConfig,
-      sourceFwConfig, sourceFbosConfig, resources, settingsPanelState,
-    } = this.props;
-    const showAdvanced = !!getConfigValue(BooleanSetting.show_advanced_settings);
-    const commonProps = { dispatch, settingsPanelState, showAdvanced };
-    const { value } = this.props.sourceFbosConfig("firmware_hardware");
-    const firmwareHardware = validFirmwareHardware(value);
-    const botOnline = isBotOnlineFromState(this.props.bot);
-    const { busy } = this.props.bot.hardware.informational_settings;
-    const urlSearchTerm = (getUrlQuery("search") || "").replace(/_/g, " ");
-    urlSearchTerm && this.props.searchTerm != urlSearchTerm && dispatch({
-      type: Actions.SET_SETTINGS_SEARCH_TERM,
-      payload: urlSearchTerm,
-    });
-    return <DesignerPanel panelName={"settings"} panel={Panel.Settings}>
-      <DesignerPanelTop panel={Panel.Settings} withButton={true}>
-        <SearchField nameKey={"settings"}
-          placeholder={t("Search settings...")}
-          searchTerm={this.props.searchTerm}
-          onChange={searchTerm => {
-            getUrlQuery("search") && this.navigate(location.pathname);
-            dispatch(bulkToggleControlPanel(searchTerm != ""));
-            dispatch({
-              type: Actions.SET_SETTINGS_SEARCH_TERM,
-              payload: searchTerm,
-            });
-          }} />
-        <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 &&
-          <div className={"settings-warning-banner"}>
-            <p>{t("showing single setting")}</p>
-            <button className={"fb-button red"}
-              onClick={() => location.assign(location.pathname)}>
-              {t("cancel")}
-            </button>
-          </div>}
-        <FarmBotSettings
-          bot={this.props.bot}
-          settingsPanelState={settingsPanelState}
-          alerts={this.props.alerts}
-          dispatch={this.props.dispatch}
-          sourceFbosConfig={sourceFbosConfig}
-          botOnline={botOnline}
-          timeSettings={this.props.timeSettings}
-          showAdvanced={showAdvanced}
-          device={this.props.deviceAccount} />
-        <PowerAndReset {...commonProps}
-          botOnline={botOnline} />
-        {botOnline && showAdvanced && <ChangeOwnershipForm />}
-        <AxisSettings {...commonProps}
-          bot={this.props.bot}
-          sourceFwConfig={sourceFwConfig}
-          sourceFbosConfig={sourceFbosConfig}
-          firmwareConfig={firmwareConfig}
-          firmwareHardware={firmwareHardware}
-          botOnline={botOnline} />
-        <Motors {...commonProps}
-          arduinoBusy={busy}
-          sourceFwConfig={sourceFwConfig}
-          firmwareHardware={firmwareHardware} />
-        <EncodersOrStallDetection {...commonProps}
-          arduinoBusy={busy}
-          sourceFwConfig={sourceFwConfig}
-          firmwareHardware={firmwareHardware} />
-        <LimitSwitches {...commonProps}
-          arduinoBusy={busy}
-          firmwareHardware={firmwareHardware}
-          sourceFwConfig={sourceFwConfig} />
-        <ErrorHandling {...commonProps}
-          arduinoBusy={busy}
-          firmwareHardware={firmwareHardware}
-          sourceFwConfig={sourceFwConfig} />
-        <PinBindings {...commonProps}
-          resources={resources}
-          firmwareHardware={firmwareHardware} />
-        <PinGuard {...commonProps}
+  const showAdvanced = !!getConfigValue(BooleanSetting.show_advanced_settings);
+  const commonProps = { dispatch, settingsPanelState, showAdvanced };
+  const { value } = sourceFbosConfig("firmware_hardware");
+  const firmwareHardware = validFirmwareHardware(value);
+  const botOnline = isBotOnlineFromState(props.bot);
+  const { busy } = props.bot.hardware.informational_settings;
+  const urlSearchTerm = (getUrlQuery("search") || "").replace(/_/g, " ");
+  urlSearchTerm && props.searchTerm != urlSearchTerm && dispatch({
+    type: Actions.SET_SETTINGS_SEARCH_TERM,
+    payload: urlSearchTerm,
+  });
+  return <DesignerPanel panelName={"settings"} panel={Panel.Settings}>
+    <DesignerPanelTop panel={Panel.Settings} withButton={true}>
+      <SearchField nameKey={"settings"}
+        placeholder={t("Search settings...")}
+        searchTerm={props.searchTerm}
+        onChange={searchTerm => {
+          getUrlQuery("search") && navigate(location.pathname);
+          dispatch(bulkToggleControlPanel(searchTerm != ""));
+          dispatch({
+            type: Actions.SET_SETTINGS_SEARCH_TERM,
+            payload: searchTerm,
+          });
+        }} />
+      <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") && !props.searchTerm &&
+        <div className={"settings-warning-banner"}>
+          <p>{t("showing single setting")}</p>
+          <button className={"fb-button red"}
+            onClick={() => { navigate(location.pathname); }}>
+            {t("cancel")}
+          </button>
+        </div>}
+      <FarmBotSettings
+        bot={props.bot}
+        settingsPanelState={settingsPanelState}
+        alerts={props.alerts}
+        dispatch={dispatch}
+        sourceFbosConfig={sourceFbosConfig}
+        botOnline={botOnline}
+        timeSettings={props.timeSettings}
+        showAdvanced={showAdvanced}
+        device={props.deviceAccount} />
+      <PowerAndReset {...commonProps}
+        botOnline={botOnline} />
+      {botOnline && showAdvanced && <ChangeOwnershipForm />}
+      <AxisSettings {...commonProps}
+        bot={props.bot}
+        sourceFwConfig={sourceFwConfig}
+        sourceFbosConfig={sourceFbosConfig}
+        firmwareConfig={firmwareConfig}
+        firmwareHardware={firmwareHardware}
+        botOnline={botOnline} />
+      <Motors {...commonProps}
+        arduinoBusy={busy}
+        sourceFwConfig={sourceFwConfig}
+        firmwareHardware={firmwareHardware} />
+      <EncodersOrStallDetection {...commonProps}
+        arduinoBusy={busy}
+        sourceFwConfig={sourceFwConfig}
+        firmwareHardware={firmwareHardware} />
+      <LimitSwitches {...commonProps}
+        arduinoBusy={busy}
+        firmwareHardware={firmwareHardware}
+        sourceFwConfig={sourceFwConfig} />
+      <ErrorHandling {...commonProps}
+        arduinoBusy={busy}
+        firmwareHardware={firmwareHardware}
+        sourceFwConfig={sourceFwConfig} />
+      <PinBindings {...commonProps}
+        resources={resources}
+        firmwareHardware={firmwareHardware} />
+      <PinGuard {...commonProps}
+        arduinoBusy={busy}
+        resources={resources}
+        firmwareHardware={firmwareHardware}
+        sourceFwConfig={sourceFwConfig} />
+      {showByTerm("pin reporting", props.searchTerm) &&
+        <PinReporting {...commonProps}
           arduinoBusy={busy}
           resources={resources}
           firmwareHardware={firmwareHardware}
-          sourceFwConfig={sourceFwConfig} />
-        {showByTerm("pin reporting", this.props.searchTerm) &&
-          <PinReporting {...commonProps}
-            arduinoBusy={busy}
-            resources={resources}
-            firmwareHardware={firmwareHardware}
-            sourceFwConfig={sourceFwConfig} />}
-        <ParameterManagement {...commonProps}
-          arduinoBusy={busy}
-          sourceFwConfig={sourceFwConfig}
-          firmwareConfig={firmwareConfig}
-          firmwareHardware={firmwareHardware}
-          getConfigValue={getConfigValue}
-          onReset={MCUFactoryReset}
-          botOnline={botOnline} />
-        <CustomSettings {...commonProps}
-          dispatch={this.props.dispatch}
-          farmwareEnvs={this.props.farmwareEnvs} />
-        <Designer {...commonProps}
-          getConfigValue={getConfigValue} />
-        <ThreeDSettings {...commonProps}
-          distanceIndicator={this.props.distanceIndicator}
-          farmwareEnvs={this.props.farmwareEnvs} />
-        <AccountSettings {...commonProps}
-          user={this.props.user}
-          getConfigValue={getConfigValue} />
-        <OtherSettings {...commonProps}
-          searchTerm={this.props.searchTerm}
-          getConfigValue={getConfigValue}
-          sourceFbosConfig={sourceFbosConfig} />
-        {showByTerm("setup", this.props.searchTerm) &&
-          <SetupWizardSettings
-            dispatch={this.props.dispatch}
-            device={this.props.deviceAccount}
-            wizardStepResults={this.props.wizardStepResults} />}
-        {showByTerm("re-seed", this.props.searchTerm) &&
-          <ReSeedAccount />}
-        {showByTerm("interpolation", this.props.searchTerm) &&
-          <InterpolationSettings
-            dispatch={this.props.dispatch}
-            farmwareEnvs={this.props.farmwareEnvs}
-            saveFarmwareEnv={this.props.saveFarmwareEnv} />}
-        {showByTerm("developer", this.props.searchTerm) &&
-          <DevSettingsRows />}
-        {ExtraSettings(this.props.searchTerm)}
-      </DesignerPanelContent>
-    </DesignerPanel>;
-  }
-}
+          sourceFwConfig={sourceFwConfig} />}
+      <ParameterManagement {...commonProps}
+        arduinoBusy={busy}
+        sourceFwConfig={sourceFwConfig}
+        firmwareConfig={firmwareConfig}
+        firmwareHardware={firmwareHardware}
+        getConfigValue={getConfigValue}
+        onReset={MCUFactoryReset}
+        botOnline={botOnline} />
+      <CustomSettings {...commonProps}
+        dispatch={dispatch}
+        farmwareEnvs={props.farmwareEnvs} />
+      <Designer {...commonProps}
+        getConfigValue={getConfigValue} />
+      <ThreeDSettings {...commonProps}
+        distanceIndicator={props.distanceIndicator}
+        farmwareEnvs={props.farmwareEnvs} />
+      <AccountSettings {...commonProps}
+        user={props.user}
+        getConfigValue={getConfigValue} />
+      <OtherSettings {...commonProps}
+        searchTerm={props.searchTerm}
+        getConfigValue={getConfigValue}
+        sourceFbosConfig={sourceFbosConfig} />
+      {showByTerm("setup", props.searchTerm) &&
+        <SetupWizardSettings
+          dispatch={dispatch}
+          device={props.deviceAccount}
+          wizardStepResults={props.wizardStepResults} />}
+      {showByTerm("re-seed", props.searchTerm) &&
+        <ReSeedAccount />}
+      {showByTerm("interpolation", props.searchTerm) &&
+        <InterpolationSettings
+          dispatch={dispatch}
+          farmwareEnvs={props.farmwareEnvs}
+          saveFarmwareEnv={props.saveFarmwareEnv} />}
+      {showByTerm("developer", props.searchTerm) &&
+        <DevSettingsRows />}
+      {showByEveryTerm("surprise", props.searchTerm) &&
+        <BugsSettings />}
+    </DesignerPanelContent>
+  </DesignerPanel>;
+};
+
+const searchTermMatch = (term: string, searchTerm: string) =>
+  searchTerm.toLowerCase() == term.toLowerCase();
+const queryMatch = (term: string) => getUrlQuery("only") == term;
 
 const showByTerm = (term: string, searchTerm: string) =>
-  getUrlQuery("only") == term || searchTerm.toLowerCase() == term.toLowerCase();
+  queryMatch(term) || searchTermMatch(term, searchTerm);
 
-export const showByEveryTerm = (term: string, searchTerm: string) =>
-  searchTerm == term && getHighlightName() == urlFriendly(term).toLowerCase();
+const showByEveryTerm = (term: string, searchTerm: string) =>
+  queryMatch(term) && searchTermMatch(term, searchTerm);
 
 export const DesignerSettings = connect(mapStateToProps)(RawDesignerSettings);
 // eslint-disable-next-line import/no-default-export
diff --git a/frontend/settings/maybe_highlight.tsx b/frontend/settings/maybe_highlight.tsx
index 1278b8b243..3bdb973a26 100644
--- a/frontend/settings/maybe_highlight.tsx
+++ b/frontend/settings/maybe_highlight.tsx
@@ -7,7 +7,7 @@ import { Actions, DeviceSetting } from "../constants";
 import { trim, some } from "lodash";
 import { Path } from "../internal_urls";
 import { PhotosPanelState } from "../photos/interfaces";
-import { NavigationContext } from "../routes_helpers";
+import { useLocation, useNavigate } from "react-router";
 
 const FARMBOT_PANEL = [
   DeviceSetting.farmbotSettings,
@@ -396,12 +396,6 @@ const compareValues = (settingName: DeviceSetting) =>
     .concat(stripUnits(settingName))
     .map(s => urlFriendly(s).toLowerCase());
 
-/** Retrieve a highlight search term. */
-export const getHighlightName = () => getUrlQuery("highlight");
-
-/** Only open panel and highlight once per app load. Exported for tests. */
-export const highlight = { opened: false, highlighted: false };
-
 /** Open a panel if a setting in that panel is highlighted. */
 export const maybeOpenPanel = (panelKey: "settings" | "photos" = "settings") =>
   (dispatch: Function) => {
@@ -409,9 +403,9 @@ export const maybeOpenPanel = (panelKey: "settings" | "photos" = "settings") =>
       dispatch(bulkToggleControlPanel(true));
       return;
     }
-    if (highlight.opened) { return; }
-    const urlFriendlySettingName = urlFriendly(getHighlightName() || "")
-      .toLowerCase();
+    const highlightName =
+      new URLSearchParams(window.location.search).get("highlight");
+    const urlFriendlySettingName = urlFriendly(highlightName || "").toLowerCase();
     if (!urlFriendlySettingName) { return; }
     if (panelKey == "settings") {
       const panel = URL_FRIENDLY_LOOKUP[urlFriendlySettingName];
@@ -423,19 +417,8 @@ export const maybeOpenPanel = (panelKey: "settings" | "photos" = "settings") =>
       URL_FRIENDLY_LOOKUP_PHOTOS[urlFriendlySettingName].map(panel =>
         dispatch({ type: Actions.TOGGLE_PHOTOS_PANEL_OPTION, payload: panel }));
     }
-    highlight.opened = true;
   };
 
-/** Highlight a setting if provided as a search term. */
-export const maybeHighlight = (settingName: DeviceSetting) => {
-  const item = getHighlightName();
-  if (highlight.highlighted || !item) { return ""; }
-  const isCurrentSetting = compareValues(settingName).includes(item);
-  if (!isCurrentSetting) { return ""; }
-  highlight.highlighted = true;
-  return "highlight";
-};
-
 export interface HighlightProps {
   settingName: DeviceSetting;
   children: React.ReactNode;
@@ -445,96 +428,98 @@ export interface HighlightProps {
   pathPrefix?(path?: string): string;
 }
 
-interface HighlightState {
-  className: string;
-  hovered: boolean;
-}
-
 /** Wrap highlight-able settings. */
-export class Highlight extends React.Component<HighlightProps, HighlightState> {
-  state: HighlightState = {
-    className: maybeHighlight(this.props.settingName),
-    hovered: false,
-  };
+export const Highlight = (props: HighlightProps) => {
+  const { settingName } = props;
+
+  const [hovered, setHovered] = React.useState(false);
+  const [highlightClass, setHighlightClass] = React.useState("");
+  const [highlightTimestamp, setHighlightTimestamp] = React.useState(0);
+
+  const navigate = useNavigate();
+  const location = useLocation();
 
-  componentDidMount = () => {
-    if (this.state.className == "highlight") {
-      /** Slowly fades highlight. */
-      this.setState({ className: "unhighlight" });
+  const highlightName = new URLSearchParams(location.search).get("highlight");
+  const highlightMatch = highlightName &&
+    compareValues(settingName).includes(highlightName.toLowerCase());
+
+  React.useEffect(() => {
+    if (highlightMatch) {
+      setHighlightTimestamp(Date.now());
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
 
-  get searchTerm() {
-    const { app } = store.getState();
-    return app.settingsSearchTerm;
-  }
+  React.useEffect(() => {
+    if (!highlightMatch) {
+      setHighlightClass("");
+      return;
+    }
+    setHighlightClass("highlight");
+    setTimeout(() => setHighlightClass("unhighlight"), 200);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [highlightTimestamp]);
 
-  toggleHover = (hovered: boolean) => () => this.setState({ hovered });
+  const searchTerm = store.getState().app.settingsSearchTerm;
 
-  get isSectionHeader() { return this.props.className?.includes("section"); }
+  const isSectionHeader = props.className?.includes("section");
 
-  inContent = (term: string, urlCompare = false) => {
-    const content = CONTENT_LOOKUP[this.props.settingName] || [];
+  const inContent = (term: string, urlCompare = false) => {
+    const content = CONTENT_LOOKUP[settingName] || [];
     return some(content.map(s => {
       const compareTerm = urlCompare ? compareValues(s)[0] : s;
       return compareTerm.toLowerCase().includes(term.toLowerCase());
     }));
   };
 
-  get searchMatch() {
-    return this.searchTerm &&
+  const searchMatch = () => {
+    return searchTerm &&
       // if searching, look for setting name match
-      (some(ALTERNATE_NAMES[this.props.settingName].map(s => s.toLowerCase()
-        .includes(this.searchTerm.toLowerCase())))
+      (some(ALTERNATE_NAMES[settingName].map(s => s.toLowerCase()
+        .includes(searchTerm.toLowerCase())))
         // if match not found, look for section content match
-        || (this.isSectionHeader && this.inContent(this.searchTerm)));
-  }
+        || (isSectionHeader && inContent(searchTerm)));
+  };
 
-  get hidden() {
+  const hidden = () => {
     const isolateName = getUrlQuery("only");
     if (isolateName) {
-      const inSection = this.isSectionHeader && this.inContent(isolateName, true);
+      const inSection = isSectionHeader && inContent(isolateName, true);
       const settingMatch =
-        compareValues(this.props.settingName).includes(isolateName);
+        compareValues(settingName).includes(isolateName);
       return !(inSection || settingMatch);
     }
-    const highlightName = getHighlightName();
-    if (!highlightName) { return !!this.props.hidden; }
-    const highlightMatch =
-      compareValues(this.props.settingName).includes(highlightName);
-    const highlightInSection = this.isSectionHeader
-      && this.inContent(highlightName, true) || highlightMatch;
+    if (!highlightName) { return !!props.hidden; }
+    const highlightInSection = isSectionHeader
+      && inContent(highlightName, true) || highlightMatch;
     const notHighlighted =
-      SETTING_PANEL_LOOKUP[this.props.settingName] == "other_settings" &&
+      SETTING_PANEL_LOOKUP[settingName] == "other_settings" &&
       !highlightMatch;
-    return this.props.hidden ? !highlightInSection : notHighlighted;
-  }
-
-  static contextType = NavigationContext;
-  context!: React.ContextType<typeof NavigationContext>;
-  navigate = this.context;
+    return props.hidden ? !highlightInSection : notHighlighted;
+  };
 
-  render() {
-    const hoverClass = this.state.hovered ? "hovered" : "";
-    return <div
-      className={[
-        "setting",
-        this.props.className,
-        this.state.className,
-      ].join(" ")}
-      onMouseEnter={this.toggleHover(true)}
-      onMouseLeave={this.toggleHover(false)}
-      hidden={this.searchTerm ? !this.searchMatch : this.hidden}>
-      {this.props.settingName &&
-        <i className={`fa fa-anchor ${this.props.className} ${hoverClass}`}
-          onClick={() => {
-            this.navigate(
-              linkToSetting(this.props.settingName, this.props.pathPrefix));
-          }} />}
-      {this.props.children}
-    </div>;
-  }
-}
+  return <div
+    className={[
+      "setting",
+      props.className,
+      highlightClass,
+    ].join(" ")}
+    onMouseEnter={() => setHovered(true)}
+    onMouseLeave={() => setHovered(false)}
+    hidden={searchTerm ? !searchMatch() : hidden()}>
+    {settingName &&
+      <i
+        className={[
+          "fa fa-anchor",
+          props.className,
+          hovered ? "hovered" : "",
+        ].join(" ")}
+        onClick={() => {
+          navigate(linkToSetting(settingName, props.pathPrefix));
+        }} />}
+    {props.children}
+  </div>;
+};
 
 export const linkToSetting =
   (settingName: DeviceSetting, pathPrefix = Path.settings) =>
diff --git a/frontend/settings/pin_bindings/pin_bindings.tsx b/frontend/settings/pin_bindings/pin_bindings.tsx
index afd50e5768..2cccc56599 100644
--- a/frontend/settings/pin_bindings/pin_bindings.tsx
+++ b/frontend/settings/pin_bindings/pin_bindings.tsx
@@ -6,7 +6,7 @@ import { PinBindingsContent } from "./pin_bindings_content";
 import { DeviceSetting } from "../../constants";
 import { Highlight } from "../maybe_highlight";
 
-export function PinBindings(props: PinBindingsProps) {
+export const PinBindings = (props: PinBindingsProps) => {
 
   const { pin_bindings } = props.settingsPanelState;
   const { dispatch, resources, firmwareHardware } = props;
@@ -24,4 +24,4 @@ export function PinBindings(props: PinBindingsProps) {
         firmwareHardware={firmwareHardware} />
     </Collapse>
   </Highlight>;
-}
+};
diff --git a/frontend/settings/transfer_ownership/__tests__/change_ownership_form_test.tsx b/frontend/settings/transfer_ownership/__tests__/change_ownership_form_test.tsx
index d77866b980..d45481004a 100644
--- a/frontend/settings/transfer_ownership/__tests__/change_ownership_form_test.tsx
+++ b/frontend/settings/transfer_ownership/__tests__/change_ownership_form_test.tsx
@@ -5,33 +5,42 @@ jest.mock("../../transfer_ownership/transfer_ownership", () => ({
   transferOwnership: jest.fn(() => Promise.resolve()),
 }));
 
+interface MockRef {
+  current: { value: string } | undefined;
+}
+let mockRef: MockRef = { current: { value: "" } };
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useRef: () => mockRef,
+}));
+
 import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { ChangeOwnershipForm } from "../change_ownership_form";
-import { mount, shallow } from "enzyme";
 import { transferOwnership } from "../transfer_ownership";
 import { API } from "../../../api";
+import { changeBlurableInputRTL } from "../../../__test_support__/helpers";
 
-describe("<ChangeOwnershipForm/>", () => {
+describe("<ChangeOwnershipForm />", () => {
   beforeEach(() => API.setBaseUrl("https://my.farm.bot"));
 
   it("renders", () => {
-    const wrapper = mount(<ChangeOwnershipForm />);
-    wrapper.setState({ open: true });
-    ["email", "password", "server"]
-      .map(string => expect(wrapper.text().toLowerCase()).toContain(string));
-  });
-
-  it("opens form", () => {
-    const wrapper = shallow<ChangeOwnershipForm>(<ChangeOwnershipForm />);
-    expect(wrapper.state().open).toEqual(false);
-    wrapper.find("ExpandableHeader").simulate("click");
-    expect(wrapper.state().open).toEqual(true);
+    render(<ChangeOwnershipForm />);
+    const header = screen.getByText("Change Ownership");
+    fireEvent.click(header);
+    ["Email", "Password", "Server"]
+      .map(string => expect(screen.getByLabelText(string)).toBeInTheDocument());
   });
 
   it("submits", () => {
-    const wrapper = mount(<ChangeOwnershipForm />);
-    wrapper.setState({ open: true, email: "email", password: "password" });
-    wrapper.find("button").simulate("click");
+    render(<ChangeOwnershipForm />);
+    const header = screen.getByText("Change Ownership");
+    fireEvent.click(header);
+    const email = screen.getByLabelText("Email");
+    changeBlurableInputRTL(email, "email");
+    const password = screen.getByLabelText("Password");
+    changeBlurableInputRTL(password, "password");
+    fireEvent.click(screen.getByText("submit"));
     expect(transferOwnership).toHaveBeenCalledWith({
       device: mockDevice,
       email: "email",
@@ -39,27 +48,20 @@ describe("<ChangeOwnershipForm/>", () => {
     });
   });
 
-  it("changes email", () => {
-    const wrapper = shallow<ChangeOwnershipForm>(<ChangeOwnershipForm />);
-    expect(wrapper.state().email).toEqual("");
-    wrapper.find("BlurableInput").first().simulate("commit",
-      { currentTarget: { value: "email" } });
-    expect(wrapper.state().email).toEqual("email");
-  });
-
-  it("changes password", () => {
-    const wrapper = shallow<ChangeOwnershipForm>(<ChangeOwnershipForm />);
-    expect(wrapper.state().password).toEqual("");
-    wrapper.find("BlurablePassword").simulate("commit",
-      { currentTarget: { value: "password" } });
-    expect(wrapper.state().password).toEqual("password");
-  });
-
-  it("changes server", () => {
-    const wrapper = shallow<ChangeOwnershipForm>(<ChangeOwnershipForm />);
-    const input = wrapper.find("BlurableInput").last();
-    input.simulate("commit",
-      { currentTarget: { value: "nope" } });
-    expect(input.props().disabled).toEqual(true);
+  it("handles missing ref", () => {
+    mockRef = { current: undefined };
+    render(<ChangeOwnershipForm />);
+    const header = screen.getByText("Change Ownership");
+    fireEvent.click(header);
+    const email = screen.getByLabelText("Email");
+    changeBlurableInputRTL(email, "email");
+    const password = screen.getByLabelText("Password");
+    changeBlurableInputRTL(password, "password");
+    fireEvent.click(screen.getByText("submit"));
+    expect(transferOwnership).toHaveBeenCalledWith({
+      device: mockDevice,
+      email: "email",
+      password: "password",
+    });
   });
 });
diff --git a/frontend/settings/transfer_ownership/__tests__/transfer_ownership_test.ts b/frontend/settings/transfer_ownership/__tests__/transfer_ownership_test.ts
index 17ca0dc82f..96f9de16af 100644
--- a/frontend/settings/transfer_ownership/__tests__/transfer_ownership_test.ts
+++ b/frontend/settings/transfer_ownership/__tests__/transfer_ownership_test.ts
@@ -35,13 +35,13 @@ describe("submitOwnershipChange()", () => {
   it("pops a toast when things go wrong", async () => {
     mockPost = Promise.reject("NOPE");
     await submitOwnershipChange({
-      email: "email", password: "password", open: true
+      email: "email", password: "password",
     });
     expect(error).toHaveBeenCalledWith("Bad username or password");
   });
 
   it("pops a toast when things go wrong: missing fields", () => {
-    submitOwnershipChange({ email: "", password: "", open: true });
+    submitOwnershipChange({ email: "", password: "" });
     expect(error).toHaveBeenCalledWith("Bad username or password");
   });
 });
diff --git a/frontend/settings/transfer_ownership/change_ownership_form.tsx b/frontend/settings/transfer_ownership/change_ownership_form.tsx
index f591981079..c4ef4a36e3 100644
--- a/frontend/settings/transfer_ownership/change_ownership_form.tsx
+++ b/frontend/settings/transfer_ownership/change_ownership_form.tsx
@@ -8,18 +8,17 @@ import {
   NonsecureContentWarning,
 } from "../fbos_settings/nonsecure_content_warning";
 import { Content, DeviceSetting } from "../../constants";
-import { BlurablePassword } from "../../ui/blurable_password";
 import { t } from "../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 import { Collapse } from "@blueprintjs/core";
+import { clone, noop } from "lodash";
 
-interface ChangeOwnershipFormState {
+interface Form {
   email: string;
   password: string;
-  open: boolean;
 }
 
-export function submitOwnershipChange(input: ChangeOwnershipFormState) {
+export function submitOwnershipChange(input: Form) {
   const { email, password } = input;
   const ok = () => success(t("Received change of ownership."));
   const no = () => error(t("Bad username or password"));
@@ -28,75 +27,84 @@ export function submitOwnershipChange(input: ChangeOwnershipFormState) {
   return transferOwnership(p).then(ok, no);
 }
 
-export class ChangeOwnershipForm
-  extends React.Component<{}, ChangeOwnershipFormState> {
+export const ChangeOwnershipForm = () => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [open, setOpen] = React.useState(false);
 
-  state: ChangeOwnershipFormState = { email: "", password: "", open: false };
+  // eslint-disable-next-line no-null/no-null
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
-  render() {
-    return <Highlight className={"section"}
-      settingName={DeviceSetting.changeOwnership}>
-      <ExpandableHeader
-        expanded={this.state.open}
-        title={t(DeviceSetting.changeOwnership)}
-        onClick={() => this.setState({ open: !this.state.open })} />
-      <Collapse isOpen={!!this.state.open}>
-        <form className={"change-ownership-grid"}>
-          <div>
-            <p>
-              {t("Change the account FarmBot is connected to.")}
-            </p>
-            <div className="change-ownership-grid">
-              <label>
-                {t("Email")}
-              </label>
-              <BlurableInput
-                allowEmpty={true}
-                onCommit={e => this.setState({ email: e.currentTarget.value })}
-                name="email"
-                value={this.state.email}
-                type="email" />
-              <label>
-                {t("Password")}
-              </label>
-              <BlurablePassword
-                onCommit={e => this.setState({ password: e.currentTarget.value })}
-                name="password" />
-              <label>
-                {t("Server")}
-              </label>
-              <BlurableInput
-                allowEmpty={true}
-                onCommit={() => { }}
-                name="server"
-                disabled={true}
-                value={API.current.baseUrl}
-                type="text" />
-            </div>
+  return <Highlight className={"section"}
+    settingName={DeviceSetting.changeOwnership}>
+    <ExpandableHeader
+      expanded={open}
+      title={t(DeviceSetting.changeOwnership)}
+      onClick={() => setOpen(!open)} />
+    <Collapse isOpen={!!open}>
+      <div className={"change-ownership-grid"}>
+        <div>
+          <p>
+            {t("Change the account FarmBot is connected to.")}
+          </p>
+          <div className="change-ownership-grid">
+            <label htmlFor={"email"}>
+              {t("Email")}
+            </label>
+            <BlurableInput
+              id={"email"}
+              allowEmpty={true}
+              onCommit={e => setEmail(e.currentTarget.value)}
+              value={email}
+              type={"email"} />
+            <label htmlFor={"password"}>
+              {t("Password")}
+            </label>
+            <input
+              ref={inputRef}
+              id={"password"}
+              type={"password"}
+              onBlur={e => setPassword(e.currentTarget.value)} />
+            <label htmlFor={"server"}>
+              {t("Server")}
+            </label>
+            <BlurableInput
+              id={"server"}
+              allowEmpty={true}
+              onCommit={noop}
+              disabled={true}
+              value={API.current.baseUrl}
+              type={"text"} />
           </div>
-          <Row>
-            <NonsecureContentWarning
-              urls={[API.current.baseUrl, location.protocol]}>
-              <div>
-                <strong>
-                  {t(Content.NOT_HTTPS)}
-                </strong>
-                <p>
-                  {t(Content.CONTACT_SYSADMIN)}
-                </p>
-              </div>
-            </NonsecureContentWarning>
-          </Row>
-          <Row>
-            <button
-              className={"fb-button gray"}
-              title={t("submit")}
-              onClick={() => { submitOwnershipChange(this.state); }}>
-              {t("submit")}
-            </button>
-          </Row>
-        </form>
-      </Collapse>
-    </Highlight>;
-  }
-}
+        </div>
+        <Row>
+          <NonsecureContentWarning
+            urls={[API.current.baseUrl, location.protocol]}>
+            <div>
+              <strong>
+                {t(Content.NOT_HTTPS)}
+              </strong>
+              <p>
+                {t(Content.CONTACT_SYSADMIN)}
+              </p>
+            </div>
+          </NonsecureContentWarning>
+        </Row>
+        <Row>
+          <button
+            className={"fb-button gray"}
+            title={t("submit")}
+            onClick={() => {
+              const payload: Form = clone({ email, password });
+              inputRef.current && (inputRef.current.value = "");
+              setPassword("");
+              setEmail("");
+              submitOwnershipChange(payload);
+            }}>
+            {t("submit")}
+          </button>
+        </Row>
+      </div>
+    </Collapse>
+  </Highlight>;
+};
diff --git a/frontend/three_d_garden/index.tsx b/frontend/three_d_garden/index.tsx
index 65a82131cf..bfda96c3ae 100644
--- a/frontend/three_d_garden/index.tsx
+++ b/frontend/three_d_garden/index.tsx
@@ -16,6 +16,7 @@ import { BooleanSetting } from "../session_keys";
 import { LayerToggle } from "../farm_designer/map/legend/layer_toggle";
 import { setWebAppConfigValue } from "../config_storage/actions";
 import { DesignerState } from "../farm_designer/interfaces";
+import { setPanelOpen } from "../farm_designer/panel_header";
 
 export interface ThreeDGardenProps {
   config: Config;
@@ -29,17 +30,19 @@ export interface ThreeDGardenProps {
 export const ThreeDGarden = (props: ThreeDGardenProps) => {
   return <div className={"three-d-garden"}>
     <div className={"garden-bed-3d-model"}>
-      <Canvas shadows={true}>
-        <GardenModel
-          config={props.config}
-          activeFocus={""}
-          setActiveFocus={noop}
-          mapPoints={props.mapPoints}
-          weeds={props.weeds}
-          toolSlots={props.toolSlots}
-          mountedToolName={props.mountedToolName}
-          addPlantProps={props.addPlantProps} />
-      </Canvas>
+      <React.Suspense>
+        <Canvas shadows={true}>
+          <GardenModel
+            config={props.config}
+            activeFocus={""}
+            setActiveFocus={noop}
+            mapPoints={props.mapPoints}
+            weeds={props.weeds}
+            toolSlots={props.toolSlots}
+            mountedToolName={props.mountedToolName}
+            addPlantProps={props.addPlantProps} />
+        </Canvas>
+      </React.Suspense>
     </div>
   </div>;
 };
@@ -61,7 +64,10 @@ export const ThreeDGardenToggle = (props: ThreeDGardenToggleProps) => {
     {threeDGarden &&
       <button className={"fb-button gray"}
         title={t("3D Settings")}
-        onClick={() => { navigate(Path.settings("3d_garden")); }}>
+        onClick={() => {
+          dispatch(setPanelOpen(true));
+          navigate(Path.settings("3d_garden"));
+        }}>
         <i className={"fa fa-cog"} />
       </button>}
     {threeDGarden &&
diff --git a/frontend/tos_update/component.tsx b/frontend/tos_update/component.tsx
index bce1ca7ad5..8255f5dc4f 100644
--- a/frontend/tos_update/component.tsx
+++ b/frontend/tos_update/component.tsx
@@ -65,7 +65,7 @@ export class TosUpdate extends React.Component<{}, Partial<State>> {
           </div>
           <div>
             <label>{t("Password")}</label>
-            <input type="password"
+            <input type={"password"}
               onChange={this.set("password").bind(this)}>
             </input>
           </div>
diff --git a/frontend/ui/__tests__/blurable_password_test.tsx b/frontend/ui/__tests__/blurable_password_test.tsx
deleted file mode 100644
index f29a383caa..0000000000
--- a/frontend/ui/__tests__/blurable_password_test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import {
-  BlurablePassword,
-  BPProps,
-} from "../blurable_password";
-
-describe("<BlurablePassword />", () => {
-  const fakeProps = (): BPProps => {
-    return { onCommit: jest.fn() };
-  };
-
-  it("triggers callbacks", () => {
-    const p = fakeProps();
-    const wrapper = shallow<BlurablePassword>(<BlurablePassword {...p} />);
-    expect(p.onCommit).not.toHaveBeenCalled();
-    const fakeEvent1 = { target: { value: "hello!" } };
-    wrapper.simulate("change", fakeEvent1);
-    wrapper.update();
-    expect(wrapper.instance().state.value).toBe(fakeEvent1.target.value);
-    fakeEvent1.target.value = "goodbye!";
-    wrapper.simulate("blur", fakeEvent1);
-    wrapper.update();
-    expect(p.onCommit).toHaveBeenCalledWith(fakeEvent1);
-  });
-});
diff --git a/frontend/ui/__tests__/doc_link_test.ts b/frontend/ui/__tests__/doc_link_test.ts
index 2b7efed814..b001d5b3dd 100644
--- a/frontend/ui/__tests__/doc_link_test.ts
+++ b/frontend/ui/__tests__/doc_link_test.ts
@@ -1,5 +1,11 @@
 import {
-  devDocLink, devDocLinkClick, docLink, docLinkClick, genesisDocLink,
+  devDocLink,
+  devDocLinkClick,
+  DevDocLinkClickProps,
+  docLink,
+  docLinkClick,
+  DocLinkClickProps,
+  genesisDocLink,
 } from "../doc_link";
 import { ExternalUrl } from "../../external_urls";
 import { Path } from "../../internal_urls";
@@ -27,31 +33,33 @@ describe("genesisDocLink", () => {
 });
 
 describe("docLinkClick", () => {
+  const fakeProps = (): DocLinkClickProps => ({
+    slug: "farmware",
+    navigate: jest.fn(),
+    dispatch: jest.fn(),
+  });
+
   it("navigates to doc link", () => {
     location.pathname = Path.mock(Path.designer());
-    const navigate = jest.fn();
-    docLinkClick("farmware", navigate)();
-    expect(navigate).toHaveBeenCalledWith(Path.help("farmware"));
+    const p = fakeProps();
+    docLinkClick(p)();
+    expect(p.navigate).toHaveBeenCalledWith(Path.help("farmware"));
     expect(location.assign).not.toHaveBeenCalled();
   });
-
-  it("reloads to doc link", () => {
-    location.pathname = Path.mock(Path.help());
-    location.assign = jest.fn();
-    const navigate = jest.fn();
-    docLinkClick("farmware", navigate)();
-    expect(navigate).not.toHaveBeenCalled();
-    expect(location.assign).toHaveBeenCalledWith(expect.stringContaining(
-      Path.help("farmware")));
-  });
 });
 
 describe("devDocLinkClick", () => {
+  const fakeProps = (): DevDocLinkClickProps => ({
+    slug: "lua",
+    navigate: jest.fn(),
+    dispatch: jest.fn(),
+  });
+
   it("navigates to doc link", () => {
     location.pathname = Path.mock(Path.designer());
-    const navigate = jest.fn();
-    devDocLinkClick("lua", navigate)();
-    expect(navigate).toHaveBeenCalledWith(Path.developer("lua"));
+    const p = fakeProps();
+    devDocLinkClick(p)();
+    expect(p.navigate).toHaveBeenCalledWith(Path.developer("lua"));
     expect(location.assign).not.toHaveBeenCalled();
   });
 });
diff --git a/frontend/ui/__tests__/save_button_test.tsx b/frontend/ui/__tests__/save_button_test.tsx
index 2349a39742..f3a5a12b04 100644
--- a/frontend/ui/__tests__/save_button_test.tsx
+++ b/frontend/ui/__tests__/save_button_test.tsx
@@ -9,8 +9,14 @@ describe("<SaveBtn />", () => {
     onClick: jest.fn(),
   });
 
-  it("returns button", () => {
-    const wrapper = shallow(<SaveBtn {...fakeProps()} />);
-    expect(wrapper.text().toLowerCase()).toContain("saved");
+  it.each<[SpecialStatus, string]>([
+    [SpecialStatus.SAVED, "saved"],
+    [SpecialStatus.DIRTY, "save"],
+    [SpecialStatus.SAVING, "saving"],
+  ])("returns button with status %s %s", (status, text) => {
+    const p = fakeProps();
+    p.status = status;
+    const wrapper = shallow(<SaveBtn {...p} />);
+    expect(wrapper.text().toLowerCase()).toContain(text);
   });
 });
diff --git a/frontend/ui/__tests__/tooltip_test.tsx b/frontend/ui/__tests__/tooltip_test.tsx
index 5b7f1eb35f..8f14cad980 100644
--- a/frontend/ui/__tests__/tooltip_test.tsx
+++ b/frontend/ui/__tests__/tooltip_test.tsx
@@ -5,8 +5,10 @@ import { ToolTip, ToolTipProps } from "../tooltip";
 describe("<ToolTip />", () => {
   const fakeProps = (): ToolTipProps => ({
     helpText: "such help",
-    docPage: "weed-detection"
+    docPage: "weed-detection",
+    dispatch: jest.fn(),
   });
+
   const p = fakeProps();
   const wrapper = mount(<ToolTip {...p} />);
 
diff --git a/frontend/ui/blurable_password.tsx b/frontend/ui/blurable_password.tsx
deleted file mode 100644
index 9e683127c0..0000000000
--- a/frontend/ui/blurable_password.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-
-export interface BPProps {
-  onCommit(e: React.SyntheticEvent<HTMLInputElement>): void;
-  name?: string;
-}
-
-interface BPState {
-  value: string;
-}
-
-export class BlurablePassword extends React.Component<BPProps, BPState> {
-  constructor(props: BPProps) {
-    super(props);
-    this.state = { value: "" };
-  }
-  render() {
-    return <input
-      type="password"
-      onBlur={(e) => this.props.onCommit(e)}
-      onChange={(e) => this.setState({ value: e.target.value })} />;
-  }
-}
diff --git a/frontend/ui/doc_link.ts b/frontend/ui/doc_link.ts
index 636f2f39d3..f2fc8dec54 100644
--- a/frontend/ui/doc_link.ts
+++ b/frontend/ui/doc_link.ts
@@ -1,6 +1,7 @@
 import { ExternalUrl } from "../external_urls";
 import { NavigateFunction } from "react-router";
 import { Path } from "../internal_urls";
+import { setPanelOpen } from "../farm_designer/panel_header";
 
 /** A centralized list of all documentation slugs in the app makes it easier to
  * rename / move links in the future. */
@@ -43,17 +44,30 @@ const genericDocLinkClick =
     slug: T,
     page: "help" | "developer",
     navigate: NavigateFunction,
+    dispatch: Function,
   ) => () => {
+    dispatch(setPanelOpen(true));
     const path = page == "help" ? Path.help : Path.developer;
-    if (Path.getSlug(Path.designer()) == page) {
-      location.assign(window.location.origin + Path.withApp(path("" + slug)));
-    } else {
-      navigate(path("" + slug));
-    }
+    navigate(path("" + slug));
   };
 
-export const docLinkClick = (slug: DocSlug, navigate: NavigateFunction) =>
-  genericDocLinkClick<DocSlug>(slug, "help", navigate);
+interface DocLinkClickPropsBase {
+  navigate: NavigateFunction;
+  dispatch: Function;
+}
 
-export const devDocLinkClick = (slug: DevDocSlug, navigate: NavigateFunction) =>
-  genericDocLinkClick<DevDocSlug>(slug, "developer", navigate);
+export interface DocLinkClickProps extends DocLinkClickPropsBase {
+  slug: DocSlug;
+}
+
+export interface DevDocLinkClickProps extends DocLinkClickPropsBase {
+  slug: DevDocSlug;
+}
+
+export const docLinkClick =
+  ({ slug, navigate, dispatch }: DocLinkClickProps) =>
+    genericDocLinkClick<DocSlug>(slug, "help", navigate, dispatch);
+
+export const devDocLinkClick =
+  ({ slug, navigate, dispatch }: DevDocLinkClickProps) =>
+    genericDocLinkClick<DevDocSlug>(slug, "developer", navigate, dispatch);
diff --git a/frontend/ui/expandable_header.tsx b/frontend/ui/expandable_header.tsx
index 4166410216..8fa58add10 100644
--- a/frontend/ui/expandable_header.tsx
+++ b/frontend/ui/expandable_header.tsx
@@ -12,7 +12,7 @@ export const ExpandableHeader = (props: ExpandableHeaderProps) => {
   const { onClick, title, expanded } = props;
   const icon_string = expanded ? "fa-minus" : "fa-plus";
   const nbwhitespace = title != "";
-  return <h4 className="expandable-header" onClick={onClick}>
+  return <h4 className="expandable-header" role={"button"} onClick={onClick}>
     {t(title)}
     {nbwhitespace &&
       "\u00A0\u00A0"
diff --git a/frontend/ui/tooltip.tsx b/frontend/ui/tooltip.tsx
index c2bd06f827..d413969a5f 100644
--- a/frontend/ui/tooltip.tsx
+++ b/frontend/ui/tooltip.tsx
@@ -4,28 +4,30 @@ import { DocSlug, docLinkClick } from "./doc_link";
 import { useNavigate } from "react-router";
 
 export interface ToolTipProps {
-  children?: React.ReactNode;
-  className?: string;
   helpText: string;
-  docPage?: DocSlug;
+  docPage: DocSlug;
+  dispatch: Function;
 }
 
 export const ToolTip = (props: ToolTipProps) => {
-  const { helpText, className } = props;
+  const { helpText, dispatch, docPage } = props;
   const [isOpen, setIsOpen] = React.useState(false);
   const navigate = useNavigate();
-  return <div className={["title-help", className].filter(x => x).join(" ")}
+  return <div className={"title-help"}
     onClick={e => e.stopPropagation()}>
     <i className={"fa fa-question-circle title-help-icon"}
       onClick={() => setIsOpen(!isOpen)} />
     <div className={`title-help-text ${isOpen ? "open" : ""}`}>
       <i className={"title-help-text-text"}>{t(helpText)}</i>
-      {props.docPage &&
-        <a onClick={docLinkClick(props.docPage, navigate)}>
+      {docPage &&
+        <a onClick={docLinkClick({
+          slug: docPage,
+          navigate,
+          dispatch,
+        })}>
           {" " + t("Documentation")}
           <i className="fa fa-external-link" />
         </a>}
-      {props.children}
     </div>
   </div>;
 };
diff --git a/frontend/wizard/checks.tsx b/frontend/wizard/checks.tsx
index 6e2f082d5c..924143ebdc 100644
--- a/frontend/wizard/checks.tsx
+++ b/frontend/wizard/checks.tsx
@@ -194,6 +194,7 @@ export const SwitchCameraCalibrationMethod =
     const navigate = useNavigate();
     return <CameraCalibrationMethodConfig
       navigate={navigate}
+      dispatch={props.dispatch}
       wdEnvGet={key => envGet(key, prepopulateEnv(getEnv(props.resources)))}
       saveEnvVar={(key, value) =>
         props.dispatch(saveOrEditFarmwareEnv(props.resources)(
@@ -463,7 +464,7 @@ export const Connectivity = (props: WizardStepComponentProps) => {
   });
   return <div className={"connectivity"}>
     <ConnectivityDiagram rowData={data.rowData} />
-    <Diagnosis statusFlags={data.flags} />
+    <Diagnosis statusFlags={data.flags} dispatch={props.dispatch} />
   </div>;
 };
 
diff --git a/lib/tasks/coverage.rake b/lib/tasks/coverage.rake
index 8ceaf5b59e..74898a0b8c 100644
--- a/lib/tasks/coverage.rake
+++ b/lib/tasks/coverage.rake
@@ -189,6 +189,7 @@ def print_lib_progress
     "file" => { "enzyme" => 0, "rtl" => 0, "both" => 0 },
     "line" => { "enzyme" => 0, "rtl" => 0, "both" => 0 },
   }
+  component_counts = { "class" => 0, "const" => 0, "function" => 0 }
   Find.find("frontend") do |path|
     next unless File.file?(path)
     includesEnzyme = false
@@ -202,6 +203,15 @@ def print_lib_progress
         counts["line"]["rtl"] += 1
         includesRTL = true
       end
+      if line.include?("export class ")
+        component_counts["class"] += 1
+      end
+      if line.include?("export const ")
+        component_counts["const"] += 1
+      end
+      if line.include?("export function ")
+        component_counts["function"] += 1
+      end
     end
     if includesEnzyme && includesRTL
       counts["file"]["both"] += 1
@@ -227,6 +237,8 @@ def print_lib_progress
     puts "█" * rtl + "▓" * both + "░" * remain
   end
   puts
+  exports = component_counts.map{ |text, count| " #{count} #{text}"}.join(",")
+  puts "component exports:" + exports
 end
 
 namespace :coverage do
diff --git a/lib/tasks/fe.rake b/lib/tasks/fe.rake
index e9fed4af90..3c442f02cd 100644
--- a/lib/tasks/fe.rake
+++ b/lib/tasks/fe.rake
@@ -37,6 +37,11 @@ EXCLUDE = [
     reason: "v9 fiber and v10 drei require react",
     version: "19",
   },
+  {
+    packages: ["three"],
+    reason: "not working:",
+    version: "0.175.0",
+  },
 ]
 
 # Load package.json as JSON.
diff --git a/package.json b/package.json
index c95a2c41bf..190b70213b 100644
--- a/package.json
+++ b/package.json
@@ -37,24 +37,24 @@
     "@parcel/watcher": "2.1.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "5.17.6",
-    "@blueprintjs/select": "5.3.18",
+    "@blueprintjs/core": "5.18.0",
+    "@blueprintjs/select": "5.3.19",
     "@monaco-editor/react": "4.7.0",
-    "@parcel/transformer-sass": "2.14.2",
-    "@parcel/transformer-typescript-tsc": "2.14.2",
+    "@parcel/transformer-sass": "2.14.4",
+    "@parcel/transformer-typescript-tsc": "2.14.4",
     "@react-spring/three": "9.7.5",
     "@react-three/drei": "9.122.0",
     "@react-three/fiber": "8.18.0",
     "@rollbar/react": "0.12.1",
     "@types/lodash": "4.17.16",
     "@types/markdown-it": "14.1.2",
-    "@types/node": "22.13.13",
+    "@types/node": "22.14.0",
     "@types/promise-timeout": "1.3.3",
-    "@types/react": "19.0.12",
+    "@types/react": "19.1.1",
     "@types/react-color": "3.0.13",
-    "@types/react-dom": "19.0.4",
-    "@types/three": "0.174.0",
-    "@types/ws": "8.18.0",
+    "@types/react-dom": "19.1.2",
+    "@types/three": "0.175.0",
+    "@types/ws": "8.18.1",
     "@xterm/xterm": "5.5.0",
     "axios": "1.8.4",
     "bowser": "2.11.0",
@@ -67,9 +67,9 @@
     "markdown-it-emoji": "3.0.0",
     "moment": "2.30.1",
     "monaco-editor": "0.52.2",
-    "mqtt": "5.10.4",
-    "npm": "11.2.0",
-    "parcel": "2.14.2",
+    "mqtt": "5.11.0",
+    "npm": "11.3.0",
+    "parcel": "2.14.4",
     "process": "0.11.10",
     "promise-timeout": "1.3.0",
     "punycode": "1.4.1",
@@ -78,21 +78,21 @@
     "react-color": "2.19.3",
     "react-dom": "18.3.1",
     "react-redux": "9.2.0",
-    "react-router": "7.4.0",
+    "react-router": "7.5.0",
     "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.174.0",
-    "typescript": "5.8.2",
+    "typescript": "5.8.3",
     "url": "0.11.4"
   },
   "devDependencies": {
     "@react-three/eslint-plugin": "0.1.2",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/enzyme": "3.10.12",
     "@types/jest": "29.5.14",
@@ -107,7 +107,7 @@
     "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
@@ -121,9 +121,9 @@
     "raf": "3.4.1",
     "react-addons-test-utils": "15.6.2",
     "react-test-renderer": "18.3.1",
-    "sass": "1.86.0",
+    "sass": "1.86.3",
     "sass-lint": "1.13.1",
-    "ts-jest": "29.3.0",
+    "ts-jest": "29.3.1",
     "tslint": "5.20.1"
   }
 }
diff --git a/spec/controllers/api/sensor_readings/controller_spec.rb b/spec/controllers/api/sensor_readings/controller_spec.rb
index 7f544917c1..af51c0400e 100644
--- a/spec/controllers/api/sensor_readings/controller_spec.rb
+++ b/spec/controllers/api/sensor_readings/controller_spec.rb
@@ -106,8 +106,8 @@
       expect(response.status).to eq(401)
     end
 
-    it "cleans up excess logs" do
-      const_reassign(Api::SensorReadingsController, :LIMIT, 5)
+    it "cleans up excess sensor readings" do
+      const_reassign(Device, :DEFAULT_MAX_SENSOR_READINGS, 5)
       sign_in user
       10.times do |n|
         FactoryBot.create(:sensor_reading,
@@ -116,9 +116,10 @@
       end
       expect(user.device.sensor_readings.count).to eq(10)
       get :index, params: { format: :json }
+      Delayed::Worker.new.work_off
       expect(json.count).to eq(5)
       expect(user.device.sensor_readings.count).to eq(5)
-      const_reassign(Api::SensorReadingsController, :LIMIT, 5000)
+      const_reassign(Device, :DEFAULT_MAX_SENSOR_READINGS, 2500)
       first = (json.first[:created_at])
       last = (json.last[:created_at])
       expect(first).to be > last