diff --git a/src/js/tribe.js b/src/js/tribe.js
index 571f4b2c7..142a7a355 100644
--- a/src/js/tribe.js
+++ b/src/js/tribe.js
@@ -1,6 +1,9 @@
 let MP = {
   state: -1,
-  socket: io("localhost:3000", { autoConnect: false, reconnectionAttempts: 3 }),
+  socket: io("http://localhost:3000", {
+    autoConnect: false,
+    reconnectionAttempts: 3,
+  }),
   reconnectionAttempts: 0,
 };
 
@@ -282,6 +285,32 @@ function mp_testFinished(result) {
   MP.socket.emit("mp_room_test_finished", { result: result });
 }
 
+function showCountdown() {
+  $("#tribeCountdownWrapper").removeClass("hidden");
+}
+
+function hideCountdown() {
+  $("#tribeCountdownWrapper").addClass("hidden");
+}
+
+function updateCountdown(text) {
+  $("#tribeCountdownWrapper #tribeCountdown").text(text);
+}
+
+function fadeoutCountdown() {
+  $("#tribeCountdownWrapper")
+    .css("opacity", 1)
+    .animate(
+      {
+        opacity: 0,
+      },
+      1000,
+      () => {
+        $("#tribeCountdownWrapper").addClass("hidden").css("opacity", 1);
+      }
+    );
+}
+
 MP.socket.on("connect", (f) => {
   MP.state = 1;
   MP.reconnectionAttempts = 0;
@@ -426,20 +455,29 @@ MP.socket.on("mp_system_message", (data) => {
 MP.socket.on("mp_room_test_start", (data) => {
   // changePage('');
   // mp_testCountdown();
-  startTest();
-  Misc.showNotification("test starting");
+  // startTest();
+  setTimeout(() => {
+    if (!testActive) {
+      startTest();
+    }
+  }, 500);
+  // Misc.showNotification("test starting");
+  updateCountdown("Go");
+  fadeoutCountdown();
 });
 
 MP.socket.on("mp_room_test_countdown", (data) => {
-  Misc.showNotification(`countdown ${data.val}`);
+  updateCountdown(data.val);
+  // Misc.showNotification(`countdown ${data.val}`);
 });
 
 MP.socket.on("mp_room_test_init", (data) => {
   MP.room.testStats = {};
-  Math.seedrandom(data.seed);
+  seedrandom(data.seed);
   mp_refreshTestUserList();
   changePage("");
   restartTest(false, true, true);
+  showCountdown();
 });
 
 MP.socket.on("mp_room_state_update", (data) => {
@@ -447,6 +485,20 @@ MP.socket.on("mp_room_state_update", (data) => {
   console.log(`state changed to ${data.newState}`);
 });
 
+MP.socket.on("mp_room_user_test_progress_update", (data) => {
+  $(`.tribePlayers [socketId=${data.socketId}] .wpm`).text(data.stats.wpm);
+  $(`.tribePlayers [socketId=${data.socketId}] .acc`).text(
+    Math.floor(data.stats.acc) + "%"
+  );
+  $(`.tribePlayers [socketId=${data.socketId}] .bar`).animate(
+    {
+      width: data.stats.progress + "%",
+    },
+    1000,
+    "linear"
+  );
+});
+
 MP.socket.on("mp_room_test_progress_update", (data) => {
   if (data.length === 0) return;
   MP.room.testStats = data.stats;
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 3949136cc..8e11d31ee 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -2062,6 +2062,24 @@ key {
 .pageTest {
   position: relative;
 
+  #tribeCountdownWrapper {
+    width: 100%;
+    height: 0;
+    display: flex;
+    justify-content: center;
+    #tribeCountdown {
+      z-index: 999;
+      width: 7rem;
+      height: 5rem;
+      font-size: 3rem;
+      color: var(--bg-color);
+      background-color: var(--main-color);
+      border-radius: var(--roundness);
+      line-height: 5rem;
+      text-align: center;
+    }
+  }
+
   .ssWatermark {
     font-size: 1.25rem;
     color: var(--sub-color);
@@ -2069,47 +2087,46 @@ key {
     text-align: right;
   }
 
-  .tribePlayers{
+  .tribePlayers {
     // display: grid;
     // gap: 0.5rem;
     margin-bottom: 1rem;
-    .player{
-      .name{
+    .player {
+      .name {
         color: var(--sub-color);
       }
-      .progress{
+      .progress {
         width: 100%;
         padding: 0 1rem;
-        .barBg{
+        .barBg {
           width: 100%;
-          height: .25rem;
+          height: 0.25rem;
           background: rgba(0, 0, 0, 0.1);
           border-radius: var(--roundness);
-          .bar{
-            height: .25rem;
+          .bar {
+            height: 0.25rem;
             background: var(--sub-color);
             left: 0;
             border-radius: var(--roundness);
           }
         }
       }
-      .stats{
+      .stats {
         text-align: right;
         grid-template-columns: auto auto;
         color: var(--sub-color);
         display: flex;
         justify-content: flex-end;
         min-width: 90px;
-        .acc{
+        .acc {
           margin-left: 1rem;
         }
       }
     }
-    .player.me .barBg .bar{
+    .player.me .barBg .bar {
       background: var(--main-color);
     }
   }
-  
 }
 
 .pageLogin {
@@ -2611,7 +2628,7 @@ key {
   }
 }
 
-.pageTribe{
+.pageTribe {
   display: grid;
   gap: 1rem;
   .preloader {
@@ -2620,167 +2637,169 @@ key {
     display: grid;
     justify-items: center;
     gap: 1rem;
-    .text{
+    .text {
       font-size: 1rem;
       color: var(--sub-color);
     }
   }
-  .prelobby{
+  .prelobby {
     display: grid;
-    grid-template-areas: "welcome welcome"
-                         "mm priv";
+    grid-template-areas:
+      "welcome welcome"
+      "mm priv";
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
-    .welcome{
+    .welcome {
       font-size: 2rem;
       color: var(--text-color);
     }
-    .matchmaking{
+    .matchmaking {
       grid-area: mm;
       display: grid;
       gap: 1rem;
-      .title{
+      .title {
         color: var(--sub-color);
       }
-      .buttons{
+      .buttons {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 1rem;
-        .button{
+        .button {
           padding: 2rem 0;
         }
       }
     }
-    .privateRooms{
+    .privateRooms {
       grid-area: priv;
       display: grid;
       gap: 1rem;
-      .title{
+      .title {
         color: var(--sub-color);
       }
-      #createPrivateRoom{
+      #createPrivateRoom {
         padding: 2rem 0;
       }
     }
-    #joinByCode{
+    #joinByCode {
       display: grid;
       grid-auto-flow: column;
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
-      .button{
-        padding: .7rem;
+      .button {
+        padding: 0.7rem;
       }
-      input{
+      input {
         position: absolute;
         opacity: 0;
       }
-      .customInput{
+      .customInput {
         color: var(--sub-color);
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 1.5rem;
-        .byte{
-          transition: .125s;
-          &.focused{
+        .byte {
+          transition: 0.125s;
+          &.focused {
             color: var(--main-color);
           }
         }
       }
     }
   }
-  .lobby{
+  .lobby {
     display: grid;
-    grid-template-areas: "currentsettings lobbyButtons"
-                         "chat userlist"
-                         "inviteLink inviteLink";
+    grid-template-areas:
+      "currentsettings lobbyButtons"
+      "chat userlist"
+      "inviteLink inviteLink";
     gap: 2rem;
     grid-template-columns: 3fr 1fr;
-    .title{
+    .title {
       color: var(--sub-color);
     }
-    .lobbyButtons{
+    .lobbyButtons {
       grid-area: lobbyButtons;
       display: flex;
       flex-direction: column;
       gap: 1rem;
       justify-content: center;
-      .startTestButton{
+      .startTestButton {
         background: var(--main-color);
         color: var(--bg-color);
-        &:hover{
+        &:hover {
           background: var(--text-color);
         }
       }
     }
-    .currentSettings{
+    .currentSettings {
       grid-area: currentsettings;
-      .groups{
+      .groups {
         display: grid;
         // grid-auto-flow: column;
         justify-items: center;
         grid-template-columns: 1fr 1fr 1fr 1fr;
-        .group{
-          padding: .5rem;
+        .group {
+          padding: 0.5rem;
           color: var(--text-color);
-          .fas,.far{
-            margin-right: .5rem;
+          .fas,
+          .far {
+            margin-right: 0.5rem;
             color: var(--main-color);
           }
         }
       }
     }
-    .chat{
+    .chat {
       grid-area: chat;
       gap: 1rem;
-      .messages{
+      .messages {
         height: 200px;
         overflow-y: scroll;
-        .systemMessage{
+        .systemMessage {
           color: var(--sub-color);
         }
-        .message{
+        .message {
           display: flex;
-          gap: .5rem;
+          gap: 0.5rem;
           color: var(--text-color);
-          .author{
+          .author {
             color: var(--main-color);
           }
         }
       }
-      .input input{
+      .input input {
         width: 100%;
       }
     }
-    .inviteLink{
+    .inviteLink {
       grid-area: inviteLink;
       text-align: center;
       color: var(--sub-color);
-      .title{
+      .title {
         line-height: 1rem;
         font-size: 1rem;
       }
-      .text{
+      .text {
         font-size: 2rem;
         line-height: 2rem;
         color: var(--main-color);
         cursor: pointer;
       }
-      .link{
+      .link {
         font-size: 0.75rem;
         cursor: pointer;
       }
     }
-    .userlist{
+    .userlist {
       grid-area: userlist;
     }
   }
-
 }
 
 .pageAccount {
   display: grid;
-  gap: 1rem; 
+  gap: 1rem;
 
   .content {
     display: grid;
diff --git a/static/index.html b/static/index.html
index 0b09e9f0a..2dd7f6aa0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -851,6 +851,16 @@
                 <i class="fas fa-fw fa-crown"></i>
               </div>
             </div>
+            <div
+              class="icon-button"
+              tabindex="2"
+              href="/tribe"
+              onclick="this.blur();"
+            >
+              <div class="icon">
+                <i class="fas fa-satellite-dish"></i>
+              </div>
+            </div>
             <div
               class="icon-button view-about"
               tabindex="2"
@@ -1004,6 +1014,7 @@
                 Caps Lock
               </div>
               <div id="testModesNotice"></div>
+              <table class="tribePlayers hidden"></table>
               <div id="caret" class="default size15"></div>
               <div id="paceCaret" class="default size15 hidden"></div>
               <input id="wordsInput" class="" tabindex="0" autocomplete="off" />
@@ -1022,6 +1033,9 @@
               <div id="wordsWrapper">
                 <div id="words" class="size15"></div>
               </div>
+              <div id="tribeCountdownWrapper" class="hidden">
+                <div id="tribeCountdown">Go</div>
+              </div>
               <div class="keymap hidden">
                 <div class="row r1">
                   <div></div>
@@ -3536,6 +3550,102 @@
               </div>
             </div>
           </div>
+
+          <div class="page pageTribe hidden">
+            <div class="preloader">
+              <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+              <div class="text">Waiting for login</div>
+            </div>
+
+            <div class="prelobby hidden">
+              <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>
+                <div class="buttons">
+                  <div id="matchmake15" class="button">
+                    <i class="fas fa-clock"></i>
+                    Time 15
+                  </div>
+                  <div id="matchmake60" class="button">
+                    <i class="fas fa-clock"></i>
+                    Time 60
+                  </div>
+                  <div id="matchmakeQuote" class="button">
+                    <i class="fas fa-quote-right"></i>
+                    Quotes
+                  </div>
+                </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">
+                <div class="title">current settings</div>
+                <div class="groups"></div>
+              </div>
+              <div class="lobbyButtons">
+                <div class="button startTestButton">
+                  <i class="fas fa-keyboard"></i>
+                  Start test
+                </div>
+                <div class="button leaveRoomButton">
+                  <i class="fas fa-door-open"></i>
+                  Leave room
+                </div>
+              </div>
+              <div class="chat">
+                <div class="title">chat</div>
+                <div class="messages"></div>
+                <div class="input">
+                  <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 class="code">
+                  <div class="title">room code</div>
+                  <div class="text"></div>
+                </div>
+                <div class="link"></div>
+              </div>
+            </div>
+          </div>
         </div>
         <div id="bottom">
           <div id="commandLineMobileButton">
@@ -3610,6 +3720,16 @@
             </div>
           </div>
         </div>
+        <div
+          id="ad1"
+          class="hidden"
+          style="
+            display: flex;
+            justify-content: center;
+            width: 1px;
+            justify-self: center;
+          "
+        ></div>
       </div>
       <div id="ad3" class="hidden"></div>
     </div>
@@ -3632,5 +3752,6 @@
   <script src="js/jquery.cookie-1.4.1.min.js"></script>
   <script src="js/moment.min.js"></script>
   <script src="js/html2canvas.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
   <script src="js/monkeytype.js"></script>
 </html>