diff --git a/src/main/resources/static/css/games.css b/src/main/resources/static/css/games.css
index 036e049..f01618c 100644
--- a/src/main/resources/static/css/games.css
+++ b/src/main/resources/static/css/games.css
@@ -16,7 +16,7 @@
 
 .block {
     display: block;
-    border-bottom: 2px solid rgba(0,0,0,.1);
+    border-bottom: 2px solid var(--dive-shadow-second);
     border-radius: 5px;
     padding-top: .1px;
     padding-bottom: .1px;
@@ -55,7 +55,7 @@
 }
 
 .text-glowing {
-  color: rgba(55, 188, 157, 1) !important;
+  color: var(--dive-primary-color) !important;
 }
 
 .mission-one {
@@ -78,7 +78,7 @@
 }
 
 .progress-bar {
-    background-color: rgba(55, 188, 157, 1) !important;
+    background-color: var(--dive-primary-color) !important;
 }
 
 .mission-block, .mission-target {
@@ -284,6 +284,8 @@
 #waiting_list > .title > a {
     position: absolute;
     right: 0;
+    background-color: var(--dive-grass-green);
+    border-color: var(--dive-grass-green) !important;
 }
 
 body.modal-open > :not(.modal) {
@@ -314,13 +316,13 @@ body.modal-open > :not(.modal) {
     padding: 20px 0;
     width: 375px;
     background-color: var(--dive-white);
-    box-shadow: 0 0 25px rgba(0,0,0,.1);
+    box-shadow: 0 0 25px var(--dive-shadow-second);
 }
 
 .game-creation-modal-body {
     display: flex;
     position: relative;
-    box-shadow: 0 0 100px rgba(0,0,0,.333);
+    box-shadow: 0 0 100px var(--dive-shadow-color);
     border-radius: 5px;
     width: 620px;
     text-align: left;
diff --git a/src/main/resources/static/css/index.css b/src/main/resources/static/css/index.css
index 571a319..be3c75f 100644
--- a/src/main/resources/static/css/index.css
+++ b/src/main/resources/static/css/index.css
@@ -16,9 +16,9 @@
 }
 
 .btn-primary {
-    background-color: rgba(255,255,255,.85);
+    background-color: var(--dive-white-trans);
     color: var(--dive-primary-color);
-    border-color: rgba(255,255,255,.85);
+    border-color: var(--dive-white-trans);
 }
 
 .btn-primary:hover {
@@ -28,8 +28,8 @@
 }
 
 .btn-outline-primary:hover {
-    background-color: rgba(255, 255, 255,0.25);
-    border-color: rgba(255, 255, 255,0.25);
+    background-color: var(--dive-white-trans-second);
+    border-color: var(--dive-white-trans-second);
 }
 
 .page-title {
@@ -63,8 +63,8 @@
 
 .main-button:hover {
     color: var(--dive-dark-grey-second);
-    background-color: rgba(255, 255, 255, 0.85);
-    border-color: rgba(255, 255, 255, 0.85);
+    background-color: var(--dive-white-trans);
+    border-color: var(--dive-white-trans);
     font: 600 1.5rem Montserrat;
     padding: 0 0.9em;
     height: 2.1em;
@@ -87,7 +87,7 @@
 }
 
 .billboard-img {
-    box-shadow: 0 0 100px rgba(0,0,0,.33);
+    box-shadow: 0 0 100px var(--dive-shadow-color);
     width: 900px;
     overflow: hidden;
     pointer-events: none;
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 5347519..27b9573 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -11,8 +11,31 @@
     --dive-weird-blue-grey: #656d78;
     --dive-light-grey-second: #e9eaec;
     --dive-light-grey-third: #f7f7f7;
-    --dive-grass-green: #8cc152;
-    --dive-primary-color: #37bc9d;
+    --dive-grass-green: #FE7F2D;
+    --dive-primary-color: #55D6BE;
+    --dive-primary-color-dark: #194039;
+    --dive-primary-color-trans: #55D6BEEE;
+    --dive-shadow-color: rgba(0,0,0,.33);
+    --dive-shadow-second: rgba(0,0,0,.1);
+    --dive-white-trans: rgba(255, 255, 255, 0.85);
+    --dive-white-trans-second: rgba(255, 255, 255,0.25);
+}
+
+.navbar-brand-custom-gradient {
+    font-weight: 600;
+    background: linear-gradient(90deg, var(--dive-primary-color-dark) 0%, var(--dive-primary-color) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.gradient-span {
+    background: linear-gradient(90deg, var(--dive-primary-color-dark) 0%, var(--dive-primary-color) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.container-secondary {
+    background-color: var(--dive-grey);
 }
 
 .navbar {
@@ -25,6 +48,10 @@ html, body {
     font-size: 0.875rem;
 }
 
+.firefox {
+    font-size: 1.0rem;
+}
+
 footer {
   bottom: 0;
   width: 100%;
@@ -48,7 +75,7 @@ footer {
 .btn-primary {
     background-color: var(--dive-primary-color);
     color: var(--dive-white);
-    border-color: var(--dive-primary-color);
+    border-color: var(--dive-primary-color) !important;
     --bs-btn-active-bg: var(--dive-primary-color);
 }
 
@@ -62,18 +89,30 @@ footer {
 .btn-outline-primary:active {
     background-color: var(--dive-primary-color);
     color: var(--dive-white);
-    border-color: var(--dive-primary-color);
+    border-color: var(--dive-primary-color) !important;
     --bs-btn-active-bg: var(--dive-primary-color);
 }
 
 .btn-primary:hover {
-  background-color: rgba(55,188,157,0.85);
-  border-color: rgba(55,188,157,0.85);
+  background-color: var(--dive-primary-color-trans);
+  border-color: var(--dive-primary-color-trans);
+}
+
+.dropdown-toggle::after {
+    border-top: 0px solid;
+}
+
+.dropdown-item:active {
+    background-color: var(--dive-primary-color) !important;
+}
+
+.dropdown-item:hover, .dropdown-item:focus {
+    background-color: var(--dive-light-grey);
 }
 
 .btn-outline-primary:hover {
-  background-color: rgba(55,188,157,0.85);
-  border-color: rgba(55,188,157,0.85);
+  background-color: var(--dive-primary-color-trans);
+  border-color: var(--dive-primary-color-trans);
 }
 
 .navbar-btn {
diff --git a/src/main/resources/static/javascript/games.js b/src/main/resources/static/javascript/games.js
index 28108c8..6bd744f 100644
--- a/src/main/resources/static/javascript/games.js
+++ b/src/main/resources/static/javascript/games.js
@@ -15,6 +15,10 @@ function createRoom() {
     });
 }
 
+function sendInviteMessage(uid) {
+    alert(uid);
+}
+
 function successPolling(data) {
     console.log(data);
     let onlineCount = data.onlineCount;
@@ -68,7 +72,7 @@ function successPolling(data) {
     for( let i = 0; i < friends.length; i++ ) {
         let friend = friends[i];
         if( friend.action == 'ADD' ) {
-            let fr_html = '<div class="friend-one" data-friend-id="'+friend.id+'"><a href="/profile/'+friend.id+'" class="navbar-btn"><img class="navbar-profile-img" src="https://avatars.githubusercontent.com/u/102559365?v=4"></a><span>'+friend.username+'</span><ion-icon name="person-add-outline" role="img" class="md hydrated"></ion-icon></div>';
+            let fr_html = '<div class="friend-one" data-friend-id="'+friend.id+'"><a href="/profile/'+friend.id+'" class="navbar-btn"><img class="navbar-profile-img" src="https://avatars.githubusercontent.com/u/102559365?v=4"></a><span>'+friend.username+'</span><ion-icon onClick="sendInviteMessage('+friend.id+')" name="person-add-outline" role="img" class="md hydrated"></ion-icon></div>';
             $(".friends-online-list").append(fr_html);
         } else if( friend.action == 'REMOVE' ) {
             $(".friend-one").each(function() {
@@ -78,9 +82,18 @@ function successPolling(data) {
             });
         }
     }
-    var clh = $('#chat_list').find(".chat-history");
-    clh.scrollTop(clh.prop("scrollHeight"));
-    $("#chat_list").find(".chat-history").css("display", "");
+
+    if( friends.length > 0 ) {
+        $(".friends-online-list").css("display", "");
+        $("#friends_list").find(".block-content").css("display", "none");
+    }
+
+    if( messages.length > 0 ) {
+        var clh = $('#chat_list').find(".chat-history");
+        clh.scrollTop(clh.prop("scrollHeight"));
+        $("#chat_list").find(".chat-history").css("display", "");
+    }
+
     $("#chat_list").find(".message-input").css("display", "");
     $("#chat_list").find(".block-content").css("display", "none");
 }
@@ -213,4 +226,8 @@ $(document).ready(function() {
 
     $(".rooms-list").css("display", "");
     $("#waiting_list").find(".block-content").css("display", "none");
+
+    var clh = $('#chat_list').find(".chat-history");
+    clh.scrollTop(clh.prop("scrollHeight"));
+    $("#chat_list").find(".chat-history").css("display", "");
 });
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/essentials.html b/src/main/resources/templates/fragments/essentials.html
index 08c6b86..9f3dbc5 100644
--- a/src/main/resources/templates/fragments/essentials.html
+++ b/src/main/resources/templates/fragments/essentials.html
@@ -5,5 +5,12 @@
     <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
+        $(document).ready(function() {
+            if (navigator.userAgent.search("Firefox") > -1) {
+                $('html').addClass('firefox');
+                $('body').addClass('firefox');
+            }
+        });
     </script>
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index b629e81..4bfb625 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -3,7 +3,7 @@
         <div class="container-fluid">
             <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                 <a class="navbar-brand navbar-brand-custom navbar-brand-custom-plain" style="display: none" href="/">Nosedive</a>
-                <a class="navbar-brand navbar-brand-custom navbar-brand-custom-gradient" href="/" style="font-weight: 600; background: linear-gradient(90deg, hsl(166, 55%, 30%) 0%, rgba(55,188,157,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Nosedive</a>
+                <a class="navbar-brand navbar-brand-custom navbar-brand-custom-gradient" href="/">Nosedive</a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index acc16c7..3cdaa83 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -11,7 +11,7 @@
             <div class="page-title-small">Reinvented legendary game online.</div>
             <div class="page-main-button"><a class="btn btn-primary main-button" href="/games">Start game</a></div>
             <div class="billboard-container"><img src="//m1.dogecdn.wtf/website/index/screenshot.png" class="rounded billboard-img"></div> <!-- 900 -->
-            <div class="page-title-second">Why will you like <span style="background: linear-gradient(90deg, hsl(166, 55%, 30%) 0%, rgba(55,188,157,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Nosedive</span>?</div>
+            <div class="page-title-second">Why will you like <span class="gradient-span">Nosedive</span>?</div>
             <div class="container text-center">
                 <div class="row">
                     <div class="col">
@@ -43,7 +43,7 @@
                 </div>
             </div>
         </div>
-        <div class="container-fluid" style="min-height: 750px; background-color: #f4f4f5">
+        <div class="container-fluid container-secondary" style="min-height: 750px;">
 
         </div>
         <th:block th:insert="~{fragments/footer}"></th:block>