diff --git a/README.md b/README.md
index 66a06cda0..0fba1d183 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,6 @@ If you wish to support further development and feeling extra awesome, you can do
 1. Head to [the firebase console](https://console.firebase.google.com/u/0/) and make a new project (the project name doesnt really matter, but just name it `monkey-type`). You dont need to enable analytics for it.
 2. Install the [Firebase Command Line Interface](https://firebase.google.com/docs/cli), and use `firebase login` to log in to the same google account as you just used to make the project
 3. Make sure the project name inside `.firebaserc` is the same as what you made it in step 1
-4. Git clone the project and then run `firebase serve --only functions` to start a local server on post 5000. Use ctrl+c to stop it.
+4. Git clone the project and then run `firebase serve --only hosting` to start a local server on post 5000. Use ctrl+c to stop it.
 
 That should be it. If you run into any problems, let me know.
diff --git a/public/css/style.scss b/public/css/style.scss
index df4569306..2fbef8004 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -351,6 +351,21 @@ a:hover {
     transition: 0.25s;
     padding: 0.5rem;
     border-radius: var(--roundness);
+    &.discord{
+      position: relative;
+      &::after{ 
+        transition: .25s;
+        width: .5rem;
+        height: .5rem;
+        content: "";
+        position: absolute;
+        background: #da3333;
+        border-radius: 1rem;
+        top: .25rem;
+        right: .25rem;
+        border: 2px solid var(--bg-color);
+      }
+    }
     &:focus{
       background: var(--sub-color);
       color: var(--main-color);
@@ -360,6 +375,9 @@ a:hover {
   }
 }
 
+#top.focus #menu .button.discord::after{
+  background: transparent;
+}
 
 #menu .button .icon {
   display: grid;
diff --git a/public/index.html b/public/index.html
index e8e3a5406..d53afd6ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -82,6 +82,11 @@
             <i class="fas fa-fw fa-info"></i>
           </div>
         </div>
+          <a class="button discord" tabindex="2" href="https://discord.gg/xMYrWg6" onclick="this.blur();" target="_blank" style="text-decoration: none;">
+            <div class="icon">
+              <i class="fab fa-discord"></i>
+            </div>
+          </a>
         <div class="button" tabindex="2" href="/settings" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-cog"></i>
@@ -200,7 +205,7 @@
         </div>
         <div class="section">
           <h1>bug report or feature request</h1>
-          <p>If you encounter a bug, or have a feature request - send me a message on Reddit, create an issue on <a href="https://github.com/Miodec/monkey-type">GitHub</a> or send me a message using the command line <key>esc</key>.</p>
+          <p>If you encounter a bug, or have a feature request - join the <a href="https://discord.gg/xMYrWg6">Discord server</a>, send me a message on Reddit, create an issue on <a href="https://github.com/Miodec/monkey-type">GitHub</a> or send me a message using the command line <key>esc</key>.</p>
         </div>
         <div class="section">
           <h1>credits</h1>
diff --git a/public/js/account.js b/public/js/account.js
index ce9c9ed33..c5d8b04e8 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -122,7 +122,7 @@ firebase.auth().onAuthStateChanged(function(user) {
     var providerData = user.providerData;
     showNotification('Signed in', 2000);
     $(".pageLogin .preloader").addClass('hidden');
-    updateAccountLoginButton() 
+    updateAccountLoginButton();
   }
 });
 
diff --git a/public/js/commandline.js b/public/js/commandline.js
index c68ea9961..31d0e7be5 100644
--- a/public/js/commandline.js
+++ b/public/js/commandline.js
@@ -96,6 +96,13 @@ let commands = {
                 showCommandLine();
             }
         },
