diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 2bcfaffb7..182e2b464 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -66,9 +66,9 @@ export default {
 }
 .cw-accordion--title {
   align-items: center;
-  background: var(--b-50);
-  border-bottom: 1px solid var(--color-border);
-  border-top: 1px solid var(--color-border);
+  background: var(--s-50);
+  border-bottom: 1px solid var(--s-100);
+  border-top: 1px solid var(--s-100);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 5489278d5..9a409f18b 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -22,7 +22,7 @@ export default {
     },
     color: {
       type: String,
-      default: '#1f93ff',
+      default: '',
     },
     customStyle: {
       type: Object,
@@ -43,15 +43,21 @@ export default {
   },
   computed: {
     style() {
-      return {
+      let style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
         borderRadius: this.rounded ? '50%' : 0,
         lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
-        backgroundColor: this.backgroundColor,
         fontSize: `${Math.floor(this.size / 2.5)}px`,
-        color: this.color,
       };
+
+      if (this.backgroundColor) {
+        style = { ...style, backgroundColor: this.backgroundColor };
+      }
+      if (this.color) {
+        style = { ...style, color: this.color };
+      }
+      return style;
     },
     userInitial() {
       return this.initials || this.initial(this.username);
@@ -81,6 +87,7 @@ export default {
   align-items: center;
   justify-content: center;
   text-align: center;
-  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
+  background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
+  color: var(--w-600);
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 3bc92af83..5a4a69008 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -11,7 +11,6 @@
       v-else
       :username="username"
       :class="thumbnailClass"
-      color="white"
       :size="avatarSize"
     />
     <img
@@ -167,12 +166,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/foundation-settings';
-@import '~dashboard/assets/scss/mixins';
-
 .user-thumbnail-box {
-  @include flex-shrink;
+  flex: 0 0 auto;
+  max-width: 100%;
   position: relative;
 
   .user-thumbnail {
@@ -190,18 +186,18 @@ export default {
   .source-badge {
     background: white;
     border-radius: var(--border-radius-small);
-    bottom: -$space-micro;
+    bottom: var(--space-minus-micro);
     box-shadow: var(--shadow-small);
-    height: $space-slab;
+    height: var(--space-slab);
     padding: var(--space-micro);
     position: absolute;
-    right: $zero;
-    width: $space-slab;
+    right: 0;
+    width: var(--space-slab);
   }
 
   .user-online-status {
     border-radius: 50%;
-    bottom: $space-micro;
+    bottom: var(--space-micro);
 
     &:after {
       content: ' ';
@@ -209,11 +205,15 @@ export default {
   }
 
   .user-online-status--online {
-    background: $success-color;
+    background: var(--g-400);
   }
 
   .user-online-status--busy {
-    background: $warning-color;
+    background: var(--y-700);
+  }
+
+  .user-online-status--offline {
+    background: var(--s-500);
   }
 
   .user-online-status--offline {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 60ddc1c1c..07883b08a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -138,7 +138,7 @@ export default {
   border-bottom: 1px solid var(--color-border-light);
 
   &:nth-child(2n) {
-    background: var(--b-50);
+    background: var(--s-25);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index ece28d004..efef9607e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -102,7 +102,7 @@ export default {
   &.odd {
     .conversation--attribute {
       &:nth-child(2n + 1) {
-        background: var(--b-50);
+        background: var(--s-25);
       }
     }
   }
@@ -110,7 +110,7 @@ export default {
   &.even {
     .conversation--attribute {
       &:nth-child(2n) {
-        background: var(--b-50);
+        background: var(--s-25);
       }
     }
   }
diff --git a/app/javascript/shared/assets/stylesheets/colors.scss b/app/javascript/shared/assets/stylesheets/colors.scss
index 78bfcfcb9..5784bb6bf 100644
--- a/app/javascript/shared/assets/stylesheets/colors.scss
+++ b/app/javascript/shared/assets/stylesheets/colors.scss
@@ -4,6 +4,7 @@
 
   --w-25: #F5FAFF;
   --w-50: #EBF5FF;
+  --w-75: #D6EBFF;
   --w-100: #C2E1FF;
   --w-200: #99CEFF;
   --w-300: ##70BAFF;