diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue
index 82b01d4..db47cef 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -175,7 +175,7 @@ onMounted(() => {
 
 :deep(.ant-menu-submenu-selected) {
   .ant-menu-submenu-title {
-    @apply text-blue-300 ;
+    @apply text-info;
   }
 }
 
@@ -183,7 +183,7 @@ onMounted(() => {
   @apply bg-transparent relative;
 
   &::before {
-    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10;
+    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat saturate-200 z-10;
     content: "";
     background: url(@ASSET/img/chart-data-background03.svg) center center;
   }
@@ -193,7 +193,7 @@ onMounted(() => {
   }
 
   a {
-    color: #89d2ff !important;
+    color: #35ecec !important;
     text-shadow: 0px 0px 1px #fff;
   }
 }
diff --git a/src/views/dashboard/components/DashboardSysCard.vue b/src/views/dashboard/components/DashboardSysCard.vue
index daeaded..72bcebf 100644
--- a/src/views/dashboard/components/DashboardSysCard.vue
+++ b/src/views/dashboard/components/DashboardSysCard.vue
@@ -140,7 +140,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
         twMerge(
           'w-full sm:w-1/2 lg:w-1/4 relative my-2 ',
           item.sub_system_tag
-            ? 'saturate-200 cursor-pointer text-base'
+            ? 'saturate-200 cursor-pointer text-base text-info'
             : 'grayscale opacity-70 cursor-not-allowed text-sm'
         )
       "
@@ -160,7 +160,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
           ></FontAwesomeIcon>
         </div>
         <div class="icon-text">
-          <div class="text-slate-300">
+          <div class="">
             {{ item.title }}
           </div>
         </div>
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index f23d913..5ba65fc 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -155,9 +155,7 @@ const isMobile = (e) => {
 const getCurrentInfoModalData = (e, position, value) => {
   const mobile = isMobile(e);
   selectedDevice.value = {
-    initPos: mobile
-      ? { left: `50%`, top: `50%` }
-      : { left: `${position.left}px`, top: `${position.top}px` },
+    initPos: { left: `50%`, top: `50%` },
     value,
     isMobile: mobile,
   };;
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index 89a18b4..d395b92 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -24,8 +24,8 @@ const fitToView = (forge_dbid) => {
         <p class="title">{{ d.full_name }}</p>
         <div class="grid grid-cols-3 gap-5">
           <div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
-            <div class="item h-36" @click="() => fitToView(device.forge_dbid)">
-              <div class="left w-4/5 h-full flex flex-wrap justify-center">
+            <div class="item" @click="() => fitToView(device.forge_dbid)">
+              <div class="left h-full flex flex-wrap justify-center">
                 <div class="sec02 w-full">
                   <img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
                   <span class="w-8 h-8" v-else></span>
diff --git a/src/views/system/components/SystemInfoModal.vue b/src/views/system/components/SystemInfoModal.vue
index 125a217..7b9b845 100644
--- a/src/views/system/components/SystemInfoModal.vue
+++ b/src/views/system/components/SystemInfoModal.vue
@@ -33,7 +33,7 @@ watch(
 
 <template>
   <Modal id="system_info_modal" :onCancel="onCancel" width="600" :draggable="!data?.isMobile" :backdrop="false"
-    :modalStyle="position" :class="data?.isMobile ? '-translate-x-1/2 -translate-y-1/2' : ''">
+    :modalStyle="position" class="-translate-x-1/2 -translate-y-1/2">
     <template #modalContent>
       <SystemInfoModalContent />
     </template>