diff --git a/frontend-impl.js b/frontend-impl.js
new file mode 100644
index 0000000..2ae5726
--- /dev/null
+++ b/frontend-impl.js
@@ -0,0 +1,48 @@
+const React = require("preact");
+const {useState} = require('preact/hooks');
+
+export const UnitsApp = () => {
+  const [hist, setHist] = useState([]);
+  const [query, setQuery] = useState("");
+  const [to, setTo] = useState("");
+
+  function doConversion(e) {
+    e.preventDefault();
+    console.log("conversion");
+    setQuery('');
+    setTo('');
+    
+    convert(query, to).then(res => {
+      setHist([...hist, query + " -> " + to + " " + res]);
+    })
+  }
+
+  return (
+    <div>
+      <form class="query-row" onSubmit={doConversion}>
+        <input
+          type="text"
+          id="query"
+          value={query}
+          placeholder="From"
+          onChange={(val) => setQuery(val.target.value)}
+        ></input>
+        <input
+          type="text"
+          id="to"
+          value={to}
+          placeholder="To"
+          onChange={(val) => setTo(val.target.value)}
+        ></input>
+          
+        <input type="submit"></input>
+      </form>
+
+      <ul>
+        {hist.map((entry) => (
+          <li>{entry}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};