diff --git a/src/components/room/lobby.vue b/src/components/room/lobby.vue
index c0ddde7..c95b25c 100644
--- a/src/components/room/lobby.vue
+++ b/src/components/room/lobby.vue
@@ -52,9 +52,10 @@ onMounted(() => {
 
   if (detailRoom.value.id) {
     const data: IRoomSocket = {
-      roomPin: detailRoom.value.room_pin,
-      userId: authStore.getUser?.id,
-      name: 'name',
+      room_pin: detailRoom.value.room_pin,
+      room_id: detailRoom.value.id,
+      user_id: authStore.getUser?.id,
+      nick_name: 'name',
     }
 
     socketStore.handleCreateRoomData(data)
@@ -69,14 +70,16 @@ watch(listMember.value, (val) => {
 
 const handleLocked = () => {
   const data: ILocked = {
-    roomPin: detailRoom.value.room_pin,
+    room_pin: detailRoom.value.room_pin,
+    host_id: authStore.getUser?.id as string,
   }
   socketStore.handleLockRoomData(data)
 }
 
 const handleUnlocked = () => {
   const data: ILocked = {
-    roomPin: detailRoom.value.room_pin,
+    room_pin: detailRoom.value.room_pin,
+    host_id: authStore.getUser?.id as string,
   }
   socketStore.handleUnlockRoomData(data)
 }
@@ -90,8 +93,9 @@ const addAvatarOnList = (data: IMember[]) => {
 
 const removeMember = (item: IMember) => {
   const data: IKickMem = {
-    roomPin: detailRoom.value.room_pin,
-    socketId: item.new_player.socket_id,
+    room_pin: detailRoom.value.room_pin,
+    participant_id: item.new_participant.id,
+    host_id: authStore.getUser?.id as string,
   }
 
   socketStore.handleKickMember(data)
@@ -223,7 +227,7 @@ const copyCode = async () => {
       >
         <div
           v-for="item in membersWithAvatars"
-          :key="item.new_player.user_id"
+          :key="item.new_participant.user_id"
           v-motion
           :initial="{ opacity: 0, x: 100 }"
           :enter="{ opacity: 1, x: 0, scale: 1 }"
@@ -234,7 +238,7 @@ const copyCode = async () => {
             class="w-8 h-8"
             :src="item.avatar"
           />
-          <p class="text-base font-bold">{{ item.new_player.name }}</p>
+          <p class="text-base font-bold">{{ item.new_participant.nick_name }}</p>
           <div
             class="hidden group-hover:flex absolute bg-white -top-2 w-[18px] h-[18px] rounded-full text-[26px] font-semibold cursor-pointer items-center right-1"
             @click="removeMember(item)"
diff --git a/src/components/room/play/AnswerStatistic.vue b/src/components/room/play/AnswerStatistic.vue
index eb8e966..0d4b7c8 100644
--- a/src/components/room/play/AnswerStatistic.vue
+++ b/src/components/room/play/AnswerStatistic.vue
@@ -62,7 +62,7 @@ const optionMapped = computed(() => {
     return {
       id: answer.id,
       label: answer.content,
-      votes: props.summaryAnswer.answers_count[answer.id],
+      votes: props.summaryAnswer.choices[answer.id],
       color: colorsHex[index].primary,
       correct: props.summaryAnswer.correct_answer_id === answer.id,
     }
diff --git a/src/components/room/play/PlayHostView.vue b/src/components/room/play/PlayHostView.vue
index cedb6af..45161b1 100644
--- a/src/components/room/play/PlayHostView.vue
+++ b/src/components/room/play/PlayHostView.vue
@@ -460,6 +460,7 @@ const handleShowRightAnswer = async (time: number) => {
 const handleShowRanking = async (time: number, val: SocketLeaderboard) => {
   if (lastQuestionId.value === socketData.value?.question?.id) {
     emits('showFinalRanking', true, val)
+    socketStore.handleQuizFinished()
     return
   }
   emits('showRanking', true, val)
@@ -542,13 +543,13 @@ watch(
 
     if (newVal.event === 'answerQuestion') {
       console.log('answerQuestion', newVal.data)
-      usersAnswerCount.value = (newVal.data as SocketUserAnswerQuestion).no_player_answered
+      usersAnswerCount.value = (newVal.data as SocketUserAnswerQuestion).no_participant_answered
     }
   },
   { immediate: true },
 )
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (countdownInterval) clearInterval(countdownInterval)
 })
 </script>
diff --git a/src/components/room/play/Ranking.vue b/src/components/room/play/Ranking.vue
index 5429e02..8e5738e 100644
--- a/src/components/room/play/Ranking.vue
+++ b/src/components/room/play/Ranking.vue
@@ -67,7 +67,7 @@ const leaderboardArr = computed(() => {
           />
           <div>
             <p class="font-semibold text-lg">
-              {{ user.name }}
+              {{ user.nick_name }}
             </p>
             <div class="flex gap-1">
               <span class="font-semibold"> {{ user.total_score }} </span> point
diff --git a/src/components/room/play/RankingFinal.vue b/src/components/room/play/RankingFinal.vue
index 6abb294..5cffa16 100644
--- a/src/components/room/play/RankingFinal.vue
+++ b/src/components/room/play/RankingFinal.vue
@@ -100,7 +100,7 @@ onMounted(() => {
             :enter="{ opacity: 1, y: 0 }"
             :delay="delayTime.second + 500 + 200"
           >
-            {{ secondPlayer.name }}
+            {{ secondPlayer.nick_name }}
           </p>
           <div
             v-motion
@@ -149,7 +149,7 @@ onMounted(() => {
             :delay="delayTime.first + 500 + 200"
             class="font-bold text-white text-lg mt-5 mb-2"
           >
-            {{ firstPlayer.name }}
+            {{ firstPlayer.nick_name }}
           </p>
           <div
             v-motion
@@ -194,7 +194,7 @@ onMounted(() => {
             :delay="delayTime.third + 500 + 200"
             class="font-bold text-white text-lg mt-5 mb-2"
           >
-            {{ thirdPlayer.name }}
+            {{ thirdPlayer.nick_name }}
           </p>
           <div
             v-motion
@@ -237,7 +237,7 @@ onMounted(() => {
           />
           <div>
             <p class="font-semibold text-lg">
-              {{ user.name }}
+              {{ user.nick_name }}
             </p>
             <div class="flex gap-1">
               <span class="font-semibold text-primary"> {{ user.total_score }} </span> point
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 890b9ec..73aebc2 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -7,7 +7,10 @@ import TopBar from '@/components/layout/TopBar.vue'
     <TopBar />
     <div class="w-full flex max-md:pt-16">
       <SideBar />
-      <div class="flex-1 relative overflow-y-auto bg-gray-bg-100">
+      <div
+        id="saved-position"
+        class="flex-1 relative overflow-y-auto bg-gray-bg-100"
+      >
         <slot />
       </div>
     </div>
diff --git a/src/pages/groups/detail/group-detail.vue b/src/pages/groups/detail/group-detail.vue
index 4e2e75a..8a4470a 100644
--- a/src/pages/groups/detail/group-detail.vue
+++ b/src/pages/groups/detail/group-detail.vue
@@ -47,13 +47,10 @@ onBeforeMount(() => {
     postStore.fetchPosts(1, route.params.groupId)
   }
 })
-onBeforeUnmount(() => {
-  postStore.$reset()
-})
 </script>
 
 <template>
-  <div class="p-6 h-screen flex flex-col gap-4 relative overflow-hidden">
+  <div class="p-6 pb-0 h-full flex flex-col gap-4 relative overflow-hidden">
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
@@ -67,85 +64,92 @@ onBeforeUnmount(() => {
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
-    <Card class="flex flex-col gap-12 h-full overflow-auto">
-      <ScrollArea>
-        <div class="px-6 pt-6 flex items-center justify-between">
-          <h3
-            v-if="groupInfo.name"
-            class="text-base font-semibold"
-          >
-            {{ groupInfo.name }}
-          </h3>
+    <div class="flex h-full justify-center">
+      <Card
+        class="w-full max-w-[600px] flex border-b-0 rounded-b-none flex-col gap-12 h-full overflow-auto"
+      >
+        <ScrollArea>
+          <div class="px-6 pt-6 flex items-center justify-between">
+            <h3
+              v-if="groupInfo.name"
+              class="text-base font-semibold"
+            >
+              {{ groupInfo.name }}
+            </h3>
 
-          <h3
-            v-else
-            class="text-base font-semibold"
-          >
-            Title
-          </h3>
-          <div class="flex items-center">
-            <div class="flex">
-              <div
-                v-for="(item, index) in listMembers"
-                :key="index"
-              >
+            <h3
+              v-else
+              class="text-base font-semibold"
+            >
+              Title
+            </h3>
+            <div class="flex items-center">
+              <div class="flex">
+                <div
+                  v-for="(item, index) in listMembers"
+                  :key="index"
+                >
+                  <Avatar
+                    v-if="index < 4"
+                    :class="{ '-ml-[20px]': index > 0 }"
+                    class="border-2"
+                  >
+                    <AvatarImage
+                      v-if="item?.avatar"
+                      :src="item?.avatar"
+                    />
+                    <AvatarFallback v-if="item.name">{{
+                      item.name.charAt(0).toUpperCase()
+                    }}</AvatarFallback>
+                  </Avatar>
+                </div>
                 <Avatar
-                  v-if="index < 4"
-                  :class="{ '-ml-[20px]': index > 0 }"
-                  class="border-2"
+                  v-if="listMembers.length > 4"
+                  class="-ml-[20px]"
                 >
-                  <AvatarImage
-                    v-if="item?.avatar"
-                    :src="item?.avatar"
-                  />
-                  <AvatarFallback v-if="item.name">{{
-                    item.name.charAt(0).toUpperCase()
-                  }}</AvatarFallback>
+                  <AvatarFallback>+{{ listMembers.length - 4 }}</AvatarFallback>
                 </Avatar>
               </div>
-              <Avatar
-                v-if="listMembers.length > 4"
-                class="-ml-[20px]"
+              <div
+                class="ml-6 cursor-pointer w-8 h-8 rounded-xl flex items-center justify-center border"
               >
-                <AvatarFallback>+{{ listMembers.length - 4 }}</AvatarFallback>
-              </Avatar>
+                <span class="i-solar-menu-dots-bold rotate-90"></span>
+              </div>
             </div>
-            <div
-              class="ml-6 cursor-pointer w-8 h-8 rounded-xl flex items-center justify-center border"
+          </div>
+          <div class="w-full relative">
+            <Tabs default-value="activity">
+              <TabsList class="mb-8 ml-6 mt-6">
+                <TabsTrigger value="activity"> Activity </TabsTrigger>
+                <TabsTrigger value="shared"> Shared </TabsTrigger>
+                <TabsTrigger value="assignment"> Assignments </TabsTrigger>
+              </TabsList>
+              <TabsContent value="activity">
+                <Activity />
+              </TabsContent>
+              <TabsContent value="shared"> <Shared /> </TabsContent>
+              <TabsContent value="assignment"> <Assignments /> </TabsContent>
+            </Tabs>
+            <Button
+              class="absolute top-6 right-6 h-10 bg-primary flex items-center"
+              @click="openModal"
             >
-              <span class="i-solar-menu-dots-bold rotate-90"></span>
-            </div>
+              Invite Member
+            </Button>
+            <MInviteMember
+              v-if="isShowModal"
+              @close="closeModal"
+            />
           </div>
-        </div>
-        <div class="w-full relative">
-          <Tabs default-value="activity">
-            <TabsList class="mb-8 ml-6 mt-6">
-              <TabsTrigger value="activity"> Activity </TabsTrigger>
-              <TabsTrigger value="shared"> Shared </TabsTrigger>
-              <TabsTrigger value="assignment"> Assignments </TabsTrigger>
-            </TabsList>
-            <TabsContent value="activity">
-              <Activity />
-            </TabsContent>
-            <TabsContent value="shared"> <Shared /> </TabsContent>
-            <TabsContent value="assignment"> <Assignments /> </TabsContent>
-          </Tabs>
-          <Button
-            class="absolute top-6 right-6 h-10 bg-primary flex items-center"
-            @click="openModal"
-          >
-            Invite Member
-          </Button>
-          <MInviteMember
-            v-if="isShowModal"
-            @close="closeModal"
-          />
-        </div>
-      </ScrollArea>
-    </Card>
+        </ScrollArea>
+      </Card>
 
+      <div class="">
+        <ChatBox />
+      </div>
+    </div>
     <div class="">
-      <ChatBox />
+      <ChatThumnail />
     </div>
   </div>
 </template>
diff --git a/src/pages/room/member-play/instructions-play.vue b/src/pages/room/member-play/instructions-play.vue
index d3cd5b6..6939fde 100644
--- a/src/pages/room/member-play/instructions-play.vue
+++ b/src/pages/room/member-play/instructions-play.vue
@@ -9,6 +9,7 @@ import { useSocketStore } from '@/stores/socket'
 import { useRoomStore } from '@/stores/room'
 import type { IKickPlayer, IMember } from '@/types'
 import SlideEditor from '@/components/quizzfly/create/slide/SlideEditor.vue'
+import { showToast } from '@/utils/toast'
 
 const socketMessage = computed(() => {
   return socketStore.getMessage
@@ -17,23 +18,22 @@ const socketMessage = computed(() => {
 const router = useRouter()
 const socketStore = useSocketStore()
 const roomStore = useRoomStore()
-const socketData = ref<SocketQuizStarted>()
 
-const socketIdLocalStorage = ref('')
+const socketData = ref<SocketQuizStarted>()
+const participantId = ref('')
 const isGameStarted = ref(false)
 const isSentAnswer = ref(false)
 const isShowResult = ref(false)
 const resultAnswer = ref<SocketResultAnswer | null>(null)
 const leaderboardData = ref<SocketLeaderboard>()
+const isShowFinalRanking = ref(false)
+
 const currentTotalScore = computed(() => {
   return (
-    leaderboardData.value?.leader_board.find(
-      (item) => item.socket_id === socketIdLocalStorage.value,
-    )?.total_score || 0
+    leaderboardData.value?.leader_board.find((item) => item.id === participantId.value)
+      ?.total_score || 0
   )
 })
-const isShowFinalRanking = ref(false)
-const lastQuestionId = ref<string | null>(null)
 
 onBeforeMount(() => {
   const name = localStorage.getItem('name')
@@ -50,15 +50,20 @@ onBeforeMount(() => {
   })
   console.log('name', name, 'roomPin', roomPin)
   socketStore.handleJoinRoomData({
-    name: name || '',
-    roomPin: roomPin || '',
+    nick_name: name || '',
+    room_pin: roomPin || '',
   })
 })
 
 watch(socketMessage, (val) => {
   if (val) {
-    if (val.event === 'playerJoined') {
-      socketIdLocalStorage.value = (val.data as IMember).new_player.socket_id
+    if (val.event === 'quizFinished') {
+      isShowFinalRanking.value = true
+      return
+    }
+
+    if (val.event === 'participantJoined') {
+      participantId.value = (val.data as IMember).new_participant.id
     }
 
     if (val.event === 'quizStarted' || val.event === 'nextQuestion') {
@@ -66,11 +71,6 @@ watch(socketMessage, (val) => {
       isSentAnswer.value = false
       isShowResult.value = false
       socketData.value = val.data as SocketQuizStarted
-
-      if (val.event === 'quizStarted') {
-        const numberOfQuestions = (val.data as SocketQuizStarted).questions.length
-        lastQuestionId.value = (val.data as SocketQuizStarted).questions[numberOfQuestions - 1].id
-      }
     }
 
     if (val.event === 'resultAnswer') {
@@ -79,9 +79,13 @@ watch(socketMessage, (val) => {
       resultAnswer.value = val.data as SocketResultAnswer
     }
 
-    if (val.event === 'kickPlayer') {
-      const socketId = localStorage.getItem('name') // TODO - use socketId
-      if (socketId && socketId === (val.data as IKickPlayer).player_left.name) {
+    if (val.event === 'kickParticipant') {
+      const id = localStorage.getItem('participantID') // TODO - use socketId
+      if (id && id === (val.data as IKickPlayer).participant_left.id) {
+        showToast({
+          description: 'You have been kicked out of the room',
+          variant: 'destructive',
+        })
         localStorage.removeItem('roomPin')
         router.push({ name: 'play-lobby' })
       }
@@ -89,10 +93,6 @@ watch(socketMessage, (val) => {
 
     if (val.event === 'updateLeaderboard') {
       leaderboardData.value = val.data as SocketLeaderboard
-      if (lastQuestionId.value === socketData.value?.question.id) {
-        console.log('show final ranking')
-        isShowFinalRanking.value = true
-      }
     }
   }
 })
@@ -100,8 +100,8 @@ watch(socketMessage, (val) => {
 const handleSendAnswer = (answerId: string) => {
   isSentAnswer.value = true
   socketStore.handleAnswerQuestion({
-    answerId,
-    questionId: socketData.value?.question.id || '',
+    answer_id: answerId,
+    question_id: socketData.value?.question.id || '',
   })
 }
 </script>
diff --git a/src/pages/room/play.vue b/src/pages/room/play.vue
index 2bcaf4d..a0adea3 100644
--- a/src/pages/room/play.vue
+++ b/src/pages/room/play.vue
@@ -29,9 +29,10 @@ onMounted(() => {
 
   if (detailRoom.value.id) {
     const data: IRoomSocket = {
-      roomPin: detailRoom.value.room_pin,
-      userId: authStore.getUser?.id,
-      name: '',
+      room_pin: detailRoom.value.room_pin,
+      room_id: detailRoom.value.id,
+      user_id: authStore.getUser?.id,
+      nick_name: '',
     }
 
     socketStore.handleCreateRoomData(data)
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
index 0ff2d78..e835084 100644
--- a/src/stores/socket.ts
+++ b/src/stores/socket.ts
@@ -95,12 +95,12 @@ export const useSocketStore = defineStore({
         })
       })
 
-      this.client.on('playerJoined', (newContent: IMember) => {
+      this.client.on('participantJoined', (newContent: IMember) => {
         this.message = {
-          event: 'playerJoined',
+          event: 'participantJoined',
           data: newContent,
         }
-        localStorage.setItem('socketId', newContent.new_player.socket_id)
+        localStorage.setItem('participantID', newContent.new_participant.id)
         roomStore.setMemberJoins(newContent)
       })
 
@@ -108,25 +108,25 @@ export const useSocketStore = defineStore({
         roomStore.setLockedRoom(newContent.locked)
       })
 
-      this.client.on('playerLeft', (newContent: IMember) => {
+      this.client.on('participantLeft', (newContent: IMember) => {
         const index = roomStore.getListMemberJoins.findIndex(
-          (item) => item.new_player.socket_id === newContent?.player_left?.socket_id,
+          (item) => item.new_participant.socket_id === newContent?.participant_left?.socket_id,
         )
         if (index !== -1) {
           roomStore.getListMemberJoins.splice(index, 1)
         }
       })
 
-      this.client.on('kickPlayer', (newContent: IKickPlayer) => {
+      this.client.on('kickParticipant', (newContent: IKickPlayer) => {
         const index = roomStore.getListMemberJoins.findIndex(
-          (item) => item.new_player.socket_id === newContent.player_left.socket_id,
+          (item) => item.new_participant.socket_id === newContent.participant_left.socket_id,
         )
         if (index !== -1) {
           roomStore.getListMemberJoins.splice(index, 1)
         }
 
         this.message = {
-          event: 'kickPlayer',
+          event: 'kickParticipant',
           data: newContent,
         }
       })
@@ -179,6 +179,15 @@ export const useSocketStore = defineStore({
         }
       })
 
+      // event quizFinished
+      this.client.on('quizFinished', (newContent: any) => {
+        console.log('Received quizFinished:', newContent) // Debug
+        this.message = {
+          event: 'quizFinished',
+          data: newContent,
+        }
+      })
+
       await new Promise((resolve) => {
         this.resolveCallback = resolve
       })
@@ -239,7 +248,6 @@ export const useSocketStore = defineStore({
     },
     handleJoinRoomData(data: IRoomSocket) {
       try {
-        console.log('Join room data:', data) // Debug
         this.client.emit('joinRoom', data)
       } catch (error) {
         router.push({
@@ -256,7 +264,7 @@ export const useSocketStore = defineStore({
       this.client.emit('leaveRoom', data)
     },
     handleKickMember(data: IKickMem) {
-      this.client.emit('kickPlayer', data)
+      this.client.emit('kickParticipant', data)
     },
     handleLockRoomData(data: ILocked) {
       this.client.emit('lockRoom', data)
@@ -278,15 +286,17 @@ export const useSocketStore = defineStore({
       const roomStore = useRoomStore()
       const authStore = useAuthStore()
       this.client.emit('startQuiz', {
-        roomPin: roomStore.getRoomInfo.room_pin,
-        quizzflyId: roomStore.getRoomInfo.quizzfly_id,
-        hostId: authStore.getUser?.id || '',
+        room_pin: roomStore.getRoomInfo.room_pin,
+        quizzfly_id: roomStore.getRoomInfo.quizzfly_id,
+        host_id: authStore.getUser?.id || '',
       })
     },
     handleNextQuestion() {
       const roomStore = useRoomStore()
+      const authStore = useAuthStore()
       this.client.emit('nextQuestion', {
-        roomPin: roomStore.getRoomInfo.room_pin,
+        room_pin: roomStore.getRoomInfo.room_pin,
+        host_id: authStore.getUser?.id,
       })
     },
     clearSocketStore() {
@@ -298,23 +308,36 @@ export const useSocketStore = defineStore({
     },
     handleFinishQuestion(questionId: string) {
       const roomStore = useRoomStore()
+      const authStore = useAuthStore()
       this.client.emit('finishQuestion', {
-        roomPin: roomStore.getRoomInfo.room_pin,
-        questionId,
+        room_pin: roomStore.getRoomInfo.room_pin,
+        question_id: questionId,
+        host_id: authStore.getUser?.id,
       })
     },
-    handleAnswerQuestion(data: { answerId: string; questionId: string }) {
+    handleAnswerQuestion(data: { answer_id: string; question_id: string }) {
       const roomStore = useRoomStore()
       this.client.emit('answerQuestion', {
-        roomPin: roomStore.getRoomInfo.room_pin,
+        room_pin: roomStore.getRoomInfo.room_pin,
         ...data,
+        participant_id: localStorage.getItem('participantID'),
       })
     },
     handleRequestLeaderboard(questionId: string) {
       const roomStore = useRoomStore()
+      const authStore = useAuthStore()
       this.client.emit('updateLeaderboard', {
-        roomPin: roomStore.getRoomInfo.room_pin,
-        questionId,
+        room_pin: roomStore.getRoomInfo.room_pin,
+        question_id: questionId,
+        host_id: authStore.getUser?.id,
+      })
+    },
+    handleQuizFinished() {
+      const roomStore = useRoomStore()
+      const authStore = useAuthStore()
+      this.client.emit('finishQuiz', {
+        room_pin: roomStore.getRoomInfo.room_pin,
+        host_id: authStore.getUser?.id,
       })
     },
   },
diff --git a/src/types/room.ts b/src/types/room.ts
index bbec0b6..de24a93 100644
--- a/src/types/room.ts
+++ b/src/types/room.ts
@@ -12,25 +12,27 @@ export interface IRoom {
 }
 
 export interface IRoomSocket {
-  roomPin: string
-  userId?: string
-  name: string
+  room_pin: string
+  room_id?: string
+  user_id?: string
+  nick_name: string
 }
 
 export interface IMember {
-  new_player: {
+  new_participant: {
+    id: string
     socket_id: string
     user_id: string
-    name: string
+    nick_name: string
     role: string
   }
-  player_left?: {
+  participant_left?: {
     socket_id: string
     user_id: string
     name: string
     role: string
   }
-  total_player: number
+  total_participant: number
   avatar: string
 }
 
@@ -39,16 +41,19 @@ export interface IRoomLocked {
 }
 
 export interface ILocked {
-  roomPin: string
+  room_pin: string
+  host_id: string
 }
 
 export interface IKickMem {
-  roomPin: string
-  socketId: string
+  room_pin: string
+  participant_id: string
+  host_id: string
 }
 
 export interface IKickPlayer {
-  player_left: {
+  participant_left: {
+    id: string
     socket_id: string
     user_id: string
     name: string
diff --git a/src/types/socket.ts b/src/types/socket.ts
index 648ece6..7c46cfd 100644
--- a/src/types/socket.ts
+++ b/src/types/socket.ts
@@ -10,14 +10,15 @@ export type SocketEventName =
   | 'updateLeaderboard'
   | 'answerQuestion'
   | 'noMoreQuestions'
-  | 'kickPlayer'
-  | 'playerJoined'
   | 'createPost'
   | 'commentPost'
   | 'reactPost'
+  | 'kickParticipant'
+  | 'participantJoined'
+  | 'quizFinished'
 
 export interface SocketUserAnswerQuestion {
-  no_player_answered: number
+  no_participant_answered: number
 }
 export interface SocketLeaderboard {
   room_pin: string
@@ -25,9 +26,10 @@ export interface SocketLeaderboard {
 }
 
 interface LeaderboardEntry {
+  id: string
   user_id: string
   socket_id: string
-  name: string
+  nick_name: string
   role: string
   score: number
   total_score: string
@@ -38,7 +40,7 @@ export interface SocketResultAnswer {
   room_pin: string
   score: number
   total_score: number
-  correct: boolean
+  is_correct: boolean
   question_id: string
   correct_answer_id: string
   chosen_answer_id: string
@@ -47,7 +49,7 @@ export interface SocketSummaryAnswer {
   room_pin: string
   question_id: string
   correct_answer_id: string
-  answers_count: { [key: string]: number }
+  choices: { [key: string]: number }
 }
 export interface SocketQuizStarted {
   room_pin: string
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index d496bd6..33f05e2 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -22,4 +22,12 @@ export const colorsHex = [
     primary: '#0fd18d',
     border: '#00b775',
   },
+  {
+    primary: '#f65655',
+    border: '#e72261',
+  },
+  {
+    primary: '#fe9820',
+    border: '#f58400',
+  },
 ]