diff --git a/app/static/js/app.js b/app/static/js/app.js
index 84667befc..e8e54ef26 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -327,6 +327,13 @@ menuBar.addEventListener("wifi-dialog-requested", () => {
   document.getElementById("wifi-overlay").show();
   document.getElementById("wifi-dialog").initialize();
 });
+menuBar.addEventListener("network-status-dialog-requested", () => {
+  // Note: we have to call `initialize()` after `show()`, to ensure that the
+  // dialog is able to focus the main input element.
+  // See https://github.com/tiny-pilot/tinypilot/issues/1770
+  document.getElementById("network-status-overlay").show();
+  document.getElementById("network-status-dialog").initialize();
+});
 menuBar.addEventListener("fullscreen-requested", () => {
   document.getElementById("remote-screen").fullscreen = true;
 });
diff --git a/app/templates/custom-elements/menu-bar.html b/app/templates/custom-elements/menu-bar.html
index 85d350089..e2809f087 100644
--- a/app/templates/custom-elements/menu-bar.html
+++ b/app/templates/custom-elements/menu-bar.html
@@ -239,6 +239,13 @@
                 >Static IP</a
               >
             </li>
+            <li class="item" role="presentation">
+              <a
+                data-onclick-event="network-status-dialog-requested"
+                role="menuitem"
+                >Status</a
+              >
+            </li>
           </ul>
         </li>
         <li class="item" role="presentation">
