diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index c5cb75e..41fb494 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -8,158 +8,11 @@
 
         <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
             <ul class="navbar-nav flex-row align-items-center ms-auto">
-                <!-- Language -->
-                <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
-                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <i class="bx bx-globe bx-md"></i>
-                    </a>
-                    <ul class="dropdown-menu dropdown-menu-end">
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
-                                <span>English</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
-                                <span>French</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
-                                <span>Arabic</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
-                                <span>German</span>
-                            </a>
-                        </li>
-                    </ul>
-                </li>
-                <!-- /Language -->
 
-                <!-- Style Switcher -->
-                <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
-                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <i class="bx bx-md"></i>
-                    </a>
-                    <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
-                                <span><i class="bx bx-sun bx-md me-3"></i>Light</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
-                                <span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
-                                <span><i class="bx bx-desktop bx-md me-3"></i>System</span>
-                            </a>
-                        </li>
-                    </ul>
-                </li>
-                <!-- / Style Switcher-->
+                <button class="btn p-1" @click="switchToLightMode"><i class='bx bxs-sun link-warning'></i></button>
+                <button class="btn p-1" @click="switchToDarkMode"><i class='bx bxs-moon' ></i></button>
 
-                <!-- Quick links  -->
-                <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
-                    <a
-                        class="nav-link dropdown-toggle hide-arrow"
-                        href="javascript:void(0);"
-                        data-bs-toggle="dropdown"
-                        data-bs-auto-close="outside"
-                        aria-expanded="false"
-                    >
-                        <i class="bx bx-grid-alt bx-md"></i>
-                    </a>
-                    <div class="dropdown-menu dropdown-menu-end p-0">
-                        <div class="dropdown-menu-header border-bottom">
-                            <div class="dropdown-header d-flex align-items-center py-3">
-                                <h6 class="mb-0 me-auto">Shortcuts</h6>
-                                <a
-                                    href="javascript:void(0)"
-                                    class="dropdown-shortcuts-add py-2"
-                                    data-bs-toggle="tooltip"
-                                    data-bs-placement="top"
-                                    title="Add shortcuts"
-                                    ><i class="bx bx-plus-circle text-heading"></i
-                                ></a>
-                            </div>
-                        </div>
-                        <div class="dropdown-shortcuts-list scrollable-container">
-                            <div class="row row-bordered overflow-visible g-0">
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-calendar bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="app-calendar.html" class="stretched-link">Calendar</a>
-                                    <small>Appointments</small>
-                                </div>
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-food-menu bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
-                                    <small>Manage Accounts</small>
-                                </div>
-                            </div>
-                            <div class="row row-bordered overflow-visible g-0">
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-user bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="app-user-list.html" class="stretched-link">User App</a>
-                                    <small>Manage Users</small>
-                                </div>
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-check-shield bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="app-access-roles.html" class="stretched-link">Role Management</a>
-                                    <small>Permission</small>
-                                </div>
-                            </div>
-                            <div class="row row-bordered overflow-visible g-0">
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="index.html" class="stretched-link">Dashboard</a>
-                                    <small>User Dashboard</small>
-                                </div>
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-cog bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
-                                    <small>Account Settings</small>
-                                </div>
-                            </div>
-                            <div class="row row-bordered overflow-visible g-0">
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-help-circle bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="pages-faq.html" class="stretched-link">FAQs</a>
-                                    <small>FAQs & Articles</small>
-                                </div>
-                                <div class="dropdown-shortcuts-item col">
-                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                                        <i class="bx bx-window-open bx-26px text-heading"></i>
-                                    </span>
-                                    <a href="modal-examples.html" class="stretched-link">Modals</a>
-                                    <small>Useful Popups</small>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </li>
-                <!-- Quick links -->
-
-                <button @click="switchToDarkMode">다크 모드</button>
-                <button @click="switchToLightMode">라이트 모드</button>
+                <i class="bx bx-bell bx-md bx-log-out cursor-pointer" @click="handleLogout"></i>
 
                 <!-- Notification -->
                 <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
@@ -490,9 +343,14 @@
     </nav>
 </template>
 <script setup>
+import { useAuthStore } from '@s/useAuthStore';
+import { useRouter } from 'vue-router';
 import { useThemeStore } from '@s/darkmode';
 import { onMounted } from 'vue';
 
+const authStore = useAuthStore();
+const router = useRouter();
+
 const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
 
 onMounted(() => {
@@ -502,5 +360,10 @@ onMounted(() => {
         switchToLightMode();
     }
 });
+
+const handleLogout = async () => {
+    await authStore.logout();
+    router.push('/login');
+};
 </script>
 <style></style>