diff --git a/src/App.vue b/src/App.vue
index 5dea8c1..f883df3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,17 @@
 <template>
     <RouterView />
-    <VToasts/>
+    <VToasts />
+    <CustomToast />
 </template>
 
 <script>
-    // Components
-    import VToasts from '@/components/VToasts.vue';
+// Components
+import VToasts from '@/components/VToasts.vue';
+import CustomToast from './components/comments/CustomToast.vue';
 
-    export default {
-        name: 'App',
+export default {
+    name: 'App',
 
-        components: { VToasts }
-    };
-</script>
\ No newline at end of file
+    components: { VToasts, CustomToast }
+};
+</script>
diff --git a/src/components/VToasts.vue b/src/components/VToasts.vue
index a30ada5..722290f 100644
--- a/src/components/VToasts.vue
+++ b/src/components/VToasts.vue
@@ -8,9 +8,9 @@
             aria-live="assertive"
             aria-atomic="true"
         >
+            <div class="toast-header" v-html="item.title" v-if="!!item.title"></div>
             <div class="d-flex justify-content-between align-items-center">
                 <div class="toast-body" v-html="item.body"></div>
-
                 <button
                     v-if="item.clearable"
                     type="button"
@@ -29,7 +29,6 @@
 
     export default {
         name: 'VToasts',
-
         setup() {
             let items = installToast();
 
diff --git a/src/components/comments/CommentsFilterForm.vue b/src/components/comments/CommentsFilterForm.vue
new file mode 100644
index 0000000..27bfc98
--- /dev/null
+++ b/src/components/comments/CommentsFilterForm.vue
@@ -0,0 +1,63 @@
+<script>
+import { useModelRef } from '@/composables/model.composable';
+import VForm from '../form/VForm.vue';
+import VInput from '../form/VInput.vue';
+import { t } from '@/services/language.service';
+import VSelect from '../form/VSelect.vue';
+export default {
+    name: 'CommentsFilterForm',
+    setup() {
+
+
+        const filters = useModelRef('modelValue');
+
+        const statusItems = [
+            {
+                key: 'PENDING',
+                text: t('Pending')
+            },
+            {
+                key: 'REJECTED',
+                text: t('Rejected')
+            },
+            {
+                key: 'CONFIRMED',
+                text: t('Confirmed')
+            }
+        ]
+
+        return {
+            filters,
+            statusItems
+        }
+    },
+    props: {
+        modelValue: {
+            type: Object,
+            required: true
+        }
+    },
+    components: {
+        VForm,
+        VInput,
+        VSelect
+    },
+    emits: ['update:modelValue'],
+
+}
+</script>
+
+<template>
+    <VForm class="row">
+        <div class="col-3">
+            <VInput v-model="filters.searchQuery" :placeholder="$t('SearchInputPlaceholder')" id="searchQuery" />
+        </div>
+        <div class="col-3">
+            <VInput v-model="filters.email" :placeholder="$t('EmailPlaceholder')" />
+        </div>
+        <div class="col-2">
+            <VSelect v-model="filters.status" :items="statusItems" item-key="key" item-text="text"
+                :placeholder="$t('Filter by status')" clearable />
+        </div>
+    </VForm>
+</template>
diff --git a/src/components/comments/CustomToast.vue b/src/components/comments/CustomToast.vue
new file mode 100644
index 0000000..2ced62a
--- /dev/null
+++ b/src/components/comments/CustomToast.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="toast-container bottom-0 end-0">
+        <div v-for="item of items" :key="item.id"
+            :class="`toast show align-items-center border-1 m-2 fw-medium text-bg-${item.theme}`" role="alert"
+            aria-live="assertive" aria-atomic="true">
+            <div class="toast-header" v-html="item.title" v-if="!!item.title"></div>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="toast-body">
+                    <button @click="handleCallbackCall(item.id,item.callback)" class="btn btn-secondary">
+                        Undo
+                    </button>
+                </div>
+                <button v-if="item.clearable" type="button" class="btn-close p-3" aria-label="Close"
+                    @click="hideToast(item.id)"></button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { installCustomToast, useCustomToast } from '@/composables/customToast.composable';
+
+export default {
+    name: 'CustomToast',
+    setup() {
+        let items = installCustomToast();
+
+        const { hideToast } = useCustomToast();
+        const handleCallbackCall = (id,callback) => {
+            callback?.()
+            hideToast(id)
+        }
+
+        return {
+            items,
+            hideToast,
+            handleCallbackCall
+        };
+    },
+}
+</script>
diff --git a/src/components/layout/side-menu/VSideMenu.vue b/src/components/layout/side-menu/VSideMenu.vue
index e6b252c..d80be8c 100644
--- a/src/components/layout/side-menu/VSideMenu.vue
+++ b/src/components/layout/side-menu/VSideMenu.vue
@@ -24,19 +24,25 @@
 
                 {{ $t('Todos') }}
             </VSideMenuItem>
+            <VSideMenuItem :to="{ name: 'Comments' }">
+                <template #icon>
+                    <i class="bi-chat-dots-fill"></i>
+                </template>
+                {{ $t('Comments') }}
+            </VSideMenuItem>
         </nav>
     </aside>
 </template>
 
 <script>
-    // Components
-    import VSideMenuItem from '@/components/layout/side-menu/VSideMenuItem.vue';
+// Components
+import VSideMenuItem from '@/components/layout/side-menu/VSideMenuItem.vue';
 
-    export default {
-        name: 'VSideBar',
+export default {
+    name: 'VSideBar',
 
-        components: {
-            VSideMenuItem
-        }
+    components: {
+        VSideMenuItem
     }
+}
 </script>
diff --git a/src/composables/cache.composable.js b/src/composables/cache.composable.js
new file mode 100644
index 0000000..b068584
--- /dev/null
+++ b/src/composables/cache.composable.js
@@ -0,0 +1,16 @@
+import StorageService from "@/services/storage.service";
+
+export default function useLocaleStorageCache() {
+    const getCache = (key) => {
+        return StorageService.get(key);
+    };
+    const clearCache = (key) => StorageService.delete(key);
+
+    const setCache = (key, value) => StorageService.set(key, value);
+
+    return {
+        getCache,
+        clearCache,
+        setCache,
+    };
+}
diff --git a/src/composables/comments.composable.js b/src/composables/comments.composable.js
new file mode 100644
index 0000000..699ba49
--- /dev/null
+++ b/src/composables/comments.composable.js
@@ -0,0 +1,43 @@
+import { computed, ref } from "vue";
+import { useLoading } from "./loading.composable";
+import { keyBy } from "@/utils";
+import CommentsService from "@/services/comments.service";
+
+export const useFetchComments = () => {
+    const { isLoading, startLoading, endLoading } = useLoading();
+    const comments = ref([]);
+    const commentsKeyById = computed(() => keyBy(comments.value, "id"));
+
+    /**
+     * @param {AxiosRequestConfig} [config]
+     */
+    const fetchComments = (config) => {
+        startLoading();
+        return CommentsService.getAll(config)
+            .then((response) => {
+                comments.value = response.data.map((item) => ({ ...item, status: "PENDING" }));
+                return response;
+            })
+            .finally(() => {
+                endLoading();
+            });
+    };
+
+    const changeStatus = (id, status) => {
+        const updatedItemIndex = comments.value.findIndex((comment) => comment.id === id);
+        comments.value[updatedItemIndex].status = status;
+
+        // comments.value = comments.value.map((comment) => {
+        //     if (comment.id === id) return { ...comment, status };
+        //     else return comment;
+        // });
+    };
+
+    return {
+        comments,
+        commentsIsLoading: isLoading,
+        commentsKeyById,
+        fetchComments,
+        changeStatus,
+    };
+};
diff --git a/src/composables/customToast.composable.js b/src/composables/customToast.composable.js
new file mode 100644
index 0000000..d674609
--- /dev/null
+++ b/src/composables/customToast.composable.js
@@ -0,0 +1,52 @@
+import { ref, getCurrentInstance } from 'vue';
+
+// Utils
+import { getUniqueId } from '@/utils';
+
+const items = ref([]);
+
+export function installCustomToast() {
+    const instance = getCurrentInstance();
+    if (instance.type.name !== 'CustomToast') {
+        throw new Error('installToast should only be called in the Custom toast component');
+    }
+
+    return items;
+}
+
+export function useCustomToast() {
+    function showToast({ theme, duration = 5000, clearable = true , title, callback}) {
+        const id = getUniqueId();
+
+        const _timeOutId = setTimeout(function () {
+            hideToast(id);
+        }, duration);
+
+        items.value.push({
+            id,
+            duration,
+            theme,
+            clearable,
+            title,
+            callback,
+            _time_out_id: _timeOutId
+        });
+
+        return id;
+    }
+
+    function hideToast(id) {
+        const index = items.value.findIndex(function (item) {
+            return item.id === id;
+        });
+
+        clearTimeout(items.value[index]._time_out_id);
+
+        items.value.splice(index, 1);
+    }
+
+    return {
+        showToast,
+        hideToast
+    };
+}
diff --git a/src/composables/posts.composable.js b/src/composables/posts.composable.js
new file mode 100644
index 0000000..a52982f
--- /dev/null
+++ b/src/composables/posts.composable.js
@@ -0,0 +1,37 @@
+import { ref } from "vue";
+import { useLoading } from "./loading.composable";
+import PostsServices from "@/services/posts.services";
+import useLocaleStorageCache from "./cache.composable";
+
+export default function useFetchPost() {
+    const { endLoading, isLoading, startLoading } = useLoading();
+    const { getCache, setCache } = useLocaleStorageCache();
+
+    const post = ref(null);
+
+    async function fetchPost(id) {
+        const cachedPosts = getCache("cached-posts") || {};
+
+        if (cachedPosts[`post-${id}`]) {
+            post.value = cachedPosts[`post-${id}`];
+            return;
+        } else {
+            startLoading();
+            return PostsServices.getOneById(id)
+                .then((response) => {
+                    post.value = response.data;
+                    setCache('cached-posts', { ...cachedPosts, [`post-${id}`]: response.data })
+                    return response;
+                })
+                .finally(() => {
+                    endLoading();
+                });
+        }
+    }
+
+    return {
+        postIsLoading: isLoading,
+        post,
+        fetchPost,
+    };
+}
diff --git a/src/locales/en/messages.js b/src/locales/en/messages.js
index c8da1c7..e95d480 100644
--- a/src/locales/en/messages.js
+++ b/src/locales/en/messages.js
@@ -4,6 +4,10 @@ export default {
     "Password": "Password",
     "Submit": "Submit",
     "Cancel": "Cancel",
+    "Comments": "Comments",
+    "Confirm":"Confirm",
+    "Rejected":"Rejected",
+    "Pending":"Pending",
     "Dashboard": "Dashboard",
     "Users": "Users",
     "Authorization Error": "Authorization Error",
@@ -16,6 +20,8 @@ export default {
     "Email": "Email",
     "Loading": "Loading",
     "Previous": "Previous",
+    "SearchInputPlaceholder":'Search...',
+    "Text":"Text",
     "Next": "Next",
     "From": "From",
     "Size": "Size",
@@ -34,4 +40,10 @@ export default {
     "Dark": "Dark",
     "System": "System",
     "Settings": "Settings",
+    "Actions":"Actions",
+    "EmailPlaceholder":"Email",
+    "Post":"Post",
+    "RejectAll":"Reject All",
+    "ConfirmAll":"Confirm All",
+    "Confirmed":"Confirmed"
 };
diff --git a/src/locales/fa/messages.js b/src/locales/fa/messages.js
index 54e9ff3..c30239c 100644
--- a/src/locales/fa/messages.js
+++ b/src/locales/fa/messages.js
@@ -1,37 +1,47 @@
 export default {
-    "Login": "ورود",
-    "Username": "نام کاریری",
-    "Password": "رمز عبور",
-    "Submit": "ارسال",
-    "Cancel": "انصراف",
-    "Dashboard": "داشبورد",
-    "Users": "کاربران",
+    Login: "ورود",
+    Username: "نام کاریری",
+    Password: "رمز عبور",
+    Submit: "ارسال",
+    Cancel: "انصراف",
+    Dashboard: "داشبورد",
+    Users: "کاربران",
+    Comments: "نظرات",
+    Confirm: "تایید شده",
+    Rejected: "رد شده",
+    Pending: "در انتظار تایید",
     "Authorization Error": "خطای دسترسی",
     "No data available": "داده\u200Cای موجود نیست",
     "You are successfully logged in": "شما با موفقیت وارد سیستم شدید",
     "Incorrect username or password": "نام کاربری یا گذرواژه اشتباه است",
     "System error": "خطای سیستم",
-    "Id": "شناسه",
-    "Name": "نام",
-    "Email": "یارانامه",
-    "Loading": "درحال بارگذاری",
-    "Previous": "قبلی",
-    "Next": "بعدی",
-    "From": "از",
-    "Size": "اندازه",
-    "Todos": "کارها",
-    "Title": "عنوان",
-    "User": "کاربر",
-    "Status": "وضعیت",
-    "Completed": "تکمیل شده",
+    Id: "شناسه",
+    Post: "پست",
+    Name: "نام",
+    Email: "یارانامه",
+    Loading: "درحال بارگذاری",
+    Previous: "قبلی",
+    Next: "بعدی",
+    From: "از",
+    Size: "اندازه",
+    SearchInputPlaceholder: "جست و جو...",
+    Text: "متن",
+    Todos: "کارها",
+    Title: "عنوان",
+    User: "کاربر",
+    Status: "وضعیت",
+    Completed: "تکمیل شده",
     "Not completed": "تکمیل نشده",
     "Filter by title": "فیلتر بر اساس عنوان",
     "Filter by user": "فیلتر بر اساس کاربر",
     "Filter by status": "فیلتر بر اساس وضعیت",
-    "Language": "زبان",
-    "Theme": "زمینه",
-    "Light": "روشن",
-    "Dark": "تیره",
-    "System": "سیستم",
-    "Settings": "تنظیمات",
+    Language: "زبان",
+    Theme: "زمینه",
+    Light: "روشن",
+    Dark: "تیره",
+    System: "سیستم",
+    Settings: "تنظیمات",
+    Actions: "عملیات",
+    EmailPlaceholder: "Email",
+    "Confirmed":"تایید شده"
 };
diff --git a/src/router/index.js b/src/router/index.js
index 452ceea..8ea09b9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,51 +1,57 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory } from "vue-router";
 
-import AuthenticateRoute from './middleware/AuthenticateRoute';
-import AuthorizeRoute from './middleware/AuthorizeRoute';
-import RedirectIfAuthenticated from './middleware/RedirectIfAuthenticated';
+import AuthenticateRoute from "./middleware/AuthenticateRoute";
+import AuthorizeRoute from "./middleware/AuthorizeRoute";
+import RedirectIfAuthenticated from "./middleware/RedirectIfAuthenticated";
 
-import PanelView from '@/views/PanelView.vue';
+import PanelView from "@/views/PanelView.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
-            path: '/',
-            name: 'Panel',
+            path: "/",
+            name: "Panel",
             component: PanelView,
             beforeEnter: [AuthenticateRoute],
             children: [
                 {
-                    path: 'dashboard',
-                    name: 'Dashboard',
-                    component: () => import('@/views/DashboardView.vue'),
+                    path: "dashboard",
+                    name: "Dashboard",
+                    component: () => import("@/views/DashboardView.vue"),
                     beforeEnter: [AuthorizeRoute],
                     meta: {
-                        permissions: ['dashboard']
-                    }
+                        permissions: ["dashboard"],
+                    },
                 },
                 {
-                    path: 'users',
-                    name: 'Users',
-                    component: () => import('@/views/UsersView.vue')
+                    path: "users",
+                    name: "Users",
+                    component: () => import("@/views/UsersView.vue"),
                 },
                 {
-                    path: 'todos',
-                    name: 'Todos',
-                    component: () => import('@/views/TodosView.vue')
-                }
-            ]
+                    path: "todos",
+                    name: "Todos",
+                    component: () => import("@/views/TodosView.vue"),
+                },
+                {
+                    path:'comments',
+                    name:"Comments",
+                    component: () => import('@/views/CommentsView.vue'),
+                },
+
+            ],
         },
         {
-            path: '/login',
-            name: 'Login',
+            path: "/login",
+            name: "Login",
             // route level code-splitting
             // this generates a separate chunk (Login.[hash].js) for this route
             // which is lazy-loaded when the route is visited.
-            component: () => import('@/views/LoginView.vue'),
-            beforeEnter: [RedirectIfAuthenticated]
-        }
-    ]
+            component: () => import("@/views/LoginView.vue"),
+            beforeEnter: [RedirectIfAuthenticated],
+        },
+    ],
 });
 
 export default router;