+        {
+            id: "joinDiscord",
+            display: "Join the Discord server",
+            exec: () => {
+                window.open("https://discord.gg/xMYrWg6")
+            }
+        },
         {
             id: "sendDevMessage",
             display: "Send a message ( bug report / feature request / feedback )...",
diff --git a/public/js/script.js b/public/js/script.js
index 8028874a5..2cb83c752 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -791,7 +791,7 @@ function updateAccountLoginButton() {
     // $("#menu .button.account").removeClass('hidden');
     // $("#menu .button.login").addClass('hidden');
   } else {
-    swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
+    swapElements($("#menu .button.account"), $("#menu .button.login"), 250);
     // $("#menu .button.login").removeClass('hidden');
     // $("#menu .button.account").addClass('hidden');
   }
diff --git a/public/themes/dots.css b/public/themes/dots.css
index e52f19472..3d32cd66c 100644
--- a/public/themes/dots.css
+++ b/public/themes/dots.css
@@ -21,17 +21,33 @@
     color: #121520;
 }
 
-#menu .button:nth-child(1){
-    background: #9261ff;
-}
-
-#menu:before{
+/* #menu:before{
     content: "";
     background: #f94348;
     width: 1.25rem;
     height: 1.25rem;
     padding: .5rem;
     border-radius: 10rem;
+} */
+
+#menu .button:nth-child(1){
+    background: #f94348;
+}
+
+#menu .button:nth-child(2){
+    background: #9261ff;
+}
+
+#menu .button:nth-child(3){
+    background: #3cc5f8;
+}
+
+#menu .button:nth-child(4){
+    background: #4acb8a;
+}
+
+#menu .button:nth-child(5), #menu .button:nth-child(6){
+    background: #ffd543;
 }
 
 #menu:after{
@@ -43,14 +59,6 @@
     border-radius: 10rem;
 }
 
-#menu .button:nth-child(2){
-    background: #3cc5f8;
-}
-
-#menu .button:nth-child(3){
-    background: #4acb8a;
-}
-
-#menu .button:nth-child(4), #menu .button:nth-child(5){
-    background: #ffd543;
-}
\ No newline at end of file
+#top.focus #menu .button.discord::after{
+    border-color: transparent;
+  }
\ No newline at end of file
diff --git a/public/themes/dracula.css b/public/themes/dracula.css
index 6b19e3550..ee8945f63 100644
--- a/public/themes/dracula.css
+++ b/public/themes/dracula.css
@@ -18,21 +18,25 @@
 }
 
 #menu .button:nth-child(1){
-  color: #8be9fd;
+  color: #ec75c4;
 }
 
 #menu .button:nth-child(2){
-  color: #50fa7b;
+  color: #8be9fd;
 }
 
 #menu .button:nth-child(3){
-  color: #f1fa8c;
+  color: #50fa7b;
 }
 
 #menu .button:nth-child(4){
-  color: #ffb86c;
+  color: #f1fa8c;
 }
 
 #menu .button:nth-child(5){
   color: #ffb86c;
+}
+
+#menu .button:nth-child(6){
+  color: #ffb86c;
 }
\ No newline at end of file
diff --git a/public/themes/oblivion.css b/public/themes/oblivion.css
index 1a0e13d8e..838f0edc7 100644
--- a/public/themes/oblivion.css
+++ b/public/themes/oblivion.css
@@ -6,18 +6,22 @@
 }
 
 #menu .button:nth-child(1){
-    color: #8db14b;
+    color: #9a90b4;
 }
 
 #menu .button:nth-child(2){
-    color: #fca321;
+    color: #8db14b;
 }
 
 #menu .button:nth-child(3){
+    color: #fca321;
+}
+
+#menu .button:nth-child(4){
     color: #2984a5;
 }
 
-#menu .button:nth-child(4),
-#menu .button:nth-child(5){
+#menu .button:nth-child(5),
+#menu .button:nth-child(6){
     color: #dd452e;
 }
\ No newline at end of file
diff --git a/public/themes/serika.css b/public/themes/serika.css
index 3b2a97155..e074914d1 100644
--- a/public/themes/serika.css
+++ b/public/themes/serika.css
@@ -1,6 +1,6 @@
 :root {
-    --bg-color: #e2b714;
-    --main-color: #323437;
-    --caret-color: #323437;
-    --sub-color: #d1d0c5;
+    --main-color: #e2b714;
+    --caret-color: #e2b714;
+    --sub-color: #323437;
+    --bg-color: #e1e1e3;
 }
\ No newline at end of file