diff --git a/src/assets/stylesheets/link.scss b/src/assets/stylesheets/link.scss
index 28f20656879046d50958726f13e648a49ff1d9ff..3dd21bf0d04a13f957bcd3790acd0e9e17ba72ae 100644
--- a/src/assets/stylesheets/link.scss
+++ b/src/assets/stylesheets/link.scss
@@ -114,8 +114,29 @@ a {
   text-align: center;
   font-size: 3.0em;
   color: white;
+  display: flex;
+  justify-content: center;
 }
 
 :local(.digit) {
   margin: 8px;
 }
+
+:local(.digit-input) {
+  outline-style: none;
+  appearance:textfield;
+  -moz-appearance:textfield;
+  -webkit-appearance:textfield;
+  background: transparent;
+  color: white;
+  margin: 0;
+  font-size: 64pt;
+  border: 0;
+  width: 225px;
+  letter-spacing: 0.08em;
+  text-align: center;
+}
+
+:local(.digit-input::placeholder) {
+  letter-spacing: 0;
+}
diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js
index 92126c32bcc7e5cafe6b767a38cd89cf388dc7c2..30e3d1e5bf2e6fb0dc9cb99580c8fb05f1c59751 100644
--- a/src/react-components/link-root.js
+++ b/src/react-components/link-root.js
@@ -19,16 +19,16 @@ class LinkRoot extends Component {
   };
 
   state = {
-    enteredDigits: [],
+    enteredDigits: "",
     failedAtLeastOnce: false
   };
 
   addDigit = digit => {
     if (this.state.enteredDigits.length >= MAX_DIGITS) return;
-    const newDigits = [...this.state.enteredDigits, digit];
+    const newDigits = `${this.state.enteredDigits}${digit}`;
 
     if (newDigits.length === MAX_DIGITS) {
-      this.attemptLink(newDigits.join(""));
+      this.attemptLink(newDigits);
     }
 
     this.setState({ enteredDigits: newDigits });
@@ -36,7 +36,7 @@ class LinkRoot extends Component {
 
   removeDigit = () => {
     if (this.state.enteredDigits.length === 0) return;
-    this.setState({ enteredDigits: [...this.state.enteredDigits.slice(0, -1)] });
+    this.setState({ enteredDigits: this.state.enteredDigits.substring(0, -1) });
   };
 
   attemptLink = code => {
@@ -58,7 +58,7 @@ class LinkRoot extends Component {
       })
       .catch(e => {
         console.error(e);
-        this.setState({ failedAtLeastOnce: true, enteredDigits: [] });
+        this.setState({ failedAtLeastOnce: true, enteredDigits: "" });
       });
   };
 
@@ -82,11 +82,15 @@ class LinkRoot extends Component {
             </div>
 
             <div className={styles.enteredDigits}>
-              {[0, 1, 2, 3].map(d => (
-                <span className={styles.digit} key={`digit_${d}`}>
-                  {this.state.enteredDigits.length > d ? this.state.enteredDigits[d] : "-"}
-                </span>
-              ))}
+              <input
+                className={styles.digitInput}
+                type="number"
+                value={this.state.enteredDigits}
+                onChange={ev => {
+                  this.setState({ enteredDigits: ev.target.value });
+                }}
+                placeholder="- - - -"
+              />
             </div>
 
             <div className={styles.keypad}>