diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css
index b274fc8f..9f653098 100644
--- a/packages/web/src/app/globals.css
+++ b/packages/web/src/app/globals.css
@@ -104,7 +104,8 @@
     --chat-reference-selected-border: hsl(217, 91%, 60%);
     
     --chat-citation: #3b83f640;
-    --chat-citation-hover: hsl(217, 91%, 70%);
+    --chat-citation-hover: hsl(217, 91%, 75%);
+    --chat-citation-selected: hsl(217, 91%, 65%);
     --chat-citation-border: hsl(217, 91%, 60%);
 
     --warning: #ca8a04;
@@ -195,7 +196,8 @@
     --chat-reference-selected-border: hsl(217, 91%, 60%);
     
     --chat-citation: #1e3b8a87;
-    --chat-citation-hover: hsl(217, 91%, 55%);
+    --chat-citation-hover: hsl(217, 91%, 45%);
+    --chat-citation-selected: hsl(217, 80%, 50%);
     --chat-citation-border: hsl(217, 91%, 60%);
 
     --warning: #fde047;
@@ -274,6 +276,13 @@
   background-color: var(--chat-citation-hover) !important;
 }
 
+/* Separate selected class for inline chat citations */
+.chat-citation--selected {
+  background-color: var(--chat-citation-selected) !important;
+  border-color: var(--chat-citation-border) !important;
+  font-weight: 600;
+}
+
 /* Chat citation styling for inline citations in chat responses */
 .bg-chat-citation {
   background-color: var(--chat-citation);
diff --git a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
index 09197fad..3905072e 100644
--- a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
+++ b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
@@ -235,12 +235,17 @@ export const ChatThreadListItem = forwardRef<HTMLDivElement, ChatThreadListItemP
         });
 
         referenceElements.forEach(element => {
-            element.classList.add('chat-reference--selected');
+            // Check if it's an inline chat citation or code viewer element
+            const isInlineCitation = element.classList.contains('bg-chat-citation');
+            const selectedClass = isInlineCitation ? 'chat-citation--selected' : 'chat-reference--selected';
+            element.classList.add(selectedClass);
         });
 
         return () => {
             referenceElements.forEach(element => {
+                // Remove both possible selected classes
                 element.classList.remove('chat-reference--selected');
+                element.classList.remove('chat-citation--selected');
             });
         };
     }, [selectedReference]);