diff --git a/src/App.vue b/src/App.vue
index a5cd7c1..0441af4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@ onMounted(() => {
 //     title: 'Are you sure?',
 //     question: 'Do you really want to delete this item?',
 //     onlyConfirm: true,
-//     error: true,
+//     warning: true,
 //   })
 //   console.log('result', result)
 // }
diff --git a/src/components/base/ConfirmDialog.vue b/src/components/base/ConfirmDialog.vue
index 175b3d6..b2ffce4 100644
--- a/src/components/base/ConfirmDialog.vue
+++ b/src/components/base/ConfirmDialog.vue
@@ -32,7 +32,7 @@ watch(
           <span class="i-material-symbols-light-check-rounded text-3xl"></span>
         </div>
         <div
-          v-if="confirmDialog.getQuestion?.error"
+          v-if="confirmDialog.getQuestion?.warning"
           class="w-[48px] h-[48px] bg-[#fde7e7] text-[#e3342f] flex justify-center items-center rounded-full"
         >
           <span class="i-material-symbols-light-error-rounded text-3xl"></span>
@@ -52,6 +52,7 @@ watch(
         >
         <Button
           class="w-full rounded-md py-5 font-medium"
+          :class="{ 'bg-red-500 hover:bg-red-700': confirmDialog.getQuestion?.warning }"
           @click="confirmDialog.confirm(true)"
           >Confirm</Button
         >
diff --git a/src/components/group/Activity.vue b/src/components/group/Activity.vue
index e878965..595abd3 100644
--- a/src/components/group/Activity.vue
+++ b/src/components/group/Activity.vue
@@ -50,6 +50,7 @@ const handleDeletePost = async (id: string) => {
   const result = await confirmDialog.open({
     title: 'Are you want to delete this group?',
     question: 'All data in your group will be lost',
+    warning: true,
   })
 
   if (result.isConfirmed) {
diff --git a/src/components/group/list/GroupList.vue b/src/components/group/list/GroupList.vue
index 6c4a2c8..daf26d9 100644
--- a/src/components/group/list/GroupList.vue
+++ b/src/components/group/list/GroupList.vue
@@ -11,6 +11,7 @@ const handleDeleteGroup = async (id: string) => {
   const result = await confirmDialog.open({
     title: 'Are you want to delete this group?',
     question: 'All data in your group will be lost',
+    warning: true,
   })
 
   if (result.isConfirmed) {
diff --git a/src/components/layout/SideBar.vue b/src/components/layout/SideBar.vue
index 411f80f..f2ed0d7 100644
--- a/src/components/layout/SideBar.vue
+++ b/src/components/layout/SideBar.vue
@@ -10,7 +10,7 @@ const openConfirm = async () => {
   const { isConfirmed } = await confirmDialog.open({
     title: 'Confirm',
     question: 'Do you really want to logout?',
-    error: true,
+    warning: true,
   })
 
   if (isConfirmed) {
diff --git a/src/components/quizzfly/create/QuestionList.vue b/src/components/quizzfly/create/QuestionList.vue
index 5356943..5cb9f2a 100644
--- a/src/components/quizzfly/create/QuestionList.vue
+++ b/src/components/quizzfly/create/QuestionList.vue
@@ -70,6 +70,7 @@ const handleConfirmDelete = async (question: Question) => {
   const result = await confirmDialog.open({
     title: 'Are you sure?',
     question: 'Do you really want to delete this item?',
+    warning: true,
   })
 
   if (result.isConfirmed) {
diff --git a/src/components/quizzfly/list/QuizzflyList.vue b/src/components/quizzfly/list/QuizzflyList.vue
index 945660d..2c7f579 100644
--- a/src/components/quizzfly/list/QuizzflyList.vue
+++ b/src/components/quizzfly/list/QuizzflyList.vue
@@ -14,6 +14,7 @@ const handleConfirmDelete = async (quizzflyId: string) => {
   const { isConfirmed } = await confirmDialog.open({
     title: 'Delete Quizzfly',
     question: 'Are you sure you want to delete this quizzfly?',
+    warning: true,
   })
 
   if (isConfirmed) {
diff --git a/src/pages/auth/password/reset.vue b/src/pages/auth/password/reset.vue
index 5770f16..7d4ae13 100644
--- a/src/pages/auth/password/reset.vue
+++ b/src/pages/auth/password/reset.vue
@@ -66,7 +66,7 @@ const openConfirmError = async () => {
     title: 'Failed',
     question: 'Expired password recovery link',
     onlyConfirm: true,
-    error: true,
+    warning: true,
   })
 
   router.push('/login')
diff --git a/src/pages/groups/detail/group-detail.vue b/src/pages/groups/detail/group-detail.vue
index 880c5de..f0e1493 100644
--- a/src/pages/groups/detail/group-detail.vue
+++ b/src/pages/groups/detail/group-detail.vue
@@ -12,7 +12,6 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
@@ -21,6 +20,7 @@ import { usePostStore } from '@/stores/group/post'
 
 const groupStore = useGroupStore()
 const postStore = usePostStore()
+const route = useRoute()
 
 const groupInfo = computed(() => {
   return groupStore.getGroupInfo
@@ -40,6 +40,11 @@ const openModal = () => {
   isShowModal.value = true
 }
 
+onBeforeMount(() => {
+  if (route.params.groupId && typeof route.params.groupId === 'string') {
+    postStore.fetchPosts(1, route.params.groupId)
+  }
+})
 onBeforeUnmount(() => {
   postStore.$reset()
 })
@@ -50,7 +55,9 @@ onBeforeUnmount(() => {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/groups"> Groups </BreadcrumbLink>
+          <BreadcrumbPage>
+            <RouterLink to="/groups">Groups</RouterLink>
+          </BreadcrumbPage>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
diff --git a/src/pages/groups/detail/index.vue b/src/pages/groups/detail/index.vue
index 26ba43e..30df27d 100644
--- a/src/pages/groups/detail/index.vue
+++ b/src/pages/groups/detail/index.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import { useGroupStore } from '@/stores/group/group'
-import { usePostStore } from '@/stores/group/post'
 
 const groupStore = useGroupStore()
-const postStore = usePostStore()
 const route = useRoute()
 
 const groupId = computed(() => route.params.groupId)
@@ -12,7 +10,6 @@ watchEffect(() => {
   if (groupId.value && typeof groupId.value === 'string') {
     groupStore.listMemberGroups(groupId.value)
     groupStore.getDetailGroup(groupId.value)
-    postStore.fetchPosts(1, groupId.value)
   }
 })
 
diff --git a/src/pages/groups/joinGroup.vue b/src/pages/groups/joinGroup.vue
index ccdf8f7..3818c60 100644
--- a/src/pages/groups/joinGroup.vue
+++ b/src/pages/groups/joinGroup.vue
@@ -18,7 +18,7 @@ const openConfirm = async () => {
   const { isConfirmed } = await confirmDialog.open({
     title: 'Confirm',
     question: 'Do you really want to join this group?',
-    error: true,
+    warning: true,
   })
 
   if (isConfirmed) {
diff --git a/src/pages/quizzfly/create.vue b/src/pages/quizzfly/create.vue
index 8cef8d5..f3af9cb 100644
--- a/src/pages/quizzfly/create.vue
+++ b/src/pages/quizzfly/create.vue
@@ -35,7 +35,7 @@ onBeforeMount(async () => {
       title: 'Error',
       question: 'Have an error when fetching data!',
       onlyConfirm: true,
-      error: true,
+      warning: true,
     })
     router.push({ name: 'quizzfly' })
   } finally {
diff --git a/src/pages/test.vue b/src/pages/test.vue
index 480d867..37bc483 100644
--- a/src/pages/test.vue
+++ b/src/pages/test.vue
@@ -32,7 +32,7 @@ const audioFiles = import.meta.glob('/assets/audio/*.mp3')
 //     title: 'Are you sure?',
 //     question: 'Do you really want to delete this item?',
 //     onlyConfirm: true,
-//     error: true,
+//     warning: true,
 //   })
 // }
 
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index f77e5b5..1cb0765 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -8,7 +8,7 @@ interface IQuestion {
   data?: any
   onlyConfirm?: boolean
   success?: boolean
-  error?: boolean
+  warning?: boolean
 }
 
 export const useConfirmDialog = defineStore({