diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
new file mode 100644
index 000000000..2e94c7112
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="relative">
+    <div
+      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+    >
+      <woot-sidemenu-icon
+        size="tiny"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
+      />
+      <router-link
+        :to="searchUrl"
+        class="search-link flex-1 items-center gap-1 text-left h-6 rtl:mr-3 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
+      >
+        <div class="flex">
+          <fluent-icon
+            icon="search"
+            class="search--icon text-slate-800 dark:text-slate-200"
+            size="16"
+          />
+        </div>
+        <p
+          class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-200"
+        >
+          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
+        </p>
+      </router-link>
+      <switch-layout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="$emit('toggle-conversation-layout')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import { mapGetters } from 'vuex';
+import timeMixin from '../../../../mixins/time';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import SwitchLayout from './SwitchLayout.vue';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+export default {
+  components: {
+    SwitchLayout,
+  },
+  directives: {
+    focus: {
+      inserted(el) {
+        el.focus();
+      },
+    },
+  },
+  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+    }),
+    searchUrl() {
+      return frontendURL(`accounts/${this.accountId}/search`);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.search-link {
+  &:hover {
+    .search--icon,
+    .search--label {
+      @apply hover:text-woot-500 dark:hover:text-woot-500;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
new file mode 100644
index 000000000..1988e9974
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -0,0 +1,36 @@
+<template>
+  <woot-button
+    v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
+    icon="arrow-right-import"
+    size="tiny"
+    variant="smooth"
+    color-scheme="secondary"
+    class="layout-switch__container"
+    :class="{ expanded: isOnExpandedLayout }"
+    @click="toggle"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle');
+    },
+  },
+};
+</script>
+
+<style lang="scss" soped>
+.layout-switch__container {
+  &.expanded .icon {
+    transform: rotate(180deg);
+  }
+}
+</style>