diff --git a/public/index.html b/public/index.html
index be76805..e4c3d65 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,7 +42,7 @@
 
   <!-- Preview meta tags -->
 
-  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" async>
+  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" async>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet" async>
   <!-- Google recaptcha
   <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer> -->
diff --git a/public/site.webmanifest b/public/site.webmanifest
index 453b776..231d2ba 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -14,7 +14,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#0b4155",
-    "background_color": "#0b4155",
+    "theme_color": "#005799",
+    "background_color": "#005799",
     "display": "standalone"
 }
diff --git a/src/Main.vue b/src/Main.vue
index e661ef8..c343b81 100644
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -16,7 +16,7 @@ body {
 }
 
 #app {
-  font-family: "Roboto", sans-serif;
+  font-family: "Montserrat", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #383838;
diff --git a/src/assets/graphics/Graphic.webp b/src/assets/graphics/Graphic.webp
new file mode 100644
index 0000000..9bd9dbc
Binary files /dev/null and b/src/assets/graphics/Graphic.webp differ
diff --git a/src/assets/graphics/HomeGraphics.webp b/src/assets/graphics/HomeGraphics.webp
deleted file mode 100644
index 1b9db77..0000000
Binary files a/src/assets/graphics/HomeGraphics.webp and /dev/null differ
diff --git a/src/components/ElectronJS/FrameButtons.vue b/src/components/ElectronJS/FrameButtons.vue
index b7543d9..33135ba 100644
--- a/src/components/ElectronJS/FrameButtons.vue
+++ b/src/components/ElectronJS/FrameButtons.vue
@@ -67,12 +67,12 @@ export default {
   font-size: 15px;
 }
 .frame-buttons .close:hover {
-  background: rgba(255, 0, 0, 0.595);
+  background: rgba(255, 0, 0, 0.3);
 }
 .frame-buttons .minimize:hover {
-  background: rgba(46, 46, 46, 0.595);
+  background: rgba(0, 0, 0, 0.3);
 }
 .frame-buttons .res-max:hover {
-  background: rgba(46, 46, 46, 0.595);
+  background: rgba(0, 0, 0, 0.3);
 }
 </style>