diff --git a/src/services/comments.service.js b/src/services/comments.service.js
new file mode 100644
index 0000000..32fe258
--- /dev/null
+++ b/src/services/comments.service.js
@@ -0,0 +1,29 @@
+import CrudService from "./crud.service";
+
+class CommentsService extends CrudService {
+    /**
+     * Service url
+     *
+     * @returns {String}
+     */
+    static get URL() {
+        return "comments";
+    }
+
+    /**
+     * Get default item
+     *
+     * @returns {Object}
+     */
+    static getDefault() {
+        return {
+            postId: undefined,
+            id: undefined,
+            name: undefined,
+            body: undefined,
+            email: undefined,
+        };
+    }
+}
+
+export default CommentsService;
diff --git a/src/services/posts.services.js b/src/services/posts.services.js
new file mode 100644
index 0000000..55a879d
--- /dev/null
+++ b/src/services/posts.services.js
@@ -0,0 +1,28 @@
+import CrudService from "./crud.service";
+
+class PostsServices extends CrudService {
+    /**
+     * Service url
+     *
+     * @returns {String}
+     */
+    static get URL() {
+        return "posts";
+    }
+
+    /**
+     * Get default item
+     *
+     * @returns {Object}
+     */
+    static getDefault() {
+        return {
+            userId: undefined,
+            id: undefined,
+            title: undefined,
+            body: undefined,
+        };
+    }
+}
+
+export default PostsServices;
diff --git a/src/services/storage.service.js b/src/services/storage.service.js
index a784bf7..1bc4dce 100644
--- a/src/services/storage.service.js
+++ b/src/services/storage.service.js
@@ -41,6 +41,14 @@ class StorageService {
     static has(name) {
         return Boolean(this.get(name));
     }
+
+    static observe(eventKey , callback){
+        window.addEventListener('storage',(event)=>{
+            if(event.key === eventKey && event.newValue !==null) {
+                callback(JSON.parse(event.newValue))
+            }
+        })
+    }
 }
 
 export default StorageService;
