diff --git a/src/modules/00_support/components/FormChat.vue b/src/modules/00_support/components/FormChat.vue
index 947ce8dad..b882a6950 100644
--- a/src/modules/00_support/components/FormChat.vue
+++ b/src/modules/00_support/components/FormChat.vue
@@ -12,7 +12,7 @@ const content = ref<string>("");
 const searchInput = ref<string>("");
 const currentIssuePage = ref<number>(1);
 const totalPageIssue = ref<number>();
-const createdByUser = ref<string>("");
+
 const { scrollContainer } = storeToRefs(store);
 
 function dateIssue(timestamp: string): string {
@@ -43,6 +43,9 @@ function getOnlineStatus(option: "icon" | "status", userId: string) {
 }
 
 onMounted(async () => {
+  if (store.currentIssue) {
+    await store.fetchIssue();
+  }
   await store.fetchIssue();
   totalPageIssue.value = Math.ceil((store.currentTotalIssue || 0) / 30);
 });
@@ -66,8 +69,9 @@ const onLoad = (async (_: any, done: any) => {
         size="16px"
         color="primary"
         class="button-link-no-deco q-px-md"
+        @click="$router.push('/support/category')"
       >
-        <router-link to="/support/category"> จัดการประเภทของปัญหา </router-link>
+        จัดการประเภทของปัญหา
       </q-btn>
     </p>
   </div>
@@ -112,9 +116,9 @@ const onLoad = (async (_: any, done: any) => {
             <q-icon
               name="mdi-circle"
               size="10px"
-              :color="getOnlineStatus('icon', createdByUser)"
+              :color="getOnlineStatus('icon', store.createdByUser)"
             />
-            {{ getOnlineStatus("status", createdByUser) }}
+            {{ getOnlineStatus("status", store.createdByUser) }}
           </span>
         </q-item-section>
 
@@ -148,7 +152,7 @@ const onLoad = (async (_: any, done: any) => {
               store.currentTitle = item.title;
               store.correntStatusIssue = item.status;
               store.currentCategory = item.category.name;
-              createdByUser = item.createdByUserId;
+              store.createdByUser = item.createdByUserId;
               store.issue
                 ? (store.issue.result = store.issue.result.map((v) => {
                     if (v.id === item.id) {
@@ -171,7 +175,12 @@ const onLoad = (async (_: any, done: any) => {
               </q-avatar>
             </div>
             <div class="col column q-ml-md">
-              <span class="text-long col text-weight-bold line-ellipsis">
+              <span>
+                <q-badge color="blue">
+                  {{ item.category.name }}
+                </q-badge>
+              </span>
+              <span class="text-longcol text-weight-bold line-ellipsis">
                 {{ item.title }}
               </span>
 
diff --git a/src/modules/00_support/store/Main.ts b/src/modules/00_support/store/Main.ts
index d5a456b47..549465a41 100644
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@@ -33,6 +33,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   const currentPageIssue = ref<number>();
   const currentTotalIssue = ref<number>();
   const currentCategory = ref<string>();
+  const createdByUser = ref<string>("");
 
   const rowsCategory = ref<SupportIssueCategoryResponse>();
 
@@ -106,9 +107,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   });
 
   function sendMessage(content: string, to: string) {
-    console.log(to);
-
     socket.emit("message", { to, content });
+
+    console.log(socket);
+
     scrollToEnd();
   }
 
@@ -311,6 +313,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     currentCategory,
     rowsCategory,
     userStatus,
+    createdByUser,
     fetchIssue,
     fetchMessage,
     fetchMessageStatus,
diff --git a/src/modules/00_support/views/MainPage.vue b/src/modules/00_support/views/MainPage.vue
index b60ce91d6..636d05a31 100644
--- a/src/modules/00_support/views/MainPage.vue
+++ b/src/modules/00_support/views/MainPage.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import FormChat from "@/modules/00_support/components/FormChat.vue";
 import { useSupportStore } from "@/modules/00_support/store/Main";
+import { storeToRefs } from "pinia";
 import { onMounted, onUnmounted, ref } from "vue";
 const store = useSupportStore();
+const { currentIssue } = storeToRefs(store);
 
 onMounted(async () => {
   store.socket.connect();
+  if (currentIssue.value) {
+    store.socket.emit("join-issue", { issueId: currentIssue.value });
+    store.socket.emit("mark-read", { issueId: currentIssue.value });
+  }
 });
 
 onUnmounted(async () => {
@@ -14,7 +20,7 @@ onUnmounted(async () => {
 </script>
 
 <template>
-  <form-Chat />
+  <form-chat />
 </template>
 
 <style scoped></style>