diff --git a/apps/www/content/3.components/1.chatbot/model-selector.md b/apps/www/content/3.components/1.chatbot/model-selector.md
index 11174c1..d96e20f 100644
--- a/apps/www/content/3.components/1.chatbot/model-selector.md
+++ b/apps/www/content/3.components/1.chatbot/model-selector.md
@@ -206,7 +206,7 @@ const props = defineProps<Props>()
   <img
     v-bind="$attrs"
     :alt="`${props.provider} logo`"
-    :class="cn('size-3', props.class)"
+    :class="cn('size-3 dark:invert', props.class)"
     height="12"
     :src="`https://models.dev/logos/${props.provider}.svg`"
     width="12"
@@ -230,7 +230,7 @@ const props = defineProps<Props>()
   <div
     :class="
       cn(
-        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 [&>img]:ring-border',
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
         props.class,
       )
     "
diff --git a/apps/www/content/3.components/1.chatbot/tool.md b/apps/www/content/3.components/1.chatbot/tool.md
index 0ccfd2a..fba2a0b 100644
--- a/apps/www/content/3.components/1.chatbot/tool.md
+++ b/apps/www/content/3.components/1.chatbot/tool.md
@@ -4,7 +4,7 @@ description: A collapsible component for displaying tool invocation details in A
 icon: lucide:tool-case
 ---
 
-The `Tool` component isplays a collapsible interface for showing/hiding tool details. It is designed to take the `ToolUIPart` type from the AI SDK and display it in a collapsible interface.
+The `Tool` component displays a collapsible interface for showing/hiding tool details. It is designed to take the `ToolUIPart` type from the AI SDK and display it in a collapsible interface.
 
 :::ComponentLoader{label="Preview" componentName="Tool"}
 :::
diff --git a/packages/elements/src/model-selector/ModelSelectorLogo.vue b/packages/elements/src/model-selector/ModelSelectorLogo.vue
index c074f3d..9e8d162 100644
--- a/packages/elements/src/model-selector/ModelSelectorLogo.vue
+++ b/packages/elements/src/model-selector/ModelSelectorLogo.vue
@@ -14,7 +14,7 @@ const props = defineProps<Props>()
   <img
     v-bind="$attrs"
     :alt="`${props.provider} logo`"
-    :class="cn('size-3', props.class)"
+    :class="cn('size-3 dark:invert', props.class)"
     height="12"
     :src="`https://models.dev/logos/${props.provider}.svg`"
     width="12"
diff --git a/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue b/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue
index 3f14262..144ed8e 100644
--- a/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue
+++ b/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue
@@ -13,7 +13,7 @@ const props = defineProps<Props>()
   <div
     :class="
       cn(
-        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 [&>img]:ring-border',
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
         props.class,
       )
     "