diff --git a/frontend/components/product/ChatBox/ChatBoxContainer.vue b/frontend/components/product/ChatBox/ChatBoxContainer.vue
index fc01eca..a0c2d63 100644
--- a/frontend/components/product/ChatBox/ChatBoxContainer.vue
+++ b/frontend/components/product/ChatBox/ChatBoxContainer.vue
@@ -14,7 +14,8 @@ const { isOpen } = inject("isOpen") as any;
 
 // state
 
-const id = ref(1);
+const route = useRoute();
+const id = route.params.id as string | number;
 
 const chatContainerEl = ref<HTMLElement | null>(null);
 
@@ -25,17 +26,17 @@ const {
     isPending: isChatPending,
     isFetchingNextPage: isNextChatPagePending,
     hasNextPage: hasMoreChat,
-    fetchNextPage: loadMoreChat,
+    fetchNextPage: loadMoreChat
 } = useGetChat(id, isOpen);
 const isCreateMessagePending = useIsMutating({
-    mutationKey: [MUTATION_KEYS.create_chat],
+    mutationKey: [MUTATION_KEYS.create_chat]
 });
 
 const canLoadMoreChat = ref(false);
 
 const isChatScrollLocked = useScrollLock(chatContainerEl);
 const { y: chatContainerScrollY } = useScroll(chatContainerEl, {
-    behavior: "smooth",
+    behavior: "smooth"
 });
 
 useInfiniteScroll(
@@ -52,7 +53,7 @@ useInfiniteScroll(
         distance: 10,
         direction: "top",
         throttle: 1000,
-        canLoadMore: () => canLoadMoreChat.value,
+        canLoadMore: () => canLoadMoreChat.value
     }
 );
 
@@ -112,7 +113,7 @@ whenever(
         }, 2000);
     },
     {
-        once: true,
+        once: true
     }
 );
 </script>