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/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 44f2975..23ebb14 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -841,7 +841,7 @@ export default {
   top: -25px;
   left: 0;
   right: 0;
-  z-index: 999999;
+  z-index: 1;
 }
 .hidden {
   display: none;
@@ -1006,7 +1006,7 @@ export default {
   border-radius: 100px;
   color: white;
   position: absolute;
-  bottom: 15px;
+  bottom: 30px;
   right: 25px;
   height: 52px;
   z-index: 2;
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index 0b5dc01..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);
   }
 }
 
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/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/uploadDialog.vue b/src/components/app/Popouts/Popouts/uploadDialog.vue
index bf75bf1..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;
@@ -286,7 +294,8 @@ export default {
 }
 .chat-input {
   font-family: "Montserrat", sans-serif;
-  background: #014655;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   color: white;
   width: 100%;
   height: 20px;
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/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/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..fdf4eeb 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -44,8 +44,12 @@
           </div>
           <img class="graphic" src="@/assets/graphics/HomeGraphics.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;
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 {