diff --git a/src/index.css b/src/index.css
index 5fb3313..f44c0d6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -64,6 +64,124 @@
 
 body {
   margin: 0;
+  background: linear-gradient(180deg, rgba(170, 59, 255, 0.08), transparent 220px) no-repeat var(--bg);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  min-height: 100vh;
+}
+
+.sidebar {
+  border-right: 1px solid var(--border);
+  padding: 20px 16px;
+  text-align: left;
+  background: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%);
+}
+
+.sidebar-title {
+  margin: 0 0 14px;
+}
+
+.sidebar-nav {
+  display: grid;
+  gap: 10px;
+}
+
+.sidebar-session {
+  margin-top: 20px;
+  font-size: 13px;
+}
+
+.page-content {
+  padding: 18px;
+  text-align: left;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: var(--shadow);
+  background: var(--bg);
+}
+
+.form-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.row-wrap {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.input {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  min-width: 120px;
+  background: transparent;
+  color: var(--text-h);
+}
+
+.input:focus {
+  outline: 2px solid var(--accent-border);
+  outline-offset: 1px;
+}
+
+.btn {
+  border: 1px solid var(--accent-border);
+  background: var(--accent);
+  color: #fff;
+  border-radius: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--text-h);
+}
+
+.btn-danger {
+  background: #dc2626;
+  border-color: #dc2626;
+}
+
+.muted {
+  color: var(--text);
+}
+
+.error-text {
+  color: #dc2626;
+  margin-top: 10px;
+}
+
+.list-reset {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+  background: color-mix(in srgb, var(--bg) 95%, var(--accent) 5%);
 }
 
 h1,
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 3d2bf2f..7bfbf0b 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -5,28 +5,28 @@ export default function AppLayout() {
   const { isAuthed, session, logout } = useAuth()
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '100vh' }}>
-      <aside style={{ borderRight: '1px solid #ddd', padding: 16 }}>
-        <h3>Fabric</h3>
-        <nav style={{ display: 'grid', gap: 8 }}>
-          <Link to="/workspace">工作台</Link>
-          <Link to="/chat">聊天</Link>
-          <Link to="/login">登录</Link>
+    <div className="app-shell">
+      <aside className="sidebar">
+        <h3 className="sidebar-title">Fabric</h3>
+        <nav className="sidebar-nav">
+          <Link to="/workspace">Workspace</Link>
+          <Link to="/chat">Chat</Link>
+          <Link to="/login">Login</Link>
         </nav>
-        <div style={{ marginTop: 16, fontSize: 12 }}>
+        <div className="sidebar-session">
           {isAuthed ? (
             <>
-              <div>{session?.user.email}</div>
-              <button onClick={() => logout()} style={{ marginTop: 6 }}>
-                登出
+              <div className="muted">{session?.user.email}</div>
+              <button onClick={() => logout()} className="btn btn-secondary" style={{ marginTop: 8 }}>
+                Sign out
               </button>
             </>
           ) : (
-            <span>未登录</span>
+            <span className="muted">Not signed in</span>
           )}
         </div>
       </aside>
-      <main style={{ padding: 16 }}>
+      <main className="page-content">
         <Outlet />
       </main>
     </div>
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index 41631d7..9a3c2c7 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -127,7 +127,7 @@ export default function ChatPage() {
       setMessages(res.data.items ?? [])
       setPageInfo(res.data.page ?? null)
     } catch {
-      setError('消息拉取失败')
+      setError('Failed to load messages')
     } finally {
       setLoading(false)
     }
@@ -144,7 +144,7 @@ export default function ChatPage() {
       socket?.emit('typing.stop', { channelId })
       setContent('')
     } catch {
-      setError('发送失败')
+      setError('Failed to send message')
     }
   }
 
@@ -158,7 +158,7 @@ export default function ChatPage() {
       setEditingContent('')
       await pullMessages()
     } catch {
-      setError('编辑失败')
+      setError('Failed to edit message')
     }
   }
 
@@ -169,7 +169,7 @@ export default function ChatPage() {
       await guildApi().delete(`/channels/${channelId}/messages/${messageId}`)
       await pullMessages()
     } catch {
-      setError('删除失败')
+      setError('Failed to delete message')
     }
   }
 
