diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 1015fe997..499e5c120 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,7 +1,2 @@
-## All javascript files should be reviewed by pranav before merging
-*.js @pranavrajs
-*.vue @pranavrajs
-
-
 ## All enterprise related files should be reviewed by sojan before merging
 /enterprise/* @sojan-official
diff --git a/app/controllers/devise_overrides/sessions_controller.rb b/app/controllers/devise_overrides/sessions_controller.rb
index e623e52f7..fc7b12767 100644
--- a/app/controllers/devise_overrides/sessions_controller.rb
+++ b/app/controllers/devise_overrides/sessions_controller.rb
@@ -4,6 +4,10 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   wrap_parameters format: []
   before_action :process_sso_auth_token, only: [:create]
 
+  def new
+    redirect_to login_page_url(error: 'access-denied')
+  end
+
   def create
     # Authenticate user via the temporary sso auth token
     if params[:sso_auth_token].present? && @resource.present?
@@ -21,6 +25,12 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
 
   private
 
+  def login_page_url(error: nil)
+    frontend_url = ENV.fetch('FRONTEND_URL', nil)
+
+    "#{frontend_url}/app/login?error=#{error}"
+  end
+
   def authenticate_resource_with_sso_token
     @token = @resource.create_token
     @resource.save!
diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
index 54a03c403..b9c8a9bf1 100644
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -11,6 +11,7 @@ body {
     'Segoe UI',
     Roboto,
     'Helvetica Neue',
+    Tahoma,
     Arial,
     sans-serif !important;
   -moz-osx-font-smoothing: grayscale;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 54fc27e25..587b810ca 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -118,7 +118,7 @@ button {
     @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
-      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index f89579773..b50ad54cb 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -2,23 +2,27 @@
   <div class="py-3 px-4">
     <div class="flex items-center mb-1">
       <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
           <input
             v-model="editedValue"
-            class="checkbox"
+            class="!my-0 mr-2 ml-0"
             type="checkbox"
             @change="onUpdate"
           />
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="attribute-name w-full text-slate-800 dark:text-slate-100 font-medium text-sm mb-0"
-            :class="{ error: $v.editedValue.$error }"
+            class="w-full font-medium text-sm mb-0"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
           >
             {{ label }}
           </span>
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
             variant="link"
             size="medium"
@@ -31,7 +35,7 @@
       </h4>
     </div>
     <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-show="isEditing">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
         <div class="mb-2 w-full flex items-center">
           <input
             ref="inputfield"
@@ -61,7 +65,7 @@
       </div>
       <div
         v-show="!isEditing"
-        class="value--view"
+        class="flex group"
         :class="{ 'is-editable': showActions }"
       >
         <a
@@ -69,35 +73,35 @@
           :href="hrefURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ urlValue }}
         </a>
         <p
           v-else
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ displayValue || '---' }}
         </p>
         <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
             variant="link"
             size="small"
             color-scheme="secondary"
             icon="clipboard"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onCopy"
           />
           <woot-button
-            v-if="showActions"
+            v-if="showEditButton"
             v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
             variant="link"
             size="small"
             color-scheme="secondary"
             icon="edit"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onEdit"
           />
         </div>
@@ -126,6 +130,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -138,7 +143,7 @@ export default {
   components: {
     MultiselectDropdown,
   },
-  mixins: [customAttributeMixin],
+  mixins: [customAttributeMixin, clickaway],
   props: {
     label: { type: String, required: true },
     values: { type: Array, default: () => [] },
@@ -160,11 +165,18 @@ export default {
       editedValue: null,
     };
   },
-
   computed: {
+    showCopyAndDeleteButton() {
+      return this.value && this.showActions;
+    },
+    showEditButton() {
+      return !this.value && this.showActions;
+    },
     displayValue() {
       if (this.isAttributeTypeDate) {
-        return new Date(this.value || new Date()).toLocaleDateString();
+        return this.value
+          ? new Date(this.value || new Date()).toLocaleDateString()
+          : '';
       }
       if (this.isAttributeTypeCheckbox) {
         return this.value === 'false' ? false : this.value;
@@ -230,6 +242,10 @@ export default {
       this.isEditing = false;
       this.editedValue = this.formattedValue;
     },
+    contactId() {
+      // Fix to solve validation not resetting when contactId changes in contact page
+      this.$v.$reset();
+    },
   },
 
   validations() {
@@ -268,6 +284,10 @@ export default {
         this.$refs.inputfield.focus();
       }
     },
+    onClickAway() {
+      this.$v.$reset();
+      this.isEditing = false;
+    },
     onEdit() {
       this.isEditing = true;
       this.$nextTick(() => {
@@ -294,6 +314,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
+      this.$v.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
@@ -304,35 +325,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.checkbox-wrap {
-  @apply flex items-center;
-}
-.checkbox {
-  @apply my-0 mr-2 ml-0;
-}
-.attribute-name {
-  &.error {
-    @apply text-red-400 dark:text-red-500;
-  }
-}
-
-.edit-button {
-  @apply hidden;
-}
-
-.value--view {
-  @apply flex;
-
-  &.is-editable:hover {
-    .value {
-      @apply bg-slate-50 dark:bg-slate-700 mb-0;
-    }
-    .edit-button {
-      @apply block;
-    }
-  }
-}
-
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 3a1059692..16be2ba35 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -7,7 +7,13 @@
       @mousedown="handleMouseDown"
     >
       <div
-        :class="modalContainerClassName"
+        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
         @mouse.stop
         @mousedown="event => event.stopPropagation()"
       >
@@ -16,7 +22,7 @@
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
-          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
           @click="close"
         />
         <slot />
@@ -60,15 +66,6 @@ export default {
     };
   },
   computed: {
-    modalContainerClassName() {
-      let className =
-        'modal-container rtl:text-right shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem] bg-white dark:bg-slate-800 skip-context-menu';
-      if (this.fullWidth) {
-        return `${className} items-center rounded-none flex h-full justify-center w-full`;
-      }
-
-      return `${className} ${this.size}`;
-    },
     modalClassName() {
       const modalClassNameMap = {
         centered: '',
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 1e38abc30..332ca069f 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col items-start pt-8 px-8 pb-0">
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
-      class="text-slate-800 text-lg font-semibold dark:text-slate-50"
+      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
     >
       {{ headerTitle }}
     </h2>
     <p
       v-if="headerContent"
       ref="modalHeaderContent"
-      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
+      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
     >
       {{ headerContent }}
       <span
         v-if="headerContentValue"
-        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
       >
         {{ headerContentValue }}
       </span>
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
index 551256c74..e7e4997fd 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
@@ -12,6 +12,7 @@ const reports = accountId => ({
     'label_reports',
     'inbox_reports',
     'team_reports',
+    'sla_reports',
   ],
   menuItems: [
     {
@@ -71,6 +72,14 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
+    {
+      icon: 'document-list-clock',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.SLA,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
   ],
 });
 
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index e064fa02d..b3a671771 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -1,171 +1,48 @@
 <template>
   <footer
     v-if="isFooterVisible"
-    class="bg-white dark:bg-slate-800 h-12 border-t border-solid border-slate-75 dark:border-slate-700/50 flex items-center justify-between px-6"
+    class="h-12 flex items-center justify-between px-6"
   >
-    <div class="left-aligned-wrap">
-      <div class="text-xs text-slate-600 dark:text-slate-200">
-        <strong>{{ firstIndex }}</strong>
-        - <strong>{{ lastIndex }}</strong> of
-        <strong>{{ totalCount }}</strong> items
-      </div>
-    </div>
-    <div class="right-aligned-wrap">
-      <div
-        v-if="totalCount"
-        class="primary button-group pagination-button-group"
-      >
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          class-names="goto-first"
-          :is-disabled="hasFirstPage"
-          @click="onFirstPage"
-        >
-          <fluent-icon icon="chevron-left" size="18" />
-          <fluent-icon
-            icon="chevron-left"
-            size="18"
-            :class="pageFooterIconClass"
-          />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          :is-disabled="hasPrevPage"
-          @click="onPrevPage"
-        >
-          <fluent-icon icon="chevron-left" size="18" />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          @click.prevent
-        >
-          {{ currentPage }}
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          :is-disabled="hasNextPage"
-          @click="onNextPage"
-        >
-          <fluent-icon icon="chevron-right" size="18" />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          class-names="goto-last"
-          :is-disabled="hasLastPage"
-          @click="onLastPage"
-        >
-          <fluent-icon icon="chevron-right" size="18" />
-          <fluent-icon
-            icon="chevron-right"
-            size="18"
-            :class="pageFooterIconClass"
-          />
-        </woot-button>
-      </div>
-    </div>
+    <table-footer-results
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <table-footer-pagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="$emit('page-change', $event)"
+    />
   </footer>
 </template>
 
-<script>
-import rtlMixin from 'shared/mixins/rtlMixin';
-
-export default {
-  components: {},
-  mixins: [rtlMixin],
-  props: {
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 25,
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
+<script setup>
+import { computed } from 'vue';
+import TableFooterResults from './TableFooterResults.vue';
+import TableFooterPagination from './TableFooterPagination.vue';
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
   },
-  computed: {
-    pageFooterIconClass() {
-      return this.isRTLView ? '-mr-3' : '-ml-3';
-    },
-    isFooterVisible() {
-      return this.totalCount && !(this.firstIndex > this.totalCount);
-    },
-    firstIndex() {
-      return this.pageSize * (this.currentPage - 1) + 1;
-    },
-    lastIndex() {
-      return Math.min(this.totalCount, this.pageSize * this.currentPage);
-    },
-    searchButtonClass() {
-      return this.searchQuery !== '' ? 'show' : '';
-    },
-    hasLastPage() {
-      return !!Math.ceil(this.totalCount / this.pageSize);
-    },
-    hasFirstPage() {
-      return this.currentPage === 1;
-    },
-    hasNextPage() {
-      return this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-    },
-    hasPrevPage() {
-      return this.currentPage === 1;
-    },
+  pageSize: {
+    type: Number,
+    default: 25,
   },
-  methods: {
-    onNextPage() {
-      if (this.hasNextPage) {
-        return;
-      }
-      const newPage = this.currentPage + 1;
-      this.onPageChange(newPage);
-    },
-    onPrevPage() {
-      if (this.hasPrevPage) {
-        return;
-      }
-      const newPage = this.currentPage - 1;
-      this.onPageChange(newPage);
-    },
-    onFirstPage() {
-      if (this.hasFirstPage) {
-        return;
-      }
-      const newPage = 1;
-      this.onPageChange(newPage);
-    },
-    onLastPage() {
-      if (this.hasLastPage) {
-        return;
-      }
-      const newPage = Math.ceil(this.totalCount / this.pageSize);
-      this.onPageChange(newPage);
-    },
-    onPageChange(page) {
-      this.$emit('page-change', page);
-    },
+  totalCount: {
+    type: Number,
+    default: 0,
   },
-};
+});
+const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
+const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
+const lastIndex = computed(() =>
+  Math.min(props.totalCount, props.pageSize * props.currentPage)
+);
+const isFooterVisible = computed(
+  () => props.totalCount && !(firstIndex.value > props.totalCount)
+);
 </script>
-
-<style lang="scss" scoped>
-.goto-first,
-.goto-last {
-  i:last-child {
-    @apply -ml-1;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
new file mode 100644
index 000000000..c048b2eb7
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasFirstPage"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
+      :class="buttonClass(hasFirstPage)"
+      @click="onFirstPage"
+    >
+      <fluent-icon
+        icon="chevrons-left"
+        size="20"
+        icon-lib="lucide"
+        :class="hasFirstPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasPrevPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasPrevPage)"
+      @click="onPrevPage"
+    >
+      <fluent-icon
+        icon="chevron-left-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasPrevPage && 'opacity-40'"
+      />
+    </woot-button>
+
+    <div
+      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+    >
+      <span class="text-sm text-slate-800 dark:text-slate-75">
+        {{ currentPage }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-500">/</span>
+      <span class="text-sm text-slate-600 dark:text-slate-500">
+        {{ totalPages }}
+      </span>
+    </div>
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasNextPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasNextPage)"
+      @click="onNextPage"
+    >
+      <fluent-icon
+        icon="chevron-right-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasNextPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
+      :class="buttonClass(hasLastPage)"
+      :is-disabled="hasLastPage"
+      @click="onLastPage"
+    >
+      <fluent-icon
+        icon="chevrons-right"
+        size="20"
+        icon-lib="lucide"
+        :class="hasLastPage && 'opacity-40'"
+      />
+    </woot-button>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineEmits } from 'vue';
+
+// Props
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+const emit = defineEmits(['page-change']);
+
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
+function onPageChange(newPage) {
+  emit('page-change', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterResults.vue b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
new file mode 100644
index 000000000..305933059
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
@@ -0,0 +1,28 @@
+<template>
+  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  firstIndex: {
+    type: Number,
+    default: 0,
+  },
+  lastIndex: {
+    type: Number,
+    default: 0,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
new file mode 100644
index 000000000..8e2cd6326
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  span: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+    default: '',
+  },
+});
+
+const spanClass = computed(() => {
+  if (props.span === 1) return 'col-span-1';
+  if (props.span === 2) return 'col-span-2';
+  if (props.span === 3) return 'col-span-3';
+  if (props.span === 4) return 'col-span-4';
+  if (props.span === 5) return 'col-span-5';
+  if (props.span === 6) return 'col-span-6';
+  if (props.span === 7) return 'col-span-7';
+  if (props.span === 8) return 'col-span-8';
+  if (props.span === 9) return 'col-span-9';
+  if (props.span === 10) return 'col-span-10';
+
+  return 'col-span-1';
+});
+</script>
+<template>
+  <div
+    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    :class="spanClass"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index c94e5389b..079d1c7bf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -46,6 +46,11 @@ export default {
       type: Number,
       required: true,
     },
+    conversationLabels: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 791279899..24483ca1a 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -296,6 +296,8 @@
     "BUTTON": "Add custom attribute",
     "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
+    "SHOW_MORE": "Show all attributes",
+    "SHOW_LESS": "Show less attributes",
     "ACTIONS": {
       "COPY": "Copy attribute",
       "DELETE": "Delete attribute",
diff --git a/app/javascript/dashboard/i18n/locale/en/general.json b/app/javascript/dashboard/i18n/locale/en/general.json
new file mode 100644
index 000000000..25bb4dfb7
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/general.json
@@ -0,0 +1,5 @@
+{
+  "GENERAL": {
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 75cdb5836..81e0c5763 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -31,6 +31,7 @@ import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
 import sla from './sla.json';
 import inbox from './inbox.json';
+import general from './general.json';
 
 export default {
   ...advancedFilters,
@@ -66,4 +67,5 @@ export default {
   ...teamsSettings,
   ...whatsappTemplates,
   ...inbox,
+  ...general,
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index c41e8b8a1..7a4bf60ad 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -508,15 +508,31 @@
   },
   "SLA_REPORTS": {
     "HEADER": "SLA Reports",
+    "NO_RECORDS": "SLA applied conversations are not available.",
+    "LOADING": "Loading SLA data...",
+    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
         "TOOLTIP": "Percentage of SLAs created were completed successfully"
       },
-      "NO_OF_BREACHES": {
-        "LABEL": "Number of Breaches",
-        "TOOLTIP": "The total SLA breaches in a certain period."
+      "NO_OF_MISSES": {
+        "LABEL": "Number of Misses",
+        "TOOLTIP": "Total SLA misses in a certain period"
+      },
+      "NO_OF_CONVERSATIONS": {
+        "LABEL": "Number of Conversations",
+        "TOOLTIP": "Total number of conversations with SLA"
       }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY": "Policy",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      },
+      "VIEW_DETAILS": "View Details"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index d9834c545..e9ac56f2a 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -240,6 +240,7 @@
     "CAMPAIGNS": "Campaigns",
     "ONGOING": "Ongoing",
     "ONE_OFF": "One off",
+    "REPORTS_SLA": "SLA",
     "REPORTS_BOT": "Bot",
     "REPORTS_AGENT": "Agents",
     "REPORTS_LABEL": "Labels",
diff --git a/app/javascript/dashboard/i18n/locale/en/sla.json b/app/javascript/dashboard/i18n/locale/en/sla.json
index 34f65c8a9..d47e89c05 100644
--- a/app/javascript/dashboard/i18n/locale/en/sla.json
+++ b/app/javascript/dashboard/i18n/locale/en/sla.json
@@ -65,7 +65,7 @@
     },
     "ADD": {
       "TITLE": "Add SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
+      "DESC": "Friendly promises for great service!",
       "API": {
         "SUCCESS_MESSAGE": "SLA added successfully",
         "ERROR_MESSAGE": "There was an error, please try again"
diff --git a/app/javascript/dashboard/mixins/attributeMixin.js b/app/javascript/dashboard/mixins/attributeMixin.js
index 6348067b2..5bc05a4ae 100644
--- a/app/javascript/dashboard/mixins/attributeMixin.js
+++ b/app/javascript/dashboard/mixins/attributeMixin.js
@@ -29,33 +29,6 @@ export default {
     conversationId() {
       return this.currentChat.id;
     },
-
-    filteredAttributes() {
-      return Object.keys(this.customAttributes).map(key => {
-        const item = this.attributes.find(
-          attribute => attribute.attribute_key === key
-        );
-        if (item) {
-          return {
-            ...item,
-            value: this.customAttributes[key],
-          };
-        }
-
-        return {
-          ...item,
-          value: this.customAttributes[key],
-          attribute_description: key,
-          attribute_display_name: key,
-          attribute_display_type: this.attributeDisplayType(
-            this.customAttributes[key]
-          ),
-          attribute_key: key,
-          attribute_model: this.attributeType,
-          id: Math.random(),
-        };
-      });
-    },
   },
   methods: {
     isAttributeNumber(attributeValue) {
diff --git a/app/javascript/dashboard/mixins/conversation/labelMixin.js b/app/javascript/dashboard/mixins/conversation/labelMixin.js
index 5d0e17507..6c9e954b6 100644
--- a/app/javascript/dashboard/mixins/conversation/labelMixin.js
+++ b/app/javascript/dashboard/mixins/conversation/labelMixin.js
@@ -4,6 +4,10 @@ export default {
   computed: {
     ...mapGetters({ accountLabels: 'labels/getLabels' }),
     savedLabels() {
+      // If conversationLabels is passed as prop, use it
+      if (this.conversationLabels)
+        return this.conversationLabels.split(',').map(item => item.trim());
+      // Otherwise, get labels from store
       return this.$store.getters['conversationLabels/getConversationLabels'](
         this.conversationId
       );
diff --git a/app/javascript/dashboard/mixins/specs/attributeFixtures.js b/app/javascript/dashboard/mixins/specs/attributeFixtures.js
deleted file mode 100644
index 4ade79cde..000000000
--- a/app/javascript/dashboard/mixins/specs/attributeFixtures.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default [
-  {
-    attribute_description: 'Product name',
-    attribute_display_name: 'Product name',
-    attribute_display_type: 'text',
-    attribute_key: 'product_name',
-    attribute_model: 'conversation_attribute',
-    created_at: '2021-09-03T10:45:09.587Z',
-    default_value: null,
-    id: 6,
-    updated_at: '2021-09-22T10:40:42.511Z',
-  },
-  {
-    attribute_description: 'Product identifier',
-    attribute_display_name: 'Product id',
-    attribute_display_type: 'number',
-    attribute_key: 'product_id',
-    attribute_model: 'conversation_attribute',
-    created_at: '2021-09-16T13:06:47.329Z',
-    default_value: null,
-    icon: 'fluent-calculator',
-    id: 10,
-    updated_at: '2021-09-22T10:42:25.873Z',
-    value: 2021,
-  },
-];
diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
index 9a5efa463..d725f758c 100644
--- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
+++ b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
@@ -1,7 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import attributeMixin from '../attributeMixin';
 import Vuex from 'vuex';
-import attributeFixtures from './attributeFixtures';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -41,43 +40,6 @@ describe('attributeMixin', () => {
     expect(wrapper.vm.conversationId).toEqual(7165);
   });
 
-  it('returns filtered attributes from conversation custom attributes', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        attributes() {
-          return attributeFixtures;
-        },
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              product_id: 2021,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.filteredAttributes).toEqual([
-      {
-        attribute_description: 'Product identifier',
-        attribute_display_name: 'Product id',
-        attribute_display_type: 'number',
-        attribute_key: 'product_id',
-        attribute_model: 'conversation_attribute',
-        created_at: '2021-09-16T13:06:47.329Z',
-        default_value: null,
-        icon: 'fluent-calculator',
-        id: 10,
-        updated_at: '2021-09-22T10:42:25.873Z',
-        value: 2021,
-      },
-    ]);
-  });
-
   it('return display type if attribute passed', () => {
     const Component = {
       render() {},
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index d87615909..c7bc915b5 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -38,13 +38,10 @@
                 :contact-id="contact.id"
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
+                attribute-from="contact_panel"
                 :custom-attributes="contact.custom_attributes"
                 class="even"
               />
-              <custom-attribute-selector
-                attribute-type="contact_attribute"
-                :contact-id="contact.id"
-              />
             </accordion-item>
           </div>
           <div v-if="element.name === 'contact_labels'">
@@ -85,7 +82,6 @@ import ContactConversations from 'dashboard/routes/dashboard/conversation/Contac
 import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
 import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
 import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import CustomAttributeSelector from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -96,7 +92,6 @@ export default {
     ContactInfo,
     ContactLabel,
     CustomAttributes,
-    CustomAttributeSelector,
     draggable,
   },
   mixins: [uiSettingsMixin],
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index 81973a395..41e0dff56 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -25,6 +25,7 @@
         @on-sort-change="onSortChange"
       />
       <table-footer
+        class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 397888b1c..81c889b21 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -87,10 +87,7 @@
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
                 class="even"
-                :contact-id="contact.id"
-              />
-              <custom-attribute-selector
-                attribute-type="contact_attribute"
+                attribute-from="conversation_contact_panel"
                 :contact-id="contact.id"
               />
             </accordion-item>
@@ -142,7 +139,6 @@ import ConversationParticipant from './ConversationParticipant.vue';
 import ContactInfo from './contact/ContactInfo.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
-import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
@@ -154,7 +150,6 @@ export default {
     ContactInfo,
     ConversationInfo,
     CustomAttributes,
-    CustomAttributeSelector,
     ConversationAction,
     ConversationParticipant,
     draggable,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 7609e949e..5f488341d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -1,152 +1,109 @@
-<template>
-  <div class="conversation--details">
-    <contact-details-item
-      v-if="initiatedAt"
-      :title="$t('CONTACT_PANEL.INITIATED_AT')"
-      :value="initiatedAt.timestamp"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="browserLanguage"
-      :title="$t('CONTACT_PANEL.BROWSER_LANGUAGE')"
-      :value="browserLanguage"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="referer"
-      :title="$t('CONTACT_PANEL.INITIATED_FROM')"
-      :value="referer"
-      class="conversation--attribute"
-    >
-      <a :href="referer" rel="noopener noreferrer nofollow" target="_blank">
-        {{ referer }}
-      </a>
-    </contact-details-item>
-    <contact-details-item
-      v-if="browserName"
-      :title="$t('CONTACT_PANEL.BROWSER')"
-      :value="browserName"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="platformName"
-      :title="$t('CONTACT_PANEL.OS')"
-      :value="platformName"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="ipAddress"
-      :title="$t('CONTACT_PANEL.IP_ADDRESS')"
-      :value="ipAddress"
-      class="conversation--attribute"
-    />
-    <custom-attributes
-      attribute-type="conversation_attribute"
-      attribute-class="conversation--attribute"
-      :class="customAttributeRowClass"
-    />
-    <custom-attribute-selector attribute-type="conversation_attribute" />
-  </div>
-</template>
-
-<script>
-import { getLanguageName } from '../../../components/widgets/conversation/advancedFilterItems/languages';
+<script setup>
+import { computed } from 'vue';
+import { getLanguageName } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
-import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
+const props = defineProps({
+  conversationAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  contactAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 
-export default {
-  components: {
-    ContactDetailsItem,
-    CustomAttributes,
-    CustomAttributeSelector,
-  },
-  props: {
-    conversationAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    contactAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  STATIC_ATTRIBUTES: [
+const referer = computed(() => props.conversationAttributes.referer);
+const initiatedAt = computed(
+  () => props.conversationAttributes.initiated_at?.timestamp
+);
+
+const browserInfo = props.conversationAttributes.browser;
+
+const browserName = computed(() => {
+  if (!browserInfo) return '';
+  const { browser_name: name = '', browser_version: version = '' } =
+    browserInfo;
+  return `${name} ${version}`;
+});
+
+const browserLanguage = computed(() =>
+  getLanguageName(props.conversationAttributes.browser_language)
+);
+
+const platformName = computed(() => {
+  if (!browserInfo) return '';
+  const { platform_name: name = '', platform_version: version = '' } =
+    browserInfo;
+  return `${name} ${version}`;
+});
+
+const createdAtIp = computed(() => props.contactAttributes.created_at_ip);
+
+const staticElements = computed(() =>
+  [
     {
-      name: 'initiated_at',
-      label: 'CONTACT_PANEL.INITIATED_AT',
+      content: initiatedAt,
+      title: 'CONTACT_PANEL.INITIATED_AT',
     },
     {
-      name: 'referer',
-      label: 'CONTACT_PANEL.BROWSER',
+      content: browserLanguage,
+      title: 'CONTACT_PANEL.BROWSER_LANGUAGE',
     },
     {
-      name: 'browserName',
-      label: 'CONTACT_PANEL.BROWSER',
+      content: referer,
+      title: 'CONTACT_PANEL.INITIATED_FROM',
+      type: 'link',
     },
     {
-      name: 'platformName',
-      label: 'CONTACT_PANEL.OS',
+      content: browserName,
+      title: 'CONTACT_PANEL.BROWSER',
     },
     {
-      name: 'ipAddress',
-      label: 'CONTACT_PANEL.IP_ADDRESS',
+      content: platformName,
+      title: 'CONTACT_PANEL.OS',
     },
-  ],
-  computed: {
-    referer() {
-      return this.conversationAttributes.referer;
+    {
+      content: createdAtIp,
+      title: 'CONTACT_PANEL.IP_ADDRESS',
     },
-    initiatedAt() {
-      return this.conversationAttributes.initiated_at;
-    },
-    browserName() {
-      if (!this.conversationAttributes.browser) {
-        return '';
-      }
-      const {
-        browser_name: browserName = '',
-        browser_version: browserVersion = '',
-      } = this.conversationAttributes.browser;
-      return `${browserName} ${browserVersion}`;
-    },
-    browserLanguage() {
-      return getLanguageName(this.conversationAttributes.browser_language);
-    },
-    platformName() {
-      if (!this.conversationAttributes.browser) {
-        return '';
-      }
-      const { platform_name: platformName, platform_version: platformVersion } =
-        this.conversationAttributes.browser;
-      return `${platformName || ''} ${platformVersion || ''}`;
-    },
-    ipAddress() {
-      const { created_at_ip: createdAtIp } = this.contactAttributes;
-      return createdAtIp;
-    },
-    customAttributeRowClass() {
-      const attributes = [
-        'initiatedAt',
-        'referer',
-        'browserName',
-        'platformName',
-        'ipAddress',
-      ];
-      const availableAttributes = attributes.filter(
-        attribute => !!this[attribute]
-      );
-      return availableAttributes.length % 2 === 0 ? 'even' : 'odd';
-    },
-  },
-};
+  ].filter(attribute => !!attribute.content.value)
+);
 </script>
+
+<template>
+  <div class="conversation--details">
+    <ContactDetailsItem
+      v-for="element in staticElements"
+      :key="element.title"
+      :title="$t(element.title)"
+      :value="element.content.value"
+      class="conversation--attribute"
+    >
+      <a
+        v-if="element.type === 'link'"
+        :href="referer"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+        class="text-woot-400 dark:text-woot-600"
+      >
+        {{ referer }}
+      </a>
+    </ContactDetailsItem>
+    <CustomAttributes
+      :class="staticElements.length % 2 === 0 ? 'even' : 'odd'"
+      attribute-class="conversation--attribute"
+      attribute-from="conversation_panel"
+      attribute-type="conversation_attribute"
+    />
+  </div>
+</template>
 <style scoped lang="scss">
 .conversation--attribute {
-  @apply border-slate-50 dark:border-slate-700 border-b border-solid;
-
+  @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
   &:nth-child(2n) {
-    @apply bg-slate-25 dark:bg-slate-800;
+    @apply bg-slate-25 dark:bg-slate-800/50;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index bbe545a3d..b958d4211 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -125,8 +125,9 @@
       >
         <span
           class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-          >{{ socialProfile.prefixURL }}</span
         >
+          {{ socialProfile.prefixURL }}
+        </span>
         <input
           v-model="socialProfileUserNames[socialProfile.key]"
           class="input-group-field ltr:rounded-l-none rtl:rounded-r-none !mb-0"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
deleted file mode 100644
index c568a0aac..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <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="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.PLACEHOLDER')"
-      />
-    </div>
-    <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"
-            :key="attribute.attribute_display_name"
-            :title="attribute.attribute_display_name"
-            @click="onAddAttribute(attribute)"
-          />
-        </woot-dropdown-menu>
-        <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="float-right"
-          icon="add"
-          size="tiny"
-          @click="addNewAttribute"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.ADD.TITLE') }}
-        </woot-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CustomAttributeDropDownItem from './CustomAttributeDropDownItem.vue';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
-export default {
-  components: {
-    CustomAttributeDropDownItem,
-  },
-  mixins: [attributeMixin],
-  props: {
-    attributeType: {
-      type: String,
-      default: 'conversation_attribute',
-    },
-    contactId: { type: Number, default: null },
-  },
-
-  data() {
-    return {
-      search: '',
-    };
-  },
-
-  computed: {
-    filteredAttributes() {
-      return this.attributes
-        .filter(
-          item =>
-            !Object.keys(this.customAttributes).includes(item.attribute_key)
-        )
-        .filter(attribute => {
-          return attribute.attribute_display_name
-            .toLowerCase()
-            .includes(this.search.toLowerCase());
-        });
-    },
-
-    noResult() {
-      return this.filteredAttributes.length === 0;
-    },
-  },
-
-  mounted() {
-    this.focusInput();
-  },
-
-  methods: {
-    focusInput() {
-      this.$refs.searchbar.focus();
-    },
-    addNewAttribute() {
-      this.$router.push(
-        `/app/accounts/${this.accountId}/settings/custom-attributes/list`
-      );
-    },
-    async onAddAttribute(attribute) {
-      this.$emit('add-attribute', attribute);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.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/CustomAttributeDropDownItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDownItem.vue
deleted file mode 100644
index 8bae9c1b0..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDownItem.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <woot-dropdown-item>
-    <woot-button variant="clear" @click="onClick">
-      <span class="label-text" :title="title">{{ title }}</span>
-    </woot-button>
-  </woot-dropdown-item>
-</template>
-
-<script>
-export default {
-  name: 'AttributeDropDownItem',
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('click', this.title);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.item-wrap {
-  display: flex;
-
-  ::v-deep .button__content {
-    width: 100%;
-  }
-
-  .button-wrap {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    &.active {
-      display: flex;
-      font-weight: var(--font-weight-bold);
-      color: var(--w-700);
-    }
-
-    .name-label-wrap {
-      display: flex;
-      min-width: 0;
-      width: 100%;
-
-      .label-color--display {
-        margin-right: var(--space-small);
-      }
-
-      .label-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1.1;
-        padding-right: var(--space-small);
-        padding-left: var(--space-small);
-      }
-
-      .icon {
-        font-size: var(--font-size-small);
-      }
-    }
-  }
-
-  .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);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
deleted file mode 100644
index 60ef9d860..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div class="custom-attribute--selector">
-    <div
-      v-on-clickaway="closeDropdown"
-      class="label-wrap"
-      @keyup.esc="closeDropdown"
-    >
-      <woot-button
-        size="small"
-        variant="link"
-        icon="add"
-        @click="toggleAttributeDropDown"
-      >
-        {{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}
-      </woot-button>
-
-      <div class="dropdown-wrap">
-        <div
-          :class="{ 'dropdown-pane--open': showAttributeDropDown }"
-          class="dropdown-pane"
-        >
-          <custom-attribute-drop-down
-            v-if="showAttributeDropDown"
-            :attribute-type="attributeType"
-            :contact-id="contactId"
-            @add-attribute="addAttribute"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CustomAttributeDropDown from './CustomAttributeDropDown.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
-import { mixin as clickaway } from 'vue-clickaway';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-
-export default {
-  components: {
-    CustomAttributeDropDown,
-  },
-  mixins: [clickaway, alertMixin, attributeMixin],
-  props: {
-    attributeType: {
-      type: String,
-      default: 'conversation_attribute',
-    },
-    contactId: { type: Number, default: null },
-  },
-  data() {
-    return {
-      showAttributeDropDown: false,
-    };
-  },
-  methods: {
-    async addAttribute(attribute) {
-      try {
-        const {
-          attribute_key: attributeKey,
-          attribute_display_type: attributeDisplayType,
-          default_value: attributeDefaultValue,
-        } = attribute;
-        const isCheckbox = attributeDisplayType === 'checkbox';
-        const defaultValue = isCheckbox ? false : attributeDefaultValue || null;
-        if (this.attributeType === 'conversation_attribute') {
-          await this.$store.dispatch('updateCustomAttributes', {
-            conversationId: this.conversationId,
-            customAttributes: {
-              ...this.customAttributes,
-              [attributeKey]: defaultValue,
-            },
-          });
-        } else {
-          await this.$store.dispatch('contacts/update', {
-            id: this.contactId,
-            custom_attributes: {
-              ...this.customAttributes,
-              [attributeKey]: defaultValue,
-            },
-          });
-        }
-        bus.$emit(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, attributeKey);
-        this.showAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.SUCCESS'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.ERROR');
-        this.showAlert(errorMessage);
-      } finally {
-        this.closeDropdown();
-      }
-    },
-
-    toggleAttributeDropDown() {
-      this.showAttributeDropDown = !this.showAttributeDropDown;
-    },
-
-    closeDropdown() {
-      this.showAttributeDropDown = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.custom-attribute--selector {
-  width: 100%;
-  padding: var(--space-slab) var(--space-normal);
-
-  .label-wrap {
-    line-height: var(--space-medium);
-    position: relative;
-
-    .dropdown-wrap {
-      display: flex;
-      left: -1px;
-      margin-right: var(--space-medium);
-      position: absolute;
-      top: var(--space-medium);
-      width: 100%;
-
-      .dropdown-pane {
-        width: 100%;
-        box-sizing: border-box;
-      }
-    }
-  }
-}
-
-.error {
-  color: var(--r-500);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-medium);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index ca721d4d8..cf54e7087 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -1,23 +1,35 @@
 <template>
   <div class="custom-attributes--panel">
     <custom-attribute
-      v-for="attribute in filteredAttributes"
+      v-for="attribute in displayedAttributes"
       :key="attribute.id"
       :attribute-key="attribute.attribute_key"
       :attribute-type="attribute.attribute_display_type"
       :values="attribute.attribute_values"
       :label="attribute.attribute_display_name"
-      :icon="attribute.icon"
-      emoji=""
       :value="attribute.value"
       :show-actions="true"
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :class="attributeClass"
+      :contact-id="contactId"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"
     />
+    <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
+    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
+      <woot-button
+        size="small"
+        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
+        variant="clear"
+        color-scheme="primary"
+        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
+        @click="onClickToggle"
+      >
+        {{ toggleButtonText }}
+      </woot-button>
+    </div>
   </div>
 </template>
 
@@ -25,13 +37,14 @@
 import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import attributeMixin from 'dashboard/mixins/attributeMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 
 export default {
   components: {
     CustomAttribute,
   },
-  mixins: [alertMixin, attributeMixin],
+  mixins: [alertMixin, attributeMixin, uiSettingsMixin],
   props: {
     attributeType: {
       type: String,
@@ -42,8 +55,67 @@ export default {
       default: '',
     },
     contactId: { type: Number, default: null },
+    attributeFrom: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAllAttributes: false,
+    };
+  },
+  computed: {
+    toggleButtonText() {
+      return !this.showAllAttributes
+        ? this.$t('CUSTOM_ATTRIBUTES.SHOW_MORE')
+        : this.$t('CUSTOM_ATTRIBUTES.SHOW_LESS');
+    },
+    filteredAttributes() {
+      return this.attributes.map(attribute => {
+        // Check if the attribute key exists in customAttributes
+        const hasValue = Object.hasOwnProperty.call(
+          this.customAttributes,
+          attribute.attribute_key
+        );
+
+        const isCheckbox = attribute.attribute_display_type === 'checkbox';
+        const defaultValue = isCheckbox ? false : '';
+
+        return {
+          ...attribute,
+          // Set value from customAttributes if it exists, otherwise use default value
+          value: hasValue
+            ? this.customAttributes[attribute.attribute_key]
+            : defaultValue,
+        };
+      });
+    },
+    displayedAttributes() {
+      // Show only the first 5 attributes or all depending on showAllAttributes
+      if (this.showAllAttributes || this.filteredAttributes.length <= 5) {
+        return this.filteredAttributes;
+      }
+      return this.filteredAttributes.slice(0, 5);
+    },
+    showMoreUISettingsKey() {
+      return `show_all_attributes_${this.attributeFrom}`;
+    },
+  },
+  mounted() {
+    this.initializeSettings();
   },
   methods: {
+    initializeSettings() {
+      this.showAllAttributes =
+        this.uiSettings[this.showMoreUISettingsKey] || false;
+    },
+    onClickToggle() {
+      this.showAllAttributes = !this.showAllAttributes;
+      this.updateUISettings({
+        [this.showMoreUISettingsKey]: this.showAllAttributes,
+      });
+    },
     async onUpdate(key, value) {
       const updatedAttributes = { ...this.customAttributes, [key]: value };
       try {
@@ -96,16 +168,17 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="scss">
 .custom-attributes--panel {
   .conversation--attribute {
-    @apply border-slate-50 dark:border-slate-700 border-b border-solid;
+    @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
   }
 
   &.odd {
     .conversation--attribute {
       &:nth-child(2n + 1) {
-        @apply bg-slate-25 dark:bg-slate-800;
+        @apply bg-slate-25 dark:bg-slate-800/50;
       }
     }
   }
@@ -113,7 +186,7 @@ export default {
   &.even {
     .conversation--attribute {
       &:nth-child(2n) {
-        @apply bg-slate-25 dark:bg-slate-800;
+        @apply bg-slate-25 dark:bg-slate-800/50;
       }
     }
   }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index eb20e1e25..1e8c2e92c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -59,7 +59,7 @@
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
-      class="dark:bg-slate-900 sticky bottom-0"
+      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
       @page-change="onPageChange"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index dafee8868..b4df7a0e8 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -9,6 +9,7 @@
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
       <table-footer
+        class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 9d2cd8ee2..709d70b25 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -57,7 +57,7 @@
       :current-page="Number(meta.currentPage)"
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"
-      class="dark:bg-slate-900"
+      class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
       @page-change="onPageChange"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
new file mode 100644
index 000000000..9fe790c97
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="flex flex-col flex-1 px-4 pt-4 overflow-auto">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
+    </woot-button>
+    <div class="flex flex-col gap-6">
+      <SLAMetrics
+        :hit-rate="slaMetrics.hitRate"
+        :no-of-breaches="slaMetrics.numberOfSLAMisses"
+        :no-of-conversations="slaMetrics.numberOfConversations"
+        :is-loading="uiFlags.isFetchingMetrics"
+      />
+      <SLATable
+        :sla-reports="slaReports"
+        :is-loading="uiFlags.isFetching"
+        :current-page="Number(slaMeta.currentPage)"
+        :total-count="Number(slaMeta.count)"
+        @page-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import SLAMetrics from './components/SLA/SLAMetrics.vue';
+import SLATable from './components/SLA/SLATable.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
+import { generateFileName } from 'dashboard/helper/downloadHelper';
+export default {
+  name: 'SLAReports',
+  components: {
+    SLAMetrics,
+    SLATable,
+    SLAReportFilters,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      pageNumber: 1,
+      from: 0,
+      to: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      slaReports: 'slaReports/getAll',
+      slaMetrics: 'slaReports/getMetrics',
+      slaMeta: 'slaReports/getMeta',
+      uiFlags: 'slaReports/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.fetchSLAMetrics();
+    this.fetchSLAReports();
+  },
+  methods: {
+    fetchSLAReports({ pageNumber } = {}) {
+      this.$store.dispatch('slaReports/get', {
+        page: pageNumber || this.pageNumber,
+        from: this.from,
+        to: this.to,
+      });
+    },
+    fetchSLAMetrics() {
+      this.$store.dispatch('slaReports/getMetrics', {
+        from: this.from,
+        to: this.to,
+      });
+    },
+    onPageChange(pageNumber) {
+      this.fetchSLAReports({ pageNumber });
+    },
+    onFilterChange({ from, to }) {
+      this.from = from;
+      this.to = to;
+      this.fetchSLAReports();
+      this.fetchSLAMetrics();
+    },
+    downloadReports() {
+      const type = 'sla';
+      try {
+        this.$store.dispatch('slaReports/download', {
+          fileName: generateFileName({ type, to: this.to }),
+          ...this.requestPayload,
+        });
+      } catch (error) {
+        this.showAlert(this.$t('SLA_REPORTS.DOWNLOAD_FAILED'));
+      }
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 84bae6198..0116f54d6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col md:flex-row justify-between mb-4">
-    <div class="md:grid flex flex-col filter-container gap-3 w-full">
+    <div
+      class="md:grid flex-col gap-3 w-full grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] p-5"
+    >
       <reports-filters-date-range @on-range-change="onDateRangeChange" />
       <woot-date-range-picker
         v-if="isDateRangeSelected"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 78e068d6c..634325393 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
+      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
     >
       {{ label }}
       <fluent-icon
@@ -9,12 +9,12 @@
         size="14"
         icon="information"
         type="outline"
-        class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
       />
     </span>
     <div
       v-if="isLoading"
-      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 animate-pulse"
+      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
     />
 
     <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 2abc1c601..5c598b403 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -13,9 +13,18 @@
       class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
     />
     <SLAMetricCard
-      :label="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.LABEL')"
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
       :value="noOfBreaches"
-      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
+    <SLAMetricCard
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
+      :value="noOfConversations"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.TOOLTIP')"
       :is-loading="isLoading"
     />
   </div>
@@ -32,6 +41,10 @@ defineProps({
     type: Number,
     required: true,
   },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
   isLoading: {
     type: Boolean,
     default: false,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
new file mode 100644
index 000000000..5748366b6
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-col md:flex-row justify-between mb-4">
+    <div class="md:grid flex flex-col filter-container gap-3 w-full">
+      <reports-filters-date-range @on-range-change="onDateRangeChange" />
+      <woot-date-range-picker
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ReportsFiltersDateRange from '../Filters/DateRange.vue';
+import subDays from 'date-fns/subDays';
+import { DATE_RANGE_OPTIONS } from '../../constants';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+
+export default {
+  components: {
+    WootDateRangePicker,
+    ReportsFiltersDateRange,
+  },
+
+  data() {
+    return {
+      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
+      selectedGroupByFilter: null,
+      customDateRange: [new Date(), new Date()],
+    };
+  },
+  computed: {
+    isDateRangeSelected() {
+      return (
+        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
+      );
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return getUnixEndOfDay(this.customDateRange[1]);
+      }
+      return getUnixEndOfDay(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return getUnixStartOfDay(this.customDateRange[0]);
+      }
+
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      return getUnixStartOfDay(fromDate);
+    },
+  },
+  watch: {
+    businessHoursSelected() {
+      this.emitChange();
+    },
+  },
+  mounted() {
+    this.emitChange();
+  },
+  methods: {
+    emitChange() {
+      const { from, to } = this;
+      this.$emit('filter-change', {
+        from,
+        to,
+      });
+    },
+    onDateRangeChange(selectedRange) {
+      this.selectedDateRange = selectedRange;
+      this.emitChange();
+    },
+    onCustomDateRangeChange(value) {
+      this.customDateRange = value;
+      this.emitChange();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter-container {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
new file mode 100644
index 000000000..129265cdf
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -0,0 +1,59 @@
+<script setup>
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+import SLAViewDetails from './SLAViewDetails.vue';
+defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  slaEvents: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div
+    class="grid content-center items-center h-16 grid-cols-12 gap-4 px-6 py-0 w-full bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+  >
+    <div
+      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <span class="text-slate-700 dark:text-slate-200">
+        {{ `#${conversationId} ` }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-300">with </span>
+      <span class="text-slate-700 dark:text-slate-200 capitalize truncate">{{
+        conversation.contact.name
+      }}</span>
+      <card-labels
+        class="w-[80%]"
+        :conversation-id="conversationId"
+        :conversation-labels="conversation.labels"
+      />
+    </div>
+    <div
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right col-span-2"
+    >
+      {{ slaName }}
+    </div>
+    <div class="flex items-center gap-2 col-span-2">
+      <user-avatar-with-name
+        v-if="conversation.assignee"
+        :user="conversation.assignee"
+      />
+      <span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
+    </div>
+    <SLAViewDetails :sla-events="slaEvents" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
new file mode 100644
index 000000000..61ac3056f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div
+      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+    >
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+      >
+        <table-header-cell
+          :span="6"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
+        />
+        <table-header-cell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
+        />
+        <table-header-cell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
+        />
+        <table-header-cell :span="2" label="" />
+      </div>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
+      >
+        <spinner />
+        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
+      </div>
+      <div v-else-if="slaReports.length > 0">
+        <SLA-report-item
+          v-for="slaReport in slaReports"
+          :key="slaReport.applied_sla.id"
+          :sla-name="slaReport.applied_sla.sla_name"
+          :conversation="slaReport.conversation"
+          :conversation-id="slaReport.conversation.id"
+          :sla-events="slaReport.sla_events"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center rounded-b-xl h-32 bg-white dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
+    </div>
+    <table-footer
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+
+<script>
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import SLAReportItem from './SLAReportItem.vue';
+import Spinner from 'shared/components/Spinner.vue';
+export default {
+  name: 'SLATable',
+  components: {
+    SLAReportItem,
+    TableFooter,
+    Spinner,
+    TableHeaderCell,
+  },
+  props: {
+    slaReports: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 25,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      pageNo: 1,
+    };
+  },
+  computed: {
+    shouldShowFooter() {
+      return this.currentPage === 1
+        ? this.totalCount > this.pageSize
+        : this.slaReports.length > 0;
+    },
+  },
+  methods: {
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
new file mode 100644
index 000000000..72bc4749a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <div class="relative">
+        <woot-button
+          color-scheme="secondary"
+          variant="link"
+          @click="openSlaEvents"
+        >
+          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+        </woot-button>
+        <SLA-popover-card
+          v-if="showSlaPopoverCard"
+          :all-missed-slas="slaEvents"
+          class="right-0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
+export default {
+  components: {
+    SLAPopoverCard,
+  },
+  mixins: [clickaway],
+
+  props: {
+    slaEvents: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      showSlaPopoverCard: false,
+    };
+  },
+
+  methods: {
+    closeSlaEvents() {
+      this.showSlaPopoverCard = false;
+    },
+    openSlaEvents() {
+      this.showSlaPopoverCard = !this.showSlaPopoverCard;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 5e363553d..3792567da 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -9,6 +9,7 @@ const TeamReports = () => import('./TeamReports.vue');
 const CsatResponses = () => import('./CsatResponses.vue');
 const BotReports = () => import('./BotReports.vue');
 const LiveReports = () => import('./LiveReports.vue');
+const SLAReports = () => import('./SLAReports.vue');
 
 export default {
   routes: [
@@ -151,5 +152,22 @@ export default {
         },
       ],
     },
+    {
+      path: frontendURL('accounts/:accountId/reports'),
+      component: SettingsContent,
+      props: {
+        headerTitle: 'SLA_REPORTS.HEADER',
+        icon: 'document-list-clock',
+        keepAlive: false,
+      },
+      children: [
+        {
+          path: 'sla',
+          name: 'sla_reports',
+          roles: ['administrator'],
+          component: SLAReports,
+        },
+      ],
+    },
   ],
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index 029e2bda8..bbe0ac7fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -5,6 +5,11 @@
         v-model="name"
         :class="{ error: $v.name.$error }"
         class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
         :error="getSlaNameErrorMessage"
@@ -13,6 +18,11 @@
       <woot-input
         v-model="description"
         class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
         :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
       />
@@ -29,23 +39,29 @@
         @isInValid="handleIsInvalid(index, $event)"
       />
 
-      <div class="flex items-center w-full gap-2">
-        <input id="sla_bh" v-model="onlyDuringBusinessHours" type="checkbox" />
-        <label for="sla_bh">
+      <div
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
+      >
+        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
-        </label>
+        </span>
+        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
       </div>
 
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+      <div class="flex items-center justify-end w-full gap-2 mt-8">
+        <woot-button
+          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+          @click.prevent="onClose"
+        >
+          {{ $t('SLA.FORM.CANCEL') }}
+        </woot-button>
         <woot-button
           :is-disabled="isSubmitDisabled"
+          class="px-4 rounded-xl"
           :is-loading="uiFlags.isUpdating"
         >
           {{ submitLabel }}
         </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
       </div>
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index 5cf6229c3..d8c7594c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -1,18 +1,24 @@
 <template>
-  <div class="relative mt-2 w-full">
+  <div class="flex items-center w-full gap-3">
     <woot-input
       v-model="thresholdTime"
       :class="{ error: $v.thresholdTime.$error }"
-      class="w-full [&>input]:pr-24"
+      class="flex-grow"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
       :label="label"
       :placeholder="placeholder"
       :error="getThresholdTimeErrorMessage"
       @input="onThresholdTimeChange"
     />
-    <div class="absolute right-px h-9 top-[27px] flex items-center">
+    <!-- the mt-7 handles the label offset -->
+    <div class="mt-7">
       <select
         v-model="thresholdUnitValue"
-        class="h-full rounded-[4px] hover:cursor-pointer font-medium border-1 border-solid bg-transparent border-transparent dark:border-transparent mb-0 py-0 pl-2 pr-7 text-slate-600 dark:text-slate-300 dark:focus:border-woot-500 focus:border-woot-500 text-sm"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
         @change="onThresholdUnitChange"
       >
         <option
@@ -56,9 +62,9 @@ export default {
       thresholdTime: this.threshold || '',
       thresholdUnitValue: this.thresholdUnit,
       options: [
-        { value: 'Minutes', label: 'Minutes' },
-        { value: 'Hours', label: 'Hours' },
-        { value: 'Days', label: 'Days' },
+        { value: 'Minutes', label: 'minutes' },
+        { value: 'Hours', label: 'hours' },
+        { value: 'Days', label: 'days' },
       ],
     };
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
index 7521ef9f5..9041d6a2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
@@ -4,14 +4,22 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 <template>
   <base-settings-list-item class="opacity-50">
     <template #title>
-      <div class="w-24 h-[26px] rounded-md bg-slate-50 animate-pulse" />
+      <div
+        class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
     </template>
     <template #description>
-      <div class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
-      <div class="w-48 h-4 rounded-md bg-slate-50 animate-pulse" />
+      <div
+        class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
+      <div
+        class="w-48 h-4 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
     </template>
     <template #label>
-      <div class="w-32 h-[26px] bg-slate-50 animate-pulse rounded-md" />
+      <div
+        class="w-32 h-[26px] bg-slate-50 dark:bg-slate-700 animate-pulse rounded-md"
+      />
     </template>
     <template #rightSection>
       <div
@@ -22,7 +30,9 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
           :key="ii"
           class="flex justify-end w-1/3 h-full px-4"
         >
-          <div class="w-32 h-full rounded-md bg-slate-50 animate-pulse" />
+          <div
+            class="w-32 h-full rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+          />
         </div>
       </div>
     </template>
diff --git a/app/javascript/dashboard/store/modules/SLAReports.js b/app/javascript/dashboard/store/modules/SLAReports.js
index 44c11fd0c..2f0b5b4b5 100644
--- a/app/javascript/dashboard/store/modules/SLAReports.js
+++ b/app/javascript/dashboard/store/modules/SLAReports.js
@@ -1,11 +1,12 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import SLAReportsAPI from '../../api/slaReports';
-
+import { downloadCsvFile } from 'dashboard/helper/downloadHelper';
 export const state = {
   records: [],
   metrics: {
-    numberOfSLABreaches: 0,
+    numberOfConversations: 0,
+    numberOfSLAMisses: 0,
     hitRate: '0%',
   },
   uiFlags: {
@@ -59,6 +60,11 @@ export const actions = {
       commit(types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: false });
     }
   },
+  download(_, params) {
+    return SLAReportsAPI.download(params).then(response => {
+      downloadCsvFile(params.fileName, response.data);
+    });
+  },
 };
 
 export const mutations = {
@@ -72,19 +78,21 @@ export const mutations = {
   [types.SET_SLA_REPORTS]: MutationHelpers.set,
   [types.SET_SLA_REPORTS_METRICS](
     _state,
-    { number_of_sla_breaches: numberOfSLABreaches, hit_rate: hitRate }
+    {
+      number_of_sla_misses: numberOfSLAMisses,
+      hit_rate: hitRate,
+      total_applied_slas: numberOfConversations,
+    }
   ) {
     _state.metrics = {
-      numberOfSLABreaches,
+      numberOfSLAMisses,
       hitRate,
+      numberOfConversations,
     };
   },
-  [types.SET_SLA_REPORTS_META](
-    _state,
-    { total_applied_slas: totalAppliedSLAs, current_page: currentPage }
-  ) {
+  [types.SET_SLA_REPORTS_META](_state, { count, current_page: currentPage }) {
     _state.meta = {
-      count: totalAppliedSLAs,
+      count,
       currentPage,
     };
   },
diff --git a/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js b/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js
index 6eddb3f60..c50a72027 100644
--- a/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js
@@ -21,4 +21,33 @@ describe('#getters', () => {
       isFetchingMetrics: false,
     });
   });
+
+  it('getMeta', () => {
+    const state = {
+      meta: {
+        count: 0,
+        currentPage: 1,
+      },
+    };
+    expect(getters.getMeta(state)).toEqual({
+      count: 0,
+      currentPage: 1,
+    });
+  });
+
+  it('getMetrics', () => {
+    const state = {
+      metrics: {
+        numberOfConversations: 27,
+        numberOfSLAMisses: 25,
+        hitRate: '7.41%',
+      },
+    };
+
+    expect(getters.getMetrics(state)).toEqual({
+      numberOfConversations: 27,
+      numberOfSLAMisses: 25,
+      hitRate: '7.41%',
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js
index 04e171889..fbeced61d 100644
--- a/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js
@@ -23,12 +23,14 @@ describe('#mutations', () => {
     it('set metrics', () => {
       const state = { metrics: {} };
       mutations[types.SET_SLA_REPORTS_METRICS](state, {
-        number_of_sla_breaches: 1,
+        number_of_sla_misses: 1,
         hit_rate: '100%',
+        total_applied_slas: 1,
       });
       expect(state.metrics).toEqual({
-        numberOfSLABreaches: 1,
+        numberOfSLAMisses: 1,
         hitRate: '100%',
+        numberOfConversations: 1,
       });
     });
   });
@@ -37,7 +39,7 @@ describe('#mutations', () => {
     it('set meta', () => {
       const state = { meta: {} };
       mutations[types.SET_SLA_REPORTS_META](state, {
-        total_applied_slas: 1,
+        count: 1,
         current_page: 1,
       });
       expect(state.meta).toEqual({
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index a73d4045d..316c0833e 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -273,5 +273,9 @@
     "M8.66675 11.1667L10.3334 12.8333L13.6667 9.5",
     "M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
     "M19.5001 19.5001L15.9167 15.9167"
-  ]
+  ],
+  "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
+  "chevron-left-single-outline": "m15 18-6-6 6-6",
+  "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
+  "chevron-right-single-outline": "m9 18 6-6-6-6"
 }
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 350f26e88..78b817ce0 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -7,10 +7,10 @@
     <woot-button
       variant="hollow"
       color-scheme="secondary"
-      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"
+      class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
       @click="toggleDropdown"
     >
-      <div class="flex">
+      <div class="flex gap-1">
         <Thumbnail
           v-if="hasValue && hasThumbnail"
           :src="selectedItem.thumbnail"
@@ -21,19 +21,22 @@
         <div class="flex justify-between w-full min-w-0 items-center">
           <h4
             v-if="!hasValue"
-            class="mt-0 mb-0 mr-2 ml-0 text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+            class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
           >
             {{ multiselectorPlaceholder }}
           </h4>
           <h4
             v-else
-            class="items-center leading-tight my-0 mx-2 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+            class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
             :title="selectedItem.name"
           >
             {{ selectedItem.name }}
           </h4>
-          <i v-if="showSearchDropdown" class="icon ion-chevron-up" />
-          <i v-else class="icon ion-chevron-down" />
+          <i
+            v-if="showSearchDropdown"
+            class="icon ion-chevron-up text-slate-600 mr-1"
+          />
+          <i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
         </div>
       </div>
     </woot-button>
@@ -137,6 +140,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-[2.625rem] w-full;
diff --git a/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb b/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb
index 4ec27bbbb..e195686a3 100644
--- a/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb
+++ b/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb
@@ -6,22 +6,23 @@ class Api::V1::Accounts::AppliedSlasController < Api::V1::Accounts::EnterpriseAc
 
   before_action :set_applied_slas, only: [:index, :metrics, :download]
   before_action :set_current_page, only: [:index]
-  before_action :paginate_slas, only: [:index]
   before_action :check_admin_authorization?
 
   sort_on :created_at, type: :datetime
 
-  def index; end
+  def index
+    @count = number_of_sla_misses
+    @applied_slas = @missed_applied_slas.page(@current_page).per(RESULTS_PER_PAGE)
+  end
 
   def metrics
     @total_applied_slas = total_applied_slas
-    @number_of_sla_breaches = number_of_sla_breaches
+    @number_of_sla_misses = number_of_sla_misses
     @hit_rate = hit_rate
   end
 
   def download
-    @breached_slas = breached_slas
-
+    @missed_applied_slas = missed_applied_slas
     response.headers['Content-Type'] = 'text/csv'
     response.headers['Content-Disposition'] = 'attachment; filename=breached_conversation.csv'
     render layout: false, formats: [:csv]
@@ -29,41 +30,38 @@ class Api::V1::Accounts::AppliedSlasController < Api::V1::Accounts::EnterpriseAc
 
   private
 
-  def breached_slas
-    @applied_slas.includes(:sla_policy).joins(:conversation)
-                 .where.not(conversations: { status: :resolved })
-                 .where(applied_slas: { sla_status: :missed })
-  end
-
   def total_applied_slas
     @total_applied_slas ||= @applied_slas.count
   end
 
-  def number_of_sla_breaches
-    @number_of_sla_breaches ||= @applied_slas.missed.count
+  def number_of_sla_misses
+    @number_of_sla_misses ||= missed_applied_slas.count
   end
 
   def hit_rate
-    number_of_sla_breaches.zero? ? '100%' : "#{hit_rate_percentage}%"
+    number_of_sla_misses.zero? ? '100%' : "#{hit_rate_percentage}%"
   end
 
   def hit_rate_percentage
-    ((total_applied_slas - number_of_sla_breaches) / total_applied_slas.to_f * 100).round(2)
+    ((total_applied_slas - number_of_sla_misses) / total_applied_slas.to_f * 100).round(2)
   end
 
   def set_applied_slas
     initial_query = Current.account.applied_slas.includes(:conversation)
-    @applied_slas = initial_query
-                    .filter_by_date_range(range)
-                    .filter_by_inbox_id(params[:inbox_id])
-                    .filter_by_team_id(params[:team_id])
-                    .filter_by_sla_policy_id(params[:sla_policy_id])
-                    .filter_by_label_list(params[:label_list])
-                    .filter_by_assigned_agent_id(params[:assigned_agent_id])
+    @applied_slas = apply_filters(initial_query)
   end
 
-  def paginate_slas
-    @applied_slas = @applied_slas.page(@current_page).per(RESULTS_PER_PAGE)
+  def apply_filters(query)
+    query.filter_by_date_range(range)
+         .filter_by_inbox_id(params[:inbox_id])
+         .filter_by_team_id(params[:team_id])
+         .filter_by_sla_policy_id(params[:sla_policy_id])
+         .filter_by_label_list(params[:label_list])
+         .filter_by_assigned_agent_id(params[:assigned_agent_id])
+  end
+
+  def missed_applied_slas
+    @missed_applied_slas ||= @applied_slas.missed
   end
 
   def set_current_page
diff --git a/enterprise/app/models/applied_sla.rb b/enterprise/app/models/applied_sla.rb
index ce67fad07..0ae634536 100644
--- a/enterprise/app/models/applied_sla.rb
+++ b/enterprise/app/models/applied_sla.rb
@@ -39,7 +39,7 @@ class AppliedSla < ApplicationRecord
                                           joins(:conversation).where(conversations: { assigned_agent_id: assigned_agent_id })
                                         end
                                       }
-  scope :missed, -> { where(sla_status: :missed) }
+  scope :missed, -> { where(sla_status: %i[missed active_with_misses]) }
 
   after_update_commit :push_conversation_event
 
diff --git a/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb b/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb
index 676d6d680..9078eff25 100644
--- a/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb
+++ b/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb
@@ -10,8 +10,8 @@
 ] %>
 <%= CSV.generate_line headers %>
 
-<% @breached_slas.each do |sla| %>
-  <% breached_events = sla.sla_events.map(&:event_type).join(', ') %>
+<% @missed_applied_slas.each do |sla| %>
+  <% missed_events = sla.sla_events.map(&:event_type).join(', ') %>
   <% conversation = sla.conversation %>
   <%= CSV.generate_line([
     conversation.display_id,
@@ -21,6 +21,6 @@
     conversation.inbox&.name,
     conversation.cached_label_list,
     app_account_conversation_url(account_id: conversation.account_id, id: conversation.display_id),
-    breached_events
+    missed_events
   ]) %>
 <% end %>
diff --git a/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder b/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder
index e9a905d56..35b723807 100644
--- a/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder
@@ -1,14 +1,22 @@
-json.array! @applied_slas do |applied_sla|
-  json.id applied_sla.id
-  json.sla_policy_id applied_sla.sla_policy_id
-  json.conversation_id applied_sla.conversation_id
-  json.sla_status applied_sla.sla_status
-  json.created_at applied_sla.created_at
-  json.updated_at applied_sla.updated_at
-  json.conversation do
-    json.partial! 'api/v1/models/conversation', conversation: applied_sla.conversation
-  end
-  json.sla_events applied_sla.sla_events do |sla_event|
-    json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+json.payload do
+  json.array! @applied_slas do |applied_sla|
+    json.applied_sla applied_sla.push_event_data
+    json.conversation do
+      conversation = applied_sla.conversation
+      json.id conversation.id
+      json.contact do
+        json.name conversation.contact.name if conversation.contact
+      end
+      json.labels conversation.cached_label_list
+      json.assignee conversation.assignee.push_event_data if conversation.assignee
+    end
+    json.sla_events applied_sla.sla_events do |sla_event|
+      json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+    end
   end
 end
+
+json.meta do
+  json.count @count
+  json.current_page @current_page
+end
diff --git a/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder b/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder
index 13f184845..2752d901a 100644
--- a/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder
@@ -1,3 +1,3 @@
 json.total_applied_slas @total_applied_slas
-json.number_of_sla_breaches @number_of_sla_breaches
+json.number_of_sla_misses @number_of_sla_misses
 json.hit_rate @hit_rate
diff --git a/package.json b/package.json
index 313821424..e981ac52d 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "size-limit": [
     {
       "path": "public/packs/js/widget-*.js",
-      "limit": "280 KB"
+      "limit": "281 KB"
     },
     {
       "path": "public/packs/js/sdk.js",
diff --git a/spec/controllers/devise/session_controller_spec.rb b/spec/controllers/devise/session_controller_spec.rb
index d856e0ebf..42f8b8bd8 100644
--- a/spec/controllers/devise/session_controller_spec.rb
+++ b/spec/controllers/devise/session_controller_spec.rb
@@ -74,4 +74,12 @@ RSpec.describe 'Session', type: :request do
       end
     end
   end
+
+  describe 'GET /auth/sign_in' do
+    it 'redirects to the frontend login page with error' do
+      get new_user_session_url
+
+      expect(response).to redirect_to(%r{/app/login\?error=access-denied$})
+    end
+  end
 end
diff --git a/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
index 3945c8c93..34389dad4 100644
--- a/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
@@ -33,7 +33,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 1)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '0.0%')
       end
 
@@ -48,7 +48,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 1)
-        expect(body).to include('number_of_sla_breaches' => 0)
+        expect(body).to include('number_of_sla_misses' => 0)
         expect(body).to include('hit_rate' => '100%')
       end
 
@@ -64,7 +64,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 3)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '66.67%')
       end
 
@@ -80,7 +80,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 2)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '50.0%')
       end
 
@@ -98,7 +98,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 2)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '50.0%')
       end
     end
@@ -128,7 +128,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
 
         csv_data = CSV.parse(response.body)
         csv_data.reject! { |row| row.all?(&:nil?) }
-        expect(csv_data.size).to eq(2)
+        expect(csv_data.size).to eq(3)
         expect(csv_data[1][0].to_i).to eq(conversation1.display_id)
       end
     end
@@ -145,21 +145,20 @@ RSpec.describe 'Applied SLAs API', type: :request do
     context 'when it is an authenticated user' do
       it 'returns the applied slas' do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
         get "/api/v1/accounts/#{account.id}/applied_slas",
             headers: administrator.create_new_auth_token
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
-
-        expect(body.size).to eq(2)
-        expect(body.first).to include('id')
-        expect(body.first).to include('sla_policy_id' => sla_policy1.id)
-        expect(body.first).to include('conversation_id' => conversation1.id)
+        expect(body['payload'].size).to eq(1)
+        expect(body['payload'].first).to include('applied_sla')
+        expect(body['payload'].first['conversation']['id']).to eq(conversation2.id)
+        expect(body['meta']).to include('count' => 1)
       end
 
       it 'filters applied slas based on a date range' do
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { since: 5.days.ago.to_time.to_i.to_s, until: Time.zone.today.to_time.to_i.to_s },
@@ -167,13 +166,13 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(1)
+        expect(body['payload'].size).to eq(1)
       end
 
       it 'filters applied slas based on a date range and agent ids' do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'active_with_misses')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { agent_ids: [agent2.id] },
@@ -181,13 +180,13 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(3)
+        expect(body['payload'].size).to eq(2)
       end
 
       it 'filters applied slas based on sla policy ids' do
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2)
-        create(:applied_sla, sla_policy: sla_policy2, conversation: conversation2)
+        create(:applied_sla, sla_policy: sla_policy2, conversation: conversation2, sla_status: 'active_with_misses')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { sla_policy_id: sla_policy1.id },
@@ -195,15 +194,15 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(2)
+        expect(body['payload'].size).to eq(1)
       end
 
       it 'filters applied slas based on labels' do
         conversation2.update_labels('label1')
         conversation3.update_labels('label1')
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago, sla_status: 'active_with_misses')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago, sla_status: 'missed')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { label_list: ['label1'] },
@@ -211,7 +210,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(2)
+        expect(body['payload'].size).to eq(2)
       end
     end
   end