diff --git a/frontend/src/components/ChannelHeader.jsx b/frontend/src/components/ChannelHeader.jsx
index 2640fcf..4287318 100644
--- a/frontend/src/components/ChannelHeader.jsx
+++ b/frontend/src/components/ChannelHeader.jsx
@@ -59,14 +59,14 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
   return (
     <div className={`h-14 border-b flex items-center justify-between px-4 transition-colors duration-200 ${
       isDark 
-        ? 'bg-gray-800 border-gray-700' 
-        : 'bg-white border-gray-200'
-    }`}>
+        ? 'bg-gray-800/95 border-gray-700/50' 
+        : 'bg-white/95 border-gray-200'
+    } backdrop-blur-sm`}>
       <div className="flex items-center gap-3">
-        <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-          isDark ? 'bg-gray-700' : 'bg-gray-100'
+        <div className={`w-9 h-9 rounded-xl flex items-center justify-center ${
+          isDark ? 'bg-gradient-to-br from-claw-500/20 to-claw-600/20' : 'bg-gradient-to-br from-claw-100 to-claw-200'
         }`}>
-          <Hash className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
+          <Hash className={`w-4 h-4 text-claw-500`} />
         </div>
         <div>
           <h2 className={`font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>{channel.name}</h2>
@@ -76,7 +76,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
         </div>
       </div>
 
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3">
         {/* Search Bar */}
         {isSearchOpen ? (
           <form onSubmit={handleSubmit} className="flex items-center gap-2">
@@ -89,9 +89,9 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
                 onChange={(e) => setLocalQuery(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Search messages..."
-                className={`w-64 pl-9 pr-8 py-1.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-claw-500 ${
+                className={`w-72 pl-9 pr-8 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-claw-500 focus:border-transparent transition-all ${
                   isDark 
-                    ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' 
+                    ? 'bg-gray-700/50 border-gray-600 text-white placeholder-gray-400' 
                     : 'bg-gray-100 border-gray-300 text-gray-900 placeholder-gray-500'
                 }`}
               />
@@ -99,7 +99,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
                 <button
                   type="button"
                   onClick={handleClear}
-                  className={`absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded ${
+                  className={`absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-lg transition-colors ${
                     isDark 
                       ? 'text-gray-400 hover:text-white hover:bg-gray-600' 
                       : 'text-gray-500 hover:text-gray-900 hover:bg-gray-300'
@@ -112,7 +112,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
             <button
               type="button"
               onClick={handleSearchToggle}
-              className={`p-1.5 rounded transition-colors ${
+              className={`p-2 rounded-xl transition-all duration-200 hover:scale-110 ${
                 isDark 
                   ? 'text-gray-400 hover:text-white hover:bg-gray-700' 
                   : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
@@ -125,7 +125,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
         ) : (
           <button
             onClick={handleSearchToggle}
-            className={`p-2 rounded-lg transition-colors ${
+            className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
               isDark 
                 ? 'text-gray-400 hover:text-white hover:bg-gray-700' 
                 : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
@@ -138,7 +138,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
 
         <button
           onClick={onShowShortcuts}
-          className={`p-2 rounded-lg transition-colors ${
+          className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
             isDark 
               ? 'text-gray-400 hover:text-white hover:bg-gray-700' 
               : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
@@ -153,7 +153,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
 
         <button
           onClick={onToggleSound}
-          className={`p-2 rounded-lg transition-colors ${
+          className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
             soundEnabled 
               ? 'text-claw-400 hover:bg-claw-500/20' 
               : isDark
@@ -165,21 +165,27 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
           {soundEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
         </button>
 
-        <div className={`flex items-center gap-2 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-xl ${
+          isDark ? 'bg-gray-700/50 text-gray-400' : 'bg-gray-100 text-gray-500'
+        }`}>
           <Users className="w-4 h-4" />
-          <span className="text-sm">{userCount} online</span>
+          <span className="text-sm font-medium">{userCount}</span>
         </div>
 
-        <div className={`flex items-center gap-1 ${connected ? 'text-green-500' : 'text-red-500'}`}>
+        <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl ${
+          connected 
+            ? 'bg-green-500/10 text-green-400' 
+            : 'bg-red-500/10 text-red-400'
+        }`}>
           {connected ? (
             <>
               <Wifi className="w-4 h-4" />
-              <span className="text-xs">Connected</span>
+              <span className="text-xs font-medium">Connected</span>
             </>
           ) : (
             <>
               <WifiOff className="w-4 h-4" />
-              <span className="text-xs">Reconnecting...</span>
+              <span className="text-xs font-medium">Reconnecting...</span>
             </>
           )}
         </div>
diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
index b4ea955..9a0a232 100644
--- a/frontend/src/components/Login.jsx
+++ b/frontend/src/components/Login.jsx
@@ -56,30 +56,40 @@ export default function Login({ onLogin }) {
       <div className={`min-h-screen flex items-center justify-center p-4 transition-colors duration-200 ${
         isDark ? 'bg-gray-900' : 'bg-gray-50'
       }`}>
-        <div className="max-w-md w-full">
+        {/* Background decoration */}
+        <div className={`absolute inset-0 overflow-hidden pointer-events-none ${
+          isDark ? 'opacity-30' : 'opacity-20'
+        }`}>
+          <div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-conic from-claw-500/20 via-transparent to-transparent rounded-full" />
+          <div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-conic from-agent/20 via-transparent to-transparent rounded-full" />
+        </div>
+
+        <div className="max-w-md w-full relative">
           {/* Theme Toggle - Top Right */}
           <div className="flex justify-end mb-4">
             <ThemeToggle />
           </div>
 
           <div className="text-center mb-8">
-            <div className="inline-flex items-center justify-center w-20 h-20 bg-claw-600 rounded-2xl mb-4">
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-claw-500 to-claw-700 rounded-2xl mb-4 shadow-glow-lg">
               <MessageSquare className="w-10 h-10 text-white" />
             </div>
-            <h1 className={`text-3xl font-bold mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>ClawChat 🤖</h1>
+            <h1 className={`text-3xl font-bold mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <span className="text-gradient">ClawChat</span> 🤖
+            </h1>
             <p className={isDark ? 'text-gray-400' : 'text-gray-500'}>Chat platform built for OpenClaw agents</p>
           </div>
 
           <div className="space-y-3">
             <button
               onClick={() => setMode('login')}
-              className={`w-full flex items-center gap-4 p-4 rounded-xl transition-colors group ${
+              className={`w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 group hover:shadow-card-hover ${
                 isDark 
-                  ? 'bg-gray-800 hover:bg-gray-700' 
-                  : 'bg-white hover:bg-gray-50 border border-gray-200'
+                  ? 'bg-gray-800/80 hover:bg-gray-700 border border-gray-700/50' 
+                  : 'bg-white/80 hover:bg-white border border-gray-200 shadow-soft hover:shadow-card'
               }`}
             >
-              <div className="w-12 h-12 bg-claw-600/20 rounded-lg flex items-center justify-center group-hover:bg-claw-600/30">
+              <div className="w-12 h-12 bg-gradient-to-br from-claw-500/20 to-claw-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                 <User className="w-6 h-6 text-claw-500" />
               </div>
               <div className="text-left">
@@ -90,13 +100,13 @@ export default function Login({ onLogin }) {
 
             <button
               onClick={() => setMode('register')}
-              className={`w-full flex items-center gap-4 p-4 rounded-xl transition-colors group ${
+              className={`w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 group hover:shadow-card-hover ${
                 isDark 
-                  ? 'bg-gray-800 hover:bg-gray-700' 
-                  : 'bg-white hover:bg-gray-50 border border-gray-200'
+                  ? 'bg-gray-800/80 hover:bg-gray-700 border border-gray-700/50' 
+                  : 'bg-white/80 hover:bg-white border border-gray-200 shadow-soft hover:shadow-card'
               }`}
             >
-              <div className="w-12 h-12 bg-agent/20 rounded-lg flex items-center justify-center group-hover:bg-agent/30">
+              <div className="w-12 h-12 bg-gradient-to-br from-agent/20 to-agent-dark/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                 <Sparkles className="w-6 h-6 text-agent" />
               </div>
               <div className="text-left">
@@ -114,11 +124,19 @@ export default function Login({ onLogin }) {
     <div className={`min-h-screen flex items-center justify-center p-4 transition-colors duration-200 ${
       isDark ? 'bg-gray-900' : 'bg-gray-50'
     }`}>
-      <div className="max-w-md w-full">
+      {/* Background decoration */}
+      <div className={`absolute inset-0 overflow-hidden pointer-events-none ${
+        isDark ? 'opacity-30' : 'opacity-20'
+      }`}>
+        <div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-conic from-claw-500/20 via-transparent to-transparent rounded-full" />
+        <div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-conic from-agent/20 via-transparent to-transparent rounded-full" />
+      </div>
+
+      <div className="max-w-md w-full relative">
         <div className="flex justify-between items-center mb-4">
           <button
             onClick={() => setMode('select')}
-            className={`flex items-center gap-1 transition-colors ${
+            className={`flex items-center gap-1 transition-colors hover:scale-105 ${
               isDark ? 'text-gray-400 hover:text-white' : 'text-gray-500 hover:text-gray-900'
             }`}
           >
@@ -127,93 +145,107 @@ export default function Login({ onLogin }) {
           <ThemeToggle />
         </div>
 
-        <h2 className={`text-2xl font-bold mb-6 ${isDark ? 'text-white' : 'text-gray-900'}`}>
-          {mode === 'login' ? 'Sign In' : 'Create Account'}
-        </h2>
+        <div className={`p-8 rounded-2xl backdrop-blur-sm ${
+          isDark 
+            ? 'bg-gray-800/80 border border-gray-700/50 shadow-card' 
+            : 'bg-white/80 border border-gray-200 shadow-soft'
+        }`}>
+          <h2 className={`text-2xl font-bold mb-6 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            {mode === 'login' ? 'Sign In' : 'Create Account'}
+          </h2>
 
-        {mode === 'register' && (
-          <div className="flex gap-2 mb-6">
-            <button
-              type="button"
-              onClick={() => setFormData({ ...formData, type: 'human' })}
-              className={`flex-1 py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors ${
-                formData.type === 'human'
-                  ? 'bg-claw-600 text-white'
-                  : isDark
-                    ? 'bg-gray-800 text-gray-400 hover:bg-gray-700'
-                    : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-200'
-              }`}
-            >
-              <User className="w-4 h-4" /> Human
-            </button>
-            <button
-              type="button"
-              onClick={() => setFormData({ ...formData, type: 'agent' })}
-              className={`flex-1 py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors ${
-                formData.type === 'agent'
-                  ? 'bg-agent text-white'
-                  : isDark
-                    ? 'bg-gray-800 text-gray-400 hover:bg-gray-700'
-                    : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-200'
-              }`}
-            >
-              <Bot className="w-4 h-4" /> Agent
-            </button>
-          </div>
-        )}
+          {mode === 'register' && (
+            <div className="flex gap-2 mb-6">
+              <button
+                type="button"
+                onClick={() => setFormData({ ...formData, type: 'human' })}
+                className={`flex-1 py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-all duration-200 ${
+                  formData.type === 'human'
+                    ? 'bg-gradient-to-r from-claw-500 to-claw-600 text-white shadow-glow'
+                    : isDark
+                      ? 'bg-gray-700/50 text-gray-400 hover:bg-gray-700 border border-gray-600/50'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border border-gray-300'
+                }`}
+              >
+                <User className="w-4 h-4" /> Human
+              </button>
+              <button
+                type="button"
+                onClick={() => setFormData({ ...formData, type: 'agent' })}
+                className={`flex-1 py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-all duration-200 ${
+                  formData.type === 'agent'
+                    ? 'bg-gradient-to-r from-agent to-agent-dark text-white shadow-glow-agent'
+                    : isDark
+                      ? 'bg-gray-700/50 text-gray-400 hover:bg-gray-700 border border-gray-600/50'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border border-gray-300'
+                }`}
+              >
+                <Bot className="w-4 h-4" /> Agent
+              </button>
+            </div>
+          )}
 
-        {error && (
-          <div className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-sm">
-            {error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className={`block text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Username</label>
-            <input
-              type="text"
-              value={formData.username}
-              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
-              className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-claw-500 ${
-                isDark 
-                  ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-500' 
-                  : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
-              }`}
-              placeholder="Enter username"
-              required
-            />
-          </div>
+          {error && (
+            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-400 text-sm backdrop-blur-sm">
+              {error}
+            </div>
+          )}
 
-          {formData.type === 'agent' && mode === 'login' && (
+          <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label className={`block text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Agent Key</label>
+              <label className={`block text-sm font-medium mb-1.5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Username</label>
               <input
                 type="text"
-                value={formData.agentKey}
-                onChange={(e) => setFormData({ ...formData, agentKey: e.target.value })}
-                className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-agent ${
+                value={formData.username}
+                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                className={`w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-claw-500 focus:border-transparent transition-all ${
                   isDark 
-                    ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-500' 
-                    : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
+                    ? 'bg-gray-700/50 border-gray-600 text-white placeholder-gray-500 focus:bg-gray-700' 
+                    : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:bg-white'
                 }`}
-                placeholder="Enter agent key"
+                placeholder="Enter username"
+                required
               />
             </div>
-          )}
 
-          <button
-            type="submit"
-            disabled={loading}
-            className={`w-full py-3 px-4 rounded-lg font-semibold transition-colors ${
-              formData.type === 'agent'
-                ? 'bg-agent hover:bg-agent-dark text-white'
-                : 'bg-claw-600 hover:bg-claw-700 text-white'
-            } disabled:opacity-50`}
-          >
-            {loading ? 'Please wait...' : mode === 'login' ? 'Sign In' : 'Create Account'}
-          </button>
-        </form>
+            {formData.type === 'agent' && mode === 'login' && (
+              <div>
+                <label className={`block text-sm font-medium mb-1.5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Agent Key</label>
+                <input
+                  type="text"
+                  value={formData.agentKey}
+                  onChange={(e) => setFormData({ ...formData, agentKey: e.target.value })}
+                  className={`w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-agent focus:border-transparent transition-all ${
+                    isDark 
+                      ? 'bg-gray-700/50 border-gray-600 text-white placeholder-gray-500 focus:bg-gray-700' 
+                      : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:bg-white'
+                  }`}
+                  placeholder="Enter agent key"
+                />
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className={`w-full py-3.5 px-4 rounded-xl font-semibold transition-all duration-200 hover:shadow-glow disabled:opacity-50 disabled:cursor-not-allowed ${
+                formData.type === 'agent'
+                  ? 'bg-gradient-to-r from-agent to-agent-dark hover:from-agent-light hover:to-agent'
+                  : 'bg-gradient-to-r from-claw-500 to-claw-600 hover:from-claw-400 hover:to-claw-500'
+              } text-white`}
+            >
+              {loading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Please wait...
+                </span>
+              ) : mode === 'login' ? 'Sign In' : 'Create Account'}
+            </button>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/MessageInput.jsx b/frontend/src/components/MessageInput.jsx
index 6d62fdb..e9dd051 100644
--- a/frontend/src/components/MessageInput.jsx
+++ b/frontend/src/components/MessageInput.jsx
@@ -344,8 +344,8 @@ const MessageInput = forwardRef(function MessageInput({
   return (
     <div className={`border-t transition-colors duration-200 ${
       isDark 
-        ? 'bg-gray-800 border-gray-700' 
-        : 'bg-white border-gray-200'
+        ? 'bg-gray-800/95 border-gray-700/50' 
+        : 'bg-white/95 border-gray-200'
     } ${isThread ? 'p-2' : 'p-4'}`}>
       {/* Attachments preview */}
       {hasAttachments && (
@@ -353,9 +353,9 @@ const MessageInput = forwardRef(function MessageInput({
           {attachments.map((attachment) => (
             <div
               key={attachment.id}
-              className={`relative group rounded-lg overflow-hidden border ${
+              className={`relative group rounded-xl overflow-hidden border shadow-sm ${
                 isDark 
-                  ? 'bg-gray-700 border-gray-600' 
+                  ? 'bg-gray-700/50 border-gray-600/50' 
                   : 'bg-gray-100 border-gray-300'
               }`}
             >
@@ -374,7 +374,7 @@ const MessageInput = forwardRef(function MessageInput({
                 type="button"
                 onClick={() => removeAttachment(attachment.id)}
                 disabled={isUploading}
-                className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity shadow-md disabled:opacity-50"
+                className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all shadow-md disabled:opacity-50 hover:scale-110"
                 title="Remove attachment"
               >
                 <X className="w-3 h-3" />
@@ -391,9 +391,9 @@ const MessageInput = forwardRef(function MessageInput({
           
           {/* Uploading indicator */}
           {isUploading && (
-            <div className={`flex items-center justify-center w-20 h-20 rounded-lg border ${
+            <div className={`flex items-center justify-center w-20 h-20 rounded-xl border ${
               isDark 
-                ? 'bg-gray-700 border-gray-600' 
+                ? 'bg-gray-700/50 border-gray-600/50' 
                 : 'bg-gray-100 border-gray-300'
             }`}>
               <Loader2 className={`w-6 h-6 animate-spin ${isDark ? 'text-claw-400' : 'text-claw-500'}`} />
@@ -404,8 +404,8 @@ const MessageInput = forwardRef(function MessageInput({
 
       {/* Reply preview */}
       {replyTo && (
-        <div className={`mb-3 flex items-center gap-2 px-3 py-2 rounded-lg ${
-          isDark ? 'bg-gray-700/50' : 'bg-gray-100'
+        <div className={`mb-3 flex items-center gap-2 px-4 py-3 rounded-xl ${
+          isDark ? 'bg-gray-700/50 border border-gray-600/30' : 'bg-gray-100 border border-gray-200'
         }`}>
           <Reply className={`w-4 h-4 ${isDark ? 'text-claw-400' : 'text-claw-500'}`} />
           <div className="flex-1 min-w-0">
@@ -419,7 +419,7 @@ const MessageInput = forwardRef(function MessageInput({
           <button
             type="button"
             onClick={onCancelReply}
-            className={`p-1 rounded transition-colors ${
+            className={`p-1.5 rounded-lg transition-all duration-200 hover:scale-110 ${
               isDark 
                 ? 'hover:bg-gray-600 text-gray-400' 
                 : 'hover:bg-gray-200 text-gray-500'
@@ -433,38 +433,38 @@ const MessageInput = forwardRef(function MessageInput({
 
       {/* Formatting Toolbar - hidden in thread mode */}
       {!isThread && (
-        <div className={`flex items-center gap-1 mb-2 px-2 py-1.5 rounded-lg ${
-          isDark ? 'bg-gray-700/50' : 'bg-gray-100'
+        <div className={`flex items-center gap-1 mb-3 px-3 py-2 rounded-xl ${
+          isDark ? 'bg-gray-700/30' : 'bg-gray-100'
         }`}>
-          <span className={`text-xs mr-2 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>Format:</span>
+          <span className={`text-xs mr-3 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>Format:</span>
           <button
             type="button"
             onClick={insertBold}
-            className={`p-1.5 rounded transition-colors ${
+            className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
               isDark 
                 ? 'text-gray-400 hover:text-white hover:bg-gray-600' 
                 : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200'
             }`}
-            title="Bold"
+            title="Bold (Ctrl+B)"
           >
             <Bold className="w-4 h-4" />
           </button>
           <button
             type="button"
             onClick={insertItalic}
-            className={`p-1.5 rounded transition-colors ${
+            className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
               isDark 
                 ? 'text-gray-400 hover:text-white hover:bg-gray-600' 
                 : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200'
             }`}
-            title="Italic"
+            title="Italic (Ctrl+I)"
           >
             <Italic className="w-4 h-4" />
           </button>
           <button
             type="button"
             onClick={insertCode}
-            className={`p-1.5 rounded transition-colors ${
+            className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
               isDark 
                 ? 'text-gray-400 hover:text-white hover:bg-gray-600' 
                 : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200'
@@ -476,7 +476,7 @@ const MessageInput = forwardRef(function MessageInput({
           <button
             type="button"
             onClick={insertStrikethrough}
-            className={`p-1.5 rounded transition-colors ${
+            className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
               isDark 
                 ? 'text-gray-400 hover:text-white hover:bg-gray-600' 
                 : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200'
@@ -485,18 +485,18 @@ const MessageInput = forwardRef(function MessageInput({
           >
             <Strikethrough className="w-4 h-4" />
           </button>
-          <div className={`w-px h-4 mx-2 ${isDark ? 'bg-gray-600' : 'bg-gray-300'}`} />
+          <div className={`w-px h-5 mx-3 ${isDark ? 'bg-gray-600' : 'bg-gray-300'}`} />
           <span className={`text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
             Select text or click to insert
           </span>
         </div>
       )}
 
-      <form onSubmit={handleSubmit} className="flex gap-2 relative">
+      <form onSubmit={handleSubmit} className="flex gap-3 relative">
         <div 
           ref={mentionContainerRef}
-          className={`flex-1 rounded-lg flex items-end transition-colors duration-200 ${
-            isDark ? 'bg-gray-700' : 'bg-gray-100'
+          className={`flex-1 rounded-2xl flex items-end transition-all duration-200 ${
+            isDark ? 'bg-gray-700/50 border border-gray-600/30 focus-within:border-claw-500/50 focus-within:ring-2 focus-within:ring-claw-500/20' : 'bg-gray-100 border border-gray-200 focus-within:border-claw-500/50 focus-within:ring-2 focus-within:ring-claw-500/20'
           }`}
         >
           <textarea
@@ -512,8 +512,8 @@ const MessageInput = forwardRef(function MessageInput({
               isDark 
                 ? 'text-white placeholder-gray-500' 
                 : 'text-gray-900 placeholder-gray-400'
-            } ${isThread ? 'px-3 py-2' : 'px-4 py-3'}`}
-            style={{ minHeight: isThread ? '36px' : '48px' }}
+            } ${isThread ? 'px-3 py-2' : 'px-5 py-3.5'}`}
+            style={{ minHeight: isThread ? '36px' : '52px' }}
           />
           <div className="flex items-center gap-1 p-2">
             <input
@@ -527,11 +527,11 @@ const MessageInput = forwardRef(function MessageInput({
             <button
               type="button"
               onClick={insertAtSymbol}
-              className={`p-2 rounded-lg transition-colors ${
+              className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
                 mentionState.isOpen
                   ? 'text-claw-400 bg-claw-500/20'
                   : isDark 
-                    ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-600' 
+                    ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-600' 
                     : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200'
               }`}
               title="Mention someone (@)"
@@ -541,9 +541,9 @@ const MessageInput = forwardRef(function MessageInput({
             <button
               type="button"
               onClick={() => fileInputRef.current?.click()}
-              className={`p-2 rounded-lg transition-colors ${
+              className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
                 isDark 
-                  ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-600' 
+                  ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-600' 
                   : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200'
               }`}
               title="Attach file"
@@ -554,11 +554,11 @@ const MessageInput = forwardRef(function MessageInput({
               <button
                 type="button"
                 onClick={() => setEmojiPickerOpen(!emojiPickerOpen)}
-                className={`p-2 rounded-lg transition-colors ${
+                className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
                   emojiPickerOpen 
                     ? 'text-claw-400 bg-claw-500/20' 
                     : isDark
-                      ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-600'
+                      ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-600'
                       : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200'
                 }`}
                 title="Add emoji (Ctrl+E)"
@@ -577,7 +577,7 @@ const MessageInput = forwardRef(function MessageInput({
         <button
           type="submit"
           disabled={(!message.trim() && !hasAttachments) || isUploading}
-          className="px-4 bg-claw-600 hover:bg-claw-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors flex items-center justify-center"
+          className="px-5 bg-gradient-to-r from-claw-500 to-claw-600 hover:from-claw-400 hover:to-claw-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl transition-all duration-200 flex items-center justify-center shadow-glow hover:shadow-glow-lg disabled:shadow-none"
         >
           {isUploading ? (
             <Loader2 className="w-5 h-5 text-white animate-spin" />
@@ -605,7 +605,7 @@ const MessageInput = forwardRef(function MessageInput({
         />
       </form>
 
-      <div className={`mt-2 text-xs text-center flex items-center justify-center gap-2 ${
+      <div className={`mt-2.5 text-xs text-center flex items-center justify-center gap-2 ${
         isDark ? 'text-gray-500' : 'text-gray-400'
       }`}>
         <span>Enter to send • Shift+Enter for new line • @ to mention • : for emoji • **bold** • `code`</span>
diff --git a/frontend/src/components/MessageList.jsx b/frontend/src/components/MessageList.jsx
index 5262922..13dfc2f 100644
--- a/frontend/src/components/MessageList.jsx
+++ b/frontend/src/components/MessageList.jsx
@@ -56,7 +56,7 @@ function TimestampTooltip({ timestamp, children }) {
       </span>
       {showTooltip && (
         <div
-          className="fixed z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg pointer-events-none whitespace-nowrap"
+          className="fixed z-50 px-2.5 py-1.5 text-xs text-white bg-gray-900/95 backdrop-blur-sm rounded-lg shadow-lg pointer-events-none whitespace-nowrap"
           style={{
             left: tooltipPosition.x,
             top: tooltipPosition.y,
@@ -64,7 +64,7 @@ function TimestampTooltip({ timestamp, children }) {
           }}
         >
           {formatFullTimestamp(timestamp)}
-          <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900" />
+          <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900/95" />
         </div>
       )}
     </>
@@ -102,8 +102,8 @@ function AttachmentDisplay({ attachments, isDark }) {
   return (
     <div className="mt-2 space-y-2">
       {attachments.map((file) => (
-        <div key={file.id} className={`rounded-lg overflow-hidden border ${
-          isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'
+        <div key={file.id} className={`rounded-xl overflow-hidden border shadow-sm ${
+          isDark ? 'bg-gray-800/50 border-gray-700/50' : 'bg-gray-50 border-gray-200'
         }`}>
           {file.mimeType?.startsWith('image/') ? (
             // Image preview with click to enlarge
@@ -116,7 +116,7 @@ function AttachmentDisplay({ attachments, isDark }) {
               <img
                 src={file.url}
                 alt={file.originalName}
-                className="max-w-full max-h-64 object-contain cursor-zoom-in group-hover:opacity-90 transition-opacity"
+                className="max-w-full max-h-64 object-contain cursor-zoom-in group-hover:opacity-90 transition-opacity rounded-lg"
                 loading="lazy"
               />
             </a>
@@ -124,7 +124,7 @@ function AttachmentDisplay({ attachments, isDark }) {
             // Video player
             <video
               controls
-              className="max-w-full max-h-64"
+              className="max-w-full max-h-64 rounded-lg"
               preload="metadata"
             >
               <source src={file.url} type={file.mimeType} />
@@ -132,7 +132,7 @@ function AttachmentDisplay({ attachments, isDark }) {
             </video>
           ) : file.mimeType?.startsWith('audio/') ? (
             // Audio player
-            <audio controls className="w-full p-2" preload="metadata">
+            <audio controls className="w-full p-3" preload="metadata">
               <source src={file.url} type={file.mimeType} />
               Your browser does not support the audio tag.
             </audio>
@@ -144,21 +144,29 @@ function AttachmentDisplay({ attachments, isDark }) {
               target="_blank"
               rel="noopener noreferrer"
               className={`flex items-center gap-3 p-3 hover:bg-opacity-80 transition-colors ${
-                isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'
+                isDark ? 'hover:bg-gray-700/50' : 'hover:bg-gray-100'
               }`}
             >
-              <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700 text-claw-400' : 'bg-gray-200 text-claw-600'}`}>
+              <div className={`p-2.5 rounded-xl ${
+                isDark ? 'bg-gray-700/50 text-claw-400' : 'bg-gray-200 text-claw-600'
+              }`}>
                 {getFileIcon(file.mimeType)}
               </div>
               <div className="flex-1 min-w-0">
-                <p className={`text-sm font-medium truncate ${isDark ? 'text-gray-200' : 'text-gray-800'}`}>
+                <p className={`text-sm font-medium truncate ${
+                  isDark ? 'text-gray-200' : 'text-gray-800'
+                }`}>
                   {file.originalName}
                 </p>
-                <p className={`text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+                <p className={`text-xs ${
+                  isDark ? 'text-gray-500' : 'text-gray-400'
+                }`}>
                   {formatFileSize(file.size)}
                 </p>
               </div>
-              <Download className={`w-5 h-5 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
+              <Download className={`w-5 h-5 ${
+                isDark ? 'text-gray-400' : 'text-gray-500'
+              }`} />
             </a>
           )}
         </div>
@@ -174,19 +182,21 @@ function ReplyPreview({ replyData, isDark, onClick }) {
   return (
     <div
       onClick={onClick}
-      className={`flex items-center gap-2 mb-1 px-2 py-1 rounded cursor-pointer transition-colors ${
+      className={`flex items-center gap-2 mb-2 px-3 py-2 rounded-xl cursor-pointer transition-all duration-200 hover:scale-[1.01] ${
         isDark
-          ? 'bg-gray-700/50 hover:bg-gray-700 border-l-2 border-gray-600'
-          : 'bg-gray-200/50 hover:bg-gray-200 border-l-2 border-gray-300'
+          ? 'bg-gray-700/30 hover:bg-gray-700/50 border-l-2 border-gray-600'
+          : 'bg-gray-200/30 hover:bg-gray-200/50 border-l-2 border-gray-300'
       }`}
     >
-      <Reply className={`w-3 h-3 ${isDark ? 'text-gray-500' : 'text-gray-400'}`} />
-      <span className={`text-xs font-medium ${
+      <Reply className={`w-3.5 h-3.5 flex-shrink-0 ${
+        isDark ? 'text-gray-500' : 'text-gray-400'
+      }`} />
+      <span className={`text-xs font-medium truncate ${
         replyData.userType === 'agent' ? 'text-agent' : 'text-claw-500'
       }`}>
         {replyData.username}
       </span>
-      <span className={`text-xs truncate max-w-[200px] ${
+      <span className={`text-xs truncate ${
         isDark ? 'text-gray-400' : 'text-gray-500'
       }`}>
         {replyData.content}
@@ -199,15 +209,15 @@ function ReplyPreview({ replyData, isDark, onClick }) {
 function NewMessagesDivider({ isDark }) {
   return (
     <div className="flex items-center justify-center my-4">
-      <div className={`h-px flex-1 ${isDark ? 'bg-claw-500/50' : 'bg-claw-400/50'}`} />
-      <span className={`mx-4 text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full ${
+      <div className={`h-px flex-1 ${isDark ? 'bg-claw-500/30' : 'bg-claw-400/30'}`} />
+      <span className={`mx-4 text-xs font-semibold uppercase tracking-wider px-3 py-1 rounded-full ${
         isDark 
           ? 'bg-claw-500/20 text-claw-400 border border-claw-500/30' 
           : 'bg-claw-100 text-claw-600 border border-claw-300'
       }`}>
         New Messages
       </span>
-      <div className={`h-px flex-1 ${isDark ? 'bg-claw-500/50' : 'bg-claw-400/50'}`} />
+      <div className={`h-px flex-1 ${isDark ? 'bg-claw-500/30' : 'bg-claw-400/30'}`} />
     </div>
   );
 }
@@ -223,10 +233,10 @@ function ReactionPicker({ isOpen, onSelect, onClose, position, isDark }) {
         onClick={onClose}
       />
       <div
-        className={`absolute z-50 border rounded-lg shadow-xl p-2 flex gap-1 ${
+        className={`absolute z-50 border rounded-xl shadow-xl p-2 flex gap-1 ${
           isDark
-            ? 'bg-gray-800 border-gray-600'
-            : 'bg-white border-gray-300'
+            ? 'bg-gray-800/95 backdrop-blur-sm border-gray-700'
+            : 'bg-white/95 backdrop-blur-sm border-gray-300'
         }`}
         style={{
           bottom: position?.bottom || '100%',
@@ -238,7 +248,7 @@ function ReactionPicker({ isOpen, onSelect, onClose, position, isDark }) {
           <button
             key={emoji}
             onClick={() => onSelect(emoji)}
-            className={`w-8 h-8 flex items-center justify-center text-lg rounded transition-colors ${
+            className={`w-9 h-9 flex items-center justify-center text-xl rounded-lg transition-all duration-200 hover:scale-125 ${
               isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'
             }`}
             title={`React with ${emoji}`}
@@ -261,17 +271,19 @@ function ReactionBadge({ emoji, users, currentUserId, onToggle, isDark }) {
   return (
     <button
       onClick={() => onToggle(emoji)}
-      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm transition-all ${
+      className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-sm transition-all duration-200 hover:scale-105 ${
         currentUserReacted
-          ? 'bg-claw-600/30 border border-claw-500 hover:bg-claw-600/50'
+          ? 'bg-claw-500/20 border border-claw-500/40 hover:bg-claw-500/30'
           : isDark
-            ? 'bg-gray-700/50 border border-gray-600 hover:bg-gray-700'
-            : 'bg-gray-200/50 border border-gray-300 hover:bg-gray-200'
+            ? 'bg-gray-700/50 border border-gray-600/50 hover:bg-gray-700'
+            : 'bg-gray-200/50 border border-gray-300/50 hover:bg-gray-200'
       }`}
       title={tooltipText}
     >
       <span>{emoji}</span>
-      <span className={`text-xs ${currentUserReacted ? 'text-claw-300' : isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+      <span className={`text-xs ${
+        currentUserReacted ? 'text-claw-300 font-medium' : isDark ? 'text-gray-400' : 'text-gray-500'
+      }`}>
         {users.length}
       </span>
     </button>
@@ -318,7 +330,7 @@ function MessageReactions({ messageId, reactions, currentUserId, onAddReaction,
   const hasReactions = reactions && Object.keys(reactions).length > 0;
 
   return (
-    <div className="flex items-center gap-1 mt-1 flex-wrap">
+    <div className="flex items-center gap-1.5 mt-2 flex-wrap">
       {hasReactions && Object.entries(reactions).map(([emoji, users]) => (
         <ReactionBadge
           key={emoji}
@@ -334,7 +346,7 @@ function MessageReactions({ messageId, reactions, currentUserId, onAddReaction,
         <button
           ref={buttonRef}
           onClick={handleOpenPicker}
-          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm border border-transparent transition-all opacity-0 group-hover:opacity-100 ${
+          className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-sm border border-transparent transition-all duration-200 opacity-0 group-hover:opacity-100 ${
             isDark
               ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-700/50 hover:border-gray-600'
               : 'text-gray-400 hover:text-gray-600 hover:bg-gray-200/50 hover:border-gray-300'
@@ -363,10 +375,10 @@ function ThreadIndicator({ count, onClick, isDark }) {
   return (
     <button
       onClick={onClick}
-      className={`mt-1 flex items-center gap-1.5 px-2 py-1 rounded-lg text-sm transition-all ${
+      className={`mt-2 flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-all duration-200 hover:scale-105 ${
         isDark
-          ? 'bg-claw-600/20 text-claw-400 hover:bg-claw-600/30 border border-claw-600/30'
-          : 'bg-claw-100 text-claw-600 hover:bg-claw-200 border border-claw-300'
+          ? 'bg-claw-500/10 text-claw-400 hover:bg-claw-500/20 border border-claw-500/20'
+          : 'bg-claw-100 text-claw-600 hover:bg-claw-200 border border-claw-200'
       }`}
       title="View thread"
     >
@@ -416,34 +428,36 @@ function MessageEditForm({ content, onSave, onCancel, isDark }) {
         value={editContent}
         onChange={(e) => setEditContent(e.target.value)}
         onKeyDown={handleKeyDown}
-        className={`w-full border border-claw-500 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-claw-500 ${
+        className={`w-full border-2 border-claw-500 rounded-xl px-4 py-2.5 resize-none focus:outline-none focus:ring-2 focus:ring-claw-500/30 ${
           isDark
             ? 'bg-gray-800 text-gray-100'
             : 'bg-white text-gray-900 border-gray-300'
         }`}
         rows={Math.min(5, editContent.split('\n').length + 1)}
-        style={{ minHeight: '40px' }}
+        style={{ minHeight: '44px' }}
       />
-      <div className="flex items-center gap-2 mt-2">
+      <div className="flex items-center gap-2 mt-3">
         <button
           onClick={handleSave}
-          className="flex items-center gap-1 px-3 py-1 bg-claw-600 hover:bg-claw-700 text-white text-sm rounded transition-colors"
+          className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-claw-500 to-claw-600 hover:from-claw-400 hover:to-claw-500 text-white text-sm rounded-xl transition-all duration-200 shadow-sm hover:shadow-glow"
         >
           <Check className="w-3.5 h-3.5" />
           Save
         </button>
         <button
           onClick={onCancel}
-          className={`flex items-center gap-1 px-3 py-1 text-sm rounded transition-colors ${
+          className={`flex items-center gap-1.5 px-4 py-2 text-sm rounded-xl transition-all duration-200 ${
             isDark
-              ? 'bg-gray-700 hover:bg-gray-600 text-gray-300'
+              ? 'bg-gray-700/50 hover:bg-gray-700 text-gray-300 border border-gray-600/50'
               : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
           }`}
         >
           <X className="w-3.5 h-3.5" />
           Cancel
         </button>
-        <span className={`text-xs ml-2 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+        <span className={`text-xs ml-2 ${
+          isDark ? 'text-gray-500' : 'text-gray-400'
+        }`}>
           Press Enter to save, Escape to cancel
         </span>
       </div>
@@ -605,8 +619,13 @@ export default function MessageList({ messages, loading, currentUser, reactions,
 
   if (loading) {
     return (
-      <div className={`flex-1 flex items-center justify-center ${isDark ? '' : 'bg-gray-100'}`}>
-        <Loader2 className="w-8 h-8 text-claw-500 animate-spin" />
+      <div className={`flex-1 flex items-center justify-center ${
+        isDark ? '' : 'bg-gray-100'
+      }`}>
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="w-10 h-10 text-claw-500 animate-spin" />
+          <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Loading messages...</p>
+        </div>
       </div>
     );
   }
@@ -628,9 +647,13 @@ export default function MessageList({ messages, loading, currentUser, reactions,
         let globalIndex = 0;
         return Object.entries(groupedMessages).map(([date, dateMessages]) => (
           <div key={date}>
-            <div className="flex items-center justify-center my-4">
+            <div className="flex items-center justify-center my-5">
               <div className={`h-px flex-1 ${isDark ? 'bg-gray-700' : 'bg-gray-300'}`} />
-              <span className={`mx-4 text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>{formatDate(dateMessages[0].timestamp)}</span>
+              <span className={`mx-4 text-xs font-medium px-4 py-1 rounded-full ${
+                isDark ? 'bg-gray-800 text-gray-500 border border-gray-700' : 'bg-white text-gray-400 border border-gray-200'
+              }`}>
+                {formatDate(dateMessages[0].timestamp)}
+              </span>
               <div className={`h-px flex-1 ${isDark ? 'bg-gray-700' : 'bg-gray-300'}`} />
             </div>
 
@@ -654,15 +677,25 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                     )}
                     <div
                       id={`message-${msg.id}`}
-                      className={`message-row flex gap-3 group ${isConsecutive ? 'mt-0.5' : 'mt-4'} ${isCommand ? 'command-message' : ''} ${highlightedMessageId === msg.id ? 'message-highlight' : ''}`}
+                      className={`message-row flex gap-3 group ${isConsecutive ? 'mt-0.5' : 'mt-4'} ${isCommand ? 'command-message' : ''} ${highlightedMessageId === msg.id ? 'message-highlight' : ''} ${
+                        isMe && !isCommand ? 'px-3 py-2 rounded-2xl' : ''
+                      } ${
+                        isMe && !isCommand
+                          ? isDark 
+                            ? 'bg-gradient-to-r from-gray-800/50 to-gray-800/30 hover:from-gray-800/70 hover:to-gray-800/50' 
+                            : 'bg-white/50 hover:from-white/80 hover:to-white/60'
+                          : ''
+                      }`}
                     >
                       {!isConsecutive ? (
-                        <div className={`w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center ${
+                        <div className={`w-10 h-10 rounded-2xl flex-shrink-0 flex items-center justify-center shadow-md ${
                           isCommand 
                             ? 'bg-gradient-to-br from-claw-500 to-claw-700' 
                             : msg.userType === 'agent' 
-                              ? 'bg-agent' 
-                              : 'bg-claw-600'
+                              ? 'bg-gradient-to-br from-agent to-agent-dark'
+                              : isMe
+                                ? 'bg-gradient-to-br from-claw-500 to-claw-700'
+                                : 'bg-gradient-to-br from-claw-400 to-claw-600'
                         }`}>
                           {isCommand ? (
                             <Bot className="w-5 h-5 text-white" />
@@ -678,13 +711,15 @@ export default function MessageList({ messages, loading, currentUser, reactions,
 
                   <div className="flex-1 min-w-0">
                     {!isConsecutive && (
-                      <div className="flex items-baseline gap-2">
+                      <div className="flex items-baseline gap-2 mb-1">
                         <span className={`font-semibold text-sm ${
                           isCommand 
                             ? 'text-claw-400' 
                             : msg.userType === 'agent' 
                               ? 'text-agent' 
-                              : 'text-claw-500'
+                              : isMe
+                                ? 'text-claw-500'
+                                : 'text-claw-600'
                         }`}>
                           {isCommand ? '🤖 ClawBot' : msg.username}
                         </span>
@@ -697,20 +732,20 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                         )}
                         <TimestampTooltip timestamp={msg.timestamp}>
                           <span className={`text-xs hover:transition-colors ${
-                            isDark ? 'text-gray-500 hover:text-gray-400' : 'text-gray-400 hover:text-gray-600'
+                            isDark ? 'text-gray-600 hover:text-gray-400' : 'text-gray-400 hover:text-gray-600'
                           }`}>
                             {formatTime(msg.timestamp)}
                           </span>
                         </TimestampTooltip>
                         {msg.edited && (
-                          <span className={`text-xs italic ${isDark ? 'text-gray-500' : 'text-gray-400'}`} title={msg.editedAt ? formatFullTimestamp(msg.editedAt) : 'Edited'}>
+                          <span className={`text-xs italic ${isDark ? 'text-gray-600' : 'text-gray-400'}`} title={msg.editedAt ? formatFullTimestamp(msg.editedAt) : 'Edited'}>
                             (edited)
                           </span>
                         )}
                         {!msg.deleted && !isEditing && !isCommand && (
                           <button
                             onClick={() => onReply && onReply(msg)}
-                            className={`ml-1 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                            className={`ml-1 p-1.5 rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 ${
                               isDark
                                 ? 'text-gray-600 hover:text-claw-400 hover:bg-claw-500/10'
                                 : 'text-gray-400 hover:text-claw-500 hover:bg-claw-500/10'
@@ -723,7 +758,7 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                         {!msg.deleted && !isEditing && onCopyMessage && !isCommand && (
                           <button
                             onClick={() => onCopyMessage(msg.content, msg.id)}
-                            className={`ml-1 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                            className={`ml-1 p-1.5 rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 ${
                               copiedMessageId === msg.id
                                 ? 'text-green-400 bg-green-500/10'
                                 : isDark
@@ -742,7 +777,7 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                         {!msg.deleted && !isEditing && !isCommand && (
                           <button
                             onClick={() => copyPermalink(msg.id)}
-                            className={`ml-1 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                            className={`ml-1 p-1.5 rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 ${
                               copiedLinkId === msg.id
                                 ? 'text-green-400 bg-green-500/10'
                                 : isDark
@@ -762,7 +797,7 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                           <>
                             <button
                               onClick={() => handleEditStart(msg.id)}
-                              className={`ml-1 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                              className={`ml-1 p-1.5 rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 ${
                                 isDark
                                   ? 'text-gray-600 hover:text-claw-400 hover:bg-claw-500/10'
                                   : 'text-gray-400 hover:text-claw-500 hover:bg-claw-500/10'
@@ -773,7 +808,7 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                             </button>
                             <button
                               onClick={() => onDeleteMessage && onDeleteMessage(msg.id)}
-                              className={`ml-1 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                              className={`ml-1 p-1.5 rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 ${
                                 isDark
                                   ? 'text-gray-600 hover:text-red-400 hover:bg-red-500/10'
                                   : 'text-gray-400 hover:text-red-500 hover:bg-red-500/10'
@@ -814,7 +849,7 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                         )}
                         <div className={`break-words ${isConsecutive ? 'mt-0.5' : ''} ${
                           msg.deleted
-                            ? isDark ? 'text-gray-500 italic text-sm' : 'text-gray-400 italic text-sm'
+                            ? isDark ? 'text-gray-600 italic text-sm' : 'text-gray-400 italic text-sm'
                             : isCommand
                               ? isDark ? 'text-gray-200' : 'text-gray-800'
                               : isDark ? 'text-gray-100' : 'text-gray-900'
@@ -868,17 +903,21 @@ export default function MessageList({ messages, loading, currentUser, reactions,
       })()}
 
       {messages.length === 0 && (
-        <div className={`flex flex-col items-center justify-center h-full ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+        <div className={`flex flex-col items-center justify-center h-full ${
+          isDark ? 'text-gray-500' : 'text-gray-400'
+        }`}>
           {isSearching ? (
             <>
-              <Search className="w-12 h-12 mb-4 opacity-50" />
-              <p className={`text-lg ${isDark ? '' : 'text-gray-600'}`}>No messages found</p>
+              <Search className="w-14 h-14 mb-4 opacity-40" />
+              <p className={`text-lg font-medium ${isDark ? '' : 'text-gray-600'}`}>No messages found</p>
               <p className="text-sm">No results for "{searchQuery}"</p>
             </>
           ) : (
             <>
-              <Bot className="w-12 h-12 mb-4 opacity-50" />
-              <p className={`text-lg ${isDark ? '' : 'text-gray-600'}`}>No messages yet</p>
+              <div className="w-16 h-16 bg-gradient-to-br from-claw-500/20 to-claw-600/20 rounded-2xl flex items-center justify-center mb-4">
+                <Bot className="w-8 h-8 text-claw-500" />
+              </div>
+              <p className={`text-lg font-medium ${isDark ? '' : 'text-gray-600'}`}>No messages yet</p>
               <p className="text-sm">Be the first to say something!</p>
             </>
           )}
@@ -889,11 +928,13 @@ export default function MessageList({ messages, loading, currentUser, reactions,
 
       {/* Pending Messages */}
       {pendingMessages.length > 0 && (
-        <div className="space-y-2 mt-4">
+        <div className="space-y-3 mt-5">
           {pendingMessages.map((msg) => (
             <div key={msg.id} className="flex gap-3 opacity-70">
-              <div className={`w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center ${
-                msg.userType === 'agent' ? 'bg-agent' : 'bg-claw-600'
+              <div className={`w-10 h-10 rounded-2xl flex-shrink-0 flex items-center justify-center shadow-md ${
+                msg.userType === 'agent' 
+                  ? 'bg-gradient-to-br from-agent to-agent-dark'
+                  : 'bg-gradient-to-br from-claw-500 to-claw-700'
               }`}>
                 {msg.userType === 'agent' ? (
                   <Bot className="w-5 h-5 text-white" />
@@ -902,22 +943,26 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                 )}
               </div>
               <div className="flex-1 min-w-0">
-                <div className="flex items-baseline gap-2">
+                <div className="flex items-baseline gap-2 mb-1">
                   <span className={`font-semibold text-sm ${
                     msg.userType === 'agent' ? 'text-agent' : 'text-claw-500'
                   }`}>
                     {msg.username}
                   </span>
-                  <span className={`text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>{formatTime(msg.timestamp)}</span>
-                  <span className={`text-xs italic ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>(sending...)</span>
-                  <Loader2 className={`w-3 h-3 animate-spin ${isDark ? 'text-gray-500' : 'text-gray-400'}`} />
+                  <span className={`text-xs ${isDark ? 'text-gray-600' : 'text-gray-400'}`}>{formatTime(msg.timestamp)}</span>
+                  <span className={`text-xs italic ${isDark ? 'text-gray-600' : 'text-gray-400'}`}>(sending...)</span>
+                  <Loader2 className={`w-3.5 h-3.5 animate-spin ${isDark ? 'text-gray-500' : 'text-gray-400'}`} />
                 </div>
                 <div className={`break-words ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
                   <MarkdownMessage text={msg.content} isDark={isDark} />
                 </div>
                 {msg.attachments?.length > 0 && (
-                  <div className={`mt-2 p-2 rounded-lg border ${isDark ? 'bg-gray-800/50 border-gray-700' : 'bg-gray-100 border-gray-200'}`}>
-                    <span className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+                  <div className={`mt-3 p-3 rounded-xl border ${
+                    isDark ? 'bg-gray-800/50 border-gray-700' : 'bg-gray-100 border-gray-200'
+                  }`}>
+                    <span className={`text-xs ${
+                      isDark ? 'text-gray-400' : 'text-gray-500'
+                    }`}>
                       {msg.attachments.length} file{msg.attachments.length > 1 ? 's' : ''} uploading...
                     </span>
                   </div>
@@ -930,11 +975,13 @@ export default function MessageList({ messages, loading, currentUser, reactions,
 
       {/* Failed Messages */}
       {failedMessages.length > 0 && (
-        <div className="space-y-2 mt-4">
+        <div className="space-y-3 mt-5">
           {failedMessages.map((msg) => (
             <div key={msg.id} className="flex gap-3">
-              <div className={`w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center ${
-                msg.userType === 'agent' ? 'bg-agent' : 'bg-claw-600'
+              <div className={`w-10 h-10 rounded-2xl flex-shrink-0 flex items-center justify-center shadow-md ${
+                msg.userType === 'agent' 
+                  ? 'bg-gradient-to-br from-agent to-agent-dark'
+                  : 'bg-gradient-to-br from-claw-500 to-claw-700'
               }`}>
                 {msg.userType === 'agent' ? (
                   <Bot className="w-5 h-5 text-white" />
@@ -943,13 +990,13 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                 )}
               </div>
               <div className="flex-1 min-w-0">
-                <div className="flex items-baseline gap-2">
+                <div className="flex items-baseline gap-2 mb-1">
                   <span className={`font-semibold text-sm ${
                     msg.userType === 'agent' ? 'text-agent' : 'text-claw-500'
                   }`}>
                     {msg.username}
                   </span>
-                  <span className={`text-xs ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>{formatTime(msg.timestamp)}</span>
+                  <span className={`text-xs ${isDark ? 'text-gray-600' : 'text-gray-400'}`}>{formatTime(msg.timestamp)}</span>
                   <span className="text-xs text-red-400 flex items-center gap-1">
                     <AlertCircle className="w-3 h-3" />
                     Failed to send
@@ -958,19 +1005,19 @@ export default function MessageList({ messages, loading, currentUser, reactions,
                 <div className={`break-words ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
                   <MarkdownMessage text={msg.content} isDark={isDark} />
                 </div>
-                <div className="flex items-center gap-2 mt-1">
+                <div className="flex items-center gap-2 mt-2">
                   <button
                     onClick={() => onRetryMessage && onRetryMessage(msg)}
-                    className="flex items-center gap-1 px-2 py-1 bg-claw-600 hover:bg-claw-700 text-white text-xs rounded transition-colors"
+                    className="flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-claw-500 to-claw-600 hover:from-claw-400 hover:to-claw-500 text-white text-xs rounded-xl transition-all duration-200 shadow-sm hover:shadow-glow"
                   >
                     <RefreshCw className="w-3 h-3" />
                     Retry
                   </button>
                   <button
                     onClick={() => onCancelFailedMessage && onCancelFailedMessage(msg.id)}
-                    className={`flex items-center gap-1 px-2 py-1 text-xs rounded transition-colors ${
+                    className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-xl transition-all duration-200 ${
                       isDark
-                        ? 'bg-gray-700 hover:bg-gray-600 text-gray-300'
+                        ? 'bg-gray-700/50 hover:bg-gray-700 text-gray-300 border border-gray-600/50'
                         : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
                     }`}
                   >
@@ -988,12 +1035,12 @@ export default function MessageList({ messages, loading, currentUser, reactions,
       {showJumpButton && (
         <button
           onClick={scrollToBottom}
-          className="absolute bottom-4 right-4 flex items-center gap-2 px-4 py-2 bg-claw-600 hover:bg-claw-700 text-white rounded-full shadow-lg transition-all hover:scale-105 z-10"
+          className="absolute bottom-6 right-6 flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-claw-500 to-claw-600 hover:from-claw-400 hover:to-claw-500 text-white rounded-2xl shadow-glow hover:shadow-glow-lg transition-all duration-200 hover:scale-105 z-10"
         >
           <ChevronDown className="w-4 h-4" />
-          <span>Jump to bottom</span>
+          <span className="font-medium">Jump to bottom</span>
           {hasNewMessages && newMessageCount > 0 && (
-            <span className="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
+            <span className="bg-white/20 text-white text-xs font-bold px-2 py-0.5 rounded-full">
               {newMessageCount > 99 ? '99+' : newMessageCount}
             </span>
           )}
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 9c15695..13e2749 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -27,16 +27,16 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
   return (
     <>
       <div className={`w-64 flex flex-col transition-colors duration-200 ${
-        isDark ? 'bg-gray-800' : 'bg-white border-r border-gray-200'
-      }`}>
+        isDark ? 'bg-gray-800/95' : 'bg-white/95 border-r border-gray-200'
+      } backdrop-blur-sm`}>
         {/* Header */}
-        <div className={`p-4 border-b ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-claw-600 rounded-lg flex items-center justify-center">
-              <MessageSquare className="w-4 h-4 text-white" />
+        <div className={`p-4 border-b ${isDark ? 'border-gray-700/50' : 'border-gray-200'}`}>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-claw-500 to-claw-700 rounded-xl flex items-center justify-center shadow-glow">
+              <MessageSquare className="w-5 h-5 text-white" />
             </div>
             <div>
-              <h1 className={`font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>ClawChat</h1>
+              <h1 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>ClawChat</h1>
               <p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>{onlineUsers.length} online</p>
             </div>
           </div>
@@ -50,9 +50,10 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
             }`}>Channels</span>
             <button
               onClick={() => setShowCreateModal(true)}
-              className={`p-1 rounded transition-colors ${
+              className={`p-1.5 rounded-lg transition-all duration-200 hover:scale-110 ${
                 isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'
               }`}
+              title="Create channel"
             >
               <Plus className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
             </button>
@@ -67,22 +68,22 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
                 <button
                   key={channel.id}
                   onClick={() => onChannelSelect(channel.id)}
-                  className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors ${
+                  className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-left transition-all duration-200 ${
                     currentChannel === channel.id
-                      ? 'bg-claw-600 text-white'
+                      ? 'bg-gradient-to-r from-claw-500 to-claw-600 text-white shadow-glow'
                       : hasUnread
                         ? isDark
-                          ? 'text-white hover:bg-gray-700 font-medium'
-                          : 'text-gray-900 hover:bg-gray-100 font-medium'
+                          ? 'text-white hover:bg-gray-700/50 font-medium bg-gray-700/30'
+                          : 'text-gray-900 hover:bg-gray-100 font-medium bg-gray-50'
                         : isDark
-                          ? 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'
+                          ? 'text-gray-400 hover:bg-gray-700/50 hover:text-gray-200'
                           : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                   }`}
                 >
-                  <Hash className={`w-4 h-4 ${hasUnread ? 'text-claw-400' : ''}`} />
-                  <span className="flex-1 truncate">{channel.name}</span>
+                  <Hash className={`w-4 h-4 ${hasUnread ? 'text-claw-300' : ''}`} />
+                  <span className="flex-1 truncate font-medium">{channel.name}</span>
                   {hasUnread ? (
-                    <span className="bg-claw-500 text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center">
+                    <span className="bg-white/20 text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center shadow-sm">
                       {unreadCount > 99 ? '99+' : unreadCount}
                     </span>
                   ) : channel.memberCount > 0 ? (
@@ -102,18 +103,23 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
               {onlineUsers.map(u => (
                 <div
                   key={u.id}
-                  className={`flex items-center gap-2 px-3 py-2 ${
-                    isDark ? 'text-gray-400' : 'text-gray-600'
+                  className={`flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors ${
+                    isDark ? 'text-gray-400 hover:bg-gray-700/30' : 'text-gray-600 hover:bg-gray-100'
                   }`}
                 >
                   {u.type === 'agent' ? (
-                    <Bot className="w-4 h-4 text-agent" />
+                    <div className="relative">
+                      <Bot className="w-4 h-4 text-agent" />
+                      <div className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-agent rounded-full" />
+                    </div>
                   ) : (
-                    <Circle className="w-4 h-4 text-green-500 fill-green-500" />
+                    <div className="relative">
+                      <Circle className="w-4 h-4 text-green-500 fill-green-500" />
+                    </div>
                   )}
-                  <span className="truncate">{u.username}</span>
+                  <span className="truncate font-medium">{u.username}</span>
                   {u.type === 'agent' && (
-                    <span className="text-xs text-agent ml-auto">BOT</span>
+                    <span className="text-xs text-agent ml-auto bg-agent/10 px-1.5 py-0.5 rounded">BOT</span>
                   )}
                 </div>
               ))}
@@ -122,11 +128,13 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
         </div>
 
         {/* User Footer */}
-        <div className={`p-3 border-t ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
+        <div className={`p-3 border-t ${isDark ? 'border-gray-700/50' : 'border-gray-200'}`}>
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
-                user?.type === 'agent' ? 'bg-agent' : 'bg-claw-600'
+            <div className="flex items-center gap-2.5">
+              <div className={`w-9 h-9 rounded-xl flex items-center justify-center shadow-md ${
+                user?.type === 'agent' 
+                  ? 'bg-gradient-to-br from-agent to-agent-dark' 
+                  : 'bg-gradient-to-br from-claw-500 to-claw-700'
               }`}>
                 {user?.type === 'agent' ? (
                   <Bot className="w-4 h-4 text-white" />
@@ -135,16 +143,16 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
                 )}
               </div>
               <div className="overflow-hidden">
-                <p className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>{user?.username}</p>
+                <p className="text-sm font-semibold truncate text-white">{user?.username}</p>
                 <p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>{user?.type === 'agent' ? 'Agent' : 'Human'}</p>
               </div>
             </div>
             <button
               onClick={onLogout}
-              className={`p-2 rounded-lg transition-colors ${
+              className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
                 isDark 
-                  ? 'hover:bg-gray-700 text-gray-400' 
-                  : 'hover:bg-gray-100 text-gray-500'
+                  ? 'hover:bg-gray-700 text-gray-400 hover:text-red-400' 
+                  : 'hover:bg-gray-100 text-gray-500 hover:text-red-500'
               }`}
               title="Logout"
             >
@@ -156,21 +164,21 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
 
       {/* Create Channel Modal */}
       {showCreateModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className={`rounded-xl p-6 w-full max-w-md ${
-            isDark ? 'bg-gray-800' : 'bg-white'
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+          <div className={`rounded-2xl p-6 w-full max-w-md shadow-card-hover ${
+            isDark ? 'bg-gray-800/95 border border-gray-700/50' : 'bg-white/95 border border-gray-200'
           }`}>
             <h3 className={`text-lg font-bold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>Create Channel</h3>
             <form onSubmit={handleCreate} className="space-y-4">
               <div>
-                <label className={`block text-sm mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Channel Name</label>
+                <label className={`block text-sm mb-1.5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Channel Name</label>
                 <input
                   type="text"
                   value={newChannel.name}
                   onChange={(e) => setNewChannel({ ...newChannel, name: e.target.value })}
-                  className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-claw-500 ${
+                  className={`w-full px-4 py-2.5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-claw-500 focus:border-transparent transition-all ${
                     isDark 
-                      ? 'bg-gray-700 border-gray-600 text-white' 
+                      ? 'bg-gray-700/50 border-gray-600 text-white' 
                       : 'bg-gray-50 border-gray-300 text-gray-900'
                   }`}
                   placeholder="e.g., random"
@@ -178,34 +186,34 @@ export default function Sidebar({ channels, users, currentChannel, onChannelSele
                 />
               </div>
               <div>
-                <label className={`block text-sm mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Description</label>
+                <label className={`block text-sm mb-1.5 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>Description</label>
                 <input
                   type="text"
                   value={newChannel.description}
                   onChange={(e) => setNewChannel({ ...newChannel, description: e.target.value })}
-                  className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-claw-500 ${
+                  className={`w-full px-4 py-2.5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-claw-500 focus:border-transparent transition-all ${
                     isDark 
-                      ? 'bg-gray-700 border-gray-600 text-white' 
+                      ? 'bg-gray-700/50 border-gray-600 text-white' 
                       : 'bg-gray-50 border-gray-300 text-gray-900'
                   }`}
                   placeholder="What's this channel about?"
                 />
               </div>
-              <div className="flex gap-2">
+              <div className="flex gap-2 pt-2">
                 <button
                   type="button"
                   onClick={() => setShowCreateModal(false)}
-                  className={`flex-1 py-2 rounded-lg ${
+                  className={`flex-1 py-2.5 rounded-xl transition-all duration-200 ${
                     isDark 
-                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600' 
-                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                      ? 'bg-gray-700/50 text-gray-300 hover:bg-gray-700 border border-gray-600/50' 
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-300'
                   }`}
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
-                  className="flex-1 py-2 bg-claw-600 text-white rounded-lg hover:bg-claw-700"
+                  className="flex-1 py-2.5 bg-gradient-to-r from-claw-500 to-claw-600 text-white rounded-xl hover:shadow-glow transition-all duration-200"
                 >
                   Create
                 </button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d534b6d..9eb8e82 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -16,6 +16,19 @@
   html.light body {
     @apply bg-gray-100 text-gray-900;
   }
+
+  /* Smooth focus transitions */
+  *:focus {
+    @apply outline-none transition-all duration-200;
+  }
+
+  *:focus-visible {
+    @apply ring-2 ring-claw-500 ring-offset-2 ring-offset-gray-900;
+  }
+
+  html.light *:focus-visible {
+    @apply ring-offset-gray-100;
+  }
 }
 
 @layer utilities {
@@ -54,6 +67,33 @@
     background: rgba(0, 0, 0, 0.3);
   }
 
+  /* Glassmorphism utilities */
+  .glass {
+    @apply backdrop-blur-md bg-white/10 border border-white/20;
+  }
+
+  .glass-dark {
+    @apply backdrop-blur-md bg-gray-900/50 border border-gray-700/50;
+  }
+
+  /* Gradient text */
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-claw-400 to-claw-600;
+  }
+
+  .text-gradient-agent {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-agent-light to-agent;
+  }
+
+  /* Gradient backgrounds */
+  .bg-gradient-claw {
+    @apply bg-gradient-to-r from-claw-500 to-claw-600;
+  }
+
+  .bg-gradient-agent {
+    @apply bg-gradient-to-r from-agent-light to-agent;
+  }
+
   /* Toast animation */
   @keyframes slideIn {
     from {
@@ -122,6 +162,34 @@
     border-radius: 8px;
   }
 
+  /* Button glow effect */
+  .btn-glow {
+    @apply relative overflow-hidden;
+  }
+
+  .btn-glow::before {
+    content: '';
+    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full;
+  }
+
+  .btn-glow:hover::before {
+    @apply animate-shine;
+  }
+
+  /* Smooth transitions for interactive elements */
+  .transition-smooth {
+    @apply transition-all duration-200 ease-out;
+  }
+
+  /* Hover scale effect */
+  .hover-scale {
+    @apply transition-transform duration-200;
+  }
+
+  .hover-scale:hover {
+    @apply scale-105;
+  }
+
   /* Markdown content styles */
   .markdown-content p {
     margin-bottom: 0.5em;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 03a8160..f2efb98 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -25,7 +25,35 @@ export default {
           light: '#34d399',
           dark: '#059669',
         }
-      }
+      },
+      boxShadow: {
+        'glow': '0 0 20px rgba(14, 165, 233, 0.3)',
+        'glow-lg': '0 0 30px rgba(14, 165, 233, 0.4)',
+        'glow-agent': '0 0 20px rgba(16, 185, 129, 0.3)',
+        'glow-lg-agent': '0 0 30px rgba(16, 185, 129, 0.4)',
+        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
+        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'float': 'float 3s ease-in-out infinite',
+        'shine': 'shine 2s linear infinite',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-5px)' },
+        },
+        shine: {
+          '0%': { backgroundPosition: '200% center' },
+          '100%': { backgroundPosition: '-200% center' },
+        },
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
     },
   },
   plugins: [],