diff --git a/package-lock.json b/package-lock.json
index 5220498..82b8328 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -973,8 +973,7 @@
     "@types/node": {
       "version": "12.6.8",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
-      "integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
-      "dev": true
+      "integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -982,12 +981,26 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/react": {
+      "version": "16.9.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz",
+      "integrity": "sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
     "@types/socket.io-client": {
       "version": "1.4.32",
       "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.32.tgz",
@@ -1677,6 +1690,7 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3539,6 +3553,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+      "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
+    },
     "current-script-polyfill": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz",
@@ -4071,7 +4090,8 @@
     "entities": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "dev": true
     },
     "errno": {
       "version": "0.1.7",
@@ -7230,38 +7250,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-it": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-9.0.1.tgz",
-      "integrity": "sha512-XC9dMBHg28Xi7y5dPuLjM61upIGPJG8AiHNHYqIaXER2KNnn7eKnM5/sF0ImNnyoV224Ogn9b1Pck8VH4k0bxw==",
-      "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~1.1.1",
-        "linkify-it": "^2.0.0",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
-      }
-    },
-    "markdown-it-chat-formatter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/markdown-it-chat-formatter/-/markdown-it-chat-formatter-0.1.1.tgz",
-      "integrity": "sha512-RIGKubGe3wjvizsTqeeU+RIVS7b1bqAwZE0Xv7H15uxZxf3pdLQjpX+ATcInPkf1L2SY4Vl2do8nSliLBCutag==",
-      "requires": {
-        "markdown-it": "^9.0.1",
-        "markdown-it-underline": "^1.0.1",
-        "marked": "^0.7.0"
-      }
-    },
-    "markdown-it-underline": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/markdown-it-underline/-/markdown-it-underline-1.0.1.tgz",
-      "integrity": "sha1-Q6VKVB2V1zm0MVdwHx2jBtfDALI="
-    },
-    "marked": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
-      "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg=="
-    },
     "match-sorter": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-2.3.0.tgz",
@@ -7293,11 +7281,6 @@
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
       "dev": true
     },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10297,9 +10280,13 @@
       "dev": true
     },
     "simple-markdown": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.6.1.tgz",
-      "integrity": "sha512-02HKXvM9J7pJWf74fuWthcgof5jF81Yndt+XcXtWnEtpp8QaX9dUAJpdAA6KWrB/rSGzrOi0PRAVy9/0bJiIZw=="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.7.1.tgz",
+      "integrity": "sha512-9p92kPFjaDER1yuDgVW1UzFVQoL46HBonniqOLKnCmqn0vlxKkHIxRODBJdHLplo44tOtmnGxPTbUZ1HpYkHyg==",
+      "requires": {
+        "@types/node": ">=10.0.0",
+        "@types/react": ">=16.0.0"
+      }
     },
     "simple-swizzle": {
       "version": "0.2.2",
@@ -10721,7 +10708,8 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
     },
     "sshpk": {
       "version": "1.16.1",
@@ -11943,6 +11931,11 @@
         "vue-script2": "^2.0.3"
       }
     },
+    "vue-virtual-scroll-list": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.2.tgz",
+      "integrity": "sha512-jcXl1cYDxGZX+aF9vsUauXWnUkXm8oQxnvLTJ8UMTmMxwzbmlHX7vs0xGDdEej91vJpBNrdNNseWPxboTvI+UA=="
+    },
     "vuedraggable": {
       "version": "2.23.2",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
diff --git a/package.json b/package.json
index aee39c2..c6792c7 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "filesize": "^4.1.2",
     "highlight.js": "^9.15.8",
     "jquery": "^3.4.0",
+    "linkify-it": "^2.2.0",
     "match-sorter": "^2.3.0",
     "particles.js": "^2.0.0",
     "simple-markdown": "^0.7.1",
@@ -30,6 +31,7 @@
     "vue-socket.io": "^3.0.4",
     "vue-socket.io-extended": "^3.2.0",
     "vue-twitter": "^0.1.0",
+    "vue-virtual-scroll-list": "^1.4.2",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.0.1"
   },
diff --git a/src/components/app/EmojiPanels/emojiPanel.vue b/src/components/app/EmojiPanels/emojiPanel.vue
index 7af6986..457ffe1 100644
--- a/src/components/app/EmojiPanels/emojiPanel.vue
+++ b/src/components/app/EmojiPanels/emojiPanel.vue
@@ -36,6 +36,7 @@
           </div>
         </div>
 