diff --git a/src/components/app/EditPanel.vue b/src/components/app/EditPanel.vue
index d16f817..68925d6 100644
--- a/src/components/app/EditPanel.vue
+++ b/src/components/app/EditPanel.vue
@@ -46,7 +46,7 @@ export default {
 .edit-panel {
   padding: 10px;
   color: white;
-  background: #012c36;
+  background: #002038;
   display: flex;
   flex-direction: column;
   z-index: 1;
@@ -60,7 +60,7 @@ export default {
 }
 .close-button {
   color: white;
-  background: #304548;
+  background: #0061ad;
   padding: 4px;
   align-self: flex-end;
   transition: 0.3s;
@@ -68,9 +68,6 @@ export default {
   cursor: pointer;
   border-radius: 4px;
 }
-.close-button:hover {
-  background: #485b5d;
-}
 .message {
   color: rgb(214, 214, 214);
   white-space: nowrap;
diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index f27f920..bcd0299 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -147,6 +147,7 @@ export default {
   color: white;
   flex-shrink: 0;
   position: relative;
+  background: rgba(0, 0, 0, 0.2);
 }
 .tab {
   display: flex;
@@ -171,10 +172,10 @@ export default {
   content: "";
   position: absolute;
   height: 3px;
-  left: 0;
-  right: 0;
+  left: 10px;
+  right: 10px;
   bottom: 0;
-  background: rgb(177, 177, 177);
+  background: rgba(255, 255, 255, 0.4);
 }
 .tab::before {
   content: "";
@@ -190,8 +191,8 @@ export default {
   content: "";
   position: absolute;
   height: 3px;
-  left: 0;
-  right: 0;
+  left: 10px;
+  right: 10px;
   bottom: 0;
   background: rgb(255, 255, 255);
 }
diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
index 6e6b1db..80003b0 100644
--- a/src/components/app/MainNav.vue
+++ b/src/components/app/MainNav.vue
@@ -264,6 +264,10 @@ export default {
   flex-shrink: 0;
 }
 .item {
+  font-size: 24px;
+  width: 48px;
+  height: 48px;
+  margin-left: 14px;
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -271,20 +275,16 @@ export default {
   align-content: center;
   align-items: center;
   color: white;
-  font-size: 30px;
   align-self: center;
-  width: 50px;
-  height: 50px;
-  margin-left: 10px;
   border-radius: 50%;
   cursor: pointer;
   user-select: none;
   transition: 0.2s;
   &:hover {
-    background: #093b4b;
+    background: rgba(0, 0, 0, 0.3);
   }
   &.selected {
-    background: #072c38;
+    background: rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -295,7 +295,8 @@ export default {
   flex-direction: column;
   align-items: center;
   align-content: center;
-  font-size: 15px;
+  font-size: 14px;
+  font-weight: bold;
   position: absolute;
   z-index: 115651;
   top: 5px;
diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue
index 7fb4f50..cc45358 100644
--- a/src/components/app/MemberTemplate.vue
+++ b/src/components/app/MemberTemplate.vue
@@ -136,7 +136,7 @@ export default {
 }
 
 .member:hover {
-  background: #063442;
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .information {
@@ -151,9 +151,11 @@ export default {
 }
 
 .type-box {
-  padding: 3px;
-  border-radius: 5px;
+  padding: 4px;
+  border-radius: 2px;
+  font-size: 12px;
   height: 100%;
+  margin-right: 10px;
   background: rgb(255, 71, 71);
 }
 
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 093a87c..43ae0b5 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -162,7 +162,7 @@ export default {
 .header {
   height: 50px;
   width: 100%;
-  background: #083a4a;
+  background: rgba(0, 0, 0, 0.2);
   display: flex;
   flex-shrink: 0;
 }
@@ -181,5 +181,6 @@ export default {
   color: #b5c4ca;
   font-size: 15px;
   margin-left: 5px;
+  font-weight: bold;
 }
 </style>
diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue
index 39b0b9b..6f58ad5 100644
--- a/src/components/app/MessageLogs.vue
+++ b/src/components/app/MessageLogs.vue
@@ -343,6 +343,7 @@ export default {
   overflow: auto;
   flex: 1;
   position: relative;
+  padding-bottom: 23px;
 }
 
 .load-more-button {
@@ -362,35 +363,6 @@ export default {
     align-self: center;
   }
 }
-.back-to-bottom-button {
-  &:hover {
-    background: rgb(23, 124, 255);
-    box-shadow: 0px 0px 15px 0px #0000008a;
-  }
-  transition: 0.2s;
-  background: rgba(23, 124, 255, 0.818);
-  color: white;
-  position: absolute;
-  bottom: 15px;
-  right: 25px;
-  border-radius: 10px;
-  height: 50px;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
-  box-shadow: 0px 0px 7px 0px #0000008a;
-  align-content: center;
-  align-items: center;
-  padding-left: 10px;
-  user-select: none;
-  cursor: pointer;
-  .material-icons {
-    align-self: center;
-    flex-shrink: 0;
-    font-size: 35px;
-  }
-}
 
 .show-message-animation {
   animation: showMessage 0.3s ease-in-out;
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index b9b200b..23ebb14 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -36,13 +36,13 @@
         }}
       </div>
     </div>
-    <div class="typing-outer">
-      <typing-status
-        v-if="typingRecipients[selectedChannelID]"
-        :recipients="typingRecipients[selectedChannelID]"
-      />
-    </div>
     <div class="chat-input-area" v-if="selectedChannelID">
+      <div class="typing-outer">
+        <typing-status
+          v-if="typingRecipients[selectedChannelID]"
+          :recipients="typingRecipients[selectedChannelID]"
+        />
+      </div>
       <div style="position: relative;">
         <transition name="show-up">
           <div
@@ -176,7 +176,8 @@
     <div
       class="no-message-permission"
       v-if="
-        sendChannelMessagePermission === false || roleSendMessagePermission === false
+        sendChannelMessagePermission === false ||
+          roleSendMessagePermission === false
       "
     >
       You don't have permission to send messages in this channel.
@@ -835,11 +836,13 @@ export default {
 }
 .typing-outer {
   display: flex;
-  height: 20px;
   margin-bottom: 5px;
-  margin-left: 10px;
+  position: absolute;
+  top: -25px;
+  left: 0;
+  right: 0;
+  z-index: 1;
 }
-
 .hidden {
   display: none;
 }
@@ -856,6 +859,7 @@ export default {
   flex-direction: column;
   overflow: hidden;
   position: relative;
+  background: rgba(0, 0, 0, 0.4);
 }
 .message-logs {
   overflow: auto;
@@ -872,7 +876,7 @@ export default {
   flex-direction: column;
   padding-bottom: 10px;
   position: relative;
-  background: #014757;
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .attachment-button {
@@ -918,7 +922,7 @@ export default {
 }
 
 .chat-input {
-  font-family: "Roboto", sans-serif;
+  font-family: "Montserrat", sans-serif;
   background: transparent;
   color: white;
   width: 100%;
@@ -994,16 +998,17 @@ export default {
 
 .back-to-bottom-button {
   &:hover {
-    background: rgba(0, 0, 0, 0.9);
+    background: rgba(0, 0, 0, 0.8);
   }
   transition: 0.2s;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(3px);
   border-radius: 100px;
   color: white;
   position: absolute;
-  bottom: 15px;
+  bottom: 30px;
   right: 25px;
-  height: 50px;
+  height: 52px;
   z-index: 2;
   display: flex;
   justify-content: center;
@@ -1011,13 +1016,14 @@ export default {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   align-content: center;
   align-items: center;
-  padding-left: 10px;
+  padding-left: 15px;
+  padding-right: 10px;
   user-select: none;
   cursor: pointer;
   .material-icons {
     align-self: center;
     flex-shrink: 0;
-    font-size: 35px;
+    font-size: 25px;
   }
 }
 
@@ -1037,7 +1043,6 @@ export default {
   margin-left: 2px;
   margin-bottom: 10px;
   flex-shrink: 0;
-  background: #024b5c;
   .markdown-icon {
     font-size: 21px;
     flex-shrink: 0;
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue
index 74504a5..a143f11 100644
--- a/src/components/app/MessagePanel/Heading.vue
+++ b/src/components/app/MessagePanel/Heading.vue
@@ -68,7 +68,7 @@ export default {
 
 <style scoped>
 .heading {
-  background: #073240;
+  background: rgba(0, 0, 0, 0.2);
   margin-bottom: 0;
   height: 50px;
   display: flex;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 319cfae..2448467 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -356,8 +356,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$self-message-color: #053746;
-$message-color: #03222b;
+$self-message-color: rgba(255, 255, 255, 0.1);
+$message-color: rgba(0, 0, 0, 0.3);
 
 .container {
   position: relative;
@@ -387,6 +387,7 @@ $message-color: #03222b;
   color: white;
   overflow: hidden;
   background: $message-color;
+  border-radius: 4px;
 }
 
 .presence-message .text {
@@ -550,6 +551,7 @@ $message-color: #03222b;
   margin: auto 0;
   transition: 0.1s;
   cursor: pointer;
+  font-weight: bold;
 }
 
 .username:hover {
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index f9eb81a..ce861e8 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -103,9 +103,11 @@ export default {
   position: relative;
   flex-shrink: 0;
   align-items: center;
-  height: 50px;
+  height: 65px;
+  padding-left: 5px;
+  padding-right: 5px;
   transition: 0.3s;
-  background-color: #083a4a;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .avatar {
@@ -129,7 +131,7 @@ export default {
   }
   .tag {
     font-size: 13px;
-    color: #b2d1d9;
+    color: rgba(255, 255, 255, 0.72);
   }
 }
 
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index ca4e9ab..f81a332 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -315,10 +315,10 @@ export default {
   opacity: 0.8;
   transition: 0.2s;
   &:hover {
-    background: #093b4b;
+    background: rgba(0, 0, 0, 0.2);
   }
   &.selected {
-    background: #042a2b;
+    background: rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -355,7 +355,7 @@ export default {
 
 @media (max-width: 600px) {
   .navigation {
-    background: linear-gradient(#136a8a, #00b4db);
+    background: #005a9e;
   }
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/AddFriend.vue b/src/components/app/Popouts/Popouts/AddFriend.vue
index ae6e01b..1987c94 100644
--- a/src/components/app/Popouts/Popouts/AddFriend.vue
+++ b/src/components/app/Popouts/Popouts/AddFriend.vue
@@ -118,13 +118,18 @@ export default {
   margin: auto;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .header {
   display: flex;
   flex-shrink: 0;
-  background-color: #05222d;
+  background: rgba(0, 0, 0, 0.4);
   color: white;
   height: 50px;
   align-content: center;
@@ -159,12 +164,16 @@ export default {
   align-self: center;
   color: white;
   width: initial;
-  background: #024554;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
   cursor: pointer;
   &:hover {
-    background: #02303c;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
+input {
+  border-radius: 4px;
+}
 
 .alerts {
   display: flex;
diff --git a/src/components/app/Popouts/Popouts/AddServer.vue b/src/components/app/Popouts/Popouts/AddServer.vue
index d322008..c63921b 100644
--- a/src/components/app/Popouts/Popouts/AddServer.vue
+++ b/src/components/app/Popouts/Popouts/AddServer.vue
@@ -257,14 +257,19 @@ export default {
   color: white;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .tabs {
   display: flex;
   justify-content: center;
   padding-top: 15px;
-  background: #05222d;
+  background: rgba(0, 0, 0, 0.4);
   flex-shrink: 0;
 }
 .tab {
@@ -284,7 +289,7 @@ export default {
   border-bottom: solid 5px white !important;
 }
 .tab:hover {
-  border-bottom: solid 5px rgb(107, 107, 107);
+  border-bottom: solid 5px rgba(255, 255, 255, 0.4);
 }
 
 .content {
@@ -322,8 +327,12 @@ export default {
   align-self: center;
   margin-top: 15px;
   margin-bottom: 10px;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
+  border-radius: 4px;
+}
+.input input {
+  border-radius: 4px;
 }
 
 .title {
@@ -339,7 +348,7 @@ export default {
 
 .button {
   padding: 5px;
-  background: #024554;
+  background-color: rgba(0, 0, 0, 0.2);
   user-select: none;
   border: none;
   color: white;
@@ -349,9 +358,10 @@ export default {
   align-self: center;
   margin: 5px;
   cursor: pointer;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .button-clicked {
diff --git a/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
index 20784b9..79637d7 100644
--- a/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
@@ -30,7 +30,8 @@
   user-select: none;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
   border-radius: 4px;
 }
 .material-icons {
diff --git a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
index bda57f2..6d36e19 100644
--- a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
+++ b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
@@ -82,8 +82,13 @@ export default {
   color: white;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .text {
   color: white;
@@ -134,6 +139,7 @@ export default {
   transition: 0.3s;
   margin-left: 10px;
   margin-right: 10px;
+  border-radius: 4px;
 }
 .donate {
   background: rgb(218, 179, 6);
diff --git a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
index 607f4cc..96c440b 100644
--- a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
+++ b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
@@ -101,8 +101,13 @@ export default {
   color: white;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .top {
   display: flex;
@@ -114,14 +119,15 @@ export default {
 
 .button {
   padding: 10px;
-  background: #062c3a;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
   margin: auto;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
 }
 .button:hover {
-  background: #041e27;
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .bottom {
@@ -143,7 +149,9 @@ export default {
 .invite {
   display: flex;
   background: rgba(0, 0, 0, 0.274);
-  margin: 5px;
+  margin: 1px;
+  margin-left: 0;
+  margin-right: 0;
   padding: 10px;
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/ServerMemberContext.vue b/src/components/app/Popouts/Popouts/ServerMemberContext.vue
index 0c0c580..df7e215 100644
--- a/src/components/app/Popouts/Popouts/ServerMemberContext.vue
+++ b/src/components/app/Popouts/Popouts/ServerMemberContext.vue
@@ -111,7 +111,7 @@ export default {
 
         rolesMenu.style.top =
           mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px";
-        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 22 + "px";
+        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 11 + "px";
       });
     },
     setPosition() {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
index bd4ebc6..104931f 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
@@ -50,6 +50,7 @@ export default {
   margin-bottom: 10px;
 }
 .button {
+  border-radius: 4px;
   padding: 10px;
   background: rgba(255, 0, 0, 0.719);
   margin: auto;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
index 63ef935..979f404 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
@@ -88,25 +88,29 @@ export default {
 
 <style scoped>
 .drop-down {
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   user-select: none;
   cursor: default;
   flex-shrink: 0;
   position: relative;
+  border-radius: 4px;
 }
 .title {
+  font-size: 14px;
+  margin-left: 2px;
   margin-bottom: 2px;
 }
 .current-select-box {
-  background: #032d38;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 5px;
   cursor: pointer;
   display: flex;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .current-select-box:hover {
-  background: #02232b;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .current-select-box div {
   align-self: center;
@@ -125,13 +129,14 @@ export default {
 
 .drop {
   position: absolute;
-  background-color: #044050;
-  left: 0;
-  right: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(5px);
+  left: 10px;
+  right: 10px;
   z-index: 11111;
   overflow: hidden;
   padding: 2px;
-  margin-top: 5px;
+  margin-top: -2px;
 }
 .drop-container {
   overflow: auto;
@@ -148,6 +153,7 @@ export default {
   white-space: nowrap;
   display: flex;
   cursor: pointer;
+  font-size: 14px;;  
 }
 .item div {
   align-self: center;
@@ -157,10 +163,10 @@ export default {
 }
 
 .item:hover {
-  background: #033442;
+  background: rgba(255, 255, 255, 0.2);
 }
 .item.selected {
-  background: #021c23;
+  background: rgba(255, 255, 255, 0.25);
 }
 .material-icons {
   flex-shrink: 0;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
index fd03b5a..16abd6e 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -224,7 +224,8 @@ export default {
   align-self: center;
   margin-top: 10px;
   justify-content: center;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   flex-shrink: 0;
 
   .avatar {
@@ -237,6 +238,7 @@ export default {
       margin-top: 35px;
     }
     .button {
+      background: rgba(0, 0, 0, 0.2);
       margin-bottom: 16px;
     }
   }
@@ -249,6 +251,9 @@ export default {
     margin-top: 10px;
     padding: 5px;
     margin-left: 2px;
+    .button {
+        background: rgba(0, 0, 0, 0.2);
+    }
     .banner-image {
       position: relative;
       width: 250px;
@@ -292,7 +297,7 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   align-self: center;
   margin: 10px;
@@ -302,9 +307,16 @@ export default {
   margin-top: 2px;
   margin-bottom: 0;
   width: 190px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+}
+.input-title {
+  font-size: 14px;
+  margin-left: 2px;
 }
 .button {
-  background: #033442;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
   padding: 10px;
   align-self: center;
   margin: 5px;
@@ -313,7 +325,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: #022831;
+  background: rgba(0, 0, 0, 0.5);
 }
 .save-button {
   margin-top: 10px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
index 7d4d9b1..727b679 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
@@ -88,9 +88,8 @@ export default {
   overflow: auto;
   .member {
     display: flex;
-    background: #052935;
+    background: rgba(0, 0, 0, 0.5);
     height: 30px;
-    margin: 5px;
     padding: 5px;
     align-content: center;
     align-items: center;
@@ -122,6 +121,7 @@ export default {
       user-select: none;
       flex-shrink: 0;
       margin-left: 5px;
+      font-weight: bold;
     }
   }
 }
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
index 2bce3b0..26fb5f6 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
@@ -212,10 +212,10 @@ export default {
   align-self: center;
 }
 .channel:hover {
-  background: #04232d;
+  background: rgba(0, 0, 0, 0.2);
 }
 .channel.selected {
-  background: #03191f;
+  background: rgba(0, 0, 0, 0.4);
 }
 .add-channel-button {
   background: rgba(17, 148, 255, 0.692);
@@ -231,16 +231,17 @@ export default {
   overflow: hidden;
 }
 .button {
-  background: #024554;
+  background: rgba(0, 0, 0, 0.2);
   padding: 10px;
   align-self: center;
   margin: 5px;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.4);
 }
 .button.warn {
   background: rgba(255, 17, 17, 0.692);
@@ -271,16 +272,22 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   margin: 10px;
+  border-radius: 4px;
 }
 .input input {
   width: initial;
   margin-top: 2px;
   margin-bottom: 0;
+  border-radius: 4px;
 }
 
+.input-title {
+  font-size: 14px;
+  margin-left: 2px;
+}
 .check-box {
   display: flex;
   margin: 5px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
index e1ffb63..0d81c05 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
@@ -339,10 +339,10 @@ export default {
   align-self: center;
 }
 .role:hover {
-  background: #04232d;
+  background: rgba(0, 0, 0, 0.2);
 }
 .role.selected {
-  background: #03191f;
+  background: rgba(0, 0, 0, 0.4);
 }
 .add-role-button {
   background: rgba(17, 148, 255, 0.692);
@@ -358,16 +358,17 @@ export default {
   overflow: hidden;
 }
 .button {
-  background: #024554;
+  background: rgba(0, 0, 0, 0.4);
   padding: 10px;
   align-self: center;
   margin: 5px;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.6);
 }
 .button.warn {
   background: rgba(255, 17, 17, 0.692);
@@ -398,7 +399,8 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   margin: 10px;
 }
@@ -407,6 +409,7 @@ export default {
   margin-bottom: 0;
   background-color: rgba(0, 0, 0, 0.4);
   margin-top: 0;
+  border-radius: 4px;
 }
 
 .role-name {
@@ -420,6 +423,7 @@ export default {
   background: rgb(255, 255, 255);
   transition: 0.2s;
   margin-top: 5px;
+  border-radius: 4px;
 }
 
 .color-picker {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
index 315807b..4842d73 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
@@ -192,8 +192,13 @@ export default {
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 
 .content {
@@ -232,16 +237,16 @@ export default {
   align-self: center;
 }
 .tab:hover {
-  background: #072935;
+  background: rgba(0, 0, 0, 0.4);
 }
 .critical {
   color: red;
 }
 .tab.selected {
-  background: #051f28;
+  background: rgba(0, 0, 0, 0.4);
 }
 .header {
-  background: #05222d;
+  background: rgba(0, 0, 0, 0.4);
   display: flex;
   height: 50px;
   flex-shrink: 0;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
index 0403e92..b61854a 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
@@ -206,7 +206,8 @@ export default {
 }
 
 .toggle {
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
   margin-left: 10px;
   display: flex;
@@ -220,6 +221,7 @@ export default {
       width: 20px;
       height: 20px;
       background: rgb(95, 95, 95);
+      border-radius: 4px;
       margin-right: 5px;
       &.selected {
         background: rgb(34, 156, 255);
@@ -233,7 +235,8 @@ export default {
 }
 
 .input {
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
   margin: 10px;
   align-self: flex-start;
@@ -245,7 +248,7 @@ export default {
     margin-bottom: 5px;
   }
   textarea {
-    background: #032d38;
+    background-color: rgba(0, 0, 0, 0.4);
     resize: none;
     outline: none;
     margin-top: 2px;
@@ -262,7 +265,8 @@ export default {
 
 .button {
   padding: 10px;
-  background: #024554;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4);
   -webkit-transition: background 0.3s;
   transition: 0.3s;
   -webkit-user-select: none;
@@ -276,7 +280,7 @@ export default {
 }
 
 .button:hover {
-  background: #02303c;
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .button.disabled {
   background: grey;
diff --git a/src/components/app/Popouts/Popouts/Settings.vue b/src/components/app/Popouts/Popouts/Settings.vue
index 40befbc..73e27dd 100644
--- a/src/components/app/Popouts/Popouts/Settings.vue
+++ b/src/components/app/Popouts/Popouts/Settings.vue
@@ -133,13 +133,18 @@ export default {
   color: white;
 }
 .settings-box {
-  height: 600px;
+  height: 630px;
   display: flex;
   margin: auto;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .tabs {
   height: 100%;
@@ -171,11 +176,11 @@ export default {
 }
 
 .tab:hover {
-  background: #072935;
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .tab.selected {
-  background: #051f28;
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .tab.warn {
@@ -189,11 +194,11 @@ export default {
 .title {
   display: flex;
   padding: 10px;
-  font-size: 25px;
-  background: #05222d;
+  font-size: 20px;
+  background: rgba(0, 0, 0, 0.4);
 }
 .title .material-icons {
-  font-size: 40px;
+  font-size: 30px;
 }
 .title div {
   margin: auto;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
index 9bd6dea..ce5c355 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
@@ -61,9 +61,9 @@
             class="avatar"
             :url="update.avatar || avatar"
             :admin="user.admin"
-            size="100px"
-            emote-size="30px"
-            animation-padding="5px"
+            size="70px"
+            emote-size="24px"
+            animation-padding="4px"
           />
           <div class="button" @click="$refs.avatarBrowser.click()">
             Change Avatar
@@ -208,7 +208,6 @@ export default {
 .edit-profile {
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
   flex: 1;
   overflow: hidden;
 }
@@ -217,6 +216,7 @@ export default {
   flex: 1;
   overflow: auto;
   flex-shrink: 0;
+  padding-top: 20px;
 }
 
 .change-avatar {
@@ -227,19 +227,22 @@ export default {
 .change-avatar-container {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   width: 150px;
   align-self: center;
   padding: 20px;
   margin-top: 10px;
+  margin-left: 29px;
+  border-radius: 4px;
   .button {
-    background: #033442;
+    background: rgba(0, 0, 0, 0.2);
     &:hover {
-      background: #032b36;
+      background: rgba(0, 0, 0, 0.3);
     }
   }
 }
 .avatar {
+  margin-top: 10px;
   margin-bottom: 10px;
   align-self: center;
 }
@@ -247,16 +250,17 @@ export default {
   display: none;
 }
 .button {
-  background: #024554;
+  background: rgba(0, 0, 0, 0.3);
   padding: 10px;
   text-align: center;
   display: inline-block;
   align-self: center;
   cursor: pointer;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.4);
 }
 .button.disabled {
   background: grey;
@@ -271,11 +275,16 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   margin: 10px;
   margin-left: 30px;
   flex-shrink: 0;
+  border-radius: 4px;
+  .title {
+    font-size: 14px;
+    margin-left: 2px;
+  }
 }
 .outer-input .user-tag .username {
   flex: 1;
@@ -290,15 +299,22 @@ export default {
 }
 .outer-input input {
   width: initial;
+  border-radius: 4px;
 }
 
 .save-button {
   z-index: 99999;
-  width: 100%;
-  align-self: initial;
+  width: 120px;
+  align-self: flex-end;
   display: block;
   padding: 10px 0px 10px 0px;
+  background: rgba(0, 0, 0, 0.4);
   margin: 0;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  &:hover {
+    background: rgba(0, 0, 0, 0.6);
+  }
 }
 
 .errors {
@@ -320,6 +336,7 @@ export default {
   }
   .change-avatar-container {
     order: 1;
+    margin-left: 0;
     flex-shrink: 0;
   }
   .change-avatar {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
index 2f6dfb0..ac51ef3 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
@@ -161,10 +161,10 @@ input {
   width: calc(100% - 30px);
 }
 input:hover {
-  background: rgba(26, 26, 26, 0.24);
+  background: rgba(0, 0, 0, 0.2);
 }
 input:focus {
-  background: rgba(26, 26, 26, 0.527);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .delete-button {
@@ -214,7 +214,7 @@ input:focus {
 .emojis-list {
   display: flex;
   flex-direction: column;
-  background-color: #00000024;
+  background-color: rgba(0, 0, 0, 0.1);
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
@@ -234,7 +234,7 @@ input:focus {
   flex-shrink: 0;
 }
 .emoji:hover {
-  background: #052e3b;
+  background: rgba(0, 0, 0, 0.2);
 }
 .emoji-name {
   margin: auto;
@@ -245,15 +245,16 @@ input:focus {
   display: inline-block;
   width: inherit;
   padding: 10px;
-  background: #063443;
+  background: rgba(6, 52, 67, 0.4);
   margin-bottom: 10px;
   margin-left: 20px;
   user-select: none;
   transition: 0.3s;
   cursor: pointer;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #052631;
+  background: rgba(6, 52, 67, 0.6);
 }
 .button .material-icons {
   vertical-align: -6px;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
index 1cbb329..c1a00ae 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
@@ -170,7 +170,7 @@ export default {
 
 .message-example {
   padding: 10px;
-  background: linear-gradient(#0b4155, #01677e);
+  background: rgba(0, 0, 0, 0.45);
 }
 .title {
   font-size: 20px;
@@ -190,7 +190,7 @@ export default {
 }
 
 .options {
-  background-color: #023643;
+  background-color: rgba(0, 0, 0, 0.6);
   padding-top: 5px;
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
index 8ae716a..e745fd2 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -54,7 +54,7 @@ export default {
 .tabs {
   z-index: 999999;
   display: flex;
-  background: #073444;
+  background: rgba(0, 0, 0, 0.6);
   justify-content: center;
 }
 .tabs .tab {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue
index d9017e6..7edec3d 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue
@@ -73,17 +73,17 @@ export default {
     transition: 0.2s;
     &:hover {
       color: white;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgba(0, 0, 0, 0.2);
     }
     &.selected {
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.4);
       color: white;
     }
   }
 }
 .context {
   display: flex;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.5);
   .button {
     display: flex;
     margin: 5px;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue
index 23415ae..620d82f 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue
@@ -190,7 +190,7 @@ export default {
 .bar {
   display: flex;
   width: 100%;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.3);
   height: 40px;
   flex-shrink: 0;
   .button {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 54a9695..2991f93 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -162,7 +162,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .notice {
   color: rgb(216, 216, 216);
   font-size: 15px;
@@ -228,23 +228,29 @@ export default {
   margin-bottom: 10px;
 }
 .survey-valid {
-  color: green;
+  color: #54ff54;
   margin-bottom: 10px;
 }
 .survey .button {
   color: white;
-  background: #024554;
+  background: rgba(0, 0, 0, 0.4);
   padding-top: 10px;
   padding-bottom: 10px;
-  width: 100%;
+  z-index: 99999;
+  width: 120px;
   text-align: center;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
   flex-shrink: 0;
+  margin: 0;
+  align-self: flex-end;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  border-radius: 4px;
 }
 .survey .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .title {
@@ -264,22 +270,28 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
   margin: 10px;
   margin-left: 30px;
   margin-right: 30px;
   padding-bottom: 0;
+  .input-title {
+    font-size: 14px;
+    margin-left: 2px;
+  }
 }
 .input input {
   width: initial;
   margin-top: 2px;
-  background: #032d38;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
 }
 textarea {
   padding: 10px;
   resize: none;
-  background: #032d38;
+  background-color: rgba(0, 0, 0, 0.4);
   border: none;
   outline: none;
   color: white;
@@ -287,6 +299,7 @@ textarea {
   margin-bottom: 10px;
   margin-top: 2px;
   transition: 0.3s;
+  border-radius: 4px;
 }
 textarea:hover {
   background: rgba(0, 0, 0, 0.401);
diff --git a/src/components/app/Popouts/Popouts/uploadDialog.vue b/src/components/app/Popouts/Popouts/uploadDialog.vue
index c47db5e..4c622a7 100644
--- a/src/components/app/Popouts/Popouts/uploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/uploadDialog.vue
@@ -158,7 +158,7 @@ export default {
     },
     keyDownEvent(event) {
       const keyCode = event.keyCode;
-      if (keyCode == 13) {
+      if (keyCode == 13 && !event.shiftKey) {
         return this.send();
       }
       if (keyCode == 27) {
@@ -201,8 +201,13 @@ export default {
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background-color: #01677e;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .info {
   display: flex;
@@ -259,14 +264,17 @@ export default {
   display: flex;
   align-content: center;
   align-items: center;
-  background: #024554;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
   padding: 5px;
   cursor: pointer;
   user-select: none;
-  transition: 0.3s;
+  transition: 0.2s;
+  color: rgba(255, 255, 255, 0.8);
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.4);
+  color: white;
 }
 .button .text {
   margin-left: 5px;
@@ -285,8 +293,9 @@ export default {
   display: flex;
 }
 .chat-input {
-  font-family: "Roboto", sans-serif;
-  background: #014655;
+  font-family: "Montserrat", sans-serif;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   color: white;
   width: 100%;
   height: 20px;
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index 48145b8..0cfbf0a 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -265,8 +265,13 @@ export default {
   flex-direction: row;
   position: relative;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
   overflow: hidden;
 }
 
@@ -301,7 +306,7 @@ export default {
   align-content: center;
   padding-bottom: 10px;
   flex-shrink: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
   padding-top: 30px;
 }
 
@@ -315,7 +320,7 @@ export default {
   user-select: auto !important;
 }
 .tag {
-  color: #ccdadd;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .button {
@@ -424,12 +429,13 @@ export default {
   flex-shrink: 0;
 }
 .about-item .key {
-  color: #b6dbe1;
+  color: rgba(255, 255, 255, 0.7);
 }
 .about-item .name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: rgba(255, 255, 255, 0.9);
 }
 .about-item div {
   align-self: center;
@@ -484,16 +490,16 @@ export default {
   cursor: pointer;
   height: 30px;
   width: 30px;
-  border-radius: 50%;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
   align-content: center;
   transition: 0.2s;
   user-select: none;
+  opacity: 0.7;
 }
 .back-button:hover {
-  background: #0c484e;
+  opacity: 1;
 }
 @media (max-width: 432px) {
   .box {
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index 4de6193..c89b917 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -170,6 +170,16 @@ export default {
 .extendBanner {
   height: 130px;
   background-color: rgb(32, 32, 32);
+  overflow: hidden;
+  .sub-banner {
+    align-items: flex-end;
+    padding-bottom: 10px;
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+    height: 70px;
+  }
+  .options-button {
+    margin-bottom: -7px;
+  }
 }
 .banner-image {
   position: absolute;
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index 4fce16b..c5434f6 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -3,10 +3,14 @@
     class="channel"
     :class="{ selected: selectedChannelID === channelData.channelID }"
   >
-    <i class="material-icons">storage</i>
+    <i class="material-icons">arrow_forward_ios</i>
     <div class="channel-name">{{ channelData.name }}</div>
-    <div class="notification" v-if="hasNotifications">
-      {{ hasNotifications.count }}
+    <div
+      class="notification"
+      v-if="hasNotifications"
+      :title="hasNotifications.count"
+    >
+      {{ hasNotifications.count > 99 ? "99+" : hasNotifications.count }}
     </div>
   </div>
 </template>
@@ -45,23 +49,30 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  padding: 5px;
-  transition: background 0.3s;
+  padding: 10px;
+  transition: background 0.2s;
   font-size: 14px;
   cursor: pointer;
-  color: white;
+  color: rgba(255, 255, 255, 0.8);
   user-select: none;
   overflow: hidden;
   padding-right: 10px;
   padding-left: 10px;
-  margin: 5px;
+  margin: 2px;
+  margin-left: 10px;
+  margin-right: 10px;
   border-radius: 4px;
 }
+.material-icons {
+  font-size: 11px;
+}
 .channel:hover {
-  background: #053c4c;
+  background: #00477d;
+  color: white;
 }
 .channel.selected {
-  background: #053240;
+  background: #003660;
+  color: white;
 }
 
 .channel-name {
@@ -78,12 +89,13 @@ export default {
   text-align: center;
   justify-content: center;
   background: #ee3e34;
-  height: 34px;
-  right: 0;
-  top: 0;
+  height: 23px;
+  width: 23px;
+  border-radius: 50%;
+  right: 10px;
+  top: 8px;
   bottom: 0;
-  min-width: 40px;
-  max-width: 70px;
-  border-radius: 1px;
+  font-size: 12px;
+  font-weight: bold;
 }
 </style>
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index 1d13744..285deec 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -69,7 +69,7 @@ export default {
     position: absolute;
     bottom: 0;
     z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
   .darken::after {
     content: "";
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index a0d3fc1..0976d81 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -186,19 +186,22 @@ export default {
       border-radius: 4px;
       cursor: pointer;
       transition: 0.3s;
+      color: rgba(255, 255, 255, 0.8);
       &:hover {
-        background: #053c4c;
+        background: rgba(0, 0, 0, 0.2);
+        color: white;
       }
       &.selected {
-        background: #053240;
+        color: white;
+        background: rgba(0, 0, 0, 0.4);
       }
     }
     .item:nth-child(2)::before {
       content: "NEW";
-      font-size: 14px;
+      font-size: 9px;
       background: rgb(255, 55, 55);
       border-radius: 2px;
-      padding: 2px;
+      padding: 4px;
       position: absolute;
       right: 10px;
     }
@@ -224,18 +227,18 @@ export default {
       &::after {
         content: "BETA";
         position: absolute;
-        background: #ff3333;
-        border-radius: 5px;
-        font-size: 9px;
+        background: #f33;
+        border-radius: 2px;
+        font-size: 10px;
         padding: 2px;
-        bottom: 20px;
+        bottom: 22px;
         z-index: 999;
       }
     }
     .details {
       align-self: center;
       .title {
-        font-size: 20px;
+        font-size: 18px;
         margin-bottom: 5px;
         position: relative;
       }
@@ -249,8 +252,7 @@ export default {
 
 .card {
   background: black;
-  height: 180px;
-  border-radius: 5px;
+  border-radius: 4px;
   margin: 5px;
   padding: 10px;
   display: flex;
@@ -267,10 +269,12 @@ export default {
     padding: 5px;
     font-size: 17px;
     margin-top: 15px;
+    margin-bottom: 10px;
     flex-shrink: 0;
     cursor: pointer;
     transition: 0.3s;
     color: rgba(255, 255, 255, 0.924);
+    border-radius: 4px;
     &:hover {
       background-color: rgba(0, 0, 0, 0.3);
     }
@@ -302,6 +306,7 @@ export default {
     .heart {
       font-size: 60px;
       margin-bottom: 10px;
+      margin-top: 10px;
     }
   }
 }
@@ -320,7 +325,7 @@ export default {
 
 .right-panel {
   .header {
-    background: #063443;
+    background: rgba(0, 0, 0, 0.4);
     padding-left: 10px;
     height: 54px;
     display: flex;
@@ -362,8 +367,8 @@ export default {
   .left-panel {
     position: absolute;
     bottom: 0;
-    z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    z-index: 2222;
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
     height: 100%;
   }
   .darken::after {
diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
index 9bcce77..b66449b 100644
--- a/src/components/app/Tabs/Explore/searchHeader.vue
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -83,7 +83,7 @@ export default {
 <style lang="scss" scoped>
 .search-header {
   display: flex;
-  background: #073847;
+  background: rgba(0, 0, 0, 0.55);
   width: 100%;
   height: 100px;
   flex-shrink: 0;
diff --git a/src/components/app/Tabs/Explore/serverTemplate.vue b/src/components/app/Tabs/Explore/serverTemplate.vue
index e2b9d50..591d08d 100644
--- a/src/components/app/Tabs/Explore/serverTemplate.vue
+++ b/src/components/app/Tabs/Explore/serverTemplate.vue
@@ -89,8 +89,7 @@ export default {
   position: relative;
   width: 250px;
   height: 300px;
-  background: #024253;
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.2);
   margin: 5px;
   border-radius: 4px;
   flex-shrink: 0;
@@ -99,9 +98,6 @@ export default {
   flex-shrink: 0;
   flex-direction: column;
   overflow: hidden;
-  &:hover {
-    opacity: 1;
-  }
   .top {
     display: flex;
     flex-direction: column;
@@ -156,7 +152,14 @@ export default {
         text-overflow: ellipsis;
       }
       .material-icons {
-        color: #66e0ff;
+        color: #ffffff;
+        width: 12px;
+        height: 12px;
+        background-color: #5dcce8;
+        font-size: 13px;
+        border-radius: 50%;
+        padding: 4px;
+        margin-top: 3px;
         margin-left: 5px;
       }
     }
@@ -164,7 +167,7 @@ export default {
   .bottom {
     display: flex;
     flex-direction: column;
-    background: #04333f;
+    background: rgba(0, 0, 0, 0.3);
     flex: 1;
     height: 100%;
     flex-shrink: 0;
@@ -199,7 +202,7 @@ export default {
       border-radius: 4px;
       margin-right: 10px;
       flex: 1;
-      background: #022730;
+      background: rgba(0, 0, 0, 0.3);
       .material-icons {
         margin-right: 5px;
       }
@@ -209,8 +212,8 @@ export default {
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 40px;
-      border-radius: 4px;
+      height: 36px;
+      border-radius: 2px;
       background: rgba(0, 179, 219, 0.8);
       transition: 0.2s;
       margin-right: 10px;
diff --git a/src/components/app/Tabs/Explore/themesTemplate.vue b/src/components/app/Tabs/Explore/themesTemplate.vue
index f08737f..ce91de1 100644
--- a/src/components/app/Tabs/Explore/themesTemplate.vue
+++ b/src/components/app/Tabs/Explore/themesTemplate.vue
@@ -97,8 +97,7 @@ export default {
   position: relative;
   width: 250px;
   height: 350px;
-  background: #024253;
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.2);
   margin: 5px;
   border-radius: 4px;
   flex-shrink: 0;
@@ -107,9 +106,6 @@ export default {
   flex-shrink: 0;
   flex-direction: column;
   overflow: hidden;
-  &:hover {
-    opacity: 1;
-  }
   .top {
     display: flex;
     flex-direction: column;
@@ -142,7 +138,7 @@ export default {
   .bottom {
     display: flex;
     flex-direction: column;
-    background: #04333f;
+    background: rgba(0, 0, 0, 0.3);
     flex: 1;
     height: 100%;
     overflow: auto;
@@ -216,8 +212,8 @@ export default {
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 40px;
-      border-radius: 4px;
+      height: 36px;
+      border-radius: 2px;
       background: rgba(0, 179, 219, 0.8);
       transition: 0.2s;
       margin-right: 10px;
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index 1ef65f3..1760467 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -4,12 +4,7 @@
     <div class="changelog">
       <div class="change-log">
         <div v-for="(change, index) in changelog" :key="index" class="change">
-          <div
-            class="heading"
-            :style="
-              change.headColor ? `background-color: ${change.headColor}` : ``
-            "
-          >
+          <div class="heading" :class="{ 'latest-color': index === 0 }">
             <div class="date">{{ change.date }}</div>
             <div class="changes-title">{{ change.title }}</div>
           </div>
@@ -111,9 +106,12 @@ export default {
 }
 .heading {
   padding: 10px;
-  background: #042f3a;
+  background: rgba(0, 0, 0, 0.4);
   margin-bottom: 10px;
 }
+.latest-color {
+  background: rgb(19, 121, 255);
+}
 .information {
   overflow-wrap: break-word;
   margin: 10px;
@@ -122,11 +120,12 @@ export default {
   background: rgba(38, 139, 255, 0.87);
 }
 .change-log {
-  background: #054151;
+  background: rgba(0, 0, 0, 0.4);
   overflow-y: auto;
   max-width: 700px;
   width: 100%;
   margin: auto;
+  border-radius: 4px;
 }
 .changelog {
   display: flex;
@@ -153,7 +152,7 @@ export default {
   margin-bottom: 10px;
 }
 .see-all-button {
-  background: #172a2c;
+  background: rgba(0, 0, 0, 0.4);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -165,6 +164,6 @@ export default {
   transition: 0.2s;
 }
 .see-all-button:hover {
-  background: #0b1415;
+  background: rgba(0, 0, 0, 0.6);
 }
 </style>
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index d39810c..5c4c028 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -5,7 +5,7 @@
   >
     <transition name="slide-left">
       <server-list
-        v-if="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
+        v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
         class="left-panel"
       />
@@ -110,7 +110,7 @@ export default {
     right: 0;
     bottom: 0;
     z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
 }
 
@@ -119,7 +119,7 @@ export default {
     position: absolute;
     bottom: 0;
     z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
   .darken::after {
     content: "";
diff --git a/src/components/app/TypingStatus.vue b/src/components/app/TypingStatus.vue
index 18b6a63..bf3f72d 100644
--- a/src/components/app/TypingStatus.vue
+++ b/src/components/app/TypingStatus.vue
@@ -78,15 +78,22 @@ export default {
   transition: 0.3s;
   flex-shrink: 0;
   flex: 1;
+  padding: 3px;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  align-content: center;
+  align-content: center;
+  height: 20px;
 }
 .animation {
   height: 20px;
   width: 20px;
   display: flex;
+  align-self: center;
 }
 .text {
   margin: auto;
   margin-left: 5px;
-  font-size: 13px;
+  font-size: 12px;
 }
 </style>
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 33178b2..fd383ab 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -164,10 +164,10 @@ export default {
 }
 
 .friend:hover {
-  background: #053c4c;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .friend.selected {
-  background: #053240;
+  background-color: rgba(0, 0, 0, 0.4);
 }
 .profile-picture {
   height: 30px;
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index 5b4c348..2dcf993 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="friends">
-    <div class="tab" @click="expanded = !expanded">
-      <Tab :expanded="expanded" tabname="Offline" />
-    </div>
+    <Tab
+      @click.native="expanded = !expanded"
+      :expanded="expanded"
+      tabname="Offline"
+    />
     <transition name="list">
       <div v-if="expanded" class="list">
         <FriendsTemplate
@@ -71,6 +73,6 @@ export default {
   border-radius: 4px;
 }
 .tab:hover {
-  background: #053240;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index 40a0fc7..3481f5f 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="friends">
-    <div class="tab" @click="expanded = !expanded">
-      <Tab :expanded="expanded" tabname="Online" />
-    </div>
+    <Tab
+      @click.native="expanded = !expanded"
+      :expanded="expanded"
+      tabname="Online"
+    />
     <transition name="list">
       <div v-if="expanded" class="list">
         <FriendsTemplate
@@ -88,6 +90,6 @@ export default {
   border-radius: 4px;
 }
 .tab:hover {
-  background: #053240;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/src/components/app/relationships/PendingFriends.vue b/src/components/app/relationships/PendingFriends.vue
index fe0aca5..920da49 100644
--- a/src/components/app/relationships/PendingFriends.vue
+++ b/src/components/app/relationships/PendingFriends.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="pending-friends" v-if="friends && friends.length">
-    <div class="tab" @click="expanded = !expanded">
-      <Tab :expanded="expanded" tabname="Pending requests" />
-    </div>
+    <Tab
+      @click.native="expanded = !expanded"
+      :expanded="expanded"
+      tabname="Pending requests"
+    />
     <transition name="list">
       <div v-if="expanded" class="list">
         <PendingTemplate
@@ -62,8 +64,10 @@ export default {
 }
 .tab {
   transition: 0.3s;
+  margin: 4px;
+  border-radius: 4px;
 }
 .tab:hover {
-  background-color: rgba(0, 0, 0, 0.123);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/src/components/app/relationships/PendingTemplate.vue b/src/components/app/relationships/PendingTemplate.vue
index 6fdf95a..b24d311 100644
--- a/src/components/app/relationships/PendingTemplate.vue
+++ b/src/components/app/relationships/PendingTemplate.vue
@@ -107,7 +107,8 @@ export default {
 }
 
 .button {
-  background-color: rgba(65, 65, 65, 0.438);
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
   width: 30px;
   height: 30px;
   margin: 5px;
diff --git a/src/components/app/uploadsQueue.vue b/src/components/app/uploadsQueue.vue
index bb7cda7..9270426 100644
--- a/src/components/app/uploadsQueue.vue
+++ b/src/components/app/uploadsQueue.vue
@@ -33,11 +33,12 @@ export default {
 }
 .upload {
   color: white;
-  background: #26778a;
+  background: rgba(255, 255, 255, 0.2);
   margin: 10px;
   margin-left: 10px;
   display: flex;
   padding: 10px;
+  border-radius: 4px;
 }
 .icon {
   display: flex;
diff --git a/src/components/homePage/ProfilePopout.vue b/src/components/homePage/ProfilePopout.vue
index f4e5c4f..870ab9e 100644
--- a/src/components/homePage/ProfilePopout.vue
+++ b/src/components/homePage/ProfilePopout.vue
@@ -60,14 +60,15 @@ export default {
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-bottom: 15px solid #0f272a;
+  border-bottom: 15px solid rgba(0, 0, 0, 0.7);
 }
 .inner {
   right: 0;
   top: 15px;
   position: absolute;
   display: flex;
-  background: #0f272a;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
   border-radius: 5px;
   width: 300px;
   height: 60px;
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index c5f4201..6fcccb6 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -1,10 +1,19 @@
 const config = [
+  {
+    version: 9.5,
+    title: "New design and font!",
+    shortTitle: "",
+    date: "08/02/2019",
+    new: [
+      "New color scheme for Nertivia!",
+      "New font called 'Montserrat'. More font options are coming soon!"
+    ]
+  },
   {
     version: 9.3,
     title: "Saved Notes and bug fixes",
     shortTitle: "",
     date: "25/01/2019",
-    headColor: "#007792",
     new: ["You can now save your own messages in a separate log."],
     fix: ["Fixed a bug where some role colors would not show correctly."]
   },
diff --git a/src/views/404.vue b/src/views/404.vue
index fd9e52e..ee81ee5 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -65,7 +65,7 @@ body {
   display: flex;
   flex-direction: column;
   color: white;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 .app-content {
   display: flex;
@@ -94,7 +94,8 @@ body {
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background: #044050;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
 }
 .box .title {
   text-align: center;
diff --git a/src/views/App.vue b/src/views/App.vue
index f06b7f8..4ddc606 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app" ref="app" :class="{ desktop: isElectron }">
     <vue-headful :title="title" description="Nertivia Chat Client" />
-    <div class="background-image"></div>
+    <div class="background-color"></div>
     <transition name="fade-between-two" appear>
       <ConnectingScreen v-if="!loggedIn" />
       <div class="box" v-if="loggedIn">
@@ -370,15 +370,15 @@ export default {
 
 <style>
 textarea {
-  font-family: "Roboto", sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
 
-.background-image {
+.background-color {
   position: fixed;
   z-index: -1;
   width: 100%;
   height: 100%;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 
 .panel-layout {
diff --git a/src/views/GDriveCallback.vue b/src/views/GDriveCallback.vue
index 6b60428..cf27ad7 100644
--- a/src/views/GDriveCallback.vue
+++ b/src/views/GDriveCallback.vue
@@ -96,7 +96,7 @@ body {
   color: white;
   height: 100%;
   overflow: hidden;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 .app-content {
   display: flex;
@@ -135,7 +135,8 @@ body {
   justify-content: center;
   z-index: 9999;
   padding: 20px;
-  background: #044050;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
 }
 
 .loading {
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index f9db029..67db481 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -42,10 +42,14 @@
             The best chat client that won't restrict you from important and fun
             features.
           </div>
-          <img class="graphic" src="@/assets/graphics/HomeGraphics.webp" />
+          <img class="graphic" src="@/assets/graphics/Graphic.webp" />
           <div class="buttons">
-            <div class="button" @click="openApp">Open In Browser</div>
+            <div class="button" @click="openApp">
+              <div class="material-icons">open_in_browser</div>
+              Open In Browser
+              </div>
             <div class="button download" @click="showDownloadsPopout = true">
+              <div class="material-icons">vertical_align_bottom</div>
               Download App
             </div>
           </div>
@@ -236,7 +240,7 @@ body {
   flex-shrink: 0;
   border: 10px;
   position: relative;
-  background: #072834;
+  background: rgba(0, 0, 0, 0.2);
 }
 .logo {
   background: url("../assets/logo.png");
@@ -262,7 +266,7 @@ body {
   width: 100%;
   height: 100%;
   transition: 0.5s;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 .content {
   position: fixed;
@@ -309,26 +313,24 @@ body {
 }
 .button {
   padding: 15px;
-  background: rgba(24, 132, 255, 0.733);
+  background: rgba(0, 0, 0, 0.2);
   color: white;
   user-select: none;
   transition: 0.3s;
   margin: 10px;
   cursor: pointer;
   border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+.button .material-icons {
+  margin-right: 5px;
 }
 
 .button:hover {
-  background: rgb(24, 132, 255);
+  background: rgba(0, 0, 0, 0.4);
 }
 
-.button.download {
-  background: rgba(0, 223, 67, 0.733);
-}
-
-.button.download:hover {
-  background: rgba(0, 223, 67, 0.904);
-}
 
 .features-list {
   margin-top: 20px;
@@ -338,7 +340,7 @@ body {
   justify-content: center;
 }
 .feature {
-  background: #024352;
+  background: rgba(0, 0, 0, 0.4);
   color: white;
   margin: 10px;
   padding: 2px;
@@ -368,7 +370,7 @@ body {
 }
 .link {
   padding: 10px;
-  background: #25424d;
+  background: rgba(0, 0, 0, 0.2);
   user-select: none;
   margin-left: 5px;
   transition: 0.3s;
@@ -376,7 +378,7 @@ body {
   border-radius: 4px;
 }
 .link:hover {
-  background: rgba(255, 255, 255, 0.26);
+  background: rgba(0, 0, 0, 0.4);
 }
 .warn {
   color: red;
@@ -397,12 +399,14 @@ body {
   }
 }
 
-@media (max-width: 334px) {
+@media (max-width: 424px) {
   .buttons {
     flex-direction: column;
   }
   .buttons .button {
     text-align: center;
+    align-content: center;
+    justify-content: center;
   }
 }
 
diff --git a/src/views/Invites.vue b/src/views/Invites.vue
index c5d1759..ddcee84 100644
--- a/src/views/Invites.vue
+++ b/src/views/Invites.vue
@@ -139,7 +139,7 @@ body {
   flex-direction: column;
   color: white;
   height: 100%;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 .app-content {
   display: flex;
@@ -168,7 +168,8 @@ body {
   justify-content: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background: #044050;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
 }
 .server {
   display: flex;
@@ -180,10 +181,11 @@ body {
 }
 .invalid {
   margin-top: 15px;
+  align-items: center;
+  align-content: center;
+  text-align: center;
 }
-.red {
-  background: #9e1a1c;
-}
+
 .avatar {
   align-self: center;
   margin-bottom: 10px;
@@ -208,6 +210,7 @@ body {
   flex-shrink: 0;
   text-align: center;
   cursor: pointer;
+  border-radius: 4px;
 }
 .button:hover {
   background: rgb(25, 151, 255);
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index af0434e..bb2bfb6 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -218,7 +218,7 @@ body {
   flex-direction: column;
   color: white;
   height: 100%;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 .app-content {
   display: flex;
@@ -246,7 +246,7 @@ body {
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background: #043b4a;
+  background: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
 }
 .box .title {
@@ -279,7 +279,8 @@ form {
   margin: 10px;
   width: 80%;
   align-self: center;
-  background: #032b35;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
 }
 .input-text {
@@ -290,7 +291,8 @@ input {
   outline: none;
   padding: 10px;
   border: none;
-  background: #021b21;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   color: white;
 }
 .buttons {
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
index 1a70cdb..cd6698a 100644
--- a/src/views/RegisterPage.vue
+++ b/src/views/RegisterPage.vue
@@ -226,7 +226,7 @@ body {
   display: flex;
   flex-direction: column;
   color: white;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(to bottom, #005799 0, #0076d1);
 }
 .app-content {
   display: flex;
@@ -254,7 +254,7 @@ body {
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background: #043b4a;
+  background: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
 }
 .box .title {
@@ -287,7 +287,8 @@ form {
   margin: 10px;
   width: 80%;
   align-self: center;
-  background: #032b35;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
 }
 .input-text {
@@ -299,7 +300,8 @@ input {
   padding: 10px;
   border: none;
   background: none;
-  background: #021b21;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   color: white;
 }
 .buttons {