@@ -201,41 +201,44 @@ export default function ChatPage() {
   }, [channelId, socket, socketState])
 
   return (
-    <section>
-      <h2>聊天</h2>
-      <p>Guild: {guildId || '-'}</p>
-      <p>Socket: {socketState}</p>
-      <p>在线人数: {onlineCount}</p>
-      {loading ? <p>加载中...</p> : null}
-      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
-      {typingUsers.length ? <p>正在输入: {typingUsers.join(', ')}</p> : null}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
-        <input value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
-        <input value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
-        <input value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
-        <button onClick={pullMessages}>拉取</button>
+    <section className="panel">
+      <h2>Chat</h2>
+      <p className="muted">Guild: {guildId || '-'}</p>
+      <p className="muted">Socket: {socketState}</p>
+      <p className="muted">Online users: {onlineCount}</p>
+      {loading ? <p className="muted">Loading...</p> : null}
+      {error ? <p className="error-text">{error}</p> : null}
+      {typingUsers.length ? <p className="muted">Typing: {typingUsers.join(', ')}</p> : null}
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
+        <input className="input" value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
+        <input className="input" value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
+        <input className="input" value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
+        <button className="btn btn-secondary" onClick={pullMessages}>Fetch</button>
       </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="输入消息" />
-        <button onClick={sendMessage}>发送</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="Type a message" />
+        <button className="btn" onClick={sendMessage}>Send</button>
       </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
-        <input value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="新内容" />
-        <button onClick={editMessage}>编辑</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
+        <input className="input" value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="Updated content" />
+        <button className="btn btn-secondary" onClick={editMessage}>Edit</button>
       </div>
-      <ul>
+      <ul className="list-reset">
         {messages.map((m) => (
-          <li key={m.messageId}>
-            #{m.seq} {m.content} ({m.messageId}){' '}
-            <button type="button" onClick={() => deleteMessage(m.messageId)}>
-              删除
+          <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
+            <div>
+              <strong>#{m.seq}</strong> {m.content}
+            </div>
+            <div className="muted">{m.messageId}</div>
+            <button className="btn btn-danger" type="button" onClick={() => deleteMessage(m.messageId)}>
+              Delete
             </button>
           </li>
         ))}
       </ul>
-      {!loading && !messages.length ? <p>暂无消息</p> : null}
+      {!loading && !messages.length ? <p className="muted">No messages yet</p> : null}
       {pageInfo ? (
         <p>
           next_expected_seq: {pageInfo.nextExpectedSeq ?? '-'} | highest_committed_seq: {pageInfo.highestCommittedSeq ?? '-'} |
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 0880215..238c9a3 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -19,35 +19,38 @@ export default function LoginPage() {
       await login(centerApiBase.trim(), centerApiKey.trim(), email, password)
       navigate('/workspace')
     } catch {
-      setError('登录失败，请检查账号密码')
+      setError('Login failed. Please check your email and password.')
     }
   }
 
   return (
-    <section>
-      <h2>登录</h2>
-      {isAuthed ? <p>当前用户：{session?.user.email}</p> : null}
-      <form onSubmit={onSubmit} style={{ display: 'grid', gap: 8, maxWidth: 420 }}>
+    <section className="panel">
+      <h2>Login</h2>
+      {isAuthed ? <p className="muted">Current user: {session?.user.email}</p> : null}
+      <form onSubmit={onSubmit} className="form-grid" style={{ maxWidth: 460 }}>
         <input
+          className="input"
           value={centerApiBase}
           onChange={(e) => setCenterApiBase(e.target.value)}
           placeholder="Center API Base (e.g. http://localhost:7001/api)"
         />
         <input
+          className="input"
           value={centerApiKey}
           onChange={(e) => setCenterApiKey(e.target.value)}
           placeholder="Center API Key"
         />
-        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
+        <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
         <input
+          className="input"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
           type="password"
         />
-        <button type="submit">登录</button>
+        <button className="btn" type="submit">Sign in</button>
       </form>
-      <p>{error}</p>
+      {error ? <p className="error-text">{error}</p> : null}
     </section>
   )
 }
diff --git a/src/pages/WorkspacePage.tsx b/src/pages/WorkspacePage.tsx
index 72e4048..c8ae4ef 100644
--- a/src/pages/WorkspacePage.tsx
+++ b/src/pages/WorkspacePage.tsx
@@ -22,7 +22,7 @@ export default function WorkspacePage() {
       const res = await axios.get(`${session.centerApiBase}/healthz`)
       setHealth(JSON.stringify(res.data))
     } catch {
-      setHealth('center healthz 访问失败')
+      setHealth('Failed to access center healthz')
     }
   }
 
@@ -45,26 +45,29 @@ export default function WorkspacePage() {
   }
 
   return (
-    <section>
-      <h2>工作台</h2>
-      <p>Center: {session?.centerApiBase || '-'}</p>
-      <div style={{ marginBottom: 8 }}>
-        <button type="button" onClick={checkCenterHealth}>
-          测试 Center healthz
+    <section className="panel">
+      <h2>Workspace</h2>
+      <p className="muted">Center: {session?.centerApiBase || '-'}</p>
+      <div style={{ marginBottom: 12 }}>
+        <button className="btn" type="button" onClick={checkCenterHealth}>
+          Test Center healthz
         </button>
       </div>
-      <p>{health}</p>
+      {health ? <p className="muted">{health}</p> : null}
 
-      <ul>
+      <ul className="list-reset">
         {(session?.guilds ?? []).map((g) => (
-          <li key={g.nodeId} style={{ marginTop: 8 }}>
-            <strong>{g.name}</strong> ({g.nodeId}) - {g.endpoint}{' '}
-            <button type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
-              加载频道
+          <li key={g.nodeId} className="card" style={{ marginTop: 12 }}>
+            <div>
+              <strong>{g.name}</strong> <span className="muted">({g.nodeId})</span>
+            </div>
+            <div className="muted">{g.endpoint}</div>
+            <button className="btn btn-secondary" type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
+              Load channels
             </button>
-            <ul>
+            <ul className="list-reset" style={{ marginTop: 10 }}>
               {(channelsByGuild[g.nodeId] ?? []).map((c) => (
-                <li key={c.id}>
+                <li key={c.id} style={{ marginTop: 6 }}>
                   <Link
                     to={`/chat?guildId=${encodeURIComponent(g.nodeId)}&channelId=${encodeURIComponent(c.id)}`}
                   >