diff --git a/src/components/message-item.tsx b/src/components/message-item.tsx
index 6782eaea..b34d0ada 100644
--- a/src/components/message-item.tsx
+++ b/src/components/message-item.tsx
@@ -53,13 +53,21 @@ export default function MessageItem(props: MessageItemProps) {
   }
 
   return (
-    <div class={`message-item ${isUser() ? "user" : "assistant"}`}>
-      <div class="message-header">
-        <span class="message-sender">{isUser() ? "You" : "Assistant"}</span>
-        <span class="message-timestamp">{timestamp()}</span>
+    <div 
+      class={`message-item-base ${
+        isUser() 
+          ? "bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]" 
+          : "bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
+      }`}
+    >
+      <div class="flex justify-between items-center gap-3">
+        <span class="font-semibold text-sm text-[var(--text-muted)]">
+          {isUser() ? "You" : "Assistant"}
+        </span>
+        <span class="text-xs text-[var(--text-muted)]">{timestamp()}</span>
         <Show when={isUser() && props.onRevert}>
           <button
-            class="message-revert-button"
+            class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-2 py-0.5 rounded text-base leading-none transition-all duration-200 flex items-center justify-center min-w-7 h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
             onClick={handleRevert}
             title="Revert to this message"
             aria-label="Revert to this message"
@@ -69,7 +77,7 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
       </div>
 
-      <div class="message-content">
+      <div class="pt-1.5 leading-relaxed whitespace-pre-wrap break-words">
         <Show when={props.isQueued && isUser()}>
           <div class="message-queued-badge">QUEUED</div>
         </Show>
diff --git a/src/index.css b/src/index.css
index 89d59173..d51a465e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
 @import './styles/tokens.css';
+@import './styles/components.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -88,25 +89,7 @@ body {
   color: inherit;
 }
 
-.message-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  width: 100%;
-  color: inherit;
-}
 
-.message-item.user {
-  background-color: var(--message-user-bg);
-  border-left: 4px solid var(--message-user-border);
-}
-
-.message-item.assistant {
-  background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
-}
 
 .tool-call-message {
   display: flex;
@@ -144,70 +127,7 @@ body {
   font-size: 13px;
 }
 
-.message-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
 
-.message-sender {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-.message-timestamp {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.message-revert-button {
-  background: none;
-  border: 1px solid var(--border-base);
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 16px;
-  line-height: 1;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 24px;
-}
-
-.message-revert-button:hover {
-  background-color: var(--surface-hover);
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
-}
-
-.message-revert-button:active {
-  transform: scale(0.95);
-}
-
-.message-content {
-  padding-top: 6px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: inherit;
-}
-
-.message-queued-badge {
-  display: inline-block;
-  background-color: var(--accent-primary);
-  color: white;
-  font-weight: bold;
-  padding: 4px 12px;
-  border-radius: 4px;
-  margin-bottom: 12px;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-}
 
 .message-text {
   font-size: 14px;
@@ -224,11 +144,7 @@ body {
   border-radius: 4px;
 }
 
-.message-error {
-  color: var(--status-error);
-  font-size: 13px;
-  margin-top: 4px;
-}
+
 
 .message-error-part {
   color: var(--status-error);
@@ -242,41 +158,7 @@ body {
   background-color: rgba(244, 67, 54, 0.15);
 }
 
-.message-error-block {
-  color: var(--status-error);
-  font-size: 14px;
-  padding: 12px;
-  background-color: rgba(244, 67, 54, 0.1);
-  border-radius: 4px;
-  border-left: 3px solid var(--status-error);
-  margin: 8px 0;
-}
 
-[data-theme="dark"] .message-error-block {
-  background-color: rgba(244, 67, 54, 0.15);
-}
-
-.message-generating {
-  color: var(--text-muted);
-  font-size: 14px;
-  font-style: italic;
-  padding: 8px 0;
-}
-
-.generating-spinner {
-  display: inline-block;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
 
 .message-reasoning {
   margin: 8px 0;
@@ -784,12 +666,7 @@ body {
   color: inherit;
 }
 
-.message-sending {
-  color: var(--text-muted);
-  font-size: 13px;
-  font-style: italic;
-  margin-top: 4px;
-}
+
 
 .prose {
   color: var(--text-primary);
diff --git a/src/styles/components.css b/src/styles/components.css
new file mode 100644
index 00000000..48e2aaae
--- /dev/null
+++ b/src/styles/components.css
@@ -0,0 +1,54 @@
+/* Reusable component utilities using tokens */
+
+/* Message item base styles */
+.message-item-base {
+  @apply flex flex-col gap-2 p-3 rounded-lg w-full;
+}
+
+/* Message state badges */
+.message-queued-badge {
+  @apply inline-block font-bold px-3 py-1 rounded mb-3 text-xs tracking-wide;
+  background-color: var(--accent-primary);
+  color: var(--text-inverted);
+}
+
+/* Message error block */
+.message-error-block {
+  @apply text-sm p-3 rounded border-l-[3px] my-2;
+  color: var(--status-error);
+  background-color: rgba(244, 67, 54, 0.1);
+  border-color: var(--status-error);
+}
+
+[data-theme="dark"] .message-error-block {
+  background-color: rgba(244, 67, 54, 0.15);
+}
+
+/* Message generating indicator */
+.message-generating {
+  @apply text-sm italic py-2;
+  color: var(--text-muted);
+}
+
+/* Message sending indicator */
+.message-sending {
+  @apply text-xs italic mt-1;
+  color: var(--text-muted);
+}
+
+/* Message error indicator */
+.message-error {
+  @apply text-xs mt-1;
+  color: var(--status-error);
+}
+
+/* Generating spinner animation */
+.generating-spinner {
+  @apply inline-block;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
\ No newline at end of file