diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 210357a8b..3c0a45b4b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -98,7 +98,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    class="conversation-details-wrap bg-n-background"
     :class="{ 'with-border-right': !isOnExpandedLayout }"
   >
     <ConversationHeader
@@ -112,7 +112,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      class="-mt-px bg-n-background !border-n-weak/50 dashboard-app--tabs"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -123,10 +123,7 @@ export default {
         :show-badge="false"
       />
     </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
-    >
+    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0 bg-n-background">
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 031a6c3ea..63604221f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -130,7 +130,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak/50 dark:border-n-background/50 md:flex-row"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index f91861096..2badbc96d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
-import PopOverSearch from './search/PopOverSearch.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
@@ -13,7 +12,6 @@ export default {
   components: {
     ChatList,
     ConversationBox,
-    PopOverSearch,
     CmdBarConversationSnooze,
   },
   beforeRouteLeave(to, from, next) {
@@ -193,7 +191,7 @@ export default {
 </script>
 
 <template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
+  <section class="conversation-page bg-n-solid-1">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
@@ -203,12 +201,7 @@ export default {
       :folders-id="foldersId"
       :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
-    >
-      <PopOverSearch
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
-      />
-    </ChatList>
+    />
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"