diff --git a/frontend/src/components/MessageList.tsx b/frontend/src/components/MessageList.tsx
index d4ad387..650ed0e 100644
--- a/frontend/src/components/MessageList.tsx
+++ b/frontend/src/components/MessageList.tsx
@@ -117,8 +117,8 @@ function HopCountBadge({ paths, onClick, variant }: HopCountBadgeProps) {
 
   const className =
     variant === 'header'
-      ? 'font-normal text-muted-foreground/70 ml-1 text-[11px] cursor-pointer hover:text-primary hover:underline'
-      : 'text-[10px] text-muted-foreground/50 ml-1 cursor-pointer hover:text-primary hover:underline';
+      ? 'font-normal text-muted-foreground ml-1 text-[11px] cursor-pointer hover:text-primary hover:underline'
+      : 'text-[10px] text-muted-foreground ml-1 cursor-pointer hover:text-primary hover:underline';
 
   return (
     <span
@@ -420,7 +420,7 @@ export function MessageList({
                     ) : (
                       displaySender
                     )}
-                    <span className="font-normal text-muted-foreground/70 ml-2 text-[11px]">
+                    <span className="font-normal text-muted-foreground ml-2 text-[11px]">
                       {formatTime(msg.sender_timestamp || msg.received_at)}
                     </span>
                     {!msg.outgoing && msg.paths && msg.paths.length > 0 && (
@@ -446,7 +446,7 @@ export function MessageList({
                   ))}
                   {!showAvatar && (
                     <>
-                      <span className="text-[10px] text-muted-foreground/50 ml-2">
+                      <span className="text-[10px] text-muted-foreground ml-2">
                         {formatTime(msg.sender_timestamp || msg.received_at)}
                       </span>
                       {!msg.outgoing && msg.paths && msg.paths.length > 0 && (
diff --git a/frontend/src/components/PathModal.tsx b/frontend/src/components/PathModal.tsx
index fbce3f9..af79ea4 100644
--- a/frontend/src/components/PathModal.tsx
+++ b/frontend/src/components/PathModal.tsx
@@ -69,7 +69,7 @@ export function PathModal({ open, onClose, paths, senderInfo, contacts, config }
               return (
                 <div key={index}>
                   <span className="text-foreground/70 font-semibold">Path {index + 1}:</span>{' '}
-                  <span className="font-mono text-muted-foreground/70">{rawPath}</span>
+                  <span className="font-mono text-muted-foreground">{rawPath}</span>
                 </div>
               );
             })}
@@ -305,7 +305,7 @@ function HopNode({ hop, hopNumber, prevLocation }: HopNodeProps) {
         </div>
 
         {isUnknown ? (
-          <div className="font-medium text-muted-foreground/70">&lt;UNKNOWN&gt;</div>
+          <div className="font-medium text-muted-foreground">&lt;UNKNOWN&gt;</div>
         ) : isAmbiguous ? (
           <div>
             {hop.matches.map((contact) => {
@@ -366,7 +366,7 @@ function CoordinateLink({ lat, lon, publicKey }: { lat: number; lon: number; pub
 
   return (
     <span
-      className="text-xs text-muted-foreground/70 font-mono cursor-pointer hover:text-primary hover:underline ml-1"
+      className="text-xs text-muted-foreground font-mono cursor-pointer hover:text-primary hover:underline ml-1"
       onClick={handleClick}
       title="View on map"
     >
diff --git a/frontend/src/components/RawPacketList.tsx b/frontend/src/components/RawPacketList.tsx
index 3cf0a62..21e2508 100644
--- a/frontend/src/components/RawPacketList.tsx
+++ b/frontend/src/components/RawPacketList.tsx
@@ -155,7 +155,7 @@ function getRouteTypeColor(routeType: string): string {
     case 'Transport Direct':
       return 'bg-orange-500/20 text-orange-400';
     default:
-      return 'bg-gray-500/20 text-gray-400';
+      return 'bg-muted text-muted-foreground';
   }
 }
 
@@ -238,7 +238,7 @@ export function RawPacketList({ packets }: RawPacketListProps) {
           )}
 
           {/* Raw hex data (always visible) */}
-          <div className="font-mono text-[10px] break-all text-muted-foreground/70 mt-1 p-1 bg-background/50 rounded">
+          <div className="font-mono text-[10px] break-all text-muted-foreground mt-1 p-1 bg-background/50 rounded">
             {packet.data.toUpperCase()}
           </div>
         </div>
diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
index 36f7774..a12798a 100644
--- a/frontend/src/components/StatusBar.tsx
+++ b/frontend/src/components/StatusBar.tsx
@@ -39,12 +39,12 @@ export function StatusBar({
   };
 
   return (
-    <div className="flex items-center gap-4 px-4 py-2 bg-[#252525] border-b border-[#333] text-xs">
+    <div className="flex items-center gap-4 px-4 py-2 bg-card border-b border-border text-xs">
       {/* Mobile menu button - only visible on small screens */}
       {onMenuClick && (
         <button
           onClick={onMenuClick}
-          className="md:hidden p-1 bg-transparent border-none text-[#e0e0e0] cursor-pointer"
+          className="md:hidden p-1 bg-transparent border-none text-foreground cursor-pointer"
           aria-label="Open menu"
         >
           <Menu className="h-5 w-5" />
@@ -53,18 +53,20 @@ export function StatusBar({
 
       <h1 className="text-base font-semibold mr-auto">RemoteTerm</h1>
 
-      <div className="flex items-center gap-1 text-[#888]">
-        <div className={`w-2 h-2 rounded-full ${connected ? 'bg-[#4caf50]' : 'bg-[#666]'}`} />
-        <span className="hidden lg:inline text-[#e0e0e0]">
+      <div className="flex items-center gap-1 text-muted-foreground">
+        <div
+          className={`w-2 h-2 rounded-full ${connected ? 'bg-primary' : 'bg-muted-foreground'}`}
+        />
+        <span className="hidden lg:inline text-foreground">
           {connected ? 'Connected' : 'Disconnected'}
         </span>
       </div>
 
       {config && (
-        <div className="hidden lg:flex items-center gap-2 text-[#888]">
-          <span className="text-[#e0e0e0]">{config.name || 'Unnamed'}</span>
+        <div className="hidden lg:flex items-center gap-2 text-muted-foreground">
+          <span className="text-foreground">{config.name || 'Unnamed'}</span>
           <span
-            className="font-mono text-[#888] cursor-pointer hover:text-[#4a9eff]"
+            className="font-mono text-muted-foreground cursor-pointer hover:text-primary"
             onClick={() => {
               navigator.clipboard.writeText(config.public_key);
               toast.success('Public key copied!');
@@ -80,14 +82,14 @@ export function StatusBar({
         <button
           onClick={handleReconnect}
           disabled={reconnecting}
-          className="px-3 py-1 bg-[#4a3000] border border-[#6b4500] text-[#ffa500] rounded text-xs cursor-pointer hover:bg-[#5a3a00] disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 bg-amber-950 border border-amber-800 text-amber-400 rounded text-xs cursor-pointer hover:bg-amber-900 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {reconnecting ? 'Reconnecting...' : 'Reconnect'}
         </button>
       )}
       <button
         onClick={onSettingsClick}
-        className="px-3 py-1 bg-[#333] border border-[#444] text-[#e0e0e0] rounded text-xs cursor-pointer hover:bg-[#444]"
+        className="px-3 py-1 bg-secondary border border-border text-foreground rounded text-xs cursor-pointer hover:bg-accent"
       >
         <span role="img" aria-label="Settings">
           &#128295;
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index f3e2fdb..42b1ef4 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -16,7 +16,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
           // Muted error style - dark red-tinted background with readable text
           error:
-            'group-[.toaster]:bg-[#2a1a1a] group-[.toaster]:text-[#e8a0a0] group-[.toaster]:border-[#4a2a2a] [&_[data-description]]:text-[#b08080]',
+            'group-[.toaster]:bg-[#2a1a1a] group-[.toaster]:text-[#e8a0a0] group-[.toaster]:border-[#4a2a2a] [&_[data-description]]:text-[#d4a0a0]',
         },
       }}
       {...props}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f698c82..bc71a7f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -15,7 +15,7 @@
     --secondary: 0 0% 20%;
     --secondary-foreground: 0 0% 88%;
     --muted: 0 0% 20%;
-    --muted-foreground: 0 0% 53%;
+    --muted-foreground: 0 0% 64%;
     --accent: 0 0% 20%;
     --accent-foreground: 0 0% 88%;
     --destructive: 0 62% 50%;
diff --git a/frontend/src/utils/messageParser.ts b/frontend/src/utils/messageParser.ts
index 68a2f62..02c733e 100644
--- a/frontend/src/utils/messageParser.ts
+++ b/frontend/src/utils/messageParser.ts
@@ -26,7 +26,7 @@ export function formatTime(timestamp: number): string {
   const now = new Date();
   const isToday = date.toDateString() === now.toDateString();
 
-  const time = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const time = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
 
   if (isToday) {
     return time;