diff --git a/frontend/src/premium/community-help-center/components/community-help-center-table.vue b/frontend/src/premium/community-help-center/components/community-help-center-table.vue
index f6ec308065..1ab5ee814f 100644
--- a/frontend/src/premium/community-help-center/components/community-help-center-table.vue
+++ b/frontend/src/premium/community-help-center/components/community-help-center-table.vue
@@ -182,11 +182,6 @@
               />
             </div>
           </div>
-          <app-community-help-center-conversation-drawer
-            :expanded="drawerConversationId !== null"
-            :conversation-id="drawerConversationId"
-            @close="drawerConversationId = null"
-          ></app-community-help-center-conversation-drawer>
         </div>
       </div>
     </div>
@@ -206,13 +201,14 @@ import { useStore } from 'vuex'
 import { formatDateToTimeAgo } from '@/utils/date'
 import AppConversationDropdown from '@/modules/conversation/components/conversation-dropdown'
 import AppCommunityHelpCenterToolbar from './community-help-center-toolbar'
-import AppCommunityHelpCenterConversationDrawer from '@/premium/community-help-center/components/community-help-center-conversation-drawer'
 
 const store = useStore()
-defineEmits(['cta-click'])
+const emit = defineEmits([
+  'cta-click',
+  'open-conversation-drawer'
+])
 
 const table = ref(null)
-const drawerConversationId = ref(null)
 
 const loading = computed(
   () => store.state.communityHelpCenter.list.loading
@@ -311,7 +307,7 @@ function rowClass({ row }) {
 }
 
 function handleRowClick(row) {
-  drawerConversationId.value = row.id
+  emit('open-conversation-drawer', row.id)
 }
 
 function timeAgo(date) {
diff --git a/frontend/src/premium/community-help-center/pages/community-help-center-page.vue b/frontend/src/premium/community-help-center/pages/community-help-center-page.vue
index 340e6a8cda..4a56937205 100644
--- a/frontend/src/premium/community-help-center/pages/community-help-center-page.vue
+++ b/frontend/src/premium/community-help-center/pages/community-help-center-page.vue
@@ -32,7 +32,15 @@
     </div>
     <app-community-help-center-tabs />
     <app-community-help-center-filter />
-    <app-community-help-center-table />
+    <app-community-help-center-table
+      @open-conversation-drawer="onConversationDrawerOpen"
+    />
+
+    <app-community-help-center-conversation-drawer
+      :expanded="!!drawerConversationId"
+      :conversation-id="drawerConversationId"
+      @close="onConversationDrawerClose"
+    ></app-community-help-center-conversation-drawer>
   </app-page-wrapper>
 </template>
 
@@ -43,6 +51,7 @@ import AppCommunityHelpCenterTable from '@/premium/community-help-center/compone
 import AppCommunityHelpCenterTabs from '@/premium/community-help-center/components/community-help-center-tabs'
 import AppCommunityHelpCenterFilter from '@/premium/community-help-center/components/community-help-center-filter'
 import AppCommunityHelpCenterSettings from '@/premium/community-help-center/components/community-help-center-settings'
+import AppCommunityHelpCenterConversationDrawer from '@/premium/community-help-center/components/community-help-center-conversation-drawer'
 import config from '@/config'
 
 export default {
@@ -53,7 +62,14 @@ export default {
     AppCommunityHelpCenterTable,
     AppCommunityHelpCenterTabs,
     AppCommunityHelpCenterFilter,
-    AppCommunityHelpCenterSettings
+    AppCommunityHelpCenterSettings,
+    AppCommunityHelpCenterConversationDrawer
+  },
+
+  data() {
+    return {
+      drawerConversationId: null
+    }
   },
 
   computed: {
@@ -78,7 +94,13 @@ export default {
         'communityHelpCenter/doOpenSettingsDrawer',
       doCloseSettingsDrawer:
         'communityHelpCenter/doCloseSettingsDrawer'
-    })
+    }),
+    onConversationDrawerOpen(id) {
+      this.drawerConversationId = id
+    },
+    onConversationDrawerClose() {
+      this.drawerConversationId = null
+    }
   }
 }
 </script>