diff --git a/src/components/alarm/AlarmDrawer.vue b/src/components/alarm/AlarmDrawer.vue
index 48b65e7..7363e00 100644
--- a/src/components/alarm/AlarmDrawer.vue
+++ b/src/components/alarm/AlarmDrawer.vue
@@ -16,7 +16,7 @@ const toggleErrIcon = () => {
       <!-- Page content here -->
       <label
         for="alarm"
-        class="drawer-button flex flex-col justify-center items-center btn-group"
+        class="drawer-button flex flex-col justify-center items-center bg-transparent w-[95px]"
         @click="toggleErrIcon"
       >
         <font-awesome-icon
@@ -31,7 +31,7 @@ const toggleErrIcon = () => {
           size="2x"
           class="text-white w-10 m-auto"
         />
-        <span class="text-white"> {{ $t("alarm.title") }}</span>
+        <span class="text-white block mt-0"> {{ $t("alarm.title") }}</span>
       </label>
     </div>
     <div
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index c3c877a..0f7b4ca 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -67,7 +67,7 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
       <NavbarItem />
     </div>
     <div class="navbar-end mr-4">
-      <ul class="menu-box">
+      <ul class="left-menu">
         <li>
           <NavbarLang />
         </li>
@@ -112,39 +112,17 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
 .sub-drawer {
   @apply bg-dark bg-opacity-90 shadow-xl !important;
 }
-/**menu**/
-.menu-box {
-  @apply flex flex-wrap justify-center ;
-  position: relative;
-  z-index: 0;
+
+.left-menu {
+  @apply flex flex-wrap justify-center relative z-0;
 }
 
-.menu-box .btn-group {
-  background: transparent;
-  width: 95px;
+.left-menu > li {
+  @apply relative;
 }
 
-.menu-box > li {
-  position: relative;
-}
-
-.menu-box > li:not(:last-child)::after {
+.left-menu > li:not(:last-child)::after {
+  @apply absolute top-5 bottom-0 left-20 right-0 block w-6 h-0.5 bg-[#93c0dc] z-0;
   content: "";
-  position: absolute;
-  top: 20px;
-  bottom: 0;
-  left: 84px;
-  right: 0px;
-  display: block;
-  width: 25px;
-  height: 2px;
-  background-color: #93c0dc;
-  z-index: 0;
-}
-
-.menu-box .btn-group span {
-  color: #fff;
-  display: block;
-  margin-top: 0px;
 }
 </style>
diff --git a/src/components/navbar/NavbarBuilding.vue b/src/components/navbar/NavbarBuilding.vue
index 3152b1b..c34cc52 100644
--- a/src/components/navbar/NavbarBuilding.vue
+++ b/src/components/navbar/NavbarBuilding.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="dropdown dropdown-bottom">
+  <div class="dropdown dropdown-bottom ">
     <div
       tabindex="0"
       role="button"
diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue
index db47cef..a3bcee0 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -76,14 +76,14 @@ onMounted(() => {
     <li class="flex flex-col items-center justify-center">
       <router-link
         :to="{ name: 'dashboard' }"
-        class="flex flex-col justify-center items-center btn-group text-white"
+        class="flex lg:flex-col justify-center items-center btn-group text-white"
       >
         <font-awesome-icon
           :icon="['fas', 'home']"
           size="2x"
           class="w-10 m-auto"
         />
-        {{ $t("home") }}
+        <span>{{ $t("home") }}</span>
       </router-link>
     </li>
     <li
@@ -95,7 +95,7 @@ onMounted(() => {
         @click="showDrawer"
         :class="
           twMerge(
-            'flex flex-col justify-center items-center btn-group text-white cursor-pointer',
+            'flex lg:flex-col justify-center items-center btn-group text-white cursor-pointer',
             route.fullPath.includes('/system')
               ? 'router-link-active router-link-exact-active'
               : ''
@@ -107,20 +107,20 @@ onMounted(() => {
           size="2x"
           class="w-10 m-auto"
         />
-        {{ page.subName }}
+        <span>{{ page.subName }}</span>
       </a>
       <router-link
         v-else
         :to="page.navigate"
         type="link"
-        class="flex flex-col justify-center items-center btn-group text-white"
+        class="flex lg:flex-col justify-center items-center btn-group text-white"
       >
         <font-awesome-icon
           :icon="['fas', page.icon]"
           size="2x"
           class="w-10 m-auto"
         />
-        {{ page.subName }}
+        <span>{{ page.subName }}</span>
       </router-link>
     </li>
   </ul>
@@ -169,8 +169,30 @@ onMounted(() => {
   </a-drawer>
 </template>
 <style lang="scss" scoped>
+/**menu**/
+.menu-box {
+  @apply flex flex-wrap lg:flex-row flex-col items-start lg:justify-center relative z-0 h-[100vh] lg:h-full w-60 lg:w-auto;
+}
+
+.menu-box .btn-group {
+  @apply bg-transparent lg:w-[95px] w-full mb-5 lg:mb-0;
+}
+
+.menu-box .btn-group span{
+  @apply  text-2xl ms-2 lg:ms-0 lg:text-sm;
+}
+
+.menu-box > li {
+  @apply relative;
+}
+
+.menu-box > li:not(:last-child)::after {
+  @apply absolute top-5 bottom-0 left-20 right-0 lg:block hidden w-6 h-0.5 bg-[#93c0dc] z-0;
+  content: "";
+}
+
 .router-link-active.router-link-exact-active {
-  color: #93c0dc;
+  @apply text-[#93c0dc];
 }
 
 :deep(.ant-menu-submenu-selected) {
diff --git a/src/components/navbar/NavbarLang.vue b/src/components/navbar/NavbarLang.vue
index 7595e8b..7215b55 100644
--- a/src/components/navbar/NavbarLang.vue
+++ b/src/components/navbar/NavbarLang.vue
@@ -15,14 +15,14 @@ const toggleLanguage = (lang) => {
     <button
       tabindex="0"
       type="button"
-      class="flex flex-col justify-center items-center btn-group"
+      class="flex flex-col justify-center items-center bg-transparent w-[95px]"
     >
       <font-awesome-icon
         :icon="['fas', 'globe']"
         size="2x"
         class="text-white w-10 m-auto"
       />
-      <span class="text-white">{{ $t("language") }}</span>
+      <span class="text-white block mt-0">{{ $t("language") }}</span>
     </button>
     <ul
       tabindex="0"