diff --git a/src/components/Chats.tsx b/src/components/Chats.tsx
index 399a6ae..a028e5e 100644
--- a/src/components/Chats.tsx
+++ b/src/components/Chats.tsx
@@ -8,6 +8,7 @@ import { useChatId } from "../hooks/useChatId";
 import { DeleteChatModal } from "./DeleteChatModal";
 import { EditChatModal } from "./EditChatModal";
 import { MainLink } from "./MainLink";
+import { usePrimaryColor } from "../hooks/usePrimaryColor";
 
 export function Chats({ search }: { search: string }) {
   const chatId = useChatId();
@@ -23,6 +24,8 @@ export function Chats({ search }: { search: string }) {
     [chats, search]
   );
 
+  const [primaryColor] = usePrimaryColor();
+
   return (
     <>
       {filteredChats.map((chat) => (
@@ -42,7 +45,7 @@ export function Chats({ search }: { search: string }) {
           <Link to={`/chats/${chat.id}`} style={{ flex: 1 }}>
             <MainLink
               icon={<IconMessages size="1rem" />}
-              color="primary"
+              color={primaryColor}
               chat={chat}
               label={chat.description}
             />
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 3bfc15b..adabbc7 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -347,7 +347,7 @@ export function SettingsModal({ children }: { children: ReactElement }) {
           <Stack spacing="xs">
             <Text children="Theme color" />
             <Group spacing="xs">
-              {["red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => (
+              {["gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => (
                 <ColorSwatch
                   component="button"
                   color={theme.colors[color][6]}