diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index 4779db720..58ecfec33 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -49,10 +49,10 @@ $global-font-size: 10px;
 $global-width: 100%;
 $global-lineheight: 1.5;
 $foundation-palette: (primary: $color-woot,
-  secondary: #777,
-  success: #13ce66,
-  warning: #ffc82c,
-  alert: #ff4949);
+  secondary: #35c5ff,
+  success: #44ce4b,
+  warning: #ffc532,
+  alert: #ff382d);
 $light-gray: #c0ccda;
 $medium-gray: #8492a6;
 $dark-gray: $color-gray;
@@ -127,7 +127,7 @@ $header-styles: (small: ("h1": ("font-size": 24),
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.6;
+$paragraph-lineheight: 1.45;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
 $code-color: $black;
diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss
index fa84afa0c..d34d30beb 100644
--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss
@@ -29,7 +29,7 @@
     background: $color-white;
     border-radius: $space-large;
     left: 0;
-    margin: $space-slab 0 auto;
+    margin: $space-slab auto;
     padding: $space-normal;
     top: 0;
 
diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
index b75d3bf77..09a639648 100644
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -46,7 +46,8 @@ $color-gray: #6e6f73;
 $color-light-gray: #999a9b;
 $color-border: #e0e6ed;
 $color-border-light: #f0f4f5;
-$color-background: #eff2f7;
+$color-background: #f4f6fb;
+$color-border-dark: #cad0d4;
 $color-background-light: #f9fafc;
 $color-white: #fff;
 $color-body: #3c4858;
@@ -54,11 +55,10 @@ $color-heading: #1f2d3d;
 $color-extra-light-blue: #f5f7f9;
 
 $primary-color: $color-woot;
-$secondary-color: #ff5216;
-$success-color: #13ce66;
-$warning-color: #ffc82c;
-$alert-color: #ff4949;
-
+$secondary-color: #35c5ff;
+$success-color: #44ce4b;
+$warning-color: #ffc532;
+$alert-color: #ff382d;
 // Color-palettes
 
 $color-primary-light: #c7e3ff;
diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
index 438945920..05cfb9b9e 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -5,6 +5,7 @@
     @include padding($space-normal $space-two $zero);
   }
 }
+
 // Conversation header - Light BG
 .settings-header {
   @include padding($space-small $space-normal);
@@ -14,6 +15,7 @@
   @include border-normal-bottom;
   height: $header-height;
   min-height: $header-height;
+
   // Resolve Button
   .button {
     @include margin(0);
@@ -83,7 +85,7 @@
         background: $color-woot;
       }
 
-      & + .item {
+      &+.item {
         &::before {
           background: $color-woot;
         }
@@ -112,7 +114,7 @@
       background: $color-border;
       border-radius: 20px;
       color: $color-white;
-      font-size: $font-size-small;
+      font-size: $font-size-micro;
       font-weight: $font-weight-medium;
       height: $space-normal;
       left: $space-normal;
@@ -161,6 +163,7 @@
 
     &:hover {
       @include background-gray;
+
       .arrow {
         opacity: 1;
         transform: translateX($space-small);
@@ -228,7 +231,7 @@
     @include padding($space-medium);
   }
 
-  > a > img {
+  >a>img {
     width: $space-larger * 5;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
index 183fa9a23..e791f4cd7 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
@@ -1,8 +1,8 @@
 .integrations-wrap {
   .integration {
     background: $color-white;
-    border: 2px solid $color-border;
-    border-radius: $space-slab;
+    border: 1px solid $color-border;
+    border-radius: $space-smaller;
     padding: $space-normal;
 
     .integration--image {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index 0122ba96b..6de396353 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -45,6 +45,7 @@
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
+      line-height: 1.3;
       text-transform: capitalize;
     }
 
@@ -65,6 +66,8 @@
 }
 
 .button.resolve--button {
+  width: 13.2rem;
+
   >.icon {
     font-size: $font-size-default;
     padding-right: $space-small;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index c331492d2..62eeb268f 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -2,11 +2,13 @@
   @include flex;
   @include flex-shrink;
   @include padding($space-normal $zero $zero $space-normal);
+  border-left: 4px solid transparent;
   cursor: pointer;
   position: relative;
 
   &.active {
     background: $color-background;
+    border-left-color: $color-woot;
   }
 
   .conversation--details {
@@ -64,7 +66,7 @@
       background: darken($success-color, 3%);
       color: $color-white;
       display: none;
-      font-size: $font-size-mini;
+      font-size: $font-size-micro;
       font-weight: $font-weight-medium;
       height: $unread-size;
       line-height: $unread-size;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index ecf682b2d..8cc89b741 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -1,10 +1,11 @@
-@mixin bubble-with-tyes {
-  @include padding($space-smaller $space-one);
+@mixin bubble-with-types {
+  @include padding($space-one $space-normal);
   @include margin($zero);
-  background: $color-primary-light;
-  border-radius: $space-small;
-  color: $color-heading;
+  background: $color-woot;
+  border-radius: $space-one;
+  color: $color-white;
   font-size: $font-size-small;
+  font-weight: $font-weight-normal;
   position: relative;
 
   .icon {
@@ -15,6 +16,17 @@
 
   .message-text__wrap {
     position: relative;
+
+    .time {
+      color: $color-primary-light;
+      display: block;
+      font-size: $font-size-micro;
+      line-height: 1.8;
+    }
+
+    .link {
+      color: $color-white;
+    }
   }
 
   .message-text {
@@ -51,8 +63,7 @@
     }
 
     &::before {
-      $color-black: #000;
-      background-image: linear-gradient(-180deg, transparent 3%, $color-black 70%);
+      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
       bottom: 0;
       content: '';
       height: 20%;
@@ -94,6 +105,7 @@
 
   .load-more-conversations {
     font-size: $font-size-small;
+    margin: 0;
     padding: $space-normal;
     width: 100%;
   }
@@ -122,10 +134,10 @@
 
     .status--filter {
       @include padding($zero null $zero $space-normal);
-      @include border-light;
       @include round-corner;
       @include margin($space-smaller $space-slab $zero $zero);
-      background-color: $color-background;
+      background-color: $color-background-light;
+      border: 1px solid $color-border;
       float: right;
       font-size: $font-size-mini;
       height: $space-medium;
@@ -192,168 +204,192 @@
   height: 100%;
   margin-bottom: $space-small;
   overflow-y: auto;
+}
 
-  >li {
-    @include flex;
-    @include flex-shrink;
-    @include margin($zero $zero $space-smaller);
+.conversation-panel>li {
+  @include flex;
+  @include flex-shrink;
+  @include margin($zero $zero $space-micro);
 
-    &:first-child {
-      margin-top: auto;
+  &:first-child {
+    margin-top: auto;
+  }
+
+  &:last-child {
+    margin-bottom: $space-small;
+  }
+
+  &.unread--toast {
+    span {
+      @include elegant-card;
+      @include round-corner;
+      background: $color-woot;
+      color: $color-white;
+      font-size: $font-size-mini;
+      font-weight: $font-weight-medium;
+      margin: $space-one auto;
+      padding: $space-smaller $space-two;
     }
+  }
 
-    &:last-child {
-      margin-bottom: $space-small;
+  .bubble {
+    @include bubble-with-types;
+    max-width: 50rem;
+    text-align: left;
+    word-wrap: break-word;
+
+    .aplayer {
+      box-shadow: none;
+      font-family: inherit;
     }
+  }
 
-    &.unread--toast {
-      span {
-        @include elegant-card;
-        @include round-corner;
-        background: $color-woot;
-        color: $color-white;
-        font-size: $font-size-mini;
-        font-weight: $font-weight-medium;
-        margin: $space-one auto;
-        padding: $space-smaller $space-two;
+  &.left {
+
+    .bubble {
+      @include border-normal;
+      background: $white;
+      border-bottom-left-radius: $space-smaller;
+      border-top-left-radius: $space-smaller;
+      color: $color-body;
+      margin-right: auto;
+
+      .time {
+        color: $color-light-gray;
       }
+
+      .image .time {
+        color: $color-white;
+      }
+
+      .link {
+        color: $color-primary-dark;
+      }
+
+      .file {
+        .text-block-title {
+          color: $color-body;
+        }
+
+        .icon-wrap {
+          color: $color-woot;
+        }
+
+        .download {
+          color: $color-primary-dark;
+        }
+      }
+    }
+
+    +.right {
+      margin-top: $space-one;
+
+      .bubble {
+        border-top-right-radius: $space-one;
+      }
+    }
+
+  }
+
+  &.right {
+    @include flex-align(right, null);
+
+    .wrap {
+      margin-right: $space-normal;
+      text-align: right;
     }
 
     .bubble {
-      @include bubble-with-tyes;
-      max-width: 50rem;
-      text-align: left;
-      word-wrap: break-word;
+      border-bottom-right-radius: $space-smaller;
+      border-top-right-radius: $space-smaller;
+      margin-left: auto;
 
-      .aplayer {
-        box-shadow: none;
-        font-family: inherit;
-      }
-    }
-
-    &.left {
-      .bubble {
-        background: $white;
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+      &.is-private {
+        background: lighten($warning-color, 32%);
+        border: 1px solid $color-border;
         color: $color-heading;
-        margin-right: auto;
-      }
+        padding-right: $space-large;
+        position: relative;
 
-      +.right {
-        margin-top: $space-one;
+        &::before {
+          bottom: 0;
+          color: $medium-gray;
+          position: absolute;
+          right: $space-one;
+          top: $space-smaller + $space-micro;
+        }
 
-        .bubble {
-          border-top-right-radius: $space-small;
+        .time {
+          color: $color-light-gray;
         }
       }
-
     }
 
-    &.right {
-      @include flex-align(right, null);
-
-      .wrap {
-        margin-right: $space-normal;
-        text-align: right;
-      }
+    +.left {
+      margin-top: $space-one;
 
       .bubble {
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-        margin-left: auto;
-
-        &.is-private {
-          background: lighten($warning-color, 32%);
-          color: $color-heading;
-          padding-right: $space-large;
-          position: relative;
-
-          &::before {
-            bottom: 0;
-            color: $medium-gray;
-            position: absolute;
-            right: $space-one;
-            top: $space-smaller + $space-micro;
-          }
-        }
-      }
-
-      +.left {
-        margin-top: $space-one;
-
-        .bubble {
-          border-top-left-radius: $space-small;
-        }
+        border-top-left-radius: $space-one;
       }
     }
+  }
 
-    .wrap {
-      @include margin($zero $space-normal);
-      max-width: 69%;
+  .wrap {
+    @include margin($zero $space-normal);
+    max-width: 69%;
 
-      .sender--name {
-        font-size: $font-size-mini;
-        margin-bottom: $space-smaller;
-      }
+    .sender--name {
+      font-size: $font-size-mini;
+      margin-bottom: $space-smaller;
     }
+  }
 
-    .sender--thumbnail {
-      @include round-corner();
-      height: $space-slab;
-      margin-right: $space-one;
-      margin-top: $space-micro;
-      width: $space-slab;
-    }
+  .sender--thumbnail {
+    @include round-corner();
+    height: $space-slab;
+    margin-right: $space-one;
+    margin-top: $space-micro;
+    width: $space-slab;
+  }
 
-    .activity-wrap {
-      @include flex;
-      @include margin($space-small auto);
-      @include padding($space-smaller $space-normal);
-      @include flex-align($x: center, $y: null);
-      background: lighten($warning-color, 32%);
-      border: 1px solid lighten($warning-color, 26%);
-      border-radius: $space-smaller;
-      font-size: $font-size-small;
+  .activity-wrap {
+    @include flex;
+    @include margin($space-small auto);
+    @include padding($space-small $space-normal);
+    @include flex-align($x: center, $y: null);
+    background: lighten($warning-color, 32%);
+    border: 1px solid lighten($warning-color, 22%);
+    border-radius: $space-smaller;
+    font-size: $font-size-small;
 
-      p {
-        color: $color-heading;
-        margin-bottom: $zero;
+    p {
+      color: $color-heading;
+      margin-bottom: $zero;
 
-        .ion-person {
-          color: $color-body;
-          font-size: $font-size-default;
-          margin-right: $space-small;
-          position: relative;
-          top: $space-micro;
-        }
-
-        .message-text__wrap {
-          position: relative;
-        }
-
-        .message-text {
-          &::after {
-            content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
-            display: inline;
-          }
-        }
+      .ion-person {
+        color: $color-body;
+        font-size: $font-size-default;
+        margin-right: $space-small;
+        position: relative;
+        top: $space-micro;
       }
 
-      .time {
-        color: $medium-gray;
+      .message-text__wrap {
+        position: relative;
+      }
+
+      .message-text {
+        &::after {
+          content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
+          display: inline;
+        }
       }
     }
 
     .time {
-      bottom: -$space-micro;
-      color: $color-gray;
-      float: right;
+      color: $medium-gray;
       font-size: $font-size-micro;
-      font-style: italic;
       margin-left: $space-slab;
-      right: -$space-micro;
-      text-align: right;
     }
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_login.scss b/app/javascript/dashboard/assets/scss/widgets/_login.scss
index 8720c6b57..8deaef1f8 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_login.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_login.scss
@@ -42,22 +42,26 @@
       font-size: $font-size-default;
 
       input {
-        padding: $space-slab;
-        height: $space-larger;
         font-size: $font-size-default;
+        height: $space-larger;
+        padding: $space-slab;
       }
 
       .error {
         font-size: $font-size-small;
       }
     }
+
+    .button {
+      height: $space-larger;
+    }
   }
 
   .sigin__footer {
     font-size: $font-size-default;
     padding: $space-medium;
 
-    > a {
+    >a {
       font-weight: $font-weight-bold;
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index 2d1fd7511..83e4ff5ee 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -48,7 +48,7 @@
       margin-bottom: $space-micro;
       margin-top: $space-micro;
 
-      >.inbox-icon {
+      .inbox-icon {
         display: inline-block;
         margin-right: $space-micro;
         min-width: $space-normal;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
index c4e681ac1..b714b051d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
@@ -1,33 +1,32 @@
 .ui-snackbar-container {
-  position: absolute;
+  left: 0;
+  margin: 0 auto;
+  max-width: 40rem;
   overflow: hidden;
-  z-index: 9999;
-  top: $space-normal;
-  left: $space-normal;
-  width: 100%;
+  position: absolute;
+  right: 0;
   text-align: center;
+  top: $space-normal;
+  z-index: 9999;
 }
 
 .ui-snackbar {
-  text-align: left;
+  @include padding($space-slab $space-medium);
+  @include shadow;
+  background-color: $woot-snackbar-bg;
+  border-radius: $space-smaller;
   display: inline-block;
-  min-width: 24rem;
+  margin-bottom: $space-small;
   max-width: 40rem;
   min-height: 3rem;
-  background-color: $woot-snackbar-bg;
-  @include padding($space-slab $space-medium);
-  @include border-top-radius($space-micro);
-  @include border-right-radius($space-micro);
-  @include border-bottom-radius($space-micro);
-  @include border-left-radius($space-micro);
-  margin-bottom: $space-small;
-
-  // box-shadow: 0 1px 3px alpha(black, 0.12), 0 1px 2px alpha(black, 0.24);
+  min-width: 24rem;
+  text-align: left;
 }
 
 .ui-snackbar-text {
-  font-size: $font-size-small;
   color: $color-white;
+  font-size: $font-size-small;
+  font-weight: $font-weight-medium;
 }
 
 .ui-snackbar-action {
@@ -35,12 +34,12 @@
   padding-left: 3rem;
 
   button {
+    @include margin(0);
+    @include padding(0);
     background: none;
     border: 0;
     color: $woot-snackbar-button;
     font-size: $font-size-small;
     text-transform: uppercase;
-    @include margin(0);
-    @include padding(0);
   }
 }
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 3c8c37c35..294dc6185 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,6 +1,10 @@
 <template>
   <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
-    <woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage" />
+    <woot-snackbar
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage"
+      :message="snackMessage"
+    />
   </transition-group>
 </template>
 
@@ -9,8 +13,12 @@
 import WootSnackbar from './Snackbar';
 
 export default {
+  components: {
+    WootSnackbar,
+  },
   props: {
     duration: {
+      type: Number,
       default: 2500,
     },
   },
@@ -22,16 +30,12 @@ export default {
   },
 
   mounted() {
-    bus.$on('newToastMessage', (message) => {
+    bus.$on('newToastMessage', message => {
       this.snackMessages.push(message);
       window.setTimeout(() => {
         this.snackMessages.splice(0, 1);
       }, this.duration);
     });
   },
-
-  components: {
-    WootSnackbar,
-  },
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
index c4bb8f00b..6d9a97053 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -44,12 +44,12 @@ export default {
 .file {
   display: flex;
   flex-direction: row;
-  padding: $space-normal;
+  padding: $space-smaller 0;
   cursor: pointer;
 
   .icon-wrap {
     font-size: $font-size-giga;
-    color: $color-woot;
+    color: $color-white;
     line-height: 1;
     margin-left: $space-smaller;
     margin-right: $space-slab;
@@ -57,15 +57,22 @@ export default {
 
   .text-block-title {
     margin: 0;
+    color: $color-white;
+    font-weight: $font-weight-bold;
   }
 
   .button {
     padding: 0;
     margin: 0;
+    color: $color-primary-light;
   }
 
   .meta {
     padding-right: $space-two;
   }
+
+  .time {
+    min-width: $space-larger;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index 6d586a41a..1d266516c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="message-text__wrap">
-    <span class="time">{{ readableTime }}</span>
     <span v-html="message"></span>
+    <span class="time">{{ readableTime }}</span>
   </span>
 </template>
 
diff --git a/app/javascript/dashboard/i18n/locale/en/login.json b/app/javascript/dashboard/i18n/locale/en/login.json
index a6be25967..30f667052 100644
--- a/app/javascript/dashboard/i18n/locale/en/login.json
+++ b/app/javascript/dashboard/i18n/locale/en/login.json
@@ -16,6 +16,6 @@
     },
     "FORGOT_PASSWORD": "Forgot your password?",
     "CREATE_NEW_ACCOUNT": "Create new account",
-    "SUBMIT": "Sign In"
+    "SUBMIT": "Login"
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index d750eb8cd..636862232 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -185,7 +185,7 @@ export default {
 
 .close-button {
   position: absolute;
-  right: $space-slab;
+  right: $space-normal;
   top: $space-slab;
   font-size: $font-size-default;
   color: $color-heading;
diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js
index 2edd5576b..475c8b905 100644
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/app/javascript/shared/helpers/MessageFormatter.js
@@ -16,7 +16,7 @@ class MessageFormatter {
     return this.message.replace(
       urlRegex,
       url =>
-        `<a rel="noreferrer noopener nofollow" href="${url}" target="_blank">${url}</a>`
+        `<a rel="noreferrer noopener nofollow" href="${url}" class="link" target="_blank">${url}</a>`
     );
   }
 
diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
index 847f9efd9..441048497 100644
--- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
+++ b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
@@ -6,7 +6,7 @@ describe('#MessageFormatter', () => {
       const message =
         'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com';
       expect(new MessageFormatter(message).formattedMessage).toEqual(
-        'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" target="_blank">https://www.chatwoot.com</a>'
+        'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" class="link" target="_blank">https://www.chatwoot.com</a>'
       );
     });
   });
diff --git a/app/javascript/widget/assets/scss/_forms.scss b/app/javascript/widget/assets/scss/_forms.scss
index 481d7641d..752fa223c 100755
--- a/app/javascript/widget/assets/scss/_forms.scss
+++ b/app/javascript/widget/assets/scss/_forms.scss
@@ -22,7 +22,10 @@ $input-height: $space-two * 2;
   outline: none;
   padding: $space-smaller;
   position: relative;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  transition: background .2s,
+  border .2s,
+  box-shadow .2s,
+  color .2s;
   width: 100%;
 
   &:focus {
@@ -37,7 +40,7 @@ $input-height: $space-two * 2;
   &.small {
     font-size: $font-size-small;
     height: $space-large;
-    padding: $space-small $space-slab;
+    padding: $space-small $space-one;
   }
 
   &.default {
diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss
index 02261e825..5d4154315 100755
--- a/app/javascript/widget/assets/scss/_variables.scss
+++ b/app/javascript/widget/assets/scss/_variables.scss
@@ -52,12 +52,13 @@ $color-light-gray: #999a9b;
 $color-border: #e0e6ed;
 $color-border-transparent: rgba(224, 230, 237, 0.5);
 $color-border-light: #f0f4f5;
-$color-background: #ecf3f9;
+$color-border-dark: #cad0d4;
+$color-background: #f4f6fb;
 $color-background-light: #fafafa;
 $color-white: #fff;
 $color-body: #3c4858;
 $color-heading: #1f2d3d;
-$color-error: #ff4949;
+$color-error: #ff382d;
 
 
 // Thumbnail
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 31f33d190..261afbf3c 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="agent-bubble">
+  <div
+    class="agent-message-wrap"
+    :class="{ 'has-response': hasRecordedResponse }"
+  >
     <div class="agent-message">
       <div class="avatar-wrap">
         <thumbnail
@@ -108,7 +111,7 @@ export default {
     },
     avatarUrl() {
       // eslint-disable-next-line
-      const BotImage = require('dashboard/assets/images/chatwoot_bot.png')
+      const BotImage = require('dashboard/assets/images/chatwoot_bot.png');
       if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
         return BotImage;
       }
@@ -146,17 +149,6 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .conversation-wrap {
-  .agent-bubble {
-    margin-bottom: $space-micro;
-    & + .agent-bubble {
-      .agent-message {
-        .chat-bubble {
-          border-top-left-radius: $space-smaller;
-        }
-      }
-    }
-  }
-
   .agent-message {
     align-items: flex-end;
     display: flex;
@@ -165,10 +157,6 @@ export default {
     margin: 0 0 $space-micro $space-small;
     max-width: 88%;
 
-    & + .user-message {
-      margin-top: $space-one;
-    }
-
     .avatar-wrap {
       height: $space-medium;
       width: $space-medium;
@@ -199,5 +187,26 @@ export default {
     padding: 0;
     overflow: hidden;
   }
+
+  .agent-message-wrap {
+    + .agent-message-wrap {
+      margin-top: $space-micro;
+
+      .agent-message .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+    }
+
+    + .user-message-wrap {
+      margin-top: $space-normal;
+    }
+
+    &.has-response + .user-message-wrap {
+      margin-top: $space-micro;
+      .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+  }
 }
 </style>
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 5266d1f43..cc2044980 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -124,6 +124,11 @@ export default {
     background: $color-white;
     border-bottom-left-radius: $space-smaller;
     color: $color-body;
+
+    .link {
+      word-break: break-word;
+      color: $color-woot;
+    }
   }
 }
 </style>
diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue
index dc48410e5..b9c8f06eb 100644
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ b/app/javascript/widget/components/AvailableAgents.vue
@@ -64,7 +64,7 @@ export default {
     font-size: $font-size-default;
     font-weight: $font-weight-medium;
     color: $color-white;
-    padding: $space-one $space-normal $space-one $space-small;
+    padding: $space-small $space-normal $space-small $space-small;
     line-height: 1.4;
     display: inline-block;
     vertical-align: middle;
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 0b12dc9d8..bcdabe62b 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -102,7 +102,7 @@ export default {
 
 .conversation-wrap {
   flex: 1;
-  padding: $space-large $space-small $zero $space-small;
+  padding: $space-large $space-small $space-small $space-small;
 }
 
 .message--loader {
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 4fd0457b3..0a5d545ea 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -59,11 +59,11 @@ export default {
 .file {
   display: flex;
   flex-direction: row;
-  padding: $space-one $space-slab;
+  padding: $space-slab;
   cursor: pointer;
 
   .icon-wrap {
-    font-size: $font-size-bigger;
+    font-size: $font-size-mega;
     color: $color-woot;
     line-height: 1;
     margin-left: $space-smaller;
@@ -72,11 +72,14 @@ export default {
 
   .title {
     font-weight: $font-weight-medium;
-    font-size: $font-size-small;
+    font-size: $font-size-default;
     margin: 0;
   }
 
   .download {
+    color: $color-woot;
+    font-weight: $font-weight-medium;
+    font-size: $font-size-mini;
     padding: 0;
     margin: 0;
     font-size: $font-size-small;
diff --git a/app/javascript/widget/components/ImageBubble.vue b/app/javascript/widget/components/ImageBubble.vue
index 02078398b..fa4d31788 100644
--- a/app/javascript/widget/components/ImageBubble.vue
+++ b/app/javascript/widget/components/ImageBubble.vue
@@ -29,11 +29,10 @@ export default {
     max-width: 100%;
 
     &::before {
-      $color-black: #000;
       background-image: linear-gradient(
         -180deg,
         transparent 3%,
-        $color-black 70%
+        $color-heading 130%
       );
       bottom: 0;
       content: '';
@@ -55,7 +54,7 @@ export default {
     bottom: $space-smaller;
     color: $color-white;
     position: absolute;
-    right: $space-small;
+    right: $space-slab;
     white-space: nowrap;
   }
 }
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 578a9b939..ffdf5685d 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -1,24 +1,26 @@
 <template>
-  <div class="user-message">
-    <div class="message-wrap" :class="{ 'in-progress': isInProgress }">
-      <UserMessageBubble
-        v-if="showTextBubble"
-        :message="message.content"
-        :status="message.status"
-      />
-      <div v-if="hasAttachments" class="chat-bubble has-attachment user">
-        <div v-for="attachment in message.attachments" :key="attachment.id">
-          <file-bubble
-            v-if="attachment.file_type !== 'image'"
-            :url="attachment.data_url"
-            :is-in-progress="isInProgress"
-          />
-          <image-bubble
-            v-else
-            :url="attachment.data_url"
-            :thumb="attachment.thumb_url"
-            :readable-time="readableTime"
-          />
+  <div class="user-message-wrap">
+    <div class="user-message">
+      <div class="message-wrap" :class="{ 'in-progress': isInProgress }">
+        <UserMessageBubble
+          v-if="showTextBubble"
+          :message="message.content"
+          :status="message.status"
+        />
+        <div v-if="hasAttachments" class="chat-bubble has-attachment user">
+          <div v-for="attachment in message.attachments" :key="attachment.id">
+            <file-bubble
+              v-if="attachment.file_type !== 'image'"
+              :url="attachment.data_url"
+              :is-in-progress="isInProgress"
+            />
+            <image-bubble
+              v-else
+              :url="attachment.data_url"
+              :thumb="attachment.thumb_url"
+              :readable-time="readableTime"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -80,16 +82,6 @@ export default {
     max-width: 85%;
     text-align: right;
 
-    & + .user-message {
-      margin-bottom: $space-micro;
-      .chat-bubble {
-        border-top-right-radius: $space-smaller;
-      }
-    }
-    & + .agent-message {
-      margin-top: $space-normal;
-      margin-bottom: $space-micro;
-    }
     .message-wrap {
       margin-right: $space-small;
     }
@@ -103,13 +95,28 @@ export default {
     padding: 0;
     overflow: hidden;
   }
+
   .user.has-attachment {
     .icon-wrap {
       color: $color-white;
     }
 
     .download {
-      opacity: 0.8;
+      color: $color-white;
+    }
+  }
+
+  .user-message-wrap {
+    + .user-message-wrap {
+      margin-top: $space-micro;
+
+      .user-message .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+
+    + .agent-message-wrap {
+      margin-top: $space-normal;
     }
   }
 }
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 5415aa26b..03fac6601 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -45,7 +45,7 @@ export default {
   display: inline-block;
   font-size: $font-size-default;
   line-height: 1.5;
-  padding: $space-small $space-normal;
+  padding: $space-slab $space-normal $space-slab $space-normal;
   text-align: left;
 
   > a {
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index d567d9a32..b4a0626f5 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -86,7 +86,7 @@ export default {
 
   .header-wrap {
     flex-shrink: 0;
-    border-radius: $space-normal;
+    border-radius: $space-normal $space-normal $space-small $space-small;
     background: white;
     z-index: 99;
     @include shadow-large;