diff --git a/app/templates/custom-elements/network-status-dialog.html b/app/templates/custom-elements/network-status-dialog.html
new file mode 100644
index 000000000..094b83e89
--- /dev/null
+++ b/app/templates/custom-elements/network-status-dialog.html
@@ -0,0 +1,143 @@
+<template id="network-status-dialog-template">
+  <style>
+    @import "css/style.css";
+    @import "css/button.css";
+
+    #initializing,
+    #display {
+      display: none;
+    }
+
+    :host([state="initializing"]) #initializing,
+    :host([state="display"]) #display {
+      display: block;
+    }
+
+    .info-container {
+      margin-bottom: 1em;
+    }
+  </style>
+
+  <div id="initializing">
+    <h3>Determining Network Status</h3>
+    <div>
+      <progress-spinner></progress-spinner>
+    </div>
+  </div>
+
+  <div id="display">
+    <h3>Network Status</h3>
+    <div class="info-container">
+      <network-status-interface id="status-ethernet"></network-status-interface>
+      <network-status-interface id="status-wifi"></network-status-interface>
+    </div>
+    <div class="button-container">
+      <button id="close-button" type="button">Close</button>
+    </div>
+  </div>
+</template>
+
+<script type="module">
+  import {
+    DialogClosedEvent,
+    DialogCloseStateChangedEvent,
+    DialogFailedEvent,
+  } from "/js/events.js";
+  import { getNetworkStatus } from "/js/controllers.js";
+
+  (function () {
+    const template = document.querySelector("#network-status-dialog-template");
+
+    customElements.define(
+      "network-status-dialog",
+      class extends HTMLElement {
+        _states = {
+          INITIALIZING: "initializing",
+          DISPLAY: "display",
+        };
+        _statesWithoutDialogClose = new Set([this._states.INITIALIZING]);
+
+        connectedCallback() {
+          this.attachShadow({ mode: "open" }).appendChild(
+            template.content.cloneNode(true)
+          );
+          this._elements = {
+            statusEthernet: this.shadowRoot.querySelector("#status-ethernet"),
+            statusWifi: this.shadowRoot.querySelector("#status-wifi"),
+          };
+          this._shouldAutoUpdate = false;
+          this._updateTicker = null;
+          this.shadowRoot
+            .querySelector("#close-button")
+            .addEventListener("click", () => {
+              this.dispatchEvent(new DialogClosedEvent());
+            });
+
+          // For all events that terminate the dialog, make sure to stop the
+          // update ticker, otherwise the status requests would continue to be
+          // fired even when the dialog is not visible anymore.
+          ["dialog-closed", "dialog-failed"].forEach((evtName) => {
+            this.addEventListener(evtName, () => {
+              this._shouldAutoUpdate = false;
+              clearTimeout(this._updateTicker);
+            });
+          });
+        }
+
+        get _state() {
+          return this.getAttribute("state");
+        }
+
+        set _state(newValue) {
+          this.setAttribute("state", newValue);
+          this.dispatchEvent(
+            new DialogCloseStateChangedEvent(
+              !this._statesWithoutDialogClose.has(newValue)
+            )
+          );
+        }
+
+        async initialize() {
+          this._state = this._states.INITIALIZING;
+          await this._update();
+          this._state = this._states.DISPLAY;
+          this._shouldAutoUpdate = true;
+          this._startUpdateLoop();
+        }
+
+        _startUpdateLoop() {
+          // The update loop is based on `setTimeout`, not `setInterval`,
+          // because the latter would continue to trigger even if the
+          // update function lags and happens to be slower than the interval.
+          // That would result in a lot of parallel, pending requests.
+          this._updateTicker = setTimeout(async () => {
+            await this._update();
+            if (this._shouldAutoUpdate) {
+              this._startUpdateLoop();
+            }
+          }, 2500);
+        }
+
+        async _update() {
+          let networkStatus;
+          try {
+            networkStatus = await getNetworkStatus();
+          } catch (error) {
+            this.dispatchEvent(
+              new DialogFailedEvent({
+                title: "Failed to Determine Network Status",
+                details: error,
+              })
+            );
+            return;
+          }
+          this._elements.statusEthernet.update(
+            "Ethernet",
+            networkStatus.ethernet
+          );
+          this._elements.statusWifi.update("Wi-Fi", networkStatus.wifi);
+        }
+      }
+    );
+  })();
+</script>
diff --git a/app/templates/custom-elements/network-status-interface.html b/app/templates/custom-elements/network-status-interface.html
new file mode 100644
index 000000000..eb1d46a6e
--- /dev/null
+++ b/app/templates/custom-elements/network-status-interface.html
@@ -0,0 +1,124 @@
+<template id="network-status-interface-template">
+  <style>
+    @import "css/style.css";
+
+    :host {
+      display: flex;
+      margin-bottom: 0.75em;
+    }
+
+    #name {
+      width: 39%;
+      text-align: right;
+      font-weight: bold;
+    }
+
+    #data {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      align-items: start;
+      margin-left: 1em;
+    }
+
+    #data div {
+      margin-bottom: 0.3em;
+    }
+
+    .connection-indicator {
+      display: flex;
+      align-items: center;
+    }
+
+    .status-dot {
+      vertical-align: middle;
+      height: 0.9em;
+      width: 0.9em;
+      margin-right: 0.5rem;
+      border-radius: 50%;
+      display: inline-block;
+    }
+
+    :host([is-connected=""]) .status-dot {
+      background-color: var(--brand-green-bright);
+    }
+
+    :host(:not([is-connected])) .status-dot {
+      background-color: var(--brand-red-bright);
+    }
+
+    .label-connected,
+    .label-disconnected {
+      display: none;
+    }
+
+    :host([is-connected=""]) .label-connected,
+    :host(:not([is-connected])) .label-disconnected {
+      display: inline;
+    }
+
+    #ip-address,
+    #mac-address {
+      margin-left: 0.3em;
+    }
+  </style>
+
+  <div id="name"><!-- Filled programmatically --></div>
+  <div id="data">
+    <div class="connection-indicator">
+      <span class="status-dot status-dot-connected"></span>
+      <span class="label-connected">Connected</span>
+      <span class="label-disconnected">Disconnected</span>
+    </div>
+    <div>
+      IP Address:
+      <span id="ip-address" class="monospace"
+        ><!-- Filled programmatically --></span
+      >
+    </div>
+    <div>
+      MAC Address:
+      <span id="mac-address" class="monospace"
+        ><!-- Filled programmatically --></span
+      >
+    </div>
+  </div>
+</template>
+
+<script type="module">
+  (function () {
+    const template = document.querySelector(
+      "#network-status-interface-template"
+    );
+
+    customElements.define(
+      "network-status-interface",
+      class extends HTMLElement {
+        connectedCallback() {
+          this.attachShadow({ mode: "open" }).appendChild(
+            template.content.cloneNode(true)
+          );
+          this._elements = {
+            name: this.shadowRoot.querySelector("#name"),
+            ipAddress: this.shadowRoot.querySelector("#ip-address"),
+            macAddress: this.shadowRoot.querySelector("#mac-address"),
+          };
+        }
+
+        /**
+         * @param {string} name - The display name of the interface
+         * @param {Object} status
+         * @param {boolean} status.isConnected
+         * @param {string} [status.ipAddress]
+         * @param {string} [status.macAddress]
+         */
+        update(name, status) {
+          this._elements.name.innerText = name;
+          this.toggleAttribute("is-connected", status.isConnected);
+          this._elements.ipAddress.innerText = status.ipAddress || "n/a";
+          this._elements.macAddress.innerText = status.macAddress || "n/a";
+        }
+      }
+    );
+  })();
+</script>
diff --git a/app/templates/index.html b/app/templates/index.html
index fb655b7cf..90bead93f 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -79,6 +79,11 @@
       <overlay-panel id="wifi-overlay">
         <wifi-dialog id="wifi-dialog"></wifi-dialog>
       </overlay-panel>
+      <overlay-panel id="network-status-overlay">
+        <network-status-dialog
+          id="network-status-dialog"
+        ></network-status-dialog>
+      </overlay-panel>
     </div>
     <script src="/third-party/socket.io/4.7.1/socket.io.min.js"></script>
     <script type="module" src="/js/app.js"></script>