diff --git a/web/account/qr-code-login.css b/web/account/qr-code-login.css
new file mode 100644
--- /dev/null
+++ b/web/account/qr-code-login.css
@@ -0,0 +1,40 @@
+div.qrContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--qr-code-login-background-color);
+}
+
+h1.title {
+  padding-top: 90px;
+  color: var(--qr-code-login-text-color);
+}
+
+h4.scanInstructions {
+  color: var(--qr-code-login-text-color);
+  padding: 40px;
+}
+
+div.instructionsContainer {
+  margin-top: 50px;
+  width: 350px;
+  border: solid var(--qr-code-login-instructions-color) 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+div.instructionsTitle {
+  color: var(--qr-code-login-instructions-color);
+  margin: 15px 0;
+}
+
+div.instructionsStep {
+  color: var(--qr-code-login-text-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
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -1,9 +1,39 @@
 // @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}>
+      <h1 className={css.title}>Log in to Comm</h1>
+      <h4 className={css.scanInstructions}>
+        Open the Comm app on your phone and scan the QR code below
+      </h4>
+      <QRCodeSVG
+        value="https://comm.app/"
+        size={300}
+        marginSize={4}
+        level="L"
+      />
+      <div className={css.instructionsContainer}>
+        <div className={css.instructionsTitle}>
+          <b>How to find the scanner:</b>
+        </div>
+        <div className={css.instructionsStep}>
+          Go to <b>Profile</b>
+        </div>
+        <div className={css.instructionsStep}>
+          Select <b>Linked devices</b>
+        </div>
+        <div className={css.instructionsStep}>
+          Click <b>Add</b> on the top right
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default QrCodeLogin;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -242,4 +242,7 @@
   --community-roles-text-color: var(--shades-white-100);
   --modal-separator: var(--shades-black-80);
   --create-roles-text-color: var(--shades-white-100);
+  --qr-code-login-text-color: var(--shades-white-90);
+  --qr-code-login-instructions-color: var(--shades-black-60);
+  --qr-code-login-background-color: var(--shades-black-100);
 }