+        <!-- Custom Emojis Category  -->
         <div v-for="(group, index) in groups" :key="group" class="category">
           <div class="category-name">{{ group }}</div>
           <div class="list">
@@ -398,7 +399,7 @@ export default {
   position: absolute;
   bottom: 10px;
   right: 20px;
-  max-width: 390px;
+  max-width: 410px;
   width: calc(100% - 50px);
   display: flex;
   flex-direction: column;
@@ -406,15 +407,11 @@ export default {
 }
 
 .emoji-panel-inner {
-  background: rgba(255, 255, 255, 0.61);
+  background: rgb(32, 32, 32);
   transition: 0.3s;
-  border-radius: 5px;
-  padding: 3px;
   z-index: 99999;
 }
-.emoji-panel-inner:hover {
-  background: rgba(255, 255, 255, 0.685);
-}
+
 .emojis-list {
   color: white;
   padding: 5px;
@@ -430,9 +427,10 @@ export default {
 .category {
 }
 .category-name {
-  padding: 10px;
+  padding: 5px;
+  padding-left: 3px;
   text-transform: capitalize;
-  color: rgb(93, 93, 93);
+  color: rgb(195, 195, 195);
 }
 .list {
 }
@@ -444,7 +442,6 @@ export default {
   overflow: hidden;
   margin: 4px;
   padding: 2px;
-  border-radius: 5px;
   min-width: 30px;
   cursor: pointer;
 }
@@ -459,14 +456,11 @@ export default {
   align-self: center;
   padding-top: 5px;
   padding-bottom: 5px;
-  margin-top: 10px;
-  background: rgb(161, 161, 161);
-  border-radius: 5px;
   transition: 0.3s;
   overflow: auto;
 }
 .tabs img {
-  height: 20px;
+  height: 18px;
   width: auto;
   margin: auto;
   filter: grayscale(100%);
@@ -480,14 +474,13 @@ export default {
 }
 .tab {
   background: rgba(59, 59, 59, 0.521);
-  border-radius: 5px;
   margin-left: 3px;
   margin-right: 3px;
   display: flex;
   flex-direction: column;
   transition: 0.1s;
   height: 35px;
-  width: 32px;
+  width: 35px;
   overflow: hidden;
   align-content: center;
   align-items: center;
@@ -517,29 +510,34 @@ export default {
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-top: 15px solid rgba(255, 255, 255, 0.61);
+  border-top: 15px solid rgb(32, 32, 32);
 
   align-self: flex-end;
-  margin-right: 70px;
+  margin-right: 60px;
 }
 .tooltip {
   display: none;
   position: absolute;
   margin: auto;
-  background: rgba(29, 29, 29, 0.664);
+  background: rgb(29, 29, 29);
   padding: 10px;
-  border-radius: 5px;
   bottom: -20px;
   text-transform: capitalize;
   user-select: none;
 }
+
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
 </style>
 <style>
 img.panel.emoji {
   margin: auto;
   padding: 2px;
   object-fit: contain;
-  height: 2em;
-  width: 2em;
+  height: 1.6em;
+  width: 1.6em;
 }
 </style>
diff --git a/src/components/app/EmojiPanels/emojiSuggestions.vue b/src/components/app/EmojiPanels/emojiSuggestions.vue
index f417ad8..e2c9366 100644
--- a/src/components/app/EmojiPanels/emojiSuggestions.vue
+++ b/src/components/app/EmojiPanels/emojiSuggestions.vue
@@ -90,10 +90,6 @@ export default {
 
 
 <style scoped>
-.custom-emoji {
-  height: 1.5em;
-  width: auto;
-}
 .selected {
   background: rgba(66, 66, 66, 0.89);
 }
@@ -109,7 +105,6 @@ export default {
   color: white;
   padding: 5px;
   transition: 0.3s;
-  border-radius: 5px;
   user-select: none;
   cursor: default;
 }
@@ -127,9 +122,10 @@ export default {
 }
 .emojiItem {
   display: flex;
-  padding: 5px;
+  padding: 2px;
   align-content: center;
   align-items: center;
+  cursor: pointer;
 }
 @media (max-height: 441px) {
   .emoji-suggetions-list {
@@ -141,8 +137,8 @@ export default {
 <style>
 .emoji-suggetions-list img.emoji {
   object-fit: contain;
-  height: 2em;
-  width: 2em;
+  height: 1.6em;
+  width: 1.6em;
   margin: 1px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/app/Popouts/Popouts/AddFriend.vue b/src/components/app/Popouts/Popouts/AddFriend.vue
index 5b003a1..5a6992c 100644
--- a/src/components/app/Popouts/Popouts/AddFriend.vue
+++ b/src/components/app/Popouts/Popouts/AddFriend.vue
@@ -92,18 +92,21 @@ export default {
 .add-friend {
   height: 300px;
   width: 400px;
-  background: rgba(24, 24, 24, 0.9);
   backdrop-filter: blur(10px);
   display: flex;
   flex-direction: column;
   position: relative;
   margin: auto;
   overflow: hidden;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .header {
   display: flex;
   flex-shrink: 0;
-  background-color: rgba(41, 41, 41, 0.801);
+  background-color: #085053;
   color: white;
   height: 50px;
   align-content: center;
@@ -132,11 +135,6 @@ export default {
   margin-top: 40px;
 }
 
-.tag {
-  color: white;
-  background: transparent;
-  border: solid 1px #afafaf;
-}
 .description {
   margin-bottom: 30px;
 }
@@ -144,10 +142,10 @@ export default {
   align-self: center;
   color: white;
   width: initial;
-  background: #1998ff;
+  background: #05353b;
   cursor: pointer;
   &:hover {
-    background: #157fd6;
+    background: #0f292c;
   }
 }
 
diff --git a/src/components/app/Popouts/Popouts/AddServer.vue b/src/components/app/Popouts/Popouts/AddServer.vue
index 562814a..770795c 100644
--- a/src/components/app/Popouts/Popouts/AddServer.vue
+++ b/src/components/app/Popouts/Popouts/AddServer.vue
@@ -37,19 +37,20 @@
           <div class="button check-button" @click="checkInviteCode">Check</div>
         </div>
         <div v-if="tab == 2" key="join-server" class="content server">
-          <profile-picture class="avatar" size="100px" :url="avatar + server.avatar" />
+          <profile-picture class="avatar found" size="100px" :url="avatar + server.avatar" />
           <div class="server-name">{{ server.name }}</div>
           <div class="buttons">
+            <div
+              class="button cancel-button"
+              @click="server = null; inviteCode = ''; tab = 1; slideBack();"
+            >Cancel</div>
             <div
               v-if="!servers[server.server_id]"
               class="button join-button"
               @click="joinButton"
             >Join</div>
             <div v-if="servers[server.server_id]" class="button join-button button-clicked">Joined</div>
-            <div
-              class="button cancel-button"
-              @click="server = null; inviteCode = ''; tab = 1; slideBack();"
-            >Cancel</div>
+
           </div>
         </div>
       </transition-group>
@@ -212,18 +213,20 @@ export default {
   height: 100%;
   max-height: 450px;
   width: 400px;
-  background: rgb(32, 32, 32);
   display: flex;
   flex-direction: column;
   color: white;
-  border-radius: 10px;
   overflow: hidden;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .tabs {
   display: flex;
   justify-content: center;
   padding-top: 15px;
-  background: rgb(27, 27, 27);
+  background: #144a59;
   flex-shrink: 0;
 }
 .tab {
@@ -233,17 +236,17 @@ export default {
   padding-bottom: 5px;
   margin-left: 10px;
   margin-right: 10px;
-  border-bottom: solid 1px rgba(255, 255, 255, 0);
+  border-bottom: solid 5px rgba(255, 255, 255, 0);
   user-select: none;
   cursor: pointer;
   transition: 0.3s;
   font-size: 20px;
 }
 .selected {
-  border-bottom: solid 1px white !important;
+  border-bottom: solid 5px white !important;
 }
 .tab:hover {
-  border-bottom: solid 1px rgb(107, 107, 107);
+  border-bottom: solid 5px rgb(107, 107, 107);
 }
 
 .content {
@@ -281,13 +284,10 @@ export default {
   align-self: center;
   margin-top: 15px;
   margin-bottom: 10px;
-  background: rgb(44, 44, 44);
-  padding: 5px;
-  border-radius: 10px;
-}
-.input input {
-  border-radius: 5px;
+  background-color: #06454d;
+  padding: 10px;
 }
+
 .title {
   text-align: center;
   margin: 20px;
@@ -301,34 +301,24 @@ export default {
 
 .button {
   padding: 5px;
-  background: rgba(25, 151, 255, 0.699);
-  border-radius: 5px;
+  background: #05353b;
   user-select: none;
   border: none;
   color: white;
   font-size: 17px;
   outline: none;
   transition: 0.2s;
-  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
   align-self: center;
   margin: 5px;
+  cursor: pointer;
 }
 .button:hover {
-  background: rgb(25, 151, 255);
-}
-.button:focus {
-  background: rgb(25, 151, 255);
-}
-.button:active {
-  background: rgb(25, 151, 255);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
+  background: #0f292c;
 }
 
 .button-clicked {
   background: rgb(126, 126, 126) !important;
-  transform: translate(3px, 3px) !important;
-  box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
+
 }
 
 .create-button {
@@ -371,26 +361,21 @@ export default {
 }
 
 .cancel-button {
-  margin-left: 5px !important;
-  background: rgba(238, 55, 55, 0.521);
-  box-shadow: 3px 3px rgb(85, 28, 28);
+  margin-right: 5px !important;
+  background: rgba(245, 49, 49, 0.856);
 }
 
 .cancel-button:hover {
   background: rgb(238, 55, 55);
 }
-.cancel-button:focus {
-  background: rgb(25, 151, 255);
-}
-.cancel-button:active {
-  background: rgb(238, 55, 55);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgb(85, 28, 28);
-}
+
 .icon {
   font-size: 80px;
   margin-top: 40px;
   margin-bottom: 5px;
 }
+.found {
+  margin-top: 70px;
+}
 </style>
 
diff --git a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
index 8df6ea9..7ff17db 100644
--- a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
+++ b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
@@ -95,6 +95,10 @@ export default {
   flex-direction: column;
   color: white;
   border-radius: 3px;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .text {
   color: white;
@@ -140,8 +144,7 @@ export default {
   margin: auto;
   background: rgb(32, 118, 255);
   padding: 10px;
-  border-radius: 2px;
-  cursor: default;
+  cursor: pointer;
   user-select: none;
   transition: 0.3s;
   margin-left: 10px;
diff --git a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
index d40a05c..27a6f99 100644
--- a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
+++ b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
@@ -106,12 +106,14 @@ export default {
   margin: auto;
   height: 400px;
   width: 400px;
-  background: rgb(32, 32, 32);
   display: flex;
   flex-direction: column;
   color: white;
-  border-radius: 10px;
   overflow: hidden;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .top {
   display: flex;
@@ -123,19 +125,20 @@ export default {
 
 .button {
   padding: 10px;
-  background: rgba(0, 162, 255, 0.719);
+  background: #05353b;
   margin: auto;
-  border-radius: 10px;
   transition: 0.3s;
   user-select: none;
+  cursor:pointer;
 }
 .button:hover {
-  background: rgb(0, 162, 255);
+  background: #0f292c;
 }
 
 .bottom {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .title {
   margin: 10px;
@@ -153,7 +156,6 @@ export default {
   background: rgba(0, 0, 0, 0.274);
   margin: 5px;
   padding: 10px;
-  border-radius: 10px;
 }
 </style>
 
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
index c93268f..ec7d1ef 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
@@ -46,17 +46,16 @@ export default {
 }
 .warning {
   background: red;
-  border-radius: 10px;
   padding: 10px;
-  margin: 10px;
+  margin-bottom: 10px;
 }
 .button {
   padding: 10px;
   background: rgba(255, 0, 0, 0.719);
   margin: auto;
-  border-radius: 10px;
   transition: 0.3s;
   user-select: none;
+  cursor: pointer;
 }
 .button:hover {
   background: rgb(255, 0, 0);
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
index 032443a..3963265 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
@@ -84,10 +84,9 @@ export default {
   overflow: auto;
   .member {
     display: flex;
-    background: rgb(54, 54, 54);
+    background: #06454d;
     height: 30px;
     margin: 5px;
-    border-radius: 5px;
     padding: 5px;
     align-content: center;
     align-items: center;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
index d6ace26..a149fd5 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
@@ -182,16 +182,14 @@ export default {
   position: relative;
 }
 .channels-list {
-  background: #161616e5;
+  background: #082326;
   height: 100%;
   width: 165px;
   flex-shrink: 0;
   overflow: auto;
 }
 .channel {
-  border-radius: 5px;
   padding: 5px;
-  margin: 5px;
   user-select: none;
   cursor: pointer;
   transition: 0.3s;
@@ -209,10 +207,10 @@ export default {
   align-self: center;
 }
 .channel:hover {
-  background: rgba(58, 58, 58, 0.849);
+  background: #06454d;
 }
 .channel.selected {
-  background: rgb(58, 58, 58);
+  background: #064c55;
 }
 .add-channel-button {
   background: rgba(17, 148, 255, 0.692);
@@ -228,9 +226,8 @@ export default {
   overflow: hidden;
 }
 .button {
-  background: rgba(17, 148, 255, 0.692);
+  background: #05353b;
   padding: 10px;
-  border-radius: 5px;
   align-self: center;
   margin: 5px;
   cursor: pointer;
@@ -238,7 +235,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: rgb(17, 148, 255);
+  background: #0f292c;
 }
 .button.warn {
   background: rgba(255, 17, 17, 0.692);
@@ -269,14 +266,14 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background: rgba(22, 22, 22, 0.87);
-  border-radius: 10px;
-  padding: 5px;
-  margin: 5px;
+  background-color: #06454d;
+  padding: 10px;
+  margin: 10px;
 }
 .input input {
-  border-radius: 5px;
   width: initial;
+  margin-top: 2px;
+  margin-bottom: 0;
 }
 
 .check-box {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
index 9583e63..3267428 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
@@ -189,9 +189,8 @@ export default {
 }
 
 .toggle {
-  background: rgb(46, 46, 46);
-  border-radius: 5px;
-  padding: 5px;
+  background-color: #06454d;
+  padding: 10px;
   margin-left: 10px;
   display: flex;
   flex-direction: column;
@@ -203,7 +202,6 @@ export default {
     .box {
       width: 20px;
       height: 20px;
-      border-radius: 5px;
       background: rgb(95, 95, 95);
       margin-right: 5px;
       &.selected {
@@ -218,9 +216,8 @@ export default {
 }
 
 .input {
-  background: rgb(46, 46, 46);
-  border-radius: 5px;
-  padding: 5px;
+  background-color: #06454d;
+  padding: 10px;
   margin: 10px;
   align-self: flex-start;
   height: 155px;
@@ -231,12 +228,13 @@ export default {
     margin-bottom: 5px;
   }
   textarea {
-    background: rgb(34, 34, 34);
+  background: #05353b;
     resize: none;
     outline: none;
+    margin-top: 2px;
+    margin-bottom: 0;
     padding: 10px;
     border: none;
-    border-radius: 5px;
     color: white;
     flex: 1;
   }
@@ -247,8 +245,7 @@ export default {
 
 .button {
   padding: 10px;
-  background: rgba(17, 148, 255, 0.692);
-  border-radius: 10px;
+  background: #05353b;
   -webkit-transition: background 0.3s;
   transition: 0.3s;
   -webkit-user-select: none;
@@ -262,7 +259,7 @@ export default {
 }
 
 .button:hover {
-  background: rgb(17, 148, 255);
+  background: #0f292c;
 }
 .button.disabled {
   background: grey;
diff --git a/src/components/app/Popouts/Popouts/Settings.vue b/src/components/app/Popouts/Popouts/Settings.vue
index da34bec..b7cc72f 100644
--- a/src/components/app/Popouts/Popouts/Settings.vue
+++ b/src/components/app/Popouts/Popouts/Settings.vue
@@ -125,13 +125,14 @@ export default {
 .settings-box {
   height: 600px;
   display: flex;
-
   margin: auto;
-  border-radius: 10px;
   overflow: hidden;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .tabs {
-  background: rgba(24, 24, 24, 0.938);
   height: 100%;
   width: 200px;
   min-width: 150px;
@@ -139,21 +140,17 @@ export default {
   overflow-x: hidden;
   flex-shrink: 0;
   position: relative;
+  background: #02292c;
 }
 .panel {
   display: flex;
   flex-direction: column;
-  background: rgba(31, 31, 31, 0.924);
   height: 100%;
   width: 600px;
 }
 .tab {
   display: flex;
   padding: 10px;
-  background: rgba(26, 26, 26, 0.233);
-  border-radius: 5px;
-  margin-top: 5px;
-  margin-bottom: 5px;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
@@ -162,14 +159,17 @@ export default {
 .tab-name {
   margin-left: 10px;
 }
-.tab.selected {
-  background: rgb(61, 61, 61) !important;
-}
-
 
 .tab:hover {
-  background: rgba(61, 61, 61, 0.616);
+  background: #08616b;
 }
+
+.tab.selected {
+  background: #064c55;
+}
+
+
+
 .tab.warn{
   position: absolute;
   bottom: 0;
@@ -182,7 +182,7 @@ export default {
   display: flex;
   padding: 10px;
   font-size: 25px;
-  background: rgb(20, 20, 20);
+  background: #02292c;
 }
 .title .material-icons {
   font-size: 40px;
@@ -204,7 +204,7 @@ export default {
   transition: 0.3s;
 }
 .close-button:hover {
-  background: rgba(37, 37, 37, 0.692);
+  background: #064f56;
 }
 .close-button .material-icons {
   margin: auto;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
index dd0965a..4f9d3ee 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
@@ -221,11 +221,10 @@ export default {
 .change-avatar-container {
   display: flex;
   flex-direction: column;
-  background: rgb(42, 42, 42);
+  background-color: #06454d;
   width: 150px;
   align-self: center;
   padding: 20px;
-  border-radius: 10px;
   margin-top: 10px;
 }
 .avatar {
@@ -236,16 +235,18 @@ export default {
   display: none;
 }
 .button {
-  background: #5394fc;
+  background: #05353b;
   padding: 10px;
   text-align: center;
-  border-radius: 5px;
   display: inline-block;
   align-self: center;
   cursor: pointer;
   transition: 0.3s;
 }
-.disabled {
+.button:hover {
+  background: #0f292c;
+}
+.button.disabled {
   background: grey;
 }
 .left {
@@ -258,10 +259,9 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: rgb(42, 42, 42);
+  background-color: #06454d;
   padding: 10px;
-  border-radius: 10px;
-  margin: 5px;
+  margin: 10px;
   margin-left: 30px;
   flex-shrink: 0;
 }
@@ -278,7 +278,6 @@ export default {
 }
 .outer-input input {
   width: initial;
-  border-radius: 5px;
 }
 
 .save-button {
@@ -288,7 +287,6 @@ export default {
   display: block;
   padding: 10px 0px 10px 0px;
   margin: 0;
-  border-radius: 10px;
 }
 
 .errors {
@@ -298,6 +296,7 @@ export default {
   user-select: none;
   cursor: pointer;
   margin-left: 35px;
+  color: white;
 }
 .link:hover {
   text-decoration: underline;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
index 3867548..9fba334 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
@@ -213,6 +213,12 @@ input:focus {
   position: relative;
   overflow: hidden;
   flex-shrink: 0;
+  cursor: pointer;
+  color: rgb(185, 185, 185);
+  transition: 0.2s;
+}
+.delete-button:hover {
+  color: white;
 }
 .delete-button .material-icons {
   margin: auto;
@@ -220,26 +226,14 @@ input:focus {
   z-index: 999;
 }
 
-.delete-button:hover > .inner {
-  width: 100%;
-}
-
-.delete-button .inner {
-  background: rgba(255, 0, 0, 0.205);
-  position: absolute;
-  height: 100%;
-  width: 0%;
-  right: 0;
-  transition: 0.3s;
-  border-top-left-radius: 60px;
-  border-bottom-left-radius: 60px;
-}
 
 .preview {
-  height: 30px;
-  width: auto;
   margin-left: 10px;
   margin-right: 10px;
+  object-fit: contain;
+  height: 2em;
+  width: 2em;
+  vertical-align: -9px;
 }
 .title {
   margin: 10px;
@@ -255,7 +249,7 @@ input:focus {
 .emojis-list {
   display: flex;
   flex-direction: column;
-  background: rgba(47, 47, 47, 0.767);
+  background-color: #06454d;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
@@ -265,11 +259,9 @@ input:focus {
 }
 
 .emoji {
-  background: rgba(63, 63, 63, 0.411);
   height: 50px;
-  width: calc(100% - 10px);
   display: flex;
-  margin: 5px;
+  width: 100%;
   align-items: center;
   transition: 0.3s;
   user-select: none;
@@ -277,7 +269,7 @@ input:focus {
   flex-shrink: 0;
 }
 .emoji:hover {
-  background: rgba(75, 75, 75, 0.712);
+  background: #0a3f46;
 }
 .emoji-name {
   margin: auto;
@@ -288,15 +280,14 @@ input:focus {
   display: inline-block;
   width: inherit;
   padding: 10px;
-  border-radius: 5px;
-  background: rgba(54, 54, 54, 0.603);
+  background: #05353b;
   margin-bottom: 10px;
   margin-left: 20px;
   user-select: none;
   transition: 0.3s;
 }
 .button:hover {
-  background: rgb(54, 54, 54);
+  background: #0f292c;
 }
 .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 37bb504..db8202a 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="my-profile-panel">
-    <div class="title">
-      Message Example
-    </div>
     <div class="message-example">
       <message-template
         message="Hi"
@@ -31,17 +28,19 @@
         :date="Date.now()"
       />
     </div>
-    <div class="title">
-      Options
-    </div>  
-    <div class="switches">
-      <div
-        class="checkbox"
-        @click="toggleAppearance"
-      >
-        <div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
-        <div class="checkbox-name">
-          Show my messages on the right side.
+    <div class="options">
+      <div class="title">
+        Options
+      </div>  
+      <div class="switches">
+        <div
+          class="checkbox"
+          @click="toggleAppearance"
+        >
+          <div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
+          <div class="checkbox-name">
+            Show my messages on the right side.
+          </div>
         </div>
       </div>
     </div>
@@ -98,6 +97,7 @@ export default {
 
 .checkbox {
   display: flex;
+  cursor: pointer;
 }
 .checkbox-box {
   background: rgba(88, 88, 88, 0.74);
@@ -106,7 +106,6 @@ export default {
   margin: auto;
   margin-right: 10px;
   transition: 0.3s;
-  border-radius: 5px;
 }
 
 .checkbox-box.selected {
@@ -126,9 +125,7 @@ export default {
 
 .message-example{
   padding: 10px;
-  background: rgba(88, 88, 88, 0.44);
-  border-radius: 10px;
-  margin: 10px;
+  background: #173d42;
 }
 .title{
   font-size: 20px;
@@ -143,9 +140,13 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
-  margin-top: 10px;
   flex-direction: column;
   overflow: auto;
 }
 
+.options {
+  background-color: #06454d;
+  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 2354334..a8b4469 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -119,7 +119,7 @@ export default {
 .tabs{
   z-index: 999999;
   display: flex;
-  background: rgb(47, 47, 47);
+  background: #04383d;
   justify-content: center;
 }
 .tabs .tab {
@@ -138,9 +138,7 @@ export default {
   bottom:0;
   left:0;
   right:0;
-  background:rgba(255, 255, 255, 0);
   height:5px;
-  border-radius:10px;
   transition: 0.3s;
 }
 
@@ -220,8 +218,5 @@ export default {
 }
 .alert-button:hover {
   background: rgb(83, 53, 53);
-}
-@media (max-width: 815px) {
-
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue b/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue
index 23fb1d1..dc6d202 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue
@@ -99,6 +99,7 @@ export default {
 .checkbox {
   display: flex;
   margin-top: 10px;
+  cursor: pointer;
 }
 .checkbox-box {
   background: rgba(88, 88, 88, 0.74);
@@ -106,7 +107,6 @@ export default {
   width: 20px;
   margin-right: 10px;
   transition: 0.3s;
-  border-radius: 5px;
 }
 
 .checkbox-box.selected {
@@ -143,7 +143,7 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
-  margin-top: 10px;
   flex-direction: column;
+  background:#09464f;
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue b/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue
index f95f1c0..b580a1d 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue
@@ -75,7 +75,6 @@ export default {
   margin-top: auto;
   margin-bottom: auto;
   transition: 0.3s;
-  border-radius: 5px;
 }
 
 .checkbox-box.selected {
@@ -111,8 +110,8 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
-  margin-top: 10px;
   flex-direction: column;
+  background:#09464f;
 }
 
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 517ef2f..7d931bb 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -157,7 +157,7 @@ export default {
 
 <style scoped>
 .notice {
-  color: grey;
+  color: rgb(216, 216, 216);
   font-size: 15px;
   margin-top: 10px;
   margin-left: 30px;
@@ -226,18 +226,17 @@ export default {
 }
 .survey .button {
   color: white;
-  background: rgb(27, 114, 255);
-  border-radius: 5px;
+  background: #05353b;
   padding-top: 10px;
   padding-bottom: 10px;
   width: 100%;
   text-align: center;
   transition: 0.3s;
   user-select: none;
-  cursor: default;
+  cursor: pointer;
 }
 .survey .button:hover {
-  background: rgb(0, 98, 255);
+  background: #0f292c;
 }
 
 .title {
@@ -250,8 +249,7 @@ export default {
   user-select: none;
 }
 .title .material-icons {
-  color: cyan;
-  margin-right: 10px;
+  margin-right: 5px;
   font-size: 30px;
 }
 
diff --git a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
index c618307..74c37e3 100644
--- a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
+++ b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
@@ -72,13 +72,15 @@ export default {
   display: flex;
   flex-direction: column;
   margin: auto;
-  background-color: rgba(43, 43, 43, 0.959);
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
   padding: 10px;
-  border-radius: 20px;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .survay-icon .material-icons{
-  color: cyan;
+  color: white;
   font-size: 120px;
 }
 .survay-icon {
@@ -97,17 +99,16 @@ export default {
 .button {
   padding: 10px;
   margin: 3px;
-  background: rgb(27, 133, 255);
-  border-radius: 5px;
+  background: #05353b;
   transition: 0.3s;
   user-select: none;
-  cursor: default;
+  cursor: pointer;
 }
 .valid {
-  background: rgba(27, 133, 255, 0.767);
+  background: #05353b;
 }
 .valid:hover{
-  background: rgb(27, 133, 255);
+  background: #0f292c;
 }
 .warning {
   background: rgba(255, 27, 27, 0.589)
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index c750183..f30341c 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -225,7 +225,7 @@ export default {
 
 .card {
   background: black;
-  height: 200px;
+  height: 180px;
   border-radius: 5px;
   margin: 5px;
   padding: 10px;
@@ -240,10 +240,10 @@ export default {
   }
   .button {
     background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
     padding: 5px;
-    font-size: 15px;
+    font-size: 17px;
     margin-top: 15px;
+    flex-shrink: 0;
     cursor: pointer;
     transition: 0.3s;
     color: rgba(255, 255, 255, 0.924);
diff --git a/src/components/app/errorsListTemplate.vue b/src/components/app/errorsListTemplate.vue
index fd460c9..ebcb8f5 100644
--- a/src/components/app/errorsListTemplate.vue
+++ b/src/components/app/errorsListTemplate.vue
@@ -18,7 +18,6 @@ export default {
 .errors{
   background: rgb(255, 62, 62);
   color: white;
-  border-radius: 10px;
   padding: 10px;
 }
 
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 1a28c00..a1b2fdd 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -20,6 +20,10 @@
     <div v-if="notifications && notifications >0" class="notification">
       <div class="notification-inner">{{ notifications }}</div>
     </div>
+    <!-- doesnt work properly. if both channels closed, the chat gets wiped. -->
+    <!-- <div v-else-if="recents" class="material-icons close-button" @click="closeChannel">
+      close
+    </div> -->
   </div>
 </template>
 
@@ -32,7 +36,7 @@ import { bus } from "@/main";
 
 export default {
   // tree will add padding to the left.
-  props: ["username", "tag", "channelID", "uniqueID", "recipient", "tree"],
+  props: ["username", "tag", "channelID", "uniqueID", "recipient", "tree", "recents"],
   data() {
     return {
       hover: false
@@ -79,8 +83,12 @@ export default {
     }
   },
   methods: {
+    async closeChannel(event) {
+      this.channelID
+      await channelService.delete(this.channelID)
+    },
     async openChat(event) {
-      if (event.target.closest(".profile-picture")) return;
+      if (event.target.closest(".profile-picture") || event.target.closest(".close-button")) return;
       bus.$emit("closeLeftMenu");
       // dismiss notification if exists
       // TODO move this into openchat or something :/
@@ -221,5 +229,21 @@ export default {
   opacity: 1;
   height: 13px;
 }
+
+.close-button {
+  flex-shrink: 0;
+  height: 100%;
+  display: none;
+  align-self: center;
+  color: rgb(207, 207, 207);
+  transition: 0.2s;
+  font-size: 18px;
+}
+.close-button:hover {
+  color: white;
+}
+.friend:hover .close-button {
+  display: flex;
+}
 </style>
 
diff --git a/src/components/app/relationships/RecentFriends.vue b/src/components/app/relationships/RecentFriends.vue
index 33dd0c6..12f745f 100644
--- a/src/components/app/relationships/RecentFriends.vue
+++ b/src/components/app/relationships/RecentFriends.vue
@@ -5,6 +5,7 @@
         <FriendsTemplate
           v-for="(channel, key) of channels"
           :key="key"
+          :recents="true"
           :channel-i-d="channel.channelID"
           :recipient="channel.recipients[0]"
         />
diff --git a/src/services/channelService.js b/src/services/channelService.js
index 6b41018..924b636 100644
--- a/src/services/channelService.js
+++ b/src/services/channelService.js
@@ -3,5 +3,8 @@ import {instance, wrapper} from './Api';
 export default {
   post ( uniqueID )  {
     return wrapper(instance().post(`channels/${ uniqueID }`));
+  },
+  delete ( channelID )  {
+    return wrapper(instance().delete(`channels/${ channelID }`));
   }
 }
\ No newline at end of file