diff --git a/app/src/renderer/src/App.vue b/app/src/renderer/src/App.vue
index ddc9ad7..a88b46b 100644
--- a/app/src/renderer/src/App.vue
+++ b/app/src/renderer/src/App.vue
@@ -12,6 +12,31 @@ import Messages from './views/Messages.vue';
 
 const store = useMqttStore();
 
+const themeOverrides = {
+  common: {
+    primaryColor: '#0ea5a0',
+    primaryColorHover: '#0b8c87',
+    primaryColorPressed: '#0b8c87',
+    primaryColorSuppl: '#0ea5a0',
+    successColor: '#22c55e',
+    successColorHover: '#16a34a',
+    successColorPressed: '#15803d',
+    successColorSuppl: '#22c55e',
+    warningColor: '#f59e0b',
+    warningColorHover: '#d97706',
+    warningColorPressed: '#b45309',
+    warningColorSuppl: '#f59e0b',
+    errorColor: '#ef4444',
+    errorColorHover: '#dc2626',
+    errorColorPressed: '#b91c1c',
+    errorColorSuppl: '#ef4444',
+    infoColor: '#3b82f6',
+    infoColorHover: '#2563eb',
+    infoColorPressed: '#1d4ed8',
+    infoColorSuppl: '#3b82f6',
+  },
+};
+
 const activeTab = ref('dashboard');
 const showServerModal = ref(false);
 const editServerData = ref(null);
@@ -44,6 +69,7 @@ function handleSwitchTab(tab) {
     :locale="zhCN"
     :date-locale="dateZhCN"
     :theme="null"
+    :theme-overrides="themeOverrides"
   >
     <n-message-provider placement="bottom">
       <n-dialog-provider>
diff --git a/app/src/renderer/src/components/Sidebar.vue b/app/src/renderer/src/components/Sidebar.vue
index 1616160..615f0cc 100644
--- a/app/src/renderer/src/components/Sidebar.vue
+++ b/app/src/renderer/src/components/Sidebar.vue
@@ -157,7 +157,7 @@ function handleDelete(server) {
 .sidebar-logo {
   width: 32px;
   height: 32px;
-  background: #18a058;
+  background: #0ea5a0;
   border-radius: 6px;
   display: flex;
   align-items: center;
@@ -201,7 +201,7 @@ function handleDelete(server) {
 
 .server-item.active {
   background: var(--n-color-pressed);
-  border-color: #18a058;
+  border-color: #0ea5a0;
 }
 
 .server-item-top {
@@ -265,11 +265,11 @@ function handleDelete(server) {
 }
 
 .status-dot.connected {
-  background: #18a058;
+  background: #22c55e;
 }
 
 .status-dot.connecting {
-  background: #f0a020;
+  background: #f59e0b;
   animation: pulse 1s infinite;
 }
 
@@ -278,7 +278,7 @@ function handleDelete(server) {
 }
 
 .status-dot.error {
-  background: #d03050;
+  background: #ef4444;
 }
 
 @keyframes pulse {
diff --git a/app/src/renderer/src/views/Dashboard.vue b/app/src/renderer/src/views/Dashboard.vue
index f7faa80..0357f32 100644
--- a/app/src/renderer/src/views/Dashboard.vue
+++ b/app/src/renderer/src/views/Dashboard.vue
@@ -207,11 +207,11 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
 }
 
 .status-dot.connected {
-  background: #18a058;
+  background: #22c55e;
 }
 
 .status-dot.connecting {
-  background: #f0a020;
+  background: #f59e0b;
   animation: pulse 1s infinite;
 }
 
@@ -220,7 +220,7 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
 }
 
 .status-dot.error {
-  background: #d03050;
+  background: #ef4444;
 }
 
 @keyframes pulse {
diff --git a/app/src/renderer/src/views/Messages.vue b/app/src/renderer/src/views/Messages.vue
index eb1bac4..6bdcfda 100644
--- a/app/src/renderer/src/views/Messages.vue
+++ b/app/src/renderer/src/views/Messages.vue
@@ -194,10 +194,10 @@ function formatPayload(payload) {
   width: 28px;
 }
 .msg-dir.pub {
-  color: #2080f0;
+  color: #3b82f6;
 }
 .msg-dir.sub {
-  color: #18a058;
+  color: #22c55e;
 }
 .msg-topic {
   color: #d25a00;
diff --git a/app/src/renderer/src/views/Publish.vue b/app/src/renderer/src/views/Publish.vue
index dbaaa7b..1cc0e90 100644
--- a/app/src/renderer/src/views/Publish.vue
+++ b/app/src/renderer/src/views/Publish.vue
@@ -409,7 +409,7 @@ async function copyTopic(topic) {
 }
 
 .msg-dir.pub {
-  color: #2080f0;
+  color: #3b82f6;
 }
 
 .msg-topic {