diff --git a/web/account/qr-code-login.css b/web/account/qr-code-login.css
new file mode 100644
index 000000000..0b7895fc5
--- /dev/null
+++ b/web/account/qr-code-login.css
@@ -0,0 +1,45 @@
+div.qrContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--bg);
+}
+
+div.title {
+  padding-top: 90px;
+  color: var(--label-default-color);
+  font-size: var(--xxxl-font-32);
+  font-weight: var(--bold);
+}
+
+div.scanInstructions {
+  color: var(--label-default-color);
+  font-size: var(--l-font-18);
+  font-weight: var(--semi-bold);
+  padding: 40px;
+}
+
+div.instructionsContainer {
+  margin-top: 50px;
+  width: 350px;
+  border: solid var(--help-color) 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+div.instructionsTitle {
+  color: var(--help-color);
+  font-weight: var(--bold);
+  margin: 15px 0;
+}
+
+div.instructionsStep {
+  color: var(--label-default-color);
+}
+
+div.instructionsStep:last-of-type {
+  margin-bottom: 20px;
+}
diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js
index 81d5a60b0..df75c1f4a 100644
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -1,9 +1,37 @@
 // @flow
 
+import { QRCodeSVG } from 'qrcode.react';
 import * as React from 'react';
 
+import css from './qr-code-login.css';
+
 function QrCodeLogin(): React.Node {
-  return <div />;
+  return (
+    <div className={css.qrContainer}>
+      <div className={css.title}>Log in to Comm</div>
+      <div className={css.scanInstructions}>
+        Open the Comm app on your phone and scan the QR code below
+      </div>
+      <QRCodeSVG
+        value="https://comm.app/"
+        size={300}
+        marginSize={4}
+        level="L"
+      />
+      <div className={css.instructionsContainer}>
+        <div className={css.instructionsTitle}>How to find the scanner:</div>
+        <div className={css.instructionsStep}>
+          Go to <strong>Profile</strong>
+        </div>
+        <div className={css.instructionsStep}>
+          Select <strong>Linked devices</strong>
+        </div>
+        <div className={css.instructionsStep}>
+          Click <strong>Add</strong> on the top right
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default QrCodeLogin;