diff --git a/src/views/join/join.jsx b/src/views/join/join.jsx
index 60379fd86..a62e7d449 100644
--- a/src/views/join/join.jsx
+++ b/src/views/join/join.jsx
@@ -5,8 +5,21 @@ const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx'
 // Require this even though we don't use it because, without it, webpack runs out of memory...
 const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
 
+require('./join.scss');
 const Register = () => (
     <ErrorBoundary>
+        <div className="join">
+            <a
+                aria-label="Scratch"
+                href="/"
+            >
+                <img
+                    className="logo"
+                    src="/images/logo_sm.png"
+                />
+            </a>
+
+        </div>
         <JoinModal
             isOpen
             key="scratch3registration"
diff --git a/src/views/join/join.scss b/src/views/join/join.scss
new file mode 100644
index 000000000..9aefc03fa
--- /dev/null
+++ b/src/views/join/join.scss
@@ -0,0 +1,29 @@
+@import "../../frameless";
+
+.join {
+    position: absolute;
+    z-index: 1000;
+    top: 12px;
+    left: 12px;
+    left: calc(25% - 76px);
+
+    .logo {
+      width: 76px;
+  }
+}
+
+@media #{$small} {
+    .join {
+        left: calc(50% - 38px);
+    }
+}
+@media #{$medium} {
+    .join {
+        left: calc(50% - 38px);
+    }
+}
+@media #{$intermediate} {
+    .join {
+        left: calc(50% - 38px);
+    }
+}