diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
index e934b50d7..920fb8fa2 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -1,66 +1,64 @@
 @import '~vue2-datepicker/scss/index';
 
 .mx-datepicker-popup {
-  z-index: 99999;
+  @apply z-[99999];
 }
 
 .date-picker {
   &.no-margin {
     .mx-input {
-      margin-bottom: 0;
+      @apply mb-0;
     }
   }
 
   &:not(.auto-width) {
     .mx-datepicker-range {
-      width: 320px;
+      @apply w-[320px];
     }
   }
 
   .mx-datepicker {
-    width: 100%;
+    @apply w-full;
   }
 
   .mx-input {
-    border: 1px solid var(--s-200);
-    border-radius: var(--border-radius-normal);
-    box-shadow: none;
-    display: flex;
-    height: 2.5rem;
+    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
   }
 
   .mx-input:disabled,
   .mx-input[readonly] {
-    background-color: var(--white);
-    cursor: pointer;
+    @apply bg-white dark:bg-slate-900 cursor-pointer;
   }
 }
 
+.mx-calendar-content .cell:hover {
+  @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
+}
+
 .mx-datepicker-inline {
-  width: 100%;
+  @apply w-full;
 
   .mx-calendar {
-    width: 100%;
+    @apply w-full;
   }
 
   .cell.disabled {
-    background-color: var(--s-25);
-    color: var(--s-200);
+    @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
   }
 
   .mx-time-item.disabled {
-    background-color: var(--s-25);
+    @apply bg-slate-25 dark:bg-slate-900;
   }
 
   .today {
-    font-weight: var(--font-weight-bold);
+    @apply font-semibold;
   }
 
   .mx-datepicker-main {
-    border: 0;
+    @apply border-0 bg-white dark:bg-slate-800;
   }
 
   .mx-time-header {
-    border: 0;
+    @apply border-0;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 4cb9fce21..c5470e4e9 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -16,10 +16,6 @@ select {
   padding: var(--space-normal);
 }
 
-.button-wrapper .button.grey-btn {
-  margin-left: var(--space-normal);
-}
-
 code {
   border: 0;
   font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
index 5f4ed7d12..14897b245 100644
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -1,30 +1,6 @@
 .app-rtl--wrapper {
   direction: rtl;
 
-  // Primary sidebar
-  .primary--sidebar {
-    .options-menu.dropdown-pane {
-      right: var(--space-smaller);
-
-      .auto-offline--toggle {
-        padding: var(--space-smaller) var(--space-one) var(--space-smaller)
-          var(--space-smaller);
-      }
-
-      .status-items .button {
-        text-align: right;
-      }
-    }
-  }
-
-  // Settings header
-  .settings-header {
-    .header--icon {
-      margin-left: var(--space-small);
-      margin-right: var(--space-smaller);
-    }
-  }
-
   .header-section.back-button {
     direction: initial;
     margin-left: var(--space-normal);
@@ -73,23 +49,6 @@
 
   // Conversation details
   .conversation-details-wrap {
-    .conv-header {
-      .user {
-        margin-left: var(--space-normal);
-        margin-right: unset;
-
-        .user--profile__meta {
-          margin-left: unset;
-          margin-right: var(--space-small);
-        }
-      }
-
-      .actions--container .resolve-actions {
-        margin-left: unset;
-        margin-right: var(--space-small);
-      }
-    }
-
     .conversation-panel {
       // Message text
       .text-content {
@@ -137,11 +96,6 @@
       }
     }
 
-    // Conversation sidebar toggle button
-    .sidebar-toggle--button {
-      transform: rotate(180deg);
-    }
-
     // Conversation sidebar close button
     .close-button--rtl {
       transform: rotate(180deg);
@@ -285,31 +239,6 @@
     }
   }
 
-  // scss-lint:disable SelectorDepth
-  .container .header-wrap .header-left-wrap .header-left-wrap > .page-title {
-    margin-right: var(--space-small);
-  }
-
-  .portal-container .container {
-    margin-left: unset !important;
-    margin-right: var(--space-small);
-
-    .configuration-items--wrap {
-      margin-left: var(--space-mega);
-      margin-right: unset !important;
-    }
-
-    thead th {
-      padding-left: var(--space-small);
-      padding-right: 0;
-    }
-
-    tbody td {
-      padding-left: var(--space-small);
-      padding-right: 0;
-    }
-  }
-
   .portal-popover__container .portal {
     .actions-container {
       margin-left: unset;
@@ -413,11 +342,6 @@
     direction: initial;
   }
 
-  .inbox--name .inbox--icon {
-    margin-left: var(--space-micro);
-    margin-right: 0;
-  }
-
   .colorpicker--chrome {
     direction: initial;
   }
diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
index 8513053b8..100662394 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
@@ -7,6 +7,7 @@
   z-index: var(--z-index-very-high);
 
   &.dropdown-pane--open {
+    @apply bg-white dark:bg-slate-800;
     display: block;
     visibility: visible;
   }
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 4fda218a5..0d2317edd 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -1,93 +1,86 @@
 @mixin label-multiselect-hover {
   &::after {
-    color: $color-primary-dark;
+    @apply text-woot-600 dark:text-woot-600;
   }
 
   &:hover {
-    background: $color-background;
+    @apply bg-slate-50 dark:bg-slate-700;
 
     &::after {
-      color: $color-woot;
+      @apply text-woot-500 dark:text-woot-500;
     }
   }
 }
 
 .multiselect {
   &:not(.no-margin) {
-    margin-bottom: var(--space-normal);
+    @apply mb-4;
   }
 
   &.multiselect--disabled {
-    opacity: 0.8;
+    @apply opacity-80;
   }
 
   .multiselect--active {
-    >.multiselect__tags {
-      border-color: var(--w-500);
+    > .multiselect__tags {
+      @apply border-woot-500 dark:border-woot-500;
     }
   }
 
   .multiselect__select {
-    min-height: 2.875rem;
-    padding: 0;
-    right: 0;
-    top: 0;
+    @apply min-h-[2.875rem] p-0 right-0 top-0;
 
     &::before {
-      right: 0;
+      @apply right-0;
     }
   }
 
+  .multiselect__content-wrapper {
+    @apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+  }
+
   .multiselect__content {
-    max-width: 100%;
+    @apply max-w-full;
 
     .multiselect__option {
-      font-size: $font-size-small;
-      font-weight: $font-weight-normal;
+      @apply text-sm font-normal;
 
       span {
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: fit-content;
+        @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
       }
 
       p {
-        margin-bottom: 0;
+        @apply mb-0;
       }
 
       &.multiselect__option--highlight {
-        background: var(--white);
-        color: var(--color-body);
+        @apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
       }
 
       &.multiselect__option--highlight:hover {
-        background: var(--w-50);
-        color: var(--color-body);
+        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
 
         &::after {
-          background: var(--w-50);
-          color: var(--s-600);
+          @apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
         }
       }
 
       &.multiselect__option--highlight::after {
-        background: transparent;
+        @apply bg-transparent;
       }
 
       &.multiselect__option--selected {
-        background: var(--w-75);
+        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
 
         &.multiselect__option--highlight:hover {
-          background: var(--w-75);
+          @apply bg-woot-75 dark:bg-woot-600;
 
           &::after {
-            background: transparent;
+            @apply bg-transparent;
           }
 
           &::after:hover {
-            color: var(--color-body);
+            @apply text-slate-800 dark:text-slate-100;
           }
         }
       }
@@ -95,175 +88,130 @@
   }
 
   .multiselect__tags {
-    border: 1px solid var(--s-200);
-    border-color: var(--s-200);
-    margin: 0;
-    min-height: 2.75rem;
-    padding-top: $zero;
+    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
   }
 
   .multiselect__tags-wrap {
-    display: inline-block;
-    line-height: 1;
-    margin-top: $space-smaller;
+    @apply inline-block leading-none mt-1;
   }
 
   .multiselect__placeholder {
-    color: $color-gray;
-    font-weight: $font-weight-normal;
-    padding-top: var(--space-slab);
+    @apply text-slate-400 dark:text-slate-400 font-normal pt-3;
   }
 
   .multiselect__tag {
-    $vertical-space: $space-smaller + $space-micro;
-    background: $color-background;
-    color: $color-heading;
-    margin-top: $space-smaller;
-    padding: $vertical-space $space-medium $vertical-space $space-one;
+    @apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
   }
 
   .multiselect__tag-icon {
     @include label-multiselect-hover;
-    line-height: $space-medium + $space-micro;
   }
 
   .multiselect__input {
     @include ghost-input;
-    font-size: $font-size-small;
-    height: 2.75rem;
-    margin-bottom: $zero;
-    padding: 0;
+    @apply text-sm h-[2.875rem] mb-0 p-0;
   }
 
   .multiselect__single {
-    @include text-ellipsis;
-    display: inline-block;
-    margin-bottom: 0;
-    padding: var(--space-slab) var(--space-one);
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
   }
 }
 
 .sidebar-labels-wrap {
-
   &.has-edited,
   &:hover {
     .multiselect {
-      cursor: pointer;
+      @apply cursor-pointer;
     }
   }
 
   .multiselect {
-    >.multiselect__select {
-      visibility: hidden;
+    > .multiselect__select {
+      @apply invisible;
     }
 
-    >.multiselect__tags {
-      border-color: transparent;
+    > .multiselect__tags {
+      @apply border-transparent;
     }
 
-    &.multiselect--active>.multiselect__tags {
-      border-color: $color-woot;
+    &.multiselect--active > .multiselect__tags {
+      @apply border-woot-500 dark:border-woot-500;
     }
   }
 }
 
 .multiselect-wrap--small {
-  $multiselect-height: 2.5rem;
-
   .multiselect__tags,
   .multiselect__input {
-    align-items: center;
-    display: flex;
+    @apply items-center flex;
   }
 
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    background: var(--white);
-    font-size: var(--font-size-small);
-    height: $multiselect-height;
-    min-height: $multiselect-height;
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm h-10 min-h-[2.5rem];
   }
 
   .multiselect__input {
-    height: $multiselect-height - $space-micro;
-    min-height: $multiselect-height - $space-micro;
+    @apply h-[2.375rem] min-h-[2.375rem];
   }
 
   .multiselect__single {
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size-small);
-    margin: 0;
-    max-height: 2.375rem;
-    padding: var(--space-smaller) var(--space-micro);
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-1 px-0.5;
   }
 
   .multiselect__placeholder {
-    margin: 0;
-    padding: var(--space-smaller) var(--space-micro);
+    @apply m-0 py-1 px-0.5;
   }
 
   .multiselect__select {
-    min-height: $multiselect-height;
+    @apply min-h-[2.5rem];
   }
 
   .multiselect--disabled .multiselect__current,
   .multiselect--disabled .multiselect__select {
-    background: transparent;
+    @apply bg-transparent;
   }
 
   .multiselect__tags-wrap {
-    flex-shrink: 0;
+    @apply flex-shrink-0;
   }
 }
 
 .multiselect-wrap--medium {
-  $multiselect-height: 3rem;
-
   .multiselect__tags,
   .multiselect__input {
-    align-items: center;
-    display: flex;
+    @apply items-center flex;
   }
 
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    background: var(--white);
-    font-size: var(--font-size-small);
-    height: $multiselect-height;
-    min-height: $multiselect-height;
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
   }
 
   .multiselect__input {
-    height: $multiselect-height - $space-micro;
-    min-height: $multiselect-height - $space-micro;
+    @apply h-[2.875rem] min-h-[2.875rem];
   }
 
   .multiselect__single {
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size-small);
-    margin: 0;
-    padding: var(--space-smaller) var(--space-micro);
+    @apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
   }
 
   .multiselect__placeholder {
-    margin: 0;
-    padding: var(--space-smaller) var(--space-micro);
+    @apply m-0 py-1 px-0.5;
   }
 
   .multiselect__select {
-    min-height: $multiselect-height;
+    @apply min-h-[3rem];
   }
 
   .multiselect--disabled .multiselect__current,
   .multiselect--disabled .multiselect__select {
-    background: transparent;
+    @apply bg-transparent;
   }
 
   .multiselect__tags-wrap {
-    flex-shrink: 0;
+    @apply flex-shrink-0;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
index dfdad84a4..39e4ed2bd 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -1,171 +1,112 @@
 .settings {
-  overflow: auto;
-}
-
-// Conversation header - Light BG
-.settings-header {
-  @include flex;
-  @include flex-align($x: justify, $y: middle);
-  height: $header-height;
-  min-height: $header-height;
-  padding: $space-small $space-normal;
-
-  // Resolve Button
-  .button {
-    margin: 0;
-  }
-
-  // User thumbnail and text
-  .page-title {
-    @include flex;
-    @include flex-align($x: center, $y: middle);
-    margin: 0;
-  }
+  @apply overflow-auto;
 }
 
 .wizard-box {
   .item {
-    // @include background-light;
-
-    cursor: pointer;
-    padding: $space-normal $space-normal $space-normal $space-medium;
-    position: relative;
+    @apply cursor-pointer py-4 pr-4 pl-6 relative;
 
     &::before,
     &::after {
-      background: $color-border;
-      content: '';
-      height: 100%;
-      position: absolute;
-      top: $space-normal;
-      width: 2px;
+      @apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5;
     }
 
     &::before {
-      height: $space-normal;
-      top: $zero;
+      @apply h-4 top-0;
     }
 
     &:first-child {
       &::before {
-        height: 0;
+        @apply h-0;
       }
     }
 
     &:last-child {
       &::after {
-        height: $zero;
+        @apply h-0;
       }
     }
 
     &.active {
       h3 {
-        color: $color-woot;
+        @apply text-woot-500 dark:text-woot-500;
       }
 
       .step {
-        background: $color-woot;
+        @apply bg-woot-500 dark:bg-woot-500;
       }
     }
 
     &.over {
       &::after {
-        background: $color-woot;
+        @apply bg-woot-500 dark:bg-woot-500;
       }
 
       .step {
-        background: $color-woot;
+        @apply bg-woot-500 dark:bg-woot-500;
       }
 
       & + .item {
         &::before {
-          background: $color-woot;
+          @apply bg-woot-500 dark:bg-woot-500;
         }
       }
     }
 
     h3 {
-      color: $color-body;
-      font-size: $font-size-default;
-      line-height: 1;
-      padding-left: $space-medium;
+      @apply text-slate-800 dark:text-slate-100 text-base pl-6;
     }
 
     .completed {
-      color: $success-color;
-      margin-left: $space-smaller;
+      @apply text-green-500 dark:text-green-500 ml-1;
     }
 
     p {
-      color: $color-light-gray;
-      font-size: $font-size-small;
-      margin: 0;
-      padding-left: $space-medium;
+      @apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6;
     }
 
     .step {
-      background: $color-border;
-      border-radius: 20px;
-      color: $color-white;
-      font-size: $font-size-micro;
-      font-weight: $font-weight-medium;
-      height: $space-normal;
-      left: $space-normal;
-      line-height: $space-normal;
-      position: absolute;
-      text-align: center;
-      top: $space-normal;
-      width: $space-normal;
-      z-index: 999;
+      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
 
       i {
-        font-size: $font-size-micro;
+        @apply text-xxs;
       }
     }
   }
 }
 
 .wizard-body {
-  @include border-light;
-  @include background-white;
-  @include full-height();
-  padding: $space-medium;
+  @apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6;
 
   &.height-auto {
-    height: auto;
+    @apply h-auto;
   }
 }
 
 .settings--content {
-  margin: $space-small $space-large;
+  @apply my-2 mx-8;
 
   .title {
-    font-weight: $font-weight-medium;
+    @apply font-medium;
   }
 
   .code {
-    background: $color-background;
-    max-height: $space-mega;
-    overflow: auto;
-    padding: $space-one;
-    white-space: nowrap;
+    @apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap;
 
     code {
-      background: transparent;
-      border: 0;
+      @apply bg-transparent border-0;
     }
   }
 }
 
 .login-init {
-  padding-top: 30%;
-  text-align: center;
+  @apply pt-[30%] text-center;
 
   p {
-    padding: $space-medium;
+    @apply p-6;
   }
 
   > a > img {
-    width: $space-larger * 5;
+    @apply w-60;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
index b7387b90f..8a118b906 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
@@ -1,41 +1 @@
-.integrations-wrap {
-  .integration {
-    background: $color-white;
-    border: 1px solid $color-border;
-    border-radius: $space-smaller;
-    margin-bottom: $space-normal;
-    padding: $space-normal;
-
-    .integration--image {
-      display: flex;
-      height: 6.25rem;
-      width: 6.25rem;
-
-      img {
-        max-width: 100%;
-        padding: $space-medium;
-      }
-    }
-
-    .integration--type {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin: 0 var(--space-normal);
-    }
-
-    .integration--title {
-      font-size: var(--font-size-large);
-    }
-
-    .button-wrap {
-      @include flex;
-      @include flex-align(center, middle);
-      margin-bottom: 0;
-    }
-  }
-}
-
-.help-wrap {
-  padding-left: $space-large;
-}
+// to be removed
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index e7b840442..56d8d44c6 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -42,10 +42,10 @@
   }
 
   &.hollow {
-    @apply border border-slate-200 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
-      @apply text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {
@@ -98,7 +98,7 @@
     }
 
     &.warning {
-      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-200;
+      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
     }
   }
 
@@ -118,11 +118,11 @@
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-100;
+      @apply text-yellow-700 dark:text-yellow-700;
     }
 
     &:hover {
-      @apply hover:bg-woot-50 dark:hover:bg-woot-300;
+      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
 
       &.secondary {
         @apply hover:bg-slate-50 dark:hover:bg-slate-700;
@@ -137,7 +137,7 @@
       }
 
       &.warning {
-        @apply hover:bg-yellow-50 dark:hover:bg-yellow-800;
+        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
       }
     }
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index 184ca4b52..04f610dd2 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -1,66 +1 @@
-$resolve-button-width: 8.25rem;
-
-// Conversation header - Light BG
-.conv-header {
-  @include background-white;
-  @include flex;
-  @include flex-align($x: justify, $y: middle);
-  @include border-normal-bottom;
-  padding: var(--space-small) var(--space-normal);
-
-  .multiselect-box {
-    @include flex;
-    @include flex-align($x: justify, $y: middle);
-    border: 1px solid var(--color-border);
-    border-radius: var(--space-smaller);
-    margin-right: var(--space-small);
-    width: 13.5rem;
-
-    .icon {
-      color: $medium-gray;
-      font-size: $font-size-default;
-      line-height: 2.375rem;
-      padding-left: $space-slab;
-      padding-right: $space-smaller;
-    }
-
-    .multiselect {
-      border-radius: var(--border-radius-small);
-      margin: 0;
-      min-width: 0;
-
-      .multiselect__tags {
-        border-color: transparent;
-      }
-    }
-  }
-
-  // User thumbnail and text
-  .user {
-    @include flex;
-    @include flex-align($x: center, $y: middle);
-    margin-right: var(--space-normal);
-    min-width: 0;
-
-    .user--profile__meta {
-      align-items: flex-start;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      margin-left: var(--space-small);
-      min-width: 0;
-    }
-  }
-}
-
-.header-actions-wrap {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  justify-content: flex-end;
-
-  &.has-open-sidebar {
-    justify-content: flex-end;
-  }
-}
+// File to be removed
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index 7193da563..d060dc2ee 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -10,114 +10,7 @@
 }
 
 .conversation {
-  @include flex;
-  @include flex-shrink;
-  border-left: var(--space-micro) solid transparent;
-  cursor: pointer;
-  padding: 0 var(--space-normal);
-  position: relative;
-
   &.active {
     animation: left-shift-animation 0.25s $swift-ease-out-function;
-    background: var(--color-background);
-    border-left-color: var(--color-woot);
-  }
-
-
-  .conversation--details {
-    padding: var(--space-slab) 0;
-  }
-
-  .conversation--user {
-    font-size: var(--font-size-small);
-    margin: 0 var(--space-small);
-    text-transform: capitalize;
-
-    .label {
-      left: var(--space-one);
-      max-width: var(--space-jumbo);
-      overflow: hidden;
-      position: relative;
-      text-overflow: ellipsis;
-      top: var(--space-one);
-      white-space: nowrap;
-    }
-  }
-
-  .conversation--message {
-    color: var(--color-body);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-normal);
-    height: var(--space-medium);
-    line-height: var(--space-medium);
-    margin: 0 var(--space-small);
-    max-width: 96%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 16.875rem;
-
-    img,
-    svg {
-      display: inline-block;
-    }
-  }
-
-  .conversation--meta {
-    @include flex;
-    flex-direction: column;
-    position: absolute;
-    right: var(--space-normal);
-    top: var(--space-normal);
-
-    .unread {
-      @include round-corner;
-      @include light-shadow;
-      background: darken($success-color, 3%);
-      color: var(--white);
-      display: none;
-      font-size: var(--font-size-micro);
-      font-weight: var(--font-weight-black);
-      height: var(--space-normal);
-      line-height: var(--space-normal);
-      margin-left: auto;
-      margin-top: var(--space-smaller);
-      min-width: var(--space-normal);
-      padding: 0 var(--space-smaller);
-      text-align: center;
-    }
-
-    .timestamp {
-      color: $dark-gray;
-      font-size: var(--font-size-micro);
-      font-weight: var(--font-weight-normal);
-      line-height: var(--space-normal);
-      margin-left: auto;
-    }
-  }
-
-  &.unread-chat {
-    .unread {
-      display: inline-block;
-    }
-
-    .conversation--message {
-      font-weight: var(--font-weight-bold);
-    }
-
-    .conversation--user {
-      font-weight: var(--font-weight-bold);
-    }
-  }
-
-  &.compact {
-    padding-left: 0;
-
-    .conversation--details {
-      border-radius: var(--border-radius-small);
-      margin-left: 0;
-      padding-left: var(--space-two);
-      padding-right: var(--space-small);
-    }
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index 499064068..ceca3a8e9 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -1,352 +1,211 @@
 // scss-lint:disable MergeableSelector
 
 @mixin bubble-with-types {
-  padding: $space-small $space-normal;
-  margin: 0;
-  background: $color-woot;
-  border-radius: $space-one;
-  color: var(--white);
-  font-size: $font-size-small;
-  font-weight: $font-weight-normal;
-  position: relative;
+  @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
 
   .message-text__wrap {
-    position: relative;
+    @apply relative;
 
     .link {
-      color: var(--white);
-      text-decoration: underline;
+      @apply text-white dark:text-white underline;
     }
   }
 
   .image,
   .video {
-    cursor: pointer;
-    position: relative;
+    @apply cursor-pointer relative;
 
     .modal-container {
-      text-align: center;
+      @apply text-center;
     }
 
     .modal-image {
-      max-height: 76vh;
-      max-width: 76vw;
+      @apply max-h-[76vh] max-w-[76vw];
     }
 
     .modal-video {
-      max-height: 76vh;
-      max-width: 76vw;
+      @apply max-h-[76vh] max-w-[76vw];
     }
 
     &::before {
-      background-image: linear-gradient(
-        -180deg,
-        transparent 3%,
-        $color-heading 130%
-      );
-      bottom: 0;
-      content: '';
-      height: 20%;
-      left: 0;
-      opacity: 0.8;
-      position: absolute;
-      width: 100%;
+      @apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
     }
   }
 }
 
-.conversations-list-wrap {
-  @include flex;
-  border-right: 1px solid var(--s-50);
-  flex-direction: column;
-
-  .load-more-conversations {
-    font-size: $font-size-small;
-    margin: 0;
-    padding: $space-normal;
-    width: 100%;
-  }
-
-  .end-of-list-text {
-    padding: $space-normal;
-  }
-
-  .conversations-list {
-    flex: 1 1;
-    overflow-y: auto;
-
-    @include breakpoint(large up) {
-      @include scroll-on-hover;
-    }
-  }
-
-  .chat-list__top {
-    @include flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--space-normal);
-  }
-
-  .content-box {
-    text-align: center;
-  }
-}
-
 .conversation-panel {
-  @include flex;
-  flex: 1 1 1px;
-  flex-direction: column;
-  height: 100%;
-  margin: 0;
-  overflow-y: auto;
-  padding-bottom: var(--space-normal);
-  position: relative;
+  @apply flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4;
 }
 
 .conversation-panel > li {
-  @include flex;
-  @include flex-shrink;
-  margin: $zero $zero $space-micro;
-  position: relative;
-
-  &:first-child {
-    margin-top: auto;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+  @apply flex flex-shrink-0 flex-grow-0 flex-auto max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0;
 
   &.unread--toast {
     + .right {
-      margin-bottom: var(--space-micro);
+      @apply mb-1;
     }
 
     + .left {
-      margin-bottom: 0;
+      @apply mb-0;
     }
 
     span {
-      @include elegant-card;
-      @include round-corner;
-      background: $color-woot;
-      color: var(--white);
-      font-size: $font-size-mini;
-      font-weight: $font-weight-medium;
-      margin: $space-one auto;
-      padding: $space-smaller $space-two;
+      @apply shadow-lg rounded-full bg-woot-500 dark:bg-woot-500 text-white dark:text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5;
     }
   }
 
   .bubble {
     @include bubble-with-types;
-    text-align: left;
-    word-wrap: break-word;
+    @apply text-left break-words;
 
     .aplayer {
-      box-shadow: none;
+      @apply shadow-none;
       font-family: inherit;
     }
   }
 
   &.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;
-      word-break: break-word;
+      @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;
 
       &.is-image {
-        border-radius: var(--border-radius-large);
+        @apply rounded-lg;
       }
 
       .link {
-        color: $color-primary-dark;
+        @apply text-woot-600 dark:text-woot-600;
       }
 
       .file {
         .text-block-title {
-          color: $color-body;
+          @apply text-slate-700 dark:text-woot-300;
         }
 
         .icon-wrap {
-          color: $color-woot;
+          @apply text-woot-600 dark:text-woot-600;
         }
 
         .download {
-          color: $color-primary-dark;
+          @apply text-woot-600 dark:text-woot-600;
         }
       }
     }
 
     + .right {
-      margin-top: $space-one;
+      @apply mt-2.5;
 
       .bubble {
-        border-top-right-radius: $space-one;
+        @apply rounded-tr-lg;
       }
     }
 
     + .unread--toast {
       + .right {
-        margin-top: $space-one;
+        @apply mt-2.5;
 
         .bubble {
-          border-top-right-radius: $space-one;
+          @apply rounded-tr-lg;
         }
       }
 
       + .left {
-        margin-top: 0;
+        @apply mt-0;
       }
     }
   }
 
   &.right {
-    @include flex-align(right, null);
+    @apply justify-end;
 
     .wrap {
-      align-items: flex-end;
-      display: flex;
-      margin-right: $space-normal;
-      text-align: right;
+      @apply flex items-end mr-4 text-right;
 
       .sender--info {
-        padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
+        @apply pt-2 pb-1 pr-0 pl-2;
       }
     }
 
     .bubble {
-      border-bottom-right-radius: $space-smaller;
-      border-top-right-radius: $space-smaller;
-      margin-left: auto;
-      word-break: break-word;
+      @apply ml-auto break-words rounded-l-lg rounded-r;
 
       &.is-private {
-        background: lighten($warning-color, 32%);
-        border: 1px solid lighten($warning-color, 15%);
-        color: $color-heading;
-        position: relative;
-
-        &::before {
-          bottom: 0;
-          color: $medium-gray;
-          position: absolute;
-          right: $space-one;
-          top: $space-smaller + $space-micro;
-        }
+        @apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
       }
 
       &.is-image {
-        border-radius: var(--border-radius-large);
+        @apply rounded-lg;
       }
     }
 
     + .left {
-      margin-top: $space-one;
+      @apply mt-2.5;
 
       .bubble {
-        border-top-left-radius: $space-one;
+        @apply rounded-tl-lg;
       }
     }
 
     + .unread--toast {
       + .left {
-        margin-top: $space-one;
+        @apply rounded-lg;
 
         .bubble {
-          border-top-left-radius: $space-one;
+          @apply rounded-tl-lg;
         }
       }
 
       + .right {
-        margin-top: 0;
+        @apply mt-0;
       }
     }
   }
 
   &.center {
-    justify-content: center;
+    @apply items-center justify-center;
   }
 
   .wrap {
-    --bubble-max-width: 31rem;
-    margin: $zero $space-normal;
-    max-width: Min(var(--bubble-max-width), 84%);
+    max-width: Min(31rem, 84%);
+    @apply my-0 mx-4;
 
     .sender--name {
-      font-size: $font-size-mini;
-      margin-bottom: $space-smaller;
+      @apply text-xs mb-1;
     }
   }
 
   .sender--thumbnail {
-    @include round-corner();
-    height: $space-slab;
-    margin-right: $space-one;
-    margin-top: $space-micro;
-    width: $space-slab;
+    @apply h-3 mr-3 mt-0.5 w-3 rounded-full;
   }
 
   .activity-wrap {
-    background: var(--s-50);
-    border: 1px solid var(--s-100);
-    border-radius: var(--border-radius-medium);
-    display: flex;
-    font-size: var(--font-size-small);
-    justify-content: center;
-    margin: var(--space-smaller) 0;
-    padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
-      var(--space-one);
+    @apply flex justify-center text-sm my-1 mx-0 py-1 pr-0.5 pl-2.5 bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded-md border border-slate-100 dark:border-slate-600 border-solid;
 
     .is-text {
-      align-items: center;
-      display: inline-flex;
-      text-align: start;
-
-      @include breakpoint(xxxlarge up) {
-        display: flex;
-      }
+      @apply inline-flex items-center text-start 2xl:flex;
     }
   }
 }
 
 .activity-wrap .message-text__wrap {
   .text-content p {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 
 .conversation-footer {
-  display: flex;
-  flex-direction: column;
-  position: relative;
+  @apply flex relative flex-col;
 }
 
 .typing-indicator-wrap {
-  align-items: center;
-  display: flex;
-  height: 0;
-  position: absolute;
-  top: -$space-large;
-  width: 100%;
+  @apply items-center flex h-0 absolute w-full -top-8;
 
   .typing-indicator {
     @include elegant-card;
     @include round-corner;
-    background: var(--white);
-    color: $color-light-gray;
-    font-size: $font-size-mini;
-    font-weight: $font-weight-bold;
-    margin: $space-one auto;
-    padding: $space-small $space-normal $space-small $space-two;
+    @apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
 
     .gif {
-      margin-left: $space-small;
-      width: $space-medium;
+      @apply ml-2 w-6;
     }
   }
 }
@@ -358,16 +217,15 @@
   h4,
   h5,
   h6 {
-    color: var(--color-body);
+    @apply text-slate-800 dark:text-slate-100;
   }
 
   a {
-    color: var(--color-woot);
-    text-decoration: underline;
+    @apply text-woot-500 dark:text-woot-500 underline;
   }
 
   p:last-child {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 
@@ -378,54 +236,14 @@
   h4,
   h5,
   h6 {
-    color: var(--white);
+    @apply text-white dark:text-white;
   }
 
   a {
-    color: var(--white);
-    text-decoration: underline;
+    @apply text-white dark:text-white underline;
   }
 
   p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.conversation-sidebar-wrap {
-  flex: 0 0;
-  flex-basis: 100%;
-  height: auto;
-  overflow: auto;
-  z-index: var(--z-index-low);
-
-  @include breakpoint(medium up) {
-    flex-basis: 17.5rem;
-  }
-
-  @include breakpoint(large up) {
-    flex-basis: 18.75rem;
-  }
-
-  @include breakpoint(xlarge up) {
-    flex-basis: 19.375rem;
-  }
-
-  @include breakpoint(xxlarge up) {
-    flex-basis: 20.625rem;
-  }
-
-  @include breakpoint(xxxlarge up) {
-    flex-basis: 25rem;
-  }
-}
-
-
-.activity-wrap {
-  .message-text--metadata {
-    .time {
-      @include breakpoint(xlarge up) {
-        margin-left: var(--space-small);
-      }
-    }
+    @apply mb-0;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_forms.scss b/app/javascript/dashboard/assets/scss/widgets/_forms.scss
index 1f0311237..4688b648c 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_forms.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_forms.scss
@@ -1,5 +1,29 @@
 // scss-lint:disable QualifyingElement
 
+label {
+  @apply text-slate-800 dark:text-slate-200;
+}
+
+textarea {
+  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
+}
+
+input {
+  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
+
+  &[disabled] {
+    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
+  }
+}
+
+input[type='file'] {
+  @apply bg-white dark:bg-slate-800;
+}
+
+select {
+  @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
+}
+
 .error {
   input[type='color'],
   input[type='date'],
@@ -19,17 +43,11 @@
   textarea,
   select,
   .multiselect > .multiselect__tags {
-    @include thin-border(var(--r-400));
+    @apply border border-solid border-red-400 dark:border-red-400;
   }
 
   .message {
-    color: var(--r-400);
-    display: block;
-    font-size: var(--font-size-small);
-    font-weight: $font-weight-normal;
-    margin-bottom: $space-one;
-    margin-top: -$space-normal;
-    width: 100%;
+    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
   }
 }
 
@@ -42,26 +60,19 @@ input {
 }
 
 .input-wrap {
-  color: $color-heading;
-  font-size: $font-size-small;
-  font-weight: $font-weight-medium;
+  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
 }
 
 .help-text {
-  font-weight: $font-weight-normal;
+  @apply font-normal text-slate-600 dark:text-slate-400;
 }
 
 .input-group.small {
   input {
-    font-size: var(--font-size-small);
-    height: var(--space-large);
+    @apply text-sm h-8;
   }
 
   .error {
-    border-color: var(--r-400);
+    @apply border-red-400 dark:border-red-400;
   }
 }
-
-label {
-  @apply dark:text-slate-300;
-}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index 2e970e763..f20ba72b1 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -1,116 +1,79 @@
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
-
 .modal-mask {
-  @include flex;
-  @include flex-align(center, middle);
-  background-color: $masked-bg;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9990;
+  // @include flex;
+  // @include flex-align(center, middle);
+  @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
 }
 
 .modal--close {
-  position: absolute;
-  right: $space-small;
-  top: $space-small;
-
-  &:hover {
-    background: $color-background;
-  }
+  @apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
 }
 
 .page-top-bar {
-  padding: $space-large $space-large $zero;
+  @apply px-8 pt-9 pb-0;
 
   img {
-    max-height: 3.75rem;
+    @apply max-h-[3.75rem];
   }
 }
 
 .modal-container {
-  @include normal-shadow;
-
-  border-radius: $space-smaller;
-  max-height: 100%;
-  overflow: auto;
-  position: relative;
-  width: 37.5rem;
+  @apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];
 
   &.medium {
-    max-width: 80%;
-    width: 56.25rem;
+    @apply max-w-[80%] w-[56.25rem];
   }
 
   .content-box {
-    height: auto;
-    padding: 0;
+    @apply h-auto p-0;
   }
 
   h2 {
-    color: $color-heading;
-    font-size: $font-size-medium;
-    font-weight: $font-weight-bold;
+    @apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
   }
 
   p {
-    font-size: $font-size-small;
-    margin: 0;
-    padding: 0;
+    @apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
   }
 
   .content {
-    padding: $space-large;
+    @apply p-8;
   }
 
   form,
   .modal-content {
-    align-self: center;
-    padding: $space-large;
+    @apply pt-4 pb-8 px-8 self-center;
 
     a {
-      padding: $space-normal;
+      @apply p-4;
     }
   }
 
   .modal-footer {
-    @include flex;
-    @include flex-align($x: flex-end, $y: middle);
-    padding: $space-small $zero;
-
-    .button {
-      margin-left: var(--space-small);
-    }
-
-    &:first-child {
-      .button {
-        margin-left: 0;
-      }
-    }
+    // @include flex;
+    // @include flex-align($x: flex-end, $y: middle);
+    @apply flex justify-end items-center py-2 px-0 gap-2;
 
     &.justify-content-end {
-      justify-content: end;
+      @apply justify-end;
     }
   }
 
   .delete-item {
-    padding: $space-large;
+    @apply p-8;
 
     button {
-      margin: 0;
+      @apply m-0;
     }
   }
 }
 
 .modal-enter,
 .modal-leave {
-  opacity: 0;
+  @apply opacity-0;
 }
 
 .modal-enter .modal-container,
 .modal-leave .modal-container {
   transform: scale(1.1);
+  // @apply transform scale-110;
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_states.scss b/app/javascript/dashboard/assets/scss/widgets/_states.scss
index ba2905e91..7eb840221 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_states.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_states.scss
@@ -1,27 +1 @@
-
-// EMPTY STATES
-.empty-state {
-  padding: $space-jumbo $space-smaller;
-
-  .title,
-  .message {
-    display: block;
-    text-align: center;
-    width: 100%;
-  }
-
-  .title {
-    font-size: $font-size-giga;
-    font-weight: $font-weight-feather;
-  }
-
-  .message {
-    color: $color-gray;
-    margin: $space-normal auto;
-    width: 90%;
-  }
-
-  .button {
-    margin-top: $space-medium;
-  }
-}
+// To be removed
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index ae55a1a41..8ba9b6c94 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -1,100 +1,69 @@
 .tabs--container {
-  display: flex;
+  @apply flex;
 }
 
 .tabs--container--with-border {
-  @include border-normal-bottom;
+  @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
 .tabs {
-  border-left-width: 0;
-  border-right-width: 0;
-  border-top-width: 0;
-  display: flex;
-  min-width: var(--space-mega);
-  padding: 0 var(--space-normal);
+  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
 }
 
 .tabs--with-scroll {
+  @apply overflow-hidden py-0 px-1;
   max-width: calc(100% - 64px);
-  overflow: hidden;
-  padding: 0 var(--space-smaller);
 }
 
 .tabs--scroll-button {
-  align-items: center;
-  border-radius: 0;
-  cursor: pointer;
-  display: flex;
-  height: auto;
-  justify-content: center;
-  min-width: var(--space-large);
+  @apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
 }
 
 // Tab chat type
 .tab--chat-type {
-  @include flex;
+  @apply flex;
 
   .tabs-title {
     a {
-      font-size: var(--font-size-default);
-      font-weight: var(--font-weight-medium);
-      padding-bottom: var(--space-slab);
-      padding-top: var(--space-slab);
+      @apply text-base font-medium py-3;
     }
   }
 }
 
 .tabs-title {
-  flex-shrink: 0;
-  margin: 0 var(--space-small);
+  @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
-    background: var(--color-background);
-    border-radius: var(--space-small);
-    color: var(--color-gray);
-    font-size: var(--font-size-micro);
-    font-weight: var(--font-weight-black);
-    margin: 0 var(--space-smaller);
-    padding: var(--space-smaller);
+    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
   }
 
   &:first-child {
-    margin-left: 0;
+    @apply ml-0;
   }
 
   &:last-child {
-    margin-right: 0;
+    @apply mr-0;
   }
 
   &:hover,
   &:focus {
     a {
-      color: darken($medium-gray, 20%);
+      @apply text-slate-800 dark:text-slate-100;
     }
   }
 
   a {
-    align-items: center;
-    border-bottom: 2px solid transparent;
-    color: $medium-gray;
-    display: flex;
-    flex-direction: row;
-    font-size: var(--font-size-small);
-    position: relative;
-    top: 1px;
+    @apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 
   &.is-active {
     a {
-      border-bottom-color: var(--color-woot);
-      color: var(--color-woot);
+      @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
     }
 
     .badge {
-      background: $color-extra-light-blue;
-      color: var(--color-woot);
+      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
     }
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
index e3f39f865..8d6581f82 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
@@ -1,20 +1,19 @@
 table {
-  border-spacing: 0;
-  font-size: var(--font-size-small);
+  @apply border-spacing-0 text-sm;
 
   thead {
     th {
-      @apply font-medium text-left uppercase text-slate-900 dark:text-slate-200;
+      @apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
     }
   }
 
   tbody {
     tr {
-      @apply border-b border-slate-50 dark:border-slate-700;
+      @apply border-b border-slate-50 dark:border-slate-800/30;
     }
 
     td {
-      padding: var(--space-small);
+      @apply p-2.5 text-slate-700 dark:text-slate-100;
     }
   }
 }
@@ -22,37 +21,68 @@ table {
 .woot-table {
   tr {
     .show-if-hover {
-      opacity: 0;
       transition: opacity 0.2s $swift-ease-out-function;
+      @apply opacity-0;
     }
 
     &:hover {
       .show-if-hover {
-        opacity: 1;
+        @apply opacity-100;
       }
     }
   }
 
   .agent-name {
-    display: block;
-    font-weight: var(--font-weight-medium);
-    text-transform: capitalize;
+    @apply block font-medium capitalize;
   }
 
   .woot-thumbnail {
-    border-radius: 50%;
-    height: 3.125rem;
-    width: 3.125rem;
+    @apply rounded-full h-[3.125rem] w-[3.125rem];
   }
 
   .button-wrapper {
-    @include flex-align(left, null);
-    @include flex;
-    flex-direction: row;
-    min-width: 12.5rem;
+    @apply flex justify-start flex-row min-w-[12.5rem] gap-1;
   }
 
   .button {
     margin: 0;
   }
 }
+
+.ve-table {
+  .ve-table-container.ve-table-border-around {
+    @apply border-slate-200 dark:border-slate-700;
+  }
+
+  .ve-table-content {
+    .ve-table-header .ve-table-header-tr .ve-table-header-th {
+      @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
+    }
+
+    .ve-table-body .ve-table-body-tr .ve-table-body-td {
+      @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
+    }
+
+    .ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
+      @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
+    }
+  }
+}
+
+.table-pagination {
+  .ve-pagination-total {
+    @apply text-slate-600 dark:text-slate-200;
+  }
+
+  .ve-pagination-goto {
+    @apply text-slate-600 dark:text-slate-200;
+  }
+
+  .ve-pagination-li {
+    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
+  }
+
+  .ve-pagination-goto-input {
+    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
+  }
+}
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index b24b6f1be..0f0983c05 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,15 +1,20 @@
 <template>
-  <div class="cw-accordion">
-    <button class="cw-accordion--title drag-handle" @click="$emit('click')">
-      <div class="cw-accordion--title-wrap">
-        <emoji-or-icon class="icon-or-emoji" :icon="icon" :emoji="emoji" />
-        <h5>
+  <div class="-mt-px text-sm">
+    <button
+      class="flex items-center select-none w-full bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      @click="$emit('click')"
+    >
+      <div class="flex justify-between mb-0.5">
+        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <h5
+          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
+        >
           {{ title }}
         </h5>
       </div>
-      <div class="button-icon--wrap">
+      <div class="flex flex-row">
         <slot name="button" />
-        <div class="chevron-icon__wrap">
+        <div class="flex justify-end w-3 text-woot-500">
           <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
           <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
@@ -17,8 +22,8 @@
     </button>
     <div
       v-if="isOpen"
-      class="cw-accordion--content"
-      :class="{ compact: compact }"
+      class="bg-white dark:bg-slate-900"
+      :class="compact ? 'p-0' : 'p-4'"
     >
       <slot />
     </div>
@@ -56,67 +61,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.cw-accordion {
-  // This is done to fix contact sidebar border issues
-  // If you are using it else, find a fix to remove this hack
-  margin-top: -1px;
-  font-size: var(--font-size-small);
-}
-.cw-accordion--title {
-  align-items: center;
-  background: var(--s-50);
-  border-bottom: 1px solid var(--s-100);
-  border-top: 1px solid var(--s-100);
-  cursor: grab;
-  display: flex;
-  justify-content: space-between;
-  margin: 0;
-  padding: var(--space-small) var(--space-normal);
-  user-select: none;
-  width: 100%;
-
-  h5 {
-    font-size: var(--font-size-normal);
-    margin-bottom: 0;
-    padding: 0 var(--space-small) 0 0;
-  }
-}
-
-.cw-accordion--title-wrap {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--space-micro);
-}
-
-.title-icon__wrap {
-  display: flex;
-  align-items: baseline;
-}
-
-.icon-or-emoji {
-  display: inline-block;
-  width: var(--space-two);
-}
-
-.button-icon--wrap {
-  display: flex;
-  flex-direction: row;
-}
-
-.chevron-icon__wrap {
-  display: flex;
-  justify-content: flex-end;
-  width: var(--space-slab);
-  color: var(--w-500);
-}
-
-.cw-accordion--content {
-  padding: var(--space-normal);
-
-  &.compact {
-    padding: 0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index f64000fb5..e795c0afe 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -1,5 +1,8 @@
 <template>
-  <button class="small-6 medium-4 large-3 channel" @click="$emit('click')">
+  <button
+    class="sm:w-[50%] md:w-[34%] lg:w-[25%] channel"
+    @click="$emit('click')"
+  >
     <img :src="src" :alt="title" />
     <h3 class="channel__title">
       {{ title }}
@@ -24,44 +27,36 @@ export default {
 
 <style scoped lang="scss">
 .inactive {
-  filter: grayscale(100%);
+  img {
+    filter: grayscale(100%);
+  }
+
+  &.channel:hover {
+    @apply border-transparent shadow-none cursor-not-allowed;
+  }
 }
 
 .channel {
-  background: var(--white);
-  border: 1px solid var(--color-border-light);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  margin: -1px;
-  padding: var(--space-normal) 0;
-  transition: all 0.2s ease-in;
-  align-items: center;
+  @apply bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800;
+
   &:hover {
-    border: 1px solid var(--w-500);
-    box-shadow: var(--shadow-medium);
-    z-index: var(--z-index-high);
+    @apply border-woot-500 dark:border-woot-500 shadow-md z-50;
   }
 
   &.disabled {
-    opacity: 0.6;
+    @apply opacity-60;
   }
 
   img {
-    margin: var(--space-normal) auto;
-    width: 50%;
+    @apply w-[50%] my-4 mx-auto;
   }
 
   .channel__title {
-    color: var(--color-body);
-    font-size: var(--font-size-default);
-    text-align: center;
-    text-transform: capitalize;
+    @apply text-slate-800 dark:text-slate-100 text-base text-center capitalize;
   }
 
   p {
-    color: var(--b-500);
-    width: 100%;
+    @apply text-slate-600 dark:text-slate-300 w-full text-sm;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 6f771eeca..32cbe9f72 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="conversations-list-wrap"
+    class="conversations-list-wrap flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
     :class="{
       hide: !showConversationList,
       'list--full-width': isOnExpandedLayout,
@@ -8,26 +8,28 @@
   >
     <slot />
     <div
-      class="chat-list__top"
-      :class="{ filter__applied: hasAppliedFiltersOrActiveFolders }"
+      class="flex items-center justify-between py-0 px-4"
+      :class="{
+        'pb-3 border-b border-slate-75 dark:border-slate-700': hasAppliedFiltersOrActiveFolders,
+      }"
     >
-      <div class="flex-center chat-list__title">
+      <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="page-sub-title text-truncate margin-bottom-0"
+          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
           :title="pageTitle"
         >
           {{ pageTitle }}
         </h1>
         <span
           v-if="!hasAppliedFiltersOrActiveFolders"
-          class="conversation--status-pill"
+          class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
         >
           {{
             this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`)
           }}
         </span>
       </div>
-      <div class="filter--actions">
+      <div class="flex items-center gap-1">
         <div v-if="hasAppliedFilters && !hasActiveFolders">
           <woot-button
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
@@ -104,7 +106,10 @@
       @chatTabChange="updateAssigneeTab"
     />
 
-    <p v-if="!chatListLoading && !conversationList.length" class="content-box">
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="overflow-auto p-4 flex justify-center items-center"
+    >
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
     <conversation-bulk-actions
@@ -123,8 +128,8 @@
     />
     <div
       ref="activeConversation"
-      class="conversations-list"
-      :class="{ 'is-context-menu-open': isContextMenuOpen }"
+      class="conversations-list flex-1"
+      :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
       <div>
         <conversation-card
@@ -149,23 +154,20 @@
         />
       </div>
       <div v-if="chatListLoading" class="text-center">
-        <span class="spinner" />
+        <span class="spinner mt-4 mb-4" />
       </div>
 
       <woot-button
         v-if="!hasCurrentPageEndReached && !chatListLoading"
         variant="clear"
         size="expanded"
-        class="text-center"
+        class="load-more--button"
         @click="loadMoreConversations"
       >
         {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
       </woot-button>
 
-      <p
-        v-if="showEndOfListMessage"
-        class="text-center text-muted end-of-list-text"
-      >
+      <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
         {{ $t('CHAT_LIST.EOF') }}
       </p>
     </div>
@@ -956,70 +958,43 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.spinner {
-  margin-top: var(--space-normal);
-  margin-bottom: var(--space-normal);
-}
-
-.conversations-list {
-  // Prevent the list from scrolling if the submenu is opened
-  &.is-context-menu-open {
-    overflow: hidden !important;
+<style scoped>
+@tailwind components;
+@layer components {
+  .flex-basis-clamp {
+    flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
   }
 }
+</style>
 
+<style scoped lang="scss">
 .conversations-list-wrap {
-  flex-shrink: 0;
-  flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
-  overflow: hidden;
+  @apply flex-basis-clamp;
 
   &.hide {
-    display: none;
+    @apply hidden;
   }
 
   &.list--full-width {
-    flex-basis: 100%;
-  }
-
-  .page-sub-title {
-    font-size: var(--font-size-two);
+    @apply basis-full;
   }
 }
-.filter--actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-smaller);
+
+.conversations-list {
+  @apply overflow-hidden hover:overflow-y-auto;
 }
 
-.filter__applied {
-  padding-bottom: var(--space-slab) !important;
-  border-bottom: 1px solid var(--color-border);
+.load-more--button {
+  @apply text-center rounded-none;
 }
 
 .tab--chat-type {
-  padding: 0 var(--space-normal);
+  @apply py-0 px-4;
 
   ::v-deep {
     .tabs {
-      padding: 0;
+      @apply p-0;
     }
   }
 }
-
-.conversation--status-pill {
-  background: var(--color-background);
-  border-radius: var(--border-radius-small);
-  color: var(--color-medium-gray);
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-medium);
-  margin: var(--space-micro) var(--space-small) 0;
-  padding: var(--space-smaller);
-  text-transform: capitalize;
-}
-
-.chat-list__title {
-  max-width: 85%;
-}
 </style>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index 8cc4d4f15..81747862a 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="custom-attribute">
-    <div class="title-wrap">
-      <h4 class="text-block-title title error">
+  <div class="py-3 px-4">
+    <div class="flex items-center mb-1">
+      <h4 class="text-block-title flex items-center m-0 w-full error">
         <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
           <input
             v-model="editedValue"
@@ -10,7 +10,7 @@
             @change="onUpdate"
           />
         </div>
-        <div class="name-button__wrap">
+        <div class="flex items-center justify-between w-full">
           <span
             class="attribute-name"
             :class="{ error: $v.editedValue.$error }"
@@ -24,7 +24,7 @@
             size="medium"
             color-scheme="secondary"
             icon="delete"
-            class-names="delete-button"
+            class-names="flex justify-end w-4"
             @click="onDelete"
           />
         </div>
@@ -47,7 +47,10 @@
             <woot-button size="small" icon="checkmark" @click="onUpdate" />
           </div>
         </div>
-        <span v-if="shouldShowErrorMessage" class="error-message">
+        <span
+          v-if="shouldShowErrorMessage"
+          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
+        >
           {{ errorMessage }}
         </span>
       </div>
@@ -61,14 +64,17 @@
           :href="value"
           target="_blank"
           rel="noopener noreferrer"
-          class="value"
+          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ urlValue }}
         </a>
-        <p v-else class="value">
+        <p
+          v-else
+          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
           {{ displayValue || '---' }}
         </p>
-        <div class="action-buttons__wrap">
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
           <woot-button
             v-if="showActions"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
@@ -269,98 +275,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.custom-attribute {
-  padding: var(--space-slab) var(--space-normal);
-}
-
-.title-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-mini);
-}
-.title {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  width: 100%;
-}
 .checkbox-wrap {
-  display: flex;
-  align-items: center;
+  @apply flex items-center;
 }
 .checkbox {
-  margin: 0 var(--space-small) 0 0;
-}
-.name-button__wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  @apply my-0 mr-2 ml-0;
 }
 .attribute-name {
-  width: 100%;
+  @apply w-full text-slate-800 dark:text-slate-100;
   &.error {
-    color: var(--r-400);
+    @apply text-red-400 dark:text-red-500;
   }
 }
-.title--icon {
-  width: var(--space-two);
-}
+
 .edit-button {
-  display: none;
-}
-.delete-button {
-  display: flex;
-  justify-content: flex-end;
-  width: var(--space-normal);
+  @apply hidden;
 }
+
 .value--view {
-  display: flex;
+  @apply flex;
 
   &.is-editable:hover {
     .value {
-      background: var(--color-background);
-      margin-bottom: 0;
+      @apply bg-slate-50 dark:bg-slate-700 mb-0;
     }
     .edit-button {
-      display: block;
+      @apply block;
     }
   }
-
-  .action-buttons__wrap {
-    display: flex;
-    max-width: var(--space-larger);
-  }
-}
-.value {
-  display: inline-block;
-  min-width: var(--space-mega);
-  border-radius: var(--border-radius-small);
-  margin-bottom: 0;
-  word-break: break-all;
-  padding: var(--space-micro) var(--space-smaller);
-}
-.error-message {
-  color: var(--r-400);
-  display: block;
-  font-size: 0.875rem;
-  font-size: var(--font-size-small);
-  font-weight: 400;
-  margin-bottom: 0.625rem;
-  margin-top: -1rem;
-  width: 100%;
 }
 
 ::v-deep {
   .selector-wrap {
-    margin: 0;
-    top: var(--space-smaller);
+    @apply m-0 top-1;
     .selector-name {
-      margin-left: 0;
+      @apply ml-0;
     }
   }
   .name {
-    margin-left: 0;
+    @apply ml-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/CustomSnoozeModal.vue b/app/javascript/dashboard/components/CustomSnoozeModal.vue
index 33fa4c9c2..f204bac9f 100644
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="column">
+  <div class="flex flex-col">
     <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="row modal-content" @submit.prevent="chooseTime">
+    <form class="modal-content" @submit.prevent="chooseTime">
       <date-picker
         v-model="snoozeTime"
         type="datetime"
@@ -11,7 +11,7 @@
         :disabled-time="disabledTime"
         :popup-style="{ width: '100%' }"
       />
-      <div class="modal-footer justify-content-end w-full">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button variant="clear" @click.prevent="onClose">
           {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
         </woot-button>
@@ -64,12 +64,8 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
-.modal-footer {
-  padding: var(--space-two);
-}
 .modal-content {
-  padding: var(--space-small) var(--space-two) var(--space-zero);
+  @apply pt-2 px-5 pb-6;
 }
 </style>
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index f2881cbee..7afe1784c 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column page-top-bar">
+  <div class="flex flex-col items-start pt-8 px-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
@@ -10,10 +10,13 @@
     <p
       v-if="headerContent"
       ref="modalHeaderContent"
-      class="small-12 column wrap-content"
+      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
     >
       {{ headerContent }}
-      <span v-if="headerContentValue" class="content-value">
+      <span
+        v-if="headerContentValue"
+        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+      >
         {{ headerContentValue }}
       </span>
     </p>
@@ -43,13 +46,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.wrap-content {
-  word-wrap: break-word;
-  margin-top: var(--space-small);
-
-  .content-value {
-    font-weight: var(--font-weight-bold);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index 26c1bf9bf..59f9a3387 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -1,20 +1,28 @@
 <template>
-  <div class="row settings--section" :class="{ 'border-bottom': showBorder }">
-    <div class="medium-4 small-12 title--section">
-      <p v-if="title" class="sub-block-title">
+  <div
+    class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
+    :class="{
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
+    }"
+  >
+    <div class="w-[30%] min-w-0 max-w-[30%] pr-12">
+      <p
+        v-if="title"
+        class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
+      >
         {{ title }}
       </p>
-      <p class="sub-head">
+      <p class="text-sm mb-2">
         <slot v-if="subTitle" name="subTitle">
           {{ subTitle }}
         </slot>
       </p>
       <p v-if="note">
-        <span class="note">{{ $t('INBOX_MGMT.NOTE') }}</span>
+        <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
         {{ note }}
       </p>
     </div>
-    <div class="medium-6 small-12">
+    <div class="w-[50%] min-w-0 max-w-[50%]">
       <slot />
     </div>
   </div>
@@ -42,31 +50,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.settings--section {
-  display: flex;
-  padding: 0 $space-normal $space-normal 0;
-
-  &.border-bottom {
-    padding-top: $space-normal;
-    border-bottom: 1px solid $color-border;
-  }
-
-  .sub-block-title {
-    color: $color-woot;
-    font-weight: $font-weight-medium;
-    margin-bottom: 0;
-  }
-
-  .title--section {
-    padding-right: var(--space-large);
-  }
-
-  .note {
-    font-weight: var(--font-weight-bold);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index 0805ee371..e2811f65b 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <woot-button
-    size="small"
+    :size="size"
     variant="clear"
     color-scheme="secondary"
     class="-ml-3 text-black-900 dark:text-slate-300"
@@ -13,6 +13,12 @@
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
+  props: {
+    size: {
+      type: String,
+      default: 'small',
+    },
+  },
   methods: {
     onMenuItemClick() {
       bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU);
diff --git a/app/javascript/dashboard/components/base/Hotkey.vue b/app/javascript/dashboard/components/base/Hotkey.vue
index d453fc026..2e2afa93c 100644
--- a/app/javascript/dashboard/components/base/Hotkey.vue
+++ b/app/javascript/dashboard/components/base/Hotkey.vue
@@ -6,20 +6,6 @@
 
 <style lang="scss">
 kbd.hotkey {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  user-select: none;
-  justify-content: center;
-  padding: var(--space-micro);
-  min-width: var(--space-normal);
-  font-size: var(--font-size-micro);
-  border-radius: var(--space-smaller);
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  text-transform: uppercase;
-  color: var(--color-body);
-  letter-spacing: var(--space-micro);
-  line-height: var(--font-size-micro);
+  @apply inline-flex p-0.5 leading-[0.625rem] min-w-[1rem] tracking-wide uppercase text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600 rounded flex-shrink-0 items-center select-none justify-center;
 }
 </style>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 849ccadde..ce672e781 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="resolve-actions">
+  <div class="resolve-actions relative flex items-center justify-end">
     <div class="button-group">
       <woot-button
         v-if="isOpen"
@@ -251,23 +251,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.resolve-actions {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
 .dropdown-pane {
-  left: unset;
-  top: 2.625rem;
-  margin-top: var(--space-micro);
-  right: 0;
-  max-width: 12.5rem;
-  min-width: 9.75rem;
+  @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
 
   .dropdown-menu__item {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index 17f6a9060..0d4b5bb74 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index 756aa665e..bf8b51552 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -2,24 +2,23 @@
   <woot-modal
     :show="show"
     :on-close="() => $emit('close-account-create-modal')"
-    class="account-selector--modal"
   >
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
         :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
       />
-      <div v-if="!hasAccounts" class="alert-wrap">
-        <div class="callout alert">
-          <div class="icon-wrap">
+      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
+        <div class="items-center rounded-md flex alert">
+          <div class="ml-1 mr-3">
             <fluent-icon icon="warning" />
           </div>
           {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
         </div>
       </div>
 
-      <form class="row" @submit.prevent="addAccount">
-        <div class="medium-12 columns">
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
           <label :class="{ error: $v.accountName.$error }">
             {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
             <input
@@ -30,8 +29,8 @@
             />
           </label>
         </div>
-        <div class="modal-footer medium-12 columns">
-          <div class="medium-12 columns">
+        <div class="w-full">
+          <div class="w-full">
             <woot-submit-button
               :disabled="
                 $v.accountName.$invalid ||
@@ -102,20 +101,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.alert-wrap {
-  font-size: var(--font-size-small);
-  margin: var(--space-medium) var(--space-large) var(--space-zero);
-
-  .callout {
-    align-items: center;
-    border-radius: var(--border-radius-normal);
-    display: flex;
-  }
-}
-
-.icon-wrap {
-  margin-left: var(--space-smaller);
-  margin-right: var(--space-slab);
-}
-</style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 9e5d32b69..d2a9db3af 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-700 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
+    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
   >
     <div class="flex flex-col items-center">
       <logo
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index 0ebc1ed3e..ac23b9ea0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -3,7 +3,7 @@
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index f4f395874..fe615ad3a 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
   >
     <account-context @toggle-accounts="toggleAccountModal" />
     <transition-group
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index f0302c44e..0917c95f8 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -114,7 +114,9 @@ export default {
   },
   computed: {
     showIcon() {
-      return { 'text-truncate': this.shouldTruncate };
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
     },
     isCountZero() {
       return this.childItemCount === 0;
diff --git a/app/javascript/dashboard/components/ui/ContextMenu.vue b/app/javascript/dashboard/components/ui/ContextMenu.vue
index 6d8fca703..72722c0c4 100644
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="context-menu-container"
+    class="fixed outline-none z-[9999] cursor-pointer"
     :style="style"
     tabindex="0"
     @blur="$emit('close')"
@@ -40,11 +40,3 @@ export default {
   },
 };
 </script>
-<style>
-.context-menu-container {
-  position: fixed;
-  z-index: var(--z-index-very-high);
-  outline: none;
-  cursor: pointer;
-}
-</style>
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 84fe59ee4..7b9c44a46 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
     <span v-if="icon" class="label-action--button">
-      <fluent-icon :icon="icon" size="12" class="label--icon" />
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
     </span>
     <span
       v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
@@ -103,145 +103,98 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-
 .label {
-  display: inline-flex;
-  align-items: center;
-  font-weight: var(--font-weight-medium);
-  gap: var(--space-smaller);
-  margin-right: var(--space-smaller);
-  margin-bottom: var(--space-smaller);
-  padding: var(--space-smaller);
-  background: var(--s-50);
-  color: var(--s-800);
-  border: 1px solid var(--s-75);
-  height: var(--space-medium);
+  @apply inline-flex items-center font-medium gap-1 mr-1 rtl:ml-1 rtl:mr-0 mb-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
 
   &.small {
-    font-size: var(--font-size-mini);
-    padding: var(--space-micro) var(--space-smaller);
-    line-height: 1.2;
-    height: var(--space-two);
-  }
-
-  .label--icon {
-    cursor: pointer;
+    @apply text-xs py-0.5 px-1 leading-tight h-5;
   }
 
   &.small .label--icon,
   &.small .close--icon {
-    font-size: var(--font-size-nano);
+    @apply text-[0.5rem];
   }
 
   a {
-    font-size: var(--font-size-mini);
+    @apply text-xs;
     &:hover {
-      text-decoration: underline;
+      @apply underline;
     }
   }
 
   /* Color Schemes */
   &.primary {
-    background: var(--w-100);
-    color: var(--w-900);
-    border: 1px solid var(--w-200);
+    @apply bg-woot-100 dark:bg-woot-100 text-woot-900 dark:text-woot-900 border border-solid border-woot-200;
+
     a {
-      color: var(--w-900);
+      @apply text-woot-900 dark:text-woot-900;
     }
     .label-color-dot {
-      background: var(--w-600);
+      @apply bg-woot-600 dark:bg-woot-600;
     }
   }
   &.secondary {
-    background: var(--s-100);
-    color: var(--s-900);
-    border: 1px solid var(--s-200);
+    @apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
     a {
-      color: var(--s-900);
+      @apply text-slate-900 dark:text-slate-100;
     }
     .label-color-dot {
-      background: var(--s-600);
+      @apply bg-slate-600 dark:bg-slate-600;
     }
   }
   &.success {
-    background: var(--g-100);
-    color: var(--g-900);
-    border: 1px solid var(--g-200);
+    @apply bg-green-100 dark:bg-green-700 text-green-900 dark:text-green-100 border border-solid border-green-200 dark:border-green-600;
+
     a {
-      color: var(--g-900);
+      @apply text-green-900 dark:text-green-100;
     }
     .label-color-dot {
-      background: var(--g-600);
+      @apply bg-green-600 dark:bg-green-600;
     }
   }
   &.alert {
-    background: var(--r-100);
-    color: var(--r-900);
-    border: 1px solid var(--r-200);
+    @apply bg-red-100 dark:bg-red-700 text-red-900 dark:text-red-100 border border-solid border-red-200 dark:border-red-600;
+
     a {
-      color: var(--r-900);
+      @apply text-red-900 dark:text-red-100;
     }
     .label-color-dot {
-      background: var(--r-600);
+      @apply bg-red-600 dark:bg-red-600;
     }
   }
   &.warning {
-    background: var(--y-100);
-    color: var(--y-900);
-    border: 1px solid var(--y-200);
+    @apply bg-yellow-100 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 border border-solid border-yellow-200 dark:border-yellow-600;
+
     a {
-      color: var(--y-900);
+      @apply text-yellow-900 dark:text-yellow-100;
     }
     .label-color-dot {
-      background: var(--y-900);
+      @apply bg-yellow-900 dark:bg-yellow-900;
     }
   }
 
   &.smooth {
-    background: transparent;
-    color: var(--s-700);
-    border: 1px solid var(--s-100);
+    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-slate-100 dark:border-slate-700;
   }
 
   &.dashed {
-    background: transparent;
-    color: var(--s-700);
-    border: 1px dashed var(--s-100);
+    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-slate-100 dark:border-slate-700;
   }
 }
 
 .label-close--button {
-  color: var(--s-800);
-  margin-bottom: var(--space-minus-micro);
-  border-radius: var(--border-radius-small);
-  cursor: pointer;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background: var(--s-100);
-  }
+  @apply text-slate-800 dark:text-slate-100 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-slate-100 dark:hover:bg-slate-700;
 }
 
 .label-action--button {
-  display: flex;
-  margin-right: var(--space-smaller);
+  @apply flex mr-1;
 }
 
 .label-color-dot {
-  display: inline-block;
-  width: var(--space-slab);
-  height: var(--space-slab);
-  border-radius: var(--border-radius-small);
-  box-shadow: var(--shadow-small);
+  @apply inline-block w-3 h-3 rounded-sm shadow-sm;
 }
 .label.small .label-color-dot {
-  width: var(--space-small);
-  height: var(--space-small);
-  border-radius: var(--border-radius-small);
-  box-shadow: var(--shadow-small);
+  @apply w-2 h-2 rounded-sm shadow-sm;
 }
 </style>
diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index d8355f8aa..fd3d7c16b 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -1,20 +1,30 @@
 <template>
-  <div class="preview-card--wrap" :class="{ activecard: active }">
+  <div class="preview-card--wrap" :class="{ 'active-card': active }">
     <div class="header--wrap" :class="{ active: active }">
-      <div class="heading-wrap text-block-title">{{ heading }}</div>
+      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
       <fluent-icon
         v-if="active"
         icon="checkmark-circle"
         type="solid"
         size="24"
-        class="checkmark"
+        class="text-woot-500 dark:text-woot-500"
       />
     </div>
-    <div class="content-wrap">
+    <div
+      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+    >
       {{ content }}
     </div>
-    <div v-if="src" class="image-wrap">
-      <img :src="src" class="image" :class="{ activeimage: active }" />
+    <div v-if="src" class="p-3">
+      <img
+        :src="src"
+        class="border border-solid rounded-md"
+        :class="
+          active
+            ? 'border-woot-75 dark:border-woot-700'
+            : 'border-slate-50 dark:border-slate-600'
+        "
+      />
     </div>
     <slot v-else />
   </div>
@@ -49,66 +59,18 @@ export default {
 
 <style lang="scss" scoped>
 .preview-card--wrap {
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  max-height: 21.25rem;
-  max-width: 23.75rem;
-  min-width: 15rem;
+  @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
 
   .header--wrap {
-    background: var(--s-50);
-    border-bottom: 1px solid var(--color-border);
-    border-top-left-radius: var(--border-radius-normal);
-    border-top-right-radius: var(--border-radius-normal);
-    display: flex;
-    height: 2.5rem;
-    justify-content: space-between;
-    padding: var(--space-small);
-    width: 100%;
+    @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
   }
 
   .active {
-    background: var(--w-50);
-    border-bottom: 1px solid var(--w-75);
-  }
-
-  .heading-wrap {
-    align-items: center;
-    display: flex;
-    font-weight: var(--font-weight-medium);
-    padding: var(--space-smaller);
-  }
-
-  .checkmark {
-    color: var(--w-500);
-  }
-
-  .content-wrap {
-    color: var(--s-700);
-    font-size: var(--font-size-mini);
-    line-height: 1.4;
-    padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
-    text-align: start;
-  }
-
-  .image-wrap {
-    padding: var(--space-slab);
-  }
-
-  .image {
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-normal);
-  }
-
-  .activeimage {
-    border: 1px solid var(--w-75);
+    @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
   }
 }
 
-.activecard {
-  background: var(--w-25);
-  border: 1px solid var(--w-300);
+.active-card {
+  @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
 }
 </style>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index 0f1c810e6..57894de0a 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -26,10 +26,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .toggle-button {
+  @apply bg-slate-200 dark:bg-slate-600;
   --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
     rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
     rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  background-color: var(--s-200);
   border-radius: var(--border-radius-large);
   border: 2px solid transparent;
   cursor: pointer;
@@ -61,8 +61,8 @@ export default {
   }
 
   span {
+    @apply bg-white dark:bg-slate-900;
     --space-one-point-five: 0.9375rem;
-    background-color: var(--white);
     border-radius: 100%;
     box-shadow: var(--toggle-button-box-shadow);
     display: inline-block;
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 04f1bd48c..01742136f 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -7,9 +7,11 @@
   >
     <a @click="onTabClick">
       {{ name }}
-      <span v-if="showBadge" class="badge">
-        {{ getItemCount }}
-      </span>
+      <div v-if="showBadge" class="badge">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
     </a>
   </li>
 </template>
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 09eebe711..1cbd85531 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -5,7 +5,7 @@
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="text-xxs text-black-600 leading-4 ml-auto hover:text-black-900"
+    class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 0c0d1eccc..31403e09c 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -11,8 +11,10 @@
       class="item"
       :class="{ active: isActive(item), over: isOver(item) }"
     >
-      <div class="flex-align-center">
-        <h3 class="text-truncate">
+      <div class="flex items-center">
+        <h3
+          class="overflow-hidden whitespace-nowrap text-ellipsis leading-tight"
+        >
           {{ item.title }}
         </h3>
         <span v-if="isOver(item)" class="completed">
@@ -42,7 +44,7 @@ export default {
   },
   computed: {
     classObject() {
-      return 'full-width';
+      return 'w-full';
     },
     activeIndex() {
       return this.items.findIndex(i => i.route === this.$route.name);
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index 46b25f2fb..df30d461d 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="column">
+  <div class="flex flex-col">
     <woot-modal-header :header-title="headerTitle" />
-    <form class="row modal-content" @submit.prevent="applyText">
+    <form
+      class="modal-content flex flex-col w-full"
+      @submit.prevent="applyText"
+    >
       <div v-if="draftMessage" class="w-full">
-        <h4 class="sub-block-title margin-top-1 ">
+        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
           {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
         </h4>
         <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="sub-block-title margin-top-1">
+        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
           }}
@@ -18,7 +21,7 @@
         <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
       </div>
 
-      <div class="modal-footer justify-content-end w-full">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button variant="clear" @click.prevent="onClose">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
@@ -98,7 +101,7 @@ export default {
 
 <style lang="scss" scoped>
 .modal-content {
-  padding-top: var(--space-small);
+  @apply pt-2 px-8 pb-8;
 }
 
 .container {
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 47aed3974..586a9c1f2 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -1,29 +1,37 @@
 <template>
-  <div class="preview-item__wrap">
+  <div
+    class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
+  >
     <div
       v-for="(attachment, index) in attachments"
       :key="attachment.id"
-      class="preview-item"
+      class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
     >
-      <div class="thumb-wrap">
+      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
           v-if="isTypeImage(attachment.resource)"
           class="image-thumb"
           :src="attachment.thumb"
         />
-        <span v-else class="attachment-thumb"> 📄 </span>
+        <span v-else class="w-6 h-6 text-lg relative -top-px text-left">
+          📄
+        </span>
       </div>
-      <div class="file-name-wrap">
-        <span class="item">
+      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
+        <span
+          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
+        >
           {{ fileName(attachment.resource) }}
         </span>
       </div>
-      <div class="file-size-wrap">
-        <span class="item text-truncate">
+      <div class="w-[30%] justify-center">
+        <span
+          class="item overflow-hidden text-xs text-ellipsis whitespace-nowrap"
+        >
           {{ formatFileSize(attachment.resource) }}
         </span>
       </div>
-      <div class="remove-file-wrap">
+      <div class="flex items-center justify-center">
         <woot-button
           v-if="!isTypeAudio(attachment.resource)"
           class="remove--attachment clear secondary"
@@ -70,103 +78,20 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.preview-item__wrap {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  margin-top: var(--space-normal);
-  max-height: 12.5rem;
-}
-
-.preview-item {
-  display: flex;
-  padding: var(--space-slab) 0 0;
-  background: var(--color-background-light);
-  background: var(--b-50);
-  border-radius: var(--border-radius-normal);
-  width: 15rem;
-  padding: var(--space-smaller);
-  margin-bottom: var(--space-one);
-}
-
-.thumb-wrap {
-  max-width: var(--space-jumbo);
-  flex-shrink: 0;
-  width: var(--space-medium);
-  display: flex;
-  align-items: center;
-}
-
 .image-thumb {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  object-fit: cover;
-  border-radius: var(--border-radius-small);
-}
-
-.attachment-thumb {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  font-size: var(--font-size-medium);
-  text-align: center;
-  position: relative;
-  top: -1px;
-  text-align: left;
+  @apply w-6 h-6 object-cover rounded-sm;
 }
 
 .file-name-wrap,
 .file-size-wrap {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-smaller);
+  @apply flex items-center py-0 px-1;
 
   > .item {
-    margin: 0;
-    overflow: hidden;
-    font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-medium);
+    @apply m-0 overflow-hidden text-xs font-medium;
   }
 }
 
-.preview-header {
-  padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
-}
-
-.file-name-wrap {
-  max-width: 60%;
-  min-width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: var(--space-small);
-
-  .item {
-    height: var(--space-normal);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.file-size-wrap {
-  width: 30%;
-  justify-content: center;
-}
-
-.remove-file-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .remove--attachment {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  border-radius: var(--space-medium);
-  font-size: var(--font-size-small);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-background);
-  }
+  @apply w-6 h-6 rounded-md text-sm cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 6ce1de728..3c12e8bfd 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -16,7 +16,7 @@
         </option>
       </select>
       <div v-if="showActionInput" class="filter__answer--wrap">
-        <div v-if="inputType">
+        <div v-if="inputType" class="w-full">
           <div
             v-if="inputType === 'search_select'"
             class="multiselect-wrap--small"
@@ -201,102 +201,80 @@ export default {
 
 <style lang="scss" scoped>
 .filter {
-  background: var(--color-background);
-  padding: var(--space-small);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-medium);
-  margin-bottom: var(--space-small);
+  @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
 
   &.is-a-macro {
-    margin-bottom: 0;
-    background: var(--white);
-    padding: var(--space-zero);
-    border: unset;
-    border-radius: unset;
+    @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
   }
 }
 
 .no-margin-bottom {
-  margin-bottom: 0;
+  @apply mb-0;
 }
 
 .filter.has-error {
-  background: var(--r-50);
+  @apply bg-red-50 dark:bg-red-100;
 }
 
 .filter-inputs {
-  display: flex;
+  @apply flex;
 }
 
 .filter-error {
-  color: var(--r-500);
-  display: block;
-  margin: var(--space-smaller) 0;
+  @apply text-red-500 dark:text-red-600 block my-1 mx-0;
 }
 
 .action__question,
 .filter__operator {
-  margin-bottom: var(--space-zero);
-  margin-right: var(--space-smaller);
+  @apply mb-0 mr-1;
 }
 
 .action__question {
-  max-width: 50%;
+  @apply max-w-[50%];
 }
 
 .action__question.full-width {
-  max-width: 100%;
+  @apply max-w-full;
 }
 
 .filter__answer--wrap {
-  margin-right: var(--space-smaller);
-  flex-grow: 1;
-  max-width: 50%;
+  @apply max-w-[50%] flex-grow mr-1 flex w-full items-center justify-start;
 
   input {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 .filter__answer {
   &.answer--text-input {
-    margin-bottom: var(--space-zero);
+    @apply mb-0;
   }
 }
 
 .filter__join-operator-wrap {
-  position: relative;
-  z-index: var(--z-index-twenty);
-  margin: var(--space-zero);
+  @apply relative z-20 m-0;
 }
 
 .filter__join-operator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin: var(--space-one) var(--space-zero);
+  @apply flex items-center justify-center relative my-2.5 mx-0;
 
   .operator__line {
-    position: absolute;
-    width: 100%;
-    border-bottom: 1px solid var(--color-border);
+    @apply absolute w-full border-b border-solid border-slate-75 dark:border-slate-600;
   }
 
   .operator__select {
-    position: relative;
-    width: auto;
     margin-bottom: var(--space-zero) !important;
+    @apply relative w-auto;
   }
 }
 
 .multiselect {
-  margin-bottom: var(--space-zero);
+  @apply mb-0;
 }
 .action-message {
-  margin: var(--space-small) var(--space-zero) var(--space-zero);
+  @apply mt-2 mx-0 mb-0;
 }
 // Prosemirror does not have a native way of hiding the menu bar, hence
 ::v-deep .ProseMirror-menubar {
-  display: none;
+  @apply hidden;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index 0840072a6..b2fb1004a 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -82,37 +82,22 @@ export default {
 
 <style scoped>
 input[type='file'] {
-  display: none;
+  @apply hidden;
 }
 .input-wrapper {
-  display: flex;
-  height: 39px;
-  background-color: var(--white);
-  border-radius: var(--border-radius-small);
-  border: 1px dashed var(--w-100);
-  padding: var(--space-smaller) var(--space-small);
-  align-items: center;
-  font-size: var(--font-size-mini);
-  cursor: pointer;
+  @apply flex h-9 bg-white dark:bg-slate-900 py-1 px-2 items-center text-xs cursor-pointer rounded-sm border border-dashed border-woot-100 dark:border-woot-500;
 }
 .success-icon {
-  margin-right: var(--space-small);
-  color: var(--g-500);
+  @apply text-green-500 dark:text-green-600 mr-2;
 }
 .error-icon {
-  margin-right: var(--space-small);
-  color: var(--r-500);
+  @apply text-red-500 dark:text-red-600 mr-2;
 }
 
 .processing {
-  cursor: not-allowed;
-  opacity: 0.9;
+  @apply cursor-not-allowed opacity-90;
 }
 .file-button {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  margin-bottom: 0;
+  @apply whitespace-nowrap overflow-hidden text-ellipsis w-full mb-0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 28255209e..1fad70eef 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -38,16 +38,18 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+@tailwind components;
+@layer components {
+  .avatar-color {
+    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+  }
+
+  .dark-avatar-color {
+    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+  }
+}
 .avatar-container {
-  display: flex;
-  line-height: 100%;
-  font-weight: 500;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
-  color: var(--w-600);
-  cursor: default;
+  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-woot-600 dark:text-woot-200;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index b45d4daaa..47ace433e 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -1,9 +1,15 @@
 <template>
-  <div class="row empty-state">
-    <h3 class="title">
+  <div class="empty-state py-16 px-1 ml-0 mr-0">
+    <h3
+      v-if="title"
+      class="text-slate-700 dark:text-slate-200 block text-center w-full text-4xl font-thin"
+    >
       {{ title }}
     </h3>
-    <p class="message">
+    <p
+      v-if="message"
+      class="block text-center text-slate-500 dark:text-slate-400 my-4 mx-auto w-[90%]"
+    >
       {{ message }}
     </p>
     <slot />
@@ -14,7 +20,6 @@ export default {
   props: {
     title: { type: String, default: '' },
     message: { type: String, default: '' },
-    buttonText: { type: String, default: '' },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index b3dd67dc3..2bd7acf57 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="filters">
-    <div class="filter" :class="{ error: v.values.$dirty && v.values.$error }">
-      <div class="filter-inputs">
+  <div>
+    <div
+      class="rounded-md p-2 border border-solid"
+      :class="getInputErrorClass(v.values.$dirty, v.values.$error)"
+    >
+      <div class="flex">
         <select
           v-if="groupedFilters"
           v-model="attributeKey"
-          class="filter__question"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
           @change="resetFilter()"
         >
           <optgroup
@@ -25,7 +28,7 @@
         <select
           v-else
           v-model="attributeKey"
-          class="filter__question"
+          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
           @change="resetFilter()"
         >
           <option
@@ -38,7 +41,10 @@
           </option>
         </select>
 
-        <select v-model="filterOperator" class="filter__operator">
+        <select
+          v-model="filterOperator"
+          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+        >
           <option
             v-for="(operator, o) in operators"
             :key="o"
@@ -48,7 +54,7 @@
           </option>
         </select>
 
-        <div v-if="showUserInput" class="filter__answer--wrap">
+        <div v-if="showUserInput" class="filter__answer--wrap mr-1 flex-grow">
           <div
             v-if="inputType === 'multi_select'"
             class="multiselect-wrap--small"
@@ -90,14 +96,14 @@
               v-model="values"
               type="date"
               :editable="false"
-              class="answer--text-input datepicker"
+              class="mb-0 datepicker"
             />
           </div>
           <input
             v-else
             v-model="values"
             type="text"
-            class="answer--text-input"
+            class="mb-0"
             placeholder="Enter value"
           />
         </div>
@@ -108,14 +114,25 @@
           @click="removeFilter"
         />
       </div>
-      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
+      <p
+        v-if="v.values.$dirty && v.values.$error"
+        class="text-red-500 dark:text-red-600 block my-1 mx-0"
+      >
         {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
       </p>
     </div>
 
-    <div v-if="showQueryOperator" class="filter__join-operator">
-      <hr class="operator__line" />
-      <select v-model="query_operator" class="operator__select">
+    <div
+      v-if="showQueryOperator"
+      class="flex items-center justify-center relative my-2.5 mx-0"
+    >
+      <hr
+        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
+      />
+      <select
+        v-model="query_operator"
+        class="bg-white dark:bg-slate-900 mb-0 w-auto relative text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+      >
         <option value="and">
           {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
         </option>
@@ -254,86 +271,22 @@ export default {
     resetFilter() {
       this.$emit('resetFilter');
     },
+    getInputErrorClass(isDirty, hasError) {
+      return isDirty && hasError
+        ? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
+        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
-.filter {
-  background: var(--color-background);
-  padding: var(--space-small);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-medium);
-}
-
-.filter.error {
-  background: var(--r-50);
-}
-
-.filter-inputs {
-  display: flex;
-}
-
-.filter-error {
-  color: var(--r-500);
-  display: block;
-  margin: var(--space-smaller) 0;
-}
-
-.filter__question,
-.filter__operator {
-  margin-bottom: var(--space-zero);
-  margin-right: var(--space-smaller);
-}
-
-.filter__question {
-  max-width: 30%;
-}
-
-.filter__operator {
-  max-width: 20%;
-}
-
 .filter__answer--wrap {
-  margin-right: var(--space-smaller);
-  flex-grow: 1;
-
   input {
-    margin-bottom: 0;
-  }
-}
-.filter__answer {
-  &.answer--text-input {
-    margin-bottom: var(--space-zero);
-  }
-}
-
-.filter__join-operator-wrap {
-  position: relative;
-  z-index: var(--z-index-twenty);
-  margin: var(--space-zero);
-}
-
-.filter__join-operator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin: var(--space-one) var(--space-zero);
-
-  .operator__line {
-    position: absolute;
-    width: 100%;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .operator__select {
-    position: relative;
-    width: auto;
-    margin-bottom: var(--space-zero) !important;
+    @apply bg-white dark:bg-slate-900 mb-0 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600;
   }
 }
 
 .multiselect {
-  margin-bottom: var(--space-zero);
+  @apply mb-0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
index 884f155a7..6d5efdf90 100644
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
+++ b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
@@ -1,13 +1,22 @@
 <template>
-  <div class="option-item--inbox">
-    <span class="badge--icon">
-      <fluent-icon :icon="computedInboxIcon" size="14" />
+  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
+    <span
+      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
+    >
+      <fluent-icon
+        :icon="computedInboxIcon"
+        size="14"
+        class="text-slate-800 dark:text-slate-200"
+      />
     </span>
-    <div class="option__user-data">
+    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
       <h5 class="option__title">
         {{ name }}
       </h5>
-      <p class="option__body text-truncate" :title="inboxIdentifier">
+      <p
+        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
+        :title="inboxIdentifier"
+      >
         {{ inboxIdentifier || computedInboxType }}
       </p>
     </div>
@@ -58,45 +67,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.option-item--inbox {
-  display: flex;
-  align-items: center;
-  height: 2.375rem;
-  min-width: 0;
-  padding: 0 var(--space-smaller);
-}
-.badge--icon {
-  display: inline-flex;
-  border-radius: var(--border-radius-small);
-  margin-right: var(--space-smaller);
-  background: var(--s-25);
-  padding: var(--space-micro);
-  align-items: center;
-  flex-shrink: 0;
-  justify-content: center;
-  width: var(--space-medium);
-  height: var(--space-medium);
-}
-
-.option__user-data {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0;
-  margin-left: var(--space-smaller);
-  margin-right: var(--space-smaller);
-}
 .option__body {
-  display: inline-block;
-  color: var(--s-600);
-  font-size: var(--font-size-small);
-  line-height: 1.3;
-  min-width: 0;
-  margin: 0;
+  @apply inline-block text-slate-600 dark:text-slate-200 leading-[1.3] min-w-0 m-0;
 }
 .option__title {
-  line-height: 1.1;
-  font-size: var(--font-size-mini);
-  margin: 0;
+  @apply leading-[1.1] text-xs m-0 text-slate-800 dark:text-slate-100;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index 427772cf5..28e6931b6 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="inbox--name">
-    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
+    />
     {{ inbox.name }}
   </div>
 </template>
@@ -23,20 +29,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.inbox--name {
-  align-items: center;
-  display: inline-flex;
-  padding: var(--space-micro) 0;
-  line-height: var(--space-slab);
-  font-weight: var(--font-weight-medium);
-  background: none;
-  color: var(--s-600);
-  font-size: var(--font-size-mini);
-  margin: 0 var(--space-one);
-}
-
-.inbox--icon {
-  margin-right: var(--space-micro);
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 0ebee66b8..7b143dfca 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -1,9 +1,14 @@
 <template>
-  <div class="column page-top-banner">
-    <h2 class="page-sub-title">
+  <div
+    class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
+  >
+    <h2 class="text-2xl text-slate-800 dark:text-slate-100">
       {{ headerTitle }}
     </h2>
-    <p v-if="headerContent" class="small-12 column">
+    <p
+      v-if="headerContent"
+      class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
+    >
       {{ headerContent }}
     </p>
     <slot />
@@ -24,10 +29,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.page-top-banner {
-  border-bottom: 1px solid var(--color-border-light);
-  background: var(--s-25);
-  padding: var(--space-normal) var(--space-large) 0;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index d1c02095b..2ba91ae6b 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -1,7 +1,10 @@
 <template>
-  <footer v-if="isFooterVisible" class="footer">
+  <footer
+    v-if="isFooterVisible"
+    class="bg-white dark:bg-slate-800 h-[60px] border-t border-solid border-slate-75 dark:border-slate-700/50 flex items-center justify-between py-0 px-4"
+  >
     <div class="left-aligned-wrap">
-      <div class="page-meta">
+      <div class="text-xs text-slate-600 dark:text-slate-200">
         <strong>{{ firstIndex }}</strong>
         - <strong>{{ lastIndex }}</strong> of
         <strong>{{ totalCount }}</strong> items
@@ -161,22 +164,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.footer {
-  height: 60px;
-  border-top: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 var(--space-normal);
-}
-.page-meta {
-  font-size: var(--font-size-mini);
-}
-
 .goto-first,
 .goto-last {
   i:last-child {
-    margin-left: var(--space-minus-smaller);
+    @apply -ml-1;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index ff460e2d2..e2c7a9ccf 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -128,10 +128,12 @@ export default {
       return { width: statusSize, height: statusSize };
     },
     thumbnailClass() {
-      const classname = this.hasBorder ? 'border' : '';
+      const className = this.hasBorder
+        ? 'border border-solid border-white dark:border-slate-700/50'
+        : '';
       const variant =
         this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
-      return `user-thumbnail ${classname} ${variant}`;
+      return `user-thumbnail ${className} ${variant}`;
     },
     thumbnailBoxClass() {
       const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
@@ -185,14 +187,9 @@ export default {
     box-sizing: border-box;
     object-fit: cover;
     vertical-align: initial;
-
-    &.border {
-      border: 1px solid white;
-    }
   }
 
   .source-badge {
-    background: white;
     border-radius: var(--border-radius-small);
     bottom: var(--space-minus-micro);
     box-shadow: var(--shadow-small);
@@ -201,6 +198,7 @@ export default {
     position: absolute;
     right: 0;
     width: var(--space-slab);
+    @apply bg-white dark:bg-slate-900;
   }
 
   .user-online-status {
@@ -213,15 +211,15 @@ export default {
   }
 
   .user-online-status--online {
-    background: var(--g-400);
+    @apply bg-green-400 dark:bg-green-400;
   }
 
   .user-online-status--busy {
-    background: var(--y-500);
+    @apply bg-yellow-500 dark:bg-yellow-500;
   }
 
   .user-online-status--offline {
-    background: var(--s-500);
+    @apply bg-slate-500 dark:bg-slate-500;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 35f6de9d6..a92f7da53 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -6,7 +6,9 @@
       :username="user.name"
       :status="user.availability_status"
     />
-    <h6 class="text-block-title user-name text-truncate text-capitalize">
+    <h6
+      class="text-block-title user-name overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+    >
       {{ user.name }}
     </h6>
   </div>
@@ -33,12 +35,10 @@ export default {
 
 <style scoped lang="scss">
 .row--user-block {
-  align-items: center;
-  display: flex;
-  text-align: left;
+  @apply items-center flex text-left;
 
   .user-name {
-    margin: 0 var(--space-small);
+    @apply my-0 mx-2 text-slate-700 dark:text-slate-100;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 41658b6d1..28f139c8f 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -445,69 +445,61 @@ export default {
 @import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
 
 .ProseMirror-menubar-wrapper {
-  display: flex;
-  flex-direction: column;
-
+  @apply flex flex-col;
   .ProseMirror-menubar {
     min-height: var(--space-two) !important;
-    margin-left: var(--space-minus-one);
-    padding-bottom: 0;
-  }
+    @apply -ml-2.5 pb-0 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100;
 
+    .ProseMirror-menu-active {
+      @apply bg-slate-75 dark:bg-slate-800;
+    }
+  }
   > .ProseMirror {
-    padding: 0;
-    word-break: break-word;
+    @apply p-0 break-words text-slate-800 dark:text-slate-100;
   }
 }
 
 .editor-root {
-  width: 100%;
-  position: relative;
+  @apply w-full relative;
 }
 
 .ProseMirror-woot-style {
-  min-height: 5rem;
-  max-height: 7.5rem;
-  overflow: auto;
+  @apply overflow-auto min-h-[5rem] max-h-[7.5rem];
 }
 
 .ProseMirror-prompt {
-  z-index: var(--z-index-highest);
-  background: var(--color-background-light);
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
+  @apply z-50 bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800;
 }
 
 .is-private {
   .prosemirror-mention-node {
-    font-weight: var(--font-weight-medium);
-    background: var(--s-50);
-    color: var(--s-900);
-    padding: 0 var(--space-smaller);
+    @apply font-medium bg-slate-50 dark:bg-slate-200 text-slate-900 dark:text-slate-900 py-0 px-1;
   }
-  .ProseMirror-menubar {
-    background: var(--y-50);
+
+  .ProseMirror-menubar-wrapper {
+    .ProseMirror-menubar {
+      @apply bg-yellow-50 dark:bg-yellow-50 text-slate-700 dark:text-slate-700;
+    }
+
+    > .ProseMirror {
+      @apply text-slate-800 dark:text-slate-800;
+    }
   }
 }
 
 .editor-wrap {
-  margin-bottom: var(--space-normal);
+  @apply mb-4;
 }
 
 .message-editor {
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-normal);
-  padding: 0 var(--space-slab);
-  margin-bottom: 0;
+  @apply border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md py-0 px-1 mb-0;
 }
 
 .editor_warning {
-  border: 1px solid var(--r-400);
+  @apply border border-solid border-red-400 dark:border-red-400;
 }
 
 .editor-warning__message {
-  color: var(--r-400);
-  font-weight: var(--font-weight-normal);
-  padding: var(--space-smaller) 0 0 0;
+  @apply text-red-400 dark:text-red-400 font-normal pt-1 pb-0 px-0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index f13057e8a..804b19e7f 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -103,7 +103,7 @@
           class="modal-mask"
         >
           <fluent-icon icon="cloud-backup" />
-          <h4 class="page-sub-title">
+          <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
         </div>
@@ -323,48 +323,35 @@ export default {
 
 <style lang="scss" scoped>
 .bottom-box {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--space-slab) var(--space-normal);
+  @apply flex justify-between py-3 px-4;
 
   &.is-note-mode {
-    background: var(--y-50);
+    @apply bg-yellow-50 dark:bg-yellow-50;
   }
 }
 
-.left-wrap .button {
-  margin-right: var(--space-small);
-}
-
 .left-wrap {
-  align-items: center;
-  display: flex;
+  @apply items-center flex gap-2;
 }
 
 .right-wrap {
-  display: flex;
+  @apply flex;
 }
 
 ::v-deep .file-uploads {
   label {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
   &:hover .button {
-    background: var(--s-100);
+    @apply dark:bg-slate-800 bg-slate-100;
   }
 }
 
 .modal-mask {
-  color: var(--s-600);
-  background: var(--white-transparent);
-  flex-direction: column;
-}
-
-.page-sub-title {
-  color: var(--s-600);
+  @apply text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col;
 }
 
 .icon {
-  font-size: 5rem;
+  @apply text-[5rem];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 147854347..0b80d3052 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="top-box">
-    <div class="mode-wrap button-group">
+  <div class="bg-black-50 flex justify-between dark:bg-slate-800">
+    <div class="button-group">
       <woot-button
         variant="clear"
         class="button--reply"
@@ -20,8 +20,8 @@
         {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
       </woot-button>
     </div>
-    <div class="action-wrap">
-      <div v-if="isMessageLengthReachingThreshold" class="tabs-title">
+    <div class="flex items-center my-0 mx-4">
+      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
         <span :class="charLengthClass">
           {{ characterLengthWarning }}
         </span>
@@ -90,7 +90,7 @@ export default {
       };
     },
     charLengthClass() {
-      return this.charactersRemaining < 0 ? 'message-error' : 'message-length';
+      return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
     },
     characterLengthWarning() {
       return this.charactersRemaining < 0
@@ -118,70 +118,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.top-box {
-  display: flex;
-  justify-content: space-between;
-  @apply bg-black-50 dark:bg-slate-800;
-}
-
 .button-group {
-  border: 0;
-  padding: 0;
-  margin: 0;
+  @apply flex border-0 p-0 m-0;
 
   .button {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    padding: var(--space-one) var(--space-normal);
-    margin: 0;
-    position: relative;
-    z-index: 1;
-
+    @apply text-sm font-medium py-2.5 px-4 m-0 relative z-10;
     &.is-active {
-      background: white;
+      @apply bg-white dark:bg-slate-900;
     }
   }
-
   .button--reply {
-    border-radius: 0;
-    @apply border-r border-b-0 border-l-0 border-slate-50 dark:border-slate-700;
-
+    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
     &:hover,
     &:focus {
       @apply border-r border-slate-50 dark:border-slate-700;
     }
   }
-
   .button--note {
-    border-radius: 0;
-
+    @apply border-l-0 rounded-none;
     &.is-active {
-      @apply border-r border-b-0 border-slate-50 dark:border-slate-700;
-      background: var(--y-50);
+      @apply border-r border-b-0 bg-yellow-50 dark:bg-yellow-50 border-t-0 border-slate-50 dark:border-slate-700;
     }
-
     &:hover,
     &:active {
-      color: var(--y-700);
+      @apply text-yellow-700 dark:text-yellow-700;
     }
   }
 }
-
 .button--note {
-  color: var(--y-600);
-}
-
-.action-wrap {
-  display: flex;
-  align-items: center;
-  margin: 0 var(--space-normal);
-  font-size: var(--font-size-mini);
-
-  .message-error {
-    color: var(--r-600);
-  }
-  .message-length {
-    color: var(--s-600);
-  }
+  @apply text-yellow-600 dark:text-yellow-600;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
index 2bbc2865b..7794e0ab0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
@@ -1,57 +1 @@
-<template>
-  <select v-model="activeStatus" class="status--filter" @change="onTabChange()">
-    <option
-      v-for="(value, status) in $t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS')"
-      :key="status"
-      :value="status"
-    >
-      {{ value['TEXT'] }}
-    </option>
-  </select>
-</template>
-
-<script>
-import wootConstants from 'dashboard/constants/globals';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import { hasPressedAltAndBKey } from 'shared/helpers/KeyboardHelpers';
-
-export default {
-  mixins: [eventListenerMixins],
-  data: () => ({
-    activeStatus: wootConstants.STATUS_TYPE.OPEN,
-  }),
-  methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndBKey(e)) {
-        if (this.activeStatus === wootConstants.STATUS_TYPE.OPEN) {
-          this.activeStatus = wootConstants.STATUS_TYPE.RESOLVED;
-        } else if (this.activeStatus === wootConstants.STATUS_TYPE.RESOLVED) {
-          this.activeStatus = wootConstants.STATUS_TYPE.PENDING;
-        } else if (this.activeStatus === wootConstants.STATUS_TYPE.PENDING) {
-          this.activeStatus = wootConstants.STATUS_TYPE.SNOOZED;
-        } else if (this.activeStatus === wootConstants.STATUS_TYPE.SNOOZED) {
-          this.activeStatus = wootConstants.STATUS_TYPE.ALL;
-        } else if (this.activeStatus === wootConstants.STATUS_TYPE.ALL) {
-          this.activeStatus = wootConstants.STATUS_TYPE.OPEN;
-        }
-      }
-      this.onTabChange();
-    },
-    onTabChange() {
-      this.$store.dispatch('setChatStatusFilter', this.activeStatus);
-      this.$emit('onChangeFilter', this.activeStatus);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.status--filter {
-  background-color: var(--color-background-light);
-  border: 1px solid var(--color-border);
-  font-size: var(--font-size-mini);
-  height: var(--space-medium);
-  margin: 0 var(--space-smaller);
-  padding: 0 var(--space-medium) 0 var(--space-small);
-  width: auto;
-}
-</style>
+<!-- // not using this component -->
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index ead78f643..af188769e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -1,22 +1,30 @@
 <template>
-  <div class="column">
+  <div>
     <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p>{{ filterModalSubTitle }}</p>
+      <p class="text-slate-600 dark:text-slate-200">
+        {{ filterModalSubTitle }}
+      </p>
     </woot-modal-header>
-    <div class="column modal-content">
-      <div v-if="isFolderView" class="columns">
+    <div class="p-8">
+      <div v-if="isFolderView">
         <label class="input-label" :class="{ error: !activeFolderNewName }">
           {{ $t('FILTER.FOLDER_LABEL') }}
-          <input v-model="activeFolderNewName" type="text" class="name-input" />
+          <input
+            v-model="activeFolderNewName"
+            type="text"
+            class="folder-input border-slate-75 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+          />
           <span v-if="!activeFolderNewName" class="message">
             {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
           </span>
         </label>
-        <label class="input-label">
+        <label class="mb-1">
           {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
         </label>
       </div>
-      <div class="medium-12 columns filters-wrap">
+      <div
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+      >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
           :key="i"
@@ -37,7 +45,7 @@
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
-        <div class="filter-actions">
+        <div class="mt-4">
           <woot-button
             icon="add"
             color-scheme="success"
@@ -49,8 +57,8 @@
           </woot-button>
         </div>
       </div>
-      <div class="medium-12 columns">
-        <div class="modal-footer justify-content-end w-full">
+      <div class="w-full">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
           <woot-button class="button clear" @click.prevent="onClose">
             {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
           </woot-button>
@@ -371,23 +379,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.filters-wrap {
-  padding: var(--space-normal);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--color-border);
-  background: var(--color-background-light);
-  margin-bottom: var(--space-normal);
-}
-
-.filter-actions {
-  margin-top: var(--space-normal);
-}
-
-.input-label {
-  margin-bottom: var(--space-smaller);
-
-  .name-input {
-    width: 50%;
-  }
+.folder-input {
+  @apply w-[50%];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index 15b0ec761..3c23d2804 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative">
+  <div class="relative flex">
     <woot-button
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
       variant="smooth"
@@ -12,10 +12,12 @@
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open basic-filter"
+      class="dropdown-pane dropdown-pane--open mt-1 right-0 basic-filter"
     >
-      <div class="filter__item">
-        <span>{{ this.$t('CHAT_LIST.CHAT_SORT.STATUS') }}</span>
+      <div class="items-center flex justify-between last:mt-4">
+        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
+          this.$t('CHAT_LIST.CHAT_SORT.STATUS')
+        }}</span>
         <filter-item
           type="status"
           :selected-value="chatStatus"
@@ -24,8 +26,10 @@
           @onChangeFilter="onChangeFilter"
         />
       </div>
-      <div class="filter__item">
-        <span>{{ this.$t('CHAT_LIST.CHAT_SORT.ORDER_BY') }}</span>
+      <div class="items-center flex justify-between last:mt-4">
+        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
+          this.$t('CHAT_LIST.CHAT_SORT.ORDER_BY')
+        }}</span>
         <filter-item
           type="sort"
           :selected-value="chatSortFilter"
@@ -87,36 +91,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .basic-filter {
-  margin-top: var(--space-smaller);
-  padding: var(--space-normal);
-  right: 0;
-  width: 13.125rem;
-
-  span {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .filter__item {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-
-    &:last-child {
-      margin-top: var(--space-normal);
-    }
-
-    span {
-      font-size: var(--font-size-mini);
-    }
-  }
-}
-
-.icon {
-  margin-right: var(--space-smaller);
-}
-
-.dropdown-icon {
-  margin-left: var(--space-smaller);
+  @apply w-52 p-4 top-6;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 4874d2670..6540a6c4f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -13,7 +13,7 @@
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="dashboard-app--tabs"
+      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -34,7 +34,10 @@
         @contact-panel-toggle="onToggleContactPanel"
       />
       <empty-state v-else :is-on-expanded-layout="isOnExpandedLayout" />
-      <div v-show="showContactPanel" class="conversation-sidebar-wrap">
+      <div
+        v-show="showContactPanel"
+        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
+      >
         <contact-panel
           v-if="showContactPanel"
           :conversation-id="currentChat.id"
@@ -141,12 +144,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/woot';
 .conversation-details-wrap {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  width: 100%;
+  @apply flex flex-col min-w-0 w-full;
 
   &.with-border-right {
     @apply border-r border-slate-50 dark:border-slate-700;
@@ -154,40 +153,18 @@ export default {
 }
 
 .dashboard-app--tabs {
-  background: var(--white);
-  margin-top: -1px;
-  min-height: var(--dashboard-app-tabs-height);
+  ::v-deep {
+    .tabs-title {
+      a {
+        @apply pb-2 pt-1;
+      }
+    }
+  }
 }
 
 .conversation-sidebar-wrap {
-  @apply border-r border-slate-50 dark:border-slate-700;
-  background: white;
-  flex-basis: 100%;
-
-  @include breakpoint(medium up) {
-    flex-basis: 17.5rem;
-  }
-
-  @include breakpoint(large up) {
-    flex-basis: 18.75rem;
-  }
-
-  @include breakpoint(xlarge up) {
-    flex-basis: 19.375rem;
-  }
-
-  @include breakpoint(xxlarge up) {
-    flex-basis: 20.625rem;
-  }
-
-  @include breakpoint(xxxlarge up) {
-    flex-basis: 25rem;
-  }
-
   &::v-deep .contact--panel {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
+    @apply w-full h-full max-w-full;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index e454279eb..af5bdb0b0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="conversation group border-t border-transparent"
+    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
     :class="{
-      active: isActiveChat,
+      'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,
@@ -31,41 +31,50 @@
       size="40px"
     />
     <div
-      class="conversation--details border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800 columns"
+      class="py-3 px-0 border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
     >
-      <div class="conversation--metadata">
+      <div class="flex justify-between">
         <inbox-name v-if="showInboxName" :inbox="inbox" />
-        <div class="conversation-metadata-attributes">
+        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
           <span
             v-if="showAssignee && assignee.name"
-            class="label assignee-label text-truncate"
+            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
           >
-            <fluent-icon icon="person" size="12" />
+            <fluent-icon
+              icon="person"
+              size="12"
+              class="text-slate-500 dark:text-slate-400"
+            />
             {{ assignee.name }}
           </span>
           <priority-mark :priority="chat.priority" />
         </div>
       </div>
-      <h4 class="conversation--user">
+      <h4
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[60%] text-slate-900 dark:text-slate-100"
+      >
         {{ currentContact.name }}
       </h4>
-      <p v-if="lastMessageInChat" class="conversation--message">
+      <p
+        v-if="lastMessageInChat"
+        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+      >
         <fluent-icon
           v-if="isMessagePrivate"
           size="16"
-          class="message--attachment-icon last-message-icon"
+          class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
           icon="lock-closed"
         />
         <fluent-icon
           v-else-if="messageByAgent"
           size="16"
-          class="message--attachment-icon last-message-icon"
+          class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
           icon="arrow-reply"
         />
         <fluent-icon
           v-else-if="isMessageAnActivity"
           size="16"
-          class="message--attachment-icon last-message-icon"
+          class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
           icon="info"
         />
         <span v-if="lastMessageInChat.content">
@@ -75,7 +84,7 @@
           <fluent-icon
             v-if="attachmentIcon"
             size="16"
-            class="message--attachment-icon"
+            class="-mt-0.5 align-middle inline-block"
             :icon="attachmentIcon"
           />
           {{ this.$t(`${attachmentMessageContent}`) }}
@@ -84,20 +93,31 @@
           {{ $t('CHAT_LIST.NO_CONTENT') }}
         </span>
       </p>
-      <p v-else class="conversation--message">
-        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
+      <p
+        v-else
+        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+      >
+        <fluent-icon
+          size="16"
+          class="-mt-0.5 align-middle"
+          icon="info inline-block"
+        />
         <span>
           {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
-      <div class="conversation--meta">
-        <span class="timestamp">
+      <div class="conversation--meta flex flex-col absolute right-4 top-4">
+        <span class="text-black-600 text-xxs font-normal leading-4 ml-auto">
           <time-ago
             :last-activity-timestamp="chat.timestamp"
             :created-at-timestamp="chat.created_at"
           />
         </span>
-        <span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
+        <span
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
+        >
+          {{ unreadCount > 9 ? '9+' : unreadCount }}
+        </span>
       </div>
       <card-labels :conversation-id="chat.id" />
     </div>
@@ -400,94 +420,51 @@ export default {
 </script>
 <style lang="scss" scoped>
 .conversation {
-  align-items: flex-start;
+  &.unread-chat {
+    .unread {
+      @apply block;
+    }
+    .conversation--message {
+      @apply font-semibold;
+    }
+    .conversation--user {
+      @apply font-semibold;
+    }
+  }
 
-  &:hover {
-    background: var(--color-background-light);
+  &.compact {
+    @apply pl-0;
+    .conversation--details {
+      @apply rounded-sm ml-0 pl-5 pr-2;
+    }
   }
 
   &::v-deep .user-thumbnail-box {
-    margin-top: var(--space-normal);
+    @apply mt-4;
   }
-}
 
-.conversation-selected {
-  background: var(--color-background-light);
-}
-
-.has-inbox-name {
-  &::v-deep .user-thumbnail-box {
-    margin-top: var(--space-large);
+  &.conversation-selected {
+    @apply bg-slate-25 dark:bg-slate-800;
   }
+
+  &.has-inbox-name {
+    &::v-deep .user-thumbnail-box {
+      @apply mt-8;
+    }
+    .checkbox-wrapper {
+      @apply mt-8;
+    }
+    .conversation--meta {
+      @apply mt-4;
+    }
+  }
+
   .checkbox-wrapper {
-    margin-top: var(--space-large);
-  }
-  .conversation--meta {
-    margin-top: var(--space-normal);
-  }
-}
+    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4 hover:bg-woot-100 dark:hover:bg-woot-800;
 
-.conversation--details {
-  .conversation--user {
-    padding-top: var(--space-micro);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 60%;
-  }
-}
-
-.last-message-icon {
-  color: var(--s-600);
-}
-
-.conversation--metadata {
-  display: flex;
-  justify-content: space-between;
-
-  .label {
-    background: none;
-    color: var(--s-500);
-    font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--space-slab);
-    padding: var(--space-micro) 0 var(--space-micro) 0;
-  }
-
-  .conversation-metadata-attributes {
-    display: flex;
-    gap: var(--space-small);
-    margin-left: var(--space-small);
-  }
-
-  .assignee-label {
-    display: inline-flex;
-    max-width: 50%;
-  }
-}
-
-.message--attachment-icon {
-  margin-top: var(--space-minus-micro);
-  vertical-align: middle;
-}
-
-.checkbox-wrapper {
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  margin-top: var(--space-normal);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--w-100);
-  }
-
-  input[type='checkbox'] {
-    margin: var(--space-zero);
-    cursor: pointer;
+    input[type='checkbox'] {
+      @apply m-0 cursor-pointer;
+    }
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 6794939ec..d58b81c6d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="conv-header flex-col md:flex-row">
+  <div
+    class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
+  >
     <div
       class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
     >
-      <div class="user">
+      <div
+        class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
+      >
         <back-button v-if="showBackButton" :back-url="backButtonUrl" />
         <Thumbnail
           :src="currentContact.thumbnail"
@@ -11,31 +15,38 @@
           :username="currentContact.name"
           :status="currentContact.availability_status"
         />
-        <div class="user--profile__meta">
+        <div class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0">
           <woot-button
             variant="link"
             color-scheme="secondary"
-            class="text-truncate"
+            class="overflow-hidden whitespace-nowrap text-ellipsis"
             @click.prevent="$emit('contact-panel-toggle')"
           >
-            <h3 class="sub-block-title user--name text-truncate">
+            <h3
+              class="text-base inline-block leading-tight capitalize m-0 p-0 text-ellipsis overflow-hidden whitespace-nowrap text-slate-900 dark:text-slate-100"
+            >
               <span>{{ currentContact.name }}</span>
               <fluent-icon
                 v-if="!isHMACVerified"
                 v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
                 size="14"
-                class="hmac-warning__icon"
+                class="text-yellow-600 dark:text-yellow-500 my-0 mx-0.5"
                 icon="warning"
               />
             </h3>
           </woot-button>
-          <div class="conversation--header--actions text-truncate">
+          <div
+            class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
+          >
             <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span v-if="isSnoozed" class="snoozed--display-text">
+            <span
+              v-if="isSnoozed"
+              class="font-medium text-yellow-600 dark:text-yellow-500"
+            >
               {{ snoozedDisplayText }}
             </span>
             <woot-button
-              class="user--profile__button"
+              class="p-0"
               size="small"
               variant="link"
               @click="$emit('contact-panel-toggle')"
@@ -46,8 +57,8 @@
         </div>
       </div>
       <div
-        class="header-actions-wrap mt-3 lg:mt-0"
-        :class="{ 'has-open-sidebar': isContactPanelOpen }"
+        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
+        :class="{ 'justify-end': isContactPanelOpen }"
       >
         <more-actions :conversation-id="currentChat.id" />
       </div>
@@ -161,54 +172,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.conv-header {
-  flex: 0 0 var(--space-jumbo);
-  flex-direction: row;
-}
-
-.option__desc {
-  display: flex;
-  align-items: center;
-}
-
-.option__desc {
-  &::v-deep .status-badge {
-    margin-right: var(--space-small);
-    min-width: 0;
-    flex-shrink: 0;
-  }
-}
-
-.user--name {
-  display: inline-block;
-  line-height: 1.2;
-  text-transform: capitalize;
-  margin: 0;
-  padding: 0;
-}
-
 .conversation--header--actions {
-  align-items: center;
-  display: flex;
-  font-size: var(--font-size-mini);
-  gap: var(--space-small);
-
   ::v-deep .inbox--name {
-    margin: 0;
+    @apply m-0;
   }
-
-  .user--profile__button {
-    padding: 0;
-  }
-
-  .snoozed--display-text {
-    font-weight: var(--font-weight-medium);
-    color: var(--y-600);
-  }
-}
-
-.hmac-warning__icon {
-  color: var(--y-600);
-  margin: 0 var(--space-micro);
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
index bab827638..73df47d1a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -1,12 +1,12 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
         :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
       />
-      <form @submit.prevent="onSubmit">
-        <div class="medium-12 columns">
+      <form class="w-full" @submit.prevent="onSubmit">
+        <div class="w-full">
           <div v-if="currentChat.meta.sender && currentChat.meta.sender.email">
             <input
               id="contact"
@@ -43,7 +43,7 @@
               $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
             }}</label>
           </div>
-          <div v-if="sentToOtherEmailAddress" class="medium-6 columns">
+          <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
             <label :class="{ error: $v.email.$error }">
               <input
                 v-model.trim="email"
@@ -57,16 +57,14 @@
             </label>
           </div>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 row">
-            <woot-submit-button
-              :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
-              :disabled="!isFormValid"
-            />
-            <button class="button clear" @click.prevent="onCancel">
-              {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
-            </button>
-          </div>
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <woot-submit-button
+            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+            :disabled="!isFormValid"
+          />
+          <button class="button clear" @click.prevent="onCancel">
+            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
+          </button>
         </div>
       </form>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index efd68134b..c324b823a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <select v-model="activeValue" class="status--filter" @change="onTabChange()">
+  <select
+    v-model="activeValue"
+    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    @change="onTabChange()"
+  >
     <option v-for="(value, status) in items" :key="status" :value="status">
       {{ $t(`${pathPrefix}.${status}.TEXT`) }}
     </option>
@@ -42,14 +46,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.status--filter {
-  background-color: var(--color-background-light);
-  border: 1px solid var(--color-border);
-  font-size: var(--font-size-mini);
-  height: var(--space-medium);
-  margin: 0 var(--space-smaller);
-  padding: 0 var(--space-medium) 0 var(--space-small);
-  width: 126px;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index da3c2cffd..bfdf8a6cd 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -511,94 +511,82 @@ export default {
 <style lang="scss">
 .wrap {
   > .bubble {
-    min-width: 128px;
+    @apply min-w-[128px];
 
     &.is-image,
     &.is-video {
-      padding: 0;
-      overflow: hidden;
+      @apply p-0 overflow-hidden;
 
       .image,
       .video {
-        max-width: 20rem;
-        padding: var(--space-micro);
+        @apply max-w-[20rem] p-0.5;
 
         > img,
         > video {
-          border-radius: var(--border-radius-medium);
+          @apply rounded-lg;
         }
         > video {
-          height: 100%;
-          object-fit: cover;
-          width: 100%;
+          @apply h-full w-full object-cover;
         }
       }
       .video {
-        height: 11.25rem;
+        @apply h-[11.25rem];
       }
     }
 
     &.is-image.is-text > .message-text__wrap,
     &.is-video.is-text > .message-text__wrap {
-      max-width: 20rem;
-      padding: var(--space-small) var(--space-normal);
+      @apply max-w-[20rem] py-2 px-4;
     }
 
     &.is-private .file.message-text__wrap {
       .file--icon {
-        color: var(--w-400);
+        @apply text-woot-400 dark:text-woot-400;
       }
       .text-block-title {
-        color: #3c4858;
+        @apply text-slate-700 dark:text-slate-700;
       }
       .download.button {
-        color: var(--w-400);
+        @apply text-woot-400 dark:text-woot-400;
       }
     }
 
     &.is-private.is-text > .message-text__wrap .link {
-      color: var(--w-700);
+      @apply text-woot-700 dark:text-woot-700;
     }
     &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
-      font-weight: var(--font-weight-black);
-      background: none;
-      border-radius: var(--border-radius-small);
-      padding: 0;
-      color: var(--color-body);
-      text-decoration: underline;
+      @apply font-bold bg-none rounded-sm p-0 text-slate-700 dark:text-slate-700 underline;
     }
 
     &.is-from-bot {
-      background: var(--v-400);
+      @apply bg-violet-400 dark:bg-violet-400;
+
       .message-text--metadata .time {
-        color: var(--v-50);
+        @apply text-violet-50 dark:text-violet-50;
       }
       &.is-private .message-text--metadata .time {
-        color: var(--s-400);
+        @apply text-slate-400 dark:text-slate-400;
       }
     }
 
     &.is-failed {
-      background: var(--r-200);
+      @apply bg-red-200 dark:bg-red-200;
 
       .message-text--metadata .time {
-        color: var(--r-50);
+        @apply text-red-50 dark:text-red-50;
       }
     }
   }
 
   &.is-pending {
-    position: relative;
-    opacity: 0.8;
+    @apply relative opacity-80;
 
     .spinner {
-      position: absolute;
-      bottom: var(--space-smaller);
-      right: var(--space-smaller);
+      @apply absolute bottom-1 right-1;
     }
 
     > .is-image.is-text.bubble > .message-text__wrap {
-      padding: 0;
+      @apply p-0;
     }
   }
 }
@@ -608,135 +596,97 @@ export default {
 }
 
 .sender--info {
-  align-items: center;
-  color: var(--b-700);
-  display: inline-flex;
-  padding: var(--space-smaller) 0;
+  @apply items-center text-black-700 dark:text-black-100 inline-flex py-1 px-0;
 
   .sender--available-name {
-    font-size: var(--font-size-mini);
-    margin-left: var(--space-smaller);
+    @apply text-xs ml-1;
   }
 }
 
 .message-failed--alert {
-  color: var(--r-900);
-  flex-grow: 1;
-  text-align: right;
-  margin-top: var(--space-smaller) var(--space-smaller) 0 0;
+  @apply text-red-900 dark:text-red-900 flex-grow text-right mt-1 mr-1 mb-0 ml-0;
 }
 
 li.left,
 li.right {
-  display: flex;
-  align-items: flex-end;
+  @apply flex items-end;
 }
 
 li.left.has-tweet-menu .context-menu {
-  margin-bottom: var(--space-medium);
+  @apply mb-6;
 }
 
 li.has-bg {
-  background: var(--w-75);
+  @apply bg-woot-75 dark:bg-woot-600;
 }
 
 li.right .context-menu-wrap {
-  margin-left: auto;
+  @apply ml-auto;
 }
 
 li.right {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
+  @apply flex-row-reverse justify-end;
 
   .wrap.is-pending {
-    margin-left: auto;
+    @apply ml-auto;
   }
 
   .wrap.is-failed {
-    display: flex;
-    align-items: flex-end;
-    margin-left: auto;
+    @apply flex items-end ml-auto;
   }
 }
 
 .has-context-menu {
-  background: var(--color-background);
+  @apply bg-slate-50 dark:bg-slate-700;
 }
 
 .context-menu {
-  position: relative;
+  @apply relative;
 }
 
 /* Markdown styling */
 
 .bubble .text-content {
   p code {
-    background-color: var(--s-75);
-    display: inline-block;
-    line-height: 1;
-
-    border-radius: var(--border-radius-small);
-    padding: var(--space-smaller);
+    @apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
   }
 
   pre {
-    background-color: var(--s-75);
-    border-color: var(--s-75);
-    color: var(--s-800);
-    border-radius: var(--border-radius-normal);
-    padding: var(--space-small);
-    margin-top: var(--space-smaller);
-    margin-bottom: var(--space-small);
-    display: block;
-    line-height: 1.7;
-    white-space: pre-wrap;
+    @apply bg-slate-75 dark:bg-slate-700 block border-slate-75 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-md p-2 mt-1 mb-2 leading-relaxed whitespace-pre-wrap;
 
     code {
-      background-color: transparent;
-      color: var(--s-800);
-      padding: 0;
+      @apply bg-transparent text-slate-800 dark:text-slate-100 p-0;
     }
   }
 
   blockquote {
-    border-left: var(--space-micro) solid var(--s-75);
-    color: var(--s-800);
-    margin: var(--space-smaller) 0;
-    padding: var(--space-small) var(--space-small) 0 var(--space-normal);
+    @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-700 text-slate-800 dark:text-slate-100;
   }
 }
 
 .right .bubble .text-content {
   p code {
-    background-color: var(--w-600);
-    color: var(--white);
+    @apply bg-woot-600 dark:bg-woot-600 text-white dark:text-white;
   }
 
   pre {
-    background-color: var(--w-800);
-    border-color: var(--w-700);
-    color: var(--white);
+    @apply bg-woot-800 dark:bg-woot-800 border-woot-700 dark:border-woot-700 text-white dark:text-white;
 
     code {
-      background-color: transparent;
-      color: var(--white);
+      @apply bg-transparent text-white dark:text-white;
     }
   }
 
   blockquote {
-    border-left: var(--space-micro) solid var(--w-400);
-    color: var(--white);
+    @apply border-l-4 border-solid border-woot-400 dark:border-woot-400 text-white dark:text-white;
 
     p {
-      color: var(--w-75);
+      @apply text-woot-75 dark:text-woot-75;
     }
   }
 }
 
 .story-reply-quote {
-  border-left: var(--space-micro) solid var(--s-75);
-  color: var(--s-600);
-  margin: var(--space-small) var(--space-normal) 0;
-  padding: var(--space-small) var(--space-small) 0 var(--space-small);
+  @apply mt-2 mx-4 mb-0 px-2 pb-0 pt-2 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 1d265d03b..77dbdca22 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="view-box fill-height">
+  <div class="m-0 flex flex-col justify-between h-full flex-grow min-w-0">
     <banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
@@ -16,19 +16,19 @@
       @close="removeTweetSelection"
     />
 
-    <div class="sidebar-toggle__wrap">
+    <div class="flex justify-end">
       <woot-button
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="sidebar-toggle--button"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
     </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
-        <li class="spinner--container">
+        <li class="min-h-[4rem]">
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
       </transition>
@@ -44,7 +44,7 @@
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
-        <span class="text-uppercase">
+        <span>
           {{ unreadMessageCount }}
           {{
             unreadMessageCount > 1
@@ -535,68 +535,41 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-.spinner--container {
-  min-height: var(--space-jumbo);
-}
-
-.view-box.fill-height {
-  height: auto;
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.modal-mask {
-  &::v-deep {
-    .ProseMirror-woot-style {
-      max-height: 25rem;
-    }
-
-    .reply-box {
-      border: 1px solid var(--color-border);
-      max-width: 75rem;
-      width: 70%;
-    }
-
-    .reply-box .reply-box__top {
-      position: relative;
-      min-height: 27.5rem;
-    }
-
-    .reply-box__top .input {
-      min-height: 27.5rem;
-    }
-
-    .emoji-dialog {
-      position: fixed;
-      left: unset;
-      position: absolute;
-      bottom: var(--space-smaller);
-    }
+<style scoped>
+@tailwind components;
+@layer components {
+  .rounded-bl-calc {
+    border-bottom-left-radius: calc(1.5rem + 1px);
   }
-}
-.sidebar-toggle__wrap {
-  display: flex;
-  justify-content: flex-end;
 
-  .sidebar-toggle--button {
-    position: fixed;
-
-    top: var(--space-mega);
-    z-index: var(--z-index-low);
-
-    background: var(--white);
-
-    padding: inherit 0;
-    border-top-left-radius: calc(
-      var(--space-medium) + 1px
-    ); /* 100px of height + 10px of border */
-    border-bottom-left-radius: calc(
-      var(--space-medium) + 1px
-    ); /* 100px of height + 10px of border */
-    border: 1px solid var(--color-border-light);
-    border-right: 0;
-    box-sizing: border-box;
+  .rounded-tl-calc {
+    border-top-left-radius: calc(1.5rem + 1px);
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.modal-mask {
+  &::v-deep {
+    .ProseMirror-woot-style {
+      @apply max-h-[25rem];
+    }
+
+    .reply-box {
+      @apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
+    }
+
+    .reply-box .reply-box__top {
+      @apply relative min-h-[27.5rem];
+    }
+
+    .reply-box__top .input {
+      @apply min-h-[27.5rem];
+    }
+
+    .emoji-dialog {
+      @apply absolute left-auto bottom-1;
+    }
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 946cf5417..8d6f6ab51 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-container actions--container">
+  <div class="flex actions--container relative items-center gap-2">
     <woot-button
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
@@ -87,31 +87,15 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.actions--container {
-  align-items: center;
-
-  .resolve-actions {
-    margin-left: var(--space-small);
-  }
-}
-
 .more--button {
-  align-items: center;
-  display: flex;
-  margin-left: var(--space-small);
-}
-
-.actions--container {
-  position: relative;
+  @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
 }
 
 .dropdown-pane {
-  right: var(--space-minus-small);
-  top: 48px;
+  @apply -right-2 top-12;
 }
 
 .icon {
-  margin-right: var(--space-smaller);
-  min-width: var(--space-normal);
+  @apply mr-1 rtl:mr-0 rtl:ml-1 min-w-[1rem];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index 31de0b400..915342308 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -6,10 +6,10 @@
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="shrink-0 rounded-xs inline-flex w-3 h-3 "
+    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
     :class="{
-      'bg-red-50 text-red-500': isUrgent,
-      'bg-slate-50 text-slate-600': !isUrgent,
+      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600': isUrgent,
+      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200': !isUrgent,
     }"
   >
     <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 56b7badcb..287130382 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1091,51 +1091,34 @@ export default {
 
 <style lang="scss" scoped>
 .send-button {
-  margin-bottom: 0;
+  @apply mb-0;
 }
 
 .message-signature-wrap {
-  margin: 0 var(--space-normal);
-  padding: var(--space-small);
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  border: 1px dashed var(--s-100);
-  border-radius: var(--border-radius-small);
-  max-height: 8vh;
-  overflow: auto;
-
-  &:hover {
-    background: var(--s-25);
-  }
+  @apply my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto;
 }
 
 .message-signature {
-  width: fit-content;
-  margin: 0;
+  @apply w-fit m-0;
 }
 
 .attachment-preview-box {
-  padding: 0 var(--space-normal);
-  background: transparent;
+  @apply bg-transparent py-0 px-4;
 }
 
 .reply-box {
-  @apply border-r border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
+  @apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
 
   &.is-private {
-    background: var(--y-50);
+    @apply bg-yellow-50 dark:bg-yellow-50;
   }
 }
 .send-button {
-  margin-bottom: 0;
+  @apply mb-0;
 }
 
 .reply-box__top {
-  position: relative;
-  padding: 0 var(--space-normal);
-  border-top: 1px solid var(--color-border);
-  margin-top: -1px;
+  @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
 }
 
 .emoji-dialog {
@@ -1177,10 +1160,10 @@ export default {
   }
 }
 .message-signature {
-  margin-bottom: 0;
+  @apply mb-0;
 
   ::v-deep p:last-child {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index fbd1453db..5a82138e2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -147,31 +147,23 @@ export default {
 </script>
 <style lang="scss" scoped>
 .input-group-wrap .message {
-  font-size: var(--font-size-small);
-  color: var(--r-500);
+  @apply text-sm text-red-500 dark:text-red-500;
 }
 .input-group {
-  border-bottom: 1px solid var(--color-border);
-  margin-bottom: var(--space-smaller);
-  margin-top: var(--space-smaller);
+  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
 
   .input-group-label {
-    border-color: transparent;
-    background: transparent;
-    font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-bold);
-    padding-left: 0;
+    @apply border-transparent bg-transparent text-xs font-semibold pl-0;
   }
   .input-group-field::v-deep input {
-    margin-bottom: 0;
-    border-color: transparent;
+    @apply mb-0 border-transparent;
   }
 }
 
 .input-group.error {
-  border-bottom-color: var(--r-500);
+  @apply border-b-red-500 dark:border-b-red-500;
   .input-group-label {
-    color: var(--r-500);
+    @apply text-red-500 dark:text-red-500;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index 0a8d474ad..aef54865a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -9,21 +9,28 @@
       :id="`mention-item-${index}`"
       :key="agent.id"
       :class="{ active: index === selectedIndex }"
+      class="last:mb-2 items-center rounded-md flex p-2"
       @click="onAgentSelect(index)"
       @mouseover="onHover(index)"
     >
-      <div class="mention--thumbnail">
+      <div class="mr-2">
         <woot-thumbnail
           :src="agent.thumbnail"
           :username="agent.name"
           size="32px"
         />
       </div>
-      <div class="mention--metadata text-truncate">
-        <h5 class="text-block-title mention--user-name text-truncate">
+      <div
+        class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
+      >
+        <h5
+          class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
+        >
           {{ agent.name }}
         </h5>
-        <div class="text-truncate mention--email text-truncate">
+        <div
+          class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
+        >
           {{ agent.email }}
         </div>
       </div>
@@ -88,69 +95,29 @@ export default {
 
 <style scoped lang="scss">
 .mention--box {
-  background: var(--white);
-  border-radius: var(--border-radius-normal);
-  border-top: 1px solid var(--color-border);
-  box-shadow: var(--shadow-medium);
-  font-size: var(--font-size-small);
-  left: 0;
-  bottom: 100%;
-  line-height: 1.2;
-  max-height: 12.5rem;
-  overflow: auto;
-  padding: var(--space-small) var(--space-small) 0 var(--space-small);
-  position: absolute;
-  width: 100%;
-  z-index: 100;
+  @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-[100] pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
 
   &.with-bottom-border {
-    border-bottom: var(--space-small) solid var(--white);
+    @apply border-b-[0.5rem] border-solid border-white dark:border-slate-600;
 
     li {
       &:last-child {
-        margin-bottom: 0;
+        @apply mb-0;
       }
     }
   }
 
   li {
-    align-items: center;
-    border-radius: var(--border-radius-normal);
-    display: flex;
-    padding: var(--space-small);
-
     &.active {
-      background: var(--s-50);
+      @apply bg-slate-50 dark:bg-slate-800;
 
       .mention--user-name {
-        color: var(--s-900);
+        @apply text-slate-900 dark:text-slate-100;
       }
       .mention--email {
-        color: var(--s-800);
+        @apply text-slate-800 dark:text-slate-200;
       }
     }
-
-    &:last-child {
-      margin-bottom: var(--space-small);
-    }
   }
 }
-
-.mention--thumbnail {
-  margin-right: var(--space-small);
-}
-
-.mention--user-name {
-  margin-bottom: 0;
-}
-
-.mention--email {
-  color: var(--s-700);
-  font-size: var(--font-size-mini);
-}
-
-.mention--metadata {
-  flex: 1;
-  max-width: 100%;
-}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
index 985c62138..e45b29c02 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="medium-12 columns">
+  <div class="w-full">
     <textarea
       v-model="processedString"
       rows="4"
@@ -119,55 +119,40 @@ export default {
 
 <style scoped lang="scss">
 .template__variables-container {
-  padding: var(--space-one);
+  @apply p-2.5;
 }
 
 .variables-label {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-one);
+  @apply text-sm font-semibold mb-2.5;
 }
 
 .template__variable-item {
-  align-items: center;
-  display: flex;
-  margin-bottom: var(--space-one);
+  @apply items-center flex mb-2.5;
 
   .label {
-    font-size: var(--font-size-mini);
+    @apply text-xs;
   }
 
   .variable-input {
-    flex: 1;
-    font-size: var(--font-size-small);
-    margin-left: var(--space-one);
+    @apply flex-1 text-sm ml-2.5;
   }
 
   .variable-label {
-    background-color: var(--s-75);
-    border-radius: var(--border-radius-normal);
-    display: inline-block;
-    font-size: var(--font-size-mini);
-    padding: var(--space-one) var(--space-medium);
+    @apply bg-slate-75 dark:bg-slate-700 text-slate-700 dark:text-slate-100 inline-block rounded-md text-xs py-2.5 px-6;
   }
 }
 
 footer {
-  display: flex;
-  justify-content: flex-end;
+  @apply flex justify-end;
 
   button {
-    margin-left: var(--space-one);
+    @apply ml-2.5;
   }
 }
 .error {
-  background-color: var(--r-100);
-  border-radius: var(--border-radius-normal);
-  color: var(--r-800);
-  padding: var(--space-one);
-  text-align: center;
+  @apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
 }
 .template-input {
-  background-color: var(--s-25);
+  @apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
index 1af4a0099..711fa5f17 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="medium-12 columns">
+  <div class="w-full">
     <div class="templates__list-search">
       <fluent-icon icon="search" class="search-icon" size="16" />
       <input
@@ -96,61 +96,35 @@ export default {
 
 <style scoped lang="scss">
 .flex-between {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--space-one);
+  @apply flex justify-between mb-2.5;
 }
 
 .templates__list-search {
-  align-items: center;
-  background-color: var(--s-25);
-  border-radius: var(--border-radius-medium);
-  border: 1px solid var(--s-100);
-  display: flex;
-  margin-bottom: var(--space-one);
-  padding: 0 var(--space-one);
+  @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
 
   .search-icon {
-    color: var(--s-400);
+    @apply text-slate-400 dark:text-slate-300;
   }
 
   .templates__search-input {
-    background-color: transparent;
-    border: var(--space-large);
-    font-size: var(--font-size-mini);
-    height: unset;
-    margin: var(--space-zero);
+    @apply bg-transparent border-0 text-xs h-auto m-0;
   }
 }
 .template__list-container {
-  background-color: var(--s-25);
-  border-radius: var(--border-radius-medium);
-  max-height: 18.75rem;
-  overflow-y: auto;
-  padding: var(--space-one);
+  @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
 
   .template__list-item {
-    border-radius: var(--border-radius-medium);
-    cursor: pointer;
-    display: block;
-    padding: var(--space-one);
-    text-align: left;
-    width: 100%;
-
-    &:hover {
-      background-color: var(--w-50);
-    }
+    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-600;
 
     .label-title {
-      font-size: var(--font-size-small);
+      @apply text-sm;
     }
 
     .label-category {
-      margin-top: var(--space-two);
+      @apply mt-5;
 
       span {
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-bold);
+        @apply text-sm font-semibold;
       }
     }
 
@@ -161,13 +135,10 @@ export default {
 }
 
 .strong {
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-bold);
+  @apply text-xs font-semibold;
 }
 
 hr {
-  border-bottom: 1px solid var(--s-100);
-  margin: var(--space-one) auto;
-  max-width: 95%;
+  @apply border-b border-solid border-slate-100 dark:border-slate-700 my-2.5 mx-auto max-w-[95%];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 466f34b71..9ce28a474 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -256,25 +256,25 @@ export default {
 <style lang="scss" scoped>
 .right {
   .message-text--metadata {
-    align-items: center;
+    @apply items-center;
     .time {
-      color: var(--w-100);
+      @apply text-woot-100 dark:text-woot-100;
     }
 
     .action--icon {
-      color: var(--white);
+      @apply text-white dark:text-white;
 
       &.read-tick {
-        color: var(--v-100);
+        @apply text-violet-100 dark:text-violet-100;
       }
 
       &.read-indicator {
-        color: var(--g-200);
+        @apply text-green-200 dark:text-green-200;
       }
     }
 
     .lock--icon--private {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-400;
     }
   }
 }
@@ -282,41 +282,31 @@ export default {
 .left {
   .message-text--metadata {
     .time {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-200;
     }
   }
 }
 
 .message-text--metadata {
-  align-items: flex-start;
-  display: flex;
+  @apply items-start flex;
 
   .time {
-    margin-right: var(--space-small);
-    display: block;
-    font-size: var(--font-size-micro);
-    line-height: 1.8;
+    @apply mr-2 block text-xxs leading-[1.8];
   }
 
   .action--icon {
-    margin-right: var(--space-small);
-    margin-left: var(--space-small);
-    color: var(--s-900);
+    @apply mr-2 ml-2 text-slate-900 dark:text-slate-100;
   }
 
   a {
-    color: var(--s-900);
+    @apply text-slate-900 dark:text-slate-100;
   }
 }
 
 .activity-wrap {
   .message-text--metadata {
     .time {
-      color: var(--s-300);
-      display: flex;
-      text-align: center;
-      font-size: var(--font-size-micro);
-      margin-left: 0;
+      @apply ml-2 rtl:mr-2 rtl:ml-0 flex text-center text-xxs text-slate-300 dark:text-slate-200;
     }
   }
 }
@@ -325,35 +315,28 @@ export default {
 .is-video {
   .message-text--metadata {
     .time {
-      bottom: var(--space-smaller);
-      color: var(--white);
-      position: absolute;
-      right: var(--space-small);
-      white-space: nowrap;
+      @apply bottom-1 text-white dark:text-slate-50 absolute right-2 whitespace-nowrap;
 
       &.has-status-icon {
-        right: var(--space-large);
-        line-height: 2;
+        @apply right-8 leading-loose;
       }
     }
     .read-tick {
-      position: absolute;
-      bottom: var(--space-small);
-      right: var(--space-small);
+      @apply absolute bottom-2 right-2;
     }
   }
 }
 
 .is-private {
   .message-text--metadata {
-    align-items: center;
+    @apply items-center;
 
     .time {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-400;
     }
 
     .icon {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-400;
     }
   }
 
@@ -361,18 +344,16 @@ export default {
   &.is-video {
     .time {
       position: inherit;
-      padding-left: var(--space-one);
+      @apply pl-2.5;
     }
   }
 }
 
 .delivered-icon {
-  margin-left: -var(--space-normal);
+  @apply ml-4;
 }
 
 .read-indicator-wrap {
-  line-height: 1;
-  display: flex;
-  align-items: center;
+  @apply leading-none flex items-center;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
index 5064b81d4..4d6b2bc55 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
@@ -2,7 +2,9 @@
   <div class="contact--group">
     <fluent-icon icon="call" class="file--icon" size="18" />
     <div class="meta">
-      <p class="text-truncate margin-bottom-0">
+      <p
+        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
+      >
         {{ phoneNumber }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
index 239999872..63bac79c4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
@@ -4,7 +4,9 @@
       <fluent-icon icon="location" class="file--icon" size="32" />
     </div>
     <div class="meta">
-      <h5 class="text-block-title text-truncate">
+      <h5
+        class="text-block-title overflow-hidden whitespace-nowrap text-ellipsis"
+      >
         {{ name }}
       </h5>
       <div class="link-wrap">
@@ -47,32 +49,22 @@ export default {
 
 <style lang="scss" scoped>
 .location {
-  display: flex;
-  flex-direction: row;
-  padding: var(--space-smaller) 0;
-  cursor: pointer;
+  @apply flex flex-row py-1 px-0 cursor-pointer;
 
   .icon-wrap {
-    color: var(--s-600);
-    line-height: 1;
-    margin: 0 var(--space-smaller);
+    @apply text-slate-600 dark:text-slate-200 leading-none my-0 mx-1;
   }
 
   .text-block-title {
-    margin: 0;
-    color: var(--s-800);
-    word-break: break-word;
+    @apply m-0 text-slate-800 dark:text-slate-100 break-words;
   }
 
   .meta {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding-right: var(--space-normal);
+    @apply flex flex-col items-center pr-4;
   }
 
   .link-wrap {
-    display: flex;
+    @apply flex;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index ea0748b4d..4a3212aac 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -5,26 +5,49 @@
     :show-close-button="false"
     :on-close="onClose"
   >
-    <div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose">
-      <div class="gallery-modal--header">
-        <div class="header-info--wrap" @click.stop>
+    <div
+      v-on-clickaway="onClose"
+      class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit]"
+      @click="onClose"
+    >
+      <div class="items-center flex h-16 justify-between py-2 px-6 w-full">
+        <div class="items-center flex justify-start min-w-[15rem]" @click.stop>
           <thumbnail
             :username="senderDetails.name"
             :src="senderDetails.avatar"
           />
-          <div class="header-info">
-            <h3 class="sub-block-title sender-name">
-              <span class="text-truncate">{{ senderDetails.name }}</span>
+          <div
+            class="flex items-start flex-col justify-center ml-2 rtl:ml-0 rtl:mr-2"
+          >
+            <h3
+              class="sub-block-title inline-block leading-[1.4] m-0 p-0 capitalize"
+            >
+              <span
+                class="text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ senderDetails.name }}
+              </span>
             </h3>
-            <span class="time-stamp text-truncate">{{ readableTime }}</span>
+            <span
+              class="text-xs m-0 p-0 text-slate-400 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
+            >
+              {{ readableTime }}
+            </span>
           </div>
         </div>
-        <div class="file-name--header text-block-title">
-          <span class="text-truncate">
+        <div
+          class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-block-title"
+        >
+          <span
+            class="text-slate-700 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
+          >
             {{ fileNameFromDataUrl }}
           </span>
         </div>
-        <div class="header-actions" @click.stop>
+        <div
+          class="items-center flex gap-2 justify-end min-w-[15rem]"
+          @click.stop
+        >
           <woot-button
             size="large"
             color-scheme="secondary"
@@ -41,8 +64,8 @@
           />
         </div>
       </div>
-      <div class="gallery-modal--body">
-        <div class="attachment-toggle--button">
+      <div class="items-center flex h-full justify-center w-full">
+        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
           <woot-button
             v-if="hasMoreThanOneAttachment"
             size="large"
@@ -58,13 +81,13 @@
             "
           />
         </div>
-        <div class="attachments-viewer">
-          <div class="attachment-view">
+        <div class="flex items-center flex-col justify-center w-full h-full">
+          <div>
             <img
               v-if="isImage"
               :key="activeAttachment.message_id"
               :src="activeAttachment.data_url"
-              class="modal-image skip-context-menu"
+              class="modal-image skip-context-menu my-0 mx-auto"
               @click.stop
             />
             <video
@@ -73,7 +96,7 @@
               :src="activeAttachment.data_url"
               controls
               playsInline
-              class="modal-video skip-context-menu"
+              class="modal-video skip-context-menu my-0 mx-auto"
               @click.stop
             />
             <audio
@@ -87,7 +110,7 @@
             </audio>
           </div>
         </div>
-        <div class="attachment-toggle--button">
+        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
           <woot-button
             v-if="hasMoreThanOneAttachment"
             size="large"
@@ -104,8 +127,10 @@
           />
         </div>
       </div>
-      <div class="gallery-modal--footer">
-        <div class="header-count text-block-title">
+      <div class="items-center flex h-16 justify-center w-full py-2 px-6">
+        <div
+          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-block-title"
+        >
           <span class="count">
             {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
           </span>
@@ -252,123 +277,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.gallery-modal--wrap {
-  display: flex;
-  flex-direction: column;
-  height: inherit;
-  width: inherit;
-
-  .gallery-modal--header {
-    align-items: center;
-    display: flex;
-    height: var(--space-jumbo);
-    justify-content: space-between;
-    padding: var(--space-small) var(--space-medium);
-    width: 100%;
-
-    .header-info--wrap {
-      align-items: center;
-      display: flex;
-      justify-content: flex-start;
-      min-width: var(--space-giga);
-
-      .header-info {
-        align-items: flex-start;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: var(--space-small);
-
-        .sender-name {
-          display: inline-block;
-          line-height: 1.4;
-          margin: 0;
-          padding: 0;
-          text-transform: capitalize;
-        }
-
-        .time-stamp {
-          color: var(--s-400);
-          font-size: var(--font-size-mini);
-          margin: 0;
-          padding: 0;
-        }
-      }
-    }
-
-    .file-name--header {
-      align-items: center;
-      color: var(--s-700);
-      display: flex;
-      font-weight: var(--font-weight-bold);
-      justify-content: flex-start;
-      min-width: 0;
-      padding: var(--space-smaller);
-      width: auto;
-    }
-
-    .header-actions {
-      align-items: center;
-      display: flex;
-      gap: var(--space-small);
-      justify-content: flex-end;
-      min-width: var(--space-giga);
-    }
-  }
-
-  .gallery-modal--body {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .gallery-modal--footer {
-    align-items: center;
-    display: flex;
-    height: var(--space-jumbo);
-    justify-content: center;
-    padding: var(--space-small) var(--space-medium);
-    width: 100%;
-
-    .header-count {
-      align-items: center;
-      border-radius: var(--border-radius-small);
-      background-color: var(--s-25);
-      color: var(--s-600);
-      display: flex;
-      font-weight: var(--font-weight-bold);
-      justify-content: center;
-      min-width: 5rem;
-      padding: var(--space-smaller);
-    }
-  }
-
-  .attachments-viewer {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-    width: 100%;
-
-    .attachment-view {
-      img {
-        margin: 0 auto;
-      }
-
-      video {
-        margin: 0 auto;
-      }
-    }
-  }
-
-  .attachment-toggle--button {
-    display: flex;
-    justify-content: center;
-    min-width: var(--space-mega);
-    width: var(--space-mega);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index bd9a018e6..a00875040 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-container">
+  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
     <menu-item
       v-if="!hasUnreadMessages"
       :option="unreadOption"
@@ -243,12 +243,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.menu-container {
-  padding: var(--space-smaller);
-  background-color: var(--white);
-  box-shadow: var(--shadow-context-menu);
-  border-radius: var(--border-radius-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 670d5a61a..b7e3ef4fe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -19,7 +19,9 @@
       size="20px"
       class="agent-thumbnail"
     />
-    <p class="menu-label text-truncate">{{ option.label }}</p>
+    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
+      {{ option.label }}
+    </p>
   </div>
 </template>
 
@@ -44,22 +46,14 @@ export default {
 
 <style scoped lang="scss">
 .menu {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
   width: calc(var(--space-mega) * 2);
-  padding: var(--space-smaller);
-  border-radius: var(--border-radius-small);
-  overflow: hidden;
+  @apply flex items-center flex-nowrap p-1 rounded-sm overflow-hidden cursor-pointer;
   .menu-label {
-    margin: 0 var(--space-small);
-    font-size: var(--font-size-mini);
-    flex-shrink: 0;
+    @apply my-0 mx-2 text-xs flex-shrink-0;
   }
 
   &:hover {
-    background-color: var(--w-500);
-    color: var(--white);
+    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-slate-50;
   }
 }
 
@@ -68,10 +62,6 @@ export default {
 }
 
 .label-pill {
-  width: var(--space-normal);
-  height: var(--space-normal);
-  border-radius: var(--border-radius-rounded);
-  border: 1px solid var(--s-50);
-  flex-shrink: 0;
+  @apply w-4 h-4 rounded-full border border-slate-50 border-solid dark:border-slate-900 flex-shrink-0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index d9f86eb1a..f85d68953 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,14 +1,17 @@
 <template>
   <div
-    class="menu-with-submenu flex-between"
-    :class="{ disabled: !subMenuAvailable }"
+    class="menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
+    :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
-    <div class="menu-left">
+    <div class="flex items-center">
       <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
-      <p class="menu-label">{{ option.label }}</p>
+      <p class="my-0 mx-2 text-xs">{{ option.label }}</p>
     </div>
     <fluent-icon icon="chevron-right" size="12" />
-    <div v-if="subMenuAvailable" class="submenu">
+    <div
+      v-if="subMenuAvailable"
+      class="submenu bg-white dark:bg-slate-700 p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+    >
       <slot />
     </div>
   </div>
@@ -31,61 +34,12 @@ export default {
 
 <style scoped lang="scss">
 .menu-with-submenu {
-  width: 100%;
-  padding: var(--space-smaller);
-  border-radius: var(--border-radius-small);
-  position: relative;
-  min-width: calc(var(--space-mega) * 2);
-  background-color: var(--white);
-
-  .menu-left {
-    display: flex;
-    align-items: center;
-
-    .menu-label {
-      margin: 0 var(--space-small);
-      font-size: var(--font-size-mini);
-    }
-  }
-
-  .submenu {
-    padding: var(--space-smaller);
-    background-color: var(--white);
-    box-shadow: var(--shadow-context-menu);
-    border-radius: var(--border-radius-normal);
-    position: absolute;
-    position: absolute;
-    left: 100%;
-    top: 0;
-    display: none;
-    min-height: min-content;
-    max-height: var(--space-giga);
-    overflow-y: auto;
-    // Need this because Firefox adds a horizontal scrollbar, if a text is truncated inside.
-    overflow-x: hidden;
-  }
+  min-width: calc(6.25rem * 2);
 
   &:hover {
-    background-color: var(--w-75);
-
     .submenu {
-      display: block;
+      @apply block;
     }
-    &:before {
-      content: '';
-      position: absolute;
-      z-index: var(--z-index-highest);
-      bottom: -65%;
-      height: 75%;
-      right: 0%;
-      width: 50%;
-      clip-path: polygon(100% 0, 0% 0%, 100% 100%);
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 64ef6473a..3db04e9f4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -2,13 +2,7 @@
   <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
     <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
-        <path
-          d="M20 12l-8-8-12 12"
-          fill="var(--white)"
-          fill-rule="evenodd"
-          stroke="var(--s-50)"
-          stroke-width="1px"
-        />
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
     <div class="header flex-between">
@@ -190,110 +184,73 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__agents {
-  background-color: var(--white);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--s-50);
-  box-shadow: var(--shadow-dropdown-pane);
-  max-width: 75%;
-  position: absolute;
-  right: var(--space-small);
-  top: var(--space-larger);
-  transform-origin: top right;
-  width: auto;
-  z-index: var(--z-index-twenty);
-  min-width: var(--space-giga);
+  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
   .header {
-    padding: var(--space-one);
+    @apply p-2.5;
 
     span {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
+      @apply text-sm font-medium;
     }
   }
 
   .container {
-    max-height: var(--space-giga);
-    overflow-y: auto;
+    @apply overflow-y-auto max-h-[15rem];
     .agent__list-container {
-      height: 100%;
+      @apply h-full;
     }
     .agent-list-search {
-      padding: 0 var(--space-one);
-      border: 1px solid var(--s-100);
-      border-radius: var(--border-radius-medium);
-      background-color: var(--s-50);
+      @apply py-0 px-2.5 bg-slate-50 dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
       .search-icon {
-        color: var(--s-400);
+        @apply text-slate-400 dark:text-slate-200;
       }
 
       .agent--search_input {
-        border: 0;
-        font-size: var(--font-size-mini);
-        margin: 0;
-        background-color: transparent;
-        height: unset;
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
       }
     }
   }
   .triangle {
-    display: block;
-    z-index: var(--z-index-one);
-    position: absolute;
-    top: var(--space-minus-slab);
     right: var(--triangle-position);
-    text-align: left;
+    @apply block z-10 absolute -top-3 text-left;
+
+    svg path {
+      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+    }
   }
 }
 ul {
-  margin: 0;
-  list-style: none;
+  @apply m-0 list-none;
+
+  li {
+    &:last-child {
+      .agent-list-item {
+        @apply last:rounded-b-lg;
+      }
+    }
+  }
 }
 
 .agent-list-item {
-  display: flex;
-  align-items: center;
-  padding: var(--space-one);
-  cursor: pointer;
-  &:hover {
-    background-color: var(--s-50);
-  }
+  @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
   span {
-    font-size: var(--font-size-small);
+    @apply text-sm;
   }
 }
 
 .agent-confirmation-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: var(--space-one);
+  @apply flex flex-col h-full p-2.5;
   p {
-    flex-grow: 1;
+    @apply flex-grow;
   }
   .agent-confirmation-actions {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--space-one);
+    @apply w-full grid grid-cols-2 gap-2.5;
   }
 }
 .search-container {
-  padding: 0 var(--space-one);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-index-twenty);
-  background-color: var(--white);
+  @apply py-0 px-2.5 sticky top-0 z-20 bg-white dark:bg-slate-800;
 }
 
 .agent__list-loading {
-  height: calc(95% - var(--space-one));
-  margin: var(--space-one);
-  border-radius: var(--border-radius-medium);
-  background-color: var(--s-50);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: var(--space-two);
+  @apply m-2.5 rounded-md bg-slate-25 dark:bg-slate-900 flex items-center justify-center flex-col p-5 h-[calc(95%-6.25rem)];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 92c20ba80..a1e2bae48 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -194,33 +194,23 @@ export default {
 }
 
 .bulk-action__container {
-  border-bottom: 1px solid var(--s-100);
-  padding: var(--space-normal);
-  position: relative;
+  @apply p-4 relative border-b border-solid border-slate-100 dark:border-slate-600/70;
 }
 
 .bulk-action__panel {
-  cursor: pointer;
+  @apply cursor-pointer;
 
   span {
-    font-size: var(--font-size-mini);
-    margin: 0 var(--space-smaller);
+    @apply text-xs my-0 mx-1;
   }
 
   input[type='checkbox'] {
-    cursor: pointer;
-    margin: var(--space-zero);
+    @apply cursor-pointer m-0;
   }
 }
 
 .bulk-action__alert {
-  background-color: var(--y-50);
-  border-radius: var(--border-radius-small);
-  border: 1px solid var(--y-300);
-  color: var(--y-700);
-  font-size: var(--font-size-mini);
-  margin-top: var(--space-small);
-  padding: var(--space-smaller) var(--space-small);
+  @apply bg-yellow-50 text-yellow-700 rounded text-xs mt-2 py-1 px-2 border border-solid border-yellow-300 dark:border-yellow-300/10 dark:bg-yellow-200/20 dark:text-yellow-400;
 }
 
 .popover-animation-enter-active,
@@ -229,23 +219,23 @@ export default {
 }
 
 .popover-animation-enter {
-  opacity: 0;
   transform: scale(0.95);
+  @apply opacity-0;
 }
 
 .popover-animation-enter-to {
-  opacity: 1;
   transform: scale(1);
+  @apply opacity-100;
 }
 
 .popover-animation-leave {
-  opacity: 1;
   transform: scale(1);
+  @apply opacity-100;
 }
 
 .popover-animation-leave-to {
-  opacity: 0;
   transform: scale(0.95);
+  @apply opacity-0;
 }
 
 .label-actions-box {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 74e02c69f..0ae52b044 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -2,13 +2,7 @@
   <div v-on-clickaway="onClose" class="labels-container">
     <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
-        <path
-          d="M20 12l-8-8-12 12"
-          fill="var(--white)"
-          fill-rule="evenodd"
-          stroke="var(--s-50)"
-          stroke-width="1px"
-        />
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
     <div class="header flex-between">
@@ -50,7 +44,11 @@
               :value="label.title"
               class="label-checkbox"
             />
-            <span class="label-title text-truncate">{{ label.title }}</span>
+            <span
+              class="label-title overflow-hidden whitespace-nowrap text-ellipsis"
+            >
+              {{ label.title }}
+            </span>
             <span
               class="label-pill"
               :style="{ backgroundColor: label.color }"
@@ -61,6 +59,7 @@
       <footer class="labels-list__footer">
         <woot-button
           size="small"
+          is-expanded
           color-scheme="primary"
           :disabled="!selectedLabels.length"
           @click="$emit('assign', selectedLabels)"
@@ -108,178 +107,115 @@ export default {
 
 <style scoped lang="scss">
 .labels-list {
-  display: flex;
-  flex-direction: column;
-  max-height: var(--space-giga);
-  min-height: auto;
+  @apply flex flex-col max-h-[15rem] min-h-[auto];
 
   .labels-list__header {
-    background-color: var(--white);
-    padding: 0 var(--space-one);
+    @apply bg-white dark:bg-slate-800 py-0 px-2.5;
   }
 
   .labels-list__body {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--space-one) 0;
+    @apply flex-1 overflow-y-auto py-2.5 mx-0;
   }
 
   .labels-list__footer {
-    padding: var(--space-small);
+    @apply p-2;
 
     button {
-      width: 100%;
+      @apply w-full;
+
+      .button__content {
+        @apply text-center;
+      }
     }
   }
 }
 
 .label-list-search {
-  background-color: var(--s-50);
-  border-radius: var(--border-radius-medium);
-  border: 1px solid var(--s-100);
-  padding: 0 var(--space-one);
+  @apply bg-slate-50 dark:bg-slate-900 py-0 px-2.5 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
 
   .search-icon {
-    color: var(--s-400);
+    @apply text-slate-400 dark:text-slate-200;
   }
 
   .label--search_input {
-    background-color: transparent;
-    border: 0;
-    font-size: var(--font-size-mini);
-    height: unset;
-    margin: 0;
+    @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
   }
 }
 
 .labels-container {
-  background-color: var(--white);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--s-50);
-  box-shadow: var(--shadow-dropdown-pane);
-  max-width: var(--space-giga);
-  min-width: var(--space-giga);
-  position: absolute;
-  right: var(--space-small);
-  top: var(--space-larger);
-  transform-origin: top right;
-  width: auto;
-  z-index: var(--z-index-twenty);
+  @apply absolute right-2 top-12 origin-top-right w-auto z-20 max-w-[15rem] min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
 
   .header {
-    padding: var(--space-one);
+    @apply p-2.5;
 
     span {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
+      @apply text-sm font-medium;
     }
   }
 
   .container {
-    max-height: var(--space-giga);
-    overflow-y: auto;
+    @apply max-h-[15rem] overflow-y-auto;
 
     .label__list-container {
-      height: 100%;
-    }
-    .label-list-search {
-      padding: 0 var(--space-one);
-      border: 1px solid var(--s-100);
-      border-radius: var(--border-radius-medium);
-      background-color: var(--s-50);
-      .search-icon {
-        color: var(--s-400);
-      }
-
-      .label--search_input {
-        border: 0;
-        font-size: var(--font-size-mini);
-        margin: 0;
-        background-color: transparent;
-        height: unset;
-      }
+      @apply h-full;
     }
   }
 
   .triangle {
-    display: block;
-    position: absolute;
     right: var(--triangle-position);
-    text-align: left;
-    top: var(--space-minus-slab);
-    z-index: var(--z-index-one);
+    @apply block z-10 absolute text-left -top-3;
+
+    svg path {
+      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+    }
   }
 }
 
 ul {
-  margin: 0;
-  list-style: none;
+  @apply m-0 list-none;
 }
 
 .labels-placeholder {
-  padding: var(--space-small);
+  @apply p-2;
 }
 
 .label__list-item {
-  margin: var(--space-smaller) 0;
-  padding: 0 var(--space-one);
+  @apply my-1 mx-0 py-0 px-2.5;
 
   .item {
-    align-items: center;
-    border-radius: var(--border-radius-medium);
-    cursor: pointer;
-    display: flex;
-    padding: var(--space-smaller) var(--space-one);
-
-    &:hover {
-      background-color: var(--s-50);
-    }
+    @apply items-center rounded-md cursor-pointer flex py-1 px-2.5 hover:bg-slate-50 dark:hover:bg-slate-900;
 
     &.label-selected {
-      background-color: var(--s-50);
+      @apply bg-slate-50 dark:bg-slate-900;
     }
 
     span {
-      font-size: var(--font-size-small);
+      @apply text-sm;
     }
 
     .label-checkbox {
-      margin: 0 var(--space-one) 0 0;
+      @apply my-0 mr-2.5 ml-0;
     }
 
     .label-title {
-      flex-grow: 1;
-      width: 100%;
+      @apply flex-grow w-full;
     }
 
     .label-pill {
-      background-color: var(--s-50);
-      border-radius: var(--border-radius-medium);
-      height: var(--space-slab);
-      width: var(--space-slab);
-      flex-shrink: 0;
-      border: 1px solid var(--color-border-light);
+      @apply bg-slate-50 rounded-md h-3 w-3 flex-shrink-0 border border-solid border-slate-50 dark:border-slate-900;
     }
   }
 }
 
 .search-container {
-  background-color: var(--white);
-  padding: 0 var(--space-one);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-index-twenty);
+  @apply bg-white py-0 px-2.5 sticky top-0 z-20;
 }
 
 .actions-container {
-  background-color: var(--white);
-  bottom: 0;
-  padding: var(--space-small);
-  position: sticky;
-  z-index: var(--z-index-twenty);
+  @apply bg-white dark:bg-slate-900 bottom-0 p-2 sticky z-20;
 
   button {
-    width: 100%;
+    @apply w-full;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index 757ff05f8..132708af1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -2,13 +2,7 @@
   <div v-on-clickaway="onClose" class="bulk-action__teams">
     <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
-        <path
-          d="M20 12l-8-8-12 12"
-          fill="var(--white)"
-          fill-rule="evenodd"
-          stroke="var(--s-50)"
-          stroke-width="1px"
-        />
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
     <div class="header flex-between">
@@ -91,83 +85,60 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__teams {
-  background-color: var(--white);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--s-50);
-  box-shadow: var(--shadow-dropdown-pane);
-  max-width: 75%;
-  position: absolute;
-  right: var(--space-small);
-  top: var(--space-larger);
-  transform-origin: top right;
-  width: auto;
-  z-index: var(--z-index-twenty);
-  min-width: var(--space-giga);
+  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
   .header {
-    padding: var(--space-one);
+    @apply p-2.5;
 
     span {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
+      @apply text-sm font-medium;
     }
   }
 
   .container {
-    max-height: var(--space-giga);
-    overflow-y: auto;
+    @apply overflow-y-auto max-h-[15rem];
     .team__list-container {
-      height: 100%;
+      @apply h-full;
     }
     .agent-list-search {
-      padding: 0 var(--space-one);
-      border: 1px solid var(--s-100);
-      border-radius: var(--border-radius-medium);
-      background-color: var(--s-50);
+      @apply py-0 px-2.5 bg-slate-50 dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
       .search-icon {
-        color: var(--s-400);
+        @apply text-slate-400 dark:text-slate-200;
       }
 
       .agent--search_input {
-        border: 0;
-        font-size: var(--font-size-mini);
-        margin: 0;
-        background-color: transparent;
-        height: unset;
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
       }
     }
   }
   .triangle {
-    display: block;
-    z-index: var(--z-index-one);
-    position: absolute;
-    top: var(--space-minus-slab);
     right: var(--triangle-position);
-    text-align: left;
+    @apply block z-10 absolute text-left -top-3;
+
+    svg path {
+      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+    }
   }
 }
 ul {
-  margin: 0;
-  list-style: none;
+  @apply m-0 list-none;
+
+  li {
+    &:last-child {
+      .agent-list-item {
+        @apply last:rounded-b-lg;
+      }
+    }
+  }
 }
 
 .team__list-item {
-  display: flex;
-  align-items: center;
-  padding: var(--space-one);
-  cursor: pointer;
-  &:hover {
-    background-color: var(--s-50);
-  }
+  @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
   span {
-    font-size: var(--font-size-small);
+    @apply text-sm;
   }
 }
 
 .search-container {
-  padding: 0 var(--space-one);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-index-twenty);
-  background-color: var(--white);
+  @apply py-0 px-2.5 sticky top-0 z-20 bg-white dark:bg-slate-800;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 0908455a4..543ece9a6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -2,13 +2,7 @@
   <div v-on-clickaway="onClose" class="actions-container">
     <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
-        <path
-          d="M20 12l-8-8-12 12"
-          fill="var(--white)"
-          fill-rule="evenodd"
-          stroke="var(--s-50)"
-          stroke-width="1px"
-        />
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
     <div class="header flex-between">
@@ -126,42 +120,30 @@ export default {
 
 <style scoped lang="scss">
 .actions-container {
-  background-color: var(--white);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--s-50);
-  box-shadow: var(--shadow-dropdown-pane);
-  position: absolute;
-  right: var(--space-small);
-  top: var(--space-larger);
-  transform-origin: top right;
-  width: auto;
-  z-index: var(--z-index-twenty);
+  @apply absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
 
   .header {
-    padding: var(--space-one);
+    @apply p-2.5;
 
     span {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
+      @apply text-sm font-medium;
     }
   }
   .container {
-    padding: var(--space-one);
-    padding-top: var(--space-zero);
+    @apply px-2.5 pt-0 pb-2.5;
   }
 
   .triangle {
-    display: block;
-    position: absolute;
     right: var(--triangle-position);
-    text-align: left;
-    top: var(--space-minus-slab);
-    z-index: var(--z-index-one);
+    @apply block z-10 absolute text-left -top-3;
+
+    svg path {
+      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+    }
   }
 }
 
 ul {
-  margin: 0;
-  list-style: none;
+  @apply m-0 list-none;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 050708056..cb480599e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -2,9 +2,12 @@
   <div
     v-show="activeLabels.length"
     ref="labelContainer"
-    class="label-container"
+    class="label-container mt-0.5 mx-2 mb-0"
   >
-    <div class="labels-wrap" :class="{ expand: showAllLabels }">
+    <div
+      class="labels-wrap flex items-end min-w-0 flex-shrink"
+      :class="{ expand: showAllLabels }"
+    >
       <woot-label
         v-for="(label, index) in activeLabels"
         :key="label.id"
@@ -22,7 +25,7 @@
             ? $t('CONVERSATION.CARD.HIDE_LABELS')
             : $t('CONVERSATION.CARD.SHOW_LABELS')
         "
-        class="show-more--button"
+        class="show-more--button sticky flex-shrink-0 right-0 mr-6 rtl:rotate-180"
         color-scheme="secondary"
         variant="hollow"
         :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
@@ -84,53 +87,35 @@ export default {
 
 <style lang="scss" scoped>
 .show-more--button {
-  height: var(--space-two);
-  position: sticky;
-  flex-shrink: 0;
-  right: 0;
-  margin-right: var(--space-medium);
-
+  @apply h-5;
   &.secondary:focus {
-    color: var(--s-700);
-    border-color: var(--s-300);
+    @apply text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700;
   }
 }
 
-.label-container {
-  margin: var(--space-micro) var(--space-small) 0;
-}
-
 .labels-wrap {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  flex-shrink: 1;
-
   &.expand {
-    height: auto;
-    overflow: visible;
-    flex-flow: row wrap;
+    @apply h-auto overflow-visible flex-row flex-wrap;
 
     .label {
-      margin-bottom: var(--space-smaller);
+      @apply mb-1;
     }
 
     .show-more--button {
-      margin-bottom: var(--space-smaller);
+      @apply mb-1;
     }
   }
 
   .secondary {
-    border: 1px solid var(--s-100);
+    @apply border border-solid border-slate-100 dark:border-slate-700;
   }
 
   .label {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 
 .hidden {
-  visibility: hidden;
-  position: absolute;
+  @apply invisible absolute;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index 057438895..1ad144414 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -2,6 +2,8 @@
   <label class="input-container">
     <span v-if="label">{{ label }}</span>
     <input
+      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+      :class="{ 'input-margin': error }"
       :value="value"
       :type="type"
       :placeholder="placeholder"
@@ -65,10 +67,11 @@ export default {
 </script>
 <style scoped lang="scss">
 .help-text {
-  margin-top: var(--space-micro);
-  font-size: var(--font-size-mini);
-  color: var(--s-600);
-  font-style: normal;
+  @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
+}
+
+.input-margin {
+  margin-bottom: 2px !important;
 }
 .message {
   margin-top: 0 !important;
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index f503e653d..e9d0e78ac 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="phone-input--wrap">
+  <div class="phone-input--wrap relative">
     <div class="phone-input" :class="{ 'has-error': error }">
-      <div class="country-emoji--wrap" @click="toggleCountryDropdown">
-        <h5 v-if="activeCountry.emoji">{{ activeCountry.emoji }}</h5>
+      <div
+        class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
+        @click="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry.emoji" class="mb-0">
+          {{ activeCountry.emoji }}
+        </h5>
         <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
         <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
       </div>
-      <span v-if="activeDialCode" class="country-dial--code">
+      <span
+        v-if="activeDialCode"
+        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+      >
         {{ activeDialCode }}
       </span>
       <input
@@ -41,15 +49,22 @@
         }"
         @click="onSelectCountry(country)"
       >
-        <span class="country-emoji">{{ country.emoji }}</span>
+        <span class="text-base mr-1">{{ country.emoji }}</span>
 
-        <span class="country-name">
+        <span
+          class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        >
           {{ country.name }}
         </span>
-        <span class="country-dial-code">{{ country.dial_code }}</span>
+        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
+          country.dial_code
+        }}</span>
       </div>
       <div v-if="filteredCountriesBySearch.length === 0">
-        <span class="no-results">No results found</span>
+        <span
+          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
+          >No results found</span
+        >
       </div>
     </div>
   </div>
@@ -237,124 +252,39 @@ export default {
 </script>
 <style scoped lang="scss">
 .phone-input--wrap {
-  position: relative;
-
   .phone-input {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-bottom: var(--space-normal);
-    border: 1px solid var(--s-200);
-    border-radius: var(--border-radius-normal);
+    @apply flex items-center justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
 
     &.has-error {
-      border: 1px solid var(--r-400);
+      @apply border border-solid border-red-400 dark:border-red-400;
     }
   }
 
-  .country-emoji--wrap {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-small);
-    background: var(--s-25);
-    height: 2.5rem;
-    width: 3.25rem;
-    border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
-    padding: var(--space-small) var(--space-smaller) var(--space-small)
-      var(--space-small);
-
-    h5 {
-      margin-bottom: 0;
-    }
-  }
-
-  .country-dial--code {
-    display: flex;
-    color: var(--s-300);
-    font-size: var(--space-normal);
-    font-weight: normal;
-    line-height: 1.5;
-    padding: var(--space-small) 0 var(--space-small) var(--space-small);
-  }
-
   .phone-input--field {
-    margin-bottom: 0;
-    border: 0;
+    @apply mb-0 rounded-tl-none rounded-bl-none border-0;
   }
 
   .country-dropdown {
-    z-index: var(--z-index-low);
-    position: absolute;
-    height: var(--space-giga);
-    width: 12.5rem;
-    overflow-y: auto;
-    top: 2.5rem;
-    border-radius: var(--border-radius-default);
-    padding: 0 0 var(--space-smaller) 0;
-    background-color: var(--white);
-    box-shadow: var(--shadow-context-menu);
-    border-radius: var(--border-radius-normal);
+    @apply z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900;
 
     .dropdown-search--wrap {
-      top: 0;
-      position: sticky;
-      background-color: var(--white);
-      padding: var(--space-smaller);
+      @apply top-0 sticky bg-white dark:bg-slate-900 p-1;
 
       .dropdown-search {
-        height: var(--space-large);
-        margin-bottom: 0;
-        font-size: var(--font-size-small);
-        border: 1px solid var(--s-200) !important;
+        @apply h-8 mb-0 text-sm border border-solid border-slate-200 dark:border-slate-600;
       }
     }
 
     .country-dropdown--item {
-      display: flex;
-      align-items: center;
-      height: 1.75rem;
-      padding: 0 var(--space-smaller);
-      cursor: pointer;
+      @apply flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700;
 
       &.active {
-        background-color: var(--s-50);
+        @apply bg-slate-50 dark:bg-slate-700;
       }
 
       &.focus {
-        background-color: var(--s-25);
+        @apply bg-slate-25 dark:bg-slate-800;
       }
-
-      &:hover {
-        background-color: var(--s-50);
-      }
-
-      .country-emoji {
-        font-size: var(--font-size-default);
-        margin-right: var(--space-smaller);
-      }
-
-      .country-name {
-        max-width: 7.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .country-dial-code {
-        margin-left: var(--space-smaller);
-        color: var(--s-300);
-        font-size: var(--font-size-mini);
-      }
-    }
-
-    .no-results {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--s-500);
-      margin-top: var(--space-normal);
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index 41360ead7..4559c305d 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -79,41 +79,26 @@ export default {
 
 <style scoped lang="scss">
 .mention--box {
-  background: var(--white);
-  border-radius: var(--border-radius-normal);
-  border-top: 1px solid var(--color-border);
-  box-shadow: var(--shadow-medium);
-  left: 0;
-  bottom: 100%;
-  max-height: 9.75rem;
-  overflow: auto;
-  padding: var(--space-small) var(--space-small) 0;
-  position: absolute;
-  width: 100%;
-  z-index: 100;
+  @apply bg-white dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-[100] pt-2 px-2 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border-t border-solid border-slate-75 dark:border-slate-800;
 
   .dropdown-menu__item:last-child {
-    padding-bottom: var(--space-smaller);
+    @apply pb-1;
   }
 
   .active {
-    color: var(--white);
+    @apply text-white dark:text-white;
 
     &:hover {
-      color: var(--w-700);
+      @apply bg-woot-700 dark:bg-woot-700;
     }
   }
 
   .button {
-    transition: none;
-    height: var(--space-large);
-    line-height: 1.4;
+    @apply transition-none h-8 leading-[1.4];
   }
 }
 
 .canned-item__button::v-deep .button__content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
index 5d968bfaa..29d54edff 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -1,8 +1,8 @@
 <template>
   <modal :show.sync="show" :on-close="cancel">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
-      <div class="modal-footer">
+      <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
         <woot-button variant="clear" @click="cancel">
           {{ cancelLabel }}
         </woot-button>
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index b2d1f9191..10d02bcc2 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -1,63 +1,83 @@
 <template>
   <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"
       />
-      <div class="shortcut__wrap margin-top-3">
-        <div class="title-key__wrap">
-          <h5 class="text-block-title">
+      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8 mt-6">
+        <div class="flex justify-between items-center min-w-[25rem]">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
           </h5>
-          <div class="shortcut-key__wrap">
-            <p class="shortcut-key">
+          <div class="flex items-center mb-1 ml-2">
+            <p
+              class="shortcut-key items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+            >
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
             </p>
-            <p class="shortcut-key key">
+            <p
+              class="shortcut-key items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
+            >
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
             </p>
           </div>
         </div>
       </div>
 
-      <div class="shortcut__wrap">
-        <div class="title-key__wrap">
-          <h5 class="text-block-title">
+      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8">
+        <div class="flex justify-between items-center min-w-[25rem]">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
           </h5>
-          <div class="shortcut-key__wrap">
-            <div class="open-conversation__key">
-              <span class="shortcut-key">
+          <div class="flex items-center mb-1 ml-2">
+            <div class="flex mr-2">
+              <span
+                class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+              >
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
               </span>
-              <span class="shortcut-key">
+              <span
+                class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+              >
                 J
               </span>
-              <span class="forward-slash text-block-title">
+              <span
+                class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
+              >
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
               </span>
             </div>
-            <span class="shortcut-key">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+            >
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
             </span>
-            <span class="shortcut-key key">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
+            >
               K
             </span>
           </div>
         </div>
 
-        <div class="title-key__wrap">
-          <h5 class="text-block-title">
+        <div class="flex justify-between items-center min-w-[25rem]">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
           </h5>
-          <div class="shortcut-key__wrap">
-            <span class="shortcut-key">
+          <div class="flex items-center mb-1 ml-2">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+            >
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
             </span>
-            <span class="shortcut-key">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+            >
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
             </span>
-            <span class="shortcut-key key">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
+            >
               E
             </span>
           </div>
@@ -65,16 +85,20 @@
         <div
           v-for="shortcutKey in shortcutKeys"
           :key="shortcutKey.id"
-          class="title-key__wrap"
+          class="flex justify-between items-center min-w-[25rem]"
         >
-          <h5 class="text-block-title">
+          <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ title(shortcutKey) }}
           </h5>
-          <div class="shortcut-key__wrap">
-            <span class="shortcut-key">
+          <div class="flex items-center mb-1 ml-2">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+            >
               {{ shortcutKey.firstkey }}
             </span>
-            <span class="shortcut-key key">
+            <span
+              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
+            >
               {{ shortcutKey.secondKey }}
             </span>
           </div>
@@ -108,64 +132,8 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
-.title-shortcut-key__wrap {
-  display: flex;
-}
-
-.page-title {
-  font-size: var(--font-size-big);
-  font-weight: var(--font-weight-bold);
-}
-
-.shortcut-key__wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-smaller);
-  margin-left: var(--space-small);
-}
-
-.shortcut__wrap {
-  display: grid;
-  grid-template-columns: repeat(2, 0.5fr);
-  gap: var(--space-smaller) var(--space-large);
-  margin-top: var(--space-small);
-  padding: 0 var(--space-large) var(--space-large);
-}
-
-.title-key__wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-width: 25rem;
-}
-
-.forward-slash {
-  display: flex;
-  align-items: center;
-  font-weight: var(--font-weight-bold);
-}
-
 .shortcut-key {
-  background: var(--color-background);
-  padding: var(--space-small) var(--space-one);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-mini);
-  align-items: center;
-  border-radius: var(--border-radius-normal);
-  margin-right: var(--space-small);
-}
-
-.key {
-  display: flex;
-  justify-content: center;
-  min-width: var(--space-large);
-  margin-right: 0;
-}
-
-.open-conversation__key {
-  display: flex;
-  margin-right: var(--space-small);
+  @apply py-2 px-2.5;
 }
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 2ed17e3bf..184e461de 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -340,7 +340,7 @@
   },
   "MERGE_CONTACTS": {
     "TITLE": "Merge contacts",
-    "DESCRIPTION": "Merge contacts to combine two profiles into one, including all attributes and conversations. In case of conflict, the Primary contact’ s attributes will take precedence.",
+    "DESCRIPTION": "Merge contacts to combine two profiles into one, including all attributes and conversations. In case of conflict, the Primary contact’s attributes will take precedence.",
     "PRIMARY": {
       "TITLE": "Primary contact",
       "HELP_LABEL": "To be kept"
diff --git a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
index 36540a341..f6ed975cc 100644
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -4,11 +4,11 @@
       :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
       :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
     />
-    <form class="row" @submit.prevent="addCustomAttribute">
+    <form class="w-full" @submit.prevent="addCustomAttribute">
       <woot-input
         v-model.trim="attributeName"
         :class="{ error: $v.attributeName.$error }"
-        class="medium-12 columns"
+        class="w-full"
         :error="attributeNameError"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
@@ -16,11 +16,11 @@
       />
       <woot-input
         v-model.trim="attributeValue"
-        class="medium-12 columns"
+        class="w-full"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
       />
-      <div class="modal-footer">
+      <div class="flex justify-end items-center py-2 px-0 gap-2">
         <woot-button
           :is-disabled="$v.attributeName.$invalid || isCreating"
           :is-loading="isCreating"
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index 8e233638f..99bf12a44 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -57,52 +57,36 @@ export default {
 
 <style lang="scss" scoped>
 .option-item--user {
-  display: flex;
-  align-items: center;
+  @apply flex items-center;
 }
 .user-identifier {
-  font-size: var(--font-size-mini);
-  margin-left: var(--space-micro);
-  color: var(--s-700);
+  @apply text-xs ml-0.5 text-slate-700 dark:text-slate-100;
 }
 .option__user-data {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  margin-left: var(--space-small);
-  margin-right: var(--space-small);
+  @apply flex flex-col flex-grow ml-2 mr-2;
 }
 .option__body,
 .option__title {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  line-height: 1.2;
-  font-size: var(--font-size-small);
+  @apply flex items-center justify-start leading-[1.2] text-sm;
 }
 .option__body .icon {
-  position: relative;
-  top: 1px;
-  margin-right: var(--space-micro);
+  @apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
 }
 .option__title {
-  font-weight: var(--font-weight-medium);
-  margin-bottom: var(--space-micro);
+  @apply text-slate-800 dark:text-slate-100 font-medium mb-0.5;
 }
 .option__body {
-  font-size: var(--font-size-mini);
-  color: var(--s-700);
+  @apply text-xs text-slate-700 dark:text-slate-100 mt-1;
 }
 
 .option__user-data .option__body {
   > .phone-icon-wrap,
   > .email-icon-wrap {
-    width: auto;
+    @apply w-auto flex items-center;
   }
 }
 
 .merge-contact--icon {
-  margin-bottom: var(--space-minus-micro);
-  margin-right: var(--space-micro);
+  @apply -mb-0.5 mr-0.5;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index addc1c1e2..03e009d84 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -173,62 +173,52 @@ export default {
 
 <style lang="scss" scoped>
 .child-contact-wrap {
-  display: flex;
-  width: 100%;
+  @apply flex w-full;
 }
 .child-contact {
-  flex: 1 0 0;
-  min-width: 0;
+  @apply min-w-0 flex-grow flex-shrink-0;
 }
 .child-arrow {
-  width: var(--space-larger);
-  position: relative;
-  font-size: var(--font-size-default);
-  color: var(--color-border-dark);
+  @apply w-8 relative text-base text-slate-100 dark:text-slate-600;
 }
 .multiselect {
-  margin-bottom: var(--space-small);
+  @apply mb-2;
 }
 .child-contact {
-  margin-top: var(--space-smaller);
+  @apply mt-1;
 }
 .child-arrow::after {
-  content: '';
-  height: var(--space-larger);
-  width: 0;
-  left: var(--space-two);
-  position: absolute;
-  border-left: 1px solid var(--color-border-dark);
+  @apply content-[''] h-12 w-0 left-5 absolute border-l border-solid border-slate-100 dark:border-slate-600;
 }
 
 .child-arrow::before {
-  content: '';
-  height: 0;
-  width: var(--space-normal);
-  left: var(--space-two);
-  top: var(--space-larger);
-  position: absolute;
-  border-bottom: 1px solid var(--color-border-dark);
+  @apply content-[''] h-0 w-4 left-5 top-12 absolute border-b border-solid border-slate-100 dark:border-slate-600;
 }
 
 .up {
-  position: absolute;
-  top: var(--space-minus-smaller);
-  left: var(--space-slab);
+  @apply absolute -top-1 left-3;
 }
 
 .footer {
-  margin-top: var(--space-medium);
-  display: flex;
-  justify-content: flex-end;
+  @apply mt-6 flex justify-end;
 }
 
 /* TDOD: Clean errors in forms style */
 .error .message {
-  margin-top: 0;
+  @apply mt-0;
 }
 
 .label--merge-warning {
-  margin-left: var(--space-small);
+  @apply ml-2;
+}
+
+::v-deep {
+  .multiselect {
+    @apply rounded-md;
+  }
+
+  .multiselect__tags {
+    @apply h-[52px];
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 479ea496f..0a26270a1 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -234,34 +234,29 @@ export default {
 </script>
 <style lang="scss" scoped>
 .menu-container {
-  padding: var(--space-smaller);
-  background-color: var(--white);
-  box-shadow: var(--shadow-context-menu);
-  border-radius: var(--border-radius-normal);
+  @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
 
   hr:first-child {
-    display: none;
+    @apply hidden;
   }
 
   hr {
-    border-bottom: 1px solid var(--color-border-light);
-    margin: var(--space-smaller);
+    @apply m-1 border-b border-solid border-slate-50 dark:border-slate-800/50;
   }
 }
 
 .context-menu--delete-modal {
   ::v-deep {
     .modal-container {
-      max-width: 30rem;
+      @apply max-w-[30rem];
 
       h2 {
-        font-weight: var(--font-weight-medium);
-        font-size: var(--font-size-default);
+        @apply font-medium text-base;
       }
     }
 
     .modal-footer {
-      padding: var(--space-normal) var(--space-large) var(--space-large);
+      @apply pt-4 pb-8 px-8;
     }
   }
 }
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 00fb93dd1..bf0bb18ea 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -1,10 +1,10 @@
 <template>
   <blockquote
     ref="messageContainer"
-    class="message border-l-2 border-slate-100"
+    class="message border-l-2 border-slate-100 dark:border-slate-800"
   >
     <p class="header">
-      <strong class="author">
+      <strong class="text-slate-700 dark:text-slate-100">
         {{ author }}
       </strong>
       {{ $t('SEARCH.WROTE') }}
@@ -83,29 +83,22 @@ export default {
 
 <style scoped lang="scss">
 .message {
-  padding: 0 var(--space-small);
-  margin-top: var(--space-small);
+  @apply py-0 px-2 mt-2;
 }
 .message-content::v-deep p,
 .message-content::v-deep li::marker {
-  color: var(--s-700);
-  margin-bottom: var(--space-smaller);
-}
-.author {
-  color: var(--s-700);
+  @apply text-slate-700 dark:text-slate-100 mb-1;
 }
+
 .header {
-  color: var(--s-500);
-  margin-bottom: var(--space-smaller);
+  @apply text-slate-500 dark:text-slate-300 mb-1;
 }
 
 .message-content {
-  overflow-wrap: break-word;
+  @apply break-words text-slate-600 dark:text-slate-200;
 }
 
 .message-content::v-deep .searchkey--highlight {
-  color: var(--w-600);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-small);
+  @apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index fb5c4a54e..c587b882b 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -71,39 +71,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'app/javascript/dashboard/assets/scss/_mixins.scss';
 .input-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: var(--space-small) var(--space-normal);
-  border: 1px solid var(--s-100);
-  border-radius: var(--border-radius-small);
   transition: border-bottom 0.2s ease-in-out;
+  @apply relative flex items-center py-2 px-4 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
 
   input[type='search'] {
-    @include ghost-input;
-    width: 100%;
-    margin: 0;
+    @apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
   }
 
   &.is-focused {
-    border-color: var(--w-100);
+    @apply border-woot-100 dark:border-woot-600;
 
     .icon {
       color: var(--w-400);
+      @apply text-woot-400 dark:text-woot-500;
     }
   }
 }
 .icon-container {
-  display: flex;
-  align-items: center;
+  @apply flex items-center;
   .icon {
-    color: var(--s-400);
+    @apply text-slate-400;
   }
 }
 
 .helper-label {
-  margin: 0;
+  @apply m-0;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
index 6dca5239b..20bc2c15b 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -32,20 +32,16 @@ export default {
 </script>
 <style lang="scss" scoped>
 .search-input-box {
-  padding: var(--space-small);
+  @apply p-2;
 }
 .search--icon {
-  flex-shrink: 0;
-  color: var(--s-500);
+  @apply flex-shrink-0 text-slate-500 dark:text-slate-300;
 }
 .search-placeholder {
-  color: var(--s-500);
+  @apply text-slate-500 dark:text-slate-300;
 }
 
 .search-input {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--space-smaller);
+  @apply flex justify-center items-center gap-1;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index c35651356..bf478e5da 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -53,31 +53,19 @@ export default {
 
 <style scoped lang="scss">
 .contact-item {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  padding: var(--space-small);
-  border-radius: var(--border-radius-small);
-
-  &:hover {
-    background-color: var(--s-25);
-  }
+  @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
 }
 .contact-details {
-  margin-left: var(--space-small);
+  @apply ml-2 rtl:mr-2 rtl:ml-0;
 }
 .name {
-  margin: 0;
+  @apply m-0;
 }
 .details-meta {
-  margin: 0;
-  color: var(--s-600);
-  font-size: var(--font-size-small);
-  display: flex;
-  align-items: center;
+  @apply m-0 text-slate-600 dark:text-slate-200 text-sm flex items-center;
 
   span {
-    margin-right: var(--space-smaller);
+    @apply ml-1 rtl:mr-1 rtl:ml-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index 5bfd58247..deaae694c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -6,7 +6,7 @@
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul class="search-list">
+    <ul v-if="contacts.length" class="search-list">
       <li v-for="contact in contacts" :key="contact.id">
         <search-result-contact-item
           :id="contact.id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index 0ca574af2..89580062b 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -13,7 +13,7 @@
             small
           />
           <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="margin-right-1" />
+            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
           </div>
         </div>
         <div>
@@ -25,7 +25,10 @@
           <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
           {{ name }}
         </h5>
-        <h5 v-if="email" class="text-block-title email text-truncate">
+        <h5
+          v-if="email"
+          class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
+        >
           <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
           {{ email }}
         </h5>
@@ -95,67 +98,37 @@ export default {
 
 <style scoped lang="scss">
 .conversation-item {
-  cursor: pointer;
-  display: flex;
-  padding: var(--space-small);
-  border-radius: var(--border-radius-small);
-
-  &:hover {
-    background-color: var(--s-25);
-  }
+  @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
 }
 
 .meta-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-smaller);
+  @apply flex items-center justify-between mb-1;
 }
 .icon-wrap {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--w-600);
-  border-radius: var(--border-radius-small);
-  background-color: var(--w-75);
+  @apply w-6 h-6 flex-shrink-0  bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
 }
 
 .inbox-name-wrap {
-  background-color: var(--s-25);
-  height: var(--space-two);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--border-radius-small);
-  width: fit-content;
-  margin-left: var(--space-smaller);
+  @apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
 }
 .conversation-details {
-  margin-left: var(--space-small);
-  flex-grow: 1;
-  min-width: 0;
+  @apply ml-2 flex-grow min-w-0;
 }
 
 .name {
-  flex-shrink: 0;
+  @apply flex-shrink-0;
 }
 .conversation-id,
 .name,
 .email {
-  margin: 0;
+  @apply m-0;
 }
 .created-at,
 .pre-text {
-  color: var(--s-600);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-normal);
+  @apply text-slate-600 dark:text-slate-100 text-xs font-normal;
 }
 
 .user-details {
-  display: flex;
-  gap: var(--space-small);
+  @apply flex gap-2;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index a598d92d3..3c646a85e 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -6,7 +6,7 @@
     :show-title="showTitle || isFetching"
     :is-fetching="isFetching"
   >
-    <ul class="search-list">
+    <ul v-if="conversations.length" class="search-list">
       <li v-for="conversation in conversations" :key="conversation.id">
         <search-result-conversation-item
           :id="conversation.id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index 42478ffe2..680a9d785 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -6,7 +6,7 @@
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul class="search-list">
+    <ul v-if="messages.length" class="search-list">
       <li v-for="message in messages" :key="message.id">
         <search-result-conversation-item
           :id="message.conversation_id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index ec8d343b8..709936122 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="result-section">
     <div v-if="showTitle" class="header">
-      <h3 class="text-block-title">{{ title }}</h3>
+      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
     </div>
     <woot-loading-state v-if="isFetching" :message="'Searching'" />
     <slot v-else />
@@ -48,37 +48,22 @@ export default {
 
 <style scoped lang="scss">
 .result-section {
-  margin: var(--space-small) 0;
+  @apply my-2 mx-0;
 }
 .search-list {
-  list-style: none;
-  margin: 0;
-  padding: var(--spacing-normal) 0;
+  @apply m-0 py-4 px-0 list-none;
 }
 .header {
-  position: sticky;
-  top: 0;
-  padding: var(--space-small);
-  z-index: 50;
-  background: var(--white);
-  margin-bottom: var(--space-micro);
+  @apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
 }
 
 .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-medium) var(--space-normal);
-  margin: var(--space-small);
-  background: var(--s-25);
-  border-radius: var(--border-radius-medium);
+  @apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
   .icon {
-    color: var(--s-500);
+    @apply text-slate-500 dark:text-slate-300;
   }
   .empty-state__text {
-    text-align: center;
-    color: var(--s-500);
-    margin: 0 var(--space-small);
+    @apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 1702b159f..93a1e59af 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -45,7 +45,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .tab-container {
-  margin-top: var(--space-smaller);
-  border-bottom: 1px solid var(--s-100);
+  @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 9ccc79ea8..1706bc45e 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -212,50 +212,26 @@ export default {
 
 <style lang="scss" scoped>
 .search-page {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+  @apply flex flex-col w-full bg-white dark:bg-slate-900;
 }
 .page-header {
-  display: flex;
-  padding: var(--space-normal);
+  @apply flex p-4;
 }
 .search-root {
-  margin: 0 auto;
-  max-width: 45rem;
-  min-height: 20rem;
-  width: 100%;
-  height: 100%;
-  padding: var(--space-normal);
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  background: white;
-  margin-top: var(--space-medium);
+  @apply flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-white dark:bg-slate-900;
 
   .search-results {
-    flex-grow: 1;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0 var(--space-small);
+    @apply flex-grow h-full overflow-y-auto py-0 px-2;
   }
 }
 
 .empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-medium) var(--space-normal);
-  border-radius: var(--border-radius-medium);
-  margin-top: var(--space-large);
+  @apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
   .icon {
-    color: var(--s-500);
+    @apply text-slate-500 dark:text-slate-400;
   }
   .empty-state__text {
-    text-align: center;
-    color: var(--s-500);
-    margin: var(--space-small);
+    @apply text-center text-slate-500 dark:text-slate-400 m-2;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index e1a0d3e06..308d330a8 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -9,7 +9,7 @@
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-add-label-popup="showAddLabelPopup"
     />
-    <section class="app-content columns">
+    <section class="app-content flex-1 px-0">
       <router-view />
       <command-bar />
       <account-selector
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 6cec75f48..210965032 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="small-12 medium-3 bg-white contact--panel"
+    class="w-[25%] bg-white dark:bg-slate-900 contact--panel"
     :class="{ 'border-left': showAvatar }"
   >
     <contact-info
@@ -148,38 +148,20 @@ export default {
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
-    padding-bottom: var(--space-slab);
-    margin-bottom: var(--space-normal);
+    @apply pb-3 mb-4;
   }
 }
 .contact--panel {
-  height: 100%;
-  font-size: var(--font-size-small);
-  overflow-y: auto;
-  overflow: auto;
-  position: relative;
-  @apply border-r border-slate-50 dark:border-slate-700;
+  @apply border-r border-slate-50 dark:border-slate-700 h-full text-sm overflow-y-auto relative;
 }
 
 .list-group {
   .list-group-item {
-    background-color: var(--white);
+    @apply bg-white dark:bg-slate-900;
   }
 }
 
 .conversation--details {
-  padding: 0 var(--space-normal);
-}
-
-.contact--mute {
-  color: var(--r-400);
-  display: block;
-  text-align: left;
-}
-
-.contact--actions {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  @apply py-0 px-4;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index d214a7b01..612b43967 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="column">
+  <div>
     <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p>{{ filterModalSubTitle }}</p>
+      <p class="text-slate-600 dark:text-slate-200">
+        {{ filterModalSubTitle }}
+      </p>
     </woot-modal-header>
-    <div class="column modal-content">
-      <div v-if="isSegmentsView" class="columns">
+    <div class="p-8">
+      <div v-if="isSegmentsView">
         <label class="input-label" :class="{ error: !activeSegmentNewName }">
           {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
           <input
             v-model="activeSegmentNewName"
             type="text"
-            class="name-input"
+            class="folder-input border-slate-75 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100"
           />
           <span v-if="!activeSegmentNewName" class="message">
             {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
@@ -20,7 +22,9 @@
           {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
         </label>
       </div>
-      <div class="medium-12 columns filters-wrap">
+      <div
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+      >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
           :key="i"
@@ -41,7 +45,7 @@
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
-        <div class="filter-actions">
+        <div class="mt-4">
           <woot-button
             icon="add"
             color-scheme="success"
@@ -63,8 +67,8 @@
           </woot-button>
         </div>
       </div>
-      <div class="medium-12 columns">
-        <div class="modal-footer justify-content-end w-full">
+      <div class="w-full">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
           <woot-button class="button clear" @click.prevent="onClose">
             {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
           </woot-button>
@@ -349,17 +353,8 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
-.filters-wrap {
-  padding: var(--space-normal);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--color-border);
-  background: var(--color-background-light);
-  margin-bottom: var(--space-normal);
-}
-
-.filter-actions {
-  margin-top: var(--space-normal);
+.folder-input {
+  @apply w-[50%];
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 3f8d6b7ec..cf6e92c0f 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -1,5 +1,7 @@
 <template>
-  <section class="contacts-table-wrap">
+  <section
+    class="contacts-table-wrap bg-white dark:bg-slate-900 flex-1 h-full overflow-hidden"
+  >
     <ve-table
       :fixed-header="true"
       max-height="calc(100vh - 7.125rem)"
@@ -18,7 +20,7 @@
       v-else-if="!isLoading && !contacts.length"
       :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
     />
-    <div v-if="isLoading" class="contacts--loader">
+    <div v-if="isLoading" class="items-center flex text-base justify-center">
       <spinner />
       <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
@@ -133,7 +135,7 @@ export default {
                   status={row.availability_status}
                 />
                 <div class="user-block">
-                  <h6 class="sub-block-title text-truncate">
+                  <h6 class="sub-block-title overflow-hidden whitespace-nowrap text-ellipsis">
                     <router-link
                       to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
                       class="user-name"
@@ -159,7 +161,7 @@ export default {
           renderBodyCell: ({ row }) => {
             if (row.email)
               return (
-                <div class="text-truncate">
+                <div class="overflow-hidden whitespace-nowrap text-ellipsis text-woot-500 dark:text-woot-500">
                   <a
                     target="_blank"
                     rel="noopener noreferrer nofollow"
@@ -202,7 +204,7 @@ export default {
           renderBodyCell: ({ row }) => {
             if (row.country) {
               return (
-                <div class="text-truncate">
+                <div class="overflow-hidden whitespace-nowrap text-ellipsis">
                   {`${getCountryFlag(row.countryCode)} ${row.country}`}
                 </div>
               );
@@ -284,43 +286,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/mixins';
-
-.contacts-table-wrap {
-  flex: 1 1;
-  height: 100%;
-  overflow: hidden;
-}
-
 .contacts-table-wrap::v-deep {
   .ve-table {
-    padding-bottom: var(--space-large);
+    @apply pb-8;
   }
   .row--user-block {
-    align-items: center;
-    display: flex;
-    text-align: left;
+    @apply items-center flex text-left;
 
     .user-block {
-      align-items: flex-start;
-      display: flex;
-      flex-direction: column;
-      margin: 0 var(--space-small);
+      @apply items-start flex flex-col my-0 mx-2;
     }
 
     .user-name {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
-      margin: 0;
-      text-transform: capitalize;
+      @apply text-sm font-medium m-0 capitalize;
     }
 
     .view-details--button {
-      color: var(--color-body);
+      @apply text-slate-600 dark:text-slate-200;
     }
 
     .user-email {
-      margin: 0;
+      @apply m-0;
     }
   }
 
@@ -336,25 +322,13 @@ export default {
     font-size: var(--font-size-mini) !important;
   }
   .ve-table-sort {
-    top: -4px;
+    @apply -top-1;
   }
 }
 
-.contacts--loader {
-  align-items: center;
-  display: flex;
-  font-size: var(--font-size-default);
-  justify-content: center;
-  padding: var(--space-big);
-}
-
 .cell--social-profiles {
   a {
-    color: var(--s-300);
-    display: inline-block;
-    font-size: var(--font-size-medium);
-    min-width: var(--space-large);
-    text-align: center;
+    @apply text-slate-300 dark:text-slate-400 text-lg min-w-[2rem] text-center;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index e59c42cf6..850fb89fd 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="contacts-page row">
-    <div class="left-wrap" :class="wrapClass">
+  <div class="w-full flex flex-row">
+    <div class="flex flex-col h-full" :class="wrapClass">
       <contacts-header
         :search-query="searchQuery"
         :header-title="pageTitle"
@@ -187,7 +187,7 @@ export default {
       return this.selectedContactId !== '';
     },
     wrapClass() {
-      return this.showContactViewPane ? 'medium-9' : 'medium-12';
+      return this.showContactViewPane ? 'w-[75%]' : 'w-full';
     },
     pageParameter() {
       const selectedPageNumber = Number(this.$route.query?.page);
@@ -458,15 +458,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.contacts-page {
-  width: 100%;
-}
-
-.left-wrap {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 60c97e738..8c3237ca1 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -1,21 +1,30 @@
 <template>
-  <header class="header">
-    <div class="table-actions-wrap">
-      <div class="left-aligned-wrap">
+  <header
+    class="bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800"
+  >
+    <div class="flex justify-between w-full py-2 px-4">
+      <div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
         <woot-sidemenu-icon />
-        <h1 class="page-title header-title">
+        <h1
+          class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
+        >
           {{ headerTitle }}
         </h1>
       </div>
-      <div class="right-aligned-wrap">
-        <div class="search-wrap">
-          <div class="search-icon-container">
-            <fluent-icon icon="search" class="search-icon" />
+      <div class="flex gap-2">
+        <div
+          class="max-w-[400px] min-w-[150px] flex items-center relative mx-2 search-wrap"
+        >
+          <div class="flex items-center absolute h-full left-2.5">
+            <fluent-icon
+              icon="search"
+              class="h-5 leading-9 text-sm text-slate-700 dark:text-slate-200"
+            />
           </div>
           <input
             type="text"
             :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-            class="contact-search"
+            class="contact-search border-slate-100 dark:border-slate-600"
             :value="searchQuery"
             @keyup.enter="submitSearch"
             @input="inputSearch"
@@ -29,9 +38,9 @@
             {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
           </woot-button>
         </div>
-        <div v-if="hasActiveSegments">
+        <div v-if="hasActiveSegments" class="flex gap-2">
           <woot-button
-            class="margin-right-1 clear"
+            class="clear"
             color-scheme="secondary"
             icon="edit"
             @click="onToggleEditSegmentsModal"
@@ -39,7 +48,7 @@
             {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
           </woot-button>
           <woot-button
-            class="margin-right-1 clear"
+            class="clear"
             color-scheme="alert"
             icon="delete"
             @click="onToggleDeleteSegmentsModal"
@@ -47,10 +56,13 @@
             {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
           </woot-button>
         </div>
-        <div v-if="!hasActiveSegments" class="filters__button-wrap">
-          <div v-if="hasAppliedFilters" class="filters__applied-indicator" />
+        <div v-if="!hasActiveSegments" class="relative">
+          <div
+            v-if="hasAppliedFilters"
+            class="absolute h-2 w-2 top-1 right-3 bg-slate-500 dark:bg-slate-500 rounded-full"
+          />
           <woot-button
-            class="margin-right-1 clear"
+            class="clear"
             color-scheme="secondary"
             data-testid="create-new-contact"
             icon="filter"
@@ -62,7 +74,7 @@
 
         <woot-button
           v-if="hasAppliedFilters && !hasActiveSegments"
-          class="margin-right-1 clear"
+          class="clear"
           color-scheme="alert"
           variant="clear"
           icon="save"
@@ -71,7 +83,7 @@
           {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
         </woot-button>
         <woot-button
-          class="margin-right-1 clear"
+          class="clear"
           color-scheme="success"
           icon="person-add"
           data-testid="create-new-contact"
@@ -177,98 +189,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.page-title {
-  margin: 0;
-}
-.table-actions-wrap {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--space-small) var(--space-normal) var(--space-small)
-    var(--space-normal);
-}
-
-.left-aligned-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  min-width: var(--space-mega);
-
-  .header-title {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    margin: 0 var(--space-small);
-  }
-}
-
-.right-aligned-wrap {
-  display: flex;
-}
-
 .search-wrap {
-  max-width: 400px;
-  min-width: 150px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin-right: var(--space-small);
-  margin-left: var(--space-small);
-
-  .search-icon-container {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    height: 100%;
-    left: var(--space-one);
-
-    .search-icon {
-      height: var(--font-size-medium);
-      line-height: 2.25rem;
-      font-size: var(--font-size-small);
-      color: var(--b-700);
-    }
-  }
   .contact-search {
-    margin: 0;
-    height: 2.375rem;
-    width: 100%;
-    font-size: var(--font-size-small);
-    padding-left: calc(var(--space-large) + var(--space-smaller));
-    padding-right: 3.75rem;
-    border-color: var(--s-100);
+    @apply pl-9 pr-[3.75rem] text-sm w-full h-[2.375rem] m-0;
   }
 
   .button {
-    margin-left: var(--space-small);
-    height: 2rem;
-    right: var(--space-smaller);
-    position: absolute;
-    padding: 0 var(--space-small);
     transition: transform 100ms linear;
-    opacity: 0;
-    transform: translateX(-1px);
-    visibility: hidden;
+    @apply ml-2 h-8 right-1 absolute py-0 px-2 opacity-0 -translate-x-px invisible;
   }
 
   .button.show {
-    opacity: 1;
-    transform: translateX(0);
-    visibility: visible;
-  }
-}
-.filters__button-wrap {
-  position: relative;
-
-  .filters__applied-indicator {
-    position: absolute;
-    height: var(--space-small);
-    width: var(--space-small);
-    top: var(--space-smaller);
-    right: var(--space-slab);
-    background-color: var(--s-500);
-    border-radius: var(--border-radius-rounded);
+    @apply opacity-100 translate-x-0 visible;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
index 91393d334..0aab68255 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
@@ -1,6 +1,6 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
         <p>
           {{ $t('IMPORT_CONTACTS.DESC') }}
@@ -9,8 +9,8 @@
           }}</a>
         </p>
       </woot-modal-header>
-      <div class="row modal-content">
-        <div class="medium-12 columns">
+      <div class="flex flex-col p-8">
+        <div class="w-full">
           <label>
             <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
             <input
@@ -22,8 +22,8 @@
             />
           </label>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="w-full">
             <woot-button
               :disabled="uiFlags.isCreating || !file"
               :loading="uiFlags.isCreating"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index f2b15c42e..c5cda34be 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -71,14 +71,13 @@ export default {
 
 <style lang="scss" scoped>
 .no-label-message {
-  margin-bottom: var(--space-normal);
-  color: var(--b-500);
+  @apply text-slate-500 dark:text-slate-400 mb-4;
 }
 
 ::v-deep .conversation {
-  padding-right: 0;
+  @apply pr-0;
   .conversation--details {
-    padding-left: var(--space-small);
+    @apply pl-2;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index e19d2990d..bfb868892 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="conv-details--item" :class="{ compact: compact }">
-    <h4 class="conv-details--item__label text-block-title">
-      <span class="item__title">
+  <div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
+    <div class="items-center flex justify-between mb-1.5">
+      <span class="text-slate-800 font-medium dark:text-slate-100 text-sm">
         {{ title }}
       </span>
       <slot name="button" />
-    </h4>
-    <div v-if="value" class="conv-details--item__value">
+    </div>
+    <div v-if="value" class="break-words">
       <slot>
         {{ value }}
       </slot>
@@ -25,28 +25,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.conv-details--item {
-  overflow: auto;
-  padding: var(--space-slab) var(--space-normal);
-
-  &.compact {
-    padding: 0;
-  }
-
-  .conv-details--item__label {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-
-    .edit-button {
-      padding: 0;
-    }
-  }
-
-  .conv-details--item__value {
-    word-break: break-all;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 63a8f6b3e..5b16368f6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="medium-3 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 contact--panel"
+    class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 border-l rtl:border-l-0 rtl:border-r contact--panel overflow-y-auto"
   >
     <contact-info
       :contact="contact"
@@ -21,7 +21,7 @@
         <div
           v-for="element in conversationSidebarItems"
           :key="element.name"
-          class="list-group-item"
+          class="bg-white dark:bg-gray-800"
         >
           <div
             v-if="element.name === 'conversation_actions'"
@@ -257,72 +257,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-
-.contact--panel {
-  border-left: 1px solid var(--color-border);
-  font-size: $font-size-small;
-  overflow-y: auto;
-  overflow: auto;
-  position: relative;
-
-  i {
-    margin-right: $space-smaller;
-  }
-}
-
-.list-group {
-  .list-group-item {
-    background-color: var(--white);
-  }
-}
-
 ::v-deep {
   .contact--profile {
-    padding-bottom: var(--space-slab);
-    border-bottom: 1px solid var(--color-border);
+    @apply pb-3 border-b border-solid border-slate-75 dark:border-slate-700;
   }
   .conversation--actions .multiselect-wrap--small {
     .multiselect {
-      padding-left: var(--space-medium);
-      box-sizing: border-box;
+      @apply box-border pl-6;
     }
     .multiselect__element {
       span {
-        width: 100%;
+        @apply w-full;
       }
     }
   }
 }
-
-.conversation--labels {
-  padding: $space-medium;
-
-  .icon {
-    margin-right: $space-micro;
-    font-size: $font-size-micro;
-    color: #fff;
-  }
-
-  .label {
-    color: #fff;
-    padding: 0.125rem;
-  }
-}
-
-.contact--mute {
-  color: $alert-color;
-  display: block;
-  text-align: left;
-}
-
-.contact--actions {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.contact-info {
-  margin-top: var(--space-two);
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 8ea349f2a..2f69441ef 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-white dark:bg-slate-900">
     <div class="multiselect-wrap--small">
       <contact-details-item
         compact
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 16a41cc94..fc93701ff 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -145,10 +145,10 @@ export default {
 </script>
 <style scoped lang="scss">
 .conversation--attribute {
-  border-bottom: 1px solid var(--color-border-light);
+  @apply border-slate-50 dark:border-slate-700 border-b border-solid;
 
   &:nth-child(2n) {
-    background: var(--s-25);
+    @apply bg-slate-25 dark:bg-slate-800;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index 1e348b746..288408001 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="watchers-wrap">
-    <div class="watchers--collapsed">
-      <div class="content-wrap">
+  <div class="relative bg-white dark:bg-slate-900">
+    <div class="flex justify-between">
+      <div class="flex justify-between w-full mb-1">
         <div>
-          <p v-if="watchersList.length" class="total-watchers message-text">
+          <p v-if="watchersList.length" class="total-watchers m-0 text-sm">
             <spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
-          <p v-else class="text-muted message-text">
+          <p v-else class="text-muted m-0 text-sm">
             {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
           </p>
         </div>
@@ -22,13 +22,16 @@
         />
       </div>
     </div>
-    <div class="actions">
+    <div class="flex justify-between items-center">
       <thumbnail-group
         :more-thumbnails-text="moreThumbnailsText"
         :show-more-thumbnails-count="showMoreThumbs"
         :users-list="thumbnailList"
       />
-      <p v-if="isUserWatching" class="text-muted message-text">
+      <p
+        v-if="isUserWatching"
+        class="text-slate-300 dark:text-slate-300 m-0 text-sm"
+      >
         {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
       </p>
       <woot-button
@@ -50,8 +53,10 @@
       :class="{ 'dropdown-pane--open': showDropDown }"
       class="dropdown-pane"
     >
-      <div class="dropdown__header">
-        <h4 class="text-block-title text-truncate">
+      <div class="flex justify-between items-center mb-1">
+        <h4
+          class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+        >
           {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
         </h4>
         <woot-button
@@ -225,46 +230,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.watchers-wrap {
-  position: relative;
-}
-
-.content-wrap {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: var(--space-smaller);
-}
-
-.watchers--collapsed {
-  display: flex;
-  justify-content: space-between;
-}
-
 .dropdown-pane {
-  box-sizing: border-box;
-  top: var(--space-large);
-  width: 100%;
-}
-.dropdown__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-smaller);
-
-  .text-block-title {
-    margin: 0;
-  }
-}
-
-.actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.message-text {
-  margin: 0;
-  font-size: var(--font-size-small);
+  @apply box-border top-8 w-full;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index f683690d4..82c82656c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="macro button secondary clear ">
-    <span class="text-truncate">{{ macro.name }}</span>
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
+      macro.name
+    }}</span>
     <div class="macros-actions">
       <woot-button
         v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
@@ -86,16 +88,10 @@ export default {
 
 <style scoped lang="scss">
 .macro {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  line-height: var(--space-normal);
+  @apply relative flex items-center justify-between leading-4;
 
   .macros-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+    @apply flex items-center justify-end;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index 15c7ae201..e81d048d1 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -1,11 +1,26 @@
 <template>
-  <div class="macro-preview">
-    <h6 class="text-block-title macro-title">{{ macro.name }}</h6>
-    <div v-for="(action, i) in resolvedMacro" :key="i" class="macro-block">
-      <div v-if="i !== macro.actions.length - 1" class="macro-block-border" />
-      <div class="macro-block-dot" />
-      <p class="macro-action-name">{{ action.actionName }}</p>
-      <p class="macro-action-params">{{ action.actionValue }}</p>
+  <div
+    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+  >
+    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+      {{ macro.name }}
+    </h6>
+    <div
+      v-for="(action, i) in resolvedMacro"
+      :key="i"
+      class="relative pl-4 macro-block"
+    >
+      <div
+        v-if="i !== macro.actions.length - 1"
+        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
+      />
+      <div
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
+      />
+      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+        {{ action.actionName }}
+      </p>
+      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
     </div>
   </div>
 </template>
@@ -68,55 +83,10 @@ export default {
 
 <style lang="scss" scoped>
 .macro-preview {
-  position: absolute;
-  max-height: 22.5rem;
-  min-height: var(--space-jumbo);
-  width: 17rem;
-  border-radius: var(--border-radius-normal);
-  background-color: var(--white);
-  box-shadow: var(--shadow-dropdown-pane);
-  bottom: var(--space-large);
-  right: var(--space-large);
-  overflow-y: auto;
-  padding: var(--space-normal);
-  text-align: left;
-
-  .macro-title {
-    margin-bottom: var(--space-normal);
-  }
-
   .macro-block {
-    position: relative;
-    padding-left: var(--space-normal);
     &:not(:last-child) {
-      padding-bottom: var(--space-small);
+      @apply pb-2;
     }
-
-    .macro-block-border {
-      top: 0.390625rem;
-      position: absolute;
-      bottom: var(--space-minus-smaller);
-      left: 0;
-      width: 1px;
-      background-color: var(--s-75);
-    }
-
-    .macro-block-dot {
-      position: absolute;
-      left: -0.21875rem;
-      height: var(--space-small);
-      width: var(--space-small);
-      border: 2px solid var(--s-100);
-      background-color: var(--white);
-      border-radius: var(--border-radius-full);
-      top: 0.2734375rem;
-    }
-  }
-
-  .macro-action-name {
-    font-size: var(--font-size-mini);
-    color: var(--s-500);
-    margin-bottom: var(--space-smaller);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 66e3a4a25..abfab2f9a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -1,7 +1,10 @@
 <template>
-  <form class="contact--form" @submit.prevent="handleSubmit">
-    <div class="row">
-      <div class="columns">
+  <form
+    class="contact--form w-full pt-6 px-8 pb-8"
+    @submit.prevent="handleSubmit"
+  >
+    <div>
+      <div class="w-full">
         <woot-avatar-uploader
           :label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
           :src="avatarUrl"
@@ -13,8 +16,8 @@
         />
       </div>
     </div>
-    <div class="row">
-      <div class="columns">
+    <div>
+      <div class="w-full">
         <label :class="{ error: $v.name.$error }">
           {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
           <input
@@ -39,7 +42,7 @@
         </label>
       </div>
     </div>
-    <div class="medium-12 columns">
+    <div class="w-full">
       <label :class="{ error: $v.description.$error }">
         {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
         <textarea
@@ -50,8 +53,8 @@
         />
       </label>
     </div>
-    <div class="row">
-      <div class="medium-12 columns">
+    <div>
+      <div class="w-full">
         <label
           :class="{
             error: isPhoneNumberNotValid,
@@ -73,7 +76,7 @@
         </label>
         <div
           v-if="isPhoneNumberNotValid || !phoneNumber"
-          class="callout small warning"
+          class="callout small warning text-sm dark:bg-yellow-200/20 dark:text-yellow-400"
         >
           {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
         </div>
@@ -81,12 +84,12 @@
     </div>
     <woot-input
       v-model.trim="companyName"
-      class="columns"
+      class="w-full"
       :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
       :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
     />
-    <div class="row">
-      <div class="medium-12 columns">
+    <div>
+      <div class="w-full">
         <label>
           {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
         </label>
@@ -108,12 +111,12 @@
     </div>
     <woot-input
       v-model="city"
-      class="columns"
+      class="w-full"
       :label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
       :placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
     />
 
-    <div class="medium-12 columns">
+    <div class="w-full">
       <label>
         Social Profiles
       </label>
@@ -130,8 +133,8 @@
         />
       </div>
     </div>
-    <div class="modal-footer">
-      <div class="medium-12 columns">
+    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="w-full">
         <woot-submit-button
           :loading="inProgress"
           :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
@@ -415,21 +418,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.contact--form {
-  padding: var(--space-normal) var(--space-large) var(--space-large);
-
-  .columns {
-    padding: 0 var(--space-smaller);
-  }
-}
-
 .input-group-label {
-  font-size: var(--font-size-small);
+  @apply text-sm bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600;
 }
 
 ::v-deep {
   .multiselect .multiselect__tags .multiselect__single {
-    padding-left: 0;
+    @apply pl-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 025b0ec3b..ee04d1bb5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="contact--profile">
-    <div class="contact--info">
-      <div class="contact-info--header">
+  <div class="relative items-center p-4 bg-white dark:bg-slate-900">
+    <div class="text-left rtl:text-right">
+      <div class="flex justify-between flex-row">
         <thumbnail
           v-if="showAvatar"
           :src="contact.thumbnail"
@@ -12,14 +12,16 @@
         <woot-button
           v-if="showCloseButton"
           :icon="closeIconName"
-          class="clear secondary close-button--rtl"
+          class="clear secondary rtl:rotate-180"
           @click="onPanelToggle"
         />
       </div>
 
-      <div class="contact--details">
-        <div v-if="showAvatar" class="contact--name-wrap">
-          <h3 class="sub-block-title contact--name">
+      <div class="mt-2 w-full">
+        <div v-if="showAvatar" class="flex items-center mb-2 gap-1">
+          <h3
+            class="text-base text-slate-800 dark:text-slate-100 capitalize whitespace-normal my-0"
+          >
             {{ contact.name }}
           </h3>
           <fluent-icon
@@ -31,6 +33,7 @@
             "
             icon="info"
             size="14"
+            class="mt-0.5"
           />
           <a
             :href="contactProfileLink"
@@ -47,11 +50,11 @@
           </a>
         </div>
 
-        <p v-if="additionalAttributes.description" class="contact--bio">
+        <p v-if="additionalAttributes.description" class="break-words">
           {{ additionalAttributes.description }}
         </p>
         <social-icons :social-profiles="socialProfiles" />
-        <div class="contact--metadata">
+        <div class="mb-3">
           <contact-info-row
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
@@ -90,11 +93,11 @@
           />
         </div>
       </div>
-      <div class="contact-actions">
+      <div class="flex items-center w-full mt-2 gap-2">
         <woot-button
           v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
           title="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          class="new-message"
+          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="chat"
           size="small"
           @click="toggleConversationModal"
@@ -102,7 +105,7 @@
         <woot-button
           v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
           title="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          class="edit-contact"
+          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="edit"
           variant="smooth"
           size="small"
@@ -111,7 +114,7 @@
         <woot-button
           v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
           title="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          class="merge-contact"
+          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="merge"
           variant="smooth"
           size="small"
@@ -123,7 +126,7 @@
           v-if="isAdmin"
           v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
           title="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          class="delete-contact"
+          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="delete"
           variant="smooth"
           size="small"
@@ -308,76 +311,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.contact--profile {
-  position: relative;
-  align-items: flex-start;
-  padding: var(--space-normal);
-}
-
-.contact--details {
-  margin-top: var(--space-small);
-  width: 100%;
-}
-
-.contact--info {
-  text-align: left;
-}
-
-.contact-info--header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-}
-
-.contact--name-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-small);
-}
-
-.contact--name {
-  text-transform: capitalize;
-  white-space: normal;
-  margin: 0 var(--space-smaller) 0 var(--space-smaller);
-
-  a {
-    color: var(--color-body);
-  }
-}
-
-.contact--metadata {
-  margin-bottom: var(--space-slab);
-}
-
-.contact-actions {
-  margin-top: var(--space-small);
-}
-
-.contact-actions {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .new-message,
-  .edit-contact,
-  .merge-contact,
-  .delete-contact {
-    margin-right: var(--space-small);
-  }
-}
-.merge-summary--card {
-  padding: var(--space-normal);
-}
-
-.contact--bio {
-  word-wrap: break-word;
-}
-
-.button--contact-menu {
-  position: absolute;
-  right: var(--space-normal);
-  top: 0;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 4e33bc7fa..d3a2af741 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,9 +1,24 @@
 <template>
-  <div class="contact-info--row">
-    <a v-if="href" :href="href" class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
-      <span v-if="value" class="text-truncate" :title="value">{{ value }}</span>
-      <span v-else class="text-muted">{{
+  <div class="-ml-1">
+    <a
+      v-if="href"
+      :href="href"
+      class="flex items-center mb-2 text-slate-800 dark:text-slate-100 hover:underline"
+    >
+      <emoji-or-icon
+        :icon="icon"
+        :emoji="emoji"
+        icon-size="14"
+        class="mr-2 ml-1 rtl:mr-1 rtl:ml-2"
+      />
+      <span
+        v-if="value"
+        class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        :title="value"
+      >
+        {{ value }}
+      </span>
+      <span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
 
@@ -14,15 +29,28 @@
         size="tiny"
         color-scheme="secondary"
         icon="clipboard"
-        class-names="copy-icon"
+        class-names="copy-button"
         @click="onCopy"
       />
     </a>
 
-    <div v-else class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
-      <span v-if="value" class="text-truncate">{{ value }}</span>
-      <span v-else class="text-muted">{{
+    <div
+      v-else
+      class="flex items-center mb-2 text-slate-800 dark:text-slate-100"
+    >
+      <emoji-or-icon
+        :icon="icon"
+        :emoji="emoji"
+        icon-size="14"
+        class="mr-2 ml-1 rtl:mr-1 rtl:ml-2"
+      />
+      <span
+        v-if="value"
+        class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+      >
+        {{ value }}
+      </span>
+      <span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
     </div>
@@ -69,36 +97,8 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.contact-info--row {
-  margin-left: var(--space-minus-smaller);
-
-  .contact-info--icon {
-    font-size: var(--font-size-default);
-    min-width: var(--space-medium);
-  }
-}
-
-.contact-info--details {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-small);
-  color: var(--color-body);
-
-  .copy-icon {
-    margin-left: var(--space-smaller);
-  }
-
-  &.a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.contact-info--details .icon--emoji,
-.contact-info--details .icon--font {
-  display: inline-block;
-  width: var(--space-medium);
+<style scoped>
+.copy-button {
+  @apply ml-1 rtl:ml-0 rtl:mr-1;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 266f49247..496efe505 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -1,13 +1,13 @@
 <template>
-  <form class="conversation--form" @submit.prevent="onFormSubmit">
+  <form class="conversation--form w-full" @submit.prevent="onFormSubmit">
     <div v-if="showNoInboxAlert" class="callout warning">
       <p>
         {{ $t('NEW_CONVERSATION.NO_INBOX') }}
       </p>
     </div>
     <div v-else>
-      <div class="row gutter-small">
-        <div class="columns">
+      <div class="gap-2 flex flex-row">
+        <div class="w-[50%]">
           <label>
             {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
           </label>
@@ -50,25 +50,29 @@
             </span>
           </label>
         </div>
-        <div class="columns">
+        <div class="w-[50%]">
           <label>
             {{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
-            <div class="contact-input">
+            <div
+              class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
+            >
               <thumbnail
                 :src="contact.thumbnail"
                 size="24px"
                 :username="contact.name"
                 :status="contact.availability_status"
               />
-              <h4 class="text-block-title contact-name">
+              <h4
+                class="m-0 ml-2 mr-2 text-slate-700 dark:text-slate-100 text-sm"
+              >
                 {{ contact.name }}
               </h4>
             </div>
           </label>
         </div>
       </div>
-      <div v-if="isAnEmailInbox" class="row">
-        <div class="columns">
+      <div v-if="isAnEmailInbox" class="w-full">
+        <div class="w-full">
           <label :class="{ error: $v.subject.$error }">
             {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
             <input
@@ -83,9 +87,9 @@
           </label>
         </div>
       </div>
-      <div class="row">
-        <div class="columns">
-          <div class="canned-response">
+      <div class="w-full">
+        <div class="w-full">
+          <div class="relative">
             <canned-response
               v-if="showCannedResponseMenu && hasSlashCommand"
               :search-key="cannedResponseSearchKey"
@@ -126,7 +130,7 @@
             {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
             <textarea
               v-model="message"
-              class="message-input"
+              class="min-h-[5rem]"
               type="text"
               :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
               @input="$v.message.$touch"
@@ -138,7 +142,10 @@
         </div>
       </div>
     </div>
-    <div v-if="!hasWhatsappTemplates" class="modal-footer">
+    <div
+      v-if="!hasWhatsappTemplates"
+      class="flex flex-row justify-end gap-2 py-2 px-0 w-full"
+    >
       <button class="button clear" @click.prevent="onCancel">
         {{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
       </button>
@@ -367,58 +374,30 @@ export default {
 
 <style scoped lang="scss">
 .conversation--form {
-  padding: var(--space-normal) var(--space-large) var(--space-large);
+  @apply pt-4 px-8 pb-8;
 }
 
-.canned-response {
-  position: relative;
-}
+.message-editor {
+  @apply px-3;
 
-.input-group-label {
-  font-size: var(--font-size-small);
-}
-
-.contact-input {
-  display: flex;
-  align-items: center;
-  height: 2.4735rem;
-  background: var(--color-background-light);
-  border: 1px solid var(--color-border);
-  padding: var(--space-smaller) var(--space-small);
-  border-radius: var(--border-radius-small);
-
-  .contact-name {
-    margin: 0;
-    margin-left: var(--space-small);
-    margin-right: var(--space-small);
+  ::v-deep {
+    .ProseMirror-menubar {
+      @apply rounded-tl-[4px];
+    }
   }
 }
 
-.message-input {
-  min-height: 5rem;
-}
-
-.row.gutter-small {
-  gap: var(--space-small);
-}
-
 ::v-deep {
   .mention--box {
-    left: 0;
-    margin: auto;
-    right: 0;
-    top: unset;
-    height: fit-content;
+    @apply left-0 m-auto right-0 top-auto h-fit;
   }
 
   /* TODO: Remove when have standardized a component out of multiselect  */
   .multiselect .multiselect__content .multiselect__option span {
-    display: inline-flex;
-    width: var(--space-medium);
-    color: var(--s-600);
+    @apply inline-flex w-6 text-slate-600 dark:text-slate-400;
   }
   .multiselect .multiselect__content .multiselect__option {
-    padding: var(--space-micro) var(--space-smaller);
+    @apply py-0.5 px-1;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
index 27cca73a4..694496f62 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -1,6 +1,6 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('CREATE_CONTACT.TITLE')"
         :header-content="$t('CREATE_CONTACT.DESC')"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index ddf42fd3b..19a64237f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,6 +1,6 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="
           `${$t('EDIT_CONTACT.TITLE')} - ${contact.name || contact.email}`
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
index f8c3b23a3..a23488503 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
@@ -1,6 +1,6 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('NEW_CONVERSATION.TITLE')"
         :header-content="$t('NEW_CONVERSATION.DESC')"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
index f5f4c9817..dae4f926b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="mx-0 flex flex-wrap">
     <templates-picker
       v-if="!selectedWaTemplate"
       :inbox-id="inboxId"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
index be976b2a6..c568a0aac 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="dropdown-search-wrap">
-    <h4 class="text-block-title">
+  <div class="flex flex-col w-full max-h-[12.5rem]">
+    <h4
+      class="text-sm text-slate-800 dark:text-slate-100 mb-1 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
+    >
       {{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.TITLE') }}
     </h4>
-    <div class="search-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -13,8 +15,10 @@
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.PLACEHOLDER')"
       />
     </div>
-    <div class="list-wrap">
-      <div class="list">
+    <div
+      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto h-32"
+    >
+      <div class="w-full h-full">
         <woot-dropdown-menu>
           <custom-attribute-drop-down-item
             v-for="attribute in filteredAttributes"
@@ -23,11 +27,14 @@
             @click="onAddAttribute(attribute)"
           />
         </woot-dropdown-menu>
-        <div v-if="noResult" class="no-result">
+        <div
+          v-if="noResult"
+          class="w-full justify-center items-center flex mb-2 h-[70%] text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        >
           {{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.NO_RESULT') }}
         </div>
         <woot-button
-          class="add"
+          class="float-right"
           icon="add"
           size="tiny"
           @click="addNewAttribute"
@@ -101,54 +108,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dropdown-search-wrap {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-height: 12.5rem;
-
-  .search-wrap {
-    margin-bottom: var(--space-small);
-    flex: 0 0 auto;
-    max-height: var(--space-large);
-
-    .search-input {
-      margin: 0;
-      width: 100%;
-      border: 1px solid transparent;
-      height: var(--space-large);
-      font-size: var(--font-size-small);
-      padding: var(--space-small);
-      background-color: var(--color-background);
-    }
-
-    input:focus {
-      border: 1px solid var(--w-500);
-    }
-  }
-
-  .list-wrap {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex: 1 1 auto;
-    overflow: auto;
-
-    .list {
-      width: 100%;
-      .add {
-        float: right;
-      }
-    }
-
-    .no-result {
-      display: flex;
-      justify-content: center;
-      color: var(--s-700);
-      padding: var(--space-smaller) var(--space-one);
-      font-weight: var(--font-weight-medium);
-      font-size: var(--font-size-small);
-    }
-  }
+.search-input {
+  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 59f855f0f..f038e3a42 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -97,13 +97,13 @@ export default {
 <style scoped lang="scss">
 .custom-attributes--panel {
   .conversation--attribute {
-    border-bottom: 1px solid var(--color-border-light);
+    @apply border-slate-50 dark:border-slate-700 border-b border-solid;
   }
 
   &.odd {
     .conversation--attribute {
       &:nth-child(2n + 1) {
-        background: var(--s-25);
+        @apply bg-slate-25 dark:bg-slate-800;
       }
     }
   }
@@ -111,7 +111,7 @@ export default {
   &.even {
     .conversation--attribute {
       &:nth-child(2n) {
-        background: var(--s-25);
+        @apply bg-slate-25 dark:bg-slate-800;
       }
     }
   }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 372e6b812..cf5780fb4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -1,12 +1,24 @@
 <template>
-  <div class="search-wrap">
-    <div class="search" :class="{ 'is-active': showSearchBox }">
-      <woot-sidemenu-icon />
-      <router-link :to="searchUrl" class="search--link">
-        <div class="icon">
-          <fluent-icon icon="search" class="search--icon" size="16" />
+  <div class="relative">
+    <div class="flex px-4 pb-1 pt-2.5 border-b border-transparent">
+      <woot-sidemenu-icon
+        size="tiny"
+        class="relative top-0 left-[-6px] rtl:left-0 rtl:right-[-6px]"
+      />
+      <router-link
+        :to="searchUrl"
+        class="search-link flex-1 items-center gap-1 text-left mr-1 rtl:mr-0 rtl:ml-1 h-6 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
+      >
+        <div class="flex">
+          <fluent-icon
+            icon="search"
+            class="search--icon text-slate-800 dark:text-slate-200"
+            size="16"
+          />
         </div>
-        <p class="search--label text-ellipsis">
+        <p
+          class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-200"
+        >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>
       </router-link>
@@ -44,13 +56,6 @@ export default {
     },
   },
 
-  data() {
-    return {
-      searchTerm: '',
-      showSearchBox: false,
-    };
-  },
-
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -61,119 +66,13 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
-.search-wrap {
-  position: relative;
-}
-
-.search {
-  display: flex;
-  padding: 0;
-  border-bottom: 1px solid transparent;
-  padding: var(--space-one) var(--space-normal) var(--space-smaller)
-    var(--space-normal);
-
+.search-link {
   &:hover {
     .search--icon,
     .search--label {
-      color: var(--w-500);
+      @apply hover:text-woot-500 dark:hover:text-woot-500;
     }
   }
 }
-
-.search--link {
-  display: inline-flex;
-  align-items: center;
-  flex: 1;
-  background: var(--s-25);
-  padding: var(--space-smaller);
-  height: var(--space-medium);
-  border-radius: var(--border-radius-normal);
-  margin-right: var(--space-smaller);
-}
-
-.search--label {
-  color: var(--color-body);
-  margin-bottom: 0;
-}
-
-.search--input {
-  align-items: center;
-  border: 0;
-  color: var(--color-body);
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-normal);
-  text-align: left;
-  line-height: var(--font-size-large);
-}
-
-.search--icon {
-  color: var(--s-600);
-  margin: 0 var(--space-smaller);
-}
-
-.icon {
-  display: flex;
-}
-
-input::placeholder {
-  color: var(--color-body);
-  font-size: var(--font-size-small);
-}
-
-.results-wrap {
-  position: absolute;
-  z-index: 9999;
-  box-shadow: var(--shadow-large);
-  background: white;
-  width: 100%;
-  max-height: 70vh;
-  overflow: auto;
-}
-
-.show-results {
-  list-style-type: none;
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-normal);
-}
-
-.result-view {
-  display: flex;
-  justify-content: space-between;
-}
-
-.result {
-  padding: var(--space-smaller) var(--space-smaller) var(--space-smaller)
-    var(--space-normal);
-  color: var(--s-700);
-  font-size: var(--font-size-medium);
-  font-weight: var(--font-weight-bold);
-
-  .message-counter {
-    color: var(--s-500);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-bold);
-  }
-}
-
-.search--activity-message {
-  padding: var(--space-small) var(--space-normal) var(--space-small)
-    var(--space-zero);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  color: var(--s-500);
-}
-
-.search--activity-no-message {
-  display: flex;
-  justify-content: center;
-  padding: var(--space-one) var(--space-zero) var(--space-two) var(--space-zero);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  color: var(--s-500);
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
index 1736cecad..ec49a6d96 100644
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@@ -1,8 +1,8 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onClose">
     <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
-    <form class="row" @submit.prevent="saveCustomViews">
-      <div class="medium-12 columns">
+    <form class="w-full" @submit.prevent="saveCustomViews">
+      <div class="w-full">
         <woot-input
           v-model="name"
           :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
@@ -15,7 +15,7 @@
           @blur="$v.name.$touch"
         />
 
-        <div class="modal-footer">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
           <woot-button :disabled="isButtonDisabled">
             {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
           </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
index afa558735..feeff178a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -4,8 +4,8 @@
       :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
       :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
     />
-    <form class="row" @submit.prevent="onCreate">
-      <div class="medium-12 columns">
+    <form class="w-full" @submit.prevent="onCreate">
+      <div class="w-full">
         <label :class="{ error: $v.selectedLocale.$error }">
           {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
           <select v-model="selectedLocale">
@@ -22,8 +22,8 @@
           </span>
         </label>
 
-        <div class="medium-12 columns">
-          <div class="modal-footer justify-content-end w-full">
+        <div class="w-full">
+          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
             </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index 81a531751..fed7b5a0c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -78,42 +78,21 @@ export default {
 
 <style lang="scss" scoped>
 .edit-article--container {
-  margin: var(--space-large) auto;
-  padding: 0 var(--space-medium);
-  max-width: 56rem;
-  width: 100%;
+  @apply my-8 mx-auto py-0 px-6 max-w-[56rem] w-full;
 }
 
 .article-heading {
-  font-size: var(--font-size-giga);
-  font-weight: var(--font-weight-bold);
-  width: 100%;
-  min-height: var(--space-jumbo);
-  max-height: 40rem;
-  height: auto;
-  margin-bottom: var(--space-small);
-  border: 0px solid transparent;
-  padding: 0;
-  color: var(--s-900);
-  padding: var(--space-normal);
-  resize: none;
-
-  &:hover {
-    background: var(--s-25);
-    border-radius: var(--border-radius-normal);
-  }
+  @apply text-[2.5rem] font-semibold w-full text-slate-900 dark:text-slate-75 p-4 hover:bg-slate-25 dark:hover:bg-slate-800 hover:rounded-md resize-none min-h-[4rem] max-h-[40rem] h-auto mb-2 border-0 border-solid border-transparent dark:border-transparent;
 }
 
 .article-content {
-  padding: 0 var(--space-normal);
-  height: fit-content;
+  @apply py-0 px-4 h-fit;
 }
 
 ::v-deep {
   .ProseMirror-menubar-wrapper {
     .ProseMirror-woot-style {
-      min-height: var(--space-giga);
-      max-height: 100%;
+      @apply min-h-[15rem] max-h-full;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index e6851bb60..c5d14faff 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -4,7 +4,10 @@
       <emoji-or-icon class="icon-grab" icon="grab-handle" />
       <div class="article-block">
         <router-link :to="articleUrl(id)">
-          <h6 :title="title" class="sub-block-title text-truncate">
+          <h6
+            :title="title"
+            class="text-base text-slate-800 dark:text-slate-100 mb-0 leading-6 h-6 hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
+          >
             {{ title }}
           </h6>
         </router-link>
@@ -21,7 +24,7 @@
       >
         <span
           :title="category.name"
-          class="category-link-content text-ellipsis"
+          class="category-link-content overflow-hidden whitespace-nowrap text-ellipsis"
         >
           {{ category.name }}
         </span>
@@ -133,109 +136,71 @@ export default {
 
 <style lang="scss" scoped>
 .article-container--row {
-  background: var(--white);
-  border-bottom: 1px solid var(--s-50);
-  display: grid;
-  gap: var(--space-normal);
-  grid-template-columns: repeat(8, minmax(0, 1fr));
-  margin: 0 var(--space-minus-normal);
-  padding: 0 var(--space-normal);
+  @apply bg-white dark:bg-slate-900 my-0 -mx-4 py-0 px-4 grid grid-cols-8 gap-4 border-b border-slate-50 dark:border-slate-800;
 
   @media (max-width: 1024px) {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
+    @apply grid-cols-7;
   }
 
   @media (max-width: 768px) {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    @apply grid-cols-6;
   }
 
   &.draggable {
     span.article-column.article-title {
-      margin-left: var(--space-minus-small);
+      @apply -ml-2;
 
       .icon-grab {
-        display: block;
-        cursor: move;
-        height: var(--space-normal);
-        margin-top: var(--space-smaller);
-        width: var(--space-normal);
-
-        color: var(--s-100);
+        @apply block cursor-move h-4 mt-1 w-4 text-slate-100 dark:text-slate-700;
 
         &:hover {
-          color: var(--s-300);
+          @apply text-slate-300 dark:text-slate-200;
         }
       }
     }
   }
 
   span.article-column {
-    color: var(--s-700);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-bold);
-    padding: var(--space-small) 0;
-    text-align: right;
-    text-transform: capitalize;
+    @apply text-slate-700 dark:text-slate-100 text-sm font-semibold py-2 px-0 text-right capitalize;
 
     &.article-title {
-      align-items: start;
-      display: flex;
-      gap: var(--space-small);
-      grid-column: span 4 / span 4;
-      text-align: left;
-      text-align: left;
+      @apply items-start flex gap-2 col-span-4 text-left;
 
       .icon-grab {
-        display: none;
+        @apply hidden;
       }
     }
 
     // for screen sizes smaller than 1024px
     @media (max-width: 63.9375em) {
       &.article-read-count {
-        display: none;
+        @apply hidden;
       }
     }
 
     @media (max-width: 47.9375em) {
       &.article-read-count,
       &.article-last-edited {
-        display: none;
+        @apply hidden;
       }
     }
   }
 
   .article-block {
-    min-width: 0;
-  }
-
-  .sub-block-title {
-    margin-bottom: 0;
-    line-height: var(--space-medium);
-    height: var(--space-medium);
-    &:hover {
-      text-decoration: underline;
-    }
+    @apply min-w-0;
   }
 
   .author {
     .by {
-      font-weight: var(--font-weight-normal);
-      color: var(--s-500);
-      font-size: var(--font-size-small);
+      @apply font-normal text-slate-500 dark:text-slate-200 text-sm;
     }
     .name {
-      font-weight: var(--font-weight-medium);
-      color: var(--s-600);
-      font-size: var(--font-size-small);
+      @apply font-normal text-slate-500 dark:text-slate-200 text-sm;
     }
   }
 }
 
 span {
-  font-weight: var(--font-weight-normal);
-  color: var(--s-700);
-  font-size: var(--font-size-mini);
-  padding-left: 0;
+  @apply font-normal text-slate-700 dark:text-slate-100 text-sm pl-0;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue
index 06a1ab241..290ad0419 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="article-item">
     <h4 class="text-block-title margin-bottom-0">{{ title }}</h4>
-    <p class="margin-bottom-0 text-truncate">{{ body }}</p>
+    <p class="margin-bottom-0 overflow-hidden whitespace-nowrap text-ellipsis">
+      {{ body }}
+    </p>
     <div class="footer">
       <p class="text-small meta">
         {{ locale }}
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 399892324..82708886a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -48,6 +48,7 @@
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
+      class="dark:bg-slate-900 border-t-0 pl-0 pr-0"
       @page-change="onPageChange"
     />
   </div>
@@ -140,66 +141,53 @@ export default {
 </script>
 <style lang="scss" scoped>
 .article-container {
-  width: 100%;
+  @apply w-full;
 
   .article-container--header {
-    margin: 0 var(--space-minus-normal);
-    padding: 0 var(--space-normal);
-    display: grid;
-    gap: var(--space-normal);
-    border-bottom: 1px solid var(--s-100);
-    grid-template-columns: repeat(8, minmax(0, 1fr));
+    @apply my-0 -mx-4 py-0 px-4 grid grid-cols-8 gap-4 border-b border-slate-100 dark:border-slate-700;
 
     @media (max-width: 1024px) {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
+      @apply grid-cols-7;
     }
 
     @media (max-width: 768px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
+      @apply grid-cols-6;
     }
 
     &.draggable {
       div.heading-item.heading-title {
-        padding: var(--space-small) var(--space-snug);
+        @apply py-2 px-3.5;
       }
     }
 
     div.heading-item {
-      font-weight: var(--font-weight-bold);
-      text-transform: capitalize;
-      color: var(--s-700);
-      font-size: var(--font-size-small);
-      text-align: right;
-      padding: var(--space-small) 0;
+      @apply font-semibold capitalize text-sm text-right py-2 px-0 text-slate-700 dark:text-slate-100;
 
       &.heading-title {
-        text-align: left;
-        grid-column: span 4 / span 4;
+        @apply text-left col-span-4;
       }
 
       @media (max-width: 1024px) {
         &.heading-read-count {
-          display: none;
+          @apply hidden;
         }
       }
 
       @media (max-width: 768px) {
         &.heading-read-count,
         &.heading-last-edited {
-          display: none;
+          @apply hidden;
         }
       }
     }
   }
 
   .footer {
-    padding: 0;
-    border: 0;
+    @apply p-0 border-0;
   }
 }
 
 .article-ghost-class {
-  opacity: 0.5;
-  background-color: var(--s-50);
+  @apply opacity-50 bg-slate-50 dark:bg-slate-800;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index c6b8011ef..0339eab8e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="header--wrap">
-    <div class="header-left--wrap">
+  <div class="flex items-center justify-between w-full h-16 pt-2">
+    <div class="flex items-center">
       <woot-sidemenu-icon />
-      <div class="header-title">
-        <h3 class="page-title">{{ headerTitle }}</h3>
-        <span class="text-block-title count-view">{{ `(${count})` }}</span>
+      <div class="flex items-center my-0 mx-2">
+        <h3 class="text-2xl text-slate-800 dark:text-slate-100 mb-0">
+          {{ headerTitle }}
+        </h3>
+        <span class="text-sm text-slate-600 dark:text-slate-300 my-0 mx-2">{{
+          `(${count})`
+        }}</span>
       </div>
     </div>
-    <div class="header-right--wrap">
+    <div class="flex items-center gap-1">
       <woot-button
         v-if="shouldShowSettings"
-        class-names="article--buttons"
         icon="filter"
         color-scheme="secondary"
         variant="hollow"
@@ -21,7 +24,6 @@
       </woot-button>
       <woot-button
         v-if="shouldShowSettings"
-        class-names="article--buttons"
         icon="arrow-sort"
         color-scheme="secondary"
         size="small"
@@ -29,7 +31,9 @@
         @click="openDropdown"
       >
         {{ $t('HELP_CENTER.HEADER.SORT') }}
-        <span class="selected-value">
+        <span
+          class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+        >
           {{ selectedValue }}
           <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
         </span>
@@ -76,13 +80,11 @@
         v-if="shouldShowSettings"
         v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
         icon="settings"
-        class-names="article--buttons"
         variant="hollow"
         size="small"
         color-scheme="secondary"
       />
       <woot-button
-        class-names="article--buttons"
         size="small"
         icon="add"
         color-scheme="primary"
@@ -150,48 +152,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header--wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: var(--space-jumbo);
-  padding-top: var(--space-small);
-}
-.header-left--wrap {
-  display: flex;
-  align-items: center;
-
-  .header-title {
-    display: flex;
-    align-items: center;
-    margin: 0 var(--space-small);
-    .page-title {
-      margin-bottom: 0;
-    }
-  }
-}
-.header-right--wrap {
-  display: flex;
-  align-items: center;
-}
-.count-view {
-  margin: 0 var(--space-smaller);
-}
 .dropdown-pane--open {
-  top: var(--space-larger);
-  right: 9.25rem;
-}
-.selected-value {
-  display: inline-flex;
-  margin-left: var(--space-smaller);
-  color: var(--b-900);
-  align-items: center;
+  @apply top-12 right-[9.25rem];
 }
 .dropdown-arrow {
-  margin-left: var(--space-smaller);
-}
-.article--buttons {
-  margin-left: var(--space-smaller);
+  @apply ml-1 rtl:ml-0 rtl:mr-1;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index 72e4e5aee..87f8f2166 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="header--wrap">
-    <div class="header-left--wrap">
+  <div class="flex items-center justify-between w-full h-16 pt-2">
+    <div class="flex items-center">
       <woot-button
         icon="chevron-left"
         variant="clear"
@@ -12,13 +12,16 @@
         {{ backButtonLabel }}
       </woot-button>
     </div>
-    <div class="header-right--wrap">
-      <span v-if="isUpdating || isSaved" class="draft-status">
+    <div class="flex items-center gap-1">
+      <span
+        v-if="isUpdating || isSaved"
+        class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
+      >
         {{ statusText }}
       </span>
 
       <woot-button
-        class-names="article--buttons"
+        class-names="article--buttons relative"
         icon="globe"
         color-scheme="secondary"
         variant="hollow"
@@ -30,7 +33,7 @@
       <!-- Hidden since this is in V2
       <woot-button
         v-if="shouldShowAddLocaleButton"
-        class-names="article--buttons"
+        class-names="article--buttons relative"
         icon="add"
         color-scheme="secondary"
         variant="hollow"
@@ -43,7 +46,7 @@
         v-if="!isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
         icon="pane-open"
-        class-names="article--buttons sidebar-button"
+        class-names="article--buttons relative sidebar-button"
         variant="hollow"
         size="small"
         color-scheme="secondary"
@@ -54,13 +57,13 @@
         v-if="isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
         icon="pane-close"
-        class-names="article--buttons"
+        class-names="article--buttons relative"
         variant="hollow"
         size="small"
         color-scheme="secondary"
         @click="closeSidebar"
       />
-      <div class="article--buttons">
+      <div class="article--buttons relative">
         <div class="button-group">
           <woot-button
             class-names="publish-button"
@@ -231,36 +234,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header--wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: var(--space-jumbo);
-  padding-top: var(--space-small);
-}
-.header-left--wrap {
-  display: flex;
-  align-items: center;
-}
-.header-right--wrap {
-  display: flex;
-  align-items: center;
-}
 .article--buttons {
-  position: relative;
-  margin-left: var(--space-smaller);
   .dropdown-pane {
-    position: absolute;
-    right: 0;
+    @apply absolute right-0;
   }
 }
 .draft-status {
-  margin-right: var(--space-smaller);
-  margin-left: var(--space-normal);
-  color: var(--s-400);
-  align-items: center;
-  font-size: var(--font-size-mini);
   animation: fadeIn 1s;
   @keyframes fadeIn {
     0% {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 18a7df3a6..629e92d83 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -18,7 +18,7 @@
       @open-popover="openPortalPopover"
       @open-modal="onClickOpenAddCategoryModal"
     />
-    <section class="app-content columns">
+    <section class="app-content flex-1 px-0 bg-white dark:bg-slate-900">
       <router-view />
       <command-bar />
       <account-selector
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index 55382c934..fc87f5adb 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -1,12 +1,14 @@
 <template>
   <div>
-    <div class="portal">
+    <div
+      class="bg-white dark:bg-slate-900 rounded-md relative flex mb-3 p-4 border border-solid border-slate-100 dark:border-slate-600"
+    >
       <thumbnail :username="portal.name" variant="square" />
-      <div class="container">
-        <header>
+      <div class="ml-2 rtl:ml-0 rtl:mr-2 flex-grow">
+        <header class="flex items-start justify-between mb-8">
           <div>
-            <div class="title-status--wrap">
-              <h2 class="portal-title block-title">
+            <div class="flex items-center">
+              <h2 class="mb-0 text-lg text-slate-800 dark:text-slate-100">
                 {{ portal.name }}
               </h2>
               <woot-label
@@ -14,10 +16,10 @@
                 :color-scheme="labelColor"
                 size="small"
                 variant="smooth"
-                class="status"
+                class="my-0 mx-2"
               />
             </div>
-            <p class="portal-count">
+            <p class="text-sm mb-0 text-slate-700 dark:text-slate-200">
               {{ articleCount }}
               {{
                 $t(
@@ -26,12 +28,11 @@
               }}
             </p>
           </div>
-          <div>
+          <div class="flex flex-row gap-1">
             <woot-button
               variant="smooth"
               size="small"
               color-scheme="primary"
-              class="header-action-buttons"
               @click="addLocale"
             >
               {{
@@ -42,7 +43,6 @@
               variant="hollow"
               size="small"
               color-scheme="secondary"
-              class="header-action-buttons"
               @click="openSite"
             >
               {{
@@ -58,7 +58,6 @@
               variant="hollow"
               size="small"
               icon="settings"
-              class="header-action-buttons"
               color-scheme="secondary"
               @click="openSettings"
             />
@@ -70,93 +69,98 @@
               color-scheme="alert"
               size="small"
               icon="delete"
-              class="header-action-buttons"
               @click="onClickOpenDeleteModal(portal)"
             />
           </div>
         </header>
-        <div class="portal-locales">
-          <h2 class="locale-title sub-block-title">
+        <div class="mb-12">
+          <h2
+            class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
+          >
             {{
               $t(
                 'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
               )
             }}
           </h2>
-          <div class="configuration-items--wrap">
-            <div class="configuration-items">
-              <div class="configuration-item">
+          <div
+            class="flex justify-between mr-[6.25rem] rtl:mr-0 rtl:ml-[6.25rem] max-w-[80vw]"
+          >
+            <div class="flex flex-col">
+              <div class="flex items-start flex-col mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
                   )
                 }}</label>
-                <span class="text-block-title">
+                <span class="text-sm text-slate-600 dark:text-slate-300">
                   {{ portal.name }}
                 </span>
               </div>
-              <div class="configuration-item">
+              <div class="flex items-start flex-col mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
                   )
                 }}</label>
-                <span class="text-block-title">
+                <span class="text-sm text-slate-600 dark:text-slate-300">
                   {{ portal.custom_domain }}
                 </span>
               </div>
             </div>
-            <div class="configuration-items">
-              <div class="configuration-item">
+            <div class="flex flex-col">
+              <div class="flex items-start flex-col mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
                   )
                 }}</label>
-                <span class="text-block-title">
+                <span class="text-sm text-slate-600 dark:text-slate-300">
                   {{ portal.slug }}
                 </span>
               </div>
-              <div class="configuration-item">
+              <div class="flex items-start flex-col mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
                   )
                 }}</label>
-                <span class="text-block-title">
+                <span class="text-sm text-slate-600 dark:text-slate-300">
                   {{ portal.page_title }}
                 </span>
               </div>
             </div>
-            <div class="configuration-items">
-              <div class="configuration-item">
+            <div class="flex flex-col">
+              <div class="flex items-start flex-col mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
                   )
                 }}</label>
-                <div class="content-theme-wrap">
+                <div class="flex items-center">
                   <div
-                    class="theme-color"
+                    class="w-4 h-4 rounded-md mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-25 dark:border-slate-800"
                     :style="{ background: portal.color }"
                   />
                 </div>
               </div>
-              <div class="configuration-item">
+              <div class="flex items-start flex-col mb-4">
                 <label>{{
                   $t(
                     'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
                   )
                 }}</label>
-                <span class="text-block-title">
+                <span class="text-sm text-slate-600 dark:text-slate-300">
                   {{ portal.header_text }}
                 </span>
               </div>
             </div>
           </div>
         </div>
-        <div class="portal-locales">
-          <h2 class="locale-title sub-block-title">
+        <div class="mb-12">
+          <h2
+            class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
+          >
             {{
               $t(
                 'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
@@ -365,94 +369,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.portal {
-  background-color: var(--white);
-  padding: var(--space-normal);
-  border: 1px solid var(--color-border-dark);
-  border-radius: var(--border-radius-medium);
-  position: relative;
-  display: flex;
-  margin-bottom: var(--space-slab);
-
-  .container {
-    margin-left: var(--space-small);
-    flex-grow: 1;
-
-    header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-bottom: var(--space-large);
-      .title-status--wrap {
-        display: flex;
-        align-items: center;
-        .status {
-          margin: 0 var(--space-small);
-        }
-      }
-      .portal-title {
-        margin-bottom: 0;
-      }
-      .portal-count {
-        font-size: var(--font-size-small);
-        margin-bottom: 0;
-        color: var(--s-700);
-      }
-      .header-action-buttons {
-        margin-left: var(--space-smaller);
-      }
-    }
-    .portal-locales {
-      margin-bottom: var(--space-large);
-      .locale-title {
-        color: var(--s-800);
-        font-weight: var(--font-weight-medium);
-        margin-bottom: var(--space-small);
-      }
-    }
-
-    .portal--heading {
-      margin-bottom: var(--space-normal);
-    }
-  }
-  .portal-settings--icon {
-    padding: var(--space-smaller);
-    margin-left: var(--space-small);
-
-    &:hover {
-      cursor: pointer;
-      background: var(--s-50);
-      border-radius: var(--border-radius-normal);
-    }
-  }
-  .configuration-items--wrap {
-    display: flex;
-    justify-content: space-between;
-    margin-right: var(--space-mega);
-    max-width: 80vw;
-    .configuration-items {
-      display: flex;
-      flex-direction: column;
-    }
-    .configuration-item {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-      margin-bottom: var(--space-normal);
-      .content-theme-wrap {
-        display: flex;
-        align-items: center;
-      }
-      .theme-color {
-        width: var(--space-normal);
-        height: var(--space-normal);
-        border-radius: var(--border-radius-normal);
-        margin-right: var(--space-smaller);
-        border: 1px solid var(--color-border-light);
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index 79ae05778..df1baf39d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -124,26 +124,23 @@ export default {
 <style lang="scss" scoped>
 table {
   thead tr th {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    text-transform: none;
-    color: var(--s-600);
-    padding-left: 0;
-    padding-top: 0;
+    @apply text-sm font-medium normal-case text-slate-600 dark:text-slate-200 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
   }
 
   tbody tr {
-    border-bottom: 0;
+    @apply border-b-0;
     td {
-      font-size: var(--font-size-small);
-      padding-left: 0;
+      @apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0;
       .default-status {
-        margin: 0 0 0 var(--space-smaller);
+        @apply py-0 pr-0 pl-1;
+      }
+      span {
+        @apply text-slate-700 dark:text-slate-200;
       }
     }
   }
 }
 .horizontal-line {
-  border-bottom: 1px solid var(--color-border);
+  @apply border-b border-solid border-slate-75 dark:border-slate-700;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 60e405055..47a1c59b5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -1,8 +1,11 @@
 <template>
-  <div v-on-clickaway="closePortalPopover" class="portal-popover__container">
+  <div
+    v-on-clickaway="closePortalPopover"
+    class="absolute overflow-y-scroll max-h-[96vh] p-4 bg-white dark:bg-slate-800 rounded-md shadow-lg max-w-[30rem] z-[1000]"
+  >
     <header>
-      <div class="actions">
-        <h2 class="block-title text-black-900 dark:text-slate-200">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg text-slate-800 dark:text-slate-100">
           {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
         </h2>
         <div>
@@ -24,7 +27,7 @@
           />
         </div>
       </div>
-      <p class="subtitle">
+      <p class="text-xs text-slate-600 dark:text-slate-300 mt-2">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
       </p>
     </header>
@@ -82,46 +85,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.portal-popover__container {
-  position: absolute;
-  overflow-y: scroll;
-  max-height: 96vh;
-  padding: var(--space-normal);
-  background-color: var(--white);
-  border-radius: var(--border-radius-normal);
-  box-shadow: var(--shadow-large);
-  max-width: 30rem;
-  z-index: var(--z-index-high);
-
-  header {
-    .actions {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--space-normal);
-
-      .new-popover-link {
-        display: flex;
-        align-items: center;
-        padding: var(--space-smaller) var(--space-small);
-        background-color: var(--s-25);
-        font-size: var(--font-size-mini);
-        color: var(--s-500);
-        margin-left: var(--space-small);
-        border-radius: var(--border-radius-normal);
-        span {
-          margin-left: var(--space-small);
-        }
-      }
-
-      .subtitle {
-        font-size: var(--font-size-mini);
-        color: var(--s-600);
-        margin-top: var(--space-small);
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 72709d72f..08eedc828 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <div class="medium-12 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
+    <div class="w-full">
       <h3 class="block-title text-black-900 dark:text-slate-200">
         {{
           $t(
@@ -9,17 +9,19 @@
         }}
       </h3>
     </div>
-    <div class="portal-form">
-      <div class="medium-8 columns">
-        <div class="form-item">
+    <div
+      class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
+    >
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <div class="mb-4">
           <label>
             {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL') }}
           </label>
-          <div class="logo-container">
+          <div class="flex items-center flex-row">
             <thumbnail :username="name" size="56px" variant="square" />
             <woot-button
               v-if="false"
-              class="upload-button"
+              class="ml-3"
               variant="smooth"
               color-scheme="secondary"
               icon="upload"
@@ -28,11 +30,13 @@
               {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.UPLOAD_BUTTON') }}
             </woot-button>
           </div>
-          <p class="logo-help--text">
+          <p
+            class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
+          >
             {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
           </p>
         </div>
-        <div class="form-item">
+        <div class="mb-4">
           <woot-input
             v-model.trim="name"
             :class="{ error: $v.name.$error }"
@@ -44,7 +48,7 @@
             @input="onNameChange"
           />
         </div>
-        <div class="form-item">
+        <div class="mb-4">
           <woot-input
             v-model.trim="slug"
             :class="{ error: $v.slug.$error }"
@@ -55,7 +59,7 @@
             @blur="$v.slug.$touch"
           />
         </div>
-        <div class="form-item">
+        <div class="mb-4">
           <woot-input
             v-model.trim="domain"
             :class="{ error: $v.domain.$error }"
@@ -185,40 +189,15 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wizard-body {
-  padding-top: var(--space-slab);
-  border: 1px solid transparent;
+  @apply pt-3 border border-solid border-transparent dark:border-transparent;
 }
 
-.portal-form {
-  margin: var(--space-normal) 0;
-  border-bottom: 1px solid var(--s-25);
-
-  .form-item {
-    margin-bottom: var(--space-normal);
-
-    .logo-container {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      .upload-button {
-        margin-left: var(--space-slab);
-      }
-    }
-    .logo-help--text {
-      margin-top: var(--space-smaller);
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-      color: var(--s-600);
-      font-style: normal;
-    }
-  }
-}
 ::v-deep {
   input {
-    margin-bottom: var(--space-smaller);
+    @apply mb-1;
   }
   .help-text {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
index 37382e802..47904ebb3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -1,24 +1,28 @@
 <template>
-  <div class="wizard-body height-auto small-9 columns">
-    <div class="medium-12 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
+    <div class="w-full">
       <h3 class="block-title text-black-900 dark:text-slate-200">
         {{
           $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
         }}
       </h3>
     </div>
-    <div class="portal-form">
-      <div class="medium-8 columns">
-        <div class="form-item">
+    <div
+      class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
+    >
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <div class="mb-4">
           <label>
             {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
           </label>
           <woot-color-picker v-model="color" />
-          <p class="color-help--text">
+          <p
+            class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
+          >
             {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
           </p>
         </div>
-        <div class="form-item">
+        <div class="mb-4">
           <woot-input
             v-model.trim="pageTitle"
             :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
@@ -26,7 +30,7 @@
             :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
           />
         </div>
-        <div class="form-item">
+        <div class="mb-4">
           <woot-input
             v-model.trim="headerText"
             :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
@@ -34,7 +38,7 @@
             :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
           />
         </div>
-        <div class="form-item">
+        <div class="mb-4">
           <woot-input
             v-model.trim="homePageLink"
             :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
@@ -147,33 +151,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wizard-body {
-  padding-top: var(--space-slab);
-  border: 1px solid transparent;
+  @apply pt-3 border border-solid border-transparent dark:border-transparent;
 }
-.portal-form {
-  margin: var(--space-normal) 0;
-  border-bottom: 1px solid var(--s-25);
 
-  .form-item {
-    margin-bottom: var(--space-normal);
-    .color-help--text {
-      margin-top: var(--space-smaller);
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-      color: var(--s-600);
-      font-style: normal;
-    }
-  }
-}
 ::v-deep {
   input {
-    margin-bottom: var(--space-smaller);
+    @apply mb-1;
   }
   .help-text {
-    margin-bottom: 0;
+    @apply mb-0;
   }
   .colorpicker--selected {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index a6e24ad19..e6ca8ae7d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -2,10 +2,12 @@
   <div class="portal" :class="{ active }">
     <thumbnail :username="portal.name" variant="square" />
     <div class="actions-container">
-      <header>
+      <header class="flex items-center justify-between mb-2.5">
         <div>
-          <h3 class="sub-block-title portal-title">{{ portal.name }}</h3>
-          <p class="portal-count">
+          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
+            {{ portal.name }}
+          </h3>
+          <p class="text-slate-600 dark:text-slate-200 mb-0 text-xs">
             {{ articlesCount }}
             {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
           </p>
@@ -19,7 +21,7 @@
         />
       </header>
       <div class="portal-locales">
-        <h5 class="locale-title sub-block-title">
+        <h5 class="text-base text-slate-700 dark:text-slate-100">
           {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
         </h5>
         <ul>
@@ -36,21 +38,23 @@
               color-scheme="secondary"
               @click="event => onClick(event, locale.code, portal)"
             >
-              <div class="locale-content">
+              <div class="flex items-center justify-between w-full">
                 <div class="meta">
-                  <h6 class="text-block-title text-left locale-name">
-                    <span>
+                  <h6 class="text-sm text-left mb-0.5">
+                    <span class="text-slate-700 dark:text-slate-100">
                       {{ localeName(locale.code) }}
                     </span>
                     <span
                       v-if="isLocaleDefault(locale.code)"
-                      class="fs-small text-muted"
+                      class="fs-small text-slate-300 dark:text-slate-200"
                     >
                       {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
                     </span>
                   </h6>
 
-                  <span class="locale-meta">
+                  <span
+                    class="flex text-slate-600 dark:text-slate-200 text-sm text-left leading-4 w-full"
+                  >
                     {{ locale.articles_count }}
                     {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
                     {{ locale.code }}
@@ -141,97 +145,31 @@ export default {
 
 <style lang="scss" scoped>
 .portal {
-  background-color: var(--white);
-  padding: var(--space-normal);
-  border: 1px solid var(--color-border-dark);
-  border-radius: var(--border-radius-medium);
-  position: relative;
-  display: flex;
-  margin-bottom: var(--space-normal);
+  @apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
 
   &.active {
-    border: 1px solid var(--w-400);
-    background: var(---25);
+    @apply bg-white dark:bg-slate-800 border border-solid border-woot-400 dark:border-woot-500;
   }
 
   .actions-container {
-    margin-left: var(--space-one);
-    flex-grow: 1;
-
-    header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-bottom: var(--space-one);
-
-      .badge {
-        font-size: var(--font-size-mini);
-        background-color: var(--w-100);
-        color: var(--w-600);
-        padding: var(--space-smaller) var(--space-small);
-      }
-
-      .portal-title {
-        margin-bottom: var(--space-micro);
-      }
-
-      .portal-count {
-        font-size: var(--font-size-mini);
-        margin-bottom: 0;
-        color: var(--s-600);
-      }
-    }
+    @apply ml-2.5 rtl:ml-0 rtl:mr-2.5 flex-grow;
 
     .portal-locales {
-      .locale-name {
-        margin-bottom: var(--space-micro);
-      }
-
-      .locale-content {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-      }
-
       ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
+        @apply list-none p-0 m-0;
       }
 
       .locale__radio {
-        width: var(--space-large);
-        margin-top: var(--space-tiny);
-        color: var(--g-600);
-      }
-
-      .add-locale-wrap {
-        margin-top: var(--spacing-small);
+        @apply w-8 text-green-600 dark:text-green-600;
       }
     }
   }
 
   .locale-item {
-    display: flex;
-    align-items: flex-start;
-    padding: var(--space-smaller) var(--space-normal);
-    border-radius: var(--border-radius-normal);
-    width: 100%;
-    margin-bottom: var(--space-small);
+    @apply flex items-start py-1 px-4 rounded-md w-full mb-2;
 
     p {
-      margin-bottom: 0;
-      text-align: left;
-    }
-
-    .locale-meta {
-      display: flex;
-      color: var(--s-600);
-      font-size: var(--font-size-small);
-      text-align: left;
-      line-height: var(--space-normal);
-      width: 100%;
+      @apply mb-0 text-left;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index d8676f2d3..b84a0c461 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="popover-animation">
     <div class="article-settings--container">
-      <h3 class="block-title text-black-900 dark:text-slate-200">
+      <h3 class="text-base text-slate-800 dark:text-slate-100">
         {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
       </h3>
       <div class="form-wrap">
@@ -225,48 +225,36 @@ export default {
 
 <style lang="scss" scoped>
 .article-settings--container {
-  flex: 0.3;
-  min-width: var(--space-giga);
-  max-width: 22.5rem;
-  overflow-y: auto;
-  border-left: 1px solid var(--color-border-light);
-  margin-left: var(--space-normal);
-  padding-left: var(--space-normal);
-  padding-top: var(--space-small);
-  padding-bottom: var(--space-small);
+  @apply flex-[0.3] min-w-[15rem] max-w-[22.5rem] py-2 pl-4 rtl:pl-0 rtl:pr-4 ml-4 rtl:ml-0 rtl:mr-4 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700;
 
   .form-wrap {
-    margin-top: var(--space-normal);
-    margin-bottom: var(--space-medium);
+    @apply mt-4 mb-6;
 
     textarea {
-      font-size: var(--font-size-small);
+      @apply text-sm;
     }
   }
 
   .action-buttons {
-    display: flex;
-    flex-direction: column;
+    @apply flex flex-col;
   }
 }
 ::v-deep {
   .multiselect {
-    margin-bottom: 0;
+    @apply mb-0;
   }
   .multiselect__content-wrapper {
-    display: none;
+    @apply hidden;
   }
   .multiselect--active .multiselect__tags {
-    border-radius: var(--border-radius-normal);
     padding-right: var(--space-small) !important;
+    @apply rounded-md;
   }
   .multiselect__placeholder {
-    color: var(--s-300);
-    padding-top: var(--space-small);
-    margin-bottom: 0;
+    @apply text-slate-300 dark:text-slate-200 pt-2 mb-0;
   }
   .multiselect__select {
-    display: none;
+    @apply hidden;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
index 62b6312bb..4d0e0c972 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -4,26 +4,26 @@
       :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
       :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
     />
-    <form class="row" @submit.prevent="onCreate">
-      <div class="medium-12 columns">
-        <div class="row article-info">
-          <div class="columns medium-6">
+    <form class="w-full" @submit.prevent="onCreate">
+      <div class="w-full">
+        <div class="flex flex-row w-full mt-0 mx-0 mb-4">
+          <div class="w-[50%]">
             <label>
               <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
-              <p class="value">{{ portalName }}</p>
+              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
             </label>
           </div>
-          <div class="columns medium-6">
+          <div class="w-[50%]">
             <label>
               <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
-              <p class="value">{{ locale }}</p>
+              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
             </label>
           </div>
         </div>
         <woot-input
           v-model.trim="name"
           :class="{ error: $v.name.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :error="nameError"
           :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
@@ -33,7 +33,7 @@
         <woot-input
           v-model.trim="slug"
           :class="{ error: $v.slug.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :error="slugError"
           :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
@@ -51,8 +51,8 @@
             "
           />
         </label>
-        <div class="medium-12 columns">
-          <div class="modal-footer justify-content-end w-full">
+        <div class="w-full">
+          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
             </woot-button>
@@ -174,19 +174,11 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.article-info {
-  width: 100%;
-  margin: 0 0 var(--space-normal);
-  .value {
-    color: var(--s-600);
-  }
-}
-
 .input-container::v-deep {
-  margin: 0 0 var(--space-normal);
+  @apply mt-0 mb-4 mx-0;
 
   input {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
index 42ab924ed..b50f5a3ba 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -64,7 +64,10 @@
         </tr>
       </tbody>
     </table>
-    <p v-if="categories.length === 0" class="empty-text">
+    <p
+      v-if="categories.length === 0"
+      class="flex justify-center text-slate-500 dark:text-slate-300 text-base mt-8"
+    >
       {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
     </p>
   </div>
@@ -93,31 +96,17 @@ export default {
 <style lang="scss" scoped>
 table {
   thead tr th {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    text-transform: none;
-    color: var(--s-600);
-    padding-left: 0;
-    padding-top: 0;
+    @apply text-sm font-medium normal-case text-slate-800 dark:text-slate-100 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
   }
 
   tbody tr {
-    border-bottom: 0;
+    @apply border-b-0;
     td {
-      font-size: var(--font-size-small);
-      padding-left: 0;
+      @apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0 text-slate-700 dark:text-slate-100;
     }
   }
 }
 .horizontal-line {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.empty-text {
-  display: flex;
-  justify-content: center;
-  color: var(--s-500);
-  font-size: var(--font-size-default);
-  margin-top: var(--space-large);
+  @apply border-b border-solid border-slate-75 dark:border-slate-700;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
index 9b1bdacc7..b3a3a4ad5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -4,26 +4,26 @@
       :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
       :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
     />
-    <form class="row" @submit.prevent="onUpdate">
-      <div class="medium-12 columns">
-        <div class="row article-info">
-          <div class="columns medium-6">
+    <form class="w-full" @submit.prevent="onUpdate">
+      <div class="w-full">
+        <div class="flex flex-row w-full mt-0 mx-0 mb-4">
+          <div class="w-[50%]">
             <label>
               <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
-              <p class="value">{{ portalName }}</p>
+              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
             </label>
           </div>
-          <div class="columns medium-6">
+          <div class="w-[50%]">
             <label>
               <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
-              <p class="value">{{ locale }}</p>
+              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
             </label>
           </div>
         </div>
         <woot-input
           v-model.trim="name"
           :class="{ error: $v.name.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :error="nameError"
           :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
@@ -33,7 +33,7 @@
         <woot-input
           v-model.trim="slug"
           :class="{ error: $v.slug.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :error="slugError"
           :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
@@ -51,8 +51,8 @@
             "
           />
         </label>
-        <div class="medium-12 columns">
-          <div class="modal-footer justify-content-end w-full">
+        <div class="w-full">
+          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
             </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index b9f27f996..1e7b40a1f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -25,7 +25,7 @@
         </woot-tabs>
       </setting-intro-banner>
     </div>
-    <div class="row content-box">
+    <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap">
       <router-view />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
index 928249019..639dc61b3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -145,17 +145,12 @@ export default {
 
 <style lang="scss" scoped>
 .portal-locales {
-  padding: var(--space-small) var(--space-normal);
-  width: 100%;
-  background: var(--white);
-  height: 100%;
-  padding: 0 0 0 var(--space-normal);
+  @apply w-full bg-white dark:bg-slate-900 h-full py-0 pr-0 pl-4;
   .button-container {
-    display: flex;
-    justify-content: flex-end;
+    @apply flex justify-end;
   }
   .locale-container {
-    margin-top: var(--space-normal);
+    @apply mt-4;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index 4e4b592c6..1c8b1d644 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="container">
-    <div class="header-wrap">
-      <div class="header-left-wrap">
+  <div class="container py-2 px-4 w-full">
+    <div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
+      <div class="flex items-center">
         <woot-sidemenu-icon />
-        <h1 class="page-title">{{ $t('HELP_CENTER.PORTAL.HEADER') }}</h1>
+        <h1 class="my-0 mx-2 text-2xl text-slate-800 dark:text-slate-100">
+          {{ $t('HELP_CENTER.PORTAL.HEADER') }}
+        </h1>
       </div>
       <woot-button
         color-scheme="primary"
@@ -14,7 +16,7 @@
         {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
       </woot-button>
     </div>
-    <div class="portal-container">
+    <div class="h-[90vh] overflow-y-scroll">
       <portal-list-item
         v-for="portal in portals"
         :key="portal.id"
@@ -23,7 +25,10 @@
         @add-locale="addLocale"
         @open-site="openPortal"
       />
-      <div v-if="isFetching" class="portals--loader">
+      <div
+        v-if="isFetching"
+        class="items-center flex text-base justify-center p-40"
+      >
         <spinner />
         <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
       </div>
@@ -99,36 +104,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.container {
-  padding: var(--space-small) var(--space-normal);
-  width: 100%;
-  .portals--loader {
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size-default);
-    justify-content: center;
-    padding: var(--space-big);
-  }
-  .header-wrap {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 0 var(--space-small) 0;
-    height: var(--space-larger);
-
-    .header-left-wrap {
-      display: flex;
-      align-items: center;
-      .page-title {
-        margin: 0 var(--space-small) 0;
-      }
-    }
-  }
-  .portal-container {
-    height: 90vh;
-    overflow-y: scroll;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
index 3ab8d59a7..15e7d2baf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="flex-1">
     <settings-header
       button-route="new"
       :header-title="portalHeaderText"
@@ -9,9 +9,11 @@
       "
       :show-new-button="false"
     />
-    <div class="row content-box full-height">
+    <div
+      class="flex flex-row overflow-auto py-4 pl-4 rtl:pl-0 rtl:pr-4 h-full bg-slate-50 dark:bg-slate-800"
+    >
       <woot-wizard
-        class="hide-for-small-only medium-3 columns"
+        class="hide-for-small-only w-[25%]"
         :global-config="globalConfig"
         :items="items"
       />
@@ -62,18 +64,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.wrapper {
-  flex: 1;
-}
-.container {
-  display: flex;
-  flex: 1;
-}
-.wizard-box {
-  border-right: 1px solid var(--s-25);
-  ::v-deep .item {
-    background: var(--white);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
index 24fb928e8..0b3ae2775 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="wizard-body height-auto small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
     <empty-state
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
       :message="
         $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
       "
     >
-      <div class="medium-12 columns text-center">
+      <div class="w-full text-center">
         <router-link
           class="button success nice"
           :to="{
@@ -37,7 +37,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wizard-body {
-  padding-top: var(--space-slab);
-  border: 1px solid transparent;
+  @apply pb-3;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index de2656cee..20d5e4600 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -2,24 +2,28 @@
   <div class="modal-mask">
     <div
       v-on-clickaway="closeNotificationPanel"
-      class="notification-wrap flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
+      class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
     >
-      <div class="header-wrap w-full flex justify-between">
-        <div class="header-title--wrap flex">
-          <span class="header-title">
+      <div
+        class="flex-row items-center border-b border-solid pt-5 pb-3 px-6 border-slate-50 dark:border-slate-700 w-full flex justify-between"
+      >
+        <div class="items-center flex">
+          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
             {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
           </span>
-          <span v-if="totalUnreadNotifications" class="total-count block-title">
+          <span
+            v-if="totalUnreadNotifications"
+            class="py-1 px-2 font-semibold text-slate-700 dark:text-slate-200 rounded-md text-xxs ml-2 mr-2 bg-slate-50 dark:bg-slate-700"
+          >
             {{ totalUnreadNotifications }}
           </span>
         </div>
-        <div class="flex">
+        <div class="flex gap-2">
           <woot-button
             v-if="!noUnreadNotificationAvailable"
             color-scheme="primary"
             variant="smooth"
             size="tiny"
-            class-names="action-button"
             :is-loading="uiFlags.isUpdating"
             @click="onMarkAllDoneClick"
           >
@@ -29,7 +33,6 @@
             color-scheme="secondary"
             variant="smooth"
             size="tiny"
-            class-names="action-button"
             icon="settings"
             @click="openAudioNotificationSettings"
           />
@@ -48,13 +51,15 @@
         :on-click-notification="openConversation"
         :in-last-page="inLastPage"
       />
-      <div v-if="records.length !== 0" class="footer-wrap flex justify-between">
+      <div
+        v-if="records.length !== 0"
+        class="items-center py-1 px-5 flex justify-between"
+      >
         <div class="flex">
           <woot-button
             size="medium"
             variant="clear"
             color-scheme="secondary"
-            class-names="page-change--button"
             :is-disabled="inFirstPage"
             @click="onClickFirstPage"
           >
@@ -74,7 +79,9 @@
             @click="onClickPreviousPage"
           />
         </div>
-        <span class="page-count"> {{ currentPage }} - {{ lastPage }} </span>
+        <span class="text-xxs font-semibold text-slate-500 dark:text-slate-400">
+          {{ currentPage }} - {{ lastPage }}
+        </span>
         <div class="flex">
           <woot-button
             color-scheme="secondary"
@@ -88,7 +95,6 @@
             size="medium"
             variant="clear"
             color-scheme="secondary"
-            class-names="page-change--button"
             :disabled="inLastPage"
             @click="onClickLastPage"
           >
@@ -235,56 +241,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.notification-wrap {
-  flex-direction: column;
-  height: 90vh;
-  width: 32.5rem;
-}
-
-.header-wrap {
-  flex-direction: row;
-  align-items: center;
-  border-bottom: 1px solid var(--s-50);
-  padding: var(--space-two) var(--space-medium) var(--space-slab)
-    var(--space-medium);
-
-  .header-title--wrap {
-    align-items: center;
-  }
-
-  .header-title {
-    font-size: var(--font-size-two);
-    font-weight: var(--font-weight-black);
-  }
-
-  .total-count {
-    padding: var(--space-smaller) var(--space-small);
-    background: var(--b-50);
-    border-radius: var(--border-radius-normal);
-    font-size: var(--font-size-micro);
-    font-weight: var(--font-weight-bold);
-    margin-left: var(--space-smaller);
-    margin-right: var(--space-smaller);
-  }
-
-  .action-button {
-    margin-right: var(--space-small);
-  }
-}
-
-.page-count {
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-bold);
-  color: var(--s-500);
-}
-
-.footer-wrap {
-  align-items: center;
-  padding: var(--space-smaller) var(--space-two);
-}
-
-.page-change--button:hover {
-  background: var(--s-50);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index 679fd37b6..7dfc74979 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="notification-list-item--wrap h-full flex-view ">
+  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex ">
     <woot-button
       v-for="notificationItem in notifications"
       v-show="!isLoading"
@@ -9,16 +9,20 @@
       variant="link"
       @click="() => onClickNotification(notificationItem)"
     >
-      <div class="notification-list--wrap flex-view w-full">
+      <div
+        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
+      >
         <div
           v-if="!notificationItem.read_at"
-          class="notification-unread--indicator"
+          class="w-2 h-2 rounded-full bg-woot-500"
         />
-        <div v-else class="empty flex-view" />
-        <div class="notification-content--wrap w-full flex-space-between">
-          <div class="flex-space-between">
-            <div class="title-wrap flex-view ">
-              <span class="notification-title">
+        <div v-else class="w-2 flex" />
+        <div
+          class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
+        >
+          <div class="flex justify-between">
+            <div class="items-center flex ">
+              <span class="font-bold text-slate-800 dark:text-slate-100">
                 {{
                   `#${
                     notificationItem.primary_actor
@@ -27,7 +31,9 @@
                   }`
                 }}
               </span>
-              <span class="notification-type">
+              <span
+                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
+              >
                 {{
                   $t(
                     `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
@@ -44,12 +50,16 @@
               />
             </div>
           </div>
-          <div class="w-full flex-view ">
-            <span class="notification-message text-truncate">
+          <div class="w-full flex ">
+            <span
+              class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+            >
               {{ notificationItem.push_message_title }}
             </span>
           </div>
-          <span class="timestamp flex-view">
+          <span
+            class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
+          >
             {{ dynamicTime(notificationItem.created_at) }}
           </span>
         </div>
@@ -61,15 +71,18 @@
     />
     <woot-button
       v-if="!isLoading && inLastPage"
-      size="medium"
+      size="expanded"
       variant="clear"
       color-scheme="primary"
-      class-names="action-button"
+      class-names="mt-3"
       @click="openNotificationPage"
     >
       {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
     </woot-button>
-    <div v-if="isLoading" class="notifications-loader flex-view">
+    <div
+      v-if="isLoading"
+      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
+    >
       <spinner />
       <span>{{
         $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
@@ -133,90 +146,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.flex-view {
-  display: flex;
-}
-
-.flex-space-between {
-  display: flex;
-  justify-content: space-between;
-}
-
-.notification-list-item--wrap {
-  flex-direction: column;
-  padding: var(--space-small) var(--space-slab);
-  overflow: auto;
-}
-
-.empty {
-  width: var(--space-small);
-}
-
-.notification-list--wrap {
-  flex-direction: row;
-  align-items: center;
-  padding: var(--space-slab);
-  line-height: 1.4;
-  border-bottom: 1px solid var(--b-50);
-}
-
-.notification-list--wrap:hover {
-  background: var(--b-100);
-  border-radius: var(--border-radius-normal);
-}
-
-.notification-content--wrap {
-  flex-direction: column;
-  margin-left: var(--space-slab);
-  overflow: hidden;
-}
-
-.title-wrap {
-  align-items: center;
-}
-
-.notification-title {
-  font-weight: var(--font-weight-black);
-}
-
-.notification-type {
-  font-size: var(--font-size-micro);
-  padding: var(--space-micro) var(--space-smaller);
-  margin: 0 var(--space-small);
-  background: var(--s-50);
-  border-radius: var(--border-radius-normal);
-}
-
-.notification-message {
-  color: var(--color-body);
-  font-weight: var(--font-weight-normal);
-}
-
-.timestamp {
-  margin-top: var(--space-smaller);
-  color: var(--b-500);
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-bold);
-}
-
-.notification-unread--indicator {
-  width: var(--space-small);
-  height: var(--space-small);
-  border-radius: var(--border-radius-rounded);
-  background: var(--color-woot);
-}
-
-.action-button {
-  margin-top: var(--space-slab);
-}
-
-.notifications-loader {
-  align-items: center;
-  justify-content: center;
-  margin: var(--space-larger) var(--space-small);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 63c20b4a8..650a2b942 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="notification--table-wrap">
+  <section class="notification--table-wrap bg-white dark:bg-slate-900">
     <woot-submit-button
       v-if="notificationMetadata.unreadCount"
       class="button nice success button--fixed-top"
@@ -19,7 +19,9 @@
           @click="() => onClickNotification(notificationItem)"
         >
           <td>
-            <div class="flex-view notification-contant--wrap text-truncate">
+            <div
+              class="flex-view notification-contant--wrap overflow-hidden whitespace-nowrap text-ellipsis"
+            >
               <h5 class="notification--title">
                 {{
                   `#${
@@ -29,7 +31,9 @@
                   }`
                 }}
               </h5>
-              <span class="notification--message-title text-truncate">
+              <span
+                class="notification--message-title overflow-hidden whitespace-nowrap text-ellipsis"
+              >
                 {{ notificationItem.push_message_title }}
               </span>
             </div>
@@ -129,86 +133,72 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .notification--title {
-  font-size: var(--font-size-small);
-  margin: 0;
+  @apply text-sm m-0 text-slate-800 dark:text-slate-100;
 }
 
 .notification--table-wrap {
-  @include scroll-on-hover;
-  flex: 1 1;
-  height: 100%;
-  padding: var(--space-large) var(--space-larger);
+  @apply overflow-hidden hover:overflow-y-auto flex-shrink flex-grow h-full py-8 px-12;
 }
 
 .notifications-table {
   > tbody {
     > tr {
-      cursor: pointer;
+      @apply cursor-pointer;
 
       &:hover {
-        background: var(--b-50);
+        @apply bg-slate-50 dark:bg-slate-800;
       }
 
       &.is-active {
-        background: var(--b-100);
+        @apply bg-slate-100 dark:bg-slate-700;
       }
 
       > td {
         &.conversation-count-item {
-          padding-left: var(--space-medium);
+          @apply pl-6 rtl:pl-0 rtl:pr-6;
         }
       }
 
       &:last-child {
-        border-bottom: 0;
+        @apply border-b-0;
       }
     }
   }
 }
 
 .is-unread {
-  font-weight: var(--font-weight-bold);
+  @apply font-semibold;
 }
 
 .notifications--loader {
-  font-size: var(--font-size-default);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-big);
+  @apply text-base flex items-center justify-center p-10;
 }
 
 .notification--unread-indicator {
-  width: var(--space-one);
-  height: var(--space-one);
-  border-radius: 50%;
-  background: var(--color-woot);
+  @apply w-2.5 h-2.5 rounded-full bg-woot-500 dark:bg-woot-500;
 }
 
 .notification--created-at {
-  color: var(--s-700);
-  font-size: var(--font-size-mini);
+  @apply text-slate-700 dark:text-slate-200 text-xs;
 }
 
 .notification--type {
-  font-size: var(--font-size-mini);
+  @apply text-xs;
 }
 
 .thumbnail--column {
-  width: 3.25rem;
+  @apply w-[3.25rem];
 }
 
 .timestamp--column {
-  min-width: 8.125rem;
-  text-align: right;
+  @apply min-w-[9.125rem] text-right;
 }
 
 .notification-contant--wrap {
-  flex-direction: column;
-  max-width: 31.25rem;
+  @apply flex-col max-w-[31.25rem];
 }
 
 .notification--message-title {
-  color: var(--s-700);
+  @apply text-slate-700 dark:text-slate-100;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index aec64b549..496dcaa79 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,17 +1,24 @@
 <template>
   <div
-    class="settings-header bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800"
+    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
   >
-    <h1 class="page-title text-black-900 dark:text-slate-300">
+    <h1
+      class="text-2xl mb-0 flex items-center text-slate-900 dark:text-slate-100"
+    >
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <back-button
         v-if="showBackButton"
         :button-label="backButtonLabel"
         :back-url="backUrl"
       />
-      <fluent-icon v-if="icon" :icon="icon" :class="iconClass" />
+      <fluent-icon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClass"
+        class="mr-2 ml-4 rtl:ml-2 rtl:mr-4"
+      />
       <slot />
-      <span>{{ headerTitle }}</span>
+      <span class="text-slate-900 dark:text-slate-100">{{ headerTitle }}</span>
     </h1>
     <router-link
       v-if="showNewButton && isAdmin"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index e5451873c..4305a6355 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -1,9 +1,12 @@
 <template>
-  <div class="column">
-    <h2 class="page-sub-title">
+  <div class="flex flex-col w-full items-start">
+    <h2 class="text-xl text-slate-800 dark:text-slate-100 break-words">
       {{ headerTitle }}
     </h2>
-    <p v-dompurify-html="headerContent" class="small-12 column" />
+    <p
+      v-dompurify-html="headerContent"
+      class="text-sm w-full text-slate-600 dark:text-slate-300"
+    />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index b87cc5667..63a96c387 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="view-box columns bg-light">
+  <div
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
+  >
     <settings-header
       button-route="new"
       :icon="icon"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index c695dbdac..8dbd95eb7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="columns profile--settings">
+  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
     <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
       <div
-        class="small-12 row profile--settings--row border-b border-slate-25 dark:border-slate-700"
+        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
       >
-        <div class="columns small-3">
+        <div
+          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+        >
           <h4 class="block-title text-black-900 dark:text-slate-200">
             {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
           </h4>
           <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
         </div>
-        <div class="columns small-9 medium-5">
+        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
           <label :class="{ error: $v.name.$error }">
             {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
             <input
@@ -85,9 +87,11 @@
       </div>
 
       <div
-        class="profile--settings--row border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
+        class="p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
       >
-        <div class="columns small-3">
+        <div
+          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+        >
           <h4 class="block-title text-black-900 dark:text-slate-200">
             {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
           </h4>
@@ -95,11 +99,11 @@
             {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
           </p>
         </div>
-        <div class="columns small-9 medium-5">
+        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
           <woot-code :script="getAccountId" />
         </div>
       </div>
-      <div class="current-version">
+      <div class="text-sm text-center p-4">
         <div>{{ `v${globalConfig.appVersion}` }}</div>
         <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
           {{
@@ -281,29 +285,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
-@import '~dashboard/assets/scss/mixins.scss';
-
-.profile--settings {
-  padding: 24px;
-  overflow: auto;
-}
-
-.profile--settings--row {
-  padding: $space-normal;
-  .small-3 {
-    padding: $space-normal $space-medium $space-normal 0;
-  }
-  .small-9 {
-    padding: $space-normal;
-  }
-}
-
-.current-version {
-  font-size: var(--font-size-small);
-  text-align: center;
-  padding: var(--space-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 6953613f7..975abc287 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="column content-box">
-    <div class="row">
-      <div class="small-8 columns with-right-space">
+  <div class="flex-1 overflow-auto p-4">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <woot-loading-state
           v-if="uiFlags.isFetching"
           :message="$t('AGENT_BOTS.LIST.LOADING')"
@@ -23,7 +23,7 @@
         </p>
       </div>
 
-      <div class="small-4 columns content-box">
+      <div class="w-[34%]">
         <p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
index 97e845fa4..1d9d87ed8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -57,14 +57,12 @@ export default {
 <style scoped lang="scss">
 .agent-bot--link {
   align-items: center;
-  color: var(--s-800);
   display: flex;
   font-weight: var(--font-weight-medium);
   word-break: break-word;
 }
 
 .agent-bot--description {
-  color: var(--s-700);
   font-size: var(--font-size-mini);
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
index a4710815a..fe02d4a2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -1,16 +1,22 @@
 <template>
-  <div class="column content-box no-padding">
-    <div class="row">
-      <div class="small-8 columns">
-        <div class="full-height editor-wrapper">
-          <csml-monaco-editor v-model="bot.csmlContent" class="bot-editor" />
-          <div v-if="$v.bot.csmlContent.$error" class="editor-error-message">
+  <div class="h-auto overflow-auto flex flex-col">
+    <div class="flex flex-row">
+      <div class="w-[68%]">
+        <div class="h-[calc(100vh-56px)] relative">
+          <csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
+          <div
+            v-if="$v.bot.csmlContent.$error"
+            class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
+          >
             <span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
           </div>
         </div>
       </div>
-      <div class="small-4 columns content-box full-height">
-        <form class="details-editor" @submit.prevent="onSubmit">
+      <div class="w-[32%] overflow-auto p-4 h-[calc(100vh-56px)]">
+        <form
+          class="flex flex-col justify-between h-full"
+          @submit.prevent="onSubmit"
+        >
           <div>
             <label :class="{ error: $v.bot.name.$error }">
               {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
@@ -84,38 +90,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.no-padding {
-  padding: 0 !important;
-}
-.full-height {
-  height: calc(100vh - 56px);
-}
-
-.bot-editor {
-  width: 100%;
-  height: 100%;
-}
-.details-editor {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-.editor-wrapper {
-  position: relative;
-}
-.editor-error-message {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0.625rem;
-  background-color: #e0bbbb;
-  display: flex;
-  align-items: center;
-  font-size: 0.75rem;
-  justify-content: center;
-  flex-shrink: 0;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
index 049b3ab24..dd9d62965 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -4,7 +4,7 @@
     :agent-bot="agentBot"
     @submit="updateBot"
   />
-  <div v-else class="column content-box no-padding">
+  <div v-else class="h-auto overflow-auto flex flex-col no-padding">
     <spinner />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
index f2940459e..cf2853e30 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -1,13 +1,16 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('AGENT_MGMT.ADD.TITLE')"
         :header-content="$t('AGENT_MGMT.ADD.DESC')"
       />
 
-      <form class="row" @submit.prevent="addAgent()">
-        <div class="medium-12 columns">
+      <form
+        class="flex flex-col w-full items-start"
+        @submit.prevent="addAgent()"
+      >
+        <div class="w-full">
           <label :class="{ error: $v.agentName.$error }">
             {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
             <input
@@ -18,7 +21,7 @@
             />
           </label>
         </div>
-        <div class="medium-12 columns">
+        <div class="w-full">
           <label :class="{ error: $v.agentType.$error }">
             {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
             <select v-model="agentType">
@@ -31,7 +34,7 @@
             </span>
           </label>
         </div>
-        <div class="medium-12 columns">
+        <div class="w-full">
           <label :class="{ error: $v.agentEmail.$error }">
             {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
             <input
@@ -42,8 +45,8 @@
             />
           </label>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="w-full">
             <woot-submit-button
               :disabled="
                 $v.agentEmail.$invalid ||
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index c9f623aca..0e6141ee3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -1,9 +1,9 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="pageTitle" />
-      <form class="row medium-8" @submit.prevent="editAgent()">
-        <div class="medium-12 columns">
+      <form class="w-full" @submit.prevent="editAgent()">
+        <div class="w-full">
           <label :class="{ error: $v.agentName.$error }">
             {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
             <input
@@ -15,7 +15,7 @@
           </label>
         </div>
 
-        <div class="medium-12 columns">
+        <div class="w-full">
           <label :class="{ error: $v.agentType.$error }">
             {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
             <select v-model="agentType">
@@ -29,7 +29,7 @@
           </label>
         </div>
 
-        <div class="medium-12 columns">
+        <div class="w-full">
           <label :class="{ error: $v.agentAvailability.$error }">
             {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
             <select v-model="agentAvailability">
@@ -46,8 +46,8 @@
             </span>
           </label>
         </div>
-        <div class="medium-12 modal-footer">
-          <div class="medium-6 columns">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="w-[50%]">
             <woot-submit-button
               :disabled="
                 $v.agentType.$invalid ||
@@ -61,7 +61,7 @@
               {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
             </button>
           </div>
-          <div class="medium-6 columns text-right">
+          <div class="w-[50%] text-right">
             <woot-button
               icon="lock-closed"
               variant="clear"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 8b8ad4660..6af2f25bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -10,8 +10,8 @@
     </woot-button>
 
     <!-- List Agents -->
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <woot-loading-state
           v-if="uiFlags.isFetching"
           :message="$t('AGENT_MGMT.LOADING')"
@@ -85,7 +85,7 @@
           </table>
         </div>
       </div>
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span
           v-dompurify-html="
             useInstallationName(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index 38750eb5f..eeceaf743 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -1,10 +1,10 @@
 <template>
   <woot-modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
 
-      <form class="row" @submit.prevent="addAttributes">
-        <div class="medium-12 columns">
+      <form class="flex w-full" @submit.prevent="addAttributes">
+        <div class="w-full">
           <label :class="{ error: $v.attributeModel.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
             <select v-model="attributeModel">
@@ -86,7 +86,7 @@
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
             </label>
           </div>
-          <div class="modal-footer">
+          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-submit-button
               :disabled="isButtonDisabled"
               :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 0d3bdb1e0..debe03137 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="row table-wrap">
-    <div class="column">
+  <div class="flex flex-row gap-4 pl-2">
+    <div class="w-[60%]">
       <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
         <woot-tabs-item
           v-for="tab in tabs"
@@ -10,11 +10,8 @@
         />
       </woot-tabs>
 
-      <div class="columns with-right-space">
-        <p
-          v-if="!uiFlags.isFetching && !attributes.length"
-          class="no-items-error-message"
-        >
+      <div class="w-full">
+        <p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
           {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
         </p>
         <woot-loading-state
@@ -23,29 +20,37 @@
         />
         <table
           v-if="!uiFlags.isFetching && attributes.length"
-          class="woot-table"
+          class="w-full mt-2 table-fixed woot-table"
         >
           <thead>
             <th
               v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
               :key="tableHeader"
-              class="item"
+              class="pl-0 max-w-[6.25rem] min-w-[5rem]"
             >
               {{ tableHeader }}
             </th>
           </thead>
           <tbody>
             <tr v-for="attribute in attributes" :key="attribute.attribute_key">
-              <td class="item text-truncate">
+              <td
+                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
                 {{ attribute.attribute_display_name }}
               </td>
-              <td class="item-description text-truncate">
+              <td
+                class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
                 {{ attribute.attribute_description }}
               </td>
-              <td class="item text-truncatee">
+              <td
+                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
                 {{ attribute.attribute_display_type }}
               </td>
-              <td class="item key text-truncate">
+              <td
+                class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
                 {{ attribute.attribute_key }}
               </td>
               <td class="button-wrapper">
@@ -73,7 +78,7 @@
         </table>
       </div>
     </div>
-    <div class="small-4 columns">
+    <div class="w-[34%]">
       <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
     </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
@@ -206,43 +211,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.table-wrap {
-  padding-left: var(--space-small);
-}
-
-.woot-table {
-  width: 100%;
-  margin-top: var(--space-small);
-  table-layout: fixed;
-}
-
-.no-items-error-message {
-  margin-top: var(--space-larger);
-}
-
-.tabs {
-  padding-left: 0;
-  margin-right: var(--space-medium);
-  user-select: none;
-}
-
-.item {
-  padding-left: 0;
-  max-width: 6.25rem;
-  min-width: 5rem;
-}
-
-.item-description {
-  padding-left: 0;
-  max-width: 10rem;
-  min-width: 6.25rem;
-}
-
-.key {
+.attribute-key {
   font-family: monospace;
 }
 
 ::v-deep {
+  .tabs--container {
+    .tabs {
+      @apply p-0;
+    }
+  }
   .tabs-title a {
     font-weight: var(--font-weight-medium);
     padding-top: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index 45ab2cdea..eef76335a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header :header-title="pageTitle" />
-    <form class="row" @submit.prevent="editAttributes">
-      <div class="medium-12 columns">
+    <form class="flex flex-col w-full" @submit.prevent="editAttributes">
+      <div class="w-full">
         <woot-input
           v-model.trim="displayName"
           :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
@@ -71,7 +71,7 @@
           </label>
         </div>
       </div>
-      <div class="modal-footer">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
           {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
         </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 9a96db775..a790d0579 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index bf9753599..f16a9e1bc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box audit-log--settings">
+  <div class="flex-1 overflow-auto p-4 flex justify-between flex-col">
     <!-- List Audit Logs -->
     <div>
       <div>
@@ -16,10 +16,10 @@
 
         <table
           v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table width-100"
+          class="woot-table w-full"
         >
           <colgroup>
-            <col class="column-activity" />
+            <col class="w-[60%]" />
             <col />
             <col />
           </colgroup>
@@ -34,10 +34,10 @@
           </thead>
           <tbody>
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="wrap-break-words">
+              <td class="whitespace-nowrap break-all">
                 {{ generateLogText(auditLogItem) }}
               </td>
-              <td class="wrap-break-words">
+              <td class="whitespace-nowrap break-all">
                 {{
                   messageTimestamp(
                     auditLogItem.created_at,
@@ -45,7 +45,7 @@
                   )
                 }}
               </td>
-              <td class="remote-address">
+              <td class="w-[8.75rem]">
                 {{ auditLogItem.remote_address }}
               </td>
             </tr>
@@ -57,6 +57,7 @@
       :current-page="Number(meta.currentPage)"
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"
+      class="dark:bg-slate-900"
       @page-change="onPageChange"
     />
   </div>
@@ -133,24 +134,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.audit-log--settings {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-
-  .remote-address {
-    width: 8.75rem;
-  }
-
-  .wrap-break-words {
-    word-break: break-all;
-    white-space: normal;
-  }
-
-  .column-activity {
-    width: 60%;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index e0af07c04..67184054a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column">
+  <div>
     <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
-    <div class="row modal-content">
-      <div class="medium-12 columns">
+    <div class="flex flex-col modal-content">
+      <div class="w-full">
         <woot-input
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
@@ -54,7 +54,9 @@
           <label>
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
-          <div class="medium-12 columns filters-wrap">
+          <div
+            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+          >
             <filter-input-box
               v-for="(condition, i) in automation.conditions"
               :key="i"
@@ -75,7 +77,7 @@
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
-            <div class="filter-actions">
+            <div class="mt-4">
               <woot-button
                 icon="add"
                 color-scheme="success"
@@ -94,7 +96,9 @@
           <label>
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
-          <div class="medium-12 columns filters-wrap">
+          <div
+            class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+          >
             <automation-action-input
               v-for="(action, i) in automation.actions"
               :key="i"
@@ -110,7 +114,7 @@
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
             />
-            <div class="filter-actions">
+            <div class="mt-4">
               <woot-button
                 icon="add"
                 color-scheme="success"
@@ -124,8 +128,8 @@
           </div>
         </section>
         <!-- // Actions End -->
-        <div class="medium-12 columns">
-          <div class="modal-footer justify-content-end w-full">
+        <div class="w-full">
+          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
             </woot-button>
@@ -220,26 +224,14 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.filters-wrap {
-  padding: var(--space-normal);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--color-border);
-  background: var(--color-background-light);
-  margin-bottom: var(--space-normal);
-}
-
-.filter-actions {
-  margin-top: var(--space-normal);
-}
 .event_wrapper {
   select {
-    margin: var(--space-zero);
+    @apply m-0;
   }
   .info-message {
-    font-size: var(--font-size-mini);
-    color: var(--s-500);
-    text-align: right;
+    @apply text-xs text-green-500 dark:text-green-500 text-right;
   }
-  margin-bottom: var(--space-medium);
+
+  @apply mb-6;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 7230c6a27..74dac7cf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column">
+  <div>
     <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
-    <div class="row modal-content">
-      <div v-if="automation" class="medium-12 columns">
+    <div class="flex flex-col modal-content">
+      <div v-if="automation" class="w-full">
         <woot-input
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
@@ -51,7 +51,9 @@
           <label>
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
-          <div class="medium-12 columns filters-wrap">
+          <div
+            class="w-full w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+          >
             <filter-input-box
               v-for="(condition, i) in automation.conditions"
               :key="i"
@@ -72,7 +74,7 @@
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
-            <div class="filter-actions">
+            <div class="mt-4">
               <woot-button
                 icon="add"
                 color-scheme="success"
@@ -91,7 +93,9 @@
           <label>
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
-          <div class="medium-12 columns filters-wrap">
+          <div
+            class="w-full w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
+          >
             <automation-action-input
               v-for="(action, i) in automation.actions"
               :key="i"
@@ -104,7 +108,7 @@
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
             />
-            <div class="filter-actions">
+            <div class="mt-4">
               <woot-button
                 icon="add"
                 color-scheme="success"
@@ -118,8 +122,8 @@
           </div>
         </section>
         <!-- // Actions End -->
-        <div class="medium-12 columns">
-          <div class="modal-footer justify-content-end w-full">
+        <div class="w-full">
+          <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-button
               class="button"
               variant="clear"
@@ -198,26 +202,14 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.filters-wrap {
-  padding: var(--space-normal);
-  border-radius: var(--border-radius-large);
-  border: 1px solid var(--color-border);
-  background: var(--color-background-light);
-  margin-bottom: var(--space-normal);
-}
-
-.filter-actions {
-  margin-top: var(--space-normal);
-}
 .event_wrapper {
   select {
-    margin: var(--space-zero);
+    @apply m-0;
   }
   .info-message {
-    font-size: var(--font-size-mini);
-    color: var(--s-500);
-    text-align: right;
+    @apply text-xs text-green-500 dark:text-green-500 text-right;
   }
-  margin-bottom: var(--space-medium);
+
+  @apply mb-6;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index e75689688..5113c85a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -8,8 +8,8 @@
     >
       {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
     </woot-button>
-    <div class="row">
-      <div class="small-8 columns with-right-space">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p
           v-if="!uiFlags.isFetching && !records.length"
           class="no-items-error-message"
@@ -77,7 +77,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
       </div>
     </div>
@@ -277,9 +277,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.automation__status-checkbox {
-  margin: 0;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index a7c330527..7a9b7880b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="columns profile--settings">
+  <div class="overflow-auto flex-1 p-6 dark:bg-slate-900">
     <woot-loading-state v-if="uiFlags.isFetchingItem" />
     <div v-else-if="!hasABillingPlan">
       <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
     </div>
-    <div v-else class="small-12 columns ">
+    <div v-else class="w-full">
       <div class="current-plan--details">
         <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
         <div
@@ -42,7 +42,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import accountMixin from '../../../../mixins/account';
 import BillingItem from './components/BillingItem.vue';
-
+// sdds
 export default {
   components: { BillingItem },
   mixins: [accountMixin, alertMixin, messageFormatterMixin],
@@ -92,25 +92,28 @@ export default {
 
 <style lang="scss">
 .manage-subscription {
-  align-items: center;
-  background: var(--white);
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--space-small);
-  padding: var(--space-medium) var(--space-normal);
+  @apply bg-white dark:bg-slate-800 flex justify-between mb-2 py-6 px-4 items-center rounded-md border border-solid border-slate-75 dark:border-slate-700;
 }
 
 .current-plan--details {
-  border-bottom: 1px solid var(--color-border);
-  margin-bottom: var(--space-normal);
-  padding-bottom: var(--space-normal);
+  @apply border-b border-solid border-slate-75 dark:border-slate-800 mb-4 pb-4;
+
+  h6 {
+    @apply text-slate-800 dark:text-slate-100;
+  }
+
+  p {
+    @apply text-slate-600 dark:text-slate-200;
+  }
 }
 
 .manage-subscription {
   .manage-subscription--description {
-    margin-bottom: 0;
+    @apply mb-0 text-slate-600 dark:text-slate-200;
+  }
+
+  h6 {
+    @apply text-slate-800 dark:text-slate-100;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index 56493f2b2..ca68ea06c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header
       :header-title="$t('CAMPAIGN.ADD.TITLE')"
       :header-content="$t('CAMPAIGN.ADD.DESC')"
     />
-    <form class="row" @submit.prevent="addCampaign">
-      <div class="medium-12 columns">
+    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
+      <div class="w-full">
         <woot-input
           v-model="title"
           :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
@@ -158,7 +158,7 @@
         </label>
       </div>
 
-      <div class="modal-footer">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button :is-loading="uiFlags.isCreating">
           {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
         </woot-button>
@@ -367,4 +367,14 @@ export default {
 ::v-deep .ProseMirror-woot-style {
   height: 5rem;
 }
+
+.message-editor {
+  @apply px-3;
+
+  ::v-deep {
+    .ProseMirror-menubar {
+      @apply rounded-tl-[4px];
+    }
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
index 3a62a6025..90ee2de54 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <campaigns-table
       :campaigns="campaigns"
       :show-empty-result="showEmptyResult"
@@ -101,12 +101,6 @@ export default {
 
 <style scoped lang="scss">
 .button-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  padding-bottom: var(--space-one);
-}
-
-.content-box .page-top-bar::v-deep {
-  padding: var(--space-large) var(--space-large) var(--space-zero);
+  @apply flex justify-end pb-2.5;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index d1d84c5a5..b77efa640 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -7,8 +7,9 @@
       scroll-width="190rem"
       :table-data="tableData"
       :border-around="true"
+      style="max-width: calc(100vw - 18rem)"
     />
-    <div v-if="isLoading" class="campaign--loader">
+    <div v-if="isLoading" class="items-center flex text-base justify-center">
       <spinner />
       <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
     </div>
@@ -108,7 +109,9 @@ export default {
           align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: ({ row }) => (
             <div class="row--title-block">
-              <h6 class="sub-block-title title text-truncate">{row.title}</h6>
+              <h6 class="text-sm m-0 capitalize text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis">
+                {row.title}
+              </h6>
             </div>
           ),
         },
@@ -122,7 +125,7 @@ export default {
           renderBodyCell: ({ row }) => {
             if (row.message) {
               return (
-                <div class="text-truncate">
+                <div class="overflow-hidden whitespace-nowrap text-ellipsis">
                   <span
                     domPropsInnerHTML={this.formatMessage(row.message)}
                   ></span>
@@ -174,7 +177,7 @@ export default {
             title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'),
             align: this.isRTLView ? 'right' : 'left',
             renderBodyCell: ({ row }) => (
-              <div class="text-truncate">
+              <div class="overflow-hidden whitespace-nowrap text-ellipsis">
                 <a
                   target="_blank"
                   rel="noopener noreferrer nofollow"
@@ -199,7 +202,7 @@ export default {
             title: '',
             align: this.isRTLView ? 'right' : 'left',
             renderBodyCell: row => (
-              <div class="button-wrapper">
+              <div class="justify-evenly flex flex-row min-w-[12.5rem]">
                 <WootButton
                   variant="clear"
                   icon="edit"
@@ -251,7 +254,7 @@ export default {
           title: '',
           align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: row => (
-            <div class="button-wrapper">
+            <div class="justify-evenly flex flex-row min-w-[12.5rem]">
               <WootButton
                 variant="link"
                 icon="dismiss-circle"
@@ -272,48 +275,25 @@ export default {
 <style lang="scss" scoped>
 .campaigns-table-wrap::v-deep {
   .ve-table {
-    padding-bottom: var(--space-large);
+    @apply pb-12;
+
     thead.ve-table-header .ve-table-header-tr .ve-table-header-th {
-      font-size: var(--font-size-mini);
-      padding: var(--space-small) var(--space-two);
+      @apply text-xs py-2 px-5;
     }
     tbody.ve-table-body .ve-table-body-tr .ve-table-body-td {
-      padding: var(--space-slab) var(--space-two);
+      @apply py-3 px-5;
 
       .inbox--name {
-        margin: 0;
+        @apply m-0;
       }
     }
   }
 
   .row--title-block {
-    align-items: center;
-    display: flex;
-    text-align: left;
-
-    .title {
-      font-size: var(--font-size-small);
-      margin: 0;
-      text-transform: capitalize;
-    }
+    @apply items-center flex text-left;
   }
   .label {
-    padding: var(--space-smaller) var(--space-small);
+    @apply py-1 px-2;
   }
 }
-
-.campaign--loader {
-  align-items: center;
-  display: flex;
-  font-size: var(--font-size-default);
-  justify-content: center;
-  padding: var(--space-big);
-}
-
-.button-wrapper {
-  justify-content: space-evenly;
-  display: flex;
-  flex-direction: row;
-  min-width: 12.5rem;
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index 952fb4368..c005980ea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header :header-title="pageTitle" />
-    <form class="row" @submit.prevent="editCampaign">
-      <div class="medium-12 columns">
+    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
+      <div class="w-full">
         <woot-input
           v-model="title"
           :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
@@ -97,7 +97,7 @@
           {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
         </label>
       </div>
-      <div class="modal-footer">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button :is-loading="uiFlags.isCreating">
           {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
         </woot-button>
@@ -283,4 +283,14 @@ export default {
 ::v-deep .ProseMirror-woot-style {
   height: 5rem;
 }
+
+.message-editor {
+  @apply px-3;
+
+  ::v-deep {
+    .ProseMirror-menubar {
+      @apply rounded-tl-[4px];
+    }
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index b271e3ab8..aeb8de681 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index 058b74ec6..a374b316a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -1,12 +1,12 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('CANNED_MGMT.ADD.TITLE')"
         :header-content="$t('CANNED_MGMT.ADD.DESC')"
       />
-      <form class="row" @submit.prevent="addCannedResponse()">
-        <div class="medium-12 columns">
+      <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
+        <div class="w-full">
           <label :class="{ error: $v.shortCode.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
             <input
@@ -18,7 +18,7 @@
           </label>
         </div>
 
-        <div class="medium-12 columns">
+        <div class="w-full">
           <label :class="{ error: $v.content.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
           </label>
@@ -34,21 +34,19 @@
             />
           </div>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
-            <woot-submit-button
-              :disabled="
-                $v.content.$invalid ||
-                  $v.shortCode.$invalid ||
-                  addCanned.showLoading
-              "
-              :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
-              :loading="addCanned.showLoading"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <woot-submit-button
+            :disabled="
+              $v.content.$invalid ||
+                $v.shortCode.$invalid ||
+                addCanned.showLoading
+            "
+            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
+            :loading="addCanned.showLoading"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+          </button>
         </div>
       </form>
     </div>
@@ -137,19 +135,15 @@ export default {
 <style scoped lang="scss">
 ::v-deep {
   .ProseMirror-menubar {
-    display: none;
+    @apply hidden;
   }
 
   .ProseMirror-woot-style {
-    min-height: 12.5rem;
+    @apply min-h-[12.5rem];
 
     p {
-      font-size: var(--font-size-default);
+      @apply text-base;
     }
   }
-
-  .message-editor {
-    border: 1px solid var(--s-200);
-  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index 8e08f0f87..a3d04c2bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -1,9 +1,9 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="pageTitle" />
-      <form class="row medium-8" @submit.prevent="editCannedResponse()">
-        <div class="medium-12 columns">
+      <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
+        <div class="w-full">
           <label :class="{ error: $v.shortCode.$error }">
             {{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
             <input
@@ -15,7 +15,7 @@
           </label>
         </div>
 
-        <div class="medium-12 columns">
+        <div class="w-full">
           <label :class="{ error: $v.content.$error }">
             {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
           </label>
@@ -31,21 +31,19 @@
             />
           </div>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
-            <woot-submit-button
-              :disabled="
-                $v.content.$invalid ||
-                  $v.shortCode.$invalid ||
-                  editCanned.showLoading
-              "
-              :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
-              :loading="editCanned.showLoading"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <woot-submit-button
+            :disabled="
+              $v.content.$invalid ||
+                $v.shortCode.$invalid ||
+                editCanned.showLoading
+            "
+            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
+            :loading="editCanned.showLoading"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
+          </button>
         </div>
       </form>
     </div>
@@ -141,19 +139,15 @@ export default {
 <style scoped lang="scss">
 ::v-deep {
   .ProseMirror-menubar {
-    display: none;
+    @apply hidden;
   }
 
   .ProseMirror-woot-style {
-    min-height: 12.5rem;
+    @apply min-h-[12.5rem];
 
     p {
-      font-size: var(--font-size-default);
+      @apply text-base;
     }
   }
-
-  .message-editor {
-    border: 1px solid var(--s-200);
-  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index c4043386b..c9cb7e77d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -10,8 +10,8 @@
     </woot-button>
 
     <!-- List Canned Response -->
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
           class="no-items-error-message"
@@ -42,11 +42,13 @@
               :key="cannedItem.short_code"
             >
               <!-- Short Code  -->
-              <td class="short-code">
+              <td class="w-[8.75rem]">
                 {{ cannedItem.short_code }}
               </td>
               <!-- Content -->
-              <td class="wrap-break-words">{{ cannedItem.content }}</td>
+              <td class="break-all whitespace-normal">
+                {{ cannedItem.content }}
+              </td>
               <!-- Action Buttons -->
               <td class="button-wrapper">
                 <woot-button
@@ -73,7 +75,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
       </div>
     </div>
@@ -207,12 +209,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.short-code {
-  width: 8.75rem;
-}
-.wrap-break-words {
-  word-break: break-all;
-  white-space: normal;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index 93c6e52c2..edcbe0db2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <form class="row" @submit.prevent="addAgents()">
-      <div class="medium-12 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="addAgents()">
+      <div class="w-full">
         <page-header
           :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
           :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
         />
       </div>
-      <div class="medium-7 columns">
-        <div class="medium-12 columns">
+      <div class="w-[60%]">
+        <div class="w-full">
           <label :class="{ error: $v.selectedAgents.$error }">
             {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
             <multiselect
@@ -31,7 +31,7 @@
             </span>
           </label>
         </div>
-        <div class="medium-12 columns">
+        <div class="w-full">
           <woot-submit-button
             :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
             :loading="isCreating"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 4c4f2b905..3eac89782 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wizard-body small-12 medium-9 columns height-auto">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
       :header-content="
@@ -9,7 +9,7 @@
         )
       "
     />
-    <div class="row channel-list">
+    <div class="mt-6 mx-0 flex flex-wrap">
       <channel-item
         v-for="channel in channelList"
         :key="channel.key"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index f302c2aec..2614af477 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -1,30 +1,30 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <empty-state
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
       :message="message"
       :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
     >
-      <div class="medium-12 columns text-center">
-        <div class="website--code">
+      <div class="w-full text-center">
+        <div class="my-4 mx-auto max-w-[70%]">
           <woot-code
             v-if="currentInbox.web_widget_script"
             :script="currentInbox.web_widget_script"
           />
         </div>
-        <div class="medium-6 small-offset-3">
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
             v-if="isATwilioInbox"
             lang="html"
             :script="currentInbox.callback_webhook_url"
           />
         </div>
-        <div v-if="isWhatsAppCloudInbox" class="medium-6 small-offset-3">
-          <p class="config--label">
+        <div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
+          <p class="text-slate-700 dark:text-slate-200 font-medium mt-8">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
           </p>
           <woot-code lang="html" :script="currentInbox.callback_webhook_url" />
-          <p class="config--label">
+          <p class="text-slate-700 dark:text-slate-200 font-medium mt-8">
             {{
               $t(
                 'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
@@ -36,14 +36,14 @@
             :script="currentInbox.provider_config.webhook_verify_token"
           />
         </div>
-        <div class="medium-6 small-offset-3">
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
             v-if="isALineInbox"
             lang="html"
             :script="currentInbox.callback_webhook_url"
           />
         </div>
-        <div class="medium-6 small-offset-3">
+        <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
             v-if="isASmsInbox"
             lang="html"
@@ -52,13 +52,13 @@
         </div>
         <div
           v-if="isAEmailInbox && !currentInbox.provider"
-          class="medium-6 small-offset-3"
+          class="w-[50%] max-w-[50%] ml-[25%]"
         >
           <woot-code lang="html" :script="currentInbox.forward_to_email" />
         </div>
-        <div class="footer">
+        <div class="flex justify-center gap-2 mt-4">
           <router-link
-            class="button hollow primary settings-button"
+            class="button hollow primary"
             :to="{
               name: 'settings_inbox_show',
               params: { inboxId: this.$route.params.inbox_id },
@@ -152,26 +152,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-
-.website--code {
-  margin: $space-normal auto;
-  max-width: 70%;
-}
-
-.footer {
-  display: flex;
-  justify-content: center;
-}
-
-.settings-button {
-  margin-right: var(--space-small);
-}
-
-.config--label {
-  color: var(--b-600);
-  font-weight: var(--font-weight-medium);
-  margin-top: var(--space-large);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index a17faa9cc..e2a4aafdb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="row content-box full-height">
+  <div
+    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+  >
     <woot-wizard
-      class="hide-for-small-only medium-3 columns"
+      class="hide-for-small-only w-[25%]"
       :global-config="globalConfig"
       :items="items"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index a61378e10..2f6dd2ec3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <!-- List Canned Response -->
-    <div class="row">
-      <div class="small-8 columns with-right-space">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p v-if="!inboxesList.length" class="no-items-error-message">
           {{ $t('INBOX_MGMT.LIST.404') }}
           <router-link
@@ -98,7 +98,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span
           v-dompurify-html="
             useInstallationName(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index dc12be429..ee8e66446 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -76,27 +76,25 @@ export default {
 </script>
 <style scoped lang="scss">
 .pre-chat-field {
-  padding: var(--space-normal) var(--space-small);
+  @apply py-4 px-2 text-slate-700 dark:text-slate-100;
 
   svg {
-    display: flex;
-    align-items: center;
+    @apply flex items-center;
   }
 }
 .disabled-text {
-  color: var(--s-500);
+  @apply text-slate-500 dark:text-slate-400;
 }
 
 table {
   thead th {
-    text-transform: none;
+    @apply normal-case;
   }
   input {
-    font-size: var(--font-size-small);
-    margin-bottom: 0;
+    @apply text-sm mb-0;
   }
 }
 checkbox {
-  margin: 0;
+  @apply m-0;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 900d1c1e9..45d78e10a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="settings--content">
-    <div class="pre-chat--title">
+  <div class="my-2 mx-8 text-base">
+    <div class="mt-6 mx-0 mb-3">
       {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
     </div>
-    <form @submit.prevent="updateInbox">
-      <label class="medium-3 columns">
+    <form class="flex flex-col" @submit.prevent="updateInbox">
+      <label class="w-[25%]">
         {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
         <select v-model="preChatFormEnabled">
           <option :value="true">
@@ -16,7 +16,7 @@
         </select>
       </label>
       <div v-if="preChatFormEnabled">
-        <label class="columns medium-8  large-8">
+        <label class="w-[70%]">
           <label>
             {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
           </label>
@@ -28,7 +28,7 @@
             "
           />
         </label>
-        <div class="columns medium-8  large-8 pre-chat-fields">
+        <div class="w-[70%] mt-4">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
           <table class="table table-striped w-full">
             <thead class="thead-dark">
@@ -66,13 +66,14 @@
           </table>
         </div>
       </div>
-      <woot-submit-button
-        class="submit-button"
-        :button-text="
-          $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
-        "
-        :loading="uiFlags.isUpdating"
-      />
+      <div class="my-4 w-auto">
+        <woot-submit-button
+          :button-text="
+            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
+          "
+          :loading="uiFlags.isUpdating"
+        />
+      </div>
     </form>
   </div>
 </template>
@@ -171,17 +172,13 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.settings--content {
-  font-size: var(--font-size-default);
-}
-.pre-chat--title {
-  margin: var(--space-medium) 0 var(--space-slab);
-}
+.message-editor {
+  @apply px-3;
 
-.submit-button {
-  margin-top: var(--space-normal);
-}
-.pre-chat-fields {
-  margin-top: var(--space-normal);
+  ::v-deep {
+    .ProseMirror-menubar {
+      @apply rounded-tl-[4px];
+    }
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index be6792f32..ca1368baf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="settings columns container">
+  <div
+    class="settings bg-white dark:bg-slate-800 flex-grow flex-shrink pr-0 pl-0 overflow-auto min-w-0 w-full"
+  >
     <setting-intro-banner
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
@@ -28,14 +30,14 @@
         <woot-avatar-uploader
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
           :src="avatarUrl"
-          class="settings-item"
+          class="pb-4"
           delete-avatar
           @change="handleImageUpload"
           @onAvatarDelete="handleAvatarDelete"
         />
         <woot-input
           v-model.trim="selectedInboxName"
-          class="medium-9 columns settings-item"
+          class="w-[75%] pb-4"
           :class="{ error: $v.selectedInboxName.$error }"
           :label="inboxNameLabel"
           :placeholder="inboxNamePlaceHolder"
@@ -61,7 +63,7 @@
         <woot-input
           v-if="isAPIInbox"
           v-model.trim="webhookUrl"
-          class="medium-9 columns settings-item"
+          class="w-[75%] pb-4"
           :class="{ error: $v.webhookUrl.$error }"
           :label="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
@@ -79,7 +81,7 @@
         <woot-input
           v-if="isAWebWidgetInbox"
           v-model.trim="channelWebsiteUrl"
-          class="medium-9 columns settings-item"
+          class="w-[75%] pb-4"
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
           :placeholder="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
@@ -88,7 +90,7 @@
         <woot-input
           v-if="isAWebWidgetInbox"
           v-model.trim="channelWelcomeTitle"
-          class="medium-9 columns settings-item"
+          class="w-[75%] pb-4"
           :label="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
           "
@@ -102,7 +104,7 @@
         <woot-input
           v-if="isAWebWidgetInbox"
           v-model.trim="channelWelcomeTagline"
-          class="medium-9 columns settings-item"
+          class="w-[75%] pb-4"
           :label="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
           "
@@ -113,17 +115,17 @@
           "
         />
 
-        <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
+        <label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
           <woot-color-picker v-model="inbox.widget_color" />
         </label>
 
-        <label v-if="isAWhatsAppChannel" class="medium-9 columns settings-item">
+        <label v-if="isAWhatsAppChannel" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
           <input v-model="whatsAppAPIProviderName" type="text" disabled />
         </label>
 
-        <label class="medium-9 columns settings-item">
+        <label class="w-[75%] pb-4">
           {{
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
           }}
@@ -143,7 +145,7 @@
               }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{
               $t(
                 'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
@@ -151,7 +153,7 @@
             }}
           </p>
         </label>
-        <div v-if="greetingEnabled" class="settings-item">
+        <div v-if="greetingEnabled" class="pb-4">
           <greetings-editor
             v-model.trim="greetingMessage"
             :label="
@@ -167,7 +169,7 @@
             :richtext="!textAreaChannels"
           />
         </div>
-        <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
+        <label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
           <select v-model="replyTime">
             <option key="in_a_few_minutes" value="in_a_few_minutes">
@@ -185,12 +187,12 @@
             </option>
           </select>
 
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
           </p>
         </label>
 
-        <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
+        <label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
           <select v-model="emailCollectEnabled">
             <option :value="true">
@@ -200,14 +202,14 @@
               {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{
               $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
             }}
           </p>
         </label>
 
-        <label class="medium-9 columns settings-item">
+        <label class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
           <select v-model="csatSurveyEnabled">
             <option :value="true">
@@ -217,12 +219,12 @@
               {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
           </p>
         </label>
 
-        <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
+        <label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
           <select v-model="allowMessagesAfterResolved">
             <option :value="true">
@@ -232,7 +234,7 @@
               {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{
               $t(
                 'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
@@ -241,7 +243,7 @@
           </p>
         </label>
 
-        <label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
+        <label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
           <select v-model="continuityViaEmail">
             <option :value="true">
@@ -251,7 +253,7 @@
               {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{
               $t(
                 'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
@@ -259,7 +261,7 @@
             }}
           </p>
         </label>
-        <div class="medium-9 settings-item">
+        <div class="w-[75%] pb-4">
           <label>
             {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
           </label>
@@ -271,14 +273,11 @@
               {{ p.name }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
           </p>
         </div>
-        <label
-          v-if="canLocktoSingleConversation"
-          class="medium-9 columns settings-item"
-        >
+        <label v-if="canLocktoSingleConversation" class="w-[75%] pb-4">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
           <select v-model="locktoSingleConversation">
             <option :value="true">
@@ -288,7 +287,7 @@
               {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
             </option>
           </select>
-          <p class="help-text">
+          <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
             {{
               $t(
                 'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
@@ -300,10 +299,7 @@
         <label v-if="isAWebWidgetInbox">
           {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
         </label>
-        <div
-          v-if="isAWebWidgetInbox"
-          class="widget--feature-flag settings-item"
-        >
+        <div v-if="isAWebWidgetInbox" class="pt-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -314,7 +310,7 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="settings-item">
+        <div v-if="isAWebWidgetInbox" class="pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -325,7 +321,7 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="settings-item">
+        <div v-if="isAWebWidgetInbox" class="pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -336,7 +332,7 @@
             {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="settings-item">
+        <div v-if="isAWebWidgetInbox" class="pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -354,13 +350,13 @@
         :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
         :show-border="false"
       >
-        <div class="medium-9 settings-item">
+        <div class="w-[75%] pb-4">
           <sender-name-example-preview
             :sender-name-type="senderNameType"
             :business-name="businessName"
             @update="toggleSenderNameType"
           />
-          <div class="business-section">
+          <div class="flex flex-col items-start gap-2 mt-2">
             <woot-button
               variant="clear"
               color-scheme="primary"
@@ -372,7 +368,7 @@
                 )
               }}
             </woot-button>
-            <div v-if="showBusinessNameInput" class="business-name-input">
+            <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
               <input
                 ref="businessNameInput"
                 v-model="businessName"
@@ -381,6 +377,7 @@
                     'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
                   )
                 "
+                class="mb-0"
                 type="text"
               />
               <woot-button color-scheme="primary" @click="updateInbox">
@@ -773,52 +770,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
-
 .settings {
-  background: $color-white;
-
   .settings--tabs {
     ::v-deep .tabs {
-      padding: 0;
-    }
-  }
-
-  .tabs {
-    padding: 0;
-    margin-bottom: -1px;
-  }
-}
-
-.widget--feature-flag {
-  padding-top: var(--space-small);
-}
-
-.settings-item {
-  padding-bottom: var(--space-normal);
-
-  .help-text {
-    font-style: normal;
-    color: var(--b-500);
-    padding-bottom: var(--space-smaller);
-  }
-}
-
-.business-section {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-small);
-  margin-top: var(--space-small);
-
-  .business-name-input {
-    display: flex;
-    gap: var(--space-small);
-    width: 80%;
-
-    input {
-      margin-bottom: 0;
+      @apply p-0;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 42d3bfb60..c19014c5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -448,7 +448,7 @@ export default {
     min-height: 40.625rem;
     margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
     padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
-    background: var(--s-50);
+    @apply bg-slate-50 dark:bg-slate-700;
 
     @include breakpoint(500px down) {
       background: none;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
index dc90786eb..ded9142db 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -1,6 +1,6 @@
 <template>
-  <form class="row" @submit.prevent="createChannel()">
-    <div class="medium-8 columns">
+  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
@@ -15,7 +15,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
@@ -30,7 +30,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
@@ -47,7 +47,7 @@
       </label>
     </div>
 
-    <div class="medium-12 columns">
+    <div class="w-full">
       <woot-submit-button
         :loading="uiFlags.isCreating"
         :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
index 2bbfcf568..7e271d9bc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
     />
-    <form class="row" @submit.prevent="createChannel()">
-      <div class="medium-8 columns">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -22,7 +22,7 @@
         </label>
       </div>
 
-      <div class="medium-8 columns">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.webhookUrl.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
           <input
@@ -39,7 +39,7 @@
         </p>
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <woot-submit-button
           :loading="uiFlags.isCreating"
           :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
index dd531f951..aecf5d61a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
@@ -1,6 +1,6 @@
 <template>
-  <form class="row" @submit.prevent="createChannel()">
-    <div class="medium-8 columns">
+  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
         <input
@@ -17,7 +17,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
         <input
@@ -34,7 +34,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.accountId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
         <input
@@ -51,7 +51,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.applicationId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
         <input
@@ -68,7 +68,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.apiKey.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
         <input
@@ -83,7 +83,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.apiSecret.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
         <input
@@ -100,7 +100,7 @@
       </label>
     </div>
 
-    <div class="medium-12 columns">
+    <div class="w-full">
       <woot-submit-button
         :loading="uiFlags.isCreating"
         :button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
index 10acca067..a6253e516 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -1,6 +1,6 @@
 <template>
-  <form class="row" @submit.prevent="createChannel()">
-    <div class="medium-8 columns">
+  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
@@ -15,7 +15,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
@@ -30,7 +30,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.phoneNumberId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
@@ -49,7 +49,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.businessAccountId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
@@ -68,7 +68,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
@@ -85,7 +85,7 @@
       </label>
     </div>
 
-    <div class="medium-12 columns">
+    <div class="w-full">
       <woot-submit-button
         :loading="uiFlags.isCreating"
         :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 31eff872e..78ad07f04 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <div v-if="!hasLoginStarted" class="login-init full-height">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
+    <div v-if="!hasLoginStarted" class="login-init h-full">
       <a href="#" @click="startLogin()">
         <img
           src="~dashboard/assets/images/channels/facebook_login.png"
@@ -18,8 +18,12 @@
     </div>
     <div v-else>
       <loading-state v-if="showLoader" :message="emptyStateMessage" />
-      <form v-if="!showLoader" class="row" @submit.prevent="createChannel()">
-        <div class="medium-12 columns">
+      <form
+        v-if="!showLoader"
+        class="mx-0 flex flex-wrap"
+        @submit.prevent="createChannel()"
+      >
+        <div class="w-full">
           <page-header
             :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
             :header-content="
@@ -30,8 +34,8 @@
             "
           />
         </div>
-        <div class="medium-7 columns">
-          <div class="medium-12 columns">
+        <div class="w-[60%]">
+          <div class="w-full">
             <div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
               {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
               <multiselect
@@ -52,7 +56,7 @@
               </span>
             </div>
           </div>
-          <div class="medium-12 columns">
+          <div class="w-full">
             <label :class="{ error: $v.pageName.$error }">
               {{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
               <input
@@ -66,7 +70,7 @@
               </span>
             </label>
           </div>
-          <div class="medium-12 columns text-right">
+          <div class="w-full text-right">
             <input type="submit" value="Create Inbox" class="button" />
           </div>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
index b6d13fcc0..0dccbbce8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
     />
-    <form class="row" @submit.prevent="createChannel()">
-      <div class="medium-8 columns">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -22,7 +22,7 @@
         </label>
       </div>
 
-      <div class="medium-8 columns">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.lineChannelId.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
           <input
@@ -36,7 +36,7 @@
         </label>
       </div>
 
-      <div class="medium-8 columns">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.lineChannelSecret.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
           <input
@@ -50,7 +50,7 @@
         </label>
       </div>
 
-      <div class="medium-8 columns">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.lineChannelToken.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
           <input
@@ -64,7 +64,7 @@
         </label>
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <woot-submit-button
           :loading="uiFlags.isCreating"
           :button-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 514ea1181..5e7c41cc7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label>
         {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
         <select v-model="provider">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
index 710f12f86..78a4855f1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
     />
-    <form class="row" @submit.prevent="createChannel()">
-      <div class="medium-8 columns">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.botToken.$error }">
           {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
           <input
@@ -22,7 +22,7 @@
         </p>
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <woot-submit-button
           :loading="uiFlags.isCreating"
           :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
index 1dfd6dfe0..f41c7d88c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -1,7 +1,7 @@
 <!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
 <template>
-  <form class="row" @submit.prevent="createChannel()">
-    <div class="medium-8 columns">
+  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.channelName.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
         <input
@@ -16,7 +16,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label
         v-if="useMessagingService"
         :class="{ error: $v.messagingServiceSID.$error }"
@@ -36,7 +36,10 @@
       </label>
     </div>
 
-    <div v-if="!useMessagingService" class="medium-8 columns">
+    <div
+      v-if="!useMessagingService"
+      class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
+    >
       <label :class="{ error: $v.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
         <input
@@ -67,7 +70,7 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.accountSID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
         <input
@@ -92,7 +95,7 @@
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
       </label>
     </div>
-    <div v-if="useAPIKey" class="medium-8 columns">
+    <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.apiKeySID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
         <input
@@ -106,7 +109,7 @@
         }}</span>
       </label>
     </div>
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label :class="{ error: $v.authToken.$error }">
         {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
         <input
@@ -123,7 +126,7 @@
       </label>
     </div>
 
-    <div class="medium-12 columns">
+    <div class="w-full">
       <woot-submit-button
         :loading="uiFlags.isCreating"
         :button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
index 50fc32fdb..2eb6727c4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <div class="login-init full-height text-center">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
+    <div class="login-init h-full text-center">
       <form @submit.prevent="requestAuthorization">
         <woot-submit-button
           icon="brand-twitter"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
index 3703cd21e..7fb202616 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wizard-body height-auto small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
@@ -10,10 +10,10 @@
     />
     <form
       v-if="!uiFlags.isCreating"
-      class="row"
+      class="mx-0 flex flex-wrap"
       @submit.prevent="createChannel"
     >
-      <div class="medium-12 columns">
+      <div class="w-full">
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_NAME.LABEL') }}
           <input
@@ -23,7 +23,7 @@
           />
         </label>
       </div>
-      <div class="medium-12 columns">
+      <div class="w-full">
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL') }}
           <input
@@ -36,14 +36,14 @@
         </label>
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
           <woot-color-picker v-model="channelWidgetColor" />
         </label>
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL') }}
           <input
@@ -57,7 +57,7 @@
           />
         </label>
       </div>
-      <div class="medium-12 columns">
+      <div class="w-full">
         <label>
           {{
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
@@ -73,7 +73,7 @@
           />
         </label>
       </div>
-      <label class="medium-12 columns">
+      <label class="w-full">
         {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') }}
         <select v-model="greetingEnabled">
           <option :value="true">
@@ -102,7 +102,7 @@
       <greetings-editor
         v-if="greetingEnabled"
         v-model.trim="greetingMessage"
-        class="medium-12 columns"
+        class="w-full"
         :label="
           $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
         "
@@ -113,8 +113,8 @@
         "
         :richtext="!textAreaChannels"
       />
-      <div class="modal-footer">
-        <div class="medium-12 columns">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <div class="w-full">
           <woot-submit-button
             :loading="uiFlags.isCreating"
             :disabled="!channelWebsiteUrl || !inboxName"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
index d43e3feda..4e89d920f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
     />
-    <div class="medium-8 columns">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
       <label>
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
         <select v-model="provider">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
index 4e0a9c80e..f82c46105 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
     />
-    <form class="row" @submit.prevent="createChannel()">
-      <div class="medium-8 columns">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -22,7 +22,7 @@
         </label>
       </div>
 
-      <div class="medium-8 columns">
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
         <label :class="{ error: $v.email.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
           <input
@@ -37,7 +37,7 @@
         </p>
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <woot-submit-button
           :loading="uiFlags.isCreating"
           :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
index 54b8694e6..68f26ddf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <settings-sub-page-header
       :header-title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
@@ -64,6 +64,6 @@ export default {
 
 <style scoped>
 .microsoft--sign-in-form {
-  margin-top: var(--space-medium);
+  @apply mt-6;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
index fc0d8ed45..1267ce930 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -1,12 +1,16 @@
 <template>
   <div class="settings--content">
     <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
-    <form v-else class="row" @submit.prevent="updateActiveAgentBot">
+    <form
+      v-else
+      class="mx-0 flex flex-wrap"
+      @submit.prevent="updateActiveAgentBot"
+    >
       <settings-section
         :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
         :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
       >
-        <div class="medium-7 columns">
+        <div class="w-[60%]">
           <label>
             <select v-model="selectedAgentBotId">
               <option value="" disabled selected>{{
@@ -120,6 +124,6 @@ export default {
 
 <style scoped lang="scss">
 .button--disconnect {
-  margin-left: var(--space-small);
+  @apply ml-2;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index c40ae3393..f6c2f901c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -203,97 +203,69 @@ export default {
 </script>
 <style lang="scss" scoped>
 .day-wrap::v-deep .multiselect {
-  margin: 0;
-  width: 7.5rem;
+  @apply m-0 w-[7.5rem];
 
   > .multiselect__tags {
-    padding-left: var(--space-slab);
+    @apply pl-3;
 
     .multiselect__single {
-      font-size: var(--font-size-small);
-      line-height: var(--space-medium);
-      padding: var(--space-small) 0;
+      @apply text-sm leading-6 py-2 px-0;
     }
   }
 }
 .day-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-small) 0;
-  min-height: var(--space-larger);
-  box-sizing: content-box;
-  border-bottom: 1px solid var(--color-border-light);
+  @apply flex items-center justify-between py-2 px-0 min-h-[3rem] box-content border-b border-solid border-slate-50 dark:border-slate-600;
 }
+
 .enable-checkbox {
-  margin: 0;
+  @apply m-0;
 }
 
 .hours-select-wrap {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 1;
-  position: relative;
+  @apply flex flex-col flex-shrink-0 flex-grow relative;
 }
 
 .hours-range,
 .day-unavailable {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  flex-grow: 1;
+  @apply flex items-center flex-shrink-0 flex-grow;
 }
 
 .day-unavailable {
-  font-size: var(--font-size-small);
-  color: var(--s-500);
+  @apply text-sm text-slate-500 dark:text-slate-300;
 }
 
 .checkbox-wrap {
-  display: flex;
-  align-items: center;
+  @apply flex items-center;
 }
 
 .separator-icon,
 .day {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-slab);
-  height: 100%;
+  @apply flex items-center py-0 px-3;
 }
 
 .day {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  width: 8.125rem;
+  @apply text-sm font-medium w-[8.125rem];
 }
 
 .label {
-  font-size: var(--font-size-mini);
-  color: var(--w-700);
-  background: var(--w-50);
+  @apply bg-woot-50 dark:bg-woot-600 text-woot-700 dark:text-woot-100 text-xs;
 }
 
 .date-error {
-  padding-top: var(--space-smaller);
+  @apply pt-1;
 }
 
 .error {
-  font-size: var(--font-size-mini);
-  color: var(--r-300);
+  @apply text-xs text-red-300 dark:text-red-500;
 }
 
 .open-all-day {
-  margin-right: var(--space-medium);
+  @apply mr-6;
   span {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    margin-left: var(--space-smaller);
+    @apply text-sm font-medium ml-1;
   }
   input {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
+    @apply text-sm font-medium;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 33d3e4749..713ff68b6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="sender-name--preview-container">
+  <div class="flex flex-row items-center gap-4">
     <button
       v-for="keyOption in senderNameKeyOptions"
       :key="keyOption.key"
-      class="preview-button"
+      class="text-slate-800 dark:text-slate-100 cursor-pointer"
       @click="toggleSenderNameType(keyOption.key)"
     >
       <preview-card
@@ -11,25 +11,30 @@
         :content="keyOption.content"
         :active="keyOption.key === senderNameType"
       >
-        <div class="sender-name--preview-content">
-          <span class="text">
+        <div class="flex flex-col items-start p-3 gap-2">
+          <span class="text-xs">
             {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
           </span>
-          <div class="sender-name--preview">
+          <div class="flex flex-row items-center gap-2">
             <thumbnail :username="userName(keyOption)" size="32px" />
-            <div class="preview-card--content">
-              <div class="sender-name--preview">
-                <span v-if="isKeyOptionFriendly(keyOption.key)" class="name">
+            <div class="flex flex-col items-start gap-1">
+              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
+                <span
+                  v-if="isKeyOptionFriendly(keyOption.key)"
+                  class="text-xs font-semibold leading-tight"
+                >
                   {{ keyOption.preview.senderName }}
                 </span>
-                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text">
+                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
                   {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
                 </span>
-                <span class="name text-truncate">
+                <span
+                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
+                >
                   {{ businessName || keyOption.preview.businessName }}
                 </span>
               </div>
-              <span class="text">{{ keyOption.preview.email }}</span>
+              <span class="text-xs">{{ keyOption.preview.email }}</span>
             </div>
           </div>
         </div>
@@ -106,56 +111,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.sender-name--preview-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-normal);
-
-  .sender-name--preview-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: var(--space-slab);
-    gap: var(--space-small);
-  }
-}
-
-.preview-button {
-  color: var(--s-700);
-
-  .text {
-    font-size: var(--font-size-mini);
-  }
-
-  .sender-name--preview {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-small);
-
-    .preview-card--content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-smaller);
-
-      .sender-name--preview {
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        gap: var(--space-micro);
-        max-width: 18rem;
-
-        .name {
-          font-size: var(--font-size-mini);
-          font-weight: var(--font-weight-bold);
-          line-height: 1.2;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 4dc886cdd..ce65d8b74 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="settings--content">
+  <div class="my-2 mx-8">
     <settings-section
       :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
       :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
@@ -14,15 +14,18 @@
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
         </label>
         <p>{{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}</p>
-        <div v-if="isBusinessHoursEnabled" class="business-hours-wrap">
+        <div v-if="isBusinessHoursEnabled" class="mb-6">
           <label class="unavailable-input-wrap">
             {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
-            <label v-if="isRichEditorEnabled" class="richtext">
+            <label
+              v-if="isRichEditorEnabled"
+              class="py-0 px-4 border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md mx-0 mt-0 mb-4"
+            >
               <woot-message-editor
                 v-model="unavailableMessage"
                 :enable-variables="true"
                 :is-format-mode="true"
-                class="input"
+                class="message-editor"
                 :min-height="4"
               />
             </label>
@@ -188,30 +191,22 @@ export default {
 </script>
 <style lang="scss" scoped>
 .timezone-input-wrap {
-  max-width: 37.5rem;
+  @apply max-w-[37.5rem];
 
   &::v-deep .multiselect {
-    margin-top: var(--space-small);
+    @apply mt-2;
   }
 }
 
+::v-deep.message-editor {
+  @apply border-0;
+}
+
 .unavailable-input-wrap {
-  max-width: 37.5rem;
+  @apply max-w-[37.5rem];
 
   textarea {
-    min-height: var(--space-jumbo);
-    margin-top: var(--space-small);
+    @apply min-h-[4rem] mt-2;
   }
 }
-
-.business-hours-wrap {
-  margin-bottom: var(--space-medium);
-}
-
-.richtext {
-  padding: 0 var(--space-normal);
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  margin: 0 0 var(--space-normal);
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
index e830bd640..45e078131 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -31,7 +31,7 @@
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
     >
-      <label class="medium-9 columns settings-item">
+      <label class="w-[75%] settings-item">
         <div class="enter-to-send--checkbox">
           <input
             id="enableAutoAssignment"
@@ -44,7 +44,7 @@
           </label>
         </div>
 
-        <p class="help-text">
+        <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
         </p>
       </label>
@@ -62,7 +62,7 @@
           @blur="$v.maxAssignmentLimit.$touch"
         />
 
-        <p class="help-text">
+        <p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
           {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
         </p>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue
index 5441742bd..111089ac3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/Index.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="column content-box">
-    <div class="row">
-      <div class="empty-wrapper">
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('INTEGRATION_APPS.FETCHING')"
-        />
+  <div class="flex-shrink flex-grow overflow-auto p-4">
+    <div class="flex flex-col">
+      <div v-if="uiFlags.isFetching" class="my-0 mx-auto">
+        <woot-loading-state :message="$t('INTEGRATION_APPS.FETCHING')" />
       </div>
 
-      <div class="small-12 columns integrations-wrap">
-        <div class="row integrations">
+      <div v-else class="w-full">
+        <div>
           <div
             v-for="item in integrationsList"
             :key="item.id"
-            class="small-12 columns integration"
+            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
           >
             <integration-item
               :integration-id="item.id"
@@ -47,10 +44,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-.empty-wrapper {
-  margin: var(--space-zero) auto;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
index 0b92ed5e0..7d9ef2f6c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row content-box full-height">
+  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
     <woot-button
       v-if="showAddButton"
       color-scheme="success"
@@ -9,7 +9,7 @@
     >
       {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
     </woot-button>
-    <div v-if="showIntegrationHooks" class="integration-hooks">
+    <div v-if="showIntegrationHooks" class="w-full">
       <div v-if="isIntegrationMultiple">
         <multiple-integration-hooks
           :integration="integration"
@@ -148,8 +148,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.integration-hooks {
-  width: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
index 0fea6d17a..573437997 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="row">
-    <div class="integration--image">
-      <img :src="'/dashboard/images/integrations/' + integrationLogo" />
+  <div class="flex">
+    <div class="flex h-[6.25rem] w-[6.25rem]">
+      <img
+        :src="'/dashboard/images/integrations/' + integrationLogo"
+        class="max-w-full p-6"
+      />
     </div>
-    <div class="integration--type column">
-      <h3 class="integration--title">
+    <div class="flex flex-col justify-center m-0 mx-4 flex-1">
+      <h3 class="text-xl text-slate-800 dark:text-slate-100">
         {{ integrationName }}
       </h3>
       <p>
@@ -16,10 +19,10 @@
         }}
       </p>
     </div>
-    <div class="small-2 column button-wrap">
+    <div class="flex justify-center items-center mb-0 w-[15%]">
       <woot-label :title="labelText" :color-scheme="labelColor" />
     </div>
-    <div class="small-2 column button-wrap">
+    <div class="flex justify-center items-center mb-0 w-[15%]">
       <router-link
         :to="
           frontendURL(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
index 7268606fe..4880101a6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="row ">
-    <div class="small-8 columns with-right-space ">
+  <div class="flex flex-row gap-4">
+    <div class="w-[60%]">
       <table v-if="hasConnectedHooks" class="woot-table">
         <thead>
           <th v-for="hookHeader in hookHeaders" :key="hookHeader">
@@ -15,11 +15,11 @@
             <td
               v-for="property in hook.properties"
               :key="property"
-              class="hook-item"
+              class="break-words"
             >
               {{ property }}
             </td>
-            <td v-if="isHookTypeInbox" class="hook-item">
+            <td v-if="isHookTypeInbox" class="break-words">
               {{ inboxName(hook) }}
             </td>
             <td class="button-wrapper">
@@ -44,7 +44,7 @@
         }}
       </p>
     </div>
-    <div class="small-4 columns">
+    <div class="w-[34%]">
       <p>
         <b>{{ integration.name }}</b>
       </p>
@@ -99,8 +99,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.hook-item {
-  word-break: break-word;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue
index acfb17818..ba1204383 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header
       :header-title="integration.name"
       :header-content="integration.description"
@@ -7,6 +7,7 @@
     <formulate-form
       #default="{ hasErrors }"
       v-model="values"
+      class="w-full"
       @submit="submitForm"
     >
       <formulate-input
@@ -24,7 +25,7 @@
         validation="required"
         validation-name="Inbox"
       />
-      <div class="modal-footer">
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button :disabled="hasErrors" :loading="uiFlags.isCreatingHook">
           {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}
         </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue
index 8d263653f..3c4db8a32 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue
@@ -1,20 +1,25 @@
 <template>
-  <div class="column content-box">
-    <div class="small-12 columns integrations-wrap">
-      <div class="small-12 columns integration">
-        <div class="row">
-          <div class="integration--image">
-            <img :src="'/dashboard/images/integrations/' + integration.logo" />
+  <div class="flex-shrink flex-grow overflow-auto p-4">
+    <div class="flex flex-col">
+      <div
+        class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
+      >
+        <div class="flex">
+          <div class="flex h-[6.25rem] w-[6.25rem]">
+            <img
+              :src="'/dashboard/images/integrations/' + integration.logo"
+              class="max-w-full p-6"
+            />
           </div>
-          <div class="integration--type column">
-            <h3 class="integration--title">
+          <div class="flex flex-col justify-center m-0 mx-4 flex-1">
+            <h3 class="text-xl text-slate-800 dark:text-slate-100">
               {{ integration.name }}
             </h3>
             <p>
               {{ integration.description }}
             </p>
           </div>
-          <div class="small-2 column button-wrap">
+          <div class="flex justify-center items-center mb-0 w-[15%]">
             <div v-if="hasConnectedHooks">
               <div @click="$emit('delete', integration.hooks[0])">
                 <woot-button class="nice alert">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
index 00e99edb8..82952ce29 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
@@ -1,13 +1,13 @@
 <template>
   <woot-modal :show="show" :on-close="closeModal">
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="header" />
 
-      <form class="row" @submit.prevent="submit">
+      <form class="mx-0 flex flex-wrap" @submit.prevent="submit">
         <woot-input
           v-model.trim="app.title"
           :class="{ error: $v.app.title.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
           :placeholder="
             $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
@@ -23,7 +23,7 @@
         <woot-input
           v-model.trim="app.content.url"
           :class="{ error: $v.app.content.url.$error }"
-          class="medium-12 columns app--url_input"
+          class="w-full"
           :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
           :placeholder="
             $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
@@ -36,19 +36,17 @@
           data-testid="app-url"
           @input="$v.app.content.url.$touch"
         />
-        <div class="modal-footer">
-          <div class="medium-12 columns">
-            <woot-button
-              :is-loading="isLoading"
-              :is-disabled="$v.$invalid"
-              data-testid="label-submit"
-            >
-              {{ submitButtonLabel }}
-            </woot-button>
-            <woot-button class="button clear" @click.prevent="closeModal">
-              {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
-            </woot-button>
-          </div>
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <woot-button
+            :is-loading="isLoading"
+            :is-disabled="$v.$invalid"
+            data-testid="label-submit"
+          >
+            {{ submitButtonLabel }}
+          </woot-button>
+          <woot-button class="button clear" @click.prevent="closeModal">
+            {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.CREATE.FORM_CANCEL') }}
+          </woot-button>
         </div>
       </form>
     </div>
@@ -157,18 +155,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.content-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  .app--url_input {
-    flex: 1;
-  }
-  .app--url_add_btn {
-    margin-left: var(--space-one);
-    margin-top: var(--space-one);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
index 3ff783771..eb20380c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -4,7 +4,7 @@
       {{ app.title }}
     </td>
     <td class="dashboard-app-label-url">
-      <span class="text-truncate">
+      <span class="overflow-hidden whitespace-nowrap text-ellipsis">
         {{ app.content[0].url }}
       </span>
     </td>
@@ -52,16 +52,12 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-app-label-url {
-  position: relative;
-  width: 50%;
+  @apply relative w-full;
   &:before {
-    content: '&nbsp;';
-    visibility: hidden;
+    @apply invisible content-['&nbsp'];
   }
   span {
-    position: absolute;
-    left: 0;
-    right: 0;
+    @apply absolute left-0 right-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index b017d8040..470f6a6d7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row content-box full-height">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -8,8 +8,8 @@
     >
       {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT') }}
     </woot-button>
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p
           v-if="!uiFlags.isFetching && !records.length"
           class="no-items-error-message"
@@ -44,7 +44,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span
           v-dompurify-html="
             useInstallationName(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index c7452067e..82c174f2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="column content-box">
-    <div class="row">
-      <div class="small-12 columns integrations-wrap">
-        <div class="row integrations">
+  <div class="flex-shrink flex-grow overflow-auto p-4">
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <div>
           <div
             v-for="item in integrationsList"
             :key="item.id"
-            class="small-12 columns integration"
+            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
           >
             <integration
               :integration-id="item.id"
@@ -17,7 +17,9 @@
               :integration-action="item.action"
             />
           </div>
-          <div class="small-12 columns integration">
+          <div
+            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
+          >
             <integration
               integration-id="dashboard-apps"
               integration-logo="dashboard-apps.svg"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index d3885bac0..688c19904 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="row">
-    <div class="integration--image">
-      <img :src="'/dashboard/images/integrations/' + integrationLogo" />
+  <div class="flex">
+    <div class="flex h-[6.25rem] w-[6.25rem]">
+      <img
+        :src="'/dashboard/images/integrations/' + integrationLogo"
+        class="max-w-full p-6"
+      />
     </div>
-    <div class="integration--type column">
-      <h3 class="integration--title">
+    <div class="flex flex-col justify-center m-0 mx-4 flex-1">
+      <h3 class="text-xl text-slate-800 dark:text-slate-100">
         {{ integrationName }}
       </h3>
       <p>
@@ -16,7 +19,7 @@
         }}
       </p>
     </div>
-    <div class="small-2 column button-wrap">
+    <div class="flex justify-center items-center mb-0 w-[15%]">
       <router-link
         :to="
           frontendURL(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
index c7b8537e0..21b13ca58 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
@@ -1,14 +1 @@
-<template>
-  <div class="row">
-    <div class="column">
-      <div>
-        <h5>{{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}</h5>
-        <p>
-          <span
-            v-dompurify-html="$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY')"
-          />
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
+<!-- to be removed non using component -->
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
index 5d8a925bb..ecd46620b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -1,9 +1,12 @@
 <template>
-  <div class="column content-box">
-    <div class="row">
-      <div class="small-12 columns integrations-wrap">
-        <div class="row integrations">
-          <div v-if="integrationLoaded" class="small-12 columns integration">
+  <div class="flex-shrink flex-grow overflow-auto p-4">
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <div>
+          <div
+            v-if="integrationLoaded"
+            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
+          >
             <integration
               :integration-id="integration.id"
               :integration-logo="integration.logo"
@@ -13,7 +16,10 @@
               :integration-action="integrationAction()"
             />
           </div>
-          <div v-if="integration.enabled" class="small-12 columns integration">
+          <div
+            v-if="integration.enabled"
+            class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
+          >
             <IntegrationHelpText />
           </div>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
index 624a41d05..b822b2205 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header
       :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.TITLE')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index 930e0e079..2d4de19a2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row content-box full-height">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -9,8 +9,8 @@
       {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
     </woot-button>
 
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
           class="no-items-error-message"
@@ -49,7 +49,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span
           v-dompurify-html="
             useInstallationName(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
index 7c90241c4..6fd7ec81b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header
       :header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
       :header-content="
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
index 1bb111d84..48a1b39fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <form class="row" @submit.prevent="onSubmit">
-    <div class="medium-12 columns">
+  <form class="flex flex-col w-full" @submit.prevent="onSubmit">
+    <div class="w-full">
       <label :class="{ error: $v.url.$error }">
         {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
         <input
@@ -14,7 +14,7 @@
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
         </span>
       </label>
-      <label :class="{ error: $v.url.$error }" class="margin-bottom-small">
+      <label :class="{ error: $v.url.$error }" class="mb-2">
         {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
       </label>
       <div v-for="event in supportedWebhookEvents" :key="event">
@@ -24,16 +24,16 @@
           type="checkbox"
           :value="event"
           name="subscriptions"
-          class="margin-right-1"
+          class="checkbox"
         />
-        <span class="fs-small">
+        <span class="text-sm">
           {{ `${getEventLabel(event)} (${event})` }}
         </span>
       </div>
     </div>
 
-    <div class="modal-footer">
-      <div class="medium-12 columns">
+    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="w-full">
         <woot-button
           :disabled="$v.$invalid || isSubmitting"
           :is-loading="isSubmitting"
@@ -119,3 +119,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.checkbox {
+  @apply mr-2;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index 5c4640ca2..0301de30f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -1,15 +1,17 @@
 <template>
   <tr>
     <td>
-      <div class="webhook--link">{{ webhook.url }}</div>
-      <span class="webhook--subscribed-events">
-        <span class="webhook--subscribed-label">
+      <div class="text-slate-700 dark:text-slate-100 font-medium break-words">
+        {{ webhook.url }}
+      </div>
+      <span class="text-slate-500 dark:text-slate-400 text-xs">
+        <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
         <show-more :text="subscribedEvents" :limit="60" />
       </span>
     </td>
-    <td class="button-wrapper">
+    <td class="max-w-[6.25rem] min-w-[auto] flex gap-3">
       <woot-button
         v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
         variant="smooth"
@@ -54,28 +56,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.webhook--link {
-  color: var(--s-700);
-  font-weight: var(--font-weight-medium);
-  word-break: break-word;
-}
-
-.webhook--subscribed-events {
-  color: var(--s-500);
-  font-size: var(--font-size-mini);
-}
-
-.webhook--subscribed-label {
-  font-weight: var(--font-weight-medium);
-}
-
-.button-wrapper {
-  max-width: var(--space-mega);
-  min-width: auto;
-
-  button:nth-child(2) {
-    margin-left: var(--space-normal);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index 63b744f3c..86790be13 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header
       :header-title="$t('LABEL_MGMT.ADD.TITLE')"
       :header-content="$t('LABEL_MGMT.ADD.DESC')"
     />
-    <form class="row" @submit.prevent="addLabel">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="addLabel">
       <woot-input
         v-model.trim="title"
         :class="{ error: $v.title.$error }"
-        class="medium-12 columns label-name--input"
+        class="w-full label-name--input"
         :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
         :error="getLabelTitleErrorMessage"
@@ -19,38 +19,36 @@
       <woot-input
         v-model.trim="description"
         :class="{ error: $v.description.$error }"
-        class="medium-12 columns"
+        class="w-full"
         :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
         data-testid="label-description"
         @input="$v.description.$touch"
       />
 
-      <div class="medium-12">
+      <div class="w-full">
         <label>
           {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
           <woot-color-picker v-model="color" />
         </label>
       </div>
-      <div class="medium-12">
+      <div class="w-full">
         <input v-model="showOnSidebar" type="checkbox" :value="true" />
         <label for="conversation_creation">
           {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
         </label>
       </div>
-      <div class="modal-footer">
-        <div class="medium-12 columns">
-          <woot-button
-            :is-disabled="$v.title.$invalid || uiFlags.isCreating"
-            :is-loading="uiFlags.isCreating"
-            data-testid="label-submit"
-          >
-            {{ $t('LABEL_MGMT.FORM.CREATE') }}
-          </woot-button>
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-          </woot-button>
-        </div>
+      <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
+        <woot-button
+          :is-disabled="$v.title.$invalid || uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
+          data-testid="label-submit"
+        >
+          {{ $t('LABEL_MGMT.FORM.CREATE') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+        </woot-button>
       </div>
     </form>
   </div>
@@ -117,7 +115,7 @@ export default {
 .label-name--input {
   ::v-deep {
     input {
-      text-transform: lowercase;
+      @apply lowercase;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
index f342af3e0..6a434d90f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header :header-title="pageTitle" />
-    <form class="row" @submit.prevent="editLabel">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="editLabel">
       <woot-input
         v-model.trim="title"
         :class="{ error: $v.title.$error }"
-        class="medium-12 columns label-name--input"
+        class="w-full label-name--input"
         :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
         :error="getLabelTitleErrorMessage"
@@ -14,36 +14,34 @@
       <woot-input
         v-model.trim="description"
         :class="{ error: $v.description.$error }"
-        class="medium-12 columns"
+        class="w-full"
         :label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
         @input="$v.description.$touch"
       />
 
-      <div class="medium-12">
+      <div class="w-full">
         <label>
           {{ $t('LABEL_MGMT.FORM.COLOR.LABEL') }}
           <woot-color-picker v-model="color" />
         </label>
       </div>
-      <div class="medium-12">
+      <div class="w-full">
         <input v-model="showOnSidebar" type="checkbox" :value="true" />
         <label for="conversation_creation">
           {{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
         </label>
       </div>
-      <div class="modal-footer">
-        <div class="medium-12 columns">
-          <woot-button
-            :is-disabled="$v.title.$invalid || uiFlags.isUpdating"
-            :is-loading="uiFlags.isUpdating"
-          >
-            {{ $t('LABEL_MGMT.FORM.EDIT') }}
-          </woot-button>
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-          </woot-button>
-        </div>
+      <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
+        <woot-button
+          :is-disabled="$v.title.$invalid || uiFlags.isUpdating"
+          :is-loading="uiFlags.isUpdating"
+        >
+          {{ $t('LABEL_MGMT.FORM.EDIT') }}
+        </woot-button>
+        <woot-button class="button clear" @click.prevent="onClose">
+          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+        </woot-button>
       </div>
     </form>
   </div>
@@ -120,7 +118,7 @@ export default {
 .label-name--input {
   ::v-deep {
     input {
-      text-transform: lowercase;
+      @apply lowercase;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 6c21bce1b..58287587d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -8,8 +8,8 @@
     >
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
     </woot-button>
-    <div class="row">
-      <div class="small-8 columns with-right-space">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p
           v-if="!uiFlags.isFetching && !records.length"
           class="no-items-error-message"
@@ -32,7 +32,9 @@
           <tbody>
             <tr v-for="(label, index) in records" :key="label.title">
               <td class="label-title">
-                <span class="text-truncate">{{ label.title }}</span>
+                <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
+                  label.title
+                }}</span>
               </td>
               <td>{{ label.description }}</td>
               <td>
@@ -71,7 +73,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')" />
       </div>
     </div>
@@ -189,21 +191,15 @@ export default {
 @import '~dashboard/assets/scss/variables';
 
 .label-color--container {
-  display: flex;
-  align-items: center;
+  @apply flex items-center;
 }
 
 .label-color--display {
-  border-radius: $space-smaller;
-  height: $space-normal;
-  margin-right: $space-smaller;
-  width: $space-normal;
-  border: 1px solid var(--color-border-light);
+  @apply rounded h-4 w-4 mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-50 dark:border-slate-700;
 }
 .label-title {
   span {
-    width: var(--space-giga);
-    display: inline-block;
+    @apply w-60 inline-block;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 2bc381ff1..6ded55097 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <router-link
       :to="addAccountScoping('settings/macros/new')"
       class="button success button--fixed-top"
@@ -9,12 +9,9 @@
         {{ $t('MACROS.HEADER_BTN_TXT') }}
       </span>
     </router-link>
-    <div class="row">
-      <div class="small-8 columns with-right-space">
-        <div
-          v-if="!uiFlags.isFetching && !records.length"
-          class="macros__empty-state"
-        >
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
+        <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
           <p class="no-items-error-message">
             {{ $t('MACROS.LIST.404') }}
           </p>
@@ -42,7 +39,7 @@
           </tbody>
         </table>
       </div>
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
       </div>
     </div>
@@ -113,9 +110,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.macros__empty-state {
-  padding: var(--space-slab);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 3849a3541..f43ef1285 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="h-auto overflow-auto flex-1 flex flex-col">
     <woot-loading-state
       v-if="uiFlags.isFetchingItem"
       :message="$t('MACROS.EDITOR.LOADING')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index 8b3c87ef6..bcfd4c33b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="row">
-    <div class="small-8 columns with-right-space macros-canvas">
+  <div class="flex flex-row h-full">
+    <div class="w-[60%] macros-canvas">
       <macro-nodes
         v-model="macro.actions"
         :files="files"
@@ -9,7 +9,7 @@
         @resetAction="resetNode"
       />
     </div>
-    <div class="small-4 columns">
+    <div class="w-[34%]">
       <macro-properties
         :macro-name="macro.name"
         :macro-visibility="macro.visibility"
@@ -125,17 +125,20 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-.row {
-  height: 100%;
+<style scoped>
+@tailwind components;
+@layer components {
+  .macro-gradient-radial {
+    background-image: radial-gradient(#ebf0f5 1.2px, transparent 0);
+  }
+  .macro-dark-gradient-radial {
+    background-image: radial-gradient(#293f51 1.2px, transparent 0);
+  }
+  .macro-gradient-radial-size {
+    background-size: 1rem 1rem;
+  }
 }
 .macros-canvas {
-  background-image: radial-gradient(var(--s-75) 1.2px, transparent 0);
-  background-size: var(--space-normal) var(--space-normal);
-  height: 100%;
-  max-height: 100%;
-  padding: var(--space-normal) var(--space-larger);
-  max-height: 100vh;
-  overflow-y: auto;
+  @apply macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size h-full max-h-full py-4 px-12 overflow-y-auto;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index c76c68665..9460b25c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -106,29 +106,17 @@ export default {
 
 <style scoped lang="scss">
 .macros__node-drag-handle {
-  position: absolute;
-  left: var(--space-minus-large);
-  cursor: move;
+  @apply cursor-move -left-8 absolute;
 }
 .macro__node-action-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-basis: 100%;
-  min-width: 0;
-  width: 100%;
+  @apply w-full min-w-0 basis-full items-center flex relative;
 
   .macro__node-action-item {
-    flex-grow: 1;
-    background-color: var(--white);
-    padding: var(--space-small);
-    margin-right: var(--space-small);
-    border-radius: var(--border-radius-medium);
-    box-shadow: var(--shadow);
+    @apply flex-grow bg-white dark:bg-slate-700 p-2 mr-2 rounded-md shadow-sm;
 
     &.has-error {
       animation: shake 0.3s ease-in-out 0s 2;
-      background-color: var(--r-50);
+      @apply bg-red-50 dark:bg-red-100;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index d7b203487..0c29d53bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="macros__properties-panel">
+  <div
+    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
+  >
     <div>
       <woot-input
         :value="macroName"
@@ -10,11 +12,15 @@
         @input="onUpdateName($event)"
       />
     </div>
-    <div class="macros__form-visibility-container">
-      <p class="title">{{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}</p>
-      <div class="macros__form-visibility">
+    <div class="mt-2">
+      <p
+        class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+      >
+        {{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}
+      </p>
+      <div class="grid grid-cols-2 gap-3">
         <button
-          class="card"
+          class="p-2 relative rounded-md border border-solid text-left cursor-default"
           :class="isActive('global')"
           @click="onUpdateVisibility('global')"
         >
@@ -22,17 +28,19 @@
             v-if="macroVisibility === 'global'"
             icon="checkmark-circle"
             type="solid"
-            class="visibility-check"
+            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
           />
-          <p class="title">
+          <p
+            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+          >
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
           </p>
-          <p class="subtitle">
+          <p class="text-xs text-slate-500 dark:text-slate-200">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
           </p>
         </button>
         <button
-          class="card"
+          class="p-2 relative rounded-md border border-solid text-left cursor-default"
           :class="isActive('personal')"
           @click="onUpdateVisibility('personal')"
         >
@@ -40,24 +48,30 @@
             v-if="macroVisibility === 'personal'"
             icon="checkmark-circle"
             type="solid"
-            class="visibility-check"
+            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
           />
-          <p class="title">
+          <p
+            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+          >
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
           </p>
-          <p class="subtitle">
+          <p class="text-xs text-slate-500 dark:text-slate-200">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
           </p>
         </button>
       </div>
-      <div class="macros__info-panel">
-        <fluent-icon icon="info" size="20" />
-        <p>
+      <div
+        class="mt-2 flex items-start p-2 bg-slate-50 dark:bg-slate-700 p-2 rounded-md"
+      >
+        <fluent-icon icon="info" size="20" class="flex-shrink" />
+        <p
+          class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
+        >
           {{ $t('MACROS.ORDER_INFO') }}
         </p>
       </div>
     </div>
-    <div class="macros__submit-button">
+    <div class="mt-auto">
       <woot-button
         size="expanded"
         color-scheme="success"
@@ -84,7 +98,9 @@ export default {
   },
   methods: {
     isActive(key) {
-      return { active: this.macroVisibility === key };
+      return this.macroVisibility === key
+        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
+        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
     },
     onUpdateName(value) {
       this.$emit('update:name', value);
@@ -97,87 +113,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.macros__properties-panel {
-  padding: var(--space-slab);
-  background-color: var(--white);
-  // full screen height subtracted by the height of the header
-  height: calc(100vh - 3.5rem);
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--s-50);
-}
-
-.macros__submit-button {
-  margin-top: auto;
-}
-.macros__form-visibility-container {
-  margin-top: var(--space-small);
-}
-.macros__form-visibility {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-slab);
-
-  .card {
-    padding: var(--space-small);
-    border-radius: var(--border-radius-normal);
-    border: 1px solid var(--s-200);
-    text-align: left;
-    cursor: pointer;
-    position: relative;
-
-    &.active {
-      background-color: var(--w-25);
-      border: 1px solid var(--w-300);
-    }
-
-    .visibility-check {
-      position: absolute;
-      color: var(--w-500);
-      top: var(--space-small);
-      right: var(--space-small);
-    }
-  }
-}
-
-.subtitle {
-  font-size: var(--font-size-mini);
-  color: var(--s-500);
-}
-
-.title {
-  display: block;
-  margin: 0;
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.8;
-  color: var(--color-body);
-}
-
-.macros__info-panel {
-  margin-top: var(--space-small);
-  display: flex;
-  background-color: var(--s-50);
-  padding: var(--space-small);
-  border-radius: var(--border-radius-normal);
-  align-items: flex-start;
-  svg {
-    flex-shrink: 0;
-  }
-  p {
-    margin-left: var(--space-small);
-    margin-bottom: 0;
-    color: var(--s-600);
-  }
-}
-
 ::v-deep input[type='text'] {
-  margin-bottom: 0;
+  @apply mb-0;
 }
 
 ::v-deep .error {
   .message {
-    margin-bottom: 0;
+    @apply mb-0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index bcba70d33..6929de9c6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="columns profile--settings">
+  <div class="overflow-auto p-6">
     <form @submit.prevent="updateUser('profile')">
-      <div class="small-12 row profile--settings--row">
-        <div class="columns small-3">
+      <div
+        class="flex flex-row border-b border-slate-50 dark:border-slate-700 items-center flex p-4"
+      >
+        <div class="w-[25%] py-4 pr-6 ml-0">
           <h4 class="block-title text-black-900 dark:text-slate-200">
             {{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }}
           </h4>
           <p>{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}</p>
         </div>
-        <div class="columns small-9 medium-5">
+        <div class="p-4 w-[45%]">
           <woot-avatar-uploader
             :label="$t('PROFILE_SETTINGS.FORM.PROFILE_IMAGE.LABEL')"
             :src="avatarUrl"
@@ -70,8 +72,10 @@
       </div>
     </form>
     <message-signature />
-    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
-      <div class="columns small-3">
+    <div
+      class="border-b border-slate-50 dark:border-slate-700 items-center flex p-4 text-black-900 dark:text-slate-300 row"
+    >
+      <div class="w-[25%] py-4 pr-6 ml-0">
         <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE') }}
         </h4>
@@ -79,11 +83,11 @@
           {{ $t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE') }}
         </p>
       </div>
-      <div class="columns small-9 medium-5 card-preview">
+      <div class="p-4 w-[45%] flex flex-row">
         <button
           v-for="keyOption in keyOptions"
           :key="keyOption.key"
-          class="preview-button"
+          class="cursor-pointer mr-4"
           @click="toggleEditorMessageKey(keyOption.key)"
         >
           <preview-card
@@ -97,8 +101,10 @@
     </div>
     <change-password v-if="!globalConfig.disableUserProfileUpdate" />
     <notification-settings />
-    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
-      <div class="columns small-3">
+    <div
+      class="border-b border-slate-50 dark:border-slate-700 items-center flex p-4 text-black-900 dark:text-slate-300 row"
+    >
+      <div class="w-[25%] py-4 pr-6 ml-0">
         <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE') }}
         </h4>
@@ -111,7 +117,7 @@
           }}
         </p>
       </div>
-      <div class="columns small-9 medium-5">
+      <div class="p-4 w-[45%]">
         <masked-text :value="currentUser.access_token" />
       </div>
     </div>
@@ -271,38 +277,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
-@import '~dashboard/assets/scss/mixins.scss';
-
-.profile--settings {
-  overflow: auto;
-  padding: 24px;
-}
-
-.profile--settings--row {
-  @include border-normal-bottom;
-  align-items: center;
-  display: flex;
-  padding: $space-normal;
-
-  .small-3 {
-    padding: $space-normal $space-medium $space-normal 0;
-  }
-
-  .small-9 {
-    padding: $space-normal;
-  }
-
-  .card-preview {
-    display: flex;
-    flex-direction: row;
-
-    .preview-button {
-      cursor: pointer;
-      margin-right: var(--space-normal);
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index 805f00b66..84977be42 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -1,13 +1,13 @@
 <template>
   <form @submit.prevent="updateSignature()">
     <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
-      <div class="columns small-3">
+      <div class="w-[25%] py-4 pr-6 ml-0">
         <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE') }}
         </h4>
         <p>{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE') }}</p>
       </div>
-      <div class="columns small-9 medium-5">
+      <div class="p-4 w-[45%]">
         <div>
           <label for="message-signature-input">{{
             $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.LABEL')
@@ -109,15 +109,20 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .profile--settings--row {
   .ProseMirror-woot-style {
-    height: 5rem;
+    @apply h-20;
   }
+}
 
-  .editor-root {
-    background: var(--white);
-    margin-bottom: var(--space-normal);
+.message-editor {
+  @apply px-3 mb-4;
+
+  ::v-deep {
+    .ProseMirror-menubar {
+      @apply left-2;
+    }
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
index 7bee6765f..aa014a763 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="medium-2 small-6 csat--metric-card"
+    class="md:w-[16%] sm:w-[50%] sm:max-w-[50%] md:max-w-[16%] csat--metric-card"
     :class="{
       disabled: disabled,
     }"
@@ -55,11 +55,11 @@ export default {
 
   .heading {
     align-items: center;
-    color: var(--color-heading);
     display: flex;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-bold);
     margin: 0;
+    @apply text-slate-800 dark:text-slate-100;
   }
 
   .metric {
@@ -67,11 +67,11 @@ export default {
     font-weight: var(--font-weight-feather);
     margin-bottom: 0;
     margin-top: var(--space-smaller);
+    @apply text-slate-700 dark:text-slate-100;
   }
 }
 
 .csat--icon {
-  color: var(--b-400);
-  margin: 0 var(--space-micro);
+  @apply text-slate-500 dark:text-slate-200 my-0 mx-0.5;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index ab70471a5..94fd6af97 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row csat--metrics-container">
+  <div class="flex flex-wrap mx-0 csat--metrics-container">
     <csat-metric-card
       :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
@@ -18,9 +18,9 @@
     />
     <div
       v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      class="medium-6 report-card"
+      class="w-[50%] max-w-[50%] flex-[50%] report-card"
     >
-      <h3 class="heading">
+      <h3 class="heading text-slate-800 dark:text-slate-100">
         <div class="emoji--distribution">
           <div
             v-for="(rating, key, index) in ratingPercentage"
@@ -98,27 +98,22 @@ export default {
 </script>
 <style lang="scss" scoped>
 .csat--metrics-container {
-  background: var(--white);
-  margin-bottom: var(--space-two);
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  padding: var(--space-normal);
+  @apply bg-white dark:bg-slate-800 rounded p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700;
 }
 
 .emoji--distribution {
-  display: flex;
-  justify-content: flex-end;
+  @apply flex justify-end;
 
   .emoji--distribution-item {
-    padding-left: var(--space-normal);
+    @apply pl-4;
   }
 }
 
 .emoji--distribution-chart {
-  margin-top: var(--space-small);
+  @apply mt-2;
 }
 
 .emoji--distribution-key {
-  margin: 0 var(--space-micro);
+  @apply my-0 mx-0.5;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index b7ba18157..56c590bf2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -3,6 +3,7 @@
     <ve-table
       max-height="calc(100vh - 21.875rem)"
       :fixed-header="true"
+      :border-around="true"
       :columns="columns"
       :table-data="tableData"
     />
@@ -149,12 +150,11 @@ export default {
   flex: 1;
 
   .ve-table {
-    background: var(--white);
+    @apply bg-white dark:bg-slate-900;
 
     &::v-deep {
       .ve-table-container {
         border-radius: var(--border-radius-normal);
-        border: 1px solid var(--color-border) !important;
       }
 
       th.ve-table-header-th {
@@ -188,20 +188,18 @@ export default {
 
 .csat--empty-records {
   align-items: center;
-  background-color: var(--white);
-  border: 1px solid var(--color-border);
+  // border: 1px solid var(--color-border);
   border-top: 0;
-  color: var(--b-600);
   display: flex;
   font-size: var(--font-size-small);
   height: 12.5rem;
   justify-content: center;
   margin-top: -1px;
   width: 100%;
+  @apply text-slate-600 dark:text-slate-200 bg-white dark:bg-slate-900 border border-t-0 border-solid border-slate-75 dark:border-slate-700;
 }
 
 .csat--timestamp {
-  color: var(--b-400);
-  font-size: var(--font-size-small);
+  @apply text-slate-600 dark:text-slate-200 text-sm;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 802e2ee5c..fd652e2ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -223,10 +223,12 @@ $marker-height: var(--space-two);
     flex-direction: column;
     align-items: end;
     justify-content: center;
+    @apply text-slate-800 dark:text-slate-200;
 
     time {
       font-size: var(--font-size-micro);
       font-weight: var(--font-weight-normal);
+      @apply text-slate-700 dark:text-slate-200;
     }
   }
 }
@@ -297,6 +299,7 @@ $marker-height: var(--space-two);
   font-weight: var(--font-weight-bold);
   height: $marker-height;
   color: var(--color-body);
+  @apply text-slate-800 dark:text-slate-200;
 
   div {
     display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 03506fb01..387e329b1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -96,7 +96,9 @@ export default {
                 status={row.status}
               />
               <div class="user-block">
-                <h6 class="title text-truncate">{row.agent}</h6>
+                <h6 class="title overflow-hidden whitespace-nowrap text-ellipsis">
+                  {row.agent}
+                </h6>
                 <span class="sub-title">{row.email}</span>
               </div>
             </div>
@@ -136,9 +138,7 @@ export default {
 
 <style lang="scss" scoped>
 .agent-table-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+  @apply flex flex-col flex-1;
 
   .ve-table {
     &::v-deep {
@@ -154,47 +154,34 @@ export default {
   }
 
   &::v-deep .ve-pagination {
-    background-color: transparent;
+    @apply bg-transparent dark:bg-transparent;
   }
 
   &::v-deep .ve-pagination-select {
-    display: none;
+    @apply hidden;
   }
 
   .row-user-block {
-    align-items: center;
-    display: flex;
-    text-align: left;
+    @apply items-center flex text-left;
 
     .user-block {
-      align-items: flex-start;
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      margin: 0 var(--space-small);
+      @apply items-start flex flex-col min-w-0 my-0 mx-2;
 
       .title {
-        font-size: var(--font-size-small);
-        margin: var(--zero);
-        line-height: 1.2;
+        @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
       }
       .sub-title {
-        font-size: var(--font-size-mini);
+        @apply text-xs text-slate-600 dark:text-slate-200;
       }
     }
   }
 
   .table-pagination {
-    margin-top: var(--space-normal);
-    text-align: right;
+    @apply mt-4 text-right;
   }
 }
 
 .agents-loader {
-  align-items: center;
-  display: flex;
-  font-size: var(--font-size-default);
-  justify-content: center;
-  padding: var(--space-large);
+  @apply items-center flex text-base justify-center p-8;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 54b80a177..3d47af259 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -50,87 +50,61 @@ export default {
 </script>
 <style lang="scss" scoped>
 .card {
+  @apply bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700;
   margin: var(--space-small) !important;
 
   .card-header--control-area {
-    opacity: 0.2;
     transition: opacity 0.2s ease-in-out;
+    @apply opacity-20;
   }
 
   &:hover {
     .card-header--control-area {
-      opacity: 1;
+      @apply opacity-100;
     }
   }
 }
 
 .card-header {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(max-content, 50%));
   gap: var(--space-small) 0px;
-  flex-grow: 1;
-  width: 100%;
-  margin-bottom: var(--space-medium);
+  @apply grid flex-grow w-full mb-6;
 
   .card-header--title-area {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    @apply flex items-center flex-row;
 
     h5 {
-      margin-bottom: var(--zero);
+      @apply mb-0 text-slate-800 dark:text-slate-100;
     }
 
     .live {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding-right: var(--space-small);
-      padding-left: var(--space-small);
-      margin: var(--space-smaller);
       background: rgba(37, 211, 102, 0.1);
-      color: var(--g-400);
-      font-size: var(--font-size-mini);
+      @apply flex flex-row items-center pr-2 pl-2 m-1 text-green-400 dark:text-green-400 text-xs;
 
       .ellipse {
-        background-color: var(--g-400);
-        height: var(--space-smaller);
-        width: var(--space-smaller);
-        border-radius: var(--border-radius-rounded);
-        margin-right: var(--space-smaller);
+        @apply bg-green-400 dark:bg-green-400 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0;
       }
     }
   }
 
   .card-header--control-area {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: end;
-    gap: var(--space-small);
+    @apply flex flex-row items-center justify-end gap-2;
   }
 }
 
 .card-body {
   .metric-content {
-    padding-bottom: var(--space-small);
+    @apply pb-2;
     .heading {
-      font-size: var(--font-size-default);
+      @apply text-base text-slate-700 dark:text-slate-100;
     }
     .metric {
-      color: var(--w-800);
-      font-size: var(--font-size-bigger);
-      margin-bottom: var(--zero);
-      margin-top: var(--space-smaller);
+      @apply text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1;
     }
   }
 }
 
 .conversation-metric-loader {
-  align-items: center;
-  display: flex;
-  font-size: var(--font-size-default);
-  justify-content: center;
-  padding: var(--space-large);
+  @apply items-center flex text-base justify-center p-12;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
index 357d4dfa8..4f10667c8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CsatMetrics.vue computes response count correctly 1`] = `
-<div class="row csat--metrics-container">
+<div class="flex flex-wrap mx-0 csat--metrics-container">
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP"></csat-metric-card-stub>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index 95cb1ae9d..dc702b6a6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <form class="row" @submit.prevent="addAgents">
-      <div class="medium-12 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="addAgents">
+      <div class="w-full">
         <page-header
           :header-title="headerTitle"
           :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
         />
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <div v-if="$v.selectedAgents.$error">
           <p class="error-message">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
index ff596a953..ee79050ac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
       :header-content="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.DESC')"
     />
-    <div class="row channels">
+    <div class="flex flex-wrap">
       <team-form
         :on-submit="createTeam"
         :submit-in-progress="false"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 3009ac570..97cdd384c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row content-box full-height">
+  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
     <woot-wizard class="small-3 columns" :items="items" />
     <router-view />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index 65f10c2db..01093f6f8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <form class="row" @submit.prevent="addAgents">
-      <div class="medium-12 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
+    <form class="mx-0 flex flex-wrap" @submit.prevent="addAgents">
+      <div class="w-full">
         <page-header
           :header-title="headerTitle"
           :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
         />
       </div>
 
-      <div class="medium-12 columns">
+      <div class="w-full">
         <div v-if="$v.selectedAgents.$error">
           <p class="error-message">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
index fc795fab6..5a5a094d6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <page-header
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
       :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.DESC')"
     />
-    <div class="row channels">
+    <div class="flex flex-wrap">
       <team-form
         v-if="showTeamForm"
         :on-submit="updateTeam"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index 49aa09d70..5cb89e6a2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row content-box full-height">
+  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
     <woot-wizard class="small-3 columns" :items="items" />
     <router-view />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
index 5290c369e..3b54f36f0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
+  <div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
     <empty-state
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
       :message="$t('TEAMS_SETTINGS.FINISH.MESSAGE')"
       :button-text="$t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT')"
     >
-      <div class="medium-12 columns text-center">
+      <div class="w-full text-center">
         <router-link
           class="button success nice"
           :to="{
@@ -29,10 +29,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-
 .website--code {
-  margin: $space-normal auto;
-  max-width: 70%;
+  @apply my-4 mx-auto max-w-[70%];
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index b1d0ca7ec..019a82ad3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="column content-box">
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+  <div class="flex-1 overflow-auto p-4">
+    <div class="flex flex-row gap-4">
+      <div class="w-[60%]">
         <p v-if="!teamsList.length" class="no-items-error-message">
           {{ $t('TEAMS_SETTINGS.LIST.404') }}
           <router-link
@@ -53,7 +53,7 @@
         </table>
       </div>
 
-      <div class="small-4 columns">
+      <div class="w-[34%]">
         <span
           v-dompurify-html="
             $t('TEAMS_SETTINGS.SIDEBAR_TXT', {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index 7f388c734..28cce5c15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="row">
-    <div class="small-12 medium-8 columns">
-      <form class="row" @submit.prevent="handleSubmit">
+  <div class="mx-0 flex flex-wrap">
+    <div class="flex-shrink-0 flex-grow-0 w-[65%]">
+      <form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
         <woot-input
           v-model.trim="title"
           :class="{ error: $v.title.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
           :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
           @input="$v.title.$touch"
@@ -14,20 +14,20 @@
         <woot-input
           v-model.trim="description"
           :class="{ error: $v.description.$error }"
-          class="medium-12 columns"
+          class="w-full"
           :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
           :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
           @input="$v.description.$touch"
         />
 
-        <div class="medium-12">
+        <div class="w-full">
           <input v-model="allowAutoAssign" type="checkbox" :value="true" />
           <label for="conversation_creation">
             {{ $t('TEAMS_SETTINGS.FORM.AUTO_ASSIGN.LABEL') }}
           </label>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+          <div class="w-full">
             <woot-submit-button
               :disabled="$v.title.$invalid || submitInProgress"
               :button-text="submitButtonText"
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index c6bb5e187..43b1a21cb 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -1,16 +1,16 @@
 <template>
   <div
     v-on-clickaway="onCloseDropdown"
-    class="selector-wrap"
+    class="relative w-full mb-2"
     @keyup.esc="onCloseDropdown"
   >
     <woot-button
       variant="hollow"
       color-scheme="secondary"
-      class="selector-button"
+      class="w-full border border-solid border-slate-200 dark:border-slate-700 px-2.5 hover:border-slate-75 dark:hover:border-slate-600"
       @click="toggleDropdown"
     >
-      <div class="selector-user-wrap">
+      <div class="flex">
         <Thumbnail
           v-if="hasValue && hasThumbnail"
           :src="selectedItem.thumbnail"
@@ -18,16 +18,16 @@
           :status="selectedItem.availability_status"
           :username="selectedItem.name"
         />
-        <div class="selector-name-wrap">
+        <div class="flex justify-between w-full min-w-0 items-center">
           <h4
             v-if="!hasValue"
-            class="not-selected text-ellipsis text-block-title"
+            class="mt-0 mb-0 mr-2 ml-0 text-ellipsis text-sm text-slate-800 dark:text-slate-100"
           >
             {{ multiselectorPlaceholder }}
           </h4>
           <h4
             v-else
-            class="selector-name text-truncate text-block-title"
+            class="items-center leading-tight my-0 mx-2 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
             :title="selectedItem.name"
           >
             {{ selectedItem.name }}
@@ -41,8 +41,10 @@
       :class="{ 'dropdown-pane--open': showSearchDropdown }"
       class="dropdown-pane"
     >
-      <div class="dropdown__header">
-        <h4 class="text-block-title text-truncate">
+      <div class="flex justify-between items-center mb-1">
+        <h4
+          class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+        >
           {{ multiselectorTitle }}
         </h4>
         <woot-button
@@ -135,61 +137,8 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
-.selector-wrap {
-  position: relative;
-  width: 100%;
-  margin-bottom: var(--space-small);
-
-  .selector-button {
-    width: 100%;
-    border: 1px solid var(--s-200);
-    padding-left: var(--space-one);
-    padding-right: var(--space-one);
-
-    &:hover {
-      border: 1px solid var(--color-border);
-    }
-  }
-
-  .selector-user-wrap {
-    display: flex;
-  }
-
-  .selector-name-wrap {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    min-width: 0;
-    align-items: center;
-  }
-
-  .not-selected {
-    margin: 0 var(--space-small) 0 0;
-  }
-
-  .selector-name {
-    align-items: center;
-    line-height: 1.2;
-    margin: 0 var(--space-small);
-  }
-
-  .dropdown-pane {
-    box-sizing: border-box;
-    top: 2.625rem;
-    width: 100%;
-  }
-}
-
-.dropdown__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-smaller);
-
-  .text-block-title {
-    margin: 0;
-  }
+.dropdown-pane {
+  @apply box-border top-[2.625rem] w-full;
 }
 </style>
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 130e63ad9..ebf5b3681 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="dropdown-wrap">
-    <div class="search-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -10,8 +10,8 @@
         :placeholder="inputPlaceholder"
       />
     </div>
-    <div class="list-scroll-container">
-      <div class="multiselect-dropdown--list">
+    <div class="flex justify-start items-start flex-auto overflow-auto">
+      <div class="w-full max-h-[10rem]">
         <woot-dropdown-menu>
           <woot-dropdown-item
             v-for="option in filteredOptions"
@@ -26,7 +26,7 @@
               }"
               @click="() => onclick(option)"
             >
-              <div class="user-wrap">
+              <div class="flex items-center">
                 <Thumbnail
                   v-if="hasThumbnail"
                   :src="option.thumbnail"
@@ -35,9 +35,9 @@
                   :status="option.availability_status"
                   has-border
                 />
-                <div class="name-wrap">
+                <div class="flex items-center justify-between w-full min-w-0">
                   <span
-                    class="name text-truncate text-block-title"
+                    class="leading-4 my-0 mx-2 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
                     :title="option.name"
                   >
                     {{ option.name }}
@@ -48,7 +48,10 @@
             </woot-button>
           </woot-dropdown-item>
         </woot-dropdown-menu>
-        <h4 v-if="noResult" class="no-result text-truncate text-block-title">
+        <h4
+          v-if="noResult"
+          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+        >
           {{ noSearchResult }}
         </h4>
       </div>
@@ -128,92 +131,26 @@ export default {
 
 <style lang="scss" scoped>
 .dropdown-wrap {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  max-height: 12.5rem;
-}
-
-.search-wrap {
-  margin-bottom: var(--space-small);
-  flex: 0 0 auto;
-  max-height: var(--space-large);
+  @apply w-full flex flex-col max-h-[12.5rem];
 }
 
 .search-input {
-  margin: 0;
-  width: 100%;
-  border: 1px solid transparent;
-  height: var(--space-large);
-  font-size: var(--font-size-small);
-  padding: var(--space-small);
-  background-color: var(--color-background);
-
-  &:focus {
-    border: 1px solid var(--w-500);
-  }
-}
-
-.list-scroll-container {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex: 1 1 auto;
-  overflow: auto;
-}
-
-.multiselect-dropdown--list {
-  width: 100%;
-  max-height: 10rem;
+  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
 }
 
 .multiselect-dropdown--item {
-  justify-content: space-between;
-  width: 100%;
+  @apply justify-between w-full;
 
   &.active {
-    background: var(--s-25);
-    border-color: var(--s-50);
-    font-weight: var(--font-weight-medium);
+    @apply bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-900 font-medium;
   }
 
   &:focus {
-    background-color: var(--color-background-light);
+    @apply bg-slate-25 dark:bg-slate-700;
   }
 
   &:hover {
-    color: var(--s-800);
-    background-color: var(--color-background);
+    @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100;
   }
 }
-
-.user-wrap {
-  display: flex;
-  align-items: center;
-}
-
-.name-wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-width: 0;
-  width: 100%;
-  align-items: center;
-}
-
-.name {
-  line-height: var(--space-normal);
-  margin: 0 var(--space-small);
-}
-
-.icon {
-  margin-left: var(--space-smaller);
-}
-
-.no-result {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  padding: var(--space-small) var(--space-one);
-}
 </style>
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index c5a98d56e..8ac269ec3 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="dropdown-search-wrap">
-    <div class="dropdown-title-container">
-      <h4 class="text-block-title">
+  <div class="flex flex-col w-full max-h-[12.5rem]">
+    <div class="flex items-center justify-center mb-1">
+      <h4
+        class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
+      >
         {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
       </h4>
       <hotkey>L</hotkey>
     </div>
-    <div class="search-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -16,8 +18,10 @@
         :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
       />
     </div>
-    <div class="list-wrap">
-      <div class="list">
+    <div
+      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
+    >
+      <div class="w-full">
         <woot-dropdown-menu>
           <label-dropdown-item
             v-for="label in filteredActiveLabels"
@@ -28,10 +32,16 @@
             @click="onAddRemove(label)"
           />
         </woot-dropdown-menu>
-        <div v-if="noResult" class="no-result">
+        <div
+          v-if="noResult"
+          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
+        >
           {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
         </div>
-        <div v-if="allowCreation && shouldShowCreate" class="new-label">
+        <div
+          v-if="allowCreation && shouldShowCreate"
+          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
+        >
           <woot-button
             size="small"
             variant="clear"
@@ -171,88 +181,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dropdown-title-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-smaller);
-
-  .text-block-title {
-    flex-grow: 1;
-    margin: 0;
-  }
-
-  .hotkey {
-    flex-shrink: 0;
-  }
+.hotkey {
+  @apply flex-shrink-0;
 }
 
-.dropdown-search-wrap {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-height: 12.5rem;
+.search-input {
+  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
+}
 
-  .search-wrap {
-    margin-bottom: var(--space-small);
-    flex: 0 0 auto;
-    max-height: var(--space-large);
+.button-new-label {
+  @apply whitespace-nowrap text-ellipsis overflow-hidden items-center;
 
-    .search-input {
-      margin: 0;
-      width: 100%;
-      border: 1px solid transparent;
-      height: var(--space-large);
-      font-size: var(--font-size-small);
-      padding: var(--space-small);
-      background-color: var(--color-background);
-    }
-
-    input:focus {
-      outline: 1px solid var(--color-border-dark);
-    }
-  }
-
-  .list-wrap {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex: 1 1 auto;
-    overflow: auto;
-
-    .list {
-      width: 100%;
-    }
-
-    .no-result {
-      display: flex;
-      justify-content: center;
-      color: var(--s-700);
-      padding: var(--space-normal) var(--space-one);
-      font-weight: var(--font-weight-medium);
-      font-size: var(--font-size-mini);
-    }
-
-    .new-label {
-      display: flex;
-      padding-top: var(--space-smaller);
-      border-top: 1px solid var(--s-100);
-
-      .button-new-label {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        align-items: center;
-
-        .icon {
-          min-width: 0;
-        }
-      }
-
-      .search-term {
-        color: var(--s-700);
-      }
-    }
+  .icon {
+    @apply min-w-0;
   }
 }
 </style>
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
index 2384964b5..6319b7420 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
@@ -47,54 +47,38 @@ export default {
 
 <style lang="scss" scoped>
 .item-wrap {
-  display: flex;
+  @apply flex;
 
   ::v-deep .button__content {
-    width: 100%;
+    @apply w-full;
   }
 
   .button-wrap {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+    @apply flex justify-between w-full;
 
     &.active {
-      display: flex;
-      font-weight: var(--font-weight-bold);
-      color: var(--w-700);
+      @apply flex font-semibold text-woot-700 dark:text-woot-600;
     }
 
     .name-label-wrap {
-      display: flex;
-      min-width: 0;
-      width: 100%;
+      @apply flex min-w-0 w-full;
 
       .label-color--display {
-        margin-right: var(--space-small);
+        @apply mr-2 rtl:mr-0 rtl:ml-2;
       }
 
       .label-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1.1;
-        padding-right: var(--space-small);
+        @apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
       }
 
       .icon {
-        font-size: var(--font-size-small);
+        @apply text-sm;
       }
     }
   }
 
   .label-color--display {
-    border-radius: var(--border-radius-normal);
-    height: var(--space-slab);
-    margin-right: var(--space-smaller);
-    margin-top: var(--space-micro);
-    min-width: var(--space-slab);
-    width: var(--space-slab);
-    border: 1px solid var(--color-border-light);
+    @apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
   }
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 708207df5..7ad294088 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,9 @@ module.exports = {
     colors: {
       transparent: 'transparent',
       white: '#fff',
+      white_transparent: 'rgba(255, 255, 255, 0.9)',
+      black_transparent: 'rgba(0, 0, 0, 0.9)',
+      modal: 'rgba(0, 0, 0, 0.4)',
       current: 'currentColor',
       woot: {
         25: '#F5FAFF',
@@ -95,6 +98,18 @@ module.exports = {
         800: '#D11320',
         900: '#C30011',
       },
+      violet: {
+        50: '#FFFFFF',
+        100: '#F5EBFF',
+        200: '#DDB8FF',
+        300: '#C585FF',
+        400: '#AC52FF',
+        500: '#941FFF',
+        600: '#7B00EB',
+        700: '#6000B8',
+        800: '#450085',
+        900: '#2B0052',
+      },
       body: '#2f3b49',
     },
     keyframes: {