diff --git a/src/components/Footer/BotLogo.vue b/src/components/Footer/BotLogo.vue
index 4d606a6d8..f343b92d9 100644
--- a/src/components/Footer/BotLogo.vue
+++ b/src/components/Footer/BotLogo.vue
@@ -1,7 +1,7 @@
 <template>
   <v-avatar
     rounded="rounded"
-    :class="{ active: active }"
+    :class="{ active: active, filter: enable_filter(bot) }"
     :image="bot.getLogo()"
     :alt="bot.getFullname()"
     :title="bot.getFullname()"
@@ -9,7 +9,26 @@
 </template>
 
 <script setup>
+import { useStore } from "vuex";
+import { Theme } from "@/theme";
+
+const store = useStore();
+
 defineProps(["bot", "active"]);
+
+function enable_filter(bot) {
+  const dark_icon_classname = [
+    "OpenAIAPI35Bot",
+    "OpenAIAPI3516KBot",
+    "OpenAIAPI4Bot",
+    "SkyWorkBot",
+    "AzureOpenAIAPIBot",
+    "DevBot",
+  ];
+  const is_dark = store.state.theme == Theme.DARK;
+  const is_dark_bot = dark_icon_classname.includes(bot.getClassname());
+  return is_dark && is_dark_bot;
+}
 </script>
 
 <style>
@@ -23,4 +42,8 @@ defineProps(["bot", "active"]);
   opacity: 1;
   filter: grayscale(0%);
 }
+
+.filter{
+  filter: invert(100%);
+}
 </style>