diff --git a/src/views/CommentsView.vue b/src/views/CommentsView.vue
new file mode 100644
index 0000000..3429def
--- /dev/null
+++ b/src/views/CommentsView.vue
@@ -0,0 +1,251 @@
+<template>
+    <div class="h3 mb-4">{{ $t("Comments") }}</div>
+    <div class="d-flex align-items-center mb-4">
+        <CommentsFilterForm class="flex-grow-1" v-model="filters" />
+        <div class="d-flex gap-2">
+            <button class="btn btn-success" :disabled="!hasSelectedRows" @click="handleStatusChangeAll('CONFIRMED')">
+                {{ `${$t("ConfirmAll")} ${hasSelectedRows ? selectedRowsAmount : ""}` }}
+            </button>
+            <button class="btn btn-danger" :disabled="!hasSelectedRows" @click="handleStatusChangeAll('REJECTED')">
+                {{ $t("RejectAll") }}
+            </button>
+        </div>
+    </div>
+    <VTableServer :items="comments" :itemsLength="comments.length" :is-loading="commentsIsLoading">
+        <VColumn :header="'Select'" field="id">
+            <template #body="{ item }">
+                <input
+                    type="checkbox"
+                    class="form-check-input"
+                    :checked="selectedRows.includes(item.id)"
+                    v-model="selectedRows"
+                    :value="item.id"
+                    :id="item.id"
+                />
+            </template>
+        </VColumn>
+        <VColumn :header="$t('Id')" field="id">
+            <template #body="{ item }">
+                <span v-html="highlightText(item.id)" />
+            </template>
+        </VColumn>
+        <VColumn :header="$t('Name')" field="name">
+            <template #body="{ item }">
+                <span v-html="highlightText(item.name)" />
+            </template>
+        </VColumn>
+        <VColumn :header="$t('Email')" field="email" />
+        <VColumn :header="$t('Post')" field="postId">
+            <template #body="{ item }">
+                <button class="btn btn-sm btn-outline-info" title="View Related Post" @click="handleFetchPost(item.postId)">
+                    <i class="bi-eye" />
+                </button>
+            </template>
+        </VColumn>
+        <VColumn :header="$t('Text')" field="body">
+            <template #body="{ item }">
+                <span v-html="highlightText(item.body)" />
+            </template>
+        </VColumn>
+        <VColumn :header="$t('Status')" field="id">
+            <template #body="{ item }">
+                <span v-if="item.status === 'PENDING'">
+                    {{ $t("Pending") }}
+                </span>
+                <span v-if="item.status === 'CONFIRMED'">
+                    {{ $t("Confirmed") }}
+                </span>
+                <span v-if="item.status === 'REJECTED'">
+                    {{ $t("Rejected") }}
+                </span>
+            </template>
+        </VColumn>
+        <VColumn :header="$t('Actions')" field="id">
+            <template #body="{ item }">
+                <div class="d-flex gap-2 justify-content-center ">
+                    <button class="btn btn-danger btn-sm" v-if="item.status !== 'REJECTED'" @click="handleRejectComment(item)">
+                        <i class="bi-ban" />
+                    </button>
+                    <button
+                        class="btn btn-success btn-sm z-3"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        @click="handleConfirmComment(item.id)"
+                        data-bs-title="Tooltip on top"
+                    >
+                        <i class="bi-check-circle" />
+                    </button>
+                </div>
+            </template>
+        </VColumn>
+    </VTableServer>
+    <VModal v-model="postModalIsOpen">
+        <div v-if="postIsLoading">Loading...</div>
+        <h1 v-if="!postIsLoading && post !== null">
+            {{ post.title }}
+        </h1>
+    </VModal>
+    <VModal v-model="rejectComment.modalIsOpen" ref="modal">
+        <template v-slot:header>
+            <h1 class="h6">Are you sure?</h1>
+        </template>
+        <div>
+            <h3 class="text-danger">Attention</h3>
+            <p>Changed Data can not be restored</p>
+            <div>Post with id ({{ rejectComment?.comment?.id }}) will be rejected!!</div>
+        </div>
+        <template v-slot:footer>
+            <button class="btn btn-danger" @click="handleConfirmRejection($refs.modal.hide)">Yes</button>
+            <button class="btn btn-secondary" @click="$refs.modal.hide()">Cancel</button>
+        </template>
+    </VModal>
+</template>
+
+<script>
+import CommentsFilterForm from "@/components/comments/CommentsFilterForm.vue";
+import VColumn from "@/components/data-table/VColumn.vue";
+import VTableServer from "@/components/data-table/VTableServer.vue";
+import VModal from "@/components/VModal.vue";
+import { useFetchComments } from "@/composables/comments.composable";
+import { useApplyFilters } from "@/composables/filter.composable";
+import useFetchPost from "@/composables/posts.composable";
+import { useCustomToast } from "@/composables/customToast.composable";
+import ThemeColor from "@/enums/ThemeColor";
+import StorageService from "@/services/storage.service";
+import { computed, reactive, ref, watch } from "vue";
+
+export default {
+    name: "CommentsView",
+    setup() {
+        const { showToast } = useCustomToast();
+        const { comments, commentsIsLoading, fetchComments, changeStatus: changeCommentStatus } = useFetchComments();
+        fetchComments({});
+
+        const { post, postIsLoading, fetchPost } = useFetchPost();
+        const postModalIsOpen = ref(false);
+
+        const rejectComment = reactive({
+            comment: null,
+            modalIsOpen: false,
+        });
+
+        const handleRejectComment = (rejectedComment) => {
+            rejectComment.comment = rejectedComment;
+            rejectComment.modalIsOpen = true;
+        };
+        const handleConfirmComment = (id) => {
+            changeCommentStatus(id, "CONFIRMED");
+        };
+
+        const handleFetchPost = async (id) => {
+            try {
+                postModalIsOpen.value = true;
+                fetchPost(id)
+                    .then((res) => console.log("res", res))
+                    .catch((err) => console.log("err", err));
+            } catch {
+                postModalIsOpen.value = false;
+            }
+        };
+
+        const syncedFilters = StorageService.get("synced-filters");
+
+        const filters = useApplyFilters({
+            searchQuery: syncedFilters?.searchQuery || undefined,
+            status: syncedFilters?.status || undefined,
+            email: syncedFilters?.email || undefined,
+        });
+
+        watch(
+            filters,
+            (newFilters) => {
+                StorageService.set("synced-filters", { ...filters, ...newFilters });
+            },
+            { immediate: true }
+        );
+
+        StorageService.observe("synced-filters", (newValue) => {
+            filters.searchQuery = newValue?.searchQuery || undefined;
+            filters.email = newValue?.email || undefined;
+            filters.status = newValue?.status || undefined;
+        });
+
+        const filteredComments = computed(() => {
+            const enteredEmail = filters?.email && filters.email.trim().toLowerCase();
+            const query =
+                filters?.searchQuery && isNaN(Number(filters.searchQuery)) ? filters.searchQuery.trim().toLowerCase() : filters.searchQuery;
+            const status = filters?.status && filters.status.trim();
+
+            const matchesEmail = (email) => enteredEmail && email.trim().toLowerCase().includes(enteredEmail);
+            const matchesQuery = (id, body, name) =>
+                id === Number(query) || body.trim().toLowerCase().includes(query) || name.trim().toLowerCase().includes(query);
+
+            return comments.value?.filter((comment) => {
+                if (!query && !enteredEmail && !status) return true;
+                return matchesEmail(comment.email) || matchesQuery(comment.id, comment.body, comment.name) || status === comment.status;
+            });
+        });
+
+        const highlightText = (text) => {
+            const query = filters?.searchQuery && isNaN(Number(filters.searchQuery)) ? filters.searchQuery.trim().toLowerCase() : undefined;
+
+            if (!query) return text;
+            const regex = new RegExp(`(${query})`, "gi");
+            return String(text).replace(regex, "<mark>$1</mark>");
+        };
+
+        const handleConfirmRejection = () => {
+            const previousCommentState = {...rejectComment.comment};
+            console.log(previousCommentState);
+
+            changeCommentStatus(rejectComment.comment.id,'REJECTED')
+
+            showToast({
+            theme: ThemeColor.WARNING,
+            duration: 3000,
+            callback:()=>{
+                console.log('hi');
+                changeCommentStatus(previousCommentState.id, previousCommentState.status)
+            }
+            });
+            rejectComment.modalIsOpen = false;
+            rejectComment.comment = null;
+        };
+
+        const selectedRows = ref([]);
+        const selectedRowsAmount = computed(()=> selectedRows.value.length)
+        const hasSelectedRows = computed(()=>selectedRows.value.length > 0)
+
+        const handleStatusChangeAll = (status) => {
+            selectedRows.value.forEach((commentId) => {
+                changeCommentStatus(commentId, status);
+                selectedRows.value = [];
+            });
+        };
+        return {
+            comments: filteredComments,
+            commentsIsLoading,
+            filters,
+            highlightText,
+            post,
+            postIsLoading,
+            handleFetchPost,
+            postModalIsOpen,
+            handleRejectComment,
+            handleConfirmRejection,
+            rejectComment,
+            handleConfirmComment,
+            selectedRows,
+            selectedRowsAmount,
+            hasSelectedRows,
+            handleStatusChangeAll,
+        };
+    },
+    components: {
+        VTableServer,
+        VColumn,
+        CommentsFilterForm,
+        VModal,
+    },
+};
+</script>