diff --git a/extension/options/index.js b/extension/options/index.js
new file mode 100644
index 0000000..f7ccf4f
--- /dev/null
+++ b/extension/options/index.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const browser = require("webextension-polyfill");
+
+class UrbitLoginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setStateFromBrowserStorage = this.setStateFromBrowserStorage.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+
+    this.state = { urbitId: "", urbitCode: "", savedUrbitId: "", savedUrbitCode: "" };
+    this.setStateFromBrowserStorage();
+  }
+
+  setStateFromBrowserStorage() {
+    browser.storage.sync.get("credentials")
+      .then((result) => {
+        if (result.credentials && result.credentials.urbitId && result.credentials.urbitCode) {
+          const urbitId = result.credentials.urbitId;
+          const urbitCode = result.credentials.urbitCode;
+          this.setState({urbitId, urbitCode, savedUrbitId: urbitId, savedUrbitCode: urbitCode});
+        }
+      });
+  }
+
+  handleChange(evt) {
+    const name = evt.target.name
+    const value = evt.target.value;
+
+    if (name === "urbitId") {
+      this.setState({urbitId: value});
+    } else if (name === "urbitCode") {
+      this.setState({urbitCode: value});
+    } else if (name === "resetButton") {
+      this.setState({urbitId: this.state.savedUrbitId, urbitCode: this.state.savedUrbitCode});
+    } else if (name === "clearButton") {
+      browser.storage.sync.remove("credentials");
+      this.setState({ urbitId: "", urbitCode: "", savedUrbitId: "", savedUrbitCode: "" });
+    }
+  }
+
+  handleSave() {
+    const urbitId = this.state.urbitId;
+    const urbitCode = this.state.urbitCode;
+    browser.storage.sync.set({credentials: {urbitId, urbitCode}});
+    this.setStateFromBrowserStorage();
+  }
+
+  render() {
+    const changed = !(this.state.urbitId === this.state.savedUrbitId && this.state.urbitCode === this.state.savedUrbitCode);
+    const style = { backgroundColor: changed ? "yellow" : "inherit" };
+    return (
+      <div style={style}>
+        <form>
+          <label>
+            Urbit ID: <pre>~</pre>
+            <input type="text" name="urbitId" value={this.state.urbitId} onChange={this.handleChange} />
+          </label>
+          <br/>
+          <label>
+            Urbit code:
+            <input type="password" name="urbitCode" value={this.state.urbitCode} onChange={this.handleChange} />
+          </label>
+          <button type="button" name="saveButton" onClick={this.handleSave}>Save</button>
+          <button type="button" name="resetButton" onClick={this.handleChange}>Reset</button>
+          <br/>
+          <button type="button" name="clearButton" onClick={this.handleChange}>Remove credentials</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+const Main = () => {
+    return (
+      <>
+        <h1>Urbit credentials</h1>
+        <UrbitLoginForm />
+      </>
+    );
+};
+
+ReactDOM.render(
+    <Main />,
+document.querySelectorAll("main")[0]);
diff --git a/extension/options/options.html b/extension/options/options.html
index 1c83aba..eb334fb 100644
--- a/extension/options/options.html
+++ b/extension/options/options.html
@@ -6,17 +6,7 @@
   </head>
 
   <body>
-    <form>
-      <label>Urbit ID</label>
-      <input type="text" id="urbitId"/>
-      <br/>
-
-      <label>Code</label>
-      <input id="urbitCode" type="password" id="urbit_code"/>
-      <br/>
-      <button id="saveButton">Save</button>
-      <button id="clearButton">Clear</button>
-    </form>
-    <script src="options.js"></script>
+    <main></main>
+    <script src="index.js"></script>
   </body>
 </html>
diff --git a/extension/options/options.js b/extension/options/options.js
deleted file mode 100644
index 47795d0..0000000
--- a/extension/options/options.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const browser = require("webextension-polyfill");
-
-const urbitIdSelector = document.querySelector("#urbitId");
-const urbitCodeSelector = document.querySelector("#urbitCode");
-
-document.addEventListener('DOMContentLoaded', () => {
-  browser.storage.sync.get("credentials")
-    .then((result) => {
-      if (result.credentials && result.credentials.urbitId && result.credentials.urbitCode) {
-        urbitIdSelector.value = result.credentials.urbitId;
-        urbitCodeSelector.value = result.credentials.urbitCode;
-      } else  {
-        urbitIdSelector.value = "";
-        urbitCodeSelector.value = "";
-      }
-    });
-});
-
-document.querySelector("#saveButton").addEventListener("click", () => {
-  const urbitId = urbitIdSelector.value;
-  const urbitCode = urbitCodeSelector.value;
-  browser.storage.sync.set({credentials: {urbitId, urbitCode}});
-});
-
-document.querySelector("#clearButton").addEventListener("click", () => {
-  browser.storage.sync.remove("credentials");
-});
-
