diff --git a/frontend/src/assets/images/1panel-logo-dark.png b/frontend/src/assets/images/1panel-logo-dark.png
new file mode 100644
index 000000000..bf5369b71
Binary files /dev/null and b/frontend/src/assets/images/1panel-logo-dark.png differ
diff --git a/frontend/src/assets/images/1panel-small.png b/frontend/src/assets/images/1panel-logo-light.png
similarity index 100%
rename from frontend/src/assets/images/1panel-small.png
rename to frontend/src/assets/images/1panel-logo-light.png
diff --git a/frontend/src/assets/images/1panel-menu-dark.png b/frontend/src/assets/images/1panel-menu-dark.png
new file mode 100644
index 000000000..759f81d00
Binary files /dev/null and b/frontend/src/assets/images/1panel-menu-dark.png differ
diff --git a/frontend/src/assets/images/1panel-menu.png b/frontend/src/assets/images/1panel-menu-light.png
similarity index 100%
rename from frontend/src/assets/images/1panel-menu.png
rename to frontend/src/assets/images/1panel-menu-light.png
diff --git a/frontend/src/components/app-layout/menu/components/Logo.vue b/frontend/src/components/app-layout/menu/components/Logo.vue
index 0f0dd289a..36932ded8 100644
--- a/frontend/src/components/app-layout/menu/components/Logo.vue
+++ b/frontend/src/components/app-layout/menu/components/Logo.vue
@@ -1,12 +1,24 @@
 <template>
     <div class="logo flx-center">
-        <img v-show="!isCollapse" src="@/assets/images/1panel-menu.png" />
-        <img v-show="isCollapse" src="@/assets/images/1panel-small.png" />
+        <img v-show="!isCollapse" :src="getLogoUrl(isCollapse)" alt="" />
+        <img v-show="isCollapse" :src="getLogoUrl(isCollapse)" alt="" />
     </div>
 </template>
 
 <script setup lang="ts">
+import { GlobalStore } from '@/store';
+
 defineProps<{ isCollapse: boolean }>();
+const globalStore = GlobalStore();
+
+const getLogoUrl = (isCollapse: boolean) => {
+    const theme = globalStore.$state.themeConfig.theme || 'light';
+    if (isCollapse) {
+        return new URL(`../../../../assets/images/1panel-logo-${theme}.png`, import.meta.url).href;
+    } else {
+        return new URL(`../../../../assets/images/1panel-menu-${theme}.png`, import.meta.url).href;
+    }
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e6cd5ff73..910c5d825 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -2,5 +2,4 @@
 @use './element.scss';
 @use './element-dark.scss';
 @use './reset.scss';
-
-
+@use './var.scss';