diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index 82d02192..bbb6b7e9 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -314,9 +314,12 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         </CompactButton>
       </div>
       
-      <div className="highlight-quote-icon">
-        <FontAwesomeIcon icon={faQuoteLeft} />
-      </div>
+      <CompactButton
+        className="highlight-quote-button"
+        icon={faQuoteLeft}
+        title="Quote"
+        onClick={(e) => e.stopPropagation()}
+      />
       
       {/* relay indicator lives in footer for consistent padding/alignment */}
       
diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css
index 94790909..54c82ef3 100644
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -130,7 +130,10 @@
 .highlight-item.level-nostrverse .highlight-header,
 .highlight-item.level-nostrverse .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); }
 
-.highlight-quote-icon { position: absolute; top: 0.5rem; left: 1rem; color: #646cff; font-size: 0.85rem; opacity: 0.7; z-index: 10; }
+.highlight-quote-button { position: absolute; top: 0.5rem; left: 1rem; z-index: 10; }
+.highlight-item.level-mine .highlight-quote-button { color: var(--highlight-color-mine, #ffff00); }
+.highlight-item.level-friends .highlight-quote-button { color: var(--highlight-color-friends, #f97316); }
+.highlight-item.level-nostrverse .highlight-quote-button { color: var(--highlight-color-nostrverse, #9333ea); }
 .highlight-relay-indicator { flex-shrink: 0; }
 .highlight-relay-indicator:hover { opacity: 1; }