diff --git a/src/assets/hammer4.0.svg b/src/assets/hammer4.0.svg
new file mode 100644
index 0000000..a65ce66
--- /dev/null
+++ b/src/assets/hammer4.0.svg
@@ -0,0 +1,20 @@
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
+ <defs>
+  <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
+   <feGaussianBlur stdDeviation="0"/>
+  </filter>
+ </defs>
+ <g>
+  <title>background</title>
+  <rect x="-1" y="-1" width="502" height="502" id="canvas_background" fill="none"/>
+  <g id="canvasGrid" display="none">
+   <rect id="svg_3" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/>
+  </g>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <rect stroke="#000" fill="#ff3b3b" stroke-width="0" x="234.536815" y="24.865021" width="91.926378" height="511.269947" id="svg_1" rx="5" filter="url(#svg_2_blur)" transform="rotate(-45 280.4999999999999,280.49999999999994) "/>
+  <rect stroke="#000" fill="#ff3b3b" stroke-width="0" x="0.811563" y="79.83451" width="271.661204" height="113.615313" id="svg_4" rx="5" filter="url(#svg_2_blur)" transform="rotate(-45 136.6421661376953,136.6421661376953) "/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index ef931a2..972aba9 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -510,8 +510,11 @@ $message-color: #03222b;
   color: rgb(231, 231, 231);
   margin: auto 0;
   overflow: hidden;
+  border-radius: 4px;
+  border-bottom-left-radius: 0;
 }
 .ownMessageLeft .content {
+  border-radius: 4px;
   border-bottom-right-radius: 0;
 }
 .image-content {
diff --git a/src/components/app/Popouts/Popouts/ServerContextMenu.vue b/src/components/app/Popouts/Popouts/ServerContextMenu.vue
index 139bffe..ce102a0 100644
--- a/src/components/app/Popouts/Popouts/ServerContextMenu.vue
+++ b/src/components/app/Popouts/Popouts/ServerContextMenu.vue
@@ -1,18 +1,24 @@
 <template>
   <div class="drop-down-menu" v-click-outside="outsideClick">
-    <div class="item" @click="createInvite">Manage Invites</div>
+    <div class="item" @click="createInvite">
+      <div class="material-icons">settings</div>
+      <div class="name">Manage Invites</div>
+    </div>
     <div
       class="item"
       v-if="checkServerCreator || hasAdminRoles"
       @click="showSettings"
     >
-      Server Settings
+      <div class="material-icons">settings</div>
+      <div class="name">Server Settings</div>
     </div>
     <div class="item warn" v-if="!checkServerCreator" @click="leaveServer">
-      Leave Server
+      <div class="material-icons">exit_to_app</div>
+      <div class="name">Leave Server</div>
     </div>
     <div class="item" @click="copyServerID">
-      Copy Server ID
+      <div class="material-icons">developer_board</div>
+      <div class="name">Copy ID</div>
     </div>
   </div>
 </template>
@@ -132,15 +138,23 @@ export default {
   z-index: 99999;
   user-select: none;
   color: white;
+  overflow: hidden;
+  border-radius: 4px;
 }
 
 .item {
+  display: flex;
+  align-items: center;
   padding: 10px;
-  transition: 0.3s;
+  transition: 0.2s;
   font-size: 13px;
   cursor: pointer;
+  .material-icons {
+    font-size: 20px;
+    margin-right: 5px;
+  }
   &:hover {
-    background: rgba(46, 46, 46, 0.651);
+    background: rgba(255, 255, 255, 0.2);
   }
   &.warn {
     color: rgb(255, 59, 59);
diff --git a/src/components/app/Popouts/Popouts/ServerMemberContext.vue b/src/components/app/Popouts/Popouts/ServerMemberContext.vue
index 6533386..0c0c580 100644
--- a/src/components/app/Popouts/Popouts/ServerMemberContext.vue
+++ b/src/components/app/Popouts/Popouts/ServerMemberContext.vue
@@ -17,9 +17,18 @@
       </div>
     </div>
     <div class="main-menu" ref="main-menu">
-      <div class="item" @click="viewProfile">View Profile</div>
-      <div class="item" @click="copyUserTag">Copy User@Tag</div>
-      <div class="item" @click="copyID">Copy ID</div>
+      <div class="item" @click="viewProfile">
+        <div class="material-icons icon-cat">person</div>
+        <div class="name">View Profile</div>
+      </div>
+      <div class="item" @click="copyUserTag">
+        <div class="material-icons icon-cat">developer_board</div>
+        <div class="name">Copy User@Tag</div>
+      </div>
+      <div class="item" @click="copyID">
+        <div class="material-icons icon-cat">developer_board</div>
+        <div class="name">Copy ID</div>
+      </div>
       <div
         class="item"
         @mouseenter="editRoleHoverEvent"
@@ -29,10 +38,12 @@
         Edit Roles
       </div>
       <div class="item warn" v-if="showKickBanOption" @click="kickMember">
-        Kick
+        <div class="material-icons icon-cat">exit_to_app</div>
+        <div class="name">Kick</div>
       </div>
       <div class="item warn" v-if="showKickBanOption" @click="banMember">
-        Ban
+        <img class="icon-cat" src="../../../../assets/hammer4.0.svg" />
+        <div class="name">Ban</div>
       </div>
     </div>
   </div>
@@ -100,11 +111,11 @@ export default {
 
         rolesMenu.style.top =
           mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px";
-        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 38 + "px";
+        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 22 + "px";
       });
     },
     setPosition() {
-      const y = this.contextDetails.y;
+      let y = this.contextDetails.y;
       let x = this.contextDetails.x;
       const mainMenu = this.$refs["main-menu"];
 
@@ -112,6 +123,9 @@ export default {
       if (x + mainMenu.clientWidth > window.innerWidth) {
         x = window.innerWidth - mainMenu.clientWidth;
       }
+      if (y + mainMenu.clientHeight > window.innerHeight) {
+        y = window.innerHeight - mainMenu.clientHeight;
+      }
 
       mainMenu.style.top = y + "px";
       mainMenu.style.left = x + "px";
@@ -265,6 +279,8 @@ export default {
   z-index: 99999;
   top: 0;
   left: 0;
+    overflow: hidden;
+  border-radius: 4px;
 }
 
 .roles-menu {
@@ -279,6 +295,7 @@ export default {
   max-height: 150px;
   width: 150px;
   overflow: auto;
+  border-radius: 4px;
 }
 
 ::-webkit-scrollbar {
@@ -291,18 +308,27 @@ export default {
   height: 30px;
   padding-left: 10px;
   padding-right: 10px;
+  padding: 5px;
   transition: 0.2s;
   font-size: 13px;
   cursor: pointer;
   .material-icons {
-    margin-left: -10px;
+    font-size: 20px;
+    margin-right: 5px;
+    margin-left: -2px;
+  }
+  .icon-cat {
+    margin-right: 5px;
+    margin-left: 1px;
+    height: 20px;
+    width: 20px;
   }
   .has-role {
-    margin-left: -5px;
+    margin-left: -2px;
     margin-right: 5px;
   }
   &:hover {
-    background: rgba(102, 102, 102, 0.4);
+    background: rgba(255, 255, 255, 0.2);
   }
   &.warn {
     color: rgb(255, 59, 59);
diff --git a/src/components/app/Popouts/Popouts/messageContextMenu.vue b/src/components/app/Popouts/Popouts/messageContextMenu.vue
index f9336e8..b9bfd81 100644
--- a/src/components/app/Popouts/Popouts/messageContextMenu.vue
+++ b/src/components/app/Popouts/Popouts/messageContextMenu.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="drop-down-menu msg-context-popout" v-click-outside="outsideClick">
-    <div class="item" @click="copyMessage" v-if="!isPrecense">Copy</div>
+    <div class="item" @click="copyMessage" v-if="!isPrecense">
+      <div class="material-icons">developer_board</div>
+      <div class="name">Copy</div>
+    </div>
     <div class="item" @click="editMessage" v-if="showEditOption && !isPrecense">
-      Edit
+      <div class="material-icons">edit</div>
+      <div class="name">Edit</div>
     </div>
     <div class="item warn" @click="deleteMessage" v-if="showDeleteOption">
-      Delete
+      <div class="material-icons">delete</div>
+      <div class="name">Delete</div>
     </div>
   </div>
 </template>
@@ -138,15 +143,23 @@ export default {
   z-index: 99999;
   user-select: none;
   color: white;
+  overflow: hidden;
+  border-radius: 4px;
 }
 
 .item {
+  display: flex;
+  align-items: center;
   padding: 10px;
-  transition: 0.3s;
+  transition: 0.2s;
   font-size: 13px;
   cursor: pointer;
+  .material-icons {
+    font-size: 20px;
+    margin-right: 5px;
+  }
   &:hover {
-    background: rgba(46, 46, 46, 0.651);
+    background: rgba(255, 255, 255, 0.2);
   }
   &.warn {
     color: rgb(255, 59, 59);