diff --git a/README.md b/README.md
index 17d4e7f5e..152660fb7 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,6 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
   <img src="https://img.shields.io/github/commit-activity/m/chatwoot/chatwoot" alt="Commits-per-month">
   <a title="Crowdin" target="_self" href="https://chatwoot.crowdin.com/chatwoot"><img src="https://badges.crowdin.net/e/37ced7eba411064bd792feb3b7a28b16/localized.svg"></a>
   <a href="https://discord.gg/cJXdrwS"><img src="https://img.shields.io/discord/647412545203994635" alt="Discord"></a>
-  <a href="https://huntr.dev/bounties/disclose"><img src="https://cdn.huntr.dev/huntr_security_badge_mono.svg" alt="Huntr"></a>
   <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fuptime.json" alt="uptime"></a>
   <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fresponse-time.json" alt="response time"></a>
   <a href="https://artifacthub.io/packages/helm/chatwoot/chatwoot"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/artifact-hub" alt="Artifact HUB"></a>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 1d80defeb..84e33cc42 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -48,7 +48,7 @@
       v-on-clickaway="closeDropdown"
       class="dropdown-pane dropdown-pane--open"
     >
-      <woot-dropdown-menu>
+      <woot-dropdown-menu class="mb-0">
         <woot-dropdown-item v-if="!isPending">
           <woot-button
             variant="clear"
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index d68ac1c9c..7513e3d1c 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -2,6 +2,15 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 const primaryMenuItems = accountId => [
+  {
+    icon: 'mail-inbox',
+    key: 'inboxView',
+    label: 'INBOX_VIEW',
+    featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+    toState: frontendURL(`accounts/${accountId}/inbox-view`),
+    toStateName: 'inbox_view',
+    roles: ['administrator', 'agent'],
+  },
   {
     icon: 'chat',
     key: 'conversations',
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
index 444285657..3ea6d39bf 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
@@ -160,7 +160,7 @@ const settings = accountId => ({
       beta: true,
     },
     {
-      icon: 'key',
+      icon: 'document-list-clock',
       label: 'SLA',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index dad5c9c0b..2ad77452d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -8,7 +8,7 @@
       :chat="currentChat"
       :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
-      :show-back-button="isOnExpandedLayout"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
       @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs
@@ -35,7 +35,10 @@
         :is-contact-panel-open="isContactPanelOpen"
         @contact-panel-toggle="onToggleContactPanel"
       />
-      <empty-state v-else :is-on-expanded-layout="isOnExpandedLayout" />
+      <empty-state
+        v-if="!currentChat.id && !isInboxView"
+        :is-on-expanded-layout="isOnExpandedLayout"
+      />
       <div
         v-show="showContactPanel"
         class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index e6c90f692..b1f8c0640 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -3,7 +3,8 @@
     class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
   >
     <div
-      class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
+      class="flex-1 w-full min-w-0 flex flex-col items-center justify-center"
+      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
     >
       <div class="flex justify-start items-center min-w-0 w-fit max-w-full">
         <back-button
@@ -87,7 +88,6 @@ import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
-import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export default {
   components: {
@@ -128,9 +128,6 @@ export default {
         params: { accountId, inbox_id: inboxId, label, teamId },
         name,
       } = this.$route;
-      if (this.isInboxView) {
-        return frontendURL(`accounts/${accountId}/inbox`);
-      }
       return conversationListPageURL({
         accountId,
         inboxId,
diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index 185d328a5..a252d776f 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -87,7 +87,10 @@
       "conversation_assignment": "Conversation Assigned",
       "assigned_conversation_new_message": "New Message",
       "participating_conversation_new_message": "New Message",
-      "conversation_mention": "Mention"
+      "conversation_mention": "Mention",
+      "sla_missed_first_response": "SLA Missed",
+      "sla_missed_next_response": "SLA Missed",
+      "sla_missed_resolution": "SLA Missed"
     }
   },
   "NETWORK": {
diff --git a/app/javascript/dashboard/i18n/locale/en/inbox.json b/app/javascript/dashboard/i18n/locale/en/inbox.json
index dcac5459f..137aac54b 100644
--- a/app/javascript/dashboard/i18n/locale/en/inbox.json
+++ b/app/javascript/dashboard/i18n/locale/en/inbox.json
@@ -4,24 +4,28 @@
       "TITLE": "Inbox",
       "DISPLAY_DROPDOWN": "Display",
       "LOADING": "Fetching notifications",
-      "EOF": "All notifications loaded 🎉",
       "404": "There are no active notifications in this group.",
       "NO_NOTIFICATIONS": "No notifications",
       "NOTE": "Notifications from all subscribed inboxes",
+      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
       "SNOOZED_UNTIL": "Snoozed until",
       "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
       "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
     },
     "ACTION_HEADER": {
       "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification"
+      "DELETE": "Delete notification",
+      "BACK": "Back"
     },
     "TYPES": {
       "CONVERSATION_MENTION": "You have been mentioned in a conversation",
       "CONVERSATION_CREATION": "New conversation created",
       "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
       "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in"
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
+      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
+      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
+      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
     },
     "MENU_ITEM": {
       "MARK_AS_READ": "Mark as read",
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index d1d16a607..63725f949 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -195,6 +195,7 @@
   "SIDEBAR": {
     "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
     "SWITCH": "Switch",
+    "INBOX_VIEW": "Inbox View",
     "CONVERSATIONS": "Conversations",
     "INBOX": "Inbox",
     "ALL_CONVERSATIONS": "All Conversations",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index 63a32d72b..14487682e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -1,28 +1,9 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
 const ConversationView = () => import('./ConversationView');
-const InboxView = () => import('../inbox/InboxView.vue');
 
 export default {
   routes: [
-    {
-      path: frontendURL('accounts/:accountId/inbox-view'),
-      name: 'inbox_view',
-      roles: ['administrator', 'agent'],
-      component: InboxView,
-      props: () => {
-        return { inboxId: 0 };
-      },
-    },
-    {
-      path: frontendURL('accounts/:accountId/inbox-view/:conversation_id'),
-      name: 'inbox_view_conversation',
-      roles: ['administrator', 'agent'],
-      component: InboxView,
-      props: route => {
-        return { inboxId: 0, conversationId: route.params.conversation_id };
-      },
-    },
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index 712e05928..9e18ca42c 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -3,6 +3,7 @@ import conversation from './conversation/conversation.routes';
 import { routes as searchRoutes } from '../../modules/search/search.routes';
 import { routes as contactRoutes } from './contacts/routes';
 import { routes as notificationRoutes } from './notifications/routes';
+import { routes as inboxRoutes } from './inbox/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
@@ -16,6 +17,7 @@ export default {
       path: frontendURL('accounts/:account_id'),
       component: AppContainer,
       children: [
+        ...inboxRoutes,
         ...conversation.routes,
         ...settings.routes,
         ...contactRoutes,
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
new file mode 100644
index 000000000..49ab0a709
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
+  >
+    <span v-if="uiFlags.isFetching" class="spinner my-4" />
+    <div v-else class="flex flex-col items-center gap-2">
+      <fluent-icon
+        icon="mail-inbox"
+        size="40"
+        class="text-slate-600 dark:text-slate-400"
+      />
+      <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
+        {{ emptyMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    emptyStateMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'notifications/getUIFlags',
+    }),
+    emptyMessage() {
+      if (this.emptyStateMessage) {
+        return this.emptyStateMessage;
+      }
+      return this.$t('INBOX.LIST.NOTE');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index bb0f2e7df..93ba310c3 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -1,43 +1,47 @@
 <template>
-  <div
-    class="flex flex-col h-full w-full ltr:border-r border-slate-50 dark:border-slate-800/50"
-    :class="isOnExpandedLayout ? '' : 'min-w-[360px] max-w-[360px]'"
-  >
-    <inbox-list-header @filter="onFilterChange" />
+  <section class="flex w-full h-full bg-white dark:bg-slate-900">
     <div
-      ref="notificationList"
-      class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
+      class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
+      :class="!currentNotificationId ? 'flex' : 'hidden md:flex'"
     >
-      <inbox-card
-        v-for="notificationItem in notifications"
-        :key="notificationItem.id"
-        :notification-item="notificationItem"
-        @mark-notification-as-read="markNotificationAsRead"
-        @mark-notification-as-unread="markNotificationAsUnRead"
-        @delete-notification="deleteNotification"
+      <inbox-list-header
+        :is-context-menu-open="isInboxContextMenuOpen"
+        @filter="onFilterChange"
+        @redirect="redirectToInbox"
       />
-      <div v-if="uiFlags.isFetching" class="text-center">
-        <span class="spinner mt-4 mb-4" />
+      <div
+        ref="notificationList"
+        class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
+      >
+        <inbox-card
+          v-for="notificationItem in notifications"
+          :key="notificationItem.id"
+          :active="currentNotificationId === notificationItem.id"
+          :notification-item="notificationItem"
+          @mark-notification-as-read="markNotificationAsRead"
+          @mark-notification-as-unread="markNotificationAsUnRead"
+          @delete-notification="deleteNotification"
+          @context-menu-open="isInboxContextMenuOpen = true"
+          @context-menu-close="isInboxContextMenuOpen = false"
+        />
+        <div v-if="uiFlags.isFetching" class="text-center">
+          <span class="spinner mt-4 mb-4" />
+        </div>
+        <p
+          v-if="showEmptyState"
+          class="text-center text-slate-400 text-sm dark:text-slate-400 p-4 font-medium"
+        >
+          {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
+        </p>
+        <intersection-observer
+          v-if="!showEndOfList && !uiFlags.isFetching"
+          :options="infiniteLoaderOptions"
+          @observed="loadMoreNotifications"
+        />
       </div>
-      <p
-        v-if="showEmptyState"
-        class="text-center text-slate-400 text-sm dark:text-slate-400 p-4 font-medium"
-      >
-        {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
-      </p>
-      <p
-        v-if="showEndOfListMessage"
-        class="text-center text-slate-400 dark:text-slate-400 p-4"
-      >
-        {{ $t('INBOX.LIST.EOF') }}
-      </p>
-      <intersection-observer
-        v-if="!showEndOfList && !uiFlags.isFetching"
-        :options="infiniteLoaderOptions"
-        @observed="loadMoreNotifications"
-      />
     </div>
-  </div>
+    <router-view />
+  </section>
 </template>
 
 <script>
@@ -49,6 +53,7 @@ import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+
 export default {
   components: {
     InboxCard,
@@ -56,16 +61,6 @@ export default {
     IntersectionObserver,
   },
   mixins: [alertMixin, uiSettingsMixin],
-  props: {
-    conversationId: {
-      type: [String, Number],
-      default: 0,
-    },
-    isOnExpandedLayout: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
       infiniteLoaderOptions: {
@@ -76,6 +71,8 @@ export default {
       status: '',
       type: '',
       sortOrder: wootConstants.INBOX_SORT_BY.NEWEST,
+      isInboxContextMenuOpen: false,
+      notificationIdToSnooze: null,
     };
   },
   computed: {
@@ -85,6 +82,9 @@ export default {
       uiFlags: 'notifications/getUIFlags',
       notification: 'notifications/getFilteredNotifications',
     }),
+    currentNotificationId() {
+      return Number(this.$route.params.notification_id);
+    },
     inboxFilters() {
       return {
         page: this.page,
@@ -102,9 +102,6 @@ export default {
     showEmptyState() {
       return !this.uiFlags.isFetching && !this.notifications.length;
     },
-    showEndOfListMessage() {
-      return this.showEndOfList && this.notifications.length;
-    },
   },
   mounted() {
     this.setSavedFilter();
@@ -115,13 +112,11 @@ export default {
       this.page = 1;
       this.$store.dispatch('notifications/clear');
       const filter = this.inboxFilters;
-
       this.$store.dispatch('notifications/index', filter);
     },
     redirectToInbox() {
-      if (!this.conversationId) return;
       if (this.$route.name === 'inbox_view') return;
-      this.$router.push({ name: 'inbox_view' });
+      this.$router.replace({ name: 'inbox_view' });
     },
     loadMoreNotifications() {
       if (this.uiFlags.isAllNotificationsLoaded) return;
@@ -177,13 +172,14 @@ export default {
         });
     },
     onFilterChange(option) {
-      if (option.type === wootConstants.INBOX_FILTER_TYPE.STATUS) {
+      const { STATUS, TYPE, SORT_ORDER } = wootConstants.INBOX_FILTER_TYPE;
+      if (option.type === STATUS) {
         this.status = option.selected ? option.key : '';
       }
-      if (option.type === wootConstants.INBOX_FILTER_TYPE.TYPE) {
+      if (option.type === TYPE) {
         this.type = option.selected ? option.key : '';
       }
-      if (option.type === wootConstants.INBOX_FILTER_TYPE.SORT_ORDER) {
+      if (option.type === SORT_ORDER) {
         this.sortOrder = option.key;
       }
       this.fetchNotifications();
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index edc36da15..7fe8a8000 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -1,127 +1,102 @@
 <template>
-  <section class="flex w-full h-full bg-white dark:bg-slate-900">
-    <inbox-list
-      v-show="showConversationList"
-      :conversation-id="conversationId"
-      :is-on-expanded-layout="isOnExpandedLayout"
-    />
-    <div
-      v-if="showInboxMessageView"
-      class="flex flex-col h-full"
-      :class="isOnExpandedLayout ? 'w-full' : 'w-[calc(100%-360px)]'"
-    >
+  <div class="h-full w-full md:w-[calc(100%-360px)]">
+    <div v-if="showEmptyState" class="flex w-full h-full">
+      <inbox-empty-state
+        :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
+      />
+    </div>
+    <div v-else class="flex flex-col h-full w-full">
       <inbox-item-header
-        :total-length="totalNotifications"
+        class="flex-1"
+        :total-length="totalNotificationCount"
         :current-index="activeNotificationIndex"
         :active-notification="activeNotification"
         @next="onClickNext"
         @prev="onClickPrev"
       />
+      <div
+        v-if="isConversationLoading"
+        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
+      >
+        <span class="spinner my-4" />
+      </div>
       <conversation-box
+        v-else
         class="h-[calc(100%-56px)]"
         is-inbox-view
         :inbox-id="inboxId"
         :is-contact-panel-open="isContactPanelOpen"
-        :is-on-expanded-layout="isOnExpandedLayout"
+        :is-on-expanded-layout="false"
         @contact-panel-toggle="onToggleContactPanel"
       />
     </div>
-    <div
-      v-if="!showInboxMessageView && !isOnExpandedLayout"
-      class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full flex items-center"
-    >
-      <span v-if="uiFlags.isFetching" class="spinner mt-4 mb-4" />
-      <div v-else class="flex flex-col items-center gap-2">
-        <fluent-icon
-          icon="mail-inbox"
-          size="40"
-          class="text-slate-600 dark:text-slate-400"
-        />
-        <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
-          {{ $t('INBOX.LIST.NOTE') }}
-        </span>
-      </div>
-    </div>
-  </section>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import InboxList from './InboxList.vue';
 import InboxItemHeader from './components/InboxItemHeader.vue';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
+import InboxEmptyState from './InboxEmptyState.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import wootConstants from 'dashboard/constants/globals';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 export default {
   components: {
-    InboxList,
     InboxItemHeader,
+    InboxEmptyState,
     ConversationBox,
   },
   mixins: [uiSettingsMixin],
-  props: {
-    inboxId: {
-      type: [String, Number],
-      default: 0,
-    },
-    conversationId: {
-      type: [String, Number],
-      default: 0,
-    },
+  data() {
+    return {
+      isConversationLoading: false,
+    };
   },
   computed: {
     ...mapGetters({
       currentAccountId: 'getCurrentAccountId',
-      notifications: 'notifications/getNotifications',
+      notification: 'notifications/getFilteredNotifications',
       currentChat: 'getSelectedChat',
-      allConversation: 'getAllConversations',
+      activeNotificationById: 'notifications/getNotificationById',
+      conversationById: 'getConversationById',
       uiFlags: 'notifications/getUIFlags',
+      meta: 'notifications/getMeta',
     }),
+    notifications() {
+      return this.notification({
+        sortOrder: this.activeSortOrder,
+      });
+    },
+    inboxId() {
+      return Number(this.$route.params.inboxId);
+    },
+    notificationId() {
+      return Number(this.$route.params.notification_id);
+    },
     activeNotification() {
-      return this.notifications.find(
-        n => n.primary_actor.id === Number(this.conversationId)
-      );
+      return this.activeNotificationById(this.notificationId);
     },
-    isInboxViewEnabled() {
-      return this.$store.getters['accounts/isFeatureEnabledGlobally'](
-        this.currentAccountId,
-        FEATURE_FLAGS.INBOX_VIEW
-      );
+    conversationId() {
+      return this.activeNotification?.primary_actor?.id;
     },
-    showConversationList() {
-      return this.isOnExpandedLayout ? !this.conversationId : true;
+    totalNotificationCount() {
+      return this.meta.count;
     },
-    isFetchingInitialData() {
-      return this.uiFlags.isFetching && !this.notifications.length;
-    },
-    showInboxMessageView() {
+    showEmptyState() {
       return (
-        Boolean(this.conversationId) &&
-        Boolean(this.currentChat.id) &&
-        !this.isFetchingInitialData
+        !this.conversationId ||
+        (!this.notifications?.length && this.uiFlags.isFetching)
       );
     },
-    totalNotifications() {
-      return this.notifications?.length ?? 0;
-    },
     activeNotificationIndex() {
-      const conversationId = Number(this.conversationId);
-      const notificationIndex = this.notifications.findIndex(
-        n => n.primary_actor.id === conversationId
-      );
-      return notificationIndex >= 0 ? notificationIndex + 1 : 0;
+      return this.notifications?.findIndex(n => n.id === this.notificationId);
     },
-    isOnExpandedLayout() {
-      const {
-        LAYOUT_TYPES: { CONDENSED },
-      } = wootConstants;
-      const { conversation_display_type: conversationDisplayType = CONDENSED } =
-        this.uiSettings;
-      return conversationDisplayType !== CONDENSED;
+    activeSortOrder() {
+      const { inbox_filter_by: filterBy = {} } = this.uiSettings;
+      const { sort_by: sortBy } = filterBy;
+      return sortBy || 'desc';
     },
     isContactPanelOpen() {
       if (this.currentChat.id) {
@@ -135,29 +110,29 @@ export default {
   watch: {
     conversationId: {
       immediate: true,
-      handler() {
-        this.fetchConversationById();
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.fetchConversationById();
+        }
       },
     },
   },
   mounted() {
-    // Open inbox view if inbox view feature is enabled, else redirect to dashboard
-    // TODO: Remove this code once inbox view feature is enabled for all accounts
-    if (!this.isInboxViewEnabled) {
-      this.$router.push({
-        name: 'home',
-      });
-    }
     this.$store.dispatch('agents/get');
   },
   methods: {
     async fetchConversationById() {
-      if (!this.conversationId) return;
-      const chat = this.findConversation();
-      if (!chat) {
-        await this.$store.dispatch('getConversation', this.conversationId);
+      if (!this.notificationId || !this.conversationId) return;
+      this.$store.dispatch('clearSelectedState');
+      const existingChat = this.findConversation();
+      if (existingChat) {
+        this.setActiveChat(existingChat);
+        return;
       }
+      this.isConversationLoading = true;
+      await this.$store.dispatch('getConversation', this.conversationId);
       this.setActiveChat();
+      this.isConversationLoading = false;
     },
     setActiveChat() {
       const selectedConversation = this.findConversation();
@@ -169,37 +144,47 @@ export default {
         });
     },
     findConversation() {
-      const conversationId = Number(this.conversationId);
-      return this.allConversation.find(c => c.id === conversationId);
+      return this.conversationById(this.conversationId);
     },
     navigateToConversation(activeIndex, direction) {
-      const indexOffset = direction === 'next' ? 0 : -2;
-      const targetNotification = this.notifications[activeIndex + indexOffset];
-      if (targetNotification) {
-        const {
-          id,
-          primary_actor_id: primaryActorId,
-          primary_actor_type: primaryActorType,
-          primary_actor: { id: conversationId, meta: { unreadCount } = {} },
-          notification_type: notificationType,
-        } = targetNotification;
-
-        this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
-          notificationType,
-        });
-
-        this.$store.dispatch('notifications/read', {
-          id,
-          primaryActorId,
-          primaryActorType,
-          unreadCount,
-        });
-
-        this.$router.push({
-          name: 'inbox_view_conversation',
-          params: { conversation_id: conversationId },
-        });
+      let updatedIndex;
+      if (direction === 'prev' && activeIndex) {
+        updatedIndex = activeIndex - 1;
+      } else if (
+        direction === 'next' &&
+        activeIndex < this.totalNotificationCount
+      ) {
+        updatedIndex = activeIndex + 1;
       }
+      const targetNotification = this.notifications[updatedIndex];
+      if (targetNotification) {
+        this.openNotification(targetNotification);
+      }
+    },
+    openNotification(notification) {
+      const {
+        id,
+        primary_actor_id: primaryActorId,
+        primary_actor_type: primaryActorType,
+        primary_actor: { meta: { unreadCount } = {} },
+        notification_type: notificationType,
+      } = notification;
+
+      this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
+        notificationType,
+      });
+
+      this.$store.dispatch('notifications/read', {
+        id,
+        primaryActorId,
+        primaryActorType,
+        unreadCount,
+      });
+
+      this.$router.push({
+        name: 'inbox_view_conversation',
+        params: { notification_id: id },
+      });
     },
     onClickNext() {
       this.navigateToConversation(this.activeNotificationIndex, 'next');
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index 8e100f7b5..cbaacf198 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -3,7 +3,7 @@
     role="button"
     class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
     :class="
-      isInboxCardActive
+      active
         ? 'bg-slate-25 dark:bg-slate-800 click-animation'
         : 'bg-white dark:bg-slate-900'
     "
@@ -23,26 +23,21 @@
       </div>
     </div>
 
-    <div class="flex flex-row justify-between items-center w-full">
-      <div class="flex gap-1.5 items-center max-w-[calc(100%-70px)]">
-        <Thumbnail
-          v-if="assigneeMeta"
-          :src="assigneeMeta.thumbnail"
-          :username="assigneeMeta.name"
-          size="16px"
-          class="relative bottom-0.5"
-        />
-        <div class="flex min-w-0">
-          <span
-            class="text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-            :class="isUnread ? 'font-medium' : 'font-normal'"
-          >
-            {{ pushTitle }}
-          </span>
-        </div>
-      </div>
+    <div class="flex flex-row justify-between items-center w-full gap-2">
+      <Thumbnail
+        v-if="assigneeMeta"
+        :src="assigneeMeta.thumbnail"
+        :username="assigneeMeta.name"
+        size="16px"
+      />
       <span
-        class="font-medium max-w-[60px] text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+        class="flex-1 text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="isUnread ? 'font-medium' : 'font-normal'"
+      >
+        {{ pushTitle }}
+      </span>
+      <span
+        class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
       >
         {{ lastActivityAt }}
       </span>
@@ -61,6 +56,7 @@
     />
   </div>
 </template>
+
 <script>
 import PriorityIcon from './PriorityIcon.vue';
 import StatusIcon from './StatusIcon.vue';
@@ -84,6 +80,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    active: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -95,9 +95,6 @@ export default {
     primaryActor() {
       return this.notificationItem?.primary_actor;
     },
-    isInboxCardActive() {
-      return this.$route.params.conversation_id === this.primaryActor?.id;
-    },
     inbox() {
       return this.$store.getters['inboxes/getInbox'](
         this.primaryActor.inbox_id
@@ -166,11 +163,11 @@ export default {
         id,
         primary_actor_id: primaryActorId,
         primary_actor_type: primaryActorType,
-        primary_actor: { id: conversationId, inbox_id: inboxId },
+        primary_actor: { inbox_id: inboxId },
         notification_type: notificationType,
       } = notification;
 
-      if (this.$route.params.conversation_id !== conversationId) {
+      if (this.$route.params.notification_id !== id) {
         this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
           notificationType,
         });
@@ -184,13 +181,14 @@ export default {
 
         this.$router.push({
           name: 'inbox_view_conversation',
-          params: { inboxId, conversation_id: conversationId },
+          params: { inboxId, notification_id: id },
         });
       }
     },
     closeContextMenu() {
       this.isContextMenuOpen = false;
       this.contextMenuPosition = { x: null, y: null };
+      this.$emit('context-menu-close');
     },
     openContextMenu(e) {
       this.closeContextMenu();
@@ -200,6 +198,7 @@ export default {
         y: e.pageY || e.clientY,
       };
       this.isContextMenuOpen = true;
+      this.$emit('context-menu-open');
     },
     handleAction(key) {
       switch (key) {
@@ -218,17 +217,21 @@ export default {
   },
 };
 </script>
+
 <style scoped>
 .click-animation {
   animation: click-animation 0.3s ease-in-out;
 }
+
 @keyframes click-animation {
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(0.99);
   }
+
   100% {
     transform: scale(1);
   }
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 99b642cbf..e8ac446db 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -2,10 +2,20 @@
   <div
     class="flex gap-2 py-2 ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
   >
+    <woot-button
+      variant="clear link"
+      class="flex md:hidden !pt-1 !pb-1 rounded-md ltr:pr-1 rtl:pl-1 !no-underline"
+      size="medium"
+      color-scheme="primary"
+      icon="chevron-left"
+      @click="onClickGoToInboxList"
+    >
+      {{ $t('INBOX.ACTION_HEADER.BACK') }}
+    </woot-button>
     <pagination-button
       v-if="totalLength > 1"
       :total-length="totalLength"
-      :current-index="currentIndex"
+      :current-index="currentIndex + 1"
       @next="onClickNext"
       @prev="onClickPrev"
     />
@@ -16,6 +26,7 @@
         size="small"
         color-scheme="secondary"
         icon="snooze"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
         @click="openSnoozeNotificationModal"
       >
         {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
@@ -25,6 +36,7 @@
         size="small"
         color-scheme="secondary"
         variant="hollow"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
         @click="deleteNotification"
       >
         {{ $t('INBOX.ACTION_HEADER.DELETE') }}
@@ -41,6 +53,7 @@
     </woot-modal>
   </div>
 </template>
+
 <script>
 import { mapGetters } from 'vuex';
 import { getUnixTime } from 'date-fns';
@@ -73,14 +86,10 @@ export default {
     },
   },
   data() {
-    return {
-      showCustomSnoozeModal: false,
-    };
+    return { showCustomSnoozeModal: false };
   },
   computed: {
-    ...mapGetters({
-      meta: 'notifications/getMeta',
-    }),
+    ...mapGetters({ meta: 'notifications/getMeta' }),
   },
   mounted() {
     bus.$on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
@@ -96,15 +105,17 @@ export default {
     hideCustomSnoozeModal() {
       this.showCustomSnoozeModal = false;
     },
-    snoozeNotification(snoozedUntil) {
-      this.$store
-        .dispatch('notifications/snooze', {
+    async snoozeNotification(snoozedUntil) {
+      try {
+        await this.$store.dispatch('notifications/snooze', {
           id: this.activeNotification?.id,
           snoozedUntil,
-        })
-        .then(() => {
-          this.showAlert(this.$t('INBOX.ALERTS.SNOOZE'));
         });
+
+        this.showAlert(this.$t('INBOX.ALERTS.SNOOZE'));
+      } catch (error) {
+        // Silently fail without any change in the UI
+      }
     },
     onCmdSnoozeNotification(snoozeType) {
       if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
@@ -132,7 +143,7 @@ export default {
         .then(() => {
           this.showAlert(this.$t('INBOX.ALERTS.DELETE'));
         });
-      this.$router.push({ name: 'inbox_view' });
+      this.$router.replace({ name: 'inbox_view' });
     },
     onClickNext() {
       this.$emit('next');
@@ -140,6 +151,9 @@ export default {
     onClickPrev() {
       this.$emit('prev');
     },
+    onClickGoToInboxList() {
+      this.$router.replace({ name: 'inbox_view' });
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 3f5a594b7..35411f546 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -26,7 +26,7 @@
         <inbox-display-menu
           v-if="showInboxDisplayMenu"
           v-on-clickaway="openInboxDisplayMenu"
-          class="absolute top-8"
+          class="absolute top-9 ltr:left-0 rtl:right-0"
           @filter="onFilterChange"
         />
       </div>
@@ -49,7 +49,7 @@
       <inbox-option-menu
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
-        class="absolute top-9"
+        class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
         @option-click="onInboxOptionMenuClick"
       />
     </div>
@@ -69,12 +69,29 @@ export default {
     InboxDisplayMenu,
   },
   mixins: [clickaway, alertMixin],
+  props: {
+    isContextMenuOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       showInboxDisplayMenu: false,
       showInboxOptionMenu: false,
     };
   },
+  watch: {
+    isContextMenuOpen: {
+      handler(val) {
+        if (val) {
+          this.showInboxDisplayMenu = false;
+          this.showInboxOptionMenu = false;
+        }
+      },
+      immediate: true,
+    },
+  },
   methods: {
     markAllRead() {
       this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
@@ -99,22 +116,19 @@ export default {
       this.showInboxOptionMenu = !this.showInboxOptionMenu;
     },
     onInboxOptionMenuClick(key) {
-      this.showInboxOptionMenu = false;
-      if (key === 'mark_all_read') {
-        this.markAllRead();
-      }
-      if (key === 'delete_all') {
-        this.deleteAll();
-      }
-      if (key === 'delete_all_read') {
-        this.deleteAllRead();
-      }
+      const actions = {
+        mark_all_read: () => this.markAllRead(),
+        delete_all: () => this.deleteAll(),
+        delete_all_read: () => this.deleteAllRead(),
+      };
+      const action = actions[key];
+      if (action) action();
+      this.$emit('redirect');
     },
     onFilterChange(option) {
       this.$emit('filter', option);
       this.showInboxDisplayMenu = false;
-      if (this.$route.name === 'inbox_view') return;
-      this.$router.push({ name: 'inbox_view' });
+      this.$emit('redirect');
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
index 46ff0c3bc..e361f39df 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -19,7 +19,7 @@
       />
     </div>
     <div class="flex items-center gap-1 whitespace-nowrap">
-      <span class="text-sm font-medium text-gray-600">
+      <span class="text-sm font-medium text-gray-600 tabular-nums">
         {{ totalLength <= 1 ? '1' : currentIndex }}
       </span>
       <span
@@ -28,7 +28,7 @@
       >
         /
       </span>
-      <span v-if="totalLength > 1" class="text-sm text-slate-400">
+      <span v-if="totalLength > 1" class="text-sm text-slate-400 tabular-nums">
         {{ totalLength }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
new file mode 100644
index 000000000..9c26fa64e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -0,0 +1,25 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+const InboxListView = () => import('./InboxList.vue');
+const InboxDetailView = () => import('./InboxView.vue');
+const InboxEmptyStateView = () => import('./InboxEmptyState.vue');
+
+export const routes = [
+  {
+    path: frontendURL('accounts/:accountId/inbox-view'),
+    component: InboxListView,
+    children: [
+      {
+        path: '',
+        name: 'inbox_view',
+        component: InboxEmptyStateView,
+        roles: ['administrator', 'agent'],
+      },
+      {
+        path: ':notification_id',
+        name: 'inbox_view_conversation',
+        component: InboxDetailView,
+        roles: ['administrator', 'agent'],
+      },
+    ],
+  },
+];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
index 360c5a1f5..473cb03cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
@@ -10,7 +10,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'SLA.HEADER',
-        icon: 'tag',
+        icon: 'document-list-clock',
         showNewButton: true,
       },
       children: [
diff --git a/app/javascript/dashboard/store/modules/notifications/getters.js b/app/javascript/dashboard/store/modules/notifications/getters.js
index 3fc1d9458..cafc82857 100644
--- a/app/javascript/dashboard/store/modules/notifications/getters.js
+++ b/app/javascript/dashboard/store/modules/notifications/getters.js
@@ -11,6 +11,9 @@ export const getters = {
     );
     return sortedNotifications;
   },
+  getNotificationById: $state => id => {
+    return $state.records[id] || {};
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },
diff --git a/app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js b/app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
index f3ea23cb5..e9d4a5b04 100644
--- a/app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
@@ -44,6 +44,16 @@ describe('#getters', () => {
     ]);
   });
 
+  it('getNotificationById', () => {
+    const state = {
+      records: {
+        1: { id: 1 },
+      },
+    };
+    expect(getters.getNotificationById(state)(1)).toEqual({ id: 1 });
+    expect(getters.getNotificationById(state)(2)).toEqual({});
+  });
+
   it('getUIFlags', () => {
     const state = {
       uiFlags: {
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 678045469..30e45d489 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -99,6 +99,7 @@
   "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
   "document-error-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0ZM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25Z",
   "document-text-link-outline": "M18 20.5a.5.5 0 0 0 .5-.5V10H14a2 2 0 0 1-2-2V3.5H6a.5.5 0 0 0-.5.5v10h-.75c-.255 0-.506.02-.75.059V4a2 2 0 0 1 2-2h6.172c.028 0 .055.004.082.007.02.003.04.006.059.007.215.015.427.056.624.138.057.024.112.056.166.087l.05.029.047.024a.652.652 0 0 1 .081.044c.078.053.148.116.219.18a.63.63 0 0 0 .036.03.491.491 0 0 1 .049.04l5.829 5.828A2 2 0 0 1 20 9.828V20a2 2 0 0 1-2 2h-6.286c.406-.432.731-.94.953-1.5H18Zm-.622-12L13.5 4.621V8a.5.5 0 0 0 .5.5h3.378Zm-7.603 5.75c.854.29 1.6.815 2.158 1.5h3.317a.75.75 0 0 0 0-1.5H9.775ZM12.667 17c.186.468.3.973.326 1.5h2.257a.75.75 0 0 0 0-1.5h-2.583ZM8.75 11.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5ZM12 18.75A3.75 3.75 0 0 0 8.25 15l-.102.007A.75.75 0 0 0 8.25 16.5l.154.005A2.25 2.25 0 0 1 8.25 21l-.003.005-.102.007a.75.75 0 0 0 .108 1.493V22.5l.2-.005A3.75 3.75 0 0 0 12 18.75Zm-6.5-3a.75.75 0 0 0-.75-.75l-.2.005a3.75 3.75 0 0 0 .2 7.495l.102-.007A.75.75 0 0 0 4.75 21l-.154-.005A2.25 2.25 0 0 1 4.75 16.5l.102-.007a.75.75 0 0 0 .648-.743Zm3.5 3a.75.75 0 0 0-.75-.75h-3.5l-.102.007A.75.75 0 0 0 4.75 19.5h3.5l.102-.007A.75.75 0 0 0 9 18.75Z",
+  "document-list-clock-outline": "m19.414 8.414-5.829-5.828a.493.493 0 0 0-.049-.04.626.626 0 0 1-.036-.03 2.072 2.072 0 0 0-.219-.18.652.652 0 0 0-.08-.044l-.048-.024-.05-.029c-.054-.031-.109-.063-.166-.087a1.977 1.977 0 0 0-.624-.138c-.02-.001-.04-.004-.059-.007A.605.605 0 0 0 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h6.81a6.518 6.518 0 0 1-1.078-1.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v1.076c.523.081 1.026.224 1.5.422v-1.67a2 2 0 0 0-.586-1.414ZM13.5 4.621 17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621ZM10.75 17.5H11c0 .516.06 1.018.174 1.5h-.424a.75.75 0 0 1 0-1.5Zm.424-1.5c.125-.528.314-1.03.558-1.5h-.982a.75.75 0 0 0 0 1.5h.424Zm1.636-3a6.511 6.511 0 0 1 2.186-1.5H10.75a.75.75 0 0 0 0 1.5h2.06Zm-5.06-1.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7 15.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm0 3a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm16-.75a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Zm-5.78.418a.5.5 0 0 1-.219-.489L17 13.5a.5.5 0 1 1 1 0L18.001 17h2.496a.5.5 0 0 1 0 1H17.56a.507.507 0 0 1-.34-.082Z",
   "draft-outline": "m20.877 2.826.153.144.145.153a3.579 3.579 0 0 1-.145 4.908L9.062 19.999a2.25 2.25 0 0 1-1 .58l-5.115 1.395a.75.75 0 0 1-.92-.921l1.394-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.579 3.579 0 0 1 4.908-.144ZM15 6.06l-9.938 9.938a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06ZM6.525 11l-1.5 1.5H2.75a.75.75 0 0 1 0-1.5h3.775Zm4-4-1.5 1.5H2.75a.75.75 0 1 1 0-1.5h7.775Zm6.505-2.97-.97.97 2.939 2.94.97-.97a2.078 2.078 0 1 0-2.939-2.94ZM14.525 3l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5h11.775Z",
   "drag-outline": "M15 3.707V8.5a.5.5 0 0 0 1 0V3.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.499.499 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L15 3.707ZM2 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm.5 4.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6ZM15 16.293V11.5a.5.5 0 0 1 1 0v4.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L15 16.293Z",
   "dual-screen-clock-outline": "M10.019 6.002a6.632 6.632 0 0 0 .058 1.5H3.75a.25.25 0 0 0-.25.25v12.494c0 .138.112.25.25.25h7.498l-.001-10.167c.416.57.924 1.07 1.5 1.479v8.69h7.498a.25.25 0 0 0 .25-.25v-8.62a6.535 6.535 0 0 0 1.501-1.656V20.25a1.75 1.75 0 0 1-1.75 1.75h-8.998l-.001-.003H3.75A1.75 1.75 0 0 1 2 20.246V7.751c0-.966.784-1.75 1.75-1.75h6.269Zm6.22 11.498a.75.75 0 0 1 .101 1.493L16.24 19h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-6.996 0a.75.75 0 0 1 .102 1.493L9.243 19H7.74a.75.75 0 0 1-.102-1.493l.102-.007h1.502ZM16.498 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-1 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.001a.5.5 0 0 0 0-1h-2.501V3.5a.5.5 0 0 0-.5-.5Z",
diff --git a/app/models/notification.rb b/app/models/notification.rb
index 25740b16a..c71bdbb62 100644
--- a/app/models/notification.rb
+++ b/app/models/notification.rb
@@ -39,7 +39,10 @@ class Notification < ApplicationRecord
     conversation_assignment: 2,
     assigned_conversation_new_message: 3,
     conversation_mention: 4,
-    participating_conversation_new_message: 5
+    participating_conversation_new_message: 5,
+    sla_missed_first_response: 6,
+    sla_missed_next_response: 7,
+    sla_missed_resolution: 8
   }.freeze
 
   enum notification_type: NOTIFICATION_TYPES
@@ -86,21 +89,32 @@ class Notification < ApplicationRecord
     }
   end
 
-  # TODO: move to a data presenter
+  # rubocop:disable Metrics/MethodLength
   def push_message_title
-    case notification_type
-    when 'conversation_creation'
-      I18n.t('notifications.notification_title.conversation_creation', display_id: conversation.display_id, inbox_name: primary_actor.inbox.name)
-    when 'conversation_assignment'
-      I18n.t('notifications.notification_title.conversation_assignment', display_id: conversation.display_id)
-    when 'assigned_conversation_new_message', 'participating_conversation_new_message'
-      I18n.t('notifications.notification_title.assigned_conversation_new_message', display_id: conversation.display_id)
-    when 'conversation_mention'
-      I18n.t('notifications.notification_title.conversation_mention', display_id: conversation.display_id)
+    notification_title_map = {
+      'conversation_creation' => 'notifications.notification_title.conversation_creation',
+      'conversation_assignment' => 'notifications.notification_title.conversation_assignment',
+      'assigned_conversation_new_message' => 'notifications.notification_title.assigned_conversation_new_message',
+      'participating_conversation_new_message' => 'notifications.notification_title.assigned_conversation_new_message',
+      'conversation_mention' => 'notifications.notification_title.conversation_mention',
+      'sla_missed_first_response' => 'notifications.notification_title.sla_missed_first_response',
+      'sla_missed_next_response' => 'notifications.notification_title.sla_missed_next_response',
+      'sla_missed_resolution' => 'notifications.notification_title.sla_missed_resolution'
+    }
+
+    i18n_key = notification_title_map[notification_type]
+    return '' unless i18n_key
+
+    if notification_type == 'conversation_creation'
+      I18n.t(i18n_key, display_id: conversation.display_id, inbox_name: primary_actor.inbox.name)
+    elsif %w[conversation_assignment assigned_conversation_new_message participating_conversation_new_message
+             conversation_mention].include?(notification_type)
+      I18n.t(i18n_key, display_id: conversation.display_id)
     else
-      ''
+      I18n.t(i18n_key, display_id: primary_actor.display_id)
     end
   end
+  # rubocop:enable Metrics/MethodLength
 
   def push_message_body
     case notification_type
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 075d27d1d..5a3816867 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -122,6 +122,9 @@ en:
       conversation_assignment: "A conversation (#%{display_id}) has been assigned to you"
       assigned_conversation_new_message: "A new message is created in conversation (#%{display_id})"
       conversation_mention: "You have been mentioned in conversation (#%{display_id})"
+      sla_missed_first_response: "SLA target first response missed for conversation (#%{display_id})"
+      sla_missed_next_response: "SLA target next response missed for conversation (#%{display_id})"
+      sla_missed_resolution: "SLA target resolution missed for conversation (#%{display_id})"
     attachment: "Attachment"
     no_content: "No content"
   conversations:
diff --git a/enterprise/app/models/sla_policy.rb b/enterprise/app/models/sla_policy.rb
index 328367aeb..647db2cfc 100644
--- a/enterprise/app/models/sla_policy.rb
+++ b/enterprise/app/models/sla_policy.rb
@@ -22,4 +22,14 @@ class SlaPolicy < ApplicationRecord
   validates :name, presence: true
 
   has_many :conversations, dependent: :nullify
+
+  def push_event_data
+    {
+      id: id,
+      name: name,
+      frt: first_response_time_threshold,
+      nrt: next_response_time_threshold,
+      rt: resolution_time_threshold
+    }
+  end
 end
diff --git a/enterprise/app/services/sla/evaluate_applied_sla_service.rb b/enterprise/app/services/sla/evaluate_applied_sla_service.rb
index 817a854c7..d6eb9839e 100644
--- a/enterprise/app/services/sla/evaluate_applied_sla_service.rb
+++ b/enterprise/app/services/sla/evaluate_applied_sla_service.rb
@@ -30,7 +30,7 @@ class Sla::EvaluateAppliedSlaService
     return if first_reply_was_within_threshold?(conversation, threshold)
     return if still_within_threshold?(threshold)
 
-    handle_missed_sla(applied_sla)
+    handle_missed_sla(applied_sla, 'frt')
   end
 
   def first_reply_was_within_threshold?(conversation, threshold)
@@ -46,7 +46,7 @@ class Sla::EvaluateAppliedSlaService
     threshold = conversation.waiting_since.to_i + sla_policy.next_response_time_threshold.to_i
     return if still_within_threshold?(threshold)
 
-    handle_missed_sla(applied_sla)
+    handle_missed_sla(applied_sla, 'nrt')
   end
 
   def check_resolution_time_threshold(applied_sla, conversation, sla_policy)
@@ -55,13 +55,14 @@ class Sla::EvaluateAppliedSlaService
     threshold = conversation.created_at.to_i + sla_policy.resolution_time_threshold.to_i
     return if still_within_threshold?(threshold)
 
-    handle_missed_sla(applied_sla)
+    handle_missed_sla(applied_sla, 'rt')
   end
 
-  def handle_missed_sla(applied_sla)
+  def handle_missed_sla(applied_sla, type)
     return unless applied_sla.active?
 
     applied_sla.update!(sla_status: 'missed')
+    generate_notifications_for_sla(applied_sla, type)
     Rails.logger.warn "SLA missed for conversation #{applied_sla.conversation.id} " \
                       "in account #{applied_sla.account_id} " \
                       "for sla_policy #{applied_sla.sla_policy.id}"
@@ -75,4 +76,30 @@ class Sla::EvaluateAppliedSlaService
                       "in account #{applied_sla.account_id} " \
                       "for sla_policy #{applied_sla.sla_policy.id}"
   end
+
+  def generate_notifications_for_sla(applied_sla, type)
+    notify_users = applied_sla.conversation.conversation_participants.map(&:user)
+    # add all admins from the account to notify list
+    notify_users += applied_sla.account.administrators
+    # ensure conversation assignee is notified
+    notify_users += [applied_sla.conversation.assignee] if applied_sla.conversation.assignee.present?
+
+    notification_type = if type == 'frt'
+                          'sla_missed_first_response'
+                        elsif type == 'nrt'
+                          'sla_missed_next_response'
+                        else
+                          'sla_missed_resolution'
+                        end
+
+    notify_users.uniq.each do |user|
+      NotificationBuilder.new(
+        notification_type: notification_type,
+        user: user,
+        account: applied_sla.account,
+        primary_actor: applied_sla.conversation,
+        secondary_actor: applied_sla.sla_policy
+      ).perform
+    end
+  end
 end
diff --git a/spec/enterprise/services/sla/evaluate_applied_sla_service_spec.rb b/spec/enterprise/services/sla/evaluate_applied_sla_service_spec.rb
index 0f82715c0..17c09cb0e 100644
--- a/spec/enterprise/services/sla/evaluate_applied_sla_service_spec.rb
+++ b/spec/enterprise/services/sla/evaluate_applied_sla_service_spec.rb
@@ -1,7 +1,11 @@
 require 'rails_helper'
 
 RSpec.describe Sla::EvaluateAppliedSlaService do
-  let!(:conversation) { create(:conversation, created_at: 6.hours.ago) }
+  let!(:account) { create(:account) }
+  let!(:user_1) { create(:user, account: account) }
+  let!(:user_2) { create(:user, account: account) }
+  let!(:admin) { create(:user, account: account, role: :administrator) }
+  let!(:conversation) { create(:conversation, created_at: 6.hours.ago, assignee: user_1, account: account) }
   let!(:sla_policy) do
     create(:sla_policy, account: conversation.account,
                         first_response_time_threshold: nil,
@@ -20,6 +24,16 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('missed')
+
+        expect(Notification.count).to eq(2)
+        # check if notification type is sla_missed_first_response
+        expect(Notification.where(notification_type: 'sla_missed_first_response').count).to eq(2)
+        # Check if notification is created for the assignee
+        expect(Notification.where(user_id: user_1.id).count).to eq(1)
+        # Check if notification is created for the account admin
+        expect(Notification.where(user_id: admin.id).count).to eq(1)
+        # Check if no notification is created for other user
+        expect(Notification.where(user_id: user_2.id).count).to eq(0)
       end
     end
 
@@ -35,6 +49,16 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('missed')
+
+        expect(Notification.count).to eq(2)
+        # check if notification type is sla_missed_first_response
+        expect(Notification.where(notification_type: 'sla_missed_next_response').count).to eq(2)
+        # Check if notification is created for the assignee
+        expect(Notification.where(user_id: user_1.id).count).to eq(1)
+        # Check if notification is created for the account admin
+        expect(Notification.where(user_id: admin.id).count).to eq(1)
+        # Check if no notification is created for other user
+        expect(Notification.where(user_id: user_2.id).count).to eq(0)
       end
     end
 
@@ -47,6 +71,15 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('missed')
+
+        expect(Notification.count).to eq(2)
+        expect(Notification.where(notification_type: 'sla_missed_resolution').count).to eq(2)
+        # Check if notification is created for the assignee
+        expect(Notification.where(user_id: user_1.id).count).to eq(1)
+        # Check if notification is created for the account admin
+        expect(Notification.where(user_id: admin.id).count).to eq(1)
+        # Check if no notification is created for other user
+        expect(Notification.where(user_id: user_2.id).count).to eq(0)
       end
     end
 
@@ -76,6 +109,7 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}").exactly(1).time
         expect(applied_sla.reload.sla_status).to eq('missed')
+        expect(Notification.count).to eq(2)
       end
     end
   end
@@ -99,6 +133,7 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:info).with("SLA hit for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('hit')
+        expect(Notification.count).to eq(0)
       end
     end