diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx
index 994a2ca..db7cfa4 100644
--- a/src/components/ChatMessage.tsx
+++ b/src/components/ChatMessage.tsx
@@ -28,7 +28,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
       {!isUserMessage && (
         <div
           className={cn(
-            'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300',
+            'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
             isLoading && 'animate-[pulse_1.5s_ease-in-out_infinite] opacity-80',
           )}
         >
@@ -45,10 +45,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
       >
         <div
           className={cn(
-            'rounded-2xl px-4 py-2 text-sm w-full',
-            isUserMessage
-              ? 'bg-indigo-600 text-white dark:bg-indigo-500'
-              : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
+            'rounded-2xl px-4 py-2 text-sm w-full bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
           )}
         >
           <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
@@ -91,7 +88,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
       </div>
 
       {isUserMessage && (
-        <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300">
+        <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100">
           <User className="h-5 w-5" />
         </div>
       )}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a773066..7084ee6 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -66,7 +66,7 @@ const Header: React.FC = () => {
           <img
             src={isDark ? '/pomerium-icon.svg' : '/pomerium-icon.png'}
             alt="Pomerium Logo"
-            className="w-8 hover:-translate-y-0.5 transition-all"
+            className="w-8 transition-all"
           />
         </a>
         <Link to="/">
diff --git a/src/components/ModelSelect.tsx b/src/components/ModelSelect.tsx
index ea46b45..83c979e 100644
--- a/src/components/ModelSelect.tsx
+++ b/src/components/ModelSelect.tsx
@@ -20,13 +20,18 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
   const { data: models, isLoading } = useModels()
 
   if (isLoading) {
-    return <div>Loading models...</div>
+    return (
+      <div className="text-sm text-primary-foreground">Loading models...</div>
+    )
   }
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="w-fit max-w-[100px] md:max-w-[240px] justify-between">
+        <Button
+          variant="outline"
+          className="w-fit max-w-[100px] md:max-w-[240px] justify-between"
+        >
           <span className="truncate block max-w-[160px] overflow-hidden whitespace-nowrap">
             {value || 'Select a model'}
           </span>
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index c7957a4..86c113e 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -51,7 +51,7 @@ export function ThemeToggle() {
       {isDarkMode ? (
         <Sun className="size-5 text-amber-400" />
       ) : (
-        <Moon className="size-5 text-blue-500" />
+        <Moon className="size-5 text-primary" />
       )}
     </Button>
   )