diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index ae502322583..6f36cff626b 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -1,10 +1,11 @@
+/* use of "border: 2px solid transparent;" from https://stackoverflow.com/a/9612782 */
+
 .btn {
   cursor: pointer;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: bold;
-  line-height: 1.71;
-  border: 1px solid transparent;
+  line-height: 1.714;
   padding: 4px 12px;
   border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
@@ -19,10 +20,11 @@
   }
 
   &:focus {
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:active, &.active:not(.btn-flat) {
+    border: 2px solid $purple-400;
     box-shadow: none;
   }
 
@@ -32,7 +34,7 @@
     opacity: 0.75;
     box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
     background-color: $gray-700;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
 
     .svg {
       color: $gray-300;
@@ -40,7 +42,7 @@
   }
 
   &.with-icon {
-    height: 2rem; // otherwise would something set the height to 33px
+    height: 32px; // otherwise would something set the height to 33px
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -49,15 +51,17 @@
 
 .btn-front {
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 1.71;
   padding: 7.5px 15.5px;
 }
 
 .btn-primary {
   background: $purple-200;
-  border: 1px solid transparent;
+  border: 2px solid $purple-200;
+  padding: 2px 12px;
   --icon-color: #{$purple-500};
 
+
   &:focus {
     background: $purple-200;
     border-color: $purple-400;
@@ -66,22 +70,23 @@
 
   &:not(:disabled):not(.disabled) {
     &:hover {
-      background: #5d3b9c;
-      border: 1px solid transparent;
+      background: $purple-200;
+      border: 2px solid $purple-200;
+      box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
 
       --icon-color: #{$white};
     }
 
     &:active, &.active {
       background: $purple-200;
-      border: 1px solid transparent;
+      border: 2px solid $purple-400;
 
       --icon-color: #{$white};
     }
 
     &:active:focus, &.active:focus {
       box-shadow: none;
-      border-color: $purple-400;
+      border: 2px solid $purple-400;
     }
   }
 
@@ -90,6 +95,13 @@
       color: var(--icon-color);
     }
   }
+
+  &.disabled {
+    background-color: $white;
+    border: 2px solid transparent;
+    box-shadow: 0px 1px 2px 0px rgba(26, 24, 29, 0.24), 0px 1px 3px 0px rgba(26, 24, 29, 0.12);
+    line-height: 1;
+  }
 }
 
 .btn-secondary,
@@ -97,7 +109,7 @@
 .show > .btn-secondary.dropdown-toggle:not(.btn-success)
 {
   background: $white;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   color: $gray-50;
 
   --icon-color: #{$gray-200};
@@ -105,31 +117,30 @@
   &:focus, &:active {
     color: $gray-50;
     background: $white;
-    border-color: $purple-400;
 
     --icon-color: #{$purple-300};
   }
 
   &:not(:disabled):not(.disabled) {
     &:active, &.active {
+      border: 2px solid $purple-400;
       color: $purple-300;
       --icon-color: #{$purple-300};
 
       &:focus {
-        color: $purple-300;
+        border: 2px solid $purple-400;
         box-shadow: none;
-        border-color: $purple-400;
+        color: $purple-300;
       }
 
       background: $white;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
     }
 
     &:hover {
       color: $purple-300;
-
       background: $white !important;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
 
       --icon-color: #{$purple-300};
       .svg {
@@ -151,26 +162,29 @@
 
 .btn-danger {
   background: $maroon-100;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 
   &:hover:not(:disabled):not(.disabled) {
     background: #e14e4e;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 
   &:focus {
     background: $maroon-100;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
     box-shadow: none;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $maroon-100;
-    border: 1px solid transparent;
+    border: 2px solid $purple-400;
+  }
+  &.disabled {
+    line-height: 1.5;
   }
 }
 
@@ -200,11 +214,11 @@
 
 .btn-success {
   background: $green-50;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 
   &:hover:not(:disabled):not(.disabled) {
     background: #32bd8a;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 
   &:focus {
@@ -219,7 +233,7 @@
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $green-50;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 }
 
@@ -267,7 +281,10 @@
 }
 
 .btn-small {
+  align-content: center;
+  display:inline-flex;
+  flex-wrap: wrap;
   font-size: 12px;
-  line-height: 1.33;
+  line-height: 1.17;
   padding: 4px 8px;
 }
diff --git a/website/client/src/assets/scss/dropdown.scss b/website/client/src/assets/scss/dropdown.scss
index f619baf1128..6da12dca57a 100644
--- a/website/client/src/assets/scss/dropdown.scss
+++ b/website/client/src/assets/scss/dropdown.scss
@@ -34,7 +34,7 @@
 
 .dropdown-menu {
   padding: 0px;
-  border: none;
+  border: transparent;
   border-radius: 2px;
   box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
 
@@ -127,8 +127,8 @@
   width: 100%;
 
   .dropdown-toggle {
+    padding: 4px 12px 5px;
     width: 100% !important;
-    height: 32px;
     text-align: left;
   }
 
diff --git a/website/client/src/components/admin-panel/index.vue b/website/client/src/components/admin-panel/index.vue
index c31d7290423..cb0bfa2e427 100644
--- a/website/client/src/components/admin-panel/index.vue
+++ b/website/client/src/components/admin-panel/index.vue
@@ -46,7 +46,7 @@
   }
 
   .input-group-append {
-    width:auto;
+    width: auto;
   }
 
   .admin-panel-content {
diff --git a/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue b/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
index 36609ea1251..cb72a6e6c1d 100644
--- a/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
+++ b/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
@@ -7,7 +7,7 @@
           :class="{'open': expand}"
           @click="expand = !expand"
         >
-          Priviliges, Gem Balance
+          Privileges, Gem Balance
         </h3>
       </div>
       <div
diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 949a1025d44..700da8b4c13 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -309,7 +309,7 @@
         <div class="my-2">
           Time Traveling! It is {{ new Date().toLocaleDateString() }}
           <a
-            class="btn btn-warning btn-small"
+            class="btn btn-danger btn-small"
             @click="resetTime()"
           >
             Reset
@@ -434,6 +434,10 @@ button {
   margin-bottom: 1rem;
   padding: .5rem 1rem;
   box-shadow: 0 1px 3px 0 rgb(26 24 29 / 12%), 0 1px 2px 0 rgb(26 24 29 / 24%);
+
+  &:focus {
+    outline: 2px solid $purple-400;
+  }
 }
 
 ul {
@@ -584,9 +588,13 @@ h3 {
 }
 
 .debug {
-  margin-top: 16px;
-  display: flex;
+  align-content: center;
+  border: 2px solid transparent;
+  display:inline-flex;
+  flex-wrap: wrap;
   justify-content: center;
+  margin-top: 16px;
+  padding: 2px 12px;
 }
 
 .debug-group {
@@ -596,11 +604,31 @@ h3 {
   font-weight: 700;
   background-color: $gray-600;
 
- .btn {
-  margin: 2px;
+  .btn {
+    margin: 2px;
+    padding: 2px 12px;
+  }
+}
+
+.btn-small {
+  background-color: $maroon-100;
+  border: 2px solid transparent;
+  color: $white !important;
+
+  &:hover {
+    background-color: $maroon-100;
+    text-decoration: none !important;
   }
 }
 
+.btn-secondary {
+  padding: 2px 12px;
+}
+
+.btn-secondary a:hover {
+  text-decoration: none !important;
+}
+
 .btn-contribute {
   background: $white;
   border-radius: 2px;
@@ -614,17 +642,15 @@ h3 {
     &:hover {
       color:$purple-300;
       box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
+    }
     &:active:not(:disabled) {
       color:$purple-300;
       border: 1px solid $purple-400;
       box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
     }
-  }
-
   a {
     display: flex;
   }
-
   .text{
     display: inline-block;
     vertical-align: bottom;
diff --git a/website/client/src/components/challenges/challengeDetail.vue b/website/client/src/components/challenges/challengeDetail.vue
index dac2c52a339..242a4299392 100644
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/website/client/src/components/challenges/challengeDetail.vue
@@ -298,6 +298,10 @@
     padding: .5em;
   }
 
+  .btn-success {
+    padding: 4.5px 12px !important;
+  }
+
   .sidebar {
     background-color: $gray-600;
   }
diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index d0010cec4b5..dc3d2cfcc2c 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/website/client/src/components/groups/membersModal.vue
@@ -24,7 +24,7 @@
           </div>
           <div class="col-6">
             <button
-              class="close"
+              class="close mr-0"
               type="button"
               aria-label="Close"
               @click="close()"
@@ -122,7 +122,7 @@
             <b-dropdown right="right">
               <div
                 slot="button-content"
-                class="svg-icon inline dots pt-1"
+                class="svg-icon inline dots"
                 v-html="icons.dots"
               ></div>
               <b-dropdown-item @click="sendMessage(member)">
@@ -250,6 +250,11 @@
 
 <style lang='scss'>
   #members-modal {
+    button {
+      line-height: 1.358;
+      width: 30px;
+    }
+
     .modal-header {
       background-color: #edecee;
       border-radius: 8px 8px 0 0;
@@ -307,6 +312,7 @@
     }
     .dots {
       height: 16px;
+      padding-top: 2px;
       width: 4px;
     }
   }
diff --git a/website/client/src/components/payments/buttons/list.vue b/website/client/src/components/payments/buttons/list.vue
index 5ec3eb2d28b..fd1e8e70274 100644
--- a/website/client/src/components/payments/buttons/list.vue
+++ b/website/client/src/components/payments/buttons/list.vue
@@ -57,6 +57,7 @@
 
         &.paypal-checkout {
           background: #009cde;
+          height: 32px;
 
           img {
             width: 157px;
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 349f129cb8d..4ee0bb75838 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -520,7 +520,8 @@
       height: 32px;
 
       &:focus {
-        border: 2px solid black;
+        border: 2px solid $purple-400;
+        box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
       }
     }
 
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index 339c3678c7c..4efcf5dedc6 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -152,7 +152,7 @@
   }
 
   .btn-primary.pull-right {
-    height: 2.5em;
+    height: 40px;
     margin: auto 0px auto auto;
   }
 
diff --git a/website/client/src/components/tasks/modal-controls/multiList.vue b/website/client/src/components/tasks/modal-controls/multiList.vue
index 08fbf214c11..090f3074c96 100644
--- a/website/client/src/components/tasks/modal-controls/multiList.vue
+++ b/website/client/src/components/tasks/modal-controls/multiList.vue
@@ -20,7 +20,7 @@
       >
         <div
           v-markdown="item.name"
-          class="multi-label my-auto ml-75 mr-2"
+          class="multi-label ml-75 mr-2"
         ></div>
         <div
           class="remove ml-auto mr-75"
@@ -66,7 +66,11 @@
   @import '~@/assets/scss/colors.scss';
 
   .margin-adjust {
-    margin-top: -1px;
+    margin-top: 2px;
+  }
+
+  .markdown {
+    padding-top: 2px !important;
   }
 
   .multi-list {
@@ -77,7 +81,7 @@
       flex-wrap: wrap;
 
       .multi-item {
-        margin-bottom: 0.375rem;
+        margin-bottom: 4px;
       }
     }
   }
@@ -98,7 +102,7 @@
     .multi-label {
       height: 1rem;
       font-size: 12px;
-      line-height: 16px;
+      line-height: 1;
       letter-spacing: normal;
       color: $gray-100;
     }
@@ -106,7 +110,6 @@
     .remove {
       display: inline-block;
       object-fit: contain;
-      margin-top: -0.125rem;
     }
   }
 
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
index 727d45c878f..9344d09a49b 100644
--- a/website/client/src/components/tasks/modal-controls/selectMulti.vue
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.vue
@@ -88,8 +88,8 @@ $itemHeight: 2rem;
 
 .inline-dropdown {
   &.select-multi .dropdown-toggle {
-    height: auto;
-    padding-bottom: 0px;
+    line-height: 1.215;
+    padding: 3px 0px;
   }
 }
 
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index 75411467b32..f6061212623 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -12,7 +12,19 @@
       @select="selectItem($event)"
     >
       <template #item="{ item }">
-        <span :class="{'dropdown-icon-item': withIcon}">
+        <span
+          :class="{'dropdown-icon-item': withIcon}"
+          v-if="withIcon"
+          id="class-selector"
+        >
+          <slot
+            name="item"
+            :item="item"
+          ></slot>
+        </span>
+        <span
+          v-else
+        >
           <slot
             name="item"
             :item="item"
@@ -56,5 +68,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+#class-selector {
+  line-height: 1;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
 </style>
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index 8d9c947e461..ff22fc96904 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/website/client/src/components/ui/selectList.vue
@@ -58,7 +58,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding-right: 25px; /* To allow enough room for the down arrow to be displayed */
+    padding-right: 25px; // 25px allows room for the down arrow display
   }
 
   .selectListItem {
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 95c18aaff15..0e944a92988 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -834,7 +834,7 @@
 
   .send-message {
     font-size: 1em;
-    line-height: 1.71;
+    line-height: 1.5;
     margin-left: 24px;
     margin-right: 8px;
     margin-top: 0px;
diff --git a/website/client/src/pages/private-messages.vue b/website/client/src/pages/private-messages.vue
index 581970297be..87f1b386a9d 100644
--- a/website/client/src/pages/private-messages.vue
+++ b/website/client/src/pages/private-messages.vue
@@ -379,6 +379,7 @@
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
+    line-clamp: 2;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
@@ -459,7 +460,7 @@
     }
 
     button {
-      height: 40px;
+      height: 32px;
       border-radius: 2px;
       margin-left: 1.5rem;