diff --git a/ui/src/App.css b/ui/src/App.css
index 62c02e9..7061160 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -266,6 +266,17 @@ input, textarea {
   cursor: not-allowed;
 }
 
+.reply-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.8em;
+  opacity: 0.6;
+  padding: 2px 4px;
+  margin-top: 4px;
+  color: var(--color-reply-text);
+}
+
 .node-not-connected {
   position: fixed;
   top: 0;
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 58df932..49a33f8 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -979,15 +979,7 @@ function App() {
                                 {/* Reply button */}
                                 <button
                                   onClick={() => setReplyingTo(message)}
-                                  style={{
-                                    background: 'none',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    fontSize: '0.8em',
-                                    opacity: 0.6,
-                                    padding: '2px 4px',
-                                    marginTop: '4px'
-                                  }}
+                                  className="reply-button"
                                   title="Reply to this message"
                                 >
                                   ↩️ Reply
@@ -1068,15 +1060,7 @@ function App() {
                             {!message.file_info && (
                               <button
                                 onClick={() => setReplyingTo(message)}
-                                style={{
-                                  background: 'none',
-                                  border: 'none',
-                                  cursor: 'pointer',
-                                  fontSize: '0.8em',
-                                  opacity: 0.6,
-                                  padding: '2px 4px',
-                                  marginTop: '4px'
-                                }}
+                                className="reply-button"
                                 title="Reply to this message"
                               >
                                 ↩️ Reply
diff --git a/ui/src/index.css b/ui/src/index.css
index 4ae40e9..fb88fac 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -17,6 +17,7 @@
   --color-text-muted: #666;
   --color-text-subtle: #999;
   --color-text-timestamp: #999;
+  --color-reply-text: #666;
   --color-button-primary: #4b9ad8;
   --color-button-primary-hover: #357abd;
   --color-button-disabled: #cccccc;
@@ -98,6 +99,7 @@ button:focus-visible {
     --color-text-muted: #aaa;
     --color-text-subtle: #888;
     --color-text-timestamp: #888;
+    --color-reply-text: #ccc;
     --color-button-primary: #4b9ad8;
     --color-button-primary-hover: #357abd;
     --color-button-disabled: #555;