diff --git a/src/components/common-menu/index.vue b/src/components/common-menu/index.vue
index f3ebe96..6e249fe 100644
--- a/src/components/common-menu/index.vue
+++ b/src/components/common-menu/index.vue
@@ -51,5 +51,38 @@ const activeRoutePath = computed(() => {
 </template>
 
 <style scoped>
+:deep(.el-menu) {
+  border-right: none;
+}
 
+/* Base Item Style */
+:deep(.el-menu-item),
+:deep(.el-sub-menu__title) {
+  transition: all 0.3s;
+}
+
+/* Vertical Menu Active State (Default) */
+:deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
+  background-color: var(--el-color-primary-light-9);
+  border-right: 3px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+/* Dark Mode Active Override */
+.dark :deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
+  background-color: rgba(64, 158, 255, 0.2);
+}
+
+/* Hover Effects */
+:deep(.el-menu-item:hover),
+:deep(.el-sub-menu__title:hover) {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-menu-text-color);
+}
+
+.dark :deep(.el-menu-item:hover),
+.dark :deep(.el-sub-menu__title:hover) {
+  background-color: var(--el-bg-color-overlay);
+}
 </style>