diff --git a/public/css/style.scss b/public/css/style.scss
index 704e4f239..b12400504 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -2303,6 +2303,62 @@ key {
       color: var(--sub-color);
     }
   }
+  .prelobby{
+    display: grid;
+    grid-template-areas: "welcome welcome"
+                         "mm priv";
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    .welcome{
+      font-size: 2rem;
+      color: var(--text-color);
+    }
+    .matchmaking{
+      grid-area: mm;
+      display: grid;
+      gap: 1rem;
+      .title{
+        color: var(--sub-color);
+      }
+    }
+    .privateRooms{
+      grid-area: priv;
+      display: grid;
+      gap: 1rem;
+      .title{
+        color: var(--sub-color);
+      }
+      #createPrivateRoom{
+        padding: 2rem 0;
+      }
+    }
+    #joinByCode{
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      .button{
+        padding: .7rem;
+      }
+      input{
+        position: absolute;
+        opacity: 0;
+      }
+      .customInput{
+        color: var(--sub-color);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.5rem;
+        .byte{
+          transition: .125s;
+          &.focused{
+            color: var(--main-color);
+          }
+        }
+      }
+    }
+  }
   .lobby{
     display: grid;
     grid-template-areas: "currentsettings lobbyButtons"
@@ -2359,6 +2415,20 @@ key {
       grid-area: inviteLink;
       text-align: center;
       color: var(--sub-color);
+      .title{
+        line-height: 1rem;
+        font-size: 1rem;
+      }
+      .text{
+        font-size: 2rem;
+        line-height: 2rem;
+        color: var(--main-color);
+        cursor: pointer;
+      }
+      .link{
+        font-size: 0.75rem;
+        cursor: pointer;
+      }
     }
     .userlist{
       grid-area: userlist;
diff --git a/public/index.html b/public/index.html
index 6537e50ac..adeebf3cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3012,8 +3012,29 @@
             <div class="text">Waiting for login</div>
           </div>
           <div class="prelobby hidden">
-            <div id="joinRandomRoom" class="button">Join random room</div>
-            <div id="createPrivateRoom" class="button">Create room</div>
+            <div class="welcome">
+              Welcome to <span style="color: var(--main-color);">Tribe</span>.
+            </div>
+            <div class="matchmaking">
+              <!-- <div id="joinRandomRoom" class="button">Join random room</div> -->
+              <div class="title">matchmaking</div>
+              <span style="text-align:center;color: var(--sub-color);">Coming soon...</span>
+            </div>
+            <div class="privateRooms">
+              <div class="title">private rooms</div>
+              <div id="createPrivateRoom" class="button"><i class="fas fa-users"></i>Create room</div>
+              <div id="joinByCode">
+                <div class="customInput">
+                  <span class="byte">--</span>
+                  /
+                  <span class="byte">--</span>
+                  /
+                  <span class="byte">--</span>
+                </div>
+                <input type="text" placeholder="Code" maxlength="6" class=""><div class="button"><i class="fas fa-chevron-right"></i>Join room</div>
+              </div>
+            </div>
+           
           </div>
           <div class="lobby hidden">
             <div class="currentSettings">
@@ -3027,14 +3048,22 @@
               <div class="title">chat</div>
               <div class="messages"></div>
               <div class="input">
-                <input type="text">
+                <input type="text" placeholder="Send a message">
               </div>
             </div>
             <div class="userlist">
               <div class="title">users</div>
               <div class="list"></div>
             </div>
-            <div class="inviteLink"></div>
+            <div class="inviteLink">
+              <div class="code">
+                <div class="title">
+                  room code
+                </div>
+                <div class="text"></div>
+              </div>
+              <div class="link"></div>
+            </div>
           </div>
           
         </div>
diff --git a/public/js/tribe.js b/public/js/tribe.js
index 09cbd1218..2f90af20d 100644
--- a/public/js/tribe.js
+++ b/public/js/tribe.js
@@ -289,8 +289,9 @@ MP.socket.on('mp_room_joined', data => {
     //user is in prelobby and joined a room
     mp_applyRoomConfig(MP.room.config);
     mp_refreshConfig();
-    let link = "www.monkey-type.com/tribe" + MP.room.id.substring(4);
-    $(".pageTribe .lobby .inviteLink").text(link);
+    let link = "www.monkeytype.com/tribe" + MP.room.id.substring(4);
+    $(".pageTribe .lobby .inviteLink .code .text").text(MP.room.id.substring(5));
+    $(".pageTribe .lobby .inviteLink .link").text(link);
     swapElements($(".pageTribe .prelobby"), $(".pageTribe .lobby"), 250, () => {
       MP.state = 10;
       // $(".pageTribe .prelobby").addClass('hidden');
@@ -367,4 +368,71 @@ $(".pageTribe .lobby .chat .input input").keyup(e => {
       });
     $(".pageTribe .lobby .chat .input input").val('');
   }
+})
+
+$(".pageTribe .lobby .inviteLink .text").click(async e => {
+  try {
+    await navigator.clipboard.writeText(
+      $(".pageTribe .lobby .inviteLink .text").text()
+    );
+    showNotification("Code copied", 1000);
+  } catch (e) {
+    showNotification("Could not copy to clipboard: " + e, 5000);
+  }
+})
+
+$(".pageTribe .lobby .inviteLink .link").click(async e => {
+  try {
+    await navigator.clipboard.writeText(
+      $(".pageTribe .lobby .inviteLink .link").text()
+    );
+    showNotification("Link copied", 1000);
+  } catch (e) {
+    showNotification("Could not copy to clipboard: " + e, 5000);
+  }
+})
+
+$(".pageTribe .prelobby #joinByCode .customInput").click(e => {
+  $(".pageTribe .prelobby #joinByCode input").focus();
+})
+
+$(".pageTribe .prelobby #joinByCode input").focus(e => {
+  $(".pageTribe .prelobby #joinByCode .customInput .byte").addClass('focused');
+})
+
+$(".pageTribe .prelobby #joinByCode input").focusout(e => {
+  $(".pageTribe .prelobby #joinByCode .customInput .byte").removeClass('focused');
+})
+
+$(".pageTribe .prelobby #joinByCode .button").click(e => {
+  let code = $(".pageTribe .prelobby #joinByCode input").val();
+  if (code.length !== 6) {
+    showNotification("Code required", 2000);
+  } else {
+    console.log(code);
+  }
+})
+
+$(".pageTribe .prelobby #joinByCode input").keyup(e => {
+  setTimeout(t => {
+    // let t1 = "xx";
+    // let t2 = "xx";
+    // let t2 = "xx";
+    let v = $(".pageTribe .prelobby #joinByCode input").val();
+    // let text = `${v[0] == undefined ? 'x' : v[0]}`;
+    // let iv = 0;
+    // for (let i = 0; i < 8; i++){
+    //   text[i] = v[iv] == undefined ? 'x' : v[iv];
+    //   if(![2,5].includes(i)) iv++;
+    // }
+    let code = [];
+    for (let i = 0; i < 6; i++) {
+      let char = v[i] == undefined ? '-' : v[i];
+      code.push(char);
+    }
+    let text = code.join('');
+    $($(".pageTribe .prelobby #joinByCode .customInput .byte")[0]).text(text.substring(0,2));
+    $($(".pageTribe .prelobby #joinByCode .customInput .byte")[1]).text(text.substring(2,4));
+    $($(".pageTribe .prelobby #joinByCode .customInput .byte")[2]).text(text.substring(4,6));
+  },0)
 })
\ No newline at end of file
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index b769e732d..6e993da65 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -355,7 +355,7 @@ function setStopOnError(soe, nosave, mp = false) {
     config.confidenceMode = "off";
   }
   updateTestModesNotice();
-  mp_syncConfig();]
+  mp_syncConfig();
   if (!nosave) saveConfigToCookie